Add time limit for quiz

From now, You have 30 seconds to answer questions. When times up, the quiz will be ended.

js/QuizClass.js

@@ -80,6 +80,12 @@ export class Quiz {
     console.log("Total Correct:", this.TOTAL_CORRECT);
   }
 
+  showTimeoutDialog() {
+    alert("Time's up!");
+
+    this._endGame();
+  }
+
   checkAnswer(selected = 0, correct = 0) {
     const p = document.querySelector(`[data-number="${selected}"]`);
 

pages/game.html

@@ -28,6 +28,27 @@
           );
         }
       });
+
+      const timerDuration = 30;
+
+      function startTimer() {
+        let timeLeft = timerDuration;
+        const timerElement = document.getElementById("timer");
+
+        const timerInterval = setInterval(() => {
+          timeLeft--;
+          timerElement.textContent = timeLeft;
+
+          if (timeLeft <= 0) {
+            clearInterval(timerInterval);
+            QuizInstance.showTimeoutDialog();
+          }
+        }, 1000);
+      }
+
+
+
+      document.addEventListener("DOMContentLoaded", startTimer);
     </script>
   </head>
 
@@ -41,6 +62,10 @@
               <div id="progressBarFull"></div>
             </div>
           </div>
+          <div class="hud-item">
+            <p class="hud-prefix">Timer</p>
+            <h1 class="hud-main-text" id="timer">30</h1>
+          </div>
           <div class="hud-item">
             <p class="hud-prefix">Score</p>
             <h1 class="hud-main-text" id="score">0</h1>