Published - | Updated - February 10, 2023 03:41 am
111 Views
Hi Dev,
Today, i we will show you How to create JavaScript Quiz Example. This article will give you simple example of How to create JavaScript Quiz Example. you will How to create JavaScript Quiz Example. In this article, we will implement a How to create JavaScript Quiz Example.
So, let’s follow few steps to create example of How to create JavaScript Quiz Example.
Example
index.html
<!DOCTYPE html>
<html>
<head>
<title>Codeplaners Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="question" id="questionBox">
</div>
<div class="options">
<ul id="ul">
<li id="op1" onclick="button(this)"></li>
<li id="op2" onclick="button(this)"></li>
<li id="op3" onclick="button(this)"></li>
<li id="op4" onclick="button(this)"></li>
</ul>
</div>
<div class="score">
<div class="next">
<button type="button" onclick="next()" id="button">Next</button>
</div>
<div class="score-card">
Score : <span id="scoreCard">0</span>
</div>
<div class="back">
<button type="button" onclick="back()" id="button">Back</button>
</div>
<div class="restart">
<button type="button" onclick="restart()" id="button">Restart</button>
</div>
</div>
</div>
<script type="text/javascript">
function restart(){
location.reload();
}
</script>
<script type="text/javascript">
var ul=document.getElementById('ul');
var btn=document.getElementById('button');
var scoreCard=document.getElementById('scoreCard');
var quizBox=document.getElementById('questionBox');
var op1=document.getElementById('op1');
var op2=document.getElementById('op2');
var op3=document.getElementById('op3');
var op4=document.getElementById('op4');
var app={
questions:[
{q:'What does the abbreviation HTML stand for?', options:['Hyper Text Markup Language','High Text Markup Language','Hyper Tabular Markup Language','None of these'],answer:1},
{q:'Correct HTML tag for the largest heading is ?',options:['h4','h1','h8','h9'],answer:2},
{q:'How many sizes of headers are available in HTML by default?',options:['5','1','3','6'],answer:4},
{q:'What is the smallest header in HTML by default?',options:['h1','h6','h3','h4'],answer:2},
{q:'How do you select an element with id "demo"?', options:['*demo','#demo','demo','.demo'],answer:2},
],
index:0,
load:function(){
if(this.index<=this.questions.length-1){
quizBox.innerHTML=this.index+1+". "+this.questions[this.index].q;
op1.innerHTML=this.questions[this.index].options[0];
op2.innerHTML=this.questions[this.index].options[1];
op3.innerHTML=this.questions[this.index].options[2];
op4.innerHTML=this.questions[this.index].options[3];
this.scoreCard();
}
else{
quizBox.innerHTML="Quiz Over......!!!"
op1.style.display="none";
op2.style.display="none";
op3.style.display="none";
op4.style.display="none";
btn.style.display="none";
}
},
next:function(){
this.index++;
this.load();
},
back:function(){
this.index--;
this.load();
},
check:function(ele){
var id=ele.id.split('');
if(id[id.length-1]==this.questions[this.index].answer){
this.score++;
ele.className="correct";
ele.innerHTML="Correct";
this.scoreCard();
}
else{
ele.className="wrong";
ele.innerHTML="Wrong";
}
},
notClickAble:function(){
for(let i=0;i<ul.children.length;i++){
ul.children[i].style.pointerEvents="none";
}
},
clickAble:function(){
for(let i=0;i<ul.children.length;i++){
ul.children[i].style.pointerEvents="auto";
ul.children[i].className=''
}
},
score:0,
scoreCard:function(){
scoreCard.innerHTML=this.questions.length+"/"+this.score;
}
}
window.onload=app.load();
function button(ele){
app.check(ele);
app.notClickAble();
}
function next(){
app.next();
app.clickAble();
}
function back(){
app.back();
app.clickAble();
}
</script>
</body>
</html>
style.css
body{
background-color: #fff;
margin:0;
padding:0;
}
*{
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper{
height: 450px;
width: 650px;
background-color: white;
margin:50px auto;
border-radius: 8px;
margin-top: 150px;
}
.wrapper .question{
padding: 15px;
background-color:#673ab7;
border-radius: 8px;
color:#ffffff;
font-size:20px;
float: left;
width: 100%;
}
.wrapper .options{
float: left;
width: 100%;
}
.wrapper .options ul{
list-style: none;
padding: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.wrapper .options ul li{
display: inline-block;
background-color:#000;
width: 47%;
padding: 15px;
border-radius:8px;
margin-top: 25px;
font-size: 15px;
color:#ffffff;
box-shadow: 0px 3px 0px grey;
cursor: pointer;
outline: none;
text-align: center;
}
.wrapper .options ul li:active{
box-shadow: 0px 3px 0px transparent;
}
.wrapper .options ul li.correct{
background-color: #0fd40f;
box-shadow: 0px 3px 0px #03a503;
}
.wrapper .options ul li.wrong{
background-color: #e91e1e;
box-shadow: 0px 3px 0px #cb0b0b;
}
.wrapper .score{
float: left;
width: 100%;
padding:25px 0px;
}
.wrapper .score .next{
width: 35%;
float: right;
}
.wrapper .score .next button{
padding: 15px 80px;
color:white;
background-color:#00b0ff;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #00b0ff;
outline: none;
}
.wrapper .score .next button:active{
box-shadow: 0px 3px 0px transparent;
}
.wrapper .score .back{
width: 35%;
float: center;
}
.wrapper .score .back button{
padding: 15px 80px;
color:white;
background-color:#00b0ff;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #00b0ff;
outline: none;
}
.wrapper .score .back button:active{
box-shadow: 0px 3px 0px transparent;
}
.wrapper .score .restart{
width: 1%;
float: right;
margin-top: 30px;
}
.wrapper .score .restart button{
padding: 15px 64px;
color:white;
background-color:red;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #c97a06;
outline: none;
}
.wrapper .score .restart button:active{
box-shadow: 0px 3px 0px transparent;
}
.wrapper .score .score-card{
width: 30%;
float: right;
}
.wrapper .score .score-card{
font-size: 20px;
color:black;
line-height: 50px;
text-transform: uppercase;
}
.wrapper .score .score-card span{
background-color: #4caf50;
padding: 5px 15px;
border-radius: 8px;
color:#ffffff;
}