Message and score not displaying

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!";
}

Hey there,

nice to meet you! :slightly_smiling_face:

I’ve edited your post for readability. When you enter a code block into a post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

See this post to find the backtick on your keyboard. Backticks (`) are not single quotes (’).

If you want to show us your whole project, please use a service like codepen or repl.it.

1 Like