Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Create a simple MCQ quiz using pure Javascript

Create a simple MCQ quiz using pure Javascript

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

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.

5 4 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments