Quiz app Javascript | Quiz app source code

Quiz app Javascript | Quiz app source code




quiz app javascript | quiz app source code

Welcome๐ŸŽ‰ to Code With Random blog in this blog we learn that how we 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.


quiz app javascript | quiz app source code


CSS for 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.


Now add javascript for question & answers!


Javascript for quiz app Javascript 

 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 ๐Ÿ™๐Ÿ’•


quiz app javascript | quiz app source code

quiz app javascript | quiz app source code



In this post, we learn how to create a quiz app using javascript with simple coding of HTML & CSS and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.


Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post