Marina Fumagalli 1

Adattato dal sito web con Traduzione italiana di - Italian translation byAlfredo Colucci

Marina Fumagalli 2

• Tutorial • tutorial della versione 4 di

Hot Potatoes. Questa presentazione mostrerà i sei tipi di esercizi principali generati dai moduli del programma, e vi guiderà nei passaggi principali per creare un esercizio interattivo.

• Per eseguire questo tutorial, sarà necessario usare Netscape Navigator o MS Internet Explorer versioni 3 o superiori, con il supporto JavaScript attivo. Per gli esercizi in HTML dinamico, sarà necessario usare un browser più recente. Cliccando sulla scritta qui sotto si può controllare la compatibilità del browser.

• Tutorial di Hot Potatoes

Marina Fumagalli 3

Introduzione a Hot Potatoes

• La suite Hot Potatoes è un insieme di sei programmi autore creati dal gruppo del Laboratorio di Ricerca e Sviluppo CALL della University of Victoria, che vi permette di creare esercizi interattivi di sei tipi diversi su pagine Web. Gli esercizi fanno uso di JavaScript per l'interattività, e funzionano in Netscape Navigator e Internet Explorer versioni 3 e superiori sia sulle piattaforme Windows che Macintosh. La versione 4 di Hot Potatoes genera esercizi in HTML dinamico (DHTML), comprendendo funzioni come il drag-and-drop (clicca e trascina), anche se queste sono disponibili solo con i browser più recenti. Questi programmi autore supportano anche i caratteri accentati, il che rende possibile creare esercizi in qualsiasi lingua basata sul gruppo di caratteri Romani, incluso il Francese, il Tedesco, l'Italiano e molte altre lingue.

• Benché gli esercizi siano costruiti usando JavaScript, non siete tenuti a conoscere niente di questo linguaggio per usare i programmi. Tutto ciò che dovete fare è di inserire i dati dei vostri esercizi (testi, domande, risposte, ecc.) e i programmi creeranno le pagine Web per voi. Poi, se volete, potete inviarle al vostro sito Web oppure utilizzarle sul vostro computer locale, purché dotato di un browser. In ogni caso i programmi sono concepiti in modo tale da permettere la personalizzazione di quasi tutti gli elementi delle pagine generate, cosicchè, conoscendo l'HTML o il JavaScript, si possono apportare tutte le modifiche che si desiderano, dal modo in cui gli esercizi funzionano al formato delle pagine Web.

Marina Fumagalli 4

• Se lavorate in una istituzione o ambito educativo senza fini di lucro, potete usare la suite Hot Potatoes gratuitamente. Se lavorate per una società o un ambito commerciale, siete tenuti ad acquistare una licenza (contattare la Half-Baked Software per informazioni). In ogni caso, sia che operiate in ambito commerciale o meno, registratevi per l'uso dei programmi; è sufficiente riempire un modulo sul sito Web.

