1+ const container = document . querySelector ( '.container' ) ;
2+ const questionBox = document . querySelector ( '.question' ) ;
3+ const choicesBox = document . querySelector ( '.choices' ) ;
4+ const nextBtn = document . querySelector ( '.nextBtn' ) ;
5+ const scoreCard = document . querySelector ( '.scoreCard' ) ;
6+ const alert = document . querySelector ( '.alert' ) ;
7+ const startBtn = document . querySelector ( '.startBtn' ) ;
8+ const timer = document . querySelector ( '.timer' ) ;
9+
10+
11+ // Make an array of objects that stores question, choices of question and answer
12+ const quiz = [
13+ {
14+ question :"Q. Which of the following is not a CSS box model property?" ,
15+ choices :[ "margin" , "padding" , "border-radius" , "border-collapse" ] ,
16+ answer :"border-collapse"
17+ } ,
18+ {
19+ question :"Q. Which of the following is not a valid way to declare a function in JavaScript?" ,
20+ choices :[ "function myFunction() {}" , " let myFunction = function() {};" , "myFunction: function() {}" , "const myFunction = () => {};" ] ,
21+ answer :"myFunction: function() {}"
22+ } ,
23+ {
24+ question :"Q. Which of the following is not a JavaScript data type?" ,
25+ choices :[ "string" , "boolean" , "object" , "float" ] ,
26+ answer :"float"
27+ } ,
28+ {
29+ question :"Q. What is the purpose of the this keyword in JavaScript?" ,
30+ choices :[ "It refers to the current function." , "It refers to the current object." , "It refers to the parent object." , " It is used for comments." ] ,
31+ answer :"It refers to the current object."
32+ }
33+ ] ;
34+
35+ // Making Variables
36+ let currentQuestionIndex = 0 ;
37+ let score = 0 ;
38+ let quizOver = false ;
39+ let timeLeft = 15 ;
40+ let timerID = null ;
41+
42+ // Arrow Function to Show Questions
43+ const showQuestions = ( ) => {
44+ const questionDetails = quiz [ currentQuestionIndex ] ;
45+ questionBox . textContent = questionDetails . question ;
46+
47+ choicesBox . textContent = "" ;
48+ for ( let i = 0 ; i < questionDetails . choices . length ; i ++ ) {
49+ const currentChoice = questionDetails . choices [ i ] ;
50+ const choiceDiv = document . createElement ( 'div' ) ;
51+ choiceDiv . textContent = currentChoice ;
52+ choiceDiv . classList . add ( 'choice' ) ;
53+ choicesBox . appendChild ( choiceDiv ) ;
54+
55+ choiceDiv . addEventListener ( 'click' , ( ) => {
56+ if ( choiceDiv . classList . contains ( 'selected' ) ) {
57+ choiceDiv . classList . remove ( 'selected' ) ;
58+ }
59+ else {
60+ choiceDiv . classList . add ( 'selected' ) ;
61+ }
62+ } ) ;
63+ }
64+
65+ if ( currentQuestionIndex < quiz . length ) {
66+ startTimer ( ) ;
67+ }
68+ }
69+
70+ // Function to check answers
71+ const checkAnswer = ( ) => {
72+ const selectedChoice = document . querySelector ( '.choice.selected' ) ;
73+ if ( selectedChoice . textContent === quiz [ currentQuestionIndex ] . answer ) {
74+ // alert("Correct Answer!");
75+ displayAlert ( "Correct Answer!" ) ;
76+ score ++ ;
77+ }
78+ else {
79+ // alert("Wrong answer");
80+ displayAlert ( `Wrong Answer!${ quiz [ currentQuestionIndex ] . answer } ) ;
81+ }
82+ timeLeft = 15 ;
83+ currentQuestionIndex ++ ;
84+ if ( currentQuestionIndex < quiz . length ) {
85+ showQuestions ( ) ;
86+ }
87+ else {
88+ stopTimer ( ) ;
89+ showScore ( ) ;
90+ }
91+ }
92+
93+ // Function to show score
94+ const showScore = ( ) => {
95+ questionBox . textContent = "" ;
96+ choicesBox . textContent = "" ;
97+ scoreCard . textContent = `You Scored${ score } ${ quiz . length } ;
98+ displayAlert ( "You have completed this quiz!" ) ;
99+ nextBtn . textContent = "Play Again" ;
100+ quizOver = true ;
101+ timer . style . display = "none" ;
102+ }
103+
104+ // Function to Show Alert
105+ const displayAlert = ( msg ) => {
106+ alert . style . display = "block" ;
107+ alert . textContent = msg ;
108+ setTimeout ( ( ) => {
109+ alert . style . display = "none" ;
110+ } , 2000 ) ;
111+ }
112+
113+ // Function to Start Timer
114+ const startTimer = ( ) => {
115+ clearInterval ( timerID ) ; // Check for any exist timers
116+ timer . textContent = timeLeft ;
117+
118+ const countDown = ( ) => {
119+ timeLeft -- ;
120+ timer . textContent = timeLeft ;
121+ if ( timeLeft === 0 ) {
122+ const confirmUser = confirm ( "Time Up!!! Do you want to play the quiz again" ) ;
123+ if ( confirmUser ) {
124+ timeLeft = 15 ;
125+ startQuiz ( ) ;
126+ }
127+ else {
128+ startBtn . style . display = "block" ;
129+ container . style . display = "none" ;
130+ return ;
131+ }
132+ }
133+ }
134+ timerID = setInterval ( countDown , 1000 ) ;
135+ }
136+
137+ // Function to Stop Timer
138+ const stopTimer = ( ) => {
139+ clearInterval ( timerID ) ;
140+ }
141+
142+ // Function to shuffle question
143+ const shuffleQuestions = ( ) => {
144+ for ( let i = quiz . length - 1 ; i > 0 ; i -- ) {
145+ const j = Math . floor ( Math . random ( ) * ( i + 1 ) ) ;
146+ [ quiz [ i ] , quiz [ j ] ] = [ quiz [ j ] , quiz [ i ] ] ;
147+ }
148+ currentQuestionIndex = 0 ;
149+ showQuestions ( ) ;
150+ }
151+
152+ // Function to Start Quiz
153+ const startQuiz = ( ) => {
154+ timeLeft = 15 ;
155+ timer . style . display = "flex" ;
156+ shuffleQuestions ( ) ;
157+ }
158+
159+ // Adding Event Listener to Start Button
160+ startBtn . addEventListener ( 'click' , ( ) => {
161+ startBtn . style . display = "none" ;
162+ container . style . display = "block" ;
163+ startQuiz ( ) ;
164+ } ) ;
165+
166+ nextBtn . addEventListener ( 'click' , ( ) => {
167+ const selectedChoice = document . querySelector ( '.choice.selected' ) ;
168+ if ( ! selectedChoice && nextBtn . textContent === "Next" ) {
169+ // alert("Select your answer");
170+ displayAlert ( "Select your answer" ) ;
171+ return ;
172+ }
173+ if ( quizOver ) {
174+ nextBtn . textContent = "Next" ;
175+ scoreCard . textContent = "" ;
176+ currentQuestionIndex = 0 ;
177+ quizOver = false ;
178+ score = 0 ;
179+ startQuiz ( ) ;
180+ }
181+ else {
182+ checkAnswer ( ) ;
183+ }
184+ } ) ;