Crea un'Interfaccia Adattiva per la Prossima Lezione
Contenuto che si Adatta
Il miglior apprendimento incontra ogni studente dove si trova. Uno studente che ha superato brillantemente il quiz ha bisogno di una sfida; uno che ha faticato ha bisogno di ripassare. In questa lezione costruirai un'interfaccia adattiva «prossima lezione consigliata» che suggerisce un percorso in base alle prestazioni.
Creerai tre schede di raccomandazione etichettate, una per ogni livello di prestazione: un percorso di ripasso per gli studenti che hanno bisogno di più pratica, un percorso regolare per chi è sulla buona strada, e un percorso avanzato per i più brillanti. Etichette chiare e indicatori di colore rendono ovvia la scelta giusta.
È qui che i contenuti creati con l'AI dimostrano il loro valore — nessuno studente vede esattamente lo stesso passo successivo. Segui i passaggi e guarda la tua interfaccia adattiva prendere forma.
Istruzioni
Aggiungi un'intestazione di pagina «Recommended Next Lesson» e un breve sottotitolo che spieghi che il percorso si adatta.
Suggerimento: Usa `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` seguito da un sottotitolo `<p>`.
Dove va scritto?
<!-- Build your adaptive recommendation UI here -->Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.
Crea un contenitore grid responsive per contenere le tre schede di raccomandazione.
Aggiungi tre schede rounded-xl, ognuna con uno span di etichetta del livello di prestazione (ad esempio «Needs Review»).
Dai a ogni scheda un pulsante di invito all'azione in modo che lo studente possa iniziare quel percorso.
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un'intestazione di pagina «Recommended Next Lesson» e un breve sottotitolo che spieghi che il percorso si adatta.