Ineed this code to be remade into a code that has 1 question and 3 selections and a orange background
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
</style>
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish. (Select Your Answer)</h1>
<ul id="options">
<label><button id="option1">Justos ale frentas</button></label>
<label><button id="option2">justo al frenta</button></label>
<label><button id="option3">Todo derecho</button></label>
</ul>
<p id="question"></p>
<script>
const questions = [
{
question: "What is the capital of France?",
options: ["Paris", "London", "Berlin"],
answer: "Paris",
},
{
question: "Who wrote Romeo and Juliet?",
options: ["William Shakespeare", "Jane Austen", "Charles Dickens"],
answer: "William Shakespeare",
},
{
question: "What is the tallest mountain in the world?",
options: ["Mount Everest", "K2", "Kangchenjunga"],
answer: "Mount Everest",
},
];
function checkAnswer():true
const randomQuestion =
questions[Math.floor(Math.random() * questions.length)];
document.getElementById("question").textContent = randomQuestion.question;
randomQuestion.options.forEach((option, index) => {
const button = document.getElementById(`option${index + 1}`);
button.textContent = option;
button.addEventListener("click", ("button") => {
if (option === randomQuestion.any) {
alert("Correct answer!");
} else {
alert("Wrong answer, Try again!");
}
});
});
</script>
</body>
</html>
```
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
</style>
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish. (Select Your Answer)</h1>
<ul id="options">
<label><button id="option1">Justos ale frentas</button></label>
<label><button id="option2">justo al frenta</button></label>
<label><button id="option3">Todo derecho</button></label>
</ul>
<p id="question"></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>
```