it says in this code <!DOCTYPE html>
<html>
<head>
<title>Guess What</title>
</head>
<body>
<div id="page1">
<h1>Welcome to Guess What!</h1>
<p>
In this game, you will be presented with a question and three options to
choose from. Your goal is to select the correct answer and see how many
you can get right.
</p>
<button onclick="startGame()">Start Game</button>
</div>
<div id="page2" style="display: none">
<h2>Question: What is the capital of France?</h2>
<input type="radio" id="optionA" name="answer" value="Madrid"/> A) Madrid<br/>
<input type="radio" id="optionB" name="answer" value="Berlin"/> B) Berlin<br/>
<input type="radio" id="optionC" name="answer" value="Paris"/> C) Paris<br/>
<button onclick="submitAnswer()">Submit</button>
<button onclick="endGame()">End Game</button>
</div>
<script>
let correctAnswer = "Paris";
function startGame() {
document.getElementById("page1").style.display = "none";
document.getElementById("page2").style.display = "block";
}
function submitAnswer() {
let selectedRadio = document.querySelector('input[name="answer"]:checked');
if (selectedRadio) {
let selectedAnswer = selectedRadio.value;
if (selectedAnswer === correctAnswer) {
alert("Correct! The capital of France is Paris.");
} else {
alert("Incorrect. The correct answer is Paris.");
}
endGame();
} else {
alert("Please select an answer before submitting.");
}
}
function endGame() {
document.getElementById("page1").style.display = "block";
document.getElementById("page2").style.display = "none";
}
</script>
</body>
</html>
that "start game i not defined"
The error message "start game is not defined" is likely occurring because the function startGame() is being called in the button onclick event before it is actually defined in the JavaScript code.
To fix this issue, you can move the script tag containing the JavaScript code to the bottom of the HTML file, just before the closing </body> tag. This way, the function will be defined before it is called in the button onclick event.
Here is an updated version of the code with the script tag moved to the bottom:
```html
<!DOCTYPE html>
<html>
<head>
<title>Guess What</title>
</head>
<body>
<div id="page1">
<h1>Welcome to Guess What!</h1>
<p>
In this game, you will be presented with a question and three options to
choose from. Your goal is to select the correct answer and see how many
you can get right.
</p>
<button onclick="startGame()">Start Game</button>
</div>
<div id="page2" style="display: none">
<h2>Question: What is the capital of France?</h2>
<input type="radio" id="optionA" name="answer" value="Madrid"/> A) Madrid<br/>
<input type="radio" id="optionB" name="answer" value="Berlin"/> B) Berlin<br/>
<input type="radio" id="optionC" name="answer" value="Paris"/> C) Paris<br/>
<button onclick="submitAnswer()">Submit</button>
<button onclick="endGame()">End Game</button>
</div>
<script>
let correctAnswer = "Paris";
function startGame() {
document.getElementById("page1").style.display = "none";
document.getElementById("page2").style.display = "block";
}
function submitAnswer() {
let selectedRadio = document.querySelector('input[name="answer"]:checked');
if (selectedRadio) {
let selectedAnswer = selectedRadio.value;
if (selectedAnswer === correctAnswer) {
alert("Correct! The capital of France is Paris.");
} else {
alert("Incorrect. The correct answer is Paris.");
}
endGame();
} else {
alert("Please select an answer before submitting.");
}
}
function endGame() {
document.getElementById("page1").style.display = "block";
document.getElementById("page2").style.display = "none";
}
</script>
</body>
</html>
```
By moving the script tag to the bottom of the HTML file, you ensure that the functions are defined before they are called, resolving the "start game is not defined" error.