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.
