Development of a quiz web application : part three

[chimaobi]

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

Comments

[hivebuzz]

Congratulations @chimaobi! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You received more than 2500 upvotes. Your next target is to reach 2750 upvotes.

_{You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP}

Check out our last posts:

Valentine's Day Event – Spread Love with a Special Badge! 💝

[stemsocial]

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

 
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.