Quiz app using Javascript | Quiz app source code

Welcome🎉 to Code With Random blog in this blog we learn how to create quiz app javascript. We use HTML & CSS and javascript for this quiz app javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for quiz app javascript.

HTML code for quiz app

   <div class="quiz-container" id="quiz">  
    <div class="quiz-header">  
     <h2 id="question">Question is loading...</h2>  
     <ul>  
      <li>  
       <input type="radio" name="answer" id="a" class="answer" />  
       <label for="a" id="a_text">Answer...</label>  
      </li>  
      <li>  
       <input type="radio" name="answer" id="b" class="answer" />  
       <label for="b" id="b_text">Answer...</label>  
      </li>  
      <li>  
       <input type="radio" name="answer" id="c" class="answer" />  
       <label for="c" id="c_text">Answer...</label>  
      </li>  
      <li>  
       <input type="radio" name="answer" id="d" class="answer" />  
       <label for="d" id="d_text">Answer...</label>  
      </li>  
     </ul>  
    </div>  
    <button id="submit">Submit</button>  
   </div>  

There is all HTML code for quiz app javascript. Now you can see output without CSS then we write CSS for our quiz app javascript.

 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");  
 * {  
  box-sizing: border-box;  
 }  
 body {  
  background-color: #b8c6db;  
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);  
  font-family: "Poppins", sans-serif;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  overflow: hidden;  
  margin: 0;  
 }  
 .quiz-container {  
  background-color: #fff;  
  border-radius: 10px;  
  box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);  
  width: 600px;  
  max-width: 95vw;  
  overflow: hidden;  
 }  
 .quiz-header {  
  padding: 4rem;  
 }  
 h2 {  
  padding: 1rem;  
  text-align: center;  
  margin: 0;  
 }  
 ul {  
  list-style-type: none;  
  padding: 0;  
 }  
 ul li {  
  font-size: 1.2rem;  
  margin: 1rem 0;  
 }  
 ul li label {  
  cursor: pointer;  
 }  
 button {  
  background-color: #8e44ad;  
  color: #fff;  
  border: none;  
  display: block;  
  width: 100%;  
  cursor: pointer;  
  font-size: 1.1rem;  
  font-family: inherit;  
  padding: 1.3rem;  
 }  
 button:hover {  
  background-color: #732d91;  
 }  
 button:focus {  
  outline: none;  
  background-color: #5e3370;  
 }  

Now we complete our CSS section,  Here is our updated output CSS.

 const quizData = [  
  {  
   question: "Which language runs in a web browser?",  
   a: "Java",  
   b: "C",  
   c: "Python",  
   d: "JavaScript",  
   correct: "d",  
  },  
  {  
   question: "What does CSS stand for?",  
   a: "Central Style Sheets",  
   b: "Cascading Style Sheets",  
   c: "Cascading Simple Sheets",  
   d: "Cars SUVs Sailboats",  
   correct: "b",  
  },  
  {  
   question: "What does HTML stand for?",  
   a: "Hypertext Markup Language",  
   b: "Hypertext Markdown Language",  
   c: "Hyperloop Machine Language",  
   d: "Helicopters Terminals Motorboats Lamborginis",  
   correct: "a",  
  },  
  {  
   question: "What year was JavaScript launched?",  
   a: "1996",  
   b: "1995",  
   c: "1994",  
   d: "none of the above",  
   correct: "b",  
  },  
 ];  
 const quiz = document.getElementById("quiz");  
 const answerElements = document.querySelectorAll(".answer");  
 const questionElement = document.getElementById("question");  
 const a_text = document.getElementById("a_text");  
 const b_text = document.getElementById("b_text");  
 const c_text = document.getElementById("c_text");  
 const d_text = document.getElementById("d_text");  
 const submitButton = document.getElementById("submit");  
 let currentQuiz = 0;  
 let score = 0;  
 const deselectAnswers = () => {  
  answerElements.forEach((answer) => (answer.checked = false));  
 };  
 const getSelected = () => {  
  let answer;  
  answerElements.forEach((answerElement) => {  
   if (answerElement.checked) answer = answerElement.id;  
  });  
  return answer;  
 };  
 const loadQuiz = () => {  
  deselectAnswers();  
  const currentQuizData = quizData[currentQuiz];  
  questionElement.innerText = currentQuizData.question;  
  a_text.innerText = currentQuizData.a;  
  b_text.innerText = currentQuizData.b;  
  c_text.innerText = currentQuizData.c;  
  d_text.innerText = currentQuizData.d;  
 };  
 loadQuiz();  
 submitButton.addEventListener("click", () => {  
  const answer = getSelected();  
  if (answer) {  
   if (answer === quizData[currentQuiz].correct) score++;  
   currentQuiz++;  
   if (currentQuiz < quizData.length) loadQuiz();  
   else {  
    quiz.innerHTML = `  
       <h2>You answered ${score}/${quizData.length} questions correctly</h2>  
       <button onclick="history.go(0)">Play Again</button>  
     ` // location.reload() won't work in CodePen for security reasons;  
   }  
  }  
 });  

Now we complete our javascript section,  Here is our updated output with javascript. Hope you like this quiz app, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