From f16098504476b3376bb0f16f6f885480494407bd Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 14:03:02 +0100 Subject: [PATCH 1/6] Update Added Changes --- Quiz App Master/game.css | 30 ++++++++++++++---------------- Quiz App Master/game.html | 3 +++ Quiz App Master/game.js | 39 +++++++++++++++++++++++++++++---------- 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index c8c3e24..6ef9522 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -61,22 +61,20 @@ background-color: #56a5eb; width: 0%; } - -/* LOADER */ -#loader { - border: 1.6rem solid white; +/* Timer Styling */ +#timer { + font-size: 3.5rem; + font-weight: bold; + color: #56a5eb; + text-align: center; + margin: 1rem; + padding: 1rem; + background: white; border-radius: 50%; - border-top: 1.6rem solid #56a5eb; - width: 12rem; - height: 12rem; - animation: spin 2s linear infinite; + width: 6rem; + height: 6rem; + display: flex; + align-items: center; + justify-content: center; } -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/Quiz App Master/game.html b/Quiz App Master/game.html index 044c033..5c5dcdf 100644 --- a/Quiz App Master/game.html +++ b/Quiz App Master/game.html @@ -29,6 +29,9 @@

0

+
+

Time

+
15

diff --git a/Quiz App Master/game.js b/Quiz App Master/game.js index fdbfd4c..59eaed9 100644 --- a/Quiz App Master/game.js +++ b/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; -}; +} + + + + From 0f0f64e4eb458dc05f8521949f8633d33daee537 Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 14:55:12 +0100 Subject: [PATCH 2/6] Update app.css Update made --- Quiz App Master/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Quiz App Master/app.css b/Quiz App Master/app.css index e78aa52..9461c4f 100644 --- a/Quiz App Master/app.css +++ b/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; } From 80c72dc08194208b10c3936a978d49717ee050f8 Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 15:17:51 +0100 Subject: [PATCH 3/6] Update game.css Update made --- Quiz App Master/game.css | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index 6ef9522..723a0db 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -61,20 +61,19 @@ background-color: #56a5eb; width: 0%; } -/* Timer Styling */ #timer { - font-size: 3.5rem; - font-weight: bold; - color: #56a5eb; - text-align: center; - margin: 1rem; - padding: 1rem; - background: white; + font-size: 3.5rem; + font-weight: bold; + color: #56a5eb; + text-align: center; + margin: 1rem; + padding: 1rem; + background: white; border-radius: 50%; - width: 6rem; - height: 6rem; - display: flex; - align-items: center; - justify-content: center; + width: 6rem; + height: 6rem; + display: flex; + align-items: center; + justify-content: center; } From d8a98b6a1d4e4775f12ad9fb5951bb5321051b31 Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 15:18:58 +0100 Subject: [PATCH 4/6] Update game.css fsuhgfjnjnf --- Quiz App Master/game.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index 723a0db..1ac9f87 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -77,3 +77,33 @@ justify-content: center; } +<<<<<<< Updated upstream +======= +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 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; +} +} +} +>>>>>>> Stashed changes From 599cc68d25bf3c5796acebcef630b911d03beac0 Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 15:20:20 +0100 Subject: [PATCH 5/6] Update game.css fsuhgfjnjnf --- Quiz App Master/game.css | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index 1ac9f87..723a0db 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -77,33 +77,3 @@ justify-content: center; } -<<<<<<< Updated upstream -======= -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 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; -} -} -} ->>>>>>> Stashed changes From 7a630aa40db7aba869e5f50f5e1ce46992dc2fc2 Mon Sep 17 00:00:00 2001 From: JasperBoller Date: Mon, 5 May 2025 15:22:08 +0100 Subject: [PATCH 6/6] Update game.css Update made --- Quiz App Master/game.css | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css index 723a0db..e99d634 100644 --- a/Quiz App Master/game.css +++ b/Quiz App Master/game.css @@ -61,19 +61,4 @@ background-color: #56a5eb; width: 0%; } -#timer { - font-size: 3.5rem; - font-weight: bold; - color: #56a5eb; - text-align: center; - margin: 1rem; - padding: 1rem; - background: white; - border-radius: 50%; - width: 6rem; - height: 6rem; - display: flex; - align-items: center; - justify-content: center; -}