Creare attività interattive in HTML con Claude

Come ho preparato una lezione di spagnolo con l'IA e cosa ho sbagliato

Qualche settimana fa, fotocopia in mano, mi sono fermata a metà della preparazione di un esercizio sul vocabolario della routine quotidiana. Come posso renderlo divertente e multimediale? La risposta è venuta quasi spontanea: chiediamo all’IA.

Stavo preparando una lezione per una classe prima del Liceo Linguistico dove insegno spagnolo: vocabolario della routine quotidiana e avverbi di frequenza. Avevo già in mente che tipo di esercizio fare, ma volevo qualcosa di più coinvolgente di una fotocopia. Ho deciso di provare a usare Claude AI.

Il primo prompt che ho scritto è stato il seguente:

“Prepara un’attività di abbinamento di parole con traduzioni/immagini. Deve avere tre versioni: una con la parole in spagnolo e l’abbinamento in italiano, una contraria alla precedente e l’ultima deve prevedere l’uso di emoji. Quindi, la stessa emoji deve comparire nella parola da abbinare e nella sua traduzione. Aggiungi un timer.

Preparalo in HTML usando le seguenti parole o espressioni:

Volver a casa: tornare a casa

Ducharse: farsi la doccia

Mojarse: bagnarsi

ecc.”

In men che non si dica, ho avuto la mia attività interattiva.

Attività interattiva di abbinamento, con tre versioni: spagnolo → italiano, italiano → spagnolo, e con emoji Apri a tutto schermo →

Prima di proseguire, vale la pena soffermarsi su alcuni aspetti.

Cos’è un file HTML? Si tratta di un file che si comporta come una pagina web ma non è online. Questo tipo di file, infatti, permette di poter ‘navigare’ sulla pagina ma è visibile solo sul computer su cui il file è stato aperto. Ti ricordi il primo articolo? Quello in cui dicevo che avevo inviato il link e non funzionava? Ecco, per far sì che qualcun altro possa aprire il file HTML devi condividere l’intero file, come faresti con un pdf.

Perché termini precisi e non scelti dall’IA? Perché l’IA ci aiuta a velocizzare e semplificare il nostro lavoro, ma non deve sostituirsi al pensiero. In un’ottica didattica, poi, non avrebbe avuto senso far creare un’attività con termini casuali: l’obiettivo ero lo studio di quelle espressioni.

Perché tre versioni e un timer? Per rispettare i tempi e gli stili di apprendimento di ciascuno. Ognuno ha il proprio modo di imparare e non ce n’è uno giusto per tutti. Le tre versioni hanno permesso agli studenti di sperimentare la traduzione passiva (spagnolo-italiano), quella attiva (italiano-spagnolo) e l’associazione parola-immagine per chi preferiva avere un appoggio visivo. Il timer ha seguito lo stesso principio: ognuno lo poteva attivare e disattivare al bisogno.

Dopo questa prima attività, ne ho creata una seconda, sugli avverbi di frequenza. Ho usato un prompt simile:

“Mi serve un’attività per spiegare gli avverbi di frequenza. Vorrei che ci fosse una scala da 0% a 100% e che gli studenti debbano trascinare gli avverbi nel punto corretto della scala. Poi, devono mettere dal lato opposto della scala la giusta traduzione. Aggiungi un timer e preparalo in HTML.

Gli avverbi sono in ordine dallo 0 e sono i seguenti:

nunca: mai

casi nunca: quasi mai

ecc.”

Scala 0%–100%: gli avverbi vanno trascinati nella posizione corretta, con la traduzione dal lato opposto Apri a tutto schermo →

Bilancio finale

Tirando le somme, si possono evidenziare tre aspetti positivi - interattività, coinvolgimento e velocità - e due limiti, entrambi legati ai miei errori: nel prompt e nel file HTML che ne è scaturito.

Interattività e Multimedialità

In un mondo sempre più tecnologico e in cui l’IA è costantemente presente, credo sia importante educarci all’uso della tecnologia per poterla sfruttare al meglio. È un linguaggio vicino ai giovani, che li attrae e li appassiona. La domanda non è più “se” usare la tecnologia, ma “come”.

Apprendimento esperienziale

Il modello di apprendimento esperienziale, basato sul learning by doing di John Dewey e sugli studi di Lewin e Piaget, è stato formalizzato da David Kolb negli anni ‘80. Il suo approccio, noto come Experiential Learning Theory (ELT),individua quattro fasi :

  1. Esperienza concreta: sperimentare personalmente
  2. Osservazione riflessiva: analizzare ciò che è stato svolto
  3. Concettualizzazione astratta: astrazione dei concetti e produzione di schemi generali
  4. Sperimentazione attiva: verificare le competenze acquisite in nuove situazioni

L’attività che ho proposto ha seguito esattamente questo schema:

  1. Gli studenti hanno svolto l’esercizio
  2. Ho posto domande per stimolare l’analisi di quanto appena fatto
  3. Insieme abbiamo astratto i concetti generali e formalizzato le regole
  4. Gli studenti hanno messo in campo le competenze appena apprese in un altro tipo di attività: scrivere qualche riga sulla propria routine quotidiana

Velocità di preparazione

Sono fermamente convinta che lo sforzo fatto dagli esperti tutti che danno vita a macchine e sistemi informatici vada premiato. Come? Con l’uso dei sistemi stessi. Per me sarebbe stato impossibile preparare un’attività del genere: non so programmare e non so scrivere codice. E allora, perché non usare le tecnologie che qualcun altro, appassionato e competente, crea e mette al servizio degli altri?

Errori nei prompt (e nel file HTML)

Se hai usato qualche volta l’IA sai che per ottenere quello che vuoi nel minor tempo possibile devi fornire un prompt preciso e dettagliato. Torna un attimo ai miei prompt. Ti sembrano precisi?

A prima vista potrebbero sembrarlo, ma in realtà ci sono diversi errori.

Mancava il riferimento alla classe, al numero di studenti e al livello linguistico. Per prima cosa Claude mi ha chiesto chi fossero i destinatari: non è stato difficile rispondere, ma sono stati passaggi in più che avrei potuto evitare.

Mancava il riferimento all’aspetto grafico. Le due attività sono state create in giorni diversi e l’IA ha generato grafiche diverse per ciascuna. Non avevo dato nessuna indicazione e non sapevo neanche come chiedere la stessa grafica per la seconda attività. A posteriori penso che bastasse caricare il primo file HTML e chiedere all’IA di riprodurre lo stile ma, come puoi intuire, la soluzione è arrivata ora, mentre scrivo queste parole.

Nel secondo prompt c’è stato un errore sostanziale. Ho chiesto all’IA di mettere gli avverbi su una scala, ma non ho mai chiesto che fossero mischiati. Il risultato? L’esercizio era pressoché inutile: gli avverbi erano già in ordine. Mi consolo pensando che solo in pochi se ne sono accorti (io in primis non l’avevo notato, presa dalla fretta di preparare la lezione).

Conclusioni

Concludendo, quest’esperienza mi ha offerto degli stimoli importanti e ha acceso una forte curiosità verso gli infiniti mondi della tecnologia. Trovo particolarmente stimolante sapere che tutto ciò che si immagina si può creare.

La prossima volta ci proverò con qualche conoscenza in più, con l’obiettivo di non ripetere gli stessi errori e con la consapevolezza che ce ne saranno altri, da cui imparerò.