Quizfrage mit Feedback
Wähle eine Antwort: Die richtige wird grün, eine falsche wackelt rot und die richtige wird gezeigt.
Einstellungen
Code
<fieldset class="uv-rqz"><legend>Welcher ist der größte 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>Neptun<em aria-hidden="true"></em></span></label><label><input type="radio" name="uv-rqz"><span><b>D</b>Die Erde<em aria-hidden="true"></em></span></label></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Lern-Apps, Onboarding-Touren und Quizspiele brauchen sofortiges Feedback ohne Neuladen. Markiere die richtige Option mit einer Klasse, den Rest erledigt CSS: Wer sie wählt, sieht sie grün mit Haken pulsieren, wer eine andere wählt, sieht diese rot mit Kreuz wackeln, und die richtige Antwort wird hervorgehoben.
Jede Antwort hat einen Buchstaben, eine klare Kontur und eine große Tippfläche. Die Farben für richtig und falsch sind anpassbar, und das Wackeln respektiert reduzierte Bewegung, das Feedback bleibt trotzdem klar.