-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
82 lines (70 loc) · 2.19 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const questionWindow = document.querySelector('.question-window');
const qList = document.querySelector('.question-list');
const choices = document.querySelector('.choices');
const start = document.querySelector('.start');
const submitAns = document.querySelector('.new-question');
const p = document.querySelector('p');
const corrAns = document.querySelector('.corr-ans');
const playAgain = document.querySelector('.play-again');
const finalScore = document.querySelector('.final-score');
let quiz;
let scoreColor = 'text-danger';
const newGame = () => {
quiz = new Quiz(qList);
quiz.getQs();
};
const showAnswer = () => {
corrAns.classList.remove('d-none');
corrAns.innerText = `The correct answer was: ${quiz.correctAnswer}`;
// setTimeout(() => (corrAns.innerText = ''), 2500);
};
newGame();
submitAns.addEventListener('submit', (e) => {
e.preventDefault();
const answers = document.getElementsByName('answer');
let selected = '';
for (var i = 0; i < answers.length; i++) {
if (answers[i].checked) {
selected = answers[i].value;
}
}
// PROMPT USER TO SELECT AN ANSWER IF ONE ISN'T SELECTED
if (!selected.length) alert('Please choose an answer');
// INCREMENT SCORE AND UPDATE UI IF SELECTED IS CORRECT
else if (selected === quiz.correctAnswer.replace(/ /g, '-')) {
quiz.score++;
showAnswer();
if (quiz.questions.length) {
quiz.render();
}
// DISPLAY SCORE IF THERE ARE NO MORE QUESTIONS IN CURRENT QUIZ CLASS
else {
quiz.endGame();
// NEW LINE KEEP THE ELEMENTS IN POSITION WHILE REMOVING CORRECT ANSWER
setTimeout(() => (corrAns.innerText = '\n'), 2500);
}
}
// UPDATE UI IF SELECTED IS INCORRECT
else {
if (quiz.questions.length) {
showAnswer();
quiz.render();
}
// DISPLAY SCORE IF THERE ARE NO MORE QUESTIONS IN CURRENT QUIZ CLASS
else {
showAnswer();
quiz.endGame();
setTimeout(() => (corrAns.innerText = '\n'), 2500);
}
}
});
start.addEventListener('click', (e) => {
e.preventDefault();
quiz.render();
start.classList.add('d-none');
p.classList.remove('d-none');
});
playAgain.addEventListener('click', (e) => {
e.preventDefault();
location.reload();
});