Add answer tracking to simple HTML/JavaScript quiz

JavaScript
1

I have a simple HTML and JavaScript quiz that displays “Correct” or “Nice try” and some feedback text each time a user selects a radio button answer.

Now I am wanting to expand the functionality by adding an answer tracker, which will display an image that signifies “correct” or “incorrect” to the user. A live example of this can be found on the National Geographic Kids website.

I would also like to add an incremental numerical score that will be hidden from the user and stored in a HTML hidden form field after the user has answered the final question in the quiz. This value will be saved when the form is submitted and displayed on the completion page.

The existing quiz can be viewed here: Kids quiz

My work in progress CodePen can be viewed here: Simple quiz

Any assistance, suggestions, or tips would be greatly appreciated.

2

you can add a function or a component in React that takes a controlled input like teached in the FCC section, and return if it is correct or incorrect depending in the answers it got, also possible a method in a component that activates after the mount or render, the radio buttons have a value attribute that you can always check and have as a prop

3

Thanks for the reply, but I am building this quiz out using vanilla JavaScript and not React. Do you have suggestions using plain JS?

4

in that case i don’t have much to offer, there was another post where some guy lectured about why it’s important to also use tools, I’m not an expert in vanilla js in the web, but having value attributes together with the checked attribute can help