Good evening guys , welcome to my blog. I have been away for a while to handle some stuffs that required my attention but am fully back anyway.
Towards the end of my last post , i talked about the challenges i faced which included the following :
My challenges.
My challenges now is that I am trying to make the software behave in such a way that when
you click the wrong answer, the right answer while indicate by showing a green color while the wrong answer shows a red background too.
i also implored on some of us for help but nobocy came so i had to figure it out myself.
so i was finally able to make the website work as intended.
well thanks to the power of javaScript.
- restarting the quiz :
the code below helps to restart the quiz
function resetState() {
nxtBtn.style.display = "none"; // hides the next button
while (answer.firstChild) {
answer.removeChild(answer.firstChild);
}// the code uses a while love to check if the div element in the html code has a firstchild , if yes , it deletes them.
}
- selecting answer :
the code below selects the answer and the function is being called when the any of the button is clicked.
with the help of the code below , i was able to fix the problem . Now when you click the right answer , the button indicates with a green color , when you click the wrong answer , it indicates with a red color while also indicating the correct one with a green color
function selectAnswer(e) {
const btnSelect = e.target;
const correctAnswer = btnSelect.dataset.correct === "true";
if (correctAnswer) {
btnSelect.classList.add("correct");
} else {
btnSelect.classList.add("incorrect");
}
Array.from(answer.children).forEach((button) => {
if (button.dataset.correct === "true") {
button.classList.add("correct");
}
});
}
That's all for today guys , thank you for stoping by
Below is a youtube video of a demo
