JavaScript Quiz App Source Code

How To Make a Quiz App With JavaScript Using Visual Studio Code

In this JavaScript Tutorial we will see How to Make a Simple Quiz App Using a Paragraph, RadioButtons and a Button In JavaScript and Visual Studio Code .

Project Source Code:

<!DOCTYPE HTML>

<head>
    <style>
    
    #q-div{background-color: lightgray; border: 1px solid darkgray; width:25%;
           padding: 25px; margin-bottom: 35px;}

    input{margin-bottom: 14px} 
    button{background-color: black; color: yellow}     

    </style>
</head>

<body>

    <div id="container">
        <div id="content">
            <div id="q-div">
                <p id="q-content"> Question Here ?</p>
            </div>
        
            <input onclick="getSelectedRbutton(this)" type="radio" name="ops" 
                   class="rb" id="op1" value="A">
            <label class="lbl" for="op1">Option 1</label><br>

            <input onclick="getSelectedRbutton(this)" type="radio" name="ops"
                   class="rb" id="op2" value="B">
            <label class="lbl" for="op2">Option 2</label><br>

            <input onclick="getSelectedRbutton(this)" type="radio" name="ops" 
                   class="rb" id="op3" value="C">
            <label class="lbl" for="op3">Option 3</label><br>

            <input onclick="getSelectedRbutton(this)" type="radio" name="ops"
                   class="rb" id="op4" value="D">
            <label class="lbl" for="op4">Option 4</label><br><br>

            <button onclick="play()" id="btn">Next Question</button>

        </div>

    </div>


    <script>
    
    const questions = ["15 + 15 = ?","100 / 10 = ?","200 X 4 = ?",
                       "250 - 150 = ?","27 / 9 = ?"]
    // the last item in the options list row is the correct answer
    /* the four other are the options we gonna show the user and 
       one of them is the correct one */
    const options = [["1","30","3","4","30"],["10","30","25","1000","10"],
                     ["100","30","8000","800","800"],["100","300","500","450","100"],
                     ["10","5","3","4","3"]]
    // get the radio buttons
    rbuttons = document.getElementsByName("ops");
    // get the labels
    lbls = document.getElementsByClassName("lbl");
    // index to go through the questions
    // correct to count the correct answers
    index = 0, correct = 0;
    q_div = document.getElementById("q-div");
    question = document.getElementById("q-content");
    btn = document.getElementById("btn");


    // create a unction to get the selected radio button value
    function getSelectedRbutton(rbtn)
    {

        console.log(rbtn.value);
        // check if the user has selected the correct answer
        if(rbtn.value == options[index][4]){
            correct++;
        }
        index++;
        rButtonsState("d");

    }

    // create a function to enable and disable radio buttons
    function rButtonsState(st)
    {
        if(st == "d") // d for disable
        {
            rbuttons.forEach(element => {
                element.disabled = true;
            });
        }
        else
        {// enable
           rbuttons.forEach(element => {
               element.disabled = false;
           });
        }
    }
    
    // create the main function to play
    function play()
    {
      
      // display the question
      question.innerHTML = questions[index];
      // get the options
      op = options[index];
      
      if(btn.innerHTML == "Restart")
      {
        q_div.style.backgroundColor = "lightgray";
        q_div.style.borderColor = "darkgray";
        btn.innerHTML = "Next";
      }

      if(index == questions.length)
      {
        
        // if half or more of the answers  are correct
         if(correct >= questions.length/2)
         {
             q_div.style.backgroundColor = "lightgreen";
             q_div.style.borderColor = "green";
             question.innerHTML = correct + " Answers Are Correct";
         }
         else{
             q_div.style.backgroundColor = "lightcoral";
             q_div.style.borderColor = "red";
             question.innerHTML = correct + " Answers Are Correct";
         }

         btn.innerHTML = "Restart";
         index = 0;
         correct = 0;

      }
      else
      {
        // enable radiobuttons
        rButtonsState("e");
        // display the options in labels and radiobuttons   
        for(var i = 0; i < lbls.length; i++)
        {
            rbuttons[i].value = op[i];
            lbls[i].innerHTML = op[i];
            rbuttons[i].checked = false;
        }
        // if it's the last question
        if(index == questions.length - 1 )
        {
            btn.innerHTML = "Finish and See the Result";
        }
      }
    }
    
    play();

    </script>

</body>