Feuille de réponses au crayon
Une question de QCM : quand tu choisis une réponse, un gribouillis de crayon remplit son ovale.
Réglages
Code
<fieldset class="uvq04-omr"><legend>7. Quel gaz les plantes absorbent-elles ?</legend><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">A<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Oxygène</span></label><label><input type="radio" name="uvq04-omr" checked><span class="bb" aria-hidden="true">B<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Dioxyde de carbone</span></label><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">C<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Azote</span></label><label><input type="radio" name="uvq04-omr"><span class="bb" aria-hidden="true">D<svg viewBox="0 0 24 24" preserveAspectRatio="none"><path pathLength="1" d="M6.5 8.5L17 6.5L5.5 12.5L18.5 10L6 16L18 14L8.5 18"/></svg></span><span class="tx">Hélium</span></label><p class="nt">Remplis entièrement l’ovale</p></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
Ce groupe de boutons radio ressemble à une grille de lecture optique : ovales imprimés en saumon, repères de synchronisation dans la marge, lignes discrètes et question en police à empattements. Choisir une réponse dessine un gribouillis de graphite dans l'ovale grâce à un tracé SVG, et en changer l'efface. Il convient aux quiz, plateformes scolaires, sondages et questions d'accueil.
La couleur principale est le crayon et la secondaire l'encre imprimée de la feuille. Change la question depuis le champ de texte et garde chaque réponse sur une ligne : quatre ou cinq options tiennent sans déborder.