I’m creating a small MCQ and at the end I want it to display a message and the score the user got. this was working fine until I made it so each question would be displayed individually instead of them all at once but now the message and score won’t display at the end. can anyone help?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>provinces quiz</title>
<link href = "style.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src = "main.js"></script>
</head>
<body>
<div id ="main_quiz">
<h1>Provinces Quiz</h1>
<div id="start">
<input type ="button" value="Start Quiz!" onClick="question1();">
</div>
<div id ="q1" >
<p>In what province is County Kery?</p>
<input id = "textbox" type = "text" name = "question1"><br>
<input type = "button" id = "next1" value = "Next Question!" onClick="question2()">
</div>
<div id ="q2">
<p>What Leinster county is the capital of Ireland?</p>
<input type ="radio" id = "mc" name = "question2" value = "Dublin">Dublin<br>
<input type ="radio" id = "mc" name = "question2" value = "Kildare">Kildare<br>
<input type = "button" id = "next2" value = "Next Question!" onClick="question3()">
</div>
<div id ="q3">
<p>What county would you find The Blarney Stone?</p>
<input type ="radio" id = "mc" name = "question3" value = "Galway">Galway<br>
<input type ="radio" id = "mc" name = "question3" value = "Cork">Cork<br>
<input type = "button" id = "finbutton" value = "Finish!" onClick="check();">
</div>
<div id = "after_submit">
<p id = "message"></p>
<p id = "number_correct"></p>
<input type = "reset" id = "restbutton" value = "Restart!" onClick="restart();">
</div>
</div>
</body>
</html>
/* CSS Document */
body{
font-family: 'Montserrat', sans-serif;
}
#start {
display: block;
}
#q1 {
display: none;
}
#q2 {
display: none;
}
#q3 {
display: none;
}
#after_submit {
visibility: hidden;
}
// JavaScript Document
function restart(){
document.getElementById("start").style.display = "block";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("after_submit").style.visibility = "hidden";
}
function question1(){
document.getElementById("start").style.display = "none";
document.getElementById("q1").style.display = "block";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("after_submit").style.visibility = "hidden";
}
function question2(){
document.getElementById("start").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "block";
document.getElementById("q3").style.display = "none";
document.getElementById("after_submit").style.visibility = "hidden";
}
function question3(){
document.getElementById("start").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "block";
document.getElementById("after_submit").style.visibility = "hidden";
}
function check(){
document.getElementById("start").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("after_submit").style.visibility = "visible";
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "munster") {
correct++;
}
if (question2 == "Dublin") {
correct++;
}
if (question3 == "Cork") {
correct++;
}
var messages = ["Well Done!", "Not Bad!", "Not good, better luck next time!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range =1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("message").innerHTML = messages[range];
document.getElementById("number_correct").innerHTML = "You got " + correct + " correct!";
}