Ein Klassen-Fortschritts-Dashboard erstellen
Lernfortschritt im Blick
Auf einen Blick zu wissen, wo jede Schülerin und jeder Schüler steht, ist eines der wertvollsten Werkzeuge für Lehrkräfte. Ein übersichtliches Fortschritts-Dashboard verwandelt eine Tabelle voller Zahlen in etwas, das du in Sekunden erfassen kannst. In dieser Lektion baust du genau das – mit KI als Begleitung bei jedem Schritt.
Du erstellst eine Tabelle, die Schülerinnen und Schüler auflistet, den Fortschritt jeder Person mit einem visuellen Balken zeigt und den Status kennzeichnet – so siehst du sofort, wer gut dabei ist und wer Unterstützung braucht. Dieses Tool lässt sich für jede Klasse und jedes Fach anpassen.
Folge den Schritten, beobachte die Live-Vorschau – und am Ende hast du ein Dashboard, das du schon am Montagmorgen einsetzen könntest.
Anweisungen
Füge eine Dashboard-Überschrift mit dem Text „Class Progress" in einem abgerundeten Karten-Container (rounded-xl) hinzu.
Tipp: Umschließe ein `<h1>Class Progress</h1>` mit einem `<div class="... rounded-xl ...">`.
Wo kommt das hin?
<!-- Build your class progress dashboard here -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Erstelle eine Tabelle mit Spaltenüberschriften für Student, Progress und Status.
Füge in jeder Schülerzeile einen Fortschrittsbalken mit einem grünen Füll-Div ein, dessen Breite den Fortschritt widerspiegelt.
Füge in jeder Zeile ein Status-Badge mit einem span ein. Mindestens eines davon soll „On Track" anzeigen.
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 eine Dashboard-Überschrift mit dem Text „Class Progress" in einem abgerundeten Karten-Container (rounded-xl) hinzu.