How to make a simple quiz using html, javascript, and css

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

HOW TO MAKE A SIMPLE QUIZ USING HTML, JAVASCRIPT, AND CSS

For those who are beginning to learn the computer language, this might seem hard for them in the beginning, but once you learn the basics of the three languages you will understand what is going on.

This code will show you how to make a simple quiz with 2
questions, 3 options. Once the quiz is over it will show you a message saying "End of Quiz". I put all three languages in one file instead of separating them. You can still do it by having each language separately and put them all in one folder. I made some changes to the code since I added the score, question number and the attempts feature on my last lesson. So the code will look somewhat different than the one on the video below. But you can go to my channel and see the 4th and last lesson for this quiz for the code that matches the one below.

Code:
__________________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Quiz</title>
</head>
<body>
<style>
#table_1 {
background-color: blue;
border: 4px solid black;
width: 420px;
height: 360px;
color: white;
text-align: center;
}

#center001 {
text-align: center;
}

</style>

<div id="table_1">

<h2>Quiz</h2>
<hr>
<div id="center001">Question: <text id="q001">0</text> Score: <text id="score001">0</text> Attempt: <text id="attempts">2</text></div>
<p id="question01"></p>
<p id="msg01"></p>
<br />
<br />
<div id="starter01">
<button onclick="begin001()" id="b001">Begin</button><br />
</div>
<p id="n001"></p>

<script>
var b = 0;
b++;
var c = 2;
c--;
var d = 0;
d++;

function begin001() {
document.getElementById("q001").innerHTML = d++;
document.getElementById("question01").innerHTML = "What is 5 + 5?" + "<br /><br /><br />" + "<button onclick=ans001() id=q1>10</button><br />" + "<button onclick=ans002() id=q2>8</button><br />" + "<button onclick=ans002() id=q3>25</button><br />";
document.getElementById("starter01").innerHTML = "";
}
function ans001() {
document.getElementById("score001").innerHTML = b++;
document.getElementById("question01").innerHTML = "Correct";
document.getElementById("starter01").innerHTML = "";
document.getElementById("n001").innerHTML = "<button onclick=nxt1()>Next</button><br />";
}
function ans002() {
document.getElementById("question01").innerHTML = "Incorrect";
document.getElementById("starter01").innerHTML = "";
document.getElementById("n001").innerHTML = "<button onclick=nxt1()>Next</button><br />";
document.getElementById("attempts").innerHTML = c--;
if (c < 0) {
document.getElementById("question01").innerHTML = "";
document.getElementById("msg01").innerHTML = "Sorry. You lost!";
document.getElementById("n001").innerHTML = "";
}
}
function nxt1() {
document.getElementById("question01").innerHTML = "What is 2 x 8?" + "<br /><br /><br />" + "<button onclick=ans004() id=q4>14</button><br />" + "<button onclick=ans004() id=q5>20</button><br />" + "<button onclick=ans003() id=q6>16</button><br />";
document.getElementById("n001").innerHTML = "";
document.getElementById("q001").innerHTML = d++;

}
function ans003() {
document.getElementById("score001").innerHTML = b++;
document.getElementById("question01").innerHTML = "Correct";
document.getElementById("starter01").innerHTML = "";
document.getElementById("n001").innerHTML = "<button onclick=nxt2()>Next</button><br />";
}
function ans004() {
document.getElementById("question01").innerHTML = "Incorrect";
document.getElementById("starter01").innerHTML = "";
document.getElementById("n001").innerHTML = "<button onclick=nxt2()>Next</button><br />";
document.getElementById("attempts").innerHTML = c--;
if (c < 0) {
document.getElementById("question01").innerHTML = "";
document.getElementById("msg01").innerHTML = "Sorry. You lost!";
document.getElementById("n001").innerHTML = "";
}
}
function nxt2() {
document.getElementById("question01").innerHTML = "";
document.getElementById("msg01").innerHTML = "End of Quiz.";
document.getElementById("n001").innerHTML = "";
}
</script>
</div>
</body>
</html>

Here is a video of the above code. It is four parts, you will find the other parts on my channel or from the suggested videos.

OTHER RELATED PAGES:

Other Topics:

Islamic Holidays
World Countries
Wars Facts