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);
        }