Crea una Dashboard dei Progressi della Classe
Tracker dei Progressi degli Studenti
Sapere a colpo d'occhio dove si trova ogni studente è una delle cose più potenti che un insegnante possa avere. Una dashboard dei progressi ben fatta trasforma un foglio di numeri in qualcosa che puoi leggere in pochi secondi. In questa lezione ne costruirai una con l'AI che ti guida passo dopo passo.
Creerai una tabella che elenca gli studenti, mostra i progressi di ciascuno con una barra visiva, e indica il loro stato così puoi vedere subito chi è avanti e chi ha bisogno di aiuto. È esattamente il tipo di strumento che puoi adattare a qualsiasi classe e qualsiasi materia.
Segui i passaggi, osserva l'anteprima in tempo reale, e avrai una dashboard che potresti davvero usare già lunedì mattina.
Istruzioni
Aggiungi un'intestazione alla dashboard con il testo «Class Progress» all'interno di un contenitore card con rounded-xl.
Suggerimento: Inserisci `<h1>Class Progress</h1>` all'interno di un `<div class="... rounded-xl ...">`.
Dove va scritto?
<!-- Build your class progress dashboard here -->Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.
Crea una tabella con le colonne di intestazione per Student, Progress e Status.
Per ogni riga studente, aggiungi una barra di avanzamento con un div di riempimento verde la cui larghezza riflette i progressi.
Aggiungi un badge di stato in ogni riga usando uno span. Fai in modo che almeno uno dica «On Track».
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 alla dashboard con il testo «Class Progress» all'interno di un contenitore card con rounded-xl.