1+ //#region QuestionsStatic
2+ let questionsArray = [
3+ {
4+ "question" : "Inside which HTML element do we put the JavaScript??" ,
5+ "choice1" : "<script>" ,
6+ "choice2" : "<javascript>" ,
7+ "choice3" : "<js>" ,
8+ "choice4" : "<scripting>" ,
9+ "answer" : 1
10+ } ,
11+ {
12+ "question" : "What is the correct syntax for referring to an external script called 'xxx.js'?" ,
13+ "choice1" : "<script href='xxx.js'>" ,
14+ "choice2" : "<script name='xxx.js'>" ,
15+ "choice3" : "<script src='xxx.js'>" ,
16+ "choice4" : "<script file='xxx.js'>" ,
17+ "answer" : 3
18+ } ,
19+ {
20+ "question" : " How do you write 'Hello World' in an alert box?" ,
21+ "choice1" : "msgBox('Hello World');" ,
22+ "choice2" : "alertBox('Hello World');" ,
23+ "choice3" : "msg('Hello World');" ,
24+ "choice4" : "alert('Hello World');" ,
25+ "answer" : 4
26+ } ,
27+ {
28+
29+ "question" : "What does GHz stand for?" ,
30+ "answer" : 4 ,
31+ "choice4" :"Gigahertz" ,
32+ "choice1" :"Gigahotz" ,
33+ "choice2" :"Gigahetz" ,
34+ "choice3" :"Gigahatz"
35+ } ,
36+ {
37+ "question" : "What amount of bits commonly equals one byte?" ,
38+ "answer" : 3 ,
39+ "choice4" :"64" ,
40+ "choice1" :"1" ,
41+ "choice2" :"2" ,
42+ "choice3" :"8"
43+ } ,
44+ {
45+ "question" : "In the programming language Java, which of these keywords would you put on a variable to make sure it doesn't get modified?" ,
46+ "answer" : 4 ,
47+ "choice4" :"Final" ,
48+ "choice1" :"Static" ,
49+ "choice2" :"Private" ,
50+ "choice3" :"Public"
51+
52+ } ,
53+ {
54+ "question" : "Which data structure does FILO apply to?" ,
55+ "answer" : 1 ,
56+ "choice4" :"stack" ,
57+ "choice1" :"queue" ,
58+ "choice2" :"heap" ,
59+ "choice3" :"tree"
60+ }
61+ ] ;
62+
63+ //#endregion
64+
65+ // how many question are there in the game
66+ const MAX_QUESTION = questionsArray . length ;
67+ const SCORE_BONUS = 10 ;
68+ const questionElement = document . querySelector ( ".question p" ) ;
69+ const option1Element = document . querySelector ( "#opt1" ) ;
70+ const option2Element = document . querySelector ( "#opt2" ) ;
71+ const option3Element = document . querySelector ( "#opt3" ) ;
72+ const option4Element = document . querySelector ( "#opt4" ) ;
73+ const progressBarElement = document . querySelector ( ".progressBarFull" ) ;
74+ const progressTextElement = document . querySelector ( ".progressText" ) ;
75+ const scoreTextElement = document . querySelector ( ".scoreContent p" ) ;
76+ const timerPara = document . querySelector ( ".timerRegion p" ) ;
77+ //const questionTimerPara=document.querySelector(".questionTimer p");
78+
79+ var lastQuestionAnswered ;
80+ var score ;
81+ var timer = [ 0 , 0 , 0 , 0 ] ;
82+ var questionTimer = [ 0 , 0 , 0 ] ;
83+ var timerIsRunning = false ;
84+ var intervalQuestion ;
85+ var intervalTimer ;
86+ var intervalSingleQuestion ;
87+ var timeoutSingleQuestion ;
88+ //when window loads initialize the game
89+
90+ lastQuestionAnswered = - 1 ;
91+ score = 0 ;
92+ startGame ( ) ;
93+
94+ //start the game
95+ function startGame ( ) {
96+ window . localStorage . removeItem ( 'currentScore' ) ;
97+ window . localStorage . removeItem ( 'currentTiming' ) ;
98+ LoadNextQuestion ( ) ;
99+ if ( ! timerIsRunning ) {
100+ timerIsRunning = true ;
101+ intervalTimer = setInterval ( startTimer , 10 ) ;
102+ }
103+ //intervalSingleQuestion=setInterval(questionTimerFun,10);
104+ }
105+
106+ //setTimeout(LoadNextQuestion,5000);
107+
108+ function resetQuestionTimer ( ) {
109+ var questionTimer = [ 0 , 0 , 0 ] ;
110+ clearInterval ( intervalSingleQuestion ) ; //clear the question interval first
111+ intervalSingleQuestion = setInterval ( questionTimerFun , 10 ) ; // set it back. so that clock starts from zero -TODO
112+ LoadNextQuestion ( ) ;
113+ }
114+ //this is global timer
115+ function startTimer ( ) {
116+ //console.log("starttimer"+ timer[3] +" "+timer[0]);
117+ var currentTime = padLeadingZero ( timer [ 0 ] ) + ":" + padLeadingZero ( timer [ 1 ] ) + ":" + padLeadingZero ( timer [ 2 ] ) ;
118+ timerPara . innerText = " Timer : " + currentTime ;
119+ timer [ 3 ] ++ ;
120+
121+ timer [ 0 ] = Math . floor ( ( timer [ 3 ] / 100 ) / 60 ) ;
122+ timer [ 1 ] = Math . floor ( ( timer [ 3 ] / 100 ) - ( timer [ 0 ] * 60 ) ) ;
123+ timer [ 2 ] = Math . floor ( timer [ 3 ] - ( timer [ 1 ] * 100 ) - ( timer [ 0 ] * 6000 ) ) ;
124+
125+ }
126+
127+ //this is for particular question
128+ function questionTimerFun ( ) {
129+ //question timer
130+ //console.log("starttimer"+ timer[1] +" "+timer[0]+" "+timer[2]);
131+ var currentQuestionTime = padLeadingZero ( questionTimer [ 1 ] )
132+
133+ questionTimerPara . innerText = " Question Timer : " + currentQuestionTime ;
134+ questionTimer [ 2 ] ++ ;
135+ questionTimer [ 0 ] = Math . floor ( ( questionTimer [ 2 ] / 100 ) / 60 ) ;
136+ questionTimer [ 1 ] = Math . floor ( ( questionTimer [ 2 ] / 100 ) - ( questionTimer [ 0 ] * 60 ) ) ;
137+ //questionTimer[1]=Math.floor(timer[2] - (timer[0] * 6000));
138+ }
139+
140+ function padLeadingZero ( params ) {
141+ if ( + params <= 9 )
142+ return "0" + params ;
143+ else
144+ return params ;
145+ }
146+
147+ //load the next question
148+ function LoadNextQuestion ( ) {
149+ lastQuestionAnswered ++ ;
150+ clearInterval ( intervalQuestion ) ;
151+ //console.log("LoadnextQuestion "+lastQuestionAnswered+" "+ ((+lastQuestionAnswered+1)/MAX_QUESTION)*100);
152+ progressBarElement . style . width = `${ ( ( + lastQuestionAnswered ) / MAX_QUESTION ) * 100 } ;
153+ progressTextElement . innerText = ` Question ${ lastQuestionAnswered + 1 } ${ MAX_QUESTION } ;
154+ if ( lastQuestionAnswered < MAX_QUESTION ) {
155+
156+ questionElement . innerText = questionsArray [ lastQuestionAnswered ] . question ;
157+ option1Element . innerText = questionsArray [ lastQuestionAnswered ] . choice1 ;
158+ option2Element . innerText = questionsArray [ lastQuestionAnswered ] . choice2 ;
159+ option3Element . innerText = questionsArray [ lastQuestionAnswered ] . choice3 ;
160+ option4Element . innerText = questionsArray [ lastQuestionAnswered ] . choice4 ;
161+ }
162+
163+ }
164+
165+ //check the answer
166+ function checkAnswer ( event ) {
167+
168+ let correctAnswer = questionsArray [ lastQuestionAnswered ] . answer ; //this is correct answer
169+
170+ let userAns = this . id . substr ( - 1 ) ; //this answer user has given
171+ const d = event . target ;
172+
173+ if ( + userAns === correctAnswer ) {
174+ d . setAttribute ( "style" , "color:white;" ) ;
175+ d . parentElement . setAttribute ( "style" , "background-color :green; color:white;" ) ;
176+ score += SCORE_BONUS ;
177+ scoreTextElement . innerText = ` Score : ${ score }
178+ }
179+ else {
180+ d . setAttribute ( "style" , "color:white;" ) ;
181+ d . parentElement . setAttribute ( "style" , "background-color :red; " ) ;
182+ }
183+
184+ if ( lastQuestionAnswered < MAX_QUESTION - 1 ) {
185+ intervalQuestion = setInterval ( function ( ) {
186+ d . removeAttribute ( "style" ) ;
187+ d . parentElement . removeAttribute ( "style" ) ;
188+ LoadNextQuestion ( ) ;
189+ } , 500 ) ;
190+ }
191+ if ( lastQuestionAnswered == MAX_QUESTION - 1 ) {
192+ //console.log("checkAnswer "+lastQuestionAnswered);
193+ progressBarElement . style . width = `${ ( ( + lastQuestionAnswered + 1 ) / MAX_QUESTION ) * 100 } ;
194+ progressTextElement . innerText = ` Question ${ lastQuestionAnswered + 1 } ${ MAX_QUESTION } ;
195+ clearInterval ( intervalTimer ) ;
196+ setInterval ( function ( ) {
197+ document . location . href = "End.html" ;
198+ window . localStorage . setItem ( 'currentScore' , score ) ;
199+ //console.log(timerPara.innerText);
200+ window . localStorage . setItem ( 'currentTiming' , timerPara . innerText . substr ( 8 , timerPara . innerText . length ) ) ;
201+ } , 1000 ) ;
202+ }
203+ //lastQuestionAnswered++;
204+
205+ }
206+
207+ //setInterval(LoadNextQuestion,5000);
208+
209+ //************* event binding section *********************/
210+ //bind the function to click event
211+ option1Element . addEventListener ( "click" , checkAnswer , false ) ;
212+ option2Element . addEventListener ( "click" , checkAnswer , false ) ;
213+ option3Element . addEventListener ( "click" , checkAnswer , false ) ;
214+ option4Element . addEventListener ( "click" , checkAnswer , false ) ;
215+
216+
217+
218+
219+
0 commit comments