This is a simple quiz in HTML where the user is asked to translate "Straight Ahead" into Spanish. The correct answer is "Todo Recto". When the user clicks on one of the options, the script checks if the selected answer is correct and displays a message accordingly.
The HTML code includes the question and four answer options displayed as buttons. Each button has a data-answer attribute that holds the answer value. There is also a hidden paragraph element with an id of "result" where the quiz result will be displayed.
The JavaScript code selects all buttons and adds a click event listener to each one. When a button is clicked, the script compares the selected answer with the correct answer. If the answer is correct, the message "Correct!" is displayed in the result paragraph. If the answer is incorrect, the message "Incorrect!" is displayed. The result message is then set to display:block to show it to the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Simple Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish</h2>
<button id="option1" data-answer="Justo ale Frentas">
Justo ale Frentas
</button>
<button id="option2" data-answer="Todo Recto">Todo Recto</button>
<button id="option3" data-answer="Justo ala Frente">
Justo ala Frente
</button>
<button id="option4" data-answer="Justo al Frenta">Justo al Frenta</button>
<p id="result" style="display: none"></p>
<script>
const correctAnswer = "Todo Recto";
const buttons = document.querySelectorAll("button");
const resultMessage = document.getElementById("result");
buttons.forEach((button) => {
button.addEventListener("click", () => {
if (button.dataset.answer === correctAnswer) {
resultMessage.textContent = "Correct!";
} else {
resultMessage.textContent = "Incorrect!";
}
resultMessage.style.display = "block";
});
});
</script>
</body>
</html>
```
1 answer