Deine erste interaktive Quiz-App
Deine erste interaktive Quiz-App
Ein Vortrag ist Einbahnstraße. Ein Quiz ist ein Gespräch.
Studierende, die sich selbst testen, behalten 50 % mehr als jene, die den Stoff nur nochmals lesen. In dieser Lektion baust du eine echte, klickbare Quiz-App – mit einer Frage, Antwortoptionen, die beim Klicken grün oder rot aufleuchten, einem Punktezähler und einer Ergebnismeldung. Sie läuft im Browser. Keine Frameworks, kein Backend. Nur HTML + eine Prise JavaScript.
Anweisungen
Füge ein <h1>-Element mit deinem Quiz-Titel ein – welches Thema testet dieses Quiz?
Tipp: Versuch es so: `<h1 class="text-3xl font-bold text-white mb-2">Schneller Wissenscheck</h1>`
Füge ein <div class="question"> mit dem Text deiner Quiz-Frage ein
Füge mindestens 3 Antwort-<button class="answer-btn">-Elemente ein. Markiere die richtige Antwort mit data-correct="true"
Füge unten ein <div class="score-counter"> ein, das „Score: 0" anzeigt – das JavaScript im Startercode aktualisiert es automatisch, wenn die richtige Antwort angeklickt wird
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge ein <h1>-Element mit deinem Quiz-Titel ein – welches Thema testet dieses Quiz?