In this tutorial we are going to create a simple MCQ quiz using pure Javascript. We will use Javascript function checkAns() to all calculation. Complete source code given below to create create mcq quiz programmatically so just copy and paste and create html file and open in a browser. Remember we did not use CSS (stylesheet) to enhance the look of MCQ quiz so you can customize as per your need.
Simple MCQ quiz using pure Javascript Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz Question</title>
</head>
<body>
<p>
<h1>MCQ</h1>
<h2>Quiz No. 1 :</h2>
India first world cup win...
</p>
<p>
<input type="radio" name="player" value="a" onclick="checkAns()">
<label>a. 1975</label><br>
<input type="radio" name="player" value="b" onclick="checkAns()">
<label>b. 1979</label><br>
<input type="radio" name="player" value="c" onclick="checkAns()">
<label>c. 1983</label><br>
<input type="radio" name="player" value="d" onclick="checkAns()">
<label>d. 1987</label><br><br>
<div id="res"></div>
</p>
<script>
function checkAns(){
let cAns="c";
let ans = document.querySelector('input[name="player"]:checked').value;
if(cAns==ans){
document.getElementById("res").innerHTML='<span style="color:green;font-Weight:bold;">You are right</span>';
}else{
document.getElementById("res").innerHTML='<span style="color:red;font-Weight:bold;">You are wrong</span>';
}
}
</script>
</body>
</html>
Simple MCQ quiz using pure Javascript Code Output
If you have and query or suggestion then please comment, I will reply to fix your problem, if you like our content then you can subscribe to our Youtube channel. If you want to hire me then reach us at our Fiverr.