<div class="quizContainer container-fluid well well-lg">
<div class="text-center" id="quiz1"></div>
<div class="quiz-container">
<div class="question-number">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDM014k08JC1SYNavZaqk6do7fm3jQUjM140TYeqxtDV47QeTbpawoTYVN7FB-yP3iDzGqnz8BEIclD29Fq4Mrrnxq170xcspTlzqWhg11P6iHu1NhyanJyoOlbLjNy3KhY2FjANoKxRGLveM0sUZRkGnOgLuqo8sBbdgDEQHEggJ6m0f0dKTmjWCXjo/s1280/1000021576.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDM014k08JC1SYNavZaqk6do7fm3jQUjM140TYeqxtDV47QeTbpawoTYVN7FB-yP3iDzGqnz8BEIclD29Fq4Mrrnxq170xcspTlzqWhg11P6iHu1NhyanJyoOlbLjNy3KhY2FjANoKxRGLveM0sUZRkGnOgLuqo8sBbdgDEQHEggJ6m0f0dKTmjWCXjo/s320/1000021576.jpg" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><h3><br /></h3><h3>
Question <span class="question-num-value"></span> of
<span class="total-question"></span>
</h3>
</div>
<div class="question"></div>
<div class="options">
<div class="option1" id="1" onclick="check(this)"></div>
<div class="option2" id="2" onclick="check(this)"></div>
<div class="option3" id="3" onclick="check(this)"></div>
<div class="option4" id="4" onclick="check(this)"></div>
</div>
<a class="button" onclick="next()" style="padding-left: 10%; width: 30%;">Next</a>
<div class="answers-tracker"></div>
</div>
<div class="quiz-over">
<div class="box">
<h3>
Good Try!<br />
You Got <span class="correct-answers"></span> out of
<span class="total-question2"></span> answers correct! That's
<span class="percentage"></span>
</h3>
<button onclick="tryAgain()" type="button">TryAgain</button>
</div>
</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:'The speed of light is maximum in',
options:['Water','Glass','Air','Vacuum'],
answer:3
},
{
q:'The correct order of increasing bond angle is:',
options:['NH3<H2O<CH4','H2O<NH3<CH4','NH3<CH4<H2O','CH4<NH3<H2O'],
answer:2
},
{
q:'If sin𝜃+cos𝜃=2sinθ+cosθ=2, then the value of sin3𝜃+cos3𝜃sin3θ+cos3θ is:',
options:['1','√2/2','√2','0'],
answer:2
},
{
q:'How many dots appear on a pair of dice?',
options:['53','42','85','23'],
answer:2
},
{
q:'CAT” is coded as “DBU”, then “DOG” will be coded as:',
options:['EPH','EQH','EPI','DPJ'],
answer:1
},
{
q:'The number of moles of oxygen atoms in 1 mole of Al2(SO4)3 is:',
options:['12','7','6','3'],
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>