Create a Multiple Choice Quiz Using JavaScript

Today we're going to create a multiple choice quiz using JavaScript, in this quiz, the user will have to choose the correct answer out of three choices, in less than 10 seconds, if the user didn't answer didn't answer the question in 10sec, it will go to the next question automatically, and the question is marked wrong. the user has a progress bar, that shows the total number of question, and also if the user answers a question correctly or not. You can check it below.

Start Quiz!

The first thing you're going to do to follow the tutorial. Is to go and download the starter template, the starter template has already all the files created ( index.html, quiz.js, style.css), the images, the code for CSS, cause we're not covering the CSS part in this tutorial.
DOWNLOAD: Multiple Choice Quiz In JAVASCRIPT - SOURCE CODE

Unzip the file, and open your index.html file using your favorite text editor. inside the HTML file copy/paste this code there.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Quiz</title>

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

</head>

<body>

    <div id="container">

        <div id="start">Start Quiz!</div>

        <div id="quiz" style="display: none">

            <div id="question"></div>

            <div id="qImg"></div>

            <div id="choices">

                <div class="choice" id="A" onclick="checkAnswer('A')"></div>

                <div class="choice" id="B" onclick="checkAnswer('B')"></div>

                <div class="choice" id="C" onclick="checkAnswer('C')"></div>

            </div>

            <div id="timer">

                <div id="counter"></div>

                <div id="btimeGauge"></div>

                <div id="timeGauge"></div>

            </div>

            <div id="progress"></div>

        </div>

        <div id="scoreContainer" style="display: none"></div>

    </div>

    <script src="quiz.js"></script>

</body>

</html>

now open the quiz.js file, it's empty, right?
you need to select the elements ( the div blocks inside your HTML file ), your HTML file, in javascript, is an object called document, this object has a method called, getElementById("id"), this method allows you to select an element using its id.

// select all elements

const start = document.getElementById("start");

const quiz = document.getElementById("quiz");

const question = document.getElementById("question");

const qImg = document.getElementById("qImg");

const choiceA = document.getElementById("A");

const choiceB = document.getElementById("B");

const choiceC = document.getElementById("C");

const counter = document.getElementById("counter");

const timeGauge = document.getElementById("timeGauge");

const progress = document.getElementById("progress");

const scoreDiv = document.getElementById("scoreContainer");

Now we need to create questions and the choices for every question, set the correct answer, and a related image. we have more than a question so we will need an array, every question has properties (question itself, 3 choices, correct answer, related image), which mean that every element of the array, is an object.

// create our questions

let questions = [

{

        question : "What does HTML stand for?",

        imgSrc : "img/html.png",

        choiceA : "Correct",

        choiceB : "Wrong",

        choiceC : "Wrong",

        correct : "A"

},{

        question : "What does CSS stand for?",

        imgSrc : "img/css.png",

        choiceA : "Wrong",

        choiceB : "Correct",

        choiceC : "Wrong",

        correct : "B"

},{

        question : "What does JS stand for?",

        imgSrc : "img/js.png",

        choiceA : "Wrong",

        choiceB : "Wrong",

        choiceC : "Correct",

        correct : "C"

}

];

PS: the questions are not safe, cause everyone can see the source code of the page.

now after we created the questions, we need to create two variables, the first one is the index of the starting question(the first question), which is ZERO ( the first element's index of an array is ZERO ). and the second is the index of the last question.

const lastQuestion = questions.length - 1;

let runningQuestion = 0;

Let's now create a function that will render a given question. we call this function: questionRender.

// render a question

function renderQuestion(){

    let q = questions[runningQuestion];

    question.innerHTML = "<p>"+ q.question +"</p>";

    qImg.innerHTML = "<img src="+ q.imgSrc +">";

    choiceA.innerHTML = q.choiceA;

    choiceB.innerHTML = q.choiceB;

    choiceC.innerHTML = q.choiceC;

}

All that this function does, is access to the running question, then change the innerHTML of the right elements. ( question, img, choiceA, B and C element).

In the right bottom corner of the container, you must see some circles which turn green if the answer was correct, and red when the answer is wrong. this is called progress, when the quiz started when need to create those circles. I will create a function called progressRender.

// render progress

function renderProgress(){

    for(let qIndex = 0; qIndex <= lastQuestion; qIndex++){

        progress.innerHTML += "<div class='prog' id="+ qIndex +"></div>";

}

}

progressRender use a for loop, to loop over all the elements of the questions array, starting from index 0, and stop at the last question(included), based on the number of questions, we will create the exact same number of the circles, which are divs, with the class = "prog". using CSS we make those divs has a round shape.

When the page is loaded, the user must click on the "Start Quiz!" button to start the quiz, so we must add an event listener to that button.

start.addEventListener("click",startQuiz);

******************
Now when the user clicks on the button, this will fire up a question called startQuiz, let's see what this function does.

start.style.display = "none"; This line of code will hide the "Start Quiz: button".
renderQuestion(); this will render the quetion.
quiz.style.display = "block"; this will display the quiz block, cause if you remember, we set its display property to "none" in the HTML code.
renderProgress(); this will render the circles at the right bottom corner.
renderCounter(); this will render the counter, which didn't talk about yet
TIMER = setInterval(renderCounter,1000); setInterval built-in function will call the renderCounter function every 1second ( 1000ms).

The tutorial has two parts, the 1st part is about the logic behind the code, as we are not going directly to type in the code. And then the 2nd part where we will type in the code.

If you want to follow the tutorial step by step, you must first download the starter template, from our repo on GitHub. download the starter template.

Create a Multiple Choice Quiz Using JavaScript

7 Comments

Contact form