it still says nextQuestions is not define and checkAnswer is not defines ```html
<!DOCTYPE html>
<html>
<head>
<title>Simple Quiz</title>
</head>
<body>
<h1 id="quiz-title">This is a Simple Quiz</h1>
<button id="next-btn" onclick="nextQuestion()">Next</button>
<div id="question-container">
<p id="question"></p>
<input type="radio" id="option1" name="answer" value="a" />
<label for="option1">A la derecha</label><br />
<input type="radio" id="option2" name="answer" value="b" />
<label for="option2">A la izquierda</label><br />
<input type="radio" id="option3" name="answer" value="c" />
<label for="option3">Derecho</label><br />
<button id="check-answer-btn" onclick="checkAnswer()">Check Answer</button>
</div>
<script>
const questions = [
{
question: 'How do you say "Straight ahead" in Spanish?',
options: ["A la izquierda", "Derecho", "A la derecha"],
correctAnswer: "b"
},
];
let currentQuestionIndex = 0;
const questionElement = document.getElementById("question");
const option1Element = document.getElementById("option1");
const option2Element = document.getElementById("option2");
const option3Element = document.getElementById("option3");
function showQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
option1Element.nextSibling.textContent = currentQuestion.options[0];
option2Element.nextSibling.textContent = currentQuestion.options[1];
option3Element.nextSibling.textContent = currentQuestion.options[2];
}
function checkAnswer() {
const selectedAnswer = document.querySelector(
'input[name="answer"]:checked'
).value;
if (selectedAnswer === questions[currentQuestionIndex].correctAnswer) {
alert("Correct!");
} else {
alert("Incorrect!");
}
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
alert("End of Quiz");
}
}
showQuestion();
</script>
</body>
</html>
```
There are a couple of issues in your code. The first issue is that the `nextQuestion()` function is being called before it is defined in the script. To fix this, you can move the `showQuestion()` function call to the end of the script after all the functions are defined.
The second issue is that the event handler for the "Check Answer" button is calling the `checkAnswer()` function before it is defined in the script. To fix this, you can move the event handler to the button element after all the functions are defined.
Here is the updated code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Simple Quiz</title>
</head>
<body>
<h1 id="quiz-title">This is a Simple Quiz</h1>
<button id="next-btn" onclick="nextQuestion()">Next</button>
<div id="question-container">
<p id="question"></p>
<input type="radio" id="option1" name="answer" value="a" />
<label for="option1">A la derecha</label><br />
<input type="radio" id="option2" name="answer" value="b" />
<label for="option2">A la izquierda</label><br />
<input type="radio" id="option3" name="answer" value="c" />
<label for="option3">Derecho</label><br />
<button id="check-answer-btn" onclick="checkAnswer()">Check Answer</button>
</div>
<script>
const questions = [
{
question: 'How do you say "Straight ahead" in Spanish?',
options: ["A la izquierda", "Derecho", "A la derecha"],
correctAnswer: "b"
},
];
let currentQuestionIndex = 0;
const questionElement = document.getElementById("question");
const option1Element = document.getElementById("option1");
const option2Element = document.getElementById("option2");
const option3Element = document.getElementById("option3");
function showQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
option1Element.nextSibling.textContent = currentQuestion.options[0];
option2Element.nextSibling.textContent = currentQuestion.options[1];
option3Element.nextSibling.textContent = currentQuestion.options[2];
}
function checkAnswer() {
const selectedAnswer = document.querySelector(
'input[name="answer"]:checked'
).value;
if (selectedAnswer === questions[currentQuestionIndex].correctAnswer) {
alert("Correct!");
} else {
alert("Incorrect!");
}
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
alert("End of Quiz");
}
}
</script>
<script>
showQuestion();
document.getElementById("check-answer-btn").addEventListener("click", checkAnswer);
</script>
</body>
</html>
```