Eventi: onclick
Ingresso di dati: window.prompt
| data di oggi: |
Ricordiamo che lo scopo che ci siamo fissati in queste lezioni è quello di costruire la seguente pagina: esercizi (finale)
Attualmente la nostra pagina è ancora incompleta e si trova nella seguente situazione:Esercizi sui colori (ora)
Cioè la nostra pagina a prima vista sembra che un primo quiz funzioni; ma poiché non abbiamo ancora completato alcune cose funziona ben poco.
Ma oggi siamo arrivati alla parte finale, e vedremo alcuni risultati.
Gli eventi. (onclick)
Gli eventi sono delle operazioni che il nostro alunno compie quando usa il computer.
Se egli muove il mouse, si verifica un evento.
Se preme il sinistro del mouse, si verifica un evento.
Oggi vediamo come riconoscere se il nostro alunno ha premuto il sinistro del mouse ovvero ha fatto click col sinistro del mouse e dove lo ha fatto.
La istruzione che ci consente di riconoscerlo si chiama onclick.
Esempio
onclick="verifica(1,2)"
Questa non è una istruzione Javascript ma una istruzione html.
Onclick rappresenta l'evento, quello che sta tra le virgolette rappresenta cosa deve fare il programma a seguito dell'evento che si è verificato. Nel nostro caso deve eseguire una funzione che ha il nome: verifica.
Verifica è proprio la funzione che noi abbiamo creato la volta scorsa (vedi lezione)
Di conseguenza, non appena il nostro alunno fa click col mouse viene avviata la funzione: verifica.
Qui però occorre stare attenti ai valori da passare alla funzione.
Noi abbiamo scritto:
verifica (1,2)
In questo modo quando la funzione inizia, nella variabile interna: valore1 mette il numero 1, mentre nella variabile valore2 mette il numero 2.
Ma il numero 1 di valore1 per noi rappresenta il primo quiz, mentre il numero 2 di valore2 per noi rappresenta che l'alunno ha ritenuto esatta la seconda risposta.
Quindi vuol dire che l'alunno sta svolgendo il primo quiz e ha ritenuto che il colore esatto sia proprio il rosso.
Quindi la nostra funzione parte, controlla il risultato, incrementa il punteggio di 1, in quanto la risposta è esatta, lo comunica al nostro alunno ed esce con return in attesa di altri eventi.
Dove mettere il rivelatore di eventi onclick?
Lo dobbiamo mettere nei punti che servono, cioè nei pulsanti di opzione . Ogni pulsante di opzione deve avere il suo onclick.
Apriamo ora la nostra pagina dal nome:coloriquiz.htm e andiamo in cerca delle seguenti istruzioni:
<INPUT TYPE="radio" NAME="quiz1" VALUE="valore7" > giallo<br> <INPUT TYPE="radio" NAME="quiz1" VALUE="valore8" >rosso<br> <INPUT TYPE="radio" NAME="quiz1" VALUE="valore9" >verde<br>
|
e inseriamo all'interno di ogni istruzione input una istruzione onclick in questo modo:
<INPUT TYPE="radio" NAME="quiz1" VALUE="valore7" onclick="verifica(1,1)"> giallo<br> <INPUT TYPE="radio" NAME="quiz1" VALUE="valore8" onclick="verifica(1,2)">rosso<br> <INPUT TYPE="radio" NAME="quiz1" VALUE="valore9" onclick="verifica(1,3)">verde<br>
|
A questo punto il nostro primo quiz è completo e funzionante, mancano gli altri, ma il primo funziona.Esercizi sui colori ora
La procedura per il secondo e il terzo quiz è uguale a quella del primo.
Per cui basta fare un copia e incolla del primo, e cambiare il colori.
Quando chiamiamo la funzione di verifica mettiamo verifica(2,1) ecc. per il secondo quiz e verifica(3,1) ecc. per il terzo quiz.
E inoltre per i tre input mettiamo i nomi quiz2 per il secondo e quiz3 per il terzo.
Quiz 4 -5 -6
Questi quiz apparentemente sono diversi,
|
4) - Nei disegni seguenti, quale figura rappresenta il colore grigio chiaro? (click col sinistro del mouse sulla figura esatta)
|
In realtà la istruzione è sempre una input solo che ora è di tipo testo e cioè:
<input type="text" name="quiz4" onclick="verifica(4,1)" |
Per cui basta fare un copia e incolla di una striscia colorata prendendola dalla pagina dei colori I colori
, cambiare i nomi alle caselle di testo, in quiz4, quiz5, quiz6, e inserire verifica(4,1) ecc. in base al numero di ogni quiz.Invece i quiz n° 7 e n° 8 sono leggermente diversi.
|
7) -
Scrivi il colore: colore
giallo, quando richiesto :
|
Istruzione window.prompt
E una istruzione che ci permette di fare una domanda al nostro alunno e acquisire una risposta scritta da poter valutare.
Esempio:
var a1 = window.prompt("Scrivi: 'colore giallo' ");
apre una finestra di dialogo in cui si vede scritto:
Scrivi: 'colore giallo'
Da notare che tutto quello che mettiamo tra le virgolette risulterà scritto nella finestra.
Quando poi le virgolette servono a noi, come in questo caso, nascono dei problemi.
In quanto non possiamo usare le virgolette all'interno di altre virgolette, però possiamo utilizzare l'apostrofo al posto delle virgolette, così come abbiamo fatto sopra.
Quello che l'alunno scrive viene memorizzato in una variabile scelta da noi, e cioè a1.
Questa variabile a1 ci servirà per valutare la risposta.
Questo va bene come richiesta.
Per poter valutare il risultato, cioè quello che l'alunno scrive nella casella di testo, serve una nuova funzione, che abbiamo chiamato lettera().
//immetto una scritta dalla tastiera
function lettera(a2){
if ( a2 == 7) a3 ="colore giallo";
if ( a2 == 8) a3 ="colore verde";
var a1 = window.prompt("Scrivi:'" + a3 +"'. Attento a maiuscole, minuscole e spazi! Se vedi nella finestra solo: '" + a3 + "' premi OK","");
if (a1 == a3){
verifica(a2,1);
return;
}
verifica(a2,2);
return;
}
|
Spieghiamo ora il significato di questa funzione
| istruzione | significato |
function lettera(a2){
|
Inizia una funzione di nome lettera(). La funzione ha una variabile locale di nome a2, che può assumere due valori 7 oppure 8, e ci indica il numero del quiz che sta svolgendo il nostro alunno. |
if ( a2 == 7) a3 ="colore giallo"; |
Noi al quiz 7 gli proproniamo di scrivere:"colore giallo". Per fare questo mettiamo in una variabile di nome a3 proprio la stringa che vogliamo, e cioè:"colore giallo. |
if ( a2 == 8) a3 ="colore verde"; |
Se invece si tratta del quiz n° 8 in a3 mettiamo la stringa:"colore verde" |
| var a1 = window.prompt("Scrivi:'" + a3 +"'. Attento a maiuscole, minuscole e spazi! Se vedi nella finestra solo: '" + a3 + "' premi OK",""); | Nella variabile a1 memorizziamo quello che l'alunno scrive. La variabile a3 la usiamo per indicarli le parole che deve scrivere. |
| if (a1 == a3){ | Adesso controlliamo che quello che lui ha scritto e che si trova in a1 sia proprio uguale a quello che noi abbiamo detto, e che si trova in a3. |
| verifica(a2,1); |
Se quello di sopra è vero, e cioè la risposta dell'alunno è
esatta, fruttiamo la chiamata della funzione verifica() mettendoli
all'interno il valore a2, che è il numero del
quiz e la risposta 1.
Attenzione che in esatto[7] ed esatto[8] noi avevamo messo apposta il valore 1. |
| return; | Esce dalla funzione. |
| } | Fine della funzione. |
| verifica(a2,2); | Se il programma arriva a questo punto e cioè non è uscito prima, vuol dire che la risposta è errata. Chiamiamo ora la funzione verifica e gli diamo il valore 2 oppure 3, tanto sono errati tutti e due in quanto in esatto[a2] vi abbiamo messo 1. |
| return; | usciamo dalla funzione. |
| } | la funzione è finita |
In questo caso abbiamo visto una funzione che richiama un'altra funzione.
Tutto funziona perché abbiamo messo la istruzione return nei punti giusti, proprio per evitare che il computer si blocchi.
Quiz 9 e 10
I quiz 9 e dieci sono come il primo quiz, solo che ora la domanda contiene un file audio.
Per far ascoltare un file audio è sufficiente creare una pagina avente come sottofondo sonoro un file audio. vedi pagina
Per fare questo occorre che la nostra pagina sia inserita in un frame. vedi pagina
A questo punto il nostro lavoro è terminato, la nostra pagina dovrebbe apparire così:esercizi (finale)
Indice del corso
 |
 |
 |
|
 |
 |
 |
 |
 |
 |
 |
 |
Indice di tutte le pagine del sito