Fix my code to say incorrect when i press "justos ale frentas or justo al frenta" and correct when i press todo derecho
<!DOCTYPE html>
<html>
<head>
</style>
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish.</h1>
<ul id="options">
<button id="option1">Justos ale frentas</button>
<button id="option2">justo al frenta</button>
<button id="option3">Todo derecho</button>
<p id="result" style="display: none"></p>
<script>
const question = {
question: "How do you say 'Straight Ahead' in Spanish?",
options: ["Justos ale frentas", "justo al frenta", "Todo derecho"],
answer: "Todo derecho",
};
document.getElementById("question").textContent = question.question;
const button1 = document.getElementById("option1");
const button2 = document.getElementById("option2");
const button3 = document.getElementById("option3");
button1.textContent = question.options[0];
button2.textContent = question.options[1];
button3.textContent = question.options[2];
button1.addEventListener("click", () => {
if (question.options[0] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!");
}
});
button2.addEventListener("click", () => {
if (question.options[1] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!");
}
});
button3.addEventListener("click", () => {
if (question.options[2] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!")
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</style>
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish.</h1>
<ul id="options">
<button id="option1">Justos ale frentas</button>
<button id="option2">justo al frenta</button>
<button id="option3">Todo derecho</button>
<p id="result" style="display: none"></p>
<script>
const question = {
question: "How do you say 'Straight Ahead' in Spanish?",
options: ["Justos ale frentas", "Justo al frenta", "Todo derecho"],
answer: "Todo derecho",
};
// Change "question" to "question.question" to fix the error
document.getElementById("question").textContent = question.question;
const button1 = document.getElementById("option1");
const button2 = document.getElementById("option2");
const button3 = document.getElementById("option3");
button1.textContent = question.options[0];
button2.textContent = question.options[1];
button3.textContent = question.options[2];
button1.addEventListener("click", () => {
// Change question.options[0] to question.options[2] in the comparison
if (question.options[0] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!");
}
});
button2.addEventListener("click", () => {
// Change question.options[1] to question.options[2] in the comparison
if (question.options[1] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!");
}
});
button3.addEventListener("click", () => {
if (question.options[2] === question.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!")
}
});
</script>
</body>
</html>