There may be a more efficient way to achieve your goal (some rewriting may be required later on), but here is one solution.
- Assign a
hide class to your next button to make it invisible once the quiz loads.
- In your
style.css, add !important to your .hide {...}. This will be explained later.
- Add the following line to your
setNextQuestion() function declaration:
message.classList.add('hide');
This step is necessary to hide the message ("Well done!" / "Wrong!") when new questions are loaded. The inline display:flex in your #message has higher specificity than what .hide sets for display, hence the need for !important. This method provides a basic solution and may not be the most ideal.
- In your
showQuestion(question) function declaration, replace this
answers.innerHTML += `<button class="btn">${answer}</button>`
with this
answers.innerHTML += `<button class="answer-btn btn">${answer}</button>
- In the same function, change this
const answerBtns = document.getElementsByClassName('btn')
to this
const answerBtns = document.getElementsByClassName('answer-btn')
The reason for this change is that the .btn class is used elsewhere (start, next), and you likely only want to target the buttons related to the answers.
- After the previous code line, add this
answers.classList.remove('hide');
This line is crucial due to the adjustments made in step 2. Without it, the questions would not appear as intended.
- Also in the same function, modify the click event attachment to individual
answerBtns with the following changes (the ones marked with // new should be added):
Array.from(answerBtns).forEach(btn => {
btn.addEventListener('click', () => {
message.classList.remove('hide'); // new
answers.classList.add('hide'); // new
if (btn.textContent === questions[questionNr].correct) {
message.style.display = 'flex'
correct.style.display = 'flex'
wrong.style.display = 'none'; // new
const stats = document.getElementById('stats')
stats.innerHTML = `${questionNr + 1}/${questions.length}`
} else {
message.style.display = 'flex'
wrong.style.display = 'flex'
correct.style.display = 'none'; // new
stats.innerHTML = `${questionNr + 1}/${questions.length}`
}
nextButton.classList.remove('hide')
// answers.style.display = "none"
});
})
The additional lines serve to ensure that regardless of the answer correctness, questions are hidden, and the answer holder (message) is displayed. Depending on the outcome, the relevant message (correct/incorrect) is shown while hiding the opposite message.
Additional points to consider:
- While the above steps fulfill the initial intention (hiding answers initially, displaying them upon clicking next, and hiding the button), it does not address showing the final result/score at the end of the quiz.
- After the last question is answered, clicking the
next button will trigger a console error as there are no more questions within your const questions. To resolve this issue, introduce a simple check after initializing the showQuestion(question) function, like so:
function showQuestion(question) {
if(typeof question.question === 'undefined') {
return false; // Consider including additional actions such as alerting the user or displaying the score.
}
// ... continue with the rest of your original code
}