├── elements-helper.js
├── index.html
├── index.js
├── quiz-app-ss.jpg
├── quiz.js
└── styles.css


/elements-helper.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | class QuizElementsHelper {
  4 |   /**
  5 |    *
  6 |    * @param app {Element} - the element of the whole app
  7 |    * @param quizCard {Element} - the wrapper of the quiz details
  8 |    * @param questionCard {Element} - the wrapper of the questions card
  9 |    * @param resultCard {Element} - the wrapper of the result card
 10 |    * @param quiz {Quiz} - an instance of the Quiz class
 11 |    */
 12 |   constructor(app, quizCard, questionCard, resultCard, quiz) {
 13 |     this.app = app;
 14 |     this.quiz = quiz;
 15 |     this.quizCard = quizCard;
 16 |     this.questionCard = questionCard;
 17 |     this.resultCard = resultCard;
 18 | 
 19 |     // find & assign elements
 20 |     this.assignElements();
 21 | 
 22 |     // initialize the listeners
 23 |     this.initListeners();
 24 | 
 25 |     // show quiz details card
 26 |     this.showQuizCard();
 27 |   }
 28 | 
 29 |   /**
 30 |    * find the inner elements of each card and assign to it.
 31 |    */
 32 |   assignElements() {
 33 |     // Quiz Card Elements
 34 |     this.quizCard.startBtn = this.quizCard.querySelector(
 35 |       ".quiz-details__start-btn"
 36 |     );
 37 |     this.quizCard.titleElm = this.quizCard.querySelector(
 38 |       ".quiz-details__title"
 39 |     );
 40 |     this.quizCard.descriptionElm = this.quizCard.querySelector(
 41 |       ".quiz-details__description"
 42 |     );
 43 |     this.quizCard.metaQCElm = this.quizCard.querySelector(
 44 |       ".quiz-details__meta.--qc strong"
 45 |     );
 46 |     this.quizCard.metaTimeElm = this.quizCard.querySelector(
 47 |       ".quiz-details__meta.--t strong"
 48 |     );
 49 | 
 50 |     // Question Card Elements
 51 |     this.questionCard.progressRemainingTimeElm = document.querySelector(
 52 |       ".questions-card__remaining-time"
 53 |     );
 54 |     this.questionCard.progressQuestionCountElm = document.querySelector(
 55 |       ".questions-card__q-count"
 56 |     );
 57 |     this.questionCard.progressbarElm = document.querySelector(
 58 |       ".questions-card__progress .--value"
 59 |     );
 60 |     this.questionCard.questionTitleElm = document.getElementById(
 61 |       "question-title"
 62 |     );
 63 |     this.questionCard.optionOneElm = document.querySelector(
 64 |       "#option-one ~ label"
 65 |     );
 66 |     this.questionCard.optionTwoElm = document.querySelector(
 67 |       "#option-two ~ label"
 68 |     );
 69 |     this.questionCard.optionThreeElm = document.querySelector(
 70 |       "#option-three ~ label"
 71 |     );
 72 |     this.questionCard.optionFourElm = document.querySelector(
 73 |       "#option-four ~ label"
 74 |     );
 75 |     this.questionCard.nextBtn = this.app.querySelector("#next-btn");
 76 |     this.questionCard.stopBtn = this.app.querySelector("#stop-btn");
 77 | 
 78 |     // Result Card Elements
 79 |     this.resultCard.gotoHome = this.resultCard.querySelector("#go-to-home");
 80 |     this.resultCard.scoreElm = this.resultCard.querySelector("#score");
 81 |   }
 82 | 
 83 |   /**
 84 |    * initialize the required listeners of the elements
 85 |    */
 86 |   initListeners() {
 87 |     this.quizCard.startBtn.addEventListener(
 88 |       "click",
 89 |       this.showQuestionsCard.bind(this)
 90 |     );
 91 |     this.questionCard.nextBtn.addEventListener(
 92 |       "click",
 93 |       this.nextBtnHandler.bind(this)
 94 |     );
 95 |     this.questionCard.stopBtn.addEventListener(
 96 |       "click",
 97 |       this.stopBtnHandler.bind(this)
 98 |     );
 99 |     this.resultCard.gotoHome.addEventListener(
100 |       "click",
101 |       this.hideResultCard.bind(this)
102 |     );
103 |   }
104 | 
105 |   /**
106 |    * Show the details card of the quiz
107 |    */
108 |   showQuizCard() {
109 |     this.quizCard.titleElm.innerText = this.quiz.title;
110 |     this.quizCard.descriptionElm.innerText = this.quiz.description;
111 |     this.quizCard.metaQCElm.innerText = this.quiz._questions.length;
112 |     this.quizCard.metaTimeElm.innerText = this.quiz._time;
113 | 
114 |     this.quizCard.classList.add("show");
115 |   }
116 | 
117 |   /**
118 |    * hide the quiz card
119 |    */
120 |   hideQuizCard() {
121 |     this.quizCard.classList.remove("show");
122 |   }
123 | 
124 |   /**
125 |    * Show the question card
126 |    */
127 |   showQuestionsCard() {
128 |     this.hideQuizCard();
129 | 
130 |     this.questionCard.classList.add("show");
131 |     this.questionCard.classList.remove("time-over");
132 | 
133 |     this.startQuiz();
134 |   }
135 | 
136 |   /**
137 |    * hide the question card
138 |    */
139 |   hideQuestionsCard() {
140 |     this.questionCard.classList.remove("show");
141 |   }
142 | 
143 |   /**
144 |    * Handle the visibility of the result card
145 |    * @param result - the object of quiz result thet contains score property
146 |    */
147 |   showResultCard(result) {
148 |     this.hideQuestionsCard();
149 | 
150 |     if (this.resultCard.scoreElm && result)
151 |       this.resultCard.scoreElm.innerText = Math.floor(result.score * 10) / 10;
152 | 
153 |     this.resultCard.classList.add("show");
154 |   }
155 | 
156 |   /**
157 |    * hide the result card
158 |    */
159 |   hideResultCard() {
160 |     this.resultCard.classList.remove("show");
161 |     this.showQuizCard();
162 |   }
163 | 
164 |   /**
165 |    * Handle the starting of the quiz and control the status of it.
166 |    */
167 |   startQuiz() {
168 |     this.resetPreviousQuiz();
169 |     this.quiz.reset();
170 |     const firstQuestion = this.quiz.start();
171 |     if (firstQuestion) {
172 |       this.parseNextQuestion(firstQuestion);
173 |     }
174 | 
175 |     this.questionCard.nextBtn.innerText = "Next";
176 | 
177 |     this._setProgressTicker();
178 |   }
179 | 
180 |   /**
181 |    * initialize the quiz time progress on every time that quiz starts
182 |    * to control the progressbar and remaining time
183 |    * @private
184 |    */
185 |   _setProgressTicker() {
186 |     this.remainingTimeInterval = setInterval(() => {
187 |       const qTime = this.quiz.timeDetails;
188 |       if (qTime && qTime.remainingTime) {
189 |         // update remaining time span
190 |         this.questionCard.progressRemainingTimeElm.innerText =
191 |           qTime.remainingTime;
192 | 
193 |         // update progressbar
194 |         let progressPercent =
195 |           ((qTime.quizTime - qTime.elapsedTime) * 100) / qTime.quizTime;
196 |         if (progressPercent < 0) progressPercent = 0;
197 |         this.questionCard.progressbarElm.style.width = progressPercent + "%";
198 |       }
199 | 
200 |       // clear & stop interval when time over
201 |       if (qTime.timeOver) {
202 |         this.questionCard.classList.add("time-over");
203 |         this.questionCard.nextBtn.innerText = "Show Result";
204 |         clearInterval(this.remainingTimeInterval);
205 |       }
206 |     }, 1000);
207 |   }
208 | 
209 |   /**
210 |    * this method putting the question in the question card
211 |    * @param question - the object of the question that received from this.quiz
212 |    */
213 |   parseNextQuestion(question) {
214 |     const selectedOption = document.querySelector(
215 |       "input[name=question-option]:checked"
216 |     );
217 | 
218 |     this.questionCard.progressQuestionCountElm.innerText = `Question ${this.quiz
219 |       ._currentQuestionIndex + 1}/${this.quiz._questions.length}`;
220 |     this.questionCard.questionTitleElm.setAttribute(
221 |       "data-qn",
222 |       `Q ${this.quiz._currentQuestionIndex + 1}:`
223 |     );
224 |     this.questionCard.questionTitleElm.innerText = question.title;
225 | 
226 |     this.questionCard.optionOneElm.innerText = question.options[0];
227 |     this.questionCard.optionTwoElm.innerText = question.options[1];
228 |     this.questionCard.optionThreeElm.innerText = question.options[2];
229 |     this.questionCard.optionFourElm.innerText = question.options[3];
230 | 
231 |     // reset pre selected options on every next
232 |     if (selectedOption) selectedOption.checked = false;
233 |   }
234 | 
235 |   /**
236 |    * To reset the previous quiz status before restarting it.
237 |    */
238 |   resetPreviousQuiz() {
239 |     this.quiz.stop();
240 |     clearInterval(this.remainingTimeInterval);
241 | 
242 |     this.resultCard.scoreElm.innerText = 0;
243 |     this.questionCard.progressRemainingTimeElm.innerText = "00:00";
244 |     this.questionCard.progressbarElm.style.width = "100%";
245 |   }
246 | 
247 |   /**
248 |    * this will call when next button clicked
249 |    */
250 |   nextBtnHandler() {
251 |     const selectedOption = document.querySelector(
252 |       "input[name=question-option]:checked"
253 |     );
254 | 
255 |     let result;
256 |     if (!selectedOption) {
257 |       result = this.quiz.skipCurrentQuestion();
258 |     } else {
259 |       result = this.quiz.answerCurrentQuestion(selectedOption.value);
260 |     }
261 | 
262 |     if (result.finished || result.timeOver) {
263 |       this.showResultCard(result.result);
264 |     } else if (result) {
265 |       this.parseNextQuestion(result.nextQ);
266 |     }
267 |   }
268 | 
269 |   /**
270 |    * this will call when stop button clicked
271 |    */
272 |   stopBtnHandler() {
273 |     this.resetPreviousQuiz();
274 |     this.showResultCard();
275 |   }
276 | }
277 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700&display=swap" rel="stylesheet">
 7 |     <link rel="stylesheet" href="styles/styles.css">
 8 |     <title>Simple Quiz</title>
 9 | </head>
