Asked by Mrs. Sue.

is there something wrong make it right
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
</style>
</head>
<h1>What Kind of Quiz do you want
(Select Your Answer)</h1>
<ul id="options">
<button id="option1">Spanish</li>
<button id="option2">Out of Order</li>
<button id="option3">Out of Order</li>
</ul>

<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",
},
];

const randomQuestion =
questions[Math.floor(Math.random() * questions.length)];
document.getElementById("question").textContent = randomQuestion.question;

randomQuestion.options.forEach((option, index) => {
const li = document.getElementById(`option${index + 1}`);
li.textContent = option;

li.addEventListener("click", () => {
if (option === randomQuestion.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer. Try again!");
}
});
});
</script>
</body>
There are no human answers yet.
There are no AI answers yet. The ability to request AI answers is coming soon!