Development of a quiz web application : conclusion

[chimaobi]

User interface

Indicating the right answer

indicating both right and wrong answer

Good evening from here to all my fellow developers , so today i finally completed the project (quiz web application ) i was telling you guys about.

Well , it was not an easy journey as i had so many distractions but i kept on going . In my last post , i remember solving the previous problem which was designing the application in such a way that when you click the right answer , it indicates with a green color, when you click the wrong answer , it also indicate with an orange color and also the right one will indicate with the green color too.

Well , after figuring the solution to the problem , i also encountered another problem , this time was i wanted the website to work in such a way that when you click either the wrong or right button the button becomes disabled.

well i finally figured it out.

the code below is a function that shows the score after the quiz is completed.
It resets the quiz , adds "quiz completed " and score to the page.

function showScore() {
resetState();
questionNumber.innerHTML = quiz completed;
questionContent.innerHTML = you scored ${score} out of ${question.length} questions;
nxtBtn.innerHTML = "restart qiuz";
nxtBtn.style.display = "block";
}

The code below is a function that tells the "Next Button " what to do when it is being clicked , if the question is not yet finished , it displays the next question , if the question is finished then it displays the user's score.

function nxtBtnHandler() {
currentQuestionIndex = currentQuestionIndex + 1;
if (currentQuestionIndex < question.length) {
showQuestion();
} else {
showScore();
}
}

This is the event handler attached to the next button

nxtBtn.addEventListener("click", function () {
if (currentQuestionIndex < question.length) {
nxtBtnHandler();
} else {
startQuiz();
}
});

I thank you all for being part of these amazing journey , i will start my next project as soon as possible.