May 5, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
diff --git a/Quiz App Master/app.css b/Quiz App Master/app.css
 :root {
  background-color: #ecf5ff;
  background-color: #ecf5ffe1;
  font-size: 62.5%;
 }


 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
  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
              0
            </h1>
          </div>
 <div id="hud-item">
            <p class="hud-prefix">Time</p>
            <div id="timer">15</div>
        </div>
        <h2 id="question"></h2>
        <div class="choice-container">
diff --git a/Quiz App Master/game.js b/Quiz App Master/game.js
 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();
    })
 //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;
        //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;
 incrementScore = (num) => {
    score += num;
    scoreText.innerText = score;
 };
 }
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		:root {
		background-color: #ecf5ff;
		background-color: #ecf5ffe1;
		font-size: 62.5%;
		}

Expand All		@@ -20,7 +20,7 @@ h4 {

		h1 {
		font-size: 5.4rem;
		color: #56a5eb;
		color: #1e89e6;
		margin-bottom: 5rem;
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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);
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,6 +29,9 @@ <h1 class="hud-main-text" id="score">
		0
		</h1>
		</div>
		<div id="hud-item">
		<p class="hud-prefix">Time</p>
		<div id="timer">15</div>
		</div>
		<h2 id="question"></h2>
		<div class="choice-container">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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();
		})
Expand DownExpand Up		@@ -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;
Expand All		@@ -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;
Expand All		@@ -110,4 +125,8 @@ choices.forEach((choice) => {
		incrementScore = (num) => {
		score += num;
		scoreText.innerText = score;
		};
		}