Update

Quiz App Master/app.css

@@ -1,5 +1,5 @@
 :root {
-  background-color: #ecf5ff;
+  background-color: #ecf5ffe1;
   font-size: 62.5%;
 }
 
@@ -20,7 +20,7 @@ h4 {
 
 h1 {
   font-size: 5.4rem;
-  color: #56a5eb;
+  color: #1e89e6;
   margin-bottom: 5rem;
 }
 

Quiz App Master/game.css

@@ -62,21 +62,3 @@
   width: 0%;
 }
 
-/* LOADER */
-#loader {
-  border: 1.6rem solid white;
-  border-radius: 50%;
-  border-top: 1.6rem solid #56a5eb;
-  width: 12rem;
-  height: 12rem;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

Quiz App Master/game.html

@@ -29,6 +29,9 @@ <h1 class="hud-main-text" id="score">
               0
             </h1>
           </div>
+<div id="hud-item">
+            <p class="hud-prefix">Time</p>
+            <div id="timer">15</div>
         </div>
         <h2 id="question"></h2>
         <div class="choice-container">

Quiz App Master/game.js

@@ -10,12 +10,10 @@ let acceptingAnswers = false;
 let score = 0;
 let questionCounter = 0;
 let availableQuesions = [];
-
-let questions = [];
-
-fetch(
+let timeLeft = 15; // Time per question in seconds
+let timerId = null;
+const timerDisplay = document.getElementById('timer');
     'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
-)
     .then((res) => {
         return res.json();
     })
@@ -49,7 +47,18 @@ fetch(
 //CONSTANTS
 const CORRECT_BONUS = 10;
 const MAX_QUESTIONS = 3;
-
+const startTimer = () => {
+    timeLeft = 15;
+    timerDisplay.textContent = timeLeft;
+    timerId = setInterval(() => {
+        timeLeft--;
+        timerDisplay.textContent = timeLeft;
+        if (timeLeft <= 0) {
+            clearInterval(timerId);
+            getNewQuestion();
+        }
+    }, 1000);
+};
 startGame = () => {
     questionCounter = 0;
     score = 0;
@@ -65,27 +74,33 @@ getNewQuestion = () => {
         //go to the end page
         return window.location.assign('/end.html');
     }
+    // Clear existing timer if any
+    if (timerId) {
+        clearInterval(timerId);
+    }
     questionCounter++;
     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
     //Update the progress bar
     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
-
     const questionIndex = Math.floor(Math.random() * availableQuesions.length);
     currentQuestion = availableQuesions[questionIndex];
     question.innerHTML = currentQuestion.question;
-
     choices.forEach((choice) => {
         const number = choice.dataset['number'];
         choice.innerHTML = currentQuestion['choice' + number];
     });
-
     availableQuesions.splice(questionIndex, 1);
     acceptingAnswers = true;
+
+    // Start the timer for new question
+    startTimer();
 };
 
 choices.forEach((choice) => {
     choice.addEventListener('click', (e) => {
         if (!acceptingAnswers) return;
+        // Clear the timer when answer is selected
+        clearInterval(timerId);
 
         acceptingAnswers = false;
         const selectedChoice = e.target;
@@ -110,4 +125,8 @@ choices.forEach((choice) => {
 incrementScore = (num) => {
     score += num;
     scoreText.innerText = score;
-};
+}
+
+
+
+