is there something wrong
<!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>
</html>
Yes, there are a few issues in the code provided:
1. There is no opening `<body>` tag before the `<h1>` element.
2. The `<ul>` tag is not closed properly with `</ul>`.
3. The buttons within the `<ul>` should be wrapped in `<li></li>` tags instead of `<button></button>`.
4. There is no element with the id "question" in the HTML, so trying to set its text content will not work.
5. The options are not displayed in the correct order, as the code does not shuffle the options before displaying them.
6. The text content of the buttons is set to the same as the options array, but they are not displayed within a visible container.
To correct these issues, you may want to revise the structure and logic of your code.