Built in way to highlight correct answer for quiz questions (applying css to classes dynamically)

Question

I'd like to have a way for participants to get immediate feedback within the same page about whether or not they've gotten a question right by highlighting their answer as either green or red depending on if they got the answer right.

For example:

*question: Select Option 1
	1
	2
	*save: option

If they select option 2 their selected answer should turn red. If they selection option 1, their selected answer should turn green. My current approach is to transform the question into components and, if they get an answer right, to re-render the components on the next page with a green or a red class. This is somewhat clumsy and requires a bunch of if-statements a lot of text and another page load.

Is there a better way of doing this?

Answer 1

Could you share the code you're currently using to do this with *component? That should be the right approach, and I'd like to see whether there's a way to simplify the code you currently have.