Quiz App in JavaScript – Step by Step with all Codes

In this tutorial, i would teach you how to build a complete Quiz Application in JavaScript. This would be a step-by-step.

You’ll have all the source codes you need and it’s really gonna be fun.

In this tutorial, you’ll learn

  • HTML and CSS
  • JavaScript

 

Content

  1. The html Page
  2. Understand the Styles
  3. The styles.css File
  4. The script File
  5. The First Part (Getting Elements by Ids)
  6. The app Object
  7. Three Event Listeners
  8. Next Steps

 

1. The HTML Page

This is a very simple page that would display a single question at a time. I have provided the content of the body for simplicity. So just write this code in the body section of your html page.

<div class="quiz-wrapper">       
    <div id="questionBox" class="question">
        Sample Question
    </div>
    <div class="options">
        <ul id="ul">
            <li id="opt1" onclick="button(this)"></li>
            <li id="opt2" onclick="button(this)"></li>
            <li id="opt3" onclick="button(this)"></li>
            <li id="opt4" onclick="button(this)"></li>
        </ul>
    </div>
    <div class="score">
        <div class="next">
            <button id="btnNext" type="button" onclick="next()">
              Next
            </button>
        </div>
        <div class="score-card">
            SCORE: <span id="scoreCard">0</span>
        </div>
    </div>
</div>

 

2. Understand the Styles

You already know that elements in a html page can have attributes like id, class, type etc. Now, let me briefly explain the classes to you.

  • quiz-wrapper: this class specifies the styles that are applied to the entire quiz box
  • question: this contains that styles applied to the question
  • options: the four options for each question
  • score: styles for the next button and the score-card
  • next: applies to the next button
  • score-card: applies to the score-card

 

3. The styles.css File

You need to create a file, styles.css. Place it in the same folder as your html file(index.html).

Since this file contains many styles, I would like you to get it from here. However, I recommend you write the classes yourself. See the Video

Then add the link to the style.css in you html page. So in the head section of your html page, add this line:

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

At this point, you can view the html page on a web browser. This is what you’ll see (but without the text)

 

Quiz Application in JavaScript

 

4. The Script File

This is where we have to do much of the work. So I really need you to pay attention to this part. Also watch the video if you for more detailed explanation. Although you can get the file from here, I would suggest you build up the script piece by piece.

Now, this is how we would structure the script:

First we would have get UI elements by their id

Then we define the app object which would contain both functions and properties: the functions include load(), next(), check(), preventClic(), allowClick() and scorCard. The attribute include: index and score.

Finally, we have three event listeners:

  • function to reload the page for a new quiz
  • function the executes when user clicks an option
  • then function to execute when the next button in clicked

 

5. The First Part (Getting Elements by Ids)

The code is given below. I’m sure you can easily understand it. Otherwise, see the video for explanation

var ul = document.getElementById('ul')
var nextButton = document.getElementById('btnNext');
var quizbox = document.getElementById('questionBox')
var opt1 = document.getElementById('opt1')
var opt2 = document.getElementById('opt2')
var opt3 = document.getElementById('opt3')
var opt4 = document.getElementById('opt4')

 

6. The app object

You can find below the code for the app object. I have added only two questions,  but you can add as many questions as you want.

Take some time to understand how each of the function works.

var app={
        questions:[
            {
                q:'What is the name of the river',
                options: ['Danube', 'Niger', 'Congo', 'Limpopo'],
                answer:1
            },
            {
                q:'What is the name of the Deadly virus',
                options: ['Antrax', 'Killvi', 'Corona', 'Wuhanvi'],
                answer:2
            }            
        ],
        index:0,
        //Load a question using the index
        load:function(){
            if(this.index<=this.questions.length-1){
                quizbox.innerHTML=this.index+1 + ". " +this.questions[this.index].q;
                opt1.innerHTML=this.questions[this.index].options[0];
                opt2.innerHTML=this.questions[this.index].options[1];
                opt3.innerHTML=this.questions[this.index].options[2];
                opt4.innerHTML=this.questions[this.index].options[3];
            }
            else {
                //Show the end screen
                quizbox.innerHTML="Quiz Completed!";
                ul.style.display="none";
                nextButton.style.display="none";
            }
        },
        next: function(){
            this.index++;
            this.load();
        },
        //Check if answer is correct or not
        check: function(ele){
            var id=ele.id.split('');
            if(id[id.length-1]==this.questions[this.index].answer){
                this.score++;
                ele.className="correct";
                this.scoreCard();
            }
            else{
                ele.className="wrong";
            }
        },
        //disable options once user selects on option
        preventClick:function(){
            for(let i=0; i<ul.children.length; i++){
                ul.children[i].style.pointerEvents="none";
            }
        },
        allowClick:function(){
            for(let i=0; i<ul.children.length; i++){
                ul.children[i].style.pointerEvents="auto";
                ul.children[i].className=''
            }
        },
        score:0,
        scoreCard:function(){
            scoreCard.innerHTML=this.questions.length + "/" + this.score;
        }
}

 

7. The Three Event Listeners

These event listeners, would listen to page reload event, button click event (for options selection) and next button clicked events respectively.

window.load=app.load();

function button(ele){
    app.check(ele);
    app.preventClick();
}

function next(){
    app.next();
    app.allowClick();
}

 

8. Next Steps

If you sucessfully completed this tutorial, then congrats!

However, there are a number of improvement that need to be made:

  • give the user option to replay
  • ensure that that questions are selected at random
  • read the question from a file

We would address these issues in the next tutorial.