Make A Simple Quiz App With html , CSS and jS:
If You like the project please make sure You subscribe channel and Like the post.
Be with us. Thank You.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>How much you know about my country? </title>
</head>
<body>
<div id="question">
<form name="form1" onchange="myf()">
<ol>
<li><span class="exp">What is the Capital city of Bangladesh?</span>
<div class="rows">
<label><input type="radio" name="q1" value="" />Delhi</label>
<label><input type="radio" name="q1" value="1" />Dhaka</label>
<label><input type="radio" name="q1" value="" />Katmundo</label>
<label><input type="radio" name="q1" value="" />Chittagong</label>
</div>
</li>
<li><span class="exp">The longest sea-beach Cox's-bazar situated in?</span>
<div class="rows">
<label><input type="radio" name="q2" value="1" />Bangladesh</label>
<label><input type="radio" name="q2" value="" />India</label>
<label><input type="radio" name="q2" value="" />Nepal</label>
<label><input type="radio" name="q2" value="" />Pakistan</label>
</div>
</li>
<li><span class="exp">What year did Bangladesh finally become independent and gain the name it has today??</span>
<div class="rows">
<label><input type="radio" name="q3" value="" />1981</label>
<label><input type="radio" name="q3" value="" />1991</label>
<label><input type="radio" name="q3" value="" />1889</label>
<label><input type="radio" name="q3" value="1" />1971</label>
</div>
</li>
<li><span class="exp">What does Bangladesh's flag look like?
</span>
<div class="rows">
<label><input type="radio" name="q4" value="" />Blue background with yellow star in centre</label>
<label><input type="radio" name="q4" value="" />Red background with white circle in centre</label>
<label><input type="radio" name="q4" value="" />White background with black circle in centre</label>
<label><input type="radio" name="q4" value="1" /> Green background with red circle in centre</label>
</div>
</li>
<li><span class="exp">On which continent is Bangladesh located?
</span>
<div class="rows">
<label><input type="radio" name="q5" value="" />Africa</label>
<label><input type="radio" name="q5" value="1" />Asia</label>
<label><input type="radio" name="q5" value="" />South America</label>
<label><input type="radio" name="q5" value="" />Europe</label>
</div>
</li>
</ol>
</form>
</div>
<div id="result"></div>
<p>Write the mark in comment box.°°</p>
</body>
</html>
CSS:
ol{
list-style-type: decimal;
}
ol .exp{
color: grey
}
ol .rows{
display: flex;
flex-direction: column;
}
ol .rows label{
display: flex;
}
#result{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
color: white;
background: grey;
font-family: calibri;
font-weight: bold;
font-size: 30px;
display: none;
}
JavaScript:
alert("You have 20 seconds to answer all questions!")
function myf(){
var final=0;
var q1=document.form1.q1.value;
var q2=document.form1.q2.value;
var q3=document.form1.q3.value;
var q4=document.form1.q4.value;
var q5=document.form1.q5.value;
function para(x){
if (x==1) {
final+=1
}
else{
final+=0
}
return x;
}
para(q1);
para(q2);
para(q3);
para(q4);
para(q5);
document.getElementById('result').innerHTML=final+"/5";
}
function show(){
document.getElementById('result').style.display="flex";
document.getElementById('question').style.display="none"
}
setTimeout(show, 20000);
alert("Plz leave a comment my code if you like")