1+ //selecting all required elements
2+ const start_btn = document . querySelector ( ".start_btn button" ) ;
3+ const info_box = document . querySelector ( ".info_box" ) ;
4+ const exit_btn = info_box . querySelector ( ".buttons .quit" ) ;
5+ const continue_btn = info_box . querySelector ( ".buttons .restart" ) ;
6+ const quiz_box = document . querySelector ( ".quiz_box" ) ;
7+ const result_box = document . querySelector ( ".result_box" ) ;
8+ const option_list = document . querySelector ( ".option_list" ) ;
9+ const time_line = document . querySelector ( "header .time_line" ) ;
10+ const timeText = document . querySelector ( ".timer .time_left_txt" ) ;
11+ const timeCount = document . querySelector ( ".timer .timer_sec" ) ;
12+
13+ // if startQuiz button clicked
14+ start_btn . onclick = ( ) => {
15+ info_box . classList . add ( "activeInfo" ) ; //show info box
16+ }
17+
18+ // if exitQuiz button clicked
19+ exit_btn . onclick = ( ) => {
20+ info_box . classList . remove ( "activeInfo" ) ; //hide info box
21+ }
22+
23+ // if continueQuiz button clicked
24+ continue_btn . onclick = ( ) => {
25+ info_box . classList . remove ( "activeInfo" ) ; //hide info box
26+ quiz_box . classList . add ( "activeQuiz" ) ; //show quiz box
27+ showQuetions ( 0 ) ; //calling showQestions function
28+ queCounter ( 1 ) ; //passing 1 parameter to queCounter
29+ startTimer ( 15 ) ; //calling startTimer function
30+ startTimerLine ( 0 ) ; //calling startTimerLine function
31+ }
32+
33+ let timeValue = 15 ;
34+ let que_count = 0 ;
35+ let que_numb = 1 ;
36+ let userScore = 0 ;
37+ let counter ;
38+ let counterLine ;
39+ let widthValue = 0 ;
40+
41+ const restart_quiz = result_box . querySelector ( ".buttons .restart" ) ;
42+ const quit_quiz = result_box . querySelector ( ".buttons .quit" ) ;
43+
44+ // if restartQuiz button clicked
45+ restart_quiz . onclick = ( ) => {
46+ quiz_box . classList . add ( "activeQuiz" ) ; //show quiz box
47+ result_box . classList . remove ( "activeResult" ) ; //hide result box
48+ timeValue = 15 ;
49+ que_count = 0 ;
50+ que_numb = 1 ;
51+ userScore = 0 ;
52+ widthValue = 0 ;
53+ showQuetions ( que_count ) ; //calling showQestions function
54+ queCounter ( que_numb ) ; //passing que_numb value to queCounter
55+ clearInterval ( counter ) ; //clear counter
56+ clearInterval ( counterLine ) ; //clear counterLine
57+ startTimer ( timeValue ) ; //calling startTimer function
58+ startTimerLine ( widthValue ) ; //calling startTimerLine function
59+ timeText . textContent = "Time Left" ; //change the text of timeText to Time Left
60+ next_btn . classList . remove ( "show" ) ; //hide the next button
61+ }
62+
63+ // if quitQuiz button clicked
64+ quit_quiz . onclick = ( ) => {
65+ window . location . reload ( ) ; //reload the current window
66+ }
67+
68+ const next_btn = document . querySelector ( "footer .next_btn" ) ;
69+ const bottom_ques_counter = document . querySelector ( "footer .total_que" ) ;
70+
71+ // if Next Que button clicked
72+ next_btn . onclick = ( ) => {
73+ if ( que_count < questions . length - 1 ) { //if question count is less than total question length
74+ que_count ++ ; //increment the que_count value
75+ que_numb ++ ; //increment the que_numb value
76+ showQuetions ( que_count ) ; //calling showQestions function
77+ queCounter ( que_numb ) ; //passing que_numb value to queCounter
78+ clearInterval ( counter ) ; //clear counter
79+ clearInterval ( counterLine ) ; //clear counterLine
80+ startTimer ( timeValue ) ; //calling startTimer function
81+ startTimerLine ( widthValue ) ; //calling startTimerLine function
82+ timeText . textContent = "Time Left" ; //change the timeText to Time Left
83+ next_btn . classList . remove ( "show" ) ; //hide the next button
84+ } else {
85+ clearInterval ( counter ) ; //clear counter
86+ clearInterval ( counterLine ) ; //clear counterLine
87+ showResult ( ) ; //calling showResult function
88+ }
89+ }
90+
91+ // getting questions and options from array
92+ function showQuetions ( index ) {
93+ const que_text = document . querySelector ( ".que_text" ) ;
94+
95+ //creating a new span and div tag for question and option and passing the value using array index
96+ let que_tag = '<span>' + questions [ index ] . numb + ". " + questions [ index ] . question + '</span>' ;
97+ let option_tag = '<div class="option"><span>' + questions [ index ] . options [ 0 ] + '</span></div>'
98+ + '<div class="option"><span>' + questions [ index ] . options [ 1 ] + '</span></div>'
99+ + '<div class="option"><span>' + questions [ index ] . options [ 2 ] + '</span></div>'
100+ + '<div class="option"><span>' + questions [ index ] . options [ 3 ] + '</span></div>' ;
101+ que_text . innerHTML = que_tag ; //adding new span tag inside que_tag
102+ option_list . innerHTML = option_tag ; //adding new div tag inside option_tag
103+
104+ const option = option_list . querySelectorAll ( ".option" ) ;
105+
106+ // set onclick attribute to all available options
107+ for ( i = 0 ; i < option . length ; i ++ ) {
108+ option [ i ] . setAttribute ( "onclick" , "optionSelected(this)" ) ;
109+ }
110+ }
111+ // creating the new div tags which for icons
112+ let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>' ;
113+ let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>' ;
114+
115+ //if user clicked on option
116+ function optionSelected ( answer ) {
117+ clearInterval ( counter ) ; //clear counter
118+ clearInterval ( counterLine ) ; //clear counterLine
119+ let userAns = answer . textContent ; //getting user selected option
120+ let correcAns = questions [ que_count ] . answer ; //getting correct answer from array
121+ const allOptions = option_list . children . length ; //getting all option items
122+
123+ if ( userAns == correcAns ) { //if user selected option is equal to array's correct answer
124+ userScore += 1 ; //upgrading score value with 1
125+ answer . classList . add ( "correct" ) ; //adding green color to correct selected option
126+ answer . insertAdjacentHTML ( "beforeend" , tickIconTag ) ; //adding tick icon to correct selected option
127+ console . log ( "Correct Answer" ) ;
128+ console . log ( "Your correct answers = " + userScore ) ;
129+ } else {
130+ answer . classList . add ( "incorrect" ) ; //adding red color to correct selected option
131+ answer . insertAdjacentHTML ( "beforeend" , crossIconTag ) ; //adding cross icon to correct selected option
132+ console . log ( "Wrong Answer" ) ;
133+
134+ for ( i = 0 ; i < allOptions ; i ++ ) {
135+ if ( option_list . children [ i ] . textContent == correcAns ) { //if there is an option which is matched to an array answer
136+ option_list . children [ i ] . setAttribute ( "class" , "option correct" ) ; //adding green color to matched option
137+ option_list . children [ i ] . insertAdjacentHTML ( "beforeend" , tickIconTag ) ; //adding tick icon to matched option
138+ console . log ( "Auto selected correct answer." ) ;
139+ }
140+ }
141+ }
142+ for ( i = 0 ; i < allOptions ; i ++ ) {
143+ option_list . children [ i ] . classList . add ( "disabled" ) ; //once user select an option then disabled all options
144+ }
145+ next_btn . classList . add ( "show" ) ; //show the next button if user selected any option
146+ }
147+
148+ function showResult ( ) {
149+ info_box . classList . remove ( "activeInfo" ) ; //hide info box
150+ quiz_box . classList . remove ( "activeQuiz" ) ; //hide quiz box
151+ result_box . classList . add ( "activeResult" ) ; //show result box
152+ const scoreText = result_box . querySelector ( ".score_text" ) ;
153+ if ( userScore > 3 ) { // if user scored more than 3
154+ //creating a new span tag and passing the user score number and total question number
155+ let scoreTag = '<span>and congrats! , You got <p>' + userScore + '</p> out of <p>' + questions . length + '</p></span>' ;
156+ scoreText . innerHTML = scoreTag ; //adding new span tag inside score_Text
157+ }
158+ else if ( userScore > 1 ) { // if user scored more than 1
159+ let scoreTag = '<span>and nice , You got <p>' + userScore + '</p> out of <p>' + questions . length + '</p></span>' ;
160+ scoreText . innerHTML = scoreTag ;
161+ }
162+ else { // if user scored less than 1
163+ let scoreTag = '<span>and sorry , You got only <p>' + userScore + '</p> out of <p>' + questions . length + '</p></span>' ;
164+ scoreText . innerHTML = scoreTag ;
165+ }
166+ }
167+
168+ function startTimer ( time ) {
169+ counter = setInterval ( timer , 1000 ) ;
170+ function timer ( ) {
171+ timeCount . textContent = time ; //changing the value of timeCount with time value
172+ time -- ; //decrement the time value
173+ if ( time < 9 ) { //if timer is less than 9
174+ let addZero = timeCount . textContent ;
175+ timeCount . textContent = "0" + addZero ; //add a 0 before time value
176+ }
177+ if ( time < 0 ) { //if timer is less than 0
178+ clearInterval ( counter ) ; //clear counter
179+ timeText . textContent = "Time Off" ; //change the time text to time off
180+ const allOptions = option_list . children . length ; //getting all option items
181+ let correcAns = questions [ que_count ] . answer ; //getting correct answer from array
182+ for ( i = 0 ; i < allOptions ; i ++ ) {
183+ if ( option_list . children [ i ] . textContent == correcAns ) { //if there is an option which is matched to an array answer
184+ option_list . children [ i ] . setAttribute ( "class" , "option correct" ) ; //adding green color to matched option
185+ option_list . children [ i ] . insertAdjacentHTML ( "beforeend" , tickIconTag ) ; //adding tick icon to matched option
186+ console . log ( "Time Off: Auto selected correct answer." ) ;
187+ }
188+ }
189+ for ( i = 0 ; i < allOptions ; i ++ ) {
190+ option_list . children [ i ] . classList . add ( "disabled" ) ; //once user select an option then disabled all options
191+ }
192+ next_btn . classList . add ( "show" ) ; //show the next button if user selected any option
193+ }
194+ }
195+ }
196+
197+ function startTimerLine ( time ) {
198+ counterLine = setInterval ( timer , 29 ) ;
199+ function timer ( ) {
200+ time += 1 ; //upgrading time value with 1
201+ time_line . style . width = time + "px" ; //increasing width of time_line with px by time value
202+ if ( time > 549 ) { //if time value is greater than 549
203+ clearInterval ( counterLine ) ; //clear counterLine
204+ }
205+ }
206+ }
207+
208+ function queCounter ( index ) {
209+ //creating a new span tag and passing the question number and total question
210+ let totalQueCounTag = '<span><p>' + index + '</p> of <p>' + questions . length + '</p> Questions</span>' ;
211+ bottom_ques_counter . innerHTML = totalQueCounTag ; //adding new span tag inside bottom_ques_counter
212+ }
0 commit comments