...
<!DOCTYPE html>
<html>
<head>
<title>quiz in Javascript </title>
<link rel="stylesheet" href="style.css">
<style>
body{
margin:0;
background-color:#d9cdcd;
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
.quiz-container{
max-width: 700px;
min-height:500px;
background-color: #ffffff;
margin:40px auto;
border-radius:10px;
padding:30px;
}
.quiz-container::after,.quiz-container::before{
content: '';
clear: both;
display: table;
}
.question-number,
.question,
.options,
.button,
.answers-tracker{
float: left;
width: 100%;
}
.question-number h3{
color:#009688;
border-bottom: 1px solid #ccc;
margin:0;
padding-bottom:10px;
}
.question {
font-size:22px;
color:000000;
padding:20px 0;
}
.options div{
background-color: #cccccc;
font-size:16px;
color:000000;
margin-bottom:10px;
border-radius:5px;
padding:15px;
position: relative;
overflow:hidden;
cursor: pointer;
}
.options div.disabled{
pointer-events: none;
}
.options div.correct{
z-index: 1;
color: #fff;
}
.options div.correct::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color: green;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.options div.wrong{
z-index: 1;
color: #fff;
}
.options div.wrong::before{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background-color:red;
z-index: -1;
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.button .btn{
padding:15px 50px;
border-radius:5px;
cursor: pointer;
background-color:#009688;
font-size:16px;
color:#ffffff;
border: none;
display: inline-block;
margin:15px 0 20px;
}
.answers-tracker{
border-top:1px solid #ccc;
padding-top: 15px;
}
.answers-tracker div{
height: 40px;
width: 40px;
background-color: #cccccc;
display: inline-block;
border-radius: 50%;
margin-right:5px;
}
.answers-tracker div.correct{
background-color: green;
background-image:url('img/correct.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.answers-tracker div.wrong{
background-color: red;
background-image:url('img/wrong.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.quiz-over{
position: fixed;
left:0;
top:0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.9);
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}
.quiz-over.show{
display: flex;
}
.quiz-over .box{
background-color: #009688;
padding:30px;
border-radius:10px;
text-align: center;
flex-basis: 700px;
max-width:700px;
color:#ffffff;
}
.quiz-over .box h1{
font-size:36px;
margin:0 0 20px;
}
.quiz-over .box button{
padding:15px 50px;
border:none;
background-color:#FF9800;
border-radius:5px;
font-size:16px;
margin:15px 0 20px;
color:#ffffff;
}
</style>
</head>
<body>
<div class="quizContainer container-fluid well well-lg">
<div id="quiz1" class="text-center">
<h3 style="color:#d14040;position:center;left:80%;top:0%;" align="Center" ><span id="Modern History Of India Quiz part 01 for all Exams">Quiz for all Exams </span><br/><span id='Modern History Of India Quiz part 01 for all Exams' style="font-size:25px;"></span></h3>
<h2 Style="color:#ff000;position:center;left:80%;top0%;" align="center" "font-size:25px;"><samp id="Sub heading"> Test Quiz</samp></h2>
</div>
<div class="quiz-container">
<div class="question-number">
<h3>Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="question">
</div>
<div class="options">
<div id="1" class="option1" onclick="check(this)"></div>
<div id="2" class="option2" onclick="check(this)"></div>
<div id="3" class="option3" onclick="check(this)"></div>
<div id="4" class="option4" onclick="check(this)"></div>
</div>
<div class="button">
<button type="button" class="btn" onclick="next()">Next</button>
</div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
Good Try!<br>
You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br>
That's <span class="percentage"></span>
</h1>
<button type="button" onclick="tryAgain()">TryAgain</button>
</div>
</div>
<script src="script.js"></script>
<script>
const options=document.querySelector(".options").children;
const answerTrackerContainer=document.querySelector(".answers-tracker");
const questionNumberSpan=document.querySelector(".question-num-value");
const totalQuestionSpan=document.querySelector(".total-question");
const correctAnswerSpan=document.querySelector(".correct-answers");
const totalQuestionSpan2=document.querySelector(".total-question2");
const percentage=document.querySelector(".percentage");
const question=document.querySelector(".question");
const op1=document.querySelector(".option1");
const op2=document.querySelector(".option2");
const op3=document.querySelector(".option3");
const op4=document.querySelector(".option4");
let questionIndex;
let index=0;
let myArray=[];
let myArr=[];
let score=0;
// questions and options and answers
const questions=[
{
q:'किसी वस्तु पर आवेश की न्यूनतम मात्रा कम नहीं हो सकती है ',
options:['1.6 x 10-19 कूलम्ब से ',' 3.2 x 10-19 कूलम्ब से ',' 4.8 x 10-19 कूलम्ब से ',' 1 कूलम्ब से '],
answer:1
},
{
q:'दो वैद्युत क्षेत्र रेखाएँ एक-दूसरे को किस कोण पर काटती हैं ? ',
options:[' 90°',' 45°','30°','नहीं काटती हैं'],
answer:4
},
{
q:'विद्युत आवेश का क्वांटम e.s.u.मात्रक में होता है ',
options:[' 4.78 x 10-10',' +1.6 x 10-19','2.99 x 109','-1.6 x 10-19'],
answer:1
},
{
q:'एक चुम्बक एक बंद चालक के निकट स्थित है। चालक में धारा उत्पन्न की जा सकती है। यदि : ',
options:[' केवल चुम्बक गतिशील हो ',' केवल चालक गतिशील हो ','चुम्बक और चालक दोनों गतिशील हों ','चालक और चुम्बक के बीच आपेक्षिक गति हो'],
answer:4
},
{
q:'छड़ में प्रेरित विद्युत वाहक बल का मान होगा : ',
options:['BLV','B2L2V',' शून्य ',' इनमें से कोई नहीं '],
answer:1
},
{
q:'फ्यूज-तार किस पदार्थ से निर्मित होती है ? ',
options:[' ताँबा ','टंगस्टन ','लेड-टिन मिश्रधातु ',' नाइक्रोम '],
answer:1
},
{
q:'एक दस ओम तार की लम्बाई को खींचकर तीगणा लम्बा कर दिया जाता है। तार का नया प्रतिरोध होगा :',
options:['10 ohm','30 ohm','90 ohm','100 ohm'],
answer:3
},
{
q:'किर्कहॉफ का प्रथम नियम (ΣI=0) एवं द्वितीय नियम (ΣIR = ΣE) क्रमशः आधारित है : ',
options:['आवेश संरक्षण एवं संवेग संरक्षण ','ऊर्जा संरक्षण एवं आवेश संरक्षण ',' संवेग संरक्षण एवं आवेश संरक्षण ','आवेश संरक्षण एवं ऊर्जा संरक्षण '],
answer:4
},
{
q:'तरंगदैर्घ्य के बढ़ने के साथ अपवर्तनांक का मान : ',
options:[' घटता है ',' बढ़ता है ','अपरिवर्तित रहता है ',' इनमें से कोई नहीं'],
answer:1
},
{
q:'इनमें से किस जोड़ों के लिए क्रांतिक कोण न्यूनतम होगा : ',
options:[' पानी-हवा ',' काँच-पानी ','काँच-हवा ','काँच-काँच '],
answer:3
},
{
q:'प्रकाश हवा से काँच में प्रवेश करती है, इसका तरंगदैर्घ्य : ',
options:['बढ़ता है ',' घटता है ','नहीं बदलता है ','इनमें से कोई नहीं '],
answer:2
},
{
q:'विधुत-चुम्बकीय तरंग को ध्रुवित किया जा सकता है ',
options:['लेंस द्वारा ',' दर्पण द्वारा ','पोलैरॉइड ',' प्रिज्म द्वारा '],
answer:3
},
{
q:'यंग के द्वि-छिद्र प्रयोग में रचनात्मक व्यतिकरण उत्पन्न करने वाले दो तरंगों के बीच पथान्तर का मान नहीं होता है ',
options:[' nλ','(n + 1/2)λ',' (2n + 1)λ','(2n + 1)λ/2'],
answer:1
},
{
q:'प्रकाश किरणों के तीखे कोट पर मुड़ने की घटना को कहते हैं : ',
options:[' अपवर्तन ','विवर्तन ','व्यतिकरण ','ध्रुवण '],
answer:2
},
{
q:'निम्नलिखित में किसे प्रकाश के तरंग-सिद्धांत से नहीं समझा जा सकता है ? ',
options:['परावर्तन ',' अपवर्तन ','विवर्तन ',' प्रकाश-विधुत प्रभाव '],
answer:4
},
{
q:'एक ऐसी परिघटना जो यह प्रदर्शित करती है कि कोई तरंग अनुप्रस्थ है, वह है: ',
options:['प्रकीर्णन ','विवर्तन ','व्यतिकरण ','ध्रुवण '],
answer:4
},
{
q:'हाइड्रोजन परमाणु की मूल अवस्था में इलेक्ट्रॉन के वेग का परिमाण होता है ',
options:['C /2 ',' C /137','2C /137','C /237'],
answer:2
},
{
q:'हाइड्रोजन स्पेक्ट्रम की कौन-सी श्रेणी दृश्य भाग में पड़ती है ? ',
options:['लाईगन श्रेणी ','बाल्मर श्रेणी ',' पाश्चन श्रेणी ','ब्रैकेट श्रेणी '],
answer:2
},
{
q:'हाइड्रोजन स्पेक्ट्रम के उत्सर्जन में बामर श्रेणियाँ होती हैं – ',
options:['दृश्य परिसर में ',' अवरक्त क्षेत्र में ',' परबैंगनी परिसर में ',' इनमें से कोई नहीं '],
answer:1
},
{
q:'रिडबर्ग नियतांक R एवं प्रकाश की चाल c हो तो RC का मात्रक होगा ',
options:[' m-1','s-1','kg-1','इनमें से कोई नहीं '],
answer:2
},
{
q:'1 मेगा इलेक्ट्रॉन वोल्ट ऊर्जा वाले फोटॉन का संवेग होगा : ',
options:['10-22 kgm/s',' 10-26 kgm/s',' 5 x 10-22 kgm/s','7 x 10-24 kgm/s'],
answer:3
},
{
q:'लेजर की क्रिया के लिए जरूरी है –',
options:['संख्या परिवर्तन ','उच्च ताप ','निम्न ताप ','अर्द्धचालक '],
answer:1
},
{
q:'V आवृत्ति वाले फोटोन के साथ संवेग जुड़ा हुआ है। यदि प्रकाश का वेग c हो तो संवेग होगा: ',
options:[' hV/c2','hV/c','V/c','hVc'],
answer:2
},
{
q:'एक पदार्थ का कार्य फलन 4ev है। वेहली तरंगदैर्ध्य होगा : ',
options:['540 nm','400 nm','310 nm','220 nm'],
answer:3
},
{
q:'फोटो सेल आधारित है – ',
options:['प्रकाश-विद्युत् प्रभाव पर ',' धारा के रासायनिक प्रभाव पर ',' धारा के चुम्बकीय प्रभाव पर ','विद्युत्-चुम्बकीय प्रेरण पर '],
answer:1
}
]
// set questions and options and question number
totalQuestionSpan.innerHTML=questions.length;
function load(){
questionNumberSpan.innerHTML=index+1;
question.innerHTML=questions[questionIndex].q;
op1.innerHTML=questions[questionIndex].options[0];
op2.innerHTML=questions[questionIndex].options[1];
op3.innerHTML=questions[questionIndex].options[2];
op4.innerHTML=questions[questionIndex].options[3];
index++;
}
function check(element){
if(element.id==questions[questionIndex].answer){
element.classList.add("correct");
updateAnswerTracker("correct")
score++;
console.log("score:"+score)
}
else{
element.classList.add("wrong");
updateAnswerTracker("wrong")
}
disabledOptions()
}
function disabledOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.add("disabled");
if(options[i].id==questions[questionIndex].answer){
options[i].classList.add("correct");
}
}
}
function enableOptions(){
for(let i=0; i<options.length; i++) {
options[i].classList.remove("disabled","correct","wrong");
}
}
function validate(){
if(!options[0].classList.contains("disabled")){
alert("Please Selecto one option")
}
else{
enableOptions();
randomQuestion();
}
}
function next(){
validate();
}
function randomQuestion(){
let randomNumber=Math.floor(Math.random()*questions.length);
let hitDuplicate=0;
if(index==questions.length){
quizOver();
}
else{
if(myArray.length>0){
for(let i=0; i<myArray.length; i++){
if(myArray[i]==randomNumber){
hitDuplicate=1;
break;
}
}
if(hitDuplicate==1){
randomQuestion();
}
else{
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
}
if(myArray.length==0){
questionIndex=randomNumber;
load();
myArr.push(questionIndex);
}
myArray.push(randomNumber);
}
}
function answerTrakcer(){
for(let i=0; i<questions.length; i++){
const div=document.createElement("div")
answerTrackerContainer.appendChild(div);
}
}
function updateAnswerTracker(classNam){
answerTrackerContainer.children[index-1].classList.add(classNam);
}
function quizOver(){
document.querySelector(".quiz-over").classList.add("show");
correctAnswerSpan.innerHTML=score;
totalQuestionSpan2.innerHTML=questions.length;
percentage.innerHTML=(score/questions.length)*100 + "%";
}
function tryAgain(){
window.location.reload();
}
window.onload=function(){
randomQuestion();
answerTrakcer();
}
</script>
</body>
</html>
