jamesqquick · JasperBoller · May 5, 2025
diff --git a/Quiz App Master/app.css b/Quiz App Master/app.css
@@ -125,3 +125,50 @@ input {
 input::placeholder {
   color: #aaa;
 }
+.end-container {
+    text-align: center;
+    padding: 2rem;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.score-container {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 2rem;
+    margin: 2rem 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.score-text {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.correct-answers, .percentage {
+    font-size: 1.2rem;
+    margin: 0.5rem 0;
+}
+
+#feedbackMessage {
+    font-size: 1.3rem;
+    margin-top: 1.5rem;
+    color: #2c3e50;
+    font-weight: bold;
+}
+
+button {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    font-size: 1.1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+button:hover {
+    background: #2980b9;
+}
diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css
@@ -59,9 +59,10 @@
 #progressBarFull {
   height: 3.4rem;
   background-color: #56a5eb;
-  width: 0%;
+#timer {
+    font-size: 3.5rem;
+    color: #56a5eb;
 }
-
 /* LOADER */
 #loader {
   border: 1.6rem solid white;
@@ -79,4 +80,20 @@
   100% {
     transform: rotate(360deg);
   }
+#category-selection {
+    text-align: center;
+}
+#category-select {
+    width: 30rem;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    font-size: 1.8rem;
+    border: 0.1rem solid #56a5eb;
+    background-color: white;
+    cursor: pointer;
+}
+#category-select:hover {
+    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
+    transform: translateY(-0.1rem);
+    transition: transform 150ms;
 }
diff --git a/Quiz App Master/game.html b/Quiz App Master/game.html
@@ -10,7 +10,17 @@
   </head>
   <body>
     <div class="container">
-      <div id="loader"></div>
+<div id="category-selection" class="flex-center flex-column">
+        <h2>Select Category</h2>
+        <select id="category-select" class="btn">
+          <option value="9">General Knowledge</option>
+          <option value="17">Science & Nature</option>
+          <option value="21">Sports</option>
+          <option value="23">History</option>
+          <option value="24">Politics</option>
+        </select>
+        <button id="start-game" class="btn">Start Quiz</button>
+      </div>
       <div id="game" class="justify-center flex-column hidden">
         <div id="hud">
           <div id="hud-item">
@@ -29,6 +39,9 @@ <h1 class="hud-main-text" id="score">
               0
             </h1>
           </div>
+          <div id="hud-item">
+            <p class="hud-prefix">Time</p>
+            <h1 class="hud-main-text" id="timer">15</h1>
         </div>
         <h2 id="question"></h2>
         <div class="choice-container">

diff --git a/Quiz App Master/game.js b/Quiz App Master/game.js
@@ -5,17 +5,19 @@ const scoreText = document.getElementById('score');
 const progressBarFull = document.getElementById('progressBarFull');
 const loader = document.getElementById('loader');
 const game = document.getElementById('game');
+const categorySelect = document.getElementById('category-select');
+const startGameBtn = document.getElementById('start-game');
+const categorySelection = document.getElementById('category-selection');
 let currentQuestion = {};
 let acceptingAnswers = false;
 let score = 0;
 let questionCounter = 0;
 let availableQuesions = [];
-
 let questions = [];
-
-fetch(
-    'https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple'
-)
+const TIMER_SECONDS = 15;
+let timeLeft = null;
+let timer = null;
+    
     .then((res) => {
         return res.json();
     })
@@ -24,19 +26,16 @@ fetch(
             const formattedQuestion = {
                 question: loadedQuestion.question,
             };
-
             const answerChoices = [...loadedQuestion.incorrect_answers];
             formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
             answerChoices.splice(
                 formattedQuestion.answer - 1,
                 0,
                 loadedQuestion.correct_answer
             );
-
             answerChoices.forEach((choice, index) => {
                 formattedQuestion['choice' + (index + 1)] = choice;
             });
-
             return formattedQuestion;
         });
 
@@ -47,53 +46,94 @@ fetch(
     });
 
 //CONSTANTS
-const CORRECT_BONUS = 10;
-const MAX_QUESTIONS = 3;
-
 startGame = () => {
     questionCounter = 0;
     score = 0;
     availableQuesions = [...questions];
     getNewQuestion();
+    categorySelection.classList.add('hidden');
     game.classList.remove('hidden');
     loader.classList.add('hidden');
 };
+// Add event listener for category selection
+startGameBtn.addEventListener('click', () => {
+    const selectedCategory = categorySelect.value;
+    loader.classList.remove('hidden');
+    categorySelection.classList.add('hidden');
+
+    fetchQuestions(selectedCategory)
+        .then((res) => res.json())
+        .then((loadedQuestions) => {
+            questions = loadedQuestions.results.map((loadedQuestion) => {
+                const formattedQuestion = {
+                    question: loadedQuestion.question,
+                };
+                const answerChoices = [...loadedQuestion.incorrect_answers];
+                formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
+                answerChoices.splice(
+                    formattedQuestion.answer - 1,
+                    0,
+                    loadedQuestion.correct_answer
+                );
+                answerChoices.forEach((choice, index) => {
+                    formattedQuestion['choice' + (index + 1)] = choice;
+                });
+                return formattedQuestion;
+            });
+            startGame();
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+});
+    loader.classList.add('hidden');
+
 
 getNewQuestion = () => {
     if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {
         localStorage.setItem('mostRecentScore', score);
-        //go to the end page
         return window.location.assign('/end.html');
     }
+    // Clear existing timer if any
+    if (timer) {
+        clearInterval(timer);
+    }
     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) => {
+    choices.forEach(choice => {
         const number = choice.dataset['number'];
         choice.innerHTML = currentQuestion['choice' + number];
     });
-
     availableQuesions.splice(questionIndex, 1);
     acceptingAnswers = true;
+    // Start timer
+    timeLeft = TIMER_SECONDS;
+    document.getElementById('timer').textContent = timeLeft;
+    timer = setInterval(() => {
+        timeLeft--;
+        document.getElementById('timer').textContent = timeLeft;
+        if (timeLeft <= 0) {
+            clearInterval(timer);
+            getNewQuestion(); // Move to next question when time runs out
+        }
+    }, 1000);
 };
-
+choices.forEach((choice) => {
 choices.forEach((choice) => {
     choice.addEventListener('click', (e) => {
         if (!acceptingAnswers) return;
+        // Clear the timer
+        clearInterval(timer);
 
         acceptingAnswers = false;
         const selectedChoice = e.target;
         const selectedAnswer = selectedChoice.dataset['number'];
-
         const classToApply =
             selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect';
-
         if (classToApply === 'correct') {
             incrementScore(CORRECT_BONUS);
         }