Skip to content

Commit 049c353

Browse files
XodTechXodTech
committed
Merge branch 'refactor/js-separation' into 'main'
2 parents 659f704 + 4cf78e2 commit 049c353

File tree

3 files changed

+137
-123
lines changed

3 files changed

+137
-123
lines changed

‎src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="stylesheet" href="css/quiz.css">
1111
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
1212
<script src = "./js/main.js"></script>
13+
<script src = "./js/generators.js"></script>
1314
</head>
1415
<body onload="fetchQuizList()">
1516
<h3 id="title" class="title">YAQA by XodTech</h3>

‎src/js/generators.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
function parseQuizJson(quizJson, index) {
2+
let obj = quizJson[index];
3+
return {
4+
obj: obj,
5+
question: `${index+1}.${obj.question}`,
6+
answer: obj.answer,
7+
difficulty: obj.difficulty,
8+
length: quizJson.length,
9+
}
10+
}
11+
12+
function genFlashcard(quizJson, index) {
13+
let { obj, question, answer, difficulty, length } = parseQuizJson(quizJson, index);
14+
$("#quiz-window").html(`
15+
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
16+
<b class="question-counter">${index+1}/${length}</b>
17+
<h2 id="content">${question}</h2>
18+
<button class="btn" id="reveal-btn">Reveal</button>
19+
`);
20+
21+
$("#reveal-btn").on("click", function(event) {
22+
if ($(this).text() === "Reveal") {
23+
$("#content").text(answer);
24+
$(this).text("Back");
25+
$("#next-btn").text("Next →");
26+
} else {
27+
$("#content").text(question);
28+
$(this).text("Reveal");
29+
$("#next-btn").text("Skip");
30+
};
31+
});
32+
}
33+
34+
function genOneLine(quizJson, index) {
35+
let { obj, question, answer, difficulty, length } = parseQuizJson(quizJson, index);
36+
$("#quiz-window").html(`
37+
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
38+
<b class="question-counter">${index+1}/${length}</b>
39+
<h2>${question}</h2>
40+
<input type = "text" id = "quiz-input" placeholder = "Provide answer here...">
41+
<button class="btn" id="reveal-btn">Reveal</button>
42+
`);
43+
let quiz_input = $("#quiz-input")
44+
45+
$("#reveal-btn").on("click", function() {
46+
quiz_input.prop("placeholder",answer);
47+
});
48+
49+
quiz_input.on("change", function() {
50+
if (quiz_input.val() === answer) {
51+
quiz_input.css("border-color", "green");
52+
quiz_input.css("box-shadow", "0 0 5px rgba(0, 255, 0, 0.9");
53+
$("#next-btn").text("Next →");
54+
}else if (quiz_input.val() === "") {
55+
quiz_input.removeAttr("style");
56+
}else {
57+
quiz_input.css("border-color", "red");
58+
quiz_input.css("box-shadow", "0 0 5px rgba(255, 0, 0, 0.9)");
59+
$("#next-btn").text("Skip");
60+
};
61+
});
62+
}
63+
64+
function genTrueFalse(quizJson, index) {
65+
let { obj, question, answer, difficulty, length } = parseQuizJson(quizJson, index);
66+
$("#quiz-window").html(`
67+
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
68+
<b class="question-counter">${index+1}/${length}</b>
69+
<h2>${question}</h2>
70+
<div class="tf-container">
71+
<button class="tf-btn true-btn" id="true-btn">True</button>
72+
<button class="tf-btn false-btn" id="false-btn">False</button>
73+
</div>
74+
`);
75+
76+
if (answer === true) {
77+
$("#true-btn").on("click", function() {
78+
$("#next-btn").text("Next →");
79+
$("#false-btn").addClass("disabled");
80+
});
81+
} else if (answer === false) {
82+
$("#false-btn").on("click", function() {
83+
$("#next-btn").text("Next →");
84+
$("#false-btn").addClass("disabled");
85+
});
86+
} else {
87+
alert(`Answer format in question with index: ${index} is incorrect.`);
88+
};
89+
}
90+
91+
function genMultipleChoice(quizJson, index) {
92+
let { obj, question, answer, difficulty, length } = parseQuizJson(quizJson, index);
93+
$("#quiz-window").html(`
94+
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
95+
<b class="question-counter">${index+1}/${length}</b>
96+
<h2>${question}</h2>
97+
<div id="mch-container" class="mch-container">
98+
</div>
99+
`);
100+
101+
obj.choices.forEach(function(choice, index) {
102+
let dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
103+
let letter = dict[index];
104+
$("#mch-container").append(`<button id="${letter}-btn">${letter}.${choice}</button>`);
105+
106+
if (choice === obj.answer) {
107+
$(`#${letter}-btn`).on("click", function() {
108+
$(this).css("background-color", "#2BE028");
109+
$("#next-btn").text("Next →");
110+
});
111+
}else {
112+
$(`#${letter}-btn`).on("click", function() {
113+
$(this).css("background-color", "#FC2E05");
114+
});
115+
};
116+
});
117+
}

‎src/js/main.js‎

Lines changed: 19 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
function toggleModal() {
22
event.stopPropagation();
3-
let modal_container = $("#add-modal");
4-
modal_container.toggle();
3+
let modal_container = $("#add-modal"); modal_container.toggle();
54
}
65