10 | <body>
11 | <div id="quiz-app">
12 | 
13 |     <section class="center-card quiz-details" id="quiz-details">
14 |         <div class="quiz-details__question-icon">
15 |             <svg viewBox="-10 -10 540 540" width="85px" height="85px">
16 |                 <path d="m437.019531 74.980469c-48.351562-48.351563-112.640625-74.980469-181.019531-74.980469-61.554688 0-121.039062 22.160156-167.5 62.402344-3.175781 2.75-3.519531 7.554687-.769531 10.726562 2.75 3.175782 7.550781 3.519532 10.726562.769532 43.695313-37.847657 99.644531-58.691407 157.542969-58.691407 64.316406 0 124.785156 25.046875 170.265625 70.527344s70.527344 105.949219 70.527344 170.265625-25.046875 124.785156-70.527344 170.265625-105.949219 70.527344-170.265625 70.527344-124.785156-25.046875-170.265625-70.527344-70.527344-105.949219-70.527344-170.265625c0-59.824219 22.082031-117.175781 62.183594-161.484375 2.816406-3.113281 2.574219-7.921875-.539063-10.742187-3.113281-2.816407-7.921874-2.578126-10.738281.539062-42.632812 47.109375-66.113281 108.082031-66.113281 171.6875 0 68.378906 26.628906 132.667969 74.980469 181.019531 48.351562 48.351563 112.640625 74.980469 181.019531 74.980469s132.667969-26.628906 181.019531-74.980469c48.351563-48.351562 74.980469-112.640625 74.980469-181.019531s-26.628906-132.667969-74.980469-181.019531zm0 0"/>
17 |                 <path d="m246.332031 347.125c-23.480469 0-42.585937 19.3125-42.585937 43.046875s19.105468 43.046875 42.585937 43.046875c11.527344 0 22.382813-4.585938 30.566407-12.917969 7.929687-8.074219 12.480468-19.054687 12.480468-30.128906 0-11.378906-4.511718-22.15625-12.699218-30.347656-8.191407-8.1875-18.96875-12.699219-30.347657-12.699219zm0 70.886719c-15.097656 0-27.378906-12.488281-27.378906-27.839844s12.28125-27.839844 27.378906-27.839844c15.089844 0 27.835938 12.75 27.835938 27.839844s-12.746094 27.839844-27.835938 27.839844zm0 0"/>
18 |                 <path d="m319.605469 228.371094c3.167969 2.765625 7.96875 2.4375 10.730469-.726563 18.324218-20.992187 27.617187-42.96875 27.617187-65.316406 0-23.566406-10.585937-44.929687-29.804687-60.152344-19.320313-15.300781-45.539063-23.386719-75.828126-23.386719-37.46875 0-60.644531 12.648438-73.484374 23.257813-15.527344 12.828125-24.800782 30.03125-24.800782 46.015625 0 10.390625 4.253906 19.542969 11.980469 25.773438 6.359375 5.128906 14.828125 8.070312 23.242187 8.070312 14.496094 0 20.851563-9.371094 25.957032-16.902344 6.46875-9.535156 12.574218-18.542968 35.71875-18.542968 7.933594 0 33.820312 1.710937 33.820312 23.695312 0 16.59375-15.339844 28.371094-28.875 38.761719-3.34375 2.5625-6.5 4.988281-9.445312 7.488281-15.585938 13.433594-33.480469 34.183594-33.480469 75.726562 0 23.074219 5.597656 38.445313 32.921875 38.445313 12.101562 0 21.238281-2.742187 27.15625-8.148437 4.96875-4.539063 7.597656-10.878907 7.597656-18.335938 0-22.414062 0-33.664062 22.859375-51.542969l.390625-.304687c1.007813-.785156 2.171875-1.695313 3.453125-2.730469 3.269531-2.636719 3.78125-7.421875 1.144531-10.691406-2.636718-3.269531-7.421874-3.78125-10.691406-1.144531-1.214844.980468-2.3125 1.835937-3.261718 2.578124l-.402344.3125c-27.367188 21.40625-28.699219 37.292969-28.699219 63.527344 0 3.371094 0 11.273438-19.546875 11.273438-9.546875 0-12.453125-1.996094-13.917969-3.738282-2.554687-3.035156-3.796875-9.414062-3.796875-19.5 0-35.160156 14.257813-52.1875 28.15625-64.167968 2.621094-2.222656 5.632813-4.535156 8.824219-6.984375 15.511719-11.910157 34.824219-26.734375 34.824219-50.824219 0-23.632812-19.246094-38.902344-49.03125-38.902344-31.203125 0-41.085938 14.574219-48.304688 25.214844-4.933594 7.277344-7.183594 10.230469-13.371094 10.230469-8.042968 0-20.011718-4.964844-20.011718-18.636719 0-8.878906 5.0625-22.550781 19.277344-34.292969 10.921874-9.019531 30.851562-19.777343 63.800781-19.777343 53.242187 0 90.421875 28.101562 90.421875 68.335937 0 18.5625-8.027344 37.171875-23.863282 55.316406-2.765624 3.164063-2.4375 7.964844.722657 10.726563zm0 0"/>
19 |             </svg>
20 |         </div>
21 |         <h2 class="quiz-details__title"></h2>
22 |         <p class="quiz-details__description"></p>
23 |         <div class="quiz-details__meta --qc">
24 |             <span>Question Count:</span><strong>--</strong>
25 |         </div>
26 |         <div class="quiz-details__meta --t">
27 |             <span>Time:</span><strong>--</strong>
28 |         </div>
29 | 
30 |         <div class="quiz-details__start-btn-wrapper">
31 |             <button class="default-btn quiz-details__start-btn">
32 |                 Start
33 |             </button>
34 |         </div>
35 |     </section>
36 | 
37 |     <section class="center-card questions-card" id="questions-card">
38 |         <div class="questions-card__progress-wrapper">
39 |             <span class="questions-card__q-count">Question 0/0</span>
40 |             <span class="questions-card__remaining-time">00:00</span>
41 |             <div class="questions-card__progress"><span class="--value"></span></div>
42 |         </div>
43 |         <p class="questions-card__q-title" id="question-title" data-qn="Q 1:"></p>
44 | 
45 |         <div class="question-card__options">
46 |             <div class="question-card__option __one">
47 |                 <input type="radio" name="question-option" id="option-one" value="0"/>
48 |                 <label class="question-card__option__value" for="option-one"></label>
49 |             </div>
50 |             <div class="question-card__option __two">
51 |                 <input type="radio" name="question-option" id="option-two" value="1"/>
52 |                 <label class="question-card__option__value"
53 |                        for="option-two"></label>
54 |             </div>
55 |             <div class="question-card__option __three">
56 |                 <input type="radio" name="question-option" id="option-three" value="2"/>
57 |                 <label class="question-card__option__value"
58 |                        for="option-three"></label>
59 |             </div>
60 |             <div class="question-card__option __four">
61 |                 <input type="radio" name="question-option" id="option-four" value="3"/>
62 |                 <label class="question-card__option__value"
63 |                        for="option-four"></label>
64 |             </div>
65 |         </div>
66 | 
67 |         <div class="question-card-buttons">
68 |             <button class="default-btn question-card-buttons__stop"
69 |                     id="stop-btn">STOP
70 |             </button>
71 |             <button class="default-btn question-card-buttons__next"
72 |                     id="next-btn">NEXT
73 |             </button>
74 |         </div>
75 |     </section>
76 | 
77 |     <section class="center-card result-card" id="result-card">
78 |         <h2 class="result-card__score" id="score">0</h2>
79 |         <strong class="result-card__score__lbl">Your Score</strong>
80 | 
81 |         <div class="result-card-buttons">
82 |             <button class="default-btn" id="go-to-home">Go to Home</button>
83 |         </div>
84 |     </section>
85 | 
86 | </div>
87 | <script src="scripts/quiz.js"></script>
88 | <script src="scripts/elements-helper.js"></script>
89 | <script src="scripts/index.js"></script>
90 | </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | const app = document.getElementById("quiz-app");
 4 | const quizCard = document.getElementById("quiz-details");
 5 | const questionsCard = document.getElementById("questions-card");
 6 | const resultCard = document.getElementById("result-card");
 7 | 
 8 | let quiz;
 9 | 
