-
Notifications
You must be signed in to change notification settings - Fork 0
/
Quiz-Game.js
143 lines (122 loc) · 3.64 KB
/
Quiz-Game.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
const question = document.getElementById('question');
const choices = Array.from(document.getElementsByClassName('choice-text'));
const progressText = document.getElementById('progressText');
const scoreEl = document.getElementById('score');
const progressBarFull = document.getElementById('progressBarFull');
const timerEl = document.getElementById('timer');
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuesions = [];
let questions = [
{
question: "What is the correct JavaScript syntax to write 'Hello World'?",
choice1: 'response.write("Hello World")',
choice2: '"Hello World"',
choice3: 'document.write("Hello World")',
choice4: '("Hello World")',
answer: 3
},
{
question: 'Where is the correct place to insert a JavaScript?',
choice1: 'Both the <head> section and the <body> section are correct',
choice2: 'The <body> section',
choice3: 'The <head> section',
choice4: 'The <td> tag',
answer: 1
},
{
question: 'Inside which HTML element do we put the JavaScript?',
choice1: '<javascript>',
choice2: ' <js>',
choice3: '<script>',
choice4: '<scripting>',
answer: 3
},
{
question:
"What is the correct syntax for referring to an external script called 'xxx.js'?",
choice1: '<script src="xxx.js">',
choice2: '<script name="xxx.js">',
choice3: '<script href="xxx.js">',
choice4: '<script value="xxx.js">',
answer: 1
},
{
question: 'How do you create a function?',
choice1: 'function:myFunction()',
choice2: 'function=myFunction()',
choice3: 'function myFunction()',
choice4: 'myFunction():function',
answer: 3
}
];
var CORRECT_BONUS = 10;
var MAX_QUESTIONS = 5;
var leftTime = 25;
var timer;
startQuizGame = () => {
questionCounter = 0;
score = 0;
availableQuesions = [...questions];
getNewQuestion();
startTimer();
};
startTimer = () => {
timer = setInterval(() => {
timerEl.innerText = leftTime;
console.log(leftTime);
leftTime--;
if (!leftTime) {
endGame();
}
}, 1000);
};
endGame = () => {
localStorage.setItem('mostRecentScore', score);
window.location.href = 'Result.html';
};
getNewQuestion = () => {
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
endGame();
}
questionCounter++;
progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
currentQuestion = availableQuesions[questionIndex];
question.innerText = currentQuestion.question;
choices.forEach(choice => {
const number = choice.dataset['number'];
choice.innerText = currentQuestion['choice' + number];
});
availableQuesions.splice(questionIndex, 1);
acceptingAnswers = true;
};
choices.forEach(choice => {
choice.addEventListener('click', e => {
if (!acceptingAnswers) return;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset['number'];
const classToApply =
selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
if (classToApply === 'correct') {
incrementScore(CORRECT_BONUS);
leftTime += 3;
clearInterval(timer);
startTimer();
}
selectedChoice.parentElement.classList.add(classToApply);
setTimeout(() => {
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
}, 1000);
});
});
incrementScore = num => {
score += num;
scoreEl.innerText = score;
};
startQuizGame();