76
function closeModal() {
@@ -135,139 +134,36 @@ function quizHandler(name) {
135134

136135
let obj = quizJson[index];
137136

138-
let question = `${index+1}.${obj.question}`;
139-
let answer = obj.answer;
140-
let difficulty = obj.difficulty;
141-
let length = quizJson.length;
137+
function spawnNextBtn() {
138+
$("#quiz-window").append(`
139+
<button id="next-btn" class="next-btn">Skip</button>
140+
`)
141+
$("#next-btn").on("click", function() {
142+
index++;
143+
generateQuizQuestion();
144+
});
145+
}
142146

143147
switch (obj.type) {
144148
case "flashcard":
145-
$("#quiz-window").html(`
146-
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
147-
<b class="question-counter">${index+1}/${length}</b>
148-
<h2 id="content">${question}</h2>
149-
<button class="btn" id="reveal-btn">Reveal</button>
150-
<button id="next-btn" class="next-btn">Skip</button>
151-
`);
152-
153-
$("#reveal-btn").on("click", function(event) {
154-
if ($(this).text() === "Reveal") {
155-
$("#content").text(answer);
156-
$(this).text("Back");
157-
$("#next-btn").text("Next →");
158-
} else {
159-
$("#content").text(question);
160-
$(this).text("Reveal");
161-
$("#next-btn").text("Skip");
162-
};
163-
});
164-
165-
$("#next-btn").on("click", function() {
166-
index++;
167-
generateQuizQuestion();
168-
});
149+
genFlashcard(quizJson, index);
150+
spawnNextBtn();
169151
break;
170152

171153
case "one-line":
172-
$("#quiz-window").html(`
173-
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
174-
<b class="question-counter">${index+1}/${length}</b>
175-
<h2>${question}</h2>
176-
<input type = "text" id = "quiz-input" placeholder = "Provide answer here...">
177-
<button class="btn" id="reveal-btn">Reveal</button>
178-
<button id="next-btn" class="next-btn">Skip</button>
179-
`);//NOTE: Make it button with
180-
let quiz_input = $("#quiz-input")
181-
182-
$("#reveal-btn").on("click", function() {
183-
quiz_input.prop("placeholder",answer);
184-
});
185-
186-
quiz_input.on("change", function() {
187-
if (quiz_input.val() === answer) {
188-
quiz_input.css("border-color", "green");
189-
quiz_input.css("box-shadow", "0 0 5px rgba(0, 255, 0, 0.9");
190-
$("#next-btn").text("Next →");
191-
}else if (quiz_input.val() === "") {
192-
quiz_input.removeAttr("style");
193-
}else {
194-
quiz_input.css("border-color", "red");
195-
quiz_input.css("box-shadow", "0 0 5px rgba(255, 0, 0, 0.9)");
196-
$("#next-btn").text("Skip");
197-
};
198-
});
199-
200-
$("#next-btn").on("click", function() {
201-
index++;
202-
generateQuizQuestion();
203-
});
154+
genOneLine(quizJson, index);
155+
spawnNextBtn();
204156
break;
205157
case "true/false":
206-
$("#quiz-window").html(`
207-
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
208-
<b class="question-counter">${index+1}/${length}</b>
209-
<h2>${question}</h2>
210-
<div class="tf-container">
211-
<button class="tf-btn true-btn" id="true-btn">True</button>
212-
<button class="tf-btn false-btn" id="false-btn">False</button>
213-
</div>
214-
<button id="next-btn" class="next-btn">Skip</button>
215-
`);//NOTE: Make it button with
216-
217-
if (answer === true) {
218-
$("#true-btn").on("click", function() {
219-
$("#next-btn").text("Next →");
220-
$("#false-btn").addClass("disabled");
221-
});
222-
} else if (answer === false) {
223-
$("#false-btn").on("click", function() {
224-
$("#next-btn").text("Next →");
225-
$("#false-btn").addClass("disabled");
226-
});
227-
} else {
228-
alert(`Answer format in question with index: ${index} is incorrect.`);
229-
index++;
230-
generateQuizQuestion();
231-
};
232-
$("#next-btn").on("click", function() {
233-
index++;
234-
generateQuizQuestion();
235-
});
158+
genTrueFalse(quizJson, index);
159+
spawnNextBtn();
236160
break;
237161
case "multiple-choice":
238-
$("#quiz-window").html(`
239-
<b class="difficulty-indicator ${difficulty}">${difficulty}</b>
240-
<b class="question-counter">${index+1}/${length}</b>
241-
<h2>${question}</h2>
242-
<div id="mch-container" class="mch-container">
243-
</div>
244-
<button id="next-btn" class="next-btn">Skip</button>
245-
`);
246-
247-
obj.choices.forEach(function(choice, index) {
248-
let dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
249-
let letter = dict[index];
250-
$("#mch-container").append(`<button id="${letter}-btn">${letter}.${choice}</button>`);
251-
252-
if (choice === obj.answer) {
253-
$(`#${letter}-btn`).on("click", function() {
254-
$(this).css("background-color", "#2BE028");
255-
$("#next-btn").text("Next →");
256-
});
257-
}else {
258-
$(`#${letter}-btn`).on("click", function() {
259-
$(this).css("background-color", "#FC2E05");
260-
});
261-
};
262-
});
263-
264-
$("#next-btn").on("click", function() {
265-
index++;
266-
generateQuizQuestion();
267-
});
162+
genMultipleChoice(quizJson, index);
163+
spawnNextBtn();
268164
break;
269165
default:
270-
alert(`Type '${obj.type}' is not supported`); //NOTE: Skipping...
166+
alert(`Type '${obj.type}' is not supported`);
271167
index++;
272168
generateQuizQuestion();
273169
};

0 commit comments

Comments
 (0)