Transcript tutorialhotpotatoes_1.ppt

Adattato dal sito web con Traduzione italiana di - Italian translation by
Alfredo Colucci
Marina Fumagalli
1
• 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
2
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
3
• 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 HalfBaked 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
4
Un quiz a scelta multipla realizzato con JBC
•
•
Scegli la risposta giusta per ciascuna
domanda.
• Un quiz a scelta
multipla 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.
Marina
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
Fumagalli
5
successiva di una sequenza.
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
6
Un quiz a risposta aperta realizzato con
JQuiz
• Scrivi la tua risposta,
• Un quiz a risposta
poi premi "Controlla".
aperta realizzato con
Se hai bisogno di
JQuiz
aiuto, puoi cliccare sul
pulsante
"Suggerimento" per
ottenere una lettera
gratis.
Marina Fumagalli
7
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
8
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
9
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
10
Un esercizio di abbinamento realizzato con
JMatch
• Abbina il nome con gli
alimenti. (Immagini
tratte dal CD HalfBaked del 1999)
• Un esercizio di
abbinamento
realizzato con JMatch
Marina Fumagalli
11
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
12
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
13
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
14
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
15
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" (casesensitive) 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
16
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
17
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
18
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
19
Questo è tutto !
Grazie per la vostra attenzione.
Marina Fumagalli
20