This is some HTML code for a simple quiz:
At the bottom, there is a link to the output of the code.
<!DOCTYPE html>
<html>
<p id="Qone">Question 1: <br>What is 2 times 2? <br>
<input type="button" value="3" onclick="deleteQOne(), alert('Sorry, 3 is wrong. The answer is 4'), showAndUpdateScore()">
<input type="button" value="4" onclick="alert('Correct!'), increaseScore(), showAndUpdateScore(), deleteQOne()">
<input type="button" value="0" onclick="deleteQOne(), alert('Sorry, 0 is wrong. The answer is 4'), showAndUpdateScore()">
</p>
<p id="lines">
-----------------------------------------------------
</p>
<p id="Qtwo">Question 2: <br>What is 4 times 5? <br>
<input type="button" value="9" onclick="deleteQTwo(), alert('Sorry, 9 is wrong. The answer is 20'), showAndUpdateScore()">
<input type="button" value="-1" onclick="deleteQTwo(), alert('Sorry, -1 is wrong. The answer is 20.'), showAndUpdateScore()">
<input type="button" value="20" onclick="alert('Correct!'), increaseScore(), showAndUpdateScore(), deleteQTwo()">
</p>
<p id="lines2">
-----------------------------------------------------
</p>
<p id="Qthree">Question 3: <br>What is 4 to the power of 3? <br>
<input type="button" value="64" onclick="alert('Correct!'), increaseScore(), showAndUpdateScore(), deleteQThree()">
<input type="button" value="12" onclick="deleteQThree(), alert('Sorry, 12 is wrong. The answer is 64.'), showAndUpdateScore()">
<input type="button" value="16" onclick="deleteQThree(), alert('Sorry, 16 is wrong. The answer is 64'), showAndUpdateScore()">
</p>
<p id="lines3">
-----------------------------------------------------
</p>
<p id="Qfour">Question 4: <br>What is 0.587 plus 1.62? <br>
<input type="button" value="1.207" onclick="alert('Sorry, 1.207 is wrong. The answer is 2.207'), showAndUpdateScore(), deleteQFour()">
<input type="button" value="-1.033" onclick="deleteQFour(), alert('Sorry, -1.033 is wrong. The answer is 2.207'), showAndUpdateScore()">
<input type="button" value="2.107" onclick="deleteQFour(), alert('Sorry, 2.107 is wrong. The answer is 2.207'), showAndUpdateScore()">
<input type="button" value="2.207" onclick="alert('Correct!'), increaseScore(), showAndUpdateScore(), deleteQFour()">
</p>
<p id="lines4">
-----------------------------------------------------
</p>
<p id="Qfive">Question 5: <br>What is 425 times 3.4? <br>
<input type="button" value="1,455" onclick="alert('Sorry, 1,455 is wrong. The answer is 1,445.'), showAndUpdateScore(), deleteQFive()">
<input type="button" value="1,445" onclick="alert('Correct!'), increaseScore(), showAndUpdateScore(), deleteQFive()">
<input type="button" value="125" onclick="deleteQFive(), alert('Sorry, 125 is wrong. The answer is 1,445.'), showAndUpdateScore()">
<input type="button" value="1,225" onclick="deleteQFive(), alert('Sorry, 1,225 is wrong. The answer is 1,445.'), showAndUpdateScore()">
</p>
<p id="lines5">
-----------------------------------------------------
</p>
<p id="scoreparagraph">Score: <br>0/5</p>
<p id="Quiz">
<button onclick="submit()">Get Quiz Results</button>
</p>
<script>
var score = 0;
function increaseScore(){
score = score + 1;
}
function showAndUpdateScore(){
document.getElementById("scoreparagraph").innerHTML = "Score: <br>" + score + "/5";
}
function deleteQOne(){
document.getElementById("Qone").innerHTML = "Question 1 finished.<br><br><br>";
}
function deleteQTwo(){
document.getElementById("Qtwo").innerHTML = "Question 2 finished.<br><br><br>";
}
function deleteQThree(){
document.getElementById("Qthree").innerHTML = "Question 3 finished.<br><br><br>";
}
function deleteQFour(){
document.getElementById("Qfour").innerHTML = "Question 4 finished.<br><br><br>";
}
function deleteQFive(){
document.getElementById("Qfive").innerHTML = "Question 5 finished.<br><br><br>";
}
function submit(){
document.getElementById("Quiz").innerHTML = "<h1>Your final score is " + score + "/5" + " (" + score*20 + "%）";
document.getElementById("Qone").innerHTML = "";
document.getElementById("Qtwo").innerHTML = "";
document.getElementById("Qthree").innerHTML = "";
document.getElementById("Qfour").innerHTML = "";
document.getElementById("Qfive").innerHTML = "";
document.getElementById("scoreparagraph").innerHTML = "";
document.getElementById("lines").innerHTML = "";
document.getElementById("lines2").innerHTML = "";
document.getElementById("lines3").innerHTML = "";
document.getElementById("lines4").innerHTML = "";
document.getElementById("lines5").innerHTML = "";
}
</script>
</html>
It took all that code to make five math questions. That is awesome!
Thanks!