10 | function initApp() {
11 |     const questions = [
12 |         {
13 |             title: "Which one is the type of a javascript file?",
14 |             options: [".ts", ".js", ".jsx", ".j"]
15 |         }, {
16 |             title: "Inside which HTML element do we put the JavaScript?",
17 |             options: ["<scripting>", "<script>", "<js>", "<javascript>"]
18 |         }, {
19 |             title: "Where is the correct place to insert a JavaScript?",
20 |             options: [
21 |                 "The <head> section",
22 |                 "Both the <head> section and the <body> section are correct",
23 |                 "The <body> section",
24 |                 "Anywhere in the HTML document"]
25 |         }, {
26 |             title: "What is the correct syntax for referring to an external script called \"xxx.js\"?",
27 |             options: [
28 |                 '<script name="xxx.js">',
29 |                 '<script src="xxx.js">',
30 |                 '<script link="xxx.js">',
31 |                 '<script href="xxx.js">'
32 |             ]
33 |         }, {
34 |             title: 'How do you write "Hello World" in an alert box?',
35 |             options: [
36 |                 'msg("Hello World");',
37 |                 'alert("Hello World");',
38 |                 'msgBox("Hello World");',
39 |                 'console.log("Hello World");',
40 |             ]
41 |         }, {
42 |             title: 'How do you create a normal function in JavaScript?',
43 |             options: [
44 |                 'function:myFunction()',
45 |                 'function myFunction()',
46 |                 'function* myFunction()',
47 |                 'function = myFunction()',
48 |             ]
49 |         }, {
50 |             title: 'How do you call a function named "myFunction"?',
51 |             options: [
52 |                 'call myFunction()',
53 |                 'myFunction()',
54 |                 'call:myFunction()',
55 |                 'alo myFunction()',
56 |             ]
57 |         },
58 |     ];
59 | 
60 |     quiz = new Quiz(
61 |         "Simple JavaScript Quiz",
62 |         `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`,
63 |         70,
64 |         questions);
65 | 
66 |     // questions.map(q => quiz.addQuestion(q.title, q.options));
67 | 
68 |     new QuizElementsHelper(app, quizCard, questionsCard, resultCard, quiz);
69 | }
70 | 
71 | initApp();
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/quiz-app-ss.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Navaneethakrishnan2004/Quiz-game/b375037133bb275b0dc0afe9c6a2ef557140fcf1/quiz-app-ss.jpg


