Amazing HTML Dynamic Multi-Choice Quiz Using JavaScript

Today, here, I’m sharing you an amazing HTML dynamic multi-choice quiz using JavaScript and CSS. This will help you to create HTML Quiz application using JavaScript and CSS.

In this JavaScript Quiz, if the selected answer is right, then the selection will become green. Otherwise, the selection will become red color and the right answer will become green color.

HTML Dynamic Multi-Choice Quiz Using JavaScript

Below I’m sharing you the code to create the JavaScript Quiz.

HTML Code

First you need to create an HTML form with four radio buttons as shown below.

<form name="myform">
 <input id="op1" type="radio" name="q1" value="option1" onchange="getResult()">
 <label for="op1" id="opl1">(a) Option 1</label><br><br>
 <input id="op2" type="radio" name="q1" value="option2" onchange="getResult()">
 <label for="op2" id="opl2">(b) Option 2</label><br><br>
 <input id="op3" type="radio" name="q1" value="option3" onchange="getResult()">
 <label for="op3" id="opl3">(c) Option 3</label><br><br>
 <input id="op4" type="radio" name="q1" value="option4" onchange="getResult()">
 <label for="op4" id="opl4">(d) Option 4</label><br>
</form>

CSS Code

Now let’s add some CSS code to customize the form.

label{    
  background-color:#f7f7f7;
  border: dashed 2px #aaaaaa; 
  padding: 13px;    
  font-size: 22px;    
  display: block; 
}
label:hover{  
  background-color:#fefefe;
  border: solid 2px #333;     
}
input{
  display: none;
}

JavaScript Code

Now, here is the important part of our code. This JavaScript code makes our quiz interactive and dynamic.

<script> 
 function getResult(){
 var ans="option1"
 var opt=document.myform.q1.value; 
 
 document.getElementById("op1").disabled = true;
 document.getElementById("op2").disabled = true;
 document.getElementById("op3").disabled = true;
 document.getElementById("op4").disabled = true;
 
 switch(ans){
 case a:
   document.getElementById('opl1').style.color = "green";
   document.getElementById('opl1').style.fontWeight="bolder";
   document.getElementById('opl1').style.border="3px solid green"
 break; 
 
 case b:
   document.getElementById('opl2').style.color = "green";
   document.getElementById('opl2').style.fontWeight="bolder";
   document.getElementById('opl2').style.border="3px solid green"
 break; 

 case c:
   document.getElementById('opl3').style.color = "green";
   document.getElementById('opl3').style.fontWeight="bolder";
   document.getElementById('opl3').style.border="3px solid green"
 break; 
 
 case d:
   document.getElementById('opl4').style.fontWeight="bolder";
   document.getElementById('opl4').style.color = "green";
   document.getElementById('opl4').style.border="3px solid green"
 break;
 }
 
 switch(opt){
 case a:
   if(opt!==ans){
     document.getElementById('opl1').style.color = "red";
     document.getElementById('opl1').style.border="3px solid red"
  }
 break;
 
 case b:
   if(opt!==ans){
     document.getElementById('opl2').style.color = "red";
     document.getElementById('opl2').style.border="3px solid red"
  }
 break;
 
 case c:
   if(opt!==ans){
     document.getElementById('opl3').style.color = "red";
     document.getElementById('opl3').style.border="3px solid red"
  }
 break;
 
 case d:
   if(opt!==ans){ 
     document.getElementById('opl4').style.color = "red";
     document.getElementById('opl4').style.border="3px solid red" 
  } 
 }
}
</script>

You can test the demo of this code right here, play some Malayalam Quiz.