HTML + CSSBoutons radio
Question de quiz avec correction
Choisis une réponse : la bonne passe au vert, une mauvaise tremble en rouge et la bonne s'affiche.
Réglages
16px
1x
Code
<fieldset class="uv-rqz"><legend>Quelle est la plus grande planète ?</legend><label><input type="radio" name="uv-rqz"><span><b>A</b>Saturne<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>La Terre<em aria-hidden="true"></em></span></label></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Les applis d'apprentissage, les visites guidées et les jeux de quiz ont besoin d'un retour immédiat sans rechargement. Marque l'option correcte avec une classe et le CSS fait le reste : la choisir la fait pulser en vert avec une coche, en choisir une autre la fait trembler en rouge avec une croix et met la bonne réponse en évidence.
Chaque réponse a une lettre, un contour net et une grande zone de clic. Les couleurs de réussite et d'erreur se modifient, et le tremblement respecte le mouvement réduit.