@@ -29,6 +39,9 @@
0
+
diff --git a/Quiz App Master/game.js b/Quiz App Master/game.js
index fdbfd4c..b2f73d0 100644
--- 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,7 +26,6 @@ fetch(
const formattedQuestion = {
question: loadedQuestion.question,
};
-
const answerChoices = [...loadedQuestion.incorrect_answers];
formattedQuestion.answer = Math.floor(Math.random() * 4) + 1;
answerChoices.splice(
@@ -32,11 +33,9 @@ fetch(
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);
}