Make a JavaScript code that says on the h1 This is a Simple Quizz and make it have a next button and it goes to the question 1 saying How do you say Straight ahead in Spanish and put selections and when you choose the right one make it say "Correct"

Question

Make a JavaScript code that says on the h1 This is a Simple Quizz and make it have a next button and it goes to the question 1 saying How do you say Straight ahead in Spanish and put selections and when you choose the right one make it say "Correct"

and when you choose the other 2 it says "Incorrect"

Answer 1

<!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"></label><br>
<input type="radio" id="option2" name="answer" value="b">
<label for="option2"></label><br>
<input type="radio" id="option3" name="answer" value="c">
<label for="option3"></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>