quiz html javascript coding


<html>

<head>

<title>myquiz.com</title>

  <style>#question{font-size:30px;color:red;}button{width:120px;font-size:15px;color:black;font-weight:bold;}#progress{font-size:20px; color:black;}</style>

</head>


<body>


<div id="Quiz">

<h1>quiz</h1>

<p id="question"></p>

<div class="button">

<button id="bt0"><span id="choice0"></span></button>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;

<button id="bt1"><span id="choice1"></span></button><br /><br />

<button id="bt2"><span id="choice2"></span></button>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;

<button id="bt3"><span id="choice3"></span></button>

</div>

<footer>

<p id="progress">Question x of y</p>

</footer></div>

<script>

//quiz script

function Quiz(questions){

this.score=0;

this.question=question;

this.questionIndex=0;

}

Quiz.prototype.getquestionIndex=function(){

return this.question[this.questionIndex];

}

Quiz.prototype.guess=function(answer){

if(this.getquestionIndex().iscorrectAnswer(answer)){

this.score++;

}

this.questionIndex++;

}

Quiz.prototype.isEnded=function(){

return this.questionIndex ===

this.question.length;

}

//quiz script

//question.js

function question(text,choices,answer){

this.text=text;

this.choices=choices;

this.answer=answer;

}

question.prototype.iscorrectAnswer=function(choice){

return this.answer === choice;

}

// question.js

function populate(){

if(quiz.isEnded()){

showScores();

}

else{

var element=document.getElementById("question");

element.innerHTML=quiz.getquestionIndex().text;

var choices=quiz.getquestionIndex().choices;

for(var i = 0; i < choices.length; i++){

var element = document.getElementById("choice" + i);

element.innerHTML=choices[i];

guess("bt" + i, choices[i]);

}

showProgress();

}

};

function guess(id, guess){

var button=document.getElementById(id);

button.onclick = function(){

quiz.guess(guess);

populate();

}

}


function showProgress(){

var currentquestionNumber=quiz.questionIndex + 1;

var element = document.getElementById("progress");

element.innerHTML="question" + currentquestionNumber+"of"+quiz.question.length;



}

function showScores(){

var moh=100/quiz.question.length;

var j=quiz.question.length;

var jk=quiz.score;

var jkk=quiz.question.length-jk;


var kumar=moh*quiz.score;

var n = kumar.toFixed(2);

var numFinal = parseFloat(n);

var nk=element;

var gameoverHTML="<h1>Result</h1>";

gameoverHTML +="<h2 id='score'>Your score: "+numFinal+"%<br>number of question:"+j+"<br>number of right answer:"+jk+"<br>number of wrong answer:"+jkk+"<br>"+nk+"</h2>";

var element =document.getElementById("Quiz");

element.innerHTML=gameoverHTML;

}


//create questions

var question=[

     // Abcdefghijklmnopqrstuvwxyz

new question(" G से पहले",["F","I","H","J"],"F"),

new question("C के बाद",["G","D","B","A"],"D"),

new question("P से पहले",["Q","O","T","M"],"O"),

new question(" V के बाद",["Z","A","U","W"],"W"),

new question("X से पहले",["A","T","W","Y"],"W"),

new question("L के बाद",["N","M","K","J"],"M"),

new question("Q से पहले",["S","R","P","O"],"P"),

new question("F के बाद",["G","K","E","D"],"F"),

      new question("F के पहले",["G","K","E","D"],"E"),

      new question("M के पहले",["N","K","L","D"],"L"),

      new question("L के पहले",["K","M","N","J"],"K"),

      new question("I के बाद",["P","M","J","G"],"J"),

      new question("Z के पहले",["A","Y","X","T"],"Y"),

      new question("I के पहले",["H","G","J","M"],"H"),

      new question("R के बाद",["Q","T","S","U"],"S"),

      new question("S के बाद",["W","U","T","R"],"T"),

      

      

new question("6 x 8",["54","42","48","38"],"48"),

      new question("5 x 9",["40","45","35","55"],"45"),

      new question("3 x 7",["21","18","27","12"],"21"),

      new question("4 x 9",["32","63","28","36"],"36"),

      new question("2 x 8",["16","12","14","18"],"16"),

new question("2 x 9",["16","12","14","18"],"18"),

new question("2 x 5",["16","12","14","10"],"10"),

new question("2 x 6",["16","12","14","18"],"12"),

      new question("2 x 7",["16","12","14","18"],"14"),

new question("3 x 6",["16","12","14","18"],"18"),

new question("5 x 6",["16","30","14","18"],"30"),

new question("6 x 6",["16","12","14","36"],"36"),

      new question("6 x 9",["54","12","14","18"],"54"),




];

var quiz = new Quiz(question);

populate();

</script>

</body>

</html>


output




myquiz.com myquiz.com

quiz

G से पहले

         

         

question1of29