Quiz question with feedback
Pick an answer: the right one turns green, and a wrong pick shakes in red while the right one is revealed.
Settings
Code
<fieldset class="uv-rqz"><legend>Which is the largest planet?</legend><label><input type="radio" name="uv-rqz"><span><b>A</b>Saturn<em aria-hidden="true"></em></span></label><label class="ok"><input type="radio" name="uv-rqz"><span><b>B</b>Jupiter<em aria-hidden="true"></em></span></label><label><input type="radio" name="uv-rqz"><span><b>C</b>Neptune<em aria-hidden="true"></em></span></label><label><input type="radio" name="uv-rqz"><span><b>D</b>Earth<em aria-hidden="true"></em></span></label></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Learning apps, onboarding tours and trivia games need instant feedback without page reloads. Mark the correct option with a class and CSS does the rest: choosing it pulses it green with a tick, choosing another shakes that option in red with a cross and highlights the correct answer so people learn something either way.
Each answer has a letter badge, a clear outline and a large tap area. Colors for right and wrong are both editable, and the shake respects reduced motion so the feedback is still clear without movement.