Crea una Scheda Lezione Gamificata
Trasforma i Tuoi Contenuti in un Gioco
Gli studenti prestano attenzione quando imparare sembra un gioco. Punti, progressi e una sfida chiara trasformano una lezione piatta in qualcosa che vale la pena completare. In questa lezione costruirai una scheda lezione gamificata con l'AI come tuo partner di sviluppo.
Assemblerai tre elementi che ogni grande interfaccia di gioco condivide: un badge punti che premia l'impegno, una barra di avanzamento che mostra quanto lo studente ha percorso, e una scheda sfida che gli dà un obiettivo. Alla fine avrai un componente riutilizzabile da inserire in qualsiasi lezione.
Non preoccuparti di scrivere codice perfetto a memoria. Segui ogni passaggio, affidati ai suggerimenti e lascia che l'anteprima in tempo reale confermi che sei sulla strada giusta.
Istruzioni
Crea il contenitore della scheda lezione: un div con angoli arrotondati rounded-xl, padding e uno sfondo grigio scuro gray-800.
Suggerimento: Usa: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Dove va scritto?
<!-- Build your gamified lesson card here -->Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.
Aggiungi un badge punti usando uno span con uno sfondo giallo brillante che mostra il punteggio dello studente.
Aggiungi una barra di avanzamento: un div traccia grigio contenente un div di riempimento verde con una larghezza impostata.
Aggiungi una scheda sfida con il testo di intestazione «Today's Challenge» e un breve obiettivo per lo studente.
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: Crea il contenitore della scheda lezione: un div con angoli arrotondati rounded-xl, padding e uno sfondo grigio scuro gray-800.