Easy Education Tips Channel

Alert

Start

Let's play a Quiz Game

‎Quiz App/script.js‎ Original file line number Diff line number Diff line change @@ -0,0 +1,184 @@ const container = document.querySelector('.container'); const questionBox = document.querySelector('.question'); const choicesBox = document.querySelector('.choices'); const nextBtn = document.querySelector('.nextBtn'); const scoreCard = document.querySelector('.scoreCard'); const alert = document.querySelector('.alert'); const startBtn = document.querySelector('.startBtn'); const timer = document.querySelector('.timer'); // Make an array of objects that stores question, choices of question and answer const quiz = [ { question: "Q. Which of the following is not a CSS box model property?", choices: ["margin", "padding", "border-radius", "border-collapse"], answer: "border-collapse" }, { question: "Q. Which of the following is not a valid way to declare a function in JavaScript?", choices: ["function myFunction() {}", " let myFunction = function() {};", "myFunction: function() {}", "const myFunction = () => {};"], answer: "myFunction: function() {}" }, { question: "Q. Which of the following is not a JavaScript data type?", choices: ["string", "boolean", "object", "float"], answer: "float" }, { question: "Q. What is the purpose of the this keyword in JavaScript?", choices: ["It refers to the current function.", "It refers to the current object.", "It refers to the parent object.", " It is used for comments."], answer: "It refers to the current object." } ]; // Making Variables let currentQuestionIndex = 0; let score = 0; let quizOver = false; let timeLeft = 15; let timerID = null; // Arrow Function to Show Questions const showQuestions = () => { const questionDetails = quiz[currentQuestionIndex]; questionBox.textContent = questionDetails.question; choicesBox.textContent = ""; for (let i = 0; i < questionDetails.choices.length; i++) { const currentChoice = questionDetails.choices[i]; const choiceDiv = document.createElement('div'); choiceDiv.textContent = currentChoice; choiceDiv.classList.add('choice'); choicesBox.appendChild(choiceDiv); choiceDiv.addEventListener('click', () => { if (choiceDiv.classList.contains('selected')) { choiceDiv.classList.remove('selected'); } else { choiceDiv.classList.add('selected'); } }); } if(currentQuestionIndex < quiz.length){ startTimer(); } } // Function to check answers const checkAnswer = () => { const selectedChoice = document.querySelector('.choice.selected'); if (selectedChoice.textContent === quiz[currentQuestionIndex].answer) { // alert("Correct Answer!"); displayAlert("Correct Answer!"); score++; } else { // alert("Wrong answer"); displayAlert(`Wrong Answer! ${quiz[currentQuestionIndex].answer} is the Correct Answer`); } timeLeft = 15; currentQuestionIndex++; if (currentQuestionIndex < quiz.length) { showQuestions(); } else { stopTimer(); showScore(); } } // Function to show score const showScore = () => { questionBox.textContent = ""; choicesBox.textContent = ""; scoreCard.textContent = `You Scored ${score} out of ${quiz.length}!`; displayAlert("You have completed this quiz!"); nextBtn.textContent = "Play Again"; quizOver = true; timer.style.display = "none"; } // Function to Show Alert const displayAlert = (msg) => { alert.style.display = "block"; alert.textContent = msg; setTimeout(()=>{ alert.style.display = "none"; }, 2000); } // Function to Start Timer const startTimer = () => { clearInterval(timerID); // Check for any exist timers timer.textContent = timeLeft; const countDown = ()=>{ timeLeft--; timer.textContent = timeLeft; if(timeLeft === 0){ const confirmUser = confirm("Time Up!!! Do you want to play the quiz again"); if(confirmUser){ timeLeft = 15; startQuiz(); } else{ startBtn.style.display = "block"; container.style.display = "none"; return; } } } timerID = setInterval(countDown, 1000); } // Function to Stop Timer const stopTimer = () =>{ clearInterval(timerID); } // Function to shuffle question const shuffleQuestions = () =>{ for(let i=quiz.length-1; i>0; i--){ const j = Math.floor(Math.random() * (i+1)); [quiz[i], quiz[j]] = [quiz[j], quiz[i]]; } currentQuestionIndex = 0; showQuestions(); } // Function to Start Quiz const startQuiz = () =>{ timeLeft = 15; timer.style.display = "flex"; shuffleQuestions(); } // Adding Event Listener to Start Button startBtn.addEventListener('click', ()=>{ startBtn.style.display = "none"; container.style.display = "block"; startQuiz(); }); nextBtn.addEventListener('click', () => { const selectedChoice = document.querySelector('.choice.selected'); if (!selectedChoice && nextBtn.textContent === "Next") { // alert("Select your answer"); displayAlert("Select your answer"); return; } if (quizOver) { nextBtn.textContent = "Next"; scoreCard.textContent = ""; currentQuestionIndex = 0; quizOver = false; score = 0; startQuiz(); } else { checkAnswer(); } });