Hello Tech Lovers!
“How do I make a JavaScript quiz?” is one of the most common questions asked by people learning web development, and for good reason. Quizzes are fun! They’re a great way of learning about new subjects, and they allow you to engage your audience with something fun and playful.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>fiverr.com/skill_master18</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta name="HandheldFriendly" content="true">
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body style="background-image: linear-gradient(to right, #92ee92, #ffffff, #92ee92);">
<div class='container'>
<div class='marksDiv'> Marks: <span id='marks'>0</span></div>
<div id='question'></div>
<div class='text1'>Click correct answer from the choices below</div>
<div class='buttons'>
<button class='choices' id='choice1' value='' onclick='validateAns(this)'>Option 1</button>
<button class='choices' id='choice2' value='' onclick='validateAns(this)'>Option 2</button>
<button class='choices' id='choice3' value='' onclick='validateAns(this)'>Option 3</button>
<button class='choices' id='choice4' value='' onclick='validateAns(this)'>Option 4</button>
</div>
<button id='startButton' onclick='start()'>Start Quiz</button>
<div class='timeDiv'>Time Remaining : <span id="time">02:00</span></div>
</div>
</body>
</html>
style.css
.container{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
padding: 5px;
background: #bc7587;
width: 50%;
height: 450px;
text-align: center;
vertical-align: center;
border: 4px solid blue;
border-radius: 15px;
box-shadow: 1px 1px 1px #CCC;
}
.marksDiv{
background-color: #7fffd4;
border: 1px solid #7fffd4;
float: right;
font-size: 20px;
padding: 10px;
}
#marks{
font-size: 20px;
}
#question{
margin-left: auto;
margin-right: auto;
background-color: #0ea1a3;
width: 75%;
height: 150px;
font-size: 150px;
margin-top: 8%;
}
.text1{
margin-left: auto;
margin-right: auto;
width: 75%;
height: 50px;
margin-top: 5px;
text-align: center;
background-color: #fff8dc;
font-size: 20px;
}
.buttons{
margin-left: auto;
margin-right: auto;
width: 100%;
height: 120px;
margin-top: 5px;
text-align: center;
}
.choices{
background-color: white;
height: 120px;
width: 20%;
border: 1px solid black;
display: inline-block;
font-size : 25px;
font-weight: bold;
}
.choices:hover{
background-color: #dda0dd;
}
#startButton{
margin-top: 5px;
background-color: #90ee90;
padding: 10px;
font-size: 15px;
font-weight: bold;
}
#startButton:hover{
background-color: #5f9ea0;
}
#resetButton{
margin-top: 5px;
background-color: #90ee90;
padding: 10px;
font-size: 15px;
font-weight: bold;
}
#resetButton:hover{
background-color: #5f9ea0;
}
.timeDiv{
height: 50px;
font-size: 18px;
font-weight: bold;
width: 180px;
float: right;
margin-top: 10px;
background-color: #e9d7a9;
}
javascript.js
var qNumber = 0;
var score = 0;
var correctAns;
function start()
{
var element = document.getElementById("startButton");
if(element.innerHTML == "Start Quiz")
{
startQuiz();
}
else if(element.innerHTML == "Reset")
{
document.location.reload(true);
alert("Quiz Ended Your Score Is : " + score + "/" + qNumber);
}
}
function startQuiz()
{
if(qNumber==0)
{
timeTrigger();
}
var answer=Question();
correctAns = answer;
var array = choices(answer);
var shuffledArr = shuffleOptions(array);
var element = document.getElementById("choice1");
element.innerHTML = shuffledArr[0];
element.value=shuffledArr[0];
var element = document.getElementById("choice2");
element.innerHTML = shuffledArr[1];
element.value=shuffledArr[1];
var element = document.getElementById("choice3");
element.innerHTML = shuffledArr[2];
element.value=shuffledArr[2];
var element = document.getElementById("choice4");
element.innerHTML = shuffledArr[3];
element.value=shuffledArr[3];
var element = document.getElementById("startButton");
element.innerHTML = "Reset";
}
function Question()
{
// show question
var element = document.getElementById("question");
var num1 = Math.floor(Math.random() * 10) + 1;
var num2 = Math.floor(Math.random() * 10) + 1;
element.innerHTML = num1 + " + " + num2;
return num1+num2;
}
function choices(answer)
{
var arr = ["option1","option2","option3","option4"];
var dValue;
arr[0] = answer;
for(var x = 1; x < 4; x++)
{
dValue = Math.floor(Math.random() * 5) + 1;
if(dValue % 2 == 0)
{
arr[x] = answer - dValue;
}
else
{
arr[x] = answer + dValue;
}
}
return arr;
}
function shuffleOptions(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
document.location.reload(true);
alert("TimeOut Your Score Is : " + score + "/" + qNumber);
}
}, 1000);
}
function timeTrigger() {
var twoMinutes = 60 * 2,
display = document.querySelector('#time');
startTimer(twoMinutes, display);
}
function validateAns(e)
{
qNumber++;
if(e.value==correctAns)
{
score++;
var element=document.getElementById("marks");
element.innerHTML = score;
startQuiz();
}
else{
startQuiz();
}
}