HTML Quiz
HTML QUIZ
Question of
Good Try!
You Got out of answers correct!
That’s
TryAgain
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;
const questions=[
{
q:’Select the correct option…?’,
options:[‘id attribute must be unique’,’none of these’,’ol is used for line item’,’.htm is not correct extension’],
answer:1
},
{
q:’which tag is used to play sound’,
options:[‘sound’,’audio’,’video ‘,’ bgsound’],
answer:2
},
{
q:’html document are saved in..?’,
options:[‘ascii code’,’ machine language code’,’none of the above’,’special bimary format’],
answer:3
},
{
q:’Which attribute triggers an abort action’,
options:[‘onabort’,’abort’,’offline’,’onbeforeonload’],
answer:2
},
{
q:’which is not valid align attribute’,
options:[‘right’,’left’,’none of these’,’top’],
answer:4
},
{
q:’Which of the following is an attribute related to font tag…’,
options:[‘face’,’weight’,’style’,’all the above’],
answer:4
},
{
q:’Which of the following is not a style tag…’,
options:[‘<b>’,'<i>’,'<tt>’,’all the above’],
answer:4
},
{
q:’Which of the character tells the browser to stop tagging…’,
options:[‘/’,’?’,’%’,’>’],
answer:1
},
{
q:’Which of the following is represent the generic document…’,
options:[‘section’,’article’,’aside’,’header’],
answer:1
},
{
q:’Which of the following is represent the smallest size heading…’,
options:[‘<h3>’,'<h6>’,'<h1>’,'<head>’],
answer:2
},
{
q:’choose the correct extension of html…’,
options:[‘.htm’,’.html’,’both A and B’,’none of these’],
answer:3
},
{
q:’how to display & sign in html…’,
options:[‘*amp’,’&’,’&’,’all are wrong’],
answer:3
},
{
q:’script tag placed in…’,
options:[‘head’,’body’,’both A and B’,’header’],
answer:3
},
{
q:’Which tag is used to make the text italic…’,
options:[‘<i>’,'<italic>’,'<ii>’,’all the above’],
answer:1
},
{
q:’Which tag is used to navigation link…’,
options:[‘<header>’,'<navigation>’,'<link>’,'<nav>’],
answer:4
},
{
q:’most prefer place to add link…’,
options:[‘Body’,’Head’,’header’,’all the above’],
answer:2
},
{
q:’which element is used to play video in webpage…’,
options:[‘img’,’movie’,’video’,’media’],
answer:3
},
{
q:’Which tag create a header cell…’,
options:[‘th’,’td’,’tr’,’none of these’],
answer:1
}
]
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; i0){
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();
}
Think 