Erstelle eine gamifizierte Lernkarte
Mach deinen Inhalt zum Spiel
Schülerinnen und Schüler sind aufmerksamer, wenn sich Lernen wie ein Spiel anfühlt. Punkte, Fortschritt und eine klare Herausforderung verwandeln eine flache Lektion in etwas, das es wert ist, fertiggestellt zu werden. In dieser Lektion baust du eine gamifizierte Lernkarte – mit KI als deinem Baupartner.
Du setzt drei Elemente zusammen, die jedes großartige Spiel-Interface teilt: ein Punkte-Badge, das Einsatz belohnt, ein Fortschrittsbalken, der zeigt, wie weit die Schülerin oder der Schüler gekommen ist, und eine Aufgabenkarte, die ein Ziel vorgibt. Am Ende hast du eine wiederverwendbare Komponente, die du in jede Lektion einbauen kannst.
Mach dir keine Sorgen, perfekten Code aus dem Gedächtnis zu schreiben. Folge jedem Schritt, nutze die Hinweise und lass die Live-Vorschau bestätigen, dass du auf dem richtigen Weg bist.
Anweisungen
Erstelle den Lernkarten-Container: ein div mit abgerundeten Ecken (rounded-xl), Innenabstand und einem dunkelgrauen gray-800-Hintergrund.
Tipp: Verwende: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Wo kommt das hin?
<!-- Build your gamified lesson card here -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Füge ein Punkte-Badge hinzu: ein span mit leuchtend gelbem Hintergrund, das den Punktestand der Schülerin oder des Schülers anzeigt.
Füge einen Fortschrittsbalken hinzu: ein graues Schienen-div, das ein grünes Füll-div mit einer festgelegten Breite enthält.
Füge eine Aufgabenkarte mit der Überschrift „Today's Challenge" und einem kurzen Ziel für die Schülerin oder den Schüler hinzu.
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: Erstelle den Lernkarten-Container: ein div mit abgerundeten Ecken (rounded-xl), Innenabstand und einem dunkelgrauen gray-800-Hintergrund.