Create Quiz using Javascript

I am creating a multiple choice quiz using Javascript. The option will turn green if the user select correct answer and turn red if answer is wrong. But I need to show the correct answer with answer user selected if the selected answer is wrong. I need to congratulate the user if the user get 60% marks or more. Please help me to find a solution.

HTML

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8" />   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   <meta http-equiv="X-UA-Compatible" content="ie=edge" />   <title>Quick Quiz - Play</title>   <link rel="stylesheet" href="/Main/main.css" />   <link rel="stylesheet" href="game.css" /> </head>  <body>   <div class="container">     <div id="game" class="justify-center flex-column">       <div id="hud">         <div id="hud-item">           <p id="progressText" class="hud-prefix">             Question           </p>           <div id="progressBar">             <div id="progressBarFull"></div>           </div>         </div>         <div id="hud-item">           <p class="hud-prefix">             Score           </p>           <h1 class="hud-main-text" id="score">             0           </h1>         </div>       </div>       <h2 id="question">What is the answer to this questions?</h2>       <div class="choice-container">         <p class="choice-prefix">A</p>         <p class="choice-text" data-number="1">Choice 1</p>       </div>       <div class="choice-container">         <p class="choice-prefix">B</p>         <p class="choice-text" data-number="2">Choice 2</p>       </div>       <div class="choice-container">         <p class="choice-prefix">C</p>         <p class="choice-text" data-number="3">Choice 3</p>       </div>       <div class="choice-container">         <p class="choice-prefix">D</p>         <p class="choice-text" data-number="4">Choice 4</p>       </div>       <div class="timer-quiz">Time left : <span id="timer"></span>       </div>     </div>     <audio id="crctmusic" src="/Assets/win31.mp3" preload="auto"></audio>     <audio id="wrngmusic" src="/Assets/computerError.mp3" preload="auto"></audio>     <script src="game.js"></script> </body>  </html>  

CSS

.choice-container {   display: flex;   margin-bottom: 0.5rem;   width: 100%;   font-size: 6vw;   border: 0.1rem solid rgb(86, 165, 235, 0.25);   background-color: white;   text-align: justify; }  .choice-container:hover {   cursor: pointer;   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);   transform: translateY(-0.1rem);   transition: transform 150ms; }  .choice-prefix {   padding: 1.5rem 2.5rem;   background-color: #56a5eb;   color: white; }  .choice-text {   padding: 1.5rem;   width: 100%; }  .correct {   background-color: #28a745; }  .incorrect {   background-color: #dc3545; }  /* HUD */  #hud {   display: flex;   justify-content: space-between; }  .hud-prefix {   text-align: center;   font-size: 8vw; }  .hud-main-text {   text-align: center; }  #progressBar {   width: 15rem;   height: 3rem;   border: 0.3rem solid #56a5eb;   margin-top: 1.5rem; }  #progressBarFull {   height: 3rem;   background-color: #56a5eb;   width: 0%; }  /*TIMER*/ .timer-quiz {   color: #efd0ca;   text-align: center;   font-size: 10vw;   background-color: #56a5eb;   width: 100%; }  

Javascript

const question = document.getElementById("question"); const choices = Array.from(document.getElementsByClassName("choice-text")); const progressText = document.getElementById("progressText"); const scoreText = document.getElementById("score"); const progressBarFull = document.getElementById("progressBarFull"); let currentQuestion = {}; let acceptingAnswers = false; let score = 0; let questionCounter = 0; let availableQuesions = [];  let questions = [{     question: "Inside which HTML element do we put the JavaScript??",     choice1: "<script>",     choice2: "<javascript>",     choice3: "<js>",     choice4: "<scripting>",     answer: 1   },   {     question: "What is the correct syntax for referring to an external script called 'xxx.js'?",     choice1: "<script href='xxx.js'>",     choice2: "<script name='xxx.js'>",     choice3: "<script src='xxx.js'>",     choice4: "<script file='xxx.js'>",     answer: 3   },   {     question: " How do you write 'Hello World' in an alert box?",     choice1: "msgBox('Hello World');",     choice2: "alertBox('Hello World');",     choice3: "msg('Hello World');",     choice4: "alert('Hello World');",     answer: 4   } ];  //CONSTANTS const CORRECT_BONUS = 1; const MAX_QUESTIONS = 50;  startGame = () => {   questionCounter = 0;   score = 0;   availableQuesions = [...questions];   getNewQuestion(); };  getNewQuestion = () => {   if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) {     localStorage.setItem("mostRecentScore", score);     //go to the end page     return window.location.assign("/End/end.html");   }   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.innerText = currentQuestion.question;    choices.forEach(choice => {     const number = choice.dataset["number"];     choice.innerText = currentQuestion["choice" + number];   });    availableQuesions.splice(questionIndex, 1);   acceptingAnswers = true; };  choices.forEach(choice => {   choice.addEventListener("click", e => {     if (!acceptingAnswers) return;      acceptingAnswers = false;     const selectedChoice = e.target;     const selectedAnswer = selectedChoice.dataset["number"];      const classToApply =       selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";      if (classToApply === "correct") {       incrementScore(CORRECT_BONUS);     }     if (classToApply === "correct") {       document.getElementById('crctmusic').play();     } else {       document.getElementById('wrngmusic').play();     }      selectedChoice.parentElement.classList.add(classToApply);      setTimeout(() => {       selectedChoice.parentElement.classList.remove(classToApply);       getNewQuestion();     }, 1000);   }); });  incrementScore = num => {   score += num;   scoreText.innerText = score; };  startGame(); 
Asked on September 1, 2020 in CSS.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.