-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
190 lines (151 loc) · 4.53 KB
/
script.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
var startButton = document.querySelector(".button");
var timerHtml = document.querySelector(".timer");
var quizQuestion =document.getElementById(".question");
var timeLeft = 0;
var intervalId;
var score = 0;
var numCorrect = 0;
var runningQuestion = 0;
document.getElementById("questionbox").style.display = "none";
var myQuestions = [
{
question: "question I will ask 1Which of the following is correct about features of JavaScript?",
answers: {
a: 'JavaScript is is complementary to and integrated with HTML.',
b: 'JavaScript is open and cross-platform',
c: 'All of the above'
},
correctAnswer: 'c'
},
{
question: "Which built-in method adds one or more elements to the end of an array and returns the new length of the array",
answers: {
a: 'push()',
b: 'put()',
c: 'last()',
},
correctAnswer: 'a'
},
{
question: "Which built-in method retuns the calling string value converted to lower case letters?",
answers: {
a: 'toLower',
b: 'toLowerCase()',
c: 'changeCase(case)'
},
correctAnswer: 'b'
}
];
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
showQuestions();
function showQuestions(){
// we'll need a place to store the output and the answer choices
var output = [];
var answers;
let q = myQuestions[runningQuestion];
// finally combine our output list into one string of html and put it on the page
quizContainer.innerHTML = q.question;
option1.innerHTML = q.answers.a;
option2.innerHTML = q.answers.b;
option3.innerHTML = q.answers.c;
}
// show questions right away
// on submit, show results
submitButton.onclick = function(){
//showResults(questions, quizContainer, resultsContainer);
endGame();
}
function checkAnswer(answer){
if( answer == myQuestions[runningQuestion].correctAnswer){
// answer is correct
score++;
// change progress color to green
answerIsCorrect();
}else{
// answer is wrong
// change progress color to red
answerIsWrong();
}
// count = 0;
}
var lastQuestion = myQuestions.length - 1;
function answerIsWrong() {
timeLeft -= 10;
timerHtml.textContent= timeLeft;
if(runningQuestion < lastQuestion){
runningQuestion++;
showQuestions();
}else{
// end the quiz and show the score
clearInterval(intervalId);
resultsContainer.innerHTML = "<p>"+ timeLeft +"</p>";
var quizContent = `
<h2>Game over!</h2>
`;
//
document.getElementById("questionbox").innerHTML = quizContent;
}
// next();
}
function answerIsCorrect() {
score += 10;
timeLeft += 10;
if(timeLeft >75){
timeLeft = 75;
timerHtml.textContent= timeLeft;
}
timerHtml.textContent= timeLeft;
// next();
if(runningQuestion < lastQuestion){
runningQuestion++;
showQuestions();
}else{
// end the quiz and show the score
resultsContainer.innerHTML = "<p>"+ timeLeft +"</p>";
clearInterval(intervalId);
var quizContent = `
<h2>Game over!</h2>
`;
//
document.getElementById("questionbox").innerHTML = quizContent;
}
}
startButton.addEventListener("click", startQuiz);
function startQuiz() {
document.getElementById("questionbox").style.display = "block";
timeLeft = 75;
intervalId = setInterval(function () {
timeLeft--;
timerHtml.textContent= timeLeft;
if (timeLeft == 0){
clearTimeout(intervalId);
timeLeft = 0;
//clearInterval(timerHtml);
//endGame();
}
}, 1000);
// next();
}
function scoreRender(){
// calculate the amount of question percent answered by the user
// const scorePerCent = Math.round(100 * score/myQuestions.length);
// choose the image based on the scorePerCent
resultsContainer.innerHTML = "<p>"+ timeLeft +"</p>";
//endGame();
// scoreDiv.innerHTML = "<img src="+ img +">";
// scoreDiv.innerHTML += "<p>"+ scorePerCent +"%</p>";
}
function endGame() {
prompt("high score!")
clearInterval(timerHtml)
var quizContent = `
<h2>Game over!</h2>
<h3>You got a ` + numCorrect+ ` marks</h3>
<h3>That means you got ` + numCorrect+ ` questions correct!</h3>
<input type="text" id="name" placeholder="First name">
<button onclick="setScore()">Set score!</button>`;
//
document.getElementById("quiz").innerHTML = quizContent;
}