Quiz Application in JavaScript with Validation (Step by Step)

In an earlier tutorial, I explained how to build a basic quiz application in JavaScript.

Now, in this tutorial, we would address some issued we raised. For instance, how do we randomize the questions. Also, how do we allow the user to restart the quiz.  So let’s get started!

I would also recommend you watch the video for more explanation

  1. The HTML File
  2. CSS Classes
  3. The JavaScript
  4. The randomNumber() Function
  5. The check() Function

 

Before you begin:

Create a folder where you’ll place all your files.

Inside this file, create a another folder called img. This folder will hold the images.

 

1. The HTML File

So I’ll provide you the html file. For simplicity, I have provided only the content of the body section of the file.

<div class="quiz-container">
    <div class="question-number">
        <h3>Question <span class="question-num-value"></span> of 
            <span class="total-questions"></span>
        </h3>
    </div>
    <div class="question">
        How do you declare a Javascript variable?
    </div>
    <div class="options">
        <div id="0" class="option1" onclick="check(this)"></div>
        <div id="1" class="option2" onclick="check(this)"></div>
        <div id="2" class="option3" onclick="check(this)"></div>
        <div id="3" class="option4" onclick="check(this)"></div>
    </div>
    <div class="button btn">
        <button type="button" onclick="next()" class="btn">Next</button>
    </div>
    <div class="answers-tracker">

    </div>
</div>
<div class="quiz-over">
    <div class="box">
        <h1>Good Job! <br />
            You got <span class="correct-answers"></span> out of 
            <span class="total-questions2"></span> answers correct. 
            That is <span class="percentage"></span>
            Try Again
        </h1>
        <button type="button" onclick="tryAgain()">Try Again!</button>
    </div>
</div>

What I want you to do is to take some time to understand the classes and ids in the html file. This is because, our JavaScript file would rely heavily on these elements.

 

2. The Classes and Styles

All the classes you see in the html file are defined in the styles.css file. You can get the complete file here. You can now add the stylesheet to your html page. Do this by adding this line to the head section.

<link rel="stylesheet" href="styles.css" />

After applying the style, you can preview your page, this is what you’ll see (but without the text)

Quiz Application in JavaScript with Validation

 

3. The JavaScript File

I have actually written the script file in a very simple way. You’ll see that it is made up of functions and variables. Now I have added comments to the file to help you clearly understand it.

Also take note of the array of questions. Feel free to add more questions if you want.

Here is the link to the script file.

However, I would explain part of the code here to make sure you understand the logic.

 

4. The randomQuestion() Function

This function is responsible for selecting a random question from the array of questions. It also ensures that duplicate questions are not selected.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//Function to select a random question
function randomQuestion(){
    let randomNumber = Math.floor(Math.random()*questions.length);
    if(index == questions.length){
        quizOver();
    }
    else{
        if(answeredQuestions.length > 0){
            if(answeredQuestions.includes(randomNumber)){
                randomQuestion();
            }
            else {
                currentIndex = randomNumber;
                load();
            }
        }
        if(answeredQuestions.length == 0){
            currentIndex = randomNumber
            load()
        }
        //add the question to list of answered questions
        answeredQuestions.push(randomNumber)
    }
}

 

How it works

I have added line numbers to be able to explain how it works

Line 1: a random number between 1 and the total questions is returned. The Math.random() returns a floating point number between 0 and 1. Then it is multiplied by the total questions. Finally, it is rounded off to the next integer value. For example, if Math.random() returns 0.3 and the total questions is 5. Then we would have 1.5. It is then rounded off to 2. And so on.

Lines 4 to 6: if the index is up to the total questions, then the quiz ends. Note that the index is incremented every time  a question is loaded.

Line 9 to 11: if the random number is found in list of answered questions, then we select another random number

Line 13, 14: set the random number to current index and load the question at the current index

Lines 8, 17 to 20: this lines checks that for the very first question (answeredQuestion = 0 that is, no question have been answered), just load the question using the current index without checking for any duplicate.

Line 22: any answered question is added to an array of answered questions

 

5. The check() Function

This function check if an option selected by the user is the correct option. Take a look at the code below and then we’ll discuss it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
//Check if selected answer is correct or wrong
function check(element){
    if(element.id == questions[currentIndex].answer){
        element.className="correct"
        updateAnswersTracker("correct")
        score++
    }
    else {
        element.className="wrong"
        updateAnswersTracker("wrong")
    }
    disableClick();
}

How it works

First, the ids of the elements are numbers 1 to 4. Similarly, the answers to the questions are numbered 1 to 4.

So if the id of the clicked element equals the answer to the current question, then do three things:

  • add the ‘correct’ style to the class
  • update the answersTracker
  • updates the score

However, if the answer is wrong, we add the ‘wrong’ style and update the answersTracker

Regardless, we just disable click for other buttons.

 

Other functions I would like you to review by yourself includes:

  • validate()
  • disableClick()
  • quizOver()