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 a few issues in your code that need to be fixed.
1. You are missing the opening <body> tag in your HTML code. Add <body> tag before the <h1> tag.
2. In the <ul> tag, the closing </li> tags for the buttons should be </button> tags instead.
3. You need to create an element with id "question" in your HTML to display the random question.
Here is the corrected code:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
</style>
</head>
<body>
<h1>What Kind of Quiz do you want (Select Your Answer)</h1>
<ul id="options">
<button id="option1"></button>
<button id="option2"></button>
<button id="option3"></button>
</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",
},
];
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", () => {
if (option === randomQuestion.answer) {
alert("Correct answer!");
} else {
alert("Wrong answer. Try again!");
}
});
});
</script>
</body>
</html>
```
With these corrections, your code should work correctly.