How to make a quiz with multiple types in it

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار

HOW TO MAKE A QUIZ WITH MULTIPLE TYPES IN IT USING HTML, JAVASCRIPT, AND CSS

This code will be a multiple-choice, fill in the blank, and true or false, all in one quiz.

The quiz has 5 questions. Two multiple choice questions, two fill in the blank questions, and one true or false question.

Code:
_______________________________________________________________
<html>
<body>

<style>
#frame001 {
background-color: white;
border: 2px solid black;
text-align: center;
}

#font001 {
font-color: black;
font-size: large;
}

</style>

<div id="frame001">
<h2>Quiz</h2>
<div id="font001">
Question: <text id="number01">0</text> / 5
Score: <text id="number02">0</text> / 5<br /><hr />

<p id="hide01">
<button onclick="begin001()">Begin</button>
</p>

<p id="message001"></p>
<p id="message002"></p>
<p id="message003"></p>
<p id="nextPage"></p>
</div>
</div>

<script>
var question01 = ["What is 1 + 1?"];
var question02 = ["2 + 3 = <input type=text id=box01 size=3>"];
var question03 = ["3 + 3 = 5."];
var question04 = ["What is 4 + 4?"];
var question05 = ["10 + 3 = <input type=text id=box02 size=3>"];

var options01 = ["<br /><br /><button onclick=answer01()>2</button><br /><br /><button onclick=answer02()>3</button><br /><br /><button onclick=answer02()>4</button>"];
var options02 = ["<button onclick=submit01()>Submit</button>"];
var options03 = ["<br /><br /><button onclick=true01()>False</button><br /><br /><button onclick=false01()>True</button>"];
var options04 = ["<br /><br /><button onclick=choice02()>5</button><br /><br /><button onclick=choice01()>8</button><br /><br /><button onclick=choice2()>12</button>"];
var options05 = ["<button onclick=submit02()>Submit</button>"];

var a;
var b;

var q = 0;
q++;
var s = 0;
s++;

function begin001() {
number01.innerHTML = q++;
hide01.innerHTML = "";
message001.innerHTML = question01;
message002.innerHTML = options01;
}

function answer01() {
number02.innerHTML = s++;
message002.innerHTML = "";
message003.innerHTML = "Correct";
nextPage.innerHTML = "<button onclick=next002()>Next</button>";
}

function answer02() {
message002.innerHTML = "";
message003.innerHTML = "Incorrect";
nextPage.innerHTML = "<button onclick=next002()>Next</button>";
}

function next002() {
number01.innerHTML = q++;
nextPage.innerHTML = "";
message003.innerHTML = "";
message001.innerHTML = question02;
message002.innerHTML = options02;
}

function submit01() {
var a = box01.value;
if (a == 5) {
number02.innerHTML = s++;
message002.innerHTML = "";
message003.innerHTML = "Correct";
nextPage.innerHTML = "<button onclick=next003()>Next</button>";
}

else {
message002.innerHTML = "";
message003.innerHTML = "Incorrect";
nextPage.innerHTML = "<button onclick=next003()>Next</button>";
}
}

function next003() {
number01.innerHTML = q++;
nextPage.innerHTML = "";
message003.innerHTML = "";
message001.innerHTML = question03;
message002.innerHTML = options03;
}

function true01() {
number02.innerHTML = s++;
message002.innerHTML = "";
message003.innerHTML = "Correct";
nextPage.innerHTML = "<button onclick=next004()>Next</button>";
}

function false01() {
message002.innerHTML = "";
message003.innerHTML = "Incorrect";
nextPage.innerHTML = "<button onclick=next004()>Next</button>";
}

function next004() {
number01.innerHTML = q++;
nextPage.innerHTML = "";
message003.innerHTML = "";
message001.innerHTML = question04;
message002.innerHTML = options04;
}

function choice01() {
number02.innerHTML = s++;
message002.innerHTML = "";
message003.innerHTML = "Correct";
nextPage.innerHTML = "<button onclick=next005()>Next</button>";
}

function choice02() {
message002.innerHTML = "";
message003.innerHTML = "Incorrect";
nextPage.innerHTML = "<button onclick=next005()>Next</button>";
}

function next005() {
number01.innerHTML = q++;
nextPage.innerHTML = "";
message003.innerHTML = "";
message001.innerHTML = question05;
message002.innerHTML = options05;
}

function submit02() {
var b = box02.value;
if (b == 13) {
number02.innerHTML = s++;
message002.innerHTML = "";
message003.innerHTML = "Correct";
nextPage.innerHTML = "<button onclick=end001()>End of Quiz</button>";
}

else {
message002.innerHTML = "";
message003.innerHTML = "Incorrect";
nextPage.innerHTML = "<button onclick=end001()>End of Quiz</button>";
}
}

function end001() {
q - 1
nextPage.innerHTML = "";
message003.innerHTML = "";
message001.innerHTML = "End of Quiz. Thanks for taking this quiz.";
message002.innerHTML = "";
}
</script>
</body>
</html>

Here is a video of the above code.

OTHER RELATED PAGES:

Other Topics:

Crosswords- General Area
Human Body Facts
Binary Digits