Making MCQ quiz in JavaScript

Hey there, Javascript developers 👩‍💻

In this article, we are going to see how to make a simple quiz (MCQ) in javascript !!

Problem Statement

Prepare a Quiz and enable the user to play the quiz and calculate scores based on the answers chosen by the user.

Tech Stack Used

Html, CSS, and Javascript. This is beginner friendly application that any newbie can try to make the concept more clear and for good coding practice.

okay, this sounds interesting but the question is where to start?

I prefer to build the HTML part at first so that we can get an idea about the app which we are going to develop.

then develop a javascript file to form logic around the application and to make sure that wiring between HTML file and javascript file is good for that you can do a dry run by using console log.

and last I prefer to do css part because I am not good at css but you can do it simultaneously. so let's start coding with the first HTML file.

  <form id="quiz-form">
      <div>
          <h2 >Triangle Quiz</h2>
          <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 
           45°?</p>
      </div>
  </form>

Here I am using the form element to make a quiz because in javascript form element is used as a documenting section for submitting information. nowhere inside the form element, ideal practice is making separate div element for every new question. you will see ahead why I am saying this.

now as this is MCQ quiz we need 4 options. to give options we are using input element but in input, we are using type as "radio".

why type="radio"
because radio represents the collection of radio buttons describing related options.

Note 1: radio buttons of all options should share the same name.

Note 2: The value attribute defines the unique value associated with each radio button. The value is not shown to the user but is the value that is sent to the server on "submit" to identify which radio button was selected.

Note 3: Always add the tag for best accessibility practices!

<form id="quiz-form" >
        <div>
            <h2 >Triangle Quiz</h2>
            <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 45°?</p>
            <label><input type="radio" name="question1" value="45°"/>45°</label>
            <label><input type="radio" name="question1" value="60°"/>60°</label>
            <label><input type="radio" name="question1" value="90°"/>90°</label>
        </div>

    </form>

now we have the question format ready we can make quiz of any number of questions.
Tip: remember to change the name tag inside the input tag for every question so that it toggles for only that question.

now let's create a button to submit our test.

<button id="submit-btn" >Submit Answers</button>

Remember write button element outside the form because if we click on button page gets refreshed. so to make it simple let's write a button element outside the form element.

and last we are going to make another div for our final result.