How can I display the next and restart buttons at the bottom of each question in my JavaScript quiz web app? Why is the user unable to choose the wrong answer from the provided options?
I'm facing difficulty showing the next and restart buttons for individual questions in the quiz. Additionally, the current functionality of my app prevents users from selecting an incorrect answer, even after modifying the selectAnswer function to:
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
}
const startButton = document.getElementById("start-btn")
const nextButton = document.getElementById("next-btn")
const questionContainerElement = document.getElementById("question-container")
const questionElement = document.getElementById("question")
const answerButtonsElement = document.getElementById("answer-buttons")
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener("click", startGame)
...
...
*, *::before, *::after {
...
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Countries Quiz Web App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid"></div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start Quiz</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</body>
</html>