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;
}
diff --git a/Quiz App Master/game.css b/Quiz App Master/game.css
index c8c3e24..e99d634 100644
--- a/Quiz App Master/game.css
+++ b/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);
- }
-}
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
+
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;
-};
+}
+
+
+
+