• Ora osservate alcuni esempi del tipo di esercizi realizzabili con Hot Potatoes. (Tenete presente che i file di dati per tutti gli esercizi presentati sono disponibili nella cartella "tutorial" in modo da poterli esaminare all'interno dei programmi autore in un secondo momento.)

Marina Fumagalli 5

Un quiz a scelta multipla realizzato con JBC

• Scegli la risposta giusta per ciascuna

domanda. • Un quiz a scelta multi

pla realizzato con JBC.

• Questo è un tipico quiz JBC. In questa finestra c'è un testo di lettura. Il testo può essere immesso direttamente dal programma JBC scegliendo File/Add Reading Text, oppure può trattarsi di un file HTML esterno da voi creato in un qualsiasi altro modo (potete importare un file dalla schermata Add Reading Text). In alternativa potete scegliere di non includere affatto un testo di lettura. Quattro delle applicazioni Hot Potatoes vi permettono questa possibilità.

Questo testo ha anche un timer in esecuzione. Anche questo è facoltativo. Quando sarà trascorso il tempo concesso, il testo di lettura scomparirà (benché l'utente potrà farlo ricomparire premendo un apposito pulsante). Se includete un timer, vi sarà data la possibilità di stabilire il numero di minuti che devono trascorrere prima che il testo scompaia.

Dall'altra parte dello schermo ci sono due riquadri (frames). Il riquadro superiore (top frame) è quello di Benvenuto/Aiuto. Vi sono compresi alcuni pulsanti di navigazione (vedi sotto). Esso viene usato anche per mostrare due diversi tipi di informazioni:

1. Il messaggio iniziale di "Benvenuto" che l'utente vede quando apre per la prima volta il vostro quiz, insieme alle istruzioni per eseguirlo.

2. Il messaggio di rinforzo (feedback) che l'utente vedrà dopo aver premuto uno dei pulsanti di risposta.

Il riquadro inferiore (bottom frame) dall'altra parte contiene le domande. Se non includete un testo di lettura, i due riquadrii dall'altra parte prenderanno tutto lo spazio disponibile nella finestra del browser. In fondo al riquadro delle domande vedrete tre pulsanti di navigazione. Questi sono facoltativi, ma possono essere molto utili nell'aiutare i vostri utenti a navigare in un grosso sito o a muoversi in una sequenza di esercizi (come ad esempio in questo sito Web). Uno è un pulsante "back" ("indietro" o "precedente"), che riporta alla pagina di provenienza, qualsiasi essa sia, uno porta a un indice o pagina dei contenuti e il terzo porta all'esercizio o alla pagina successiva di una sequenza.

Marina Fumagalli 6

Un esercizio di completamento realizzato con JCloze

• Completa con tutte le parole mancanti, poi premi "Controlla" per verificare l'esattezza delle tue risposte. Usa il pulsante "Suggerimento" per ottenere una lettera gratis quando una risposta non riesci a darla. Puoi anche cliccare sul pulsante "[?]" per ottenere un aiuto. Attenzione: se chiedi suggerimenti o aiuti perdi punti!

• Un esercizio di completamento realizzato con JCloze

Marina Fumagalli 7

Un quiz a risposta aperta realizzato con JQuiz

• Scrivi la tua risposta, poi premi "Controlla". Se hai bisogno di aiuto, puoi cliccare sul pulsante "Suggerimento" per ottenere una lettera gratis.

• Un quiz a risposta aperta realizzato con JQuiz

Marina Fumagalli 8

Un cruciverba realizzato con JCross

• Completa il cruciverba, poi clicca su "Controlla" per verificare le tue risposte. Se hai problemi, puoi cliccare su "Suggerimento" per ottenere una lettera gratis. Clicca su un numero dello schema per vedere la definizione o le difinizioni per quel numero. Si noti che ci si può spostare sulla griglia utilizzando i numeri 2, 4, 6 e 8, oppure la virgola, il punto, i due punti e il punto e virgola.

• Un cruciverba realizzato con JCross

Marina Fumagalli 9

Un esercizio di riordino di frase realizzato con JMix

• Metti in ordine le varie parti per ricostruire una frase. Quando pensi che la tua frase sia corretta, clicca su "Controlla" per verificare la risposta. Se hai problemi, clicca su "Suggerimento" per trovare l'elemento giusto successivo.

• Un esercizio di riordino di frase realizzato con JMix

Marina Fumagalli 10

Un esercizio di abbinamento realizzato con JMatch

• Seleziona la corretta sequenza di azioni necessarie per creare un esercizio di Hot Potatoes scegliendole dalle liste a comparsa (drop-down lists).

• Un esercizio di abbinamento realizzato con JMatch

Marina Fumagalli 11

Un esercizio di abbinamento realizzato con JMatch

• Abbina il nome con gli alimenti. (Immagini tratte dal CD Half-Baked del 1999)

• Un esercizio di abbinamento realizzato con JMatch

Marina Fumagalli 12

La "sfida dei 2 minuti":realizza il tuo primo esercizio

• Eseguite il programma JMix, poi

• Inserite una frase. Dividete la vostra frase in segmenti, disponendo ogni segmento su una riga diversa.

• Fate clic sul pulsante V4, oppure scegliete la voce "Export to HTML" dal menu File. (Se avete un Web browser datato, dovreste invece scegliere il pulsante V3.)

• Rispondete alla domanda sulla maiuscola della parola "Questa" con un "no".

• Scegliete un nome per la vostra pagina Web.

• Rispondete "Yes" per vedere l'esercizio con il vostro browser.

Marina Fumagalli 13

Realizzare un esercizio in tre passaggi

• Sebbene abbiate probabilmente trovato la "sfida dei 2 minuti" molto semplice, in effetti dovreste sapere qualcosa in più sul funzionamento dei programmi per trarne il massimo profitto. Questa sezione finale del tutorial vi guiderà passo passo nel processo di realizzazione di un esercizio usando JQuiz, in modo da presentare alcuni dei concetti basilari con cui familiarizzare.

• Ci sono tre passaggi principali per creare un esercizio:

• Inserire i dati (domande, risposte, eccetera)

• Configurare l'output (preparare le scritte sui pulsanti, le istruzioni ed altri aspetti delle vostre pagine Web)

• Creare le pagine Web (trasformare il vostro esercizio in pagine HTML o DHTML).

Marina Fumagalli 14

Passaggio 1: inserire i dati • Nell'ultima parte di questo tutorial

realizzeremo un quiz a risposta aperta utilizzando JQuiz. La prima fase è quella di inserire le domande e le risposte del vostro esercizio. Eseguite il programma JQuiz, quindi inserite il titolo, la domanda e le due risposte che vedete nella figura seguente. Notate che abbiamo immesso due possibili variazioni della risposta: la parola "sei" e la cifra "6". Questo significa che il programma considererà accettabile e corretta una qualsiasi delle due risposte.

• Una volta immessi i dati è necessario salvarli, in caso si desideri apportare modifiche in un secondo momento. Ognuno dei programmi di Hot Potatoes salva i dati in un formato specifico; per quanto riguarda JQuiz, i file terminano con l'estensione ".jqz" e presentano l'icona raffigurata qui a sinistra. E' importante salvare i dati, poiché i programmi non possono riaprire le pagine web per modificarle; l'unico modo possibile per modificare le pagine è di riaprire il file di dati, apportare i cambiamenti e poi generare nuovamente le pagine Web. Denominate il file "test", o qualcosa di simile. In seguito il nome del file "...\test.jqz" dovrebbe comparire sulla barra del titolo del programma JQuiz al posto della dicitura [Untitled].

Marina Fumagalli 15

Passaggio 2: Configurare l'Output • Quando un programma della suite Hot Potatoes crea una pagina Web, lo fa combinando 3 risorse: • I dati da voi immessi • Le informazioni di configurazione • Un gruppo di "file sorgente", o "templates", che contengono la struttura della pagina. • Abbiamo già considerato l'immissione dei dati; il passaggio successivo è la Configurazione. Le informazioni di

configurazione sono una combinazione di pezzi di testo, incluse le istruzioni per l'esecuzione dell'esercizio, le scritte dei pulsanti e gli URL (indirizzi) dei collegamenti, che non dovrebbero cambiare molto da un esercizio all'altro. Per esempio tutti gli esercizi di prova inclusi nelle prime pagine di questa presentazione comprendevano un pulsante etichettato "Controlla", con la funzione di permettere allo studente di controllare l'esattezza delle sue risposte. La scritta "Controlla" non dovrebbe di norma cambiare da esercizio a esercizio e quindi non è necessario archiviarla insieme ai dati; in ogni caso, potreste aver bisogno di cambiarla (se state creando quiz in un'altra lingua, ad esempio).

• Potete accedere a tutte le informazioni di configurazione scegliendo "Configure Output" dal menu Options. Faremo due modifiche alla configurazione; prima di tutto modificheremo la scritta di uno dei pulsanti da "Suggerimento" (Hint) a "Dammi un suggerimento" (Give me a hint). Quando vedete la schermata di configurazione, cliccate sul "tab" (linguetta) "Button Captions", e modificate la voce per il pulsante di suggerimento (Hint button), come in questo esempio:

Marina Fumagalli 16

Ora cambieremo una delle impostazioni sulla pagina finale della schermata di configurazione. Se cliccate sul "tab" (linguetta) Settings/URLs, vedrete una casellina di controllo per rendere l'esercizio case-sensitive (sensibile alle maiuscole). Ricorderete che le nostre due risposte esatte erano "sei" e "6"; in effetti avrebbe un senso considerare accettabili anche le risposte "Sei" oppure "SEI", per cui toglieremo il segno di spunta dalla casellina (il segno potrebbe già essere assente, in tal caso lasciare com'è). A questo punto l'esercizio non sarà "sensibile alle maiuscole" (case-sensitive) e tutte le possibili variazioni di "sei" saranno considerate accettabili:

•Quando avrete fatto le vostre modifiche, premete "OK" •per tornare alla schermata principale. Il programma vi •chiederà se volete salvare le vostre modifiche sul disco, •ma non c'è alcuna necessità di farlo, a meno che non •preferiate la scritta "Dammi un suggerimento" alla •scritta originaria "Suggerimento".

Marina Fumagalli 17

Passaggio 3: Creazione delle pagine Web

• Il passaggio finale è quello di creare pagine Web dai vostri dati. Questa volta realizzeremo un file HTML che funzionerà sui browsers in versione 3. Basta fare clic su "Export to HTML" dal menu File, poi attribuire alla pagina un nome di file. Usate il nome "test.htm".

• Il programma vi comunicherà di aver prodotto tre file. E' importante capire cosa sono questi file e perché siano tutti necessari. In questo caso essi saranno:

• test.htm: il documento di cornice principale (main frameset). Questo è il file di base; se volete creare un collegamento da un'altra pagina al vostro esercizio, questo è il file a cui bisogna far riferimento. Qui viene creato il gruppo di riquadri (frameset) che contiene le altre due pagine.

• testw.htm: la "w" nel nome del file sta per "welcome", e questo è il file che appare nel riquadro superiore (top frame) dell'esercizio quando viene aperto per la prima volta. Esso contiene solo un messaggio di benvenuto e istruzioni per svolgere l'esercizio.

• testc.htm: la "c" sta per "code" (codice), infatti questo file è la parte principale dell'esercizio che contiene le domande e tutto il codice necessario a farlo funzionare.

• Tutti e tre questi esercizi devono essere nella stessa cartella o directory ed è il file principale (test.htm) che va aperto nel browser perchè l'esercizio possa funzionare. Le pagine DHTML consistono di solito di un solo file, ma tutti gli esercizi HTML hanno vari file.

Marina Fumagalli 18

Una rapida sintesi

• Avete appena completato i tre passaggi fondamentali per realizzare un esercizio. Ora potete collocare i vostri tre file su un Web server e chiunque potrà avere accesso al vostro esercizio ed eseguirlo. In alternativa potete installarli su un dischetto floppy o sul disco fisso di un computer, se non avete accesso ad un server.

• Prima di proseguire, consideriamo ancora una volta questi tre passaggi:

• Inserite i vostri dati (domande, risposte, ecc.) e salvateli come file di dati.

• Regolate la configurazione, assicurandovi che le scritte dei pulsanti, le istruzioni, gli URL (indirizzi), eccetera siano appropriati per l'esercizio che state creando.

• Create le pagine Web e visualizzate il vostro lavoro.

Marina Fumagalli 19

Per ulteriori informazioni... • Questo breve tutorial dovrebbe avervi

messo nelle condizioni di iniziare a creare i vostri esercizi in proprio. Comunque c'è ancora tanto da imparare per ottenere veramente il massimo da Hot Potatoes. L'aiuto online sensibile al contesto (si può richiamare da qualsiasi punto dei programmi con il tasto F1) dovrebbe dare risposta alla maggior parte delle vostre domande nella fase sperimentale e creativa del vostro lavoro. Ogni programma ha una gamma di diverse opzioni di configurazione, che sarebbe opportuno osservare e provare. Troverete la possibilità di configurare tutti questi elementi:

• Immagini di sfondo • I colori delle pagine • I pulsanti di Suggerimento, Aiuto e

Navigazione • Le scritte dei pulsanti • I messaggi di benvenuto e le istruzioni • La sensibilità all'uso delle maiuscole • ...e altro ancora...

• La suite di programmi di Hot Potatoes supporta l'uso dei caratteri accentati e ciò vi permette di modificare la configurazione in una qualsiasi lingua che faccia uso di caratteri romani (come l'italiano, il francese, il tedesco, l'olandese, lo svedese e molti altri). I programmi includono strumenti per inserire immagini e collegamenti nelle vostre pagine, oltre a permettere l'aggiunta di suoni e video: per maggiori informazioni consultate l'aiuto in linea su questo argomento. Se vi sentite davvero ambiziosi, potete persino modificare i file originali utilizzati come modello per creare gli esercizi, cambiando l'aspetto complessivo e addirittura la funzionalità delle pagine Web generate.

Marina Fumagalli 20

Questo è tutto ! Grazie per la vostra attenzione.