--------------------------------------------------------------------------------
/quiz.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | let TIME_OVER_SYM = Symbol("TO");
  4 | let TIMER_INTERVAL_SYM = Symbol("TI");
  5 | 
  6 | class Quiz {
  7 | 
  8 |     /**
  9 |      *
 10 |      * @param title - quiz main title
 11 |      * @param description
 12 |      * @param time - in second
 13 |      * @param questions - as array 
 14 |      */
 15 |     constructor(title, description, time, questions = []) {
 16 | 
 17 |         if (!title)
 18 |             throw new Error("Title of quiz is required.");
 19 | 
 20 |         if (!description)
 21 |             throw new Error("Description of quiz is required.");
 22 | 
 23 |         if (!time || time < 10)
 24 |             throw new Error("Time is required and must be more than 10 sec.");
 25 | 
 26 |         this.title = title;
 27 |         this.description = description;
 28 |         this._time = time;
 29 |         this[TIME_OVER_SYM] = null;
 30 |         this[TIMER_INTERVAL_SYM] = null;
 31 |         this._questions = questions;
 32 |     }
 33 | 
 34 |     /**
 35 |      *
 36 |      * @param title {String}
 37 |      * @param options {Array}
 38 |      */
 39 |     addQuestion(title, options) {
 40 |         if (this._startTime) {
 41 |             console.log("Question can not added on a started quiz.");
 42 |             return;
 43 |         }
 44 | 
 45 |         let id = this._questions.length;
 46 |         this._questions.push({id, title, options})
 47 |     }
 48 | 
 49 |     /**
 50 |      * handle quiz starting
 51 |      * @returns {*}
 52 |      */
 53 |     start() {
 54 |         if (!this._questions.length) {
 55 |             console.log("There is not any question");
 56 |             return;
 57 |         }
 58 | 
 59 |         if (this._startTime) {
 60 |             console.log("Already started.");
 61 |             return;
 62 |         }
 63 | 
 64 |         this.reset();
 65 |         this._startTime = new Date().getTime();
 66 | 
 67 |         this._setTicker();
 68 | 
 69 |         return this.currentQuestion;
 70 |     }
 71 | 
 72 |     /**
 73 |      * stop the running quiz
 74 |      */
 75 |     stop() {
 76 |         this._endTime = new Date().getTime();
 77 |         clearInterval(this[TIMER_INTERVAL_SYM]);
 78 |         this[TIMER_INTERVAL_SYM] = null;
 79 |     }
 80 | 
 81 |     /**
 82 |      * this will return the head question of running quiz
 83 |      * @returns {*}
 84 |      */
 85 |     get currentQuestion() {
 86 |         if (!this._startTime) {
 87 |             console.log("Quiz not started");
 88 |             return;
 89 |         }
 90 | 
 91 |         return this._questions[this._currentQuestionIndex];
 92 |     }
 93 | 
 94 |     /**
 95 |      * get the result of running quiz
 96 |      * @returns {{score: *, correct: *, questionsCount: number, timeOver: *, finished: (*|null), skipped: *}}
 97 |      */
 98 |     result() {
 99 |         if (!this._startTime) {
100 |             console.log("Quiz not started.");
101 |             return;
102 |         }
103 | 
104 |         let skipped = 0;
105 |         let correct = 0;
106 |         this._questions.map(q => {
107 |             if (q.result)
108 |                 correct++;
109 |             else if (q.skip)
110 |                 skipped++;
111 |         });
112 | 
113 |         let score = (100 * correct) / this._questions.length;
114 | 
115 |         return {
116 |             questionsCount: this._questions.length,
117 |             skipped,
118 |             correct,
119 |             score,
120 |             timeOver: this[TIME_OVER_SYM],
121 |             finished: this.isOnLastQuestion() || this[TIME_OVER_SYM] || this._endTime
122 |         };
123 |     }
124 | 
125 |     /**
126 |      * Reset the running quiz status and make it ready to start again
127 |      */
128 |     reset() {
129 |         if (this._startTime && !this._endTime) {
130 |             console.log("Can not reset the running quiz.");
131 |             return;
132 |         }
133 | 
134 |         this._startTime = null;
135 |         this._endTime = null;
136 |         this._remainingTime = this._time;
137 |         this._currentQuestionIndex = 0;
138 |         this[TIME_OVER_SYM] = false;
139 |         clearInterval(this[TIMER_INTERVAL_SYM]);
140 | 
141 |         this._questions = this._questions.map(q => ({id: q.id, title: q.title, options: q.options}))
142 |     }
143 | 
144 |     /**
145 |      * answer the head question of the running quiz with a selected option
146 |      *
147 |      * @param option - selected option, one of these (0, 1, 2, 3)
148 |      * @returns {{timeOver: *, finished: (*|null)}}
149 |      */
150 |     answerCurrentQuestion(option) {
151 |         if (!this._startTime) {
152 |             console.log("Start the quiz first");
153 |             return;
154 |         }
155 | 
156 |         let response = {
157 |             timeOver: this[TIME_OVER_SYM],
158 |             finished: this.isOnLastQuestion() || this._endTime || this[TIME_OVER_SYM]
159 |         };
160 | 
161 |         if (!this[TIME_OVER_SYM]) {
162 | 
163 |             const currentQ = this.currentQuestion;
164 |             if (currentQ.skip !== void (0)) {
165 |                 console.log("You already skipped this question");
166 |                 return;
167 |             }
168 |             if (currentQ.answer !== void (0)) {
169 |                 console.log("You already answered this question");
170 |                 return;
171 |             }
172 |             currentQ.answer = option;
173 |             const answerResult = checkAnswerValidity(currentQ.id, option);
174 |             currentQ.result = answerResult;
175 | 
176 |             response.answerResult = answerResult;
177 | 
178 |             if (!response.finished) {
179 |                 const nextQ = askNextQuestion.call(this);
180 |                 if (nextQ) {
181 |                     response.nextQ = nextQ;
182 |                 }
183 |             }
184 |         }
185 | 
186 |         if (response.finished) {
187 |             response.result = this.result();
188 |             this.stop();
189 |         }
190 | 
191 |         return response;
192 |     }
193 | 
194 |     /**
195 |      * Skip the head question and pick next question if exist.
196 |      *
197 |      * @returns {{timeOver: *, finished: (*|null)}}
198 |      */
199 |     skipCurrentQuestion() {
200 |         if (!this._startTime) {
201 |             console.log("Start the quiz first");
202 |             return;
203 |         }
204 | 
205 |         let response = {
206 |             timeOver: this[TIME_OVER_SYM],
207 |             finished: this.isOnLastQuestion() || this._endTime || this[TIME_OVER_SYM]
208 |         };
209 | 
210 |         if (!this[TIME_OVER_SYM]) {
211 | 
212 |             const currentQ = this.currentQuestion;
213 |             if (currentQ.skip !== void (0)) {
214 |                 console.log("You already skipped this question");
215 |                 return;
216 |             }
217 |             if (currentQ.answer !== void (0)) {
218 |                 console.log("You already answered this question");
219 |                 return;
220 |             }
221 |             currentQ.skip = true;
222 | 
223 |             if (!response.finished) {
224 |                 const nextQ = askNextQuestion.call(this);
225 |                 if (nextQ) {
226 |                     response.nextQ = nextQ;
227 |                 }
228 |             }
229 |         }
230 | 
231 |         if (response.finished) {
232 |             response.result = this.result();
233 |             this.stop();
234 |         }
235 | 
236 |         return response;
237 |     }
238 | 
239 |     /**
240 |      * Check if the head question is the last question of running quiz.
241 |      *
242 |      * @returns {boolean}
243 |      */
244 |     isOnLastQuestion() {
245 |         return this._currentQuestionIndex + 1 >= this._questions.length
246 |     }
247 | 
248 |     /**
249 |      * Get the details of the timing of the quiz
250 |      *
251 |      * @returns {{start: null, end: null, timeOver: *, quizTime: *, elapsedTime: number, remainingTime: *}}
252 |      */
253 |     get timeDetails() {
254 |         let now = new Date().getTime();
255 |         return {
256 |             quizTime: this._time,
257 |             start: this._startTime,
258 |             end: this._endTime,
259 |             elapsedTime: ((this._endTime || now) - this._startTime) / 1000, // ms to sec
260 |             remainingTime: secToTimeStr(this._remainingTime),
261 |             timeOver: this[TIME_OVER_SYM]
262 |         }
263 |     }
264 | 
265 |     /**
266 |      * Control the ticker of the time of the running quiz.
267 |      *
268 |      * @private
269 |      */
270 |     _setTicker() {
271 |         if (!this._startTime) {
272 |             console.log("Quiz not started yet.");
273 |             return;
274 |         }
275 | 
276 |         if (this[TIMER_INTERVAL_SYM]) {
277 |             console.log("The ticker has been set before");
278 |             return;
279 |         }
280 | 
281 |         let privateRemainingTimeInSec = this._time;
282 |         this[TIME_OVER_SYM] = false;
283 |         this[TIMER_INTERVAL_SYM] = setInterval(() => {
284 |             --privateRemainingTimeInSec;
285 |             this._remainingTime = privateRemainingTimeInSec;
286 |             if (privateRemainingTimeInSec <= 0) {
287 |                 this[TIME_OVER_SYM] = true;
288 |                 this.stop();
289 |             }
290 |         }, 1000)
291 |     }
292 | }
293 | 
294 | /**
295 |  * Private function to ask next question.
296 |  * @returns {*}
297 |  */
298 | function askNextQuestion() {
299 |     if (!this._startTime) {
300 |         console.log("Quiz not started");
301 |         return;
302 |     }
303 | 
304 |     const currentQ = this.currentQuestion;
305 |     if (currentQ.answer === void (0) && currentQ.skip === void (0)) {
306 |         console.log("Current question answered or skipped.");
307 |         return;
308 |     }
309 | 
310 |     if (this.isOnLastQuestion()) {
311 |         console.log("No more question.");
312 |         return;
313 |     }
314 | 
315 |     return this._questions[++this._currentQuestionIndex];
316 | }
317 | 
318 | /**
319 |  * check the validity of the selected option
320 |  *
321 |  * @param questionID
322 |  * @param option
323 |  */
324 | function checkAnswerValidity(questionID, option) {
325 | 
326 |     // Every checking could be apply here but
327 |     // the correct answer is the second option in
328 |     // my questions because of its simplicity
329 |     return +option === 1;
330 | }
331 | 
332 | /**
333 |  * Convert number (in second) to time-string
334 |  *
335 |  * @param seconds
336 |  * @returns {string}
337 |  */
338 | function secToTimeStr(seconds) {
339 | 
340 |     let timeInHour = Math.floor(seconds / 3600);
341 |     let timeInMin = Math.floor((seconds % 3600) / 60);
342 |     let timeInSec = Math.floor(seconds % 60);
343 | 
344 |     if (timeInHour < 10)
345 |         timeInHour = `0${timeInHour}`;
346 | 
347 |     if (timeInMin < 10)
348 |         timeInMin = `0${timeInMin}`;
349 | 
350 |     if (timeInSec < 10)
351 |         timeInSec = `0${timeInSec}`;
352 | 
353 |     let timeStr = `${timeInMin}:${timeInSec}`;
354 |     if (parseInt(timeInHour))
355 |         timeStr = `${timeInHour}:${timeStr}`;
356 | 
357 |     return timeStr;
358 | }
359 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /** Simple Reset - START */
  2 | html {
  3 |     box-sizing: border-box;
  4 |     font-size: 16px;
  5 |     overflow-x: hidden;
  6 | }
  7 | 
  8 | *, *:before, *:after {
  9 |     box-sizing: inherit;
 10 | }
 11 | 
 12 | body, h1, h2, h3, h4, h5, h6, p, ol, ul {
 13 |     margin: 0;
 14 |     padding: 0;
 15 |     font-weight: normal;
 16 | }
 17 | 
 18 | ol, ul {
 19 |     list-style: none;
 20 | }
 21 | 
 22 | img {
 23 |     max-width: 100%;
 24 |     height: auto;
 25 | }
 26 | 
 27 | /** Global - START */
 28 | body {
 29 |     font-family: 'Lato', sans-serif;
 30 | }
 31 | 
 32 | #quiz-app {
 33 |     position: fixed;
 34 |     left: 0;
 35 |     top: 0;
 36 |     height: 100vh;
 37 |     width: 100vw;
 38 |     background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
 39 |     padding: 1rem;
 40 |     display: flex;
 41 |     justify-content: center;
 42 |     align-items: center;
 43 |     flex-wrap: wrap;
 44 | }
 45 | 
 46 | .center-card {
 47 |     height: 100%;
 48 |     width: 100%;
 49 |     max-width: 468px;
 50 |     max-height: 600px;
 51 |     overflow-y: auto;
 52 |     background: #fff;
 53 |     border-radius: .7rem;
 54 |     box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.16);
 55 |     padding: 2rem;
 56 |     visibility: hidden;
 57 |     opacity: 0;
 58 |     position: absolute;
 59 |     transform-origin: top;
 60 |     transform: translateY(-150px) scale(.6);
 61 |     transition: transform .5s, opacity .7s .1s, visibility .7s .1s;
 62 |     user-select: none;
 63 |     z-index: -1;
 64 | }
 65 | 
 66 | .center-card.show {
 67 |     position: relative;
 68 |     transform: translateY(0px) scale(1);
 69 |     opacity: 1;
 70 |     visibility: visible;
 71 |     transition: transform .6s, opacity .7s .2s, visibility .7s .2s;
 72 | }
 73 | 
 74 | .default-btn {
 75 |     outline: none;
 76 |     border: none;
 77 |     background: #028a3d;
 78 |     padding: .4rem 1rem;
 79 |     border-radius: 4px;
 80 |     color: #fff;
 81 |     cursor: pointer;
 82 |     min-width: 140px;
 83 |     height: 40px;
 84 |     text-transform: uppercase;
 85 |     font-size: 15px;
 86 |     font-weight: normal;
 87 |     box-shadow: 1px 1px 12px 2px rgba(0, 0, 0, .2);
 88 |     transition: all .3s;
 89 | }
 90 | 
 91 | .default-btn:hover {
 92 |     box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, .3);
 93 | }
 94 | 
 95 | .default-btn:active {
 96 |     box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, .3);
 97 |     transform: scale(0.95);
 98 | }
 99 | 
100 | /** Quiz Card - START */
101 | .quiz-details {
102 | }
103 | 
104 | .quiz-details__question-icon {
105 |     display: block;
106 |     margin: 2rem 1rem;
107 |     text-align: center;
108 | }
109 | 
110 | .quiz-details__question-icon svg {
111 |     stroke: #000;
112 |     stroke-width: 2px;
113 |     fill: #028a3d;
114 | }
115 | 
116 | .quiz-details__title {
117 |     font-weight: normal;
118 |     text-align: left;
119 |     font-size: 24px;
120 |     color: #555;
121 | }
122 | 
123 | .quiz-details__description {
124 |     margin-top: 1rem;
125 |     color: #888;
126 |     line-height: 24px;
127 |     margin-bottom: 1rem;
128 | }
129 | 
130 | .quiz-details__meta {
131 |     margin-top: .5rem;
132 |     font-size: 14px;
133 |     opacity: 0.6;
134 |     color: #028a3d;
135 | }
136 | 
137 | .quiz-details__meta span {
138 |     margin-right: .3rem;
139 | }
140 | 
141 | .quiz-details__start-btn-wrapper {
142 |     display: flex;
143 |     justify-content: center;
144 |     align-items: center;
145 |     margin-top: 2rem;
146 |     position: sticky;
147 |     width: 100%;
148 |     top: 100%;
149 |     left: 0;
150 | }
151 | 
152 | .quiz-details__start-btn {
153 |     width: 60%;
154 |     height: 40px;
155 | }
156 | 
157 | .quiz-details__start-btn:hover {
158 |     box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, .3);
159 | }
160 | 
161 | .quiz-details__start-btn:active {
162 |     box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, .3);
163 |     transform: scale(0.95);
164 | }
165 | 
166 | 
167 | /** Question Card - START */
168 | .questions-card {
169 | 
170 | }
171 | 
172 | .questions-card__progress-wrapper {
173 |     display: flex;
174 |     flex-wrap: wrap;
175 |     justify-content: space-between;
176 |     align-items: center;
177 |     margin: .5rem 0 1rem;
178 |     font-size: 14px;
179 |     font-weight: bold;
180 | }
181 | 
182 | .questions-card__progress {
183 |     width: 100%;
184 |     display: block;
185 |     height: 8px;
186 |     margin-top: .5rem;
187 |     border-radius: 4px;
188 |     background: #ddd;
189 |     position: relative;
190 |     overflow: hidden;
191 | }
192 | 
193 | .questions-card__progress .--value {
194 |     position: absolute;
195 |     left: 0;
196 |     height: 8px;
197 |     width: 100%;
198 |     display: inline-block;
199 |     background: green;
200 |     transition: all .3s;
201 | }
202 | 
203 | .questions-card__q-title {
204 |     font-size: 20px;
205 |     line-height: 26px;
206 |     font-weight: lighter;
207 |     margin-top: 3rem;
208 |     display: block;
209 |     position: relative;
210 | }
211 | 
212 | .questions-card__q-title:before {
213 |     content: attr(data-qn);
214 |     display: block;
215 |     font-size: 16px;
216 |     margin-bottom: .25rem;
217 |     color: #bbb;
218 |     font-weight: bold;
219 | }
220 | 
221 | .question-card__options {
222 |     display: flex;
223 |     justify-content: center;
224 |     align-items: center;
225 |     flex-direction: column;
226 |     margin-top: 1rem;
227 | }
228 | 
229 | .question-card__option {
230 |     display: block;
231 |     margin-top: .5rem;
232 |     border: 1px solid #ddd;
233 |     border-radius: 5px;
234 |     width: 100%;
235 |     cursor: pointer;
236 |     text-align: left;
237 | }
238 | 
239 | .question-card__option input[type="radio"] {
240 |     display: none;
241 | }
242 | 
243 | 
244 | .question-card__option__value {
245 |     display: block;
246 |     width: 100%;
247 |     padding: 1rem 1rem 1rem 3rem;
248 |     position: relative;
249 |     cursor: pointer;
250 | }
251 | 
252 | .question-card__option__value:before,
253 | .question-card__option__value:after {
254 |     content: '';
255 |     display: inline-block;
256 |     position: absolute;
257 |     left: 1rem;
258 |     top: calc(50% - 10px);
259 |     width: 20px;
260 |     height: 20px;
261 |     border-radius: 50%;
262 |     border: 1px solid #ddd;
263 | }
264 | 
265 | .question-card__option__value:after {
266 |     display: none;
267 |     width: 14px;
268 |     height: 14px;
269 |     left: calc(1rem + 3px);
270 |     top: calc(50% - 7px);
271 |     background-color: orange;
272 | }
273 | 
274 | .question-card__option:hover,
275 | .question-card__option:hover .question-card__option__value:before {
276 |     border-color: orange;
277 | }
278 | 
279 | .question-card__option input[type="radio"]:checked ~ label:after {
280 |     display: inline-block;
281 | }
282 | 
283 | .question-card-buttons {
284 |     display: flex;
285 |     justify-content: space-between;
286 |     align-items: center;
287 |     margin-top: 2rem;
288 |     position: sticky;
289 |     width: 100%;
290 |     top: 100%;
291 |     left: 0;
292 | }
293 | 
294 | .question-card-buttons__stop {
295 |     background-color: #ec880c;
296 | }
297 | 
298 | .questions-card.time-over .question-card-buttons__stop {
299 |     display: none;
300 | }
301 | 
302 | .questions-card.time-over .question-card-buttons {
303 |     justify-content: flex-end;
304 | }
305 | 
306 | 
307 | /** Result Card - START */
308 | .result-card {
309 |     display: flex;
310 |     justify-content: center;
311 |     align-items: center;
312 |     flex-direction: column;
313 | }
314 | 
315 | .result-card__score {
316 |     font-size: calc(2vw + 2vh + 7vmin);
317 |     margin-top: 2rem;
318 | }
319 | 
320 | .result-card__score__lbl {
321 |     color: #888;
322 | }
323 | 
324 | .result-card-buttons {
325 |     display: flex;
326 |     justify-content: center;
327 |     align-items: center;
328 |     margin-top: 2rem;
329 |     position: sticky;
330 |     width: 100%;
331 |     top: 100%;
332 |     left: 0;
333 | }
334 | 
335 | .result-card-buttons button {
336 |     background: #0880d6;
337 |     width: 60%;
338 | }
339 | 


--------------------------------------------------------------------------------