Adaptives „Nächste Lektion"-UI erstellen
Inhalte, die sich anpassen
Das beste Lernen holt jeden Lernenden dort ab, wo er steht. Ein Lernender, der das Quiz mit Bravour bestanden hat, braucht eine Herausforderung; einer, der sich schwergetan hat, braucht Wiederholung. In dieser Lektion baust du ein adaptives UI für „Empfohlene nächste Lektion", das einen Pfad basierend auf der Leistung vorschlägt.
Du erstellst drei beschriftete Empfehlungskarten – eine für jedes Leistungsniveau: einen Wiederholungspfad für Lernende, die mehr Übung brauchen, einen stetigen Pfad für diejenigen, die auf Kurs sind, und einen Herausforderungspfad für Hochleistende. Klare Beschriftungen und Farbhinweise machen die richtige Wahl sofort erkennbar.
Hier zeigt KI-generierter Inhalt seinen wahren Wert – keine zwei Lernenden sehen exakt denselben nächsten Schritt. Folge den Schritten und sieh zu, wie dein adaptives UI entsteht.
Anweisungen
Füge eine Seitenüberschrift „Empfohlene nächste Lektion" und einen kurzen Untertitel hinzu, der erklärt, dass sich der Pfad anpasst.
Tipp: Verwende `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` gefolgt von einem `<p>`-Untertitel.
Wo kommt das hin?
<!-- Build your adaptive recommendation UI here -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Erstelle einen responsiven Grid-Container, der die drei Empfehlungskarten aufnimmt.
Füge drei rounded-xl-Karten hinzu, jede mit einem Beschriftungs-Span für das Leistungsniveau (z. B. „Needs Review").
Gib jeder Karte einen Call-to-Action-Button, damit der Lernende diesen Pfad starten kann.
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 Seitenüberschrift „Empfohlene nächste Lektion" und einen kurzen Untertitel hinzu, der erklärt, dass sich der Pfad anpasst.