Build Quiz App using HTML, CSS and JavaScript

February 10, 2023

Learn How to make Quiz App using HTML, CSS and JavaScript

The Features of our Quiz app

The questions will be displayed one by one with their options.
We have to choose the answer from the given options. Only by selecting the option will display whether the selected option is correct or not.
We cannot proceed to the next question without choosing an option. I mean next button will not appear until we select any option.
The total number of questions will be shown in the quiz, along with which question you have reached, it will also be shown.
When you reach the last question, the finish button will appear.
As soon as you press the finish button, you will be shown the result showing your total correct and incorrect answer.

today I'm going to teach you how to Create Quiz App using JavaScript.

Step 1) Make Design using HTML and CSS:

Important Links

Please add this links in head section of html file

<!-- for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- google fonts for styling -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">

We will make three screen in single page for it.

Screen 1 : Start Quiz

HTML Code

<div class="start_quiz">Start Quiz</div>

Screen 1 : Start Quiz

CSS Code

body{
    background: #911ae2;
    font-family: 'Roboto', sans-serif;
}

.start_quiz{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid #fff;
    padding: 10px 30px;
    color: #fff;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}
.start_quiz:hover{
    background: #fff;
    color: #911ae2;
}

Try this code

Screen 2 : Display Questions

HTML Code

<div class="quiz-box">
  <h2 class="que_text">1. Hyper Text Markup Language</h2>
  <div class="options">
    <div class="option incorrect disabled">Hyper Text Multiple Language<i class="fa fa-times"></i></div>
    <div class="option disabled">Hyper Text Preprocessor</div>
    <div class="option disabled">Hyper Tool Multi Language</div>
    <div class="option correct disabled">Hyper Text Markup Language<i class="fa fa-check"></i></div>
  </div>
  <div class="quiz-footer">
    <div class="footer-left">
      <span class="count_que">1</span> of <span class="total_que">5</span> Questions
    </div>
    <div class="footer-right">
      <div class="next-btn">Next Question</div>
    </div>
  </div>
</div>

Screen 2 : Display Questions

CSS Code

body{
    background: #911ae2;
    font-family: 'Roboto', sans-serif;
}

.inactive{
    display: none;
}
.disabled{
    pointer-events: none;
}

.quiz-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #777;
    padding: 50px;
    width: 100%;
    max-width: 600px;
    background: rgba(0,0,0,0.5);
}
.quiz-box h2{
    font-size: 30px;
}
.quiz-box .option{
    font-size: 18px;
    border: 2px solid #fff;
    margin: 20px 0;
    padding: 12px 15px;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    
}
.quiz-box .option .fa{
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 30px;
}


.quiz-box .option.incorrect{
    background: rgb(241, 153, 153);
    color: rgb(184, 12, 12);
    border-color: rgb(184, 12, 12);
}
.quiz-box .option.correct{
    background: rgb(157, 246, 157);
    color: rgb(6, 138, 28);
    border-color: rgb(6, 138, 28);
}

.quiz-box .option:hover{
    background: #911ae2;
}

.quiz-footer{
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}
.count_que,.total_que{
    font-weight: bolder;
    font-size: 20px;
}
.footer-left{
    font-size: 18px;
}
.next-btn{
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.next-btn:hover{
    background: #fff;
    color: #911ae2;
}

Try this code

Screen 3 : Display Result

HTML Code

<div class="result-box">
   <h2>Result</h2>
   <div class="result">
      <h3 class="total-que">Total Questions : <span>5</span></h3>
      <h3 class="right-ans">Right Answers : <span>3</span></h3>
      <h3 class="wrong-ans">Wrong Answers : <span>2</span></h3>
      <h3 class="percentage">Percentage : <span>60.00%</span></h3>
   </div>
   <div class="result-footer">
      <div class="again-quiz">Again Quiz</div>
      <div class="exit">Exit</div>
   </div>
</div>

Screen 3 : Display Result

CSS Code

body{
    background: #911ae2;
    font-family: 'Roboto', sans-serif;
}

.start_quiz{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid #fff;
    padding: 10px 30px;
    color: #fff;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}
.start_quiz:hover{
    background: #fff;
    color: #911ae2;
}

.inactive{
    display: none;
}
.disabled{
    pointer-events: none;
}

.footer-left{
    font-size: 18px;
}
.next-btn{
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.next-btn:hover{
    background: #fff;
    color: #911ae2;
}

.result-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    box-shadow: 0 0 10px #777;
    width: 100%;
    max-width: 450px;
    background: rgba(0,0,0,0.5);
}
.result-box h2{
    font-size: 36px;
    background: #fff;
    color: #911ae2;
    text-align: center;
    padding: 20px 0;
}
.result-box .result{
    padding: 40px;
}
.result-box h3{
    font-size: 30px;
    margin-bottom: 10px;
}

.result-footer{
    display: flex;
    justify-content: space-around;
    padding-bottom: 30px;
}
.result-footer .again-quiz,.result-footer .exit{
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}
.result-footer .again-quiz{
    background: #911ae2;
    color: #fff;
    border-color: #911ae2;
}
.result-footer .again-quiz:hover{
    background: #fff;
    color: #911ae2;
    border-color: #fff;
}

.result-footer .exit{
    background: #fff;
    color: #911ae2;
    border-color: #fff;
}

.result-footer .exit:hover{
    background: #911ae2;
    color: #fff;
    border-color: #911ae2;
}

Try this code

Step 2) Add Questions with their options in JavaScript file

Questions:

var questions = [{
    num: 1,
    question: "What does HTML stand for?",
    answer: "Hyper Text Markup Language",
    options: [
      "Hyper Text Multiple Language",
      "Hyper Text Preprocessor",
      "Hyper Tool Multi Language",
      "Hyper Text Markup Language"
    ]
  },
  {
    num: 2,
    question: "What does CSS stand for?",
    answer: "Cascading Style Sheet",
    options: [
      "Computer Style Sheet",
      "Cascading Style Sheet",
      "Colorful Style Sheet",
      "Common Style Sheet"
    ]
  },
  {
    num: 3,
    question: "What does PHP stand for?",
    answer: "Hypertext Preprocessor",
    options: [
      "Hypertext Preprocessor",
      "Hypertext Programming",
      "Hometext Preprocessor",
      "Hypertext Preprogramming"
    ]
  },

  {
    num: 4,
    question: "What does XML stand for?",
    answer: "eXtensible Markup Language",
    options: [
      "eXTra Multi-Program Language",
      "eXecutable Multiple Language",
      "eXtensible Markup Language",
      "eXamine Multiple Language"
    ]
  },
  {
    num: 5,
    question: "What does SQL stand for?",
    answer: "Structured Query Language",
    options: [
      "Statement Question Language",
      "Stylesheet Query Language",
      "Stylish Question Language",
      "Structured Query Language"
    ]
  },
];

Step 3) Add Javascript:

Js code:

const start_btn = document.querySelector(".start_quiz");
const quiz_box = document.querySelector(".quiz-box");
const que_text = quiz_box.querySelector(".que_text");
const options_box = quiz_box.querySelector(".options");
const next_btn = document.querySelector(".next-btn");
const total_q = document.querySelector(".quiz-footer .total_que");
const count_que = document.querySelector(".quiz-footer .count_que");
const result_box = document.querySelector(".result-box");

const total_que_r = document.querySelector(".total-que span");
const right_ans_r = document.querySelector(".right-ans span");
const wrong_ans_r = document.querySelector(".wrong-ans span");
const percentage = document.querySelector(".percentage span");

const again_quiz = document.querySelector(".result-footer .again-quiz");
const exit = document.querySelector(".result-footer .exit");

const mark_wrong = '<i class="fa fa-times"></i>';
const mark_check = '<i class="fa fa-check"></i>';


start_btn.onclick = () => {
  quiz_box.classList.remove("inactive");
  start_btn.classList.add("inactive");
}

total_q.innerText = questions.length;
total_que_r.innerText = questions.length;

var que_index = 0;
var right_answers = 0;
var wrong_answers = 0;
count_que.innerText = que_index + 1;
ShowQuestion(que_index);

function ShowQuestion(q_index) {
  que_text.innerText = questions[q_index].num + ". " + questions[q_index].question;
  var option_statement = "";
  for (var i = 0; i < questions[q_index].options.length; i++) {
    option_statement += `<div class="option">${questions[q_index].options[i]}</div>`;
  }

  options_box.innerHTML = option_statement;

  var AllOptions = options_box.querySelectorAll(".option");

  for (var j = 0; j < AllOptions.length; j++) {
    AllOptions[j].setAttribute("onclick", "UserAnswer(this)");
  }
  next_btn.classList.add("inactive");
}


next_btn.onclick = () => {
  que_index++;

  if (questions.length > que_index) {
    count_que.innerText = que_index + 1;
    ShowQuestion(que_index);
  } else {
    console.log("Questions Complete");
    quiz_box.classList.add("inactive");
    result_box.classList.remove("inactive");
    right_ans_r.innerText = right_answers;
    wrong_ans_r.innerText = wrong_answers;
    percentage.innerText = ((right_answers * 100) / questions.length).toFixed(2) + "%";


  }

  if (questions.length - 1 == que_index) {
    next_btn.innerText = "Finish";
  }
}

function UserAnswer(answer) {
  let userAns = answer.innerText;
  let correctAns = questions[que_index].answer;
  var AllOptions2 = options_box.querySelectorAll(".option");

  next_btn.classList.remove("inactive");
  if (userAns == correctAns) {
    console.log("%c Right Answer", "color:green");
    answer.classList.add("correct");
    answer.insertAdjacentHTML("beforeend", mark_check);
    right_answers++;
  } else {

    console.log("%c Wrong Answer", "color:red");
    answer.classList.add("incorrect");
    answer.insertAdjacentHTML("beforeend", mark_wrong);
    wrong_answers++;

    for (var i = 0; i < AllOptions2.length; i++) {
      if (AllOptions2[i].innerText == correctAns) {
        AllOptions2[i].classList.add("correct");
        AllOptions2[i].insertAdjacentHTML("beforeend", mark_check);
      }
    }
  }


  for (var j = 0; j < AllOptions2.length; j++) {
    AllOptions2[j].classList.add("disabled");
  }

}

again_quiz.onclick = () => {
  quiz_box.classList.remove("inactive");
  result_box.classList.add("inactive");

  reset();

}

exit.onclick = () => {
  start_btn.classList.remove("inactive");
  result_box.classList.add("inactive");

  reset();
}

function reset() {
  que_index = 0;
  right_answers = 0;
  wrong_answers = 0;
  next_btn.innerText = "Next Question";
  count_que.innerText = que_index + 1;
  ShowQuestion(que_index);
}

Try this code