Cioè la nostra pagina a prima vista sembra che un primo quiz funzioni; ma in realtà, poiché ancora il nostro programma è agli inizi, funziona ben poco.

Oggi entriamo in una parte ancora più difficile di JavaScript, ma se ci hai seguiti fin qui stai tranquillo che diventerai un bravo programmatore.

In JavaScript le funzioni sono la parte più bella, in quanto ci consentono di ottenere dei risultati sorprendenti.

Oggi mettiamo su una funzione che ci permette di valutare la risposta data ad un quiz assegnandoli il punteggio voluto.

Questa è la parte centrale del programma.

Vediamo come scrivere una funzione. La funzione, istruzione function, serve a mettere su un insieme di istruzioni che devono essere usate diverse volte nel programma.

Nel nostro caso, essendo i quiz dieci, non ha senso ripetere la scrittura di tutta una serie di istruzioni per valutare il singolo quiz, ma mettiamo su una funzione, cioè un insieme di istruzioni in grado di valutare tutti e dieci i quiz, qualunque sia il quiz oggetto di valutazione.

Vediamo prima le parti fondamentali da scrivere, cioè la sintassi, ovvero le parole chiave che non possiamo modificare.

Scriviamo:

Vediamo il significato.

Abbiamo detto che la funzione la scriviamo in questo modo:

I due numeri che vengono memorizzati l'uno nella variabile valore1 e l'altro nella variabile valore2, per noi hanno un significato particolare.

Valore1

Valore1 per noi rappresenta il numero del quiz che l'allievo sta risolvendo in un certo momento. Essendo i quiz dieci, al primo quiz diamo il numero 1, al secondo il 2, e così via, all'ultimo diamo 10.

Esempio

Valore1=3

Vuol dire che l'alunno sta svolgendo il quiz n° 3.

Il quiz n° 3 ha come risposta corretta il valore posto in esatto[3].

Contemporaneamente se flag[3] =0 vuol dire che l'allievo ancora non lo ha risolto il quiz n° 3, se invece flag[3] =1 vuol dire che il quiz è stato risolto.

Valore2

Nella variabile di nome valore2 memorizziamo la risposta che l'alunno ha dato al nostro quiz.

Però non è conserviamo la risposta, ma mettiamo il numero 1 se l'alunno ha dato come risposta esatta la prima; mettiamo il numero 2, se l'alunno ha dato come risposta esatta la seconda, mettiamo il numero 3, se l'alunno ha dato come risposta esatta la terza. 

Riepiloghiamo le variabili di un generico quiz e precisamente il quiz n° 1.

La funzione una volta scritta con i suoi comandi non viene eseguita ma resta solo memorizzata.

Quando noi decidiamo che la funzione debba essere eseguita occorre dare il comando di eseguirla.

Nel nostro caso quando l'alunno ha fatto un click su pulsante di opzione di uno dei quiz, occorre far partire immediatamente la nostra funzione di nome verifica() e far eseguire la valutazione e l'assegnazione del punteggio.

Una cosa importante nello scrivere la funzione è proprio l'uscita dalla funzione stessa.

Questa è una cosa importante, che può provocare seri danni all'utente, cioè il nostro alunno che usa il computer.

Quando si scrive una funzione occorre stare attenti ad uscire fuori della funzione altrimenti se il computer resta all'interno della stessa funzione senza uscirne il computer si blocca e fa sempre la stessa cosa senza possibilità per l'alunno di uscire fuori. I comandi della tastiera possono rimanere bloccati e l'unico modo di uscirne è premere contemporaneamente i tre tasti "Ctrl" +"Alt"+"Canc"

e terminare la applicazione con Windows.

La stessa precauzione va presa anche nei cicli for che abbiamo visto la volta scorsa.

Un modo corretto di uscire dalla funzione è questo, cioè inserire la apposita istruzione di uscita, cioè return.

Se non mettiamo un certo numero di istruzioni return all'interno della funzione, il programma perde il controllo.

L'istruzione return indica al programma di uscire dalla funzione e di tornare nel punto esatto da cui era partita la chiamata.

Detto questo entriamo nel vivo della nostra funzione che deve verificare la correttezza della risposta data dal nostro alunno.

Una istruzione molto potente per fare dei confronti o dei controlli è proprio la istruzione if.

Vediamo ora la seguente istruzione if:

if (valore1==1) flag[1]= 1;

La istruzione if si divide in due parti: una parte esegue un confronto tra due o più dati e una seconda parte esegue le cose da fare.

In pratica è come dire se avviene questo devi fare questa cosa; se invece avviene un'altra cosa devi fare questa altra. E' una decisione che si deve prendere in base a come sono andate le cose.

Nel nostro caso vogliamo mettere il valore 1 dentro la variabile flag quando l'alunno ha risolto il quiz n° 1.

Come facciamo?

Appunto scriviamo:

if (valore1==1) flag[1]= 1;

E' un modo diverso di dire la stessa cosa ma in JavaScript.

In conclusione la istruzione:

if (valore1==1) flag[1]= 1;

vuol dire: Se l'alunno ha premuto uno qualunque dei tre pulsanti di opzione relativi al primo quiz e quindi il valore di valore1 è proprio uguale ad 1, allora devi mettere anche il valore 1 nel flag[1].

Questa forma va bene quando la istruzione che bisogna eseguire nel caso che la situazione sia vera sia una sola.

Quando, invece, le istruzioni sono molte, e quindi vanno poste su più righi, bisogna utilizzare le parentesi graffe e racchiuderle.

Esempio

if (valore1==1) {

                        flag[1]= 1;

                        punteggio +=1;

                        }

In questo modo, nella ipotesi che valore1 sia proprio uguale ad uno, le istruzioni da eseguire sono due:

1) - flag[1] viene posto ad 1;

2) - la variabile punteggio viene incrementata di una unità, questo nel caso il nostro alunno abbia risposto bene.

A questo proposito notiamo che l'operatore += incrementa la variabile di una unità.

La variabile punteggio è quella che noi abbiamo scelto per dare il voto espresso in decimi al nostro alunno. Ogni quiz che egli svolge correttamente dà diritto ad incrementare di uno il contatore del punteggio, che ha proprio nome punteggio.

In questo modo le istruzioni da eseguire sono due ma possono essere anche molto di più.

A questo punto penso che siamo in grado di scrivere la nostra funzione completa.

Facciamo però prima un ragionamento.

Se il nostro alunno preme un pulsante di opzione di uno dei dieci quiz, le combinazioni sono due.

1) - Può darsi che sia la prima volta che risolve il quiz con quel numero.

In tal caso occorre sia confrontare la sua risposta con la variabile esatto[i] dove i è un contatore che tiene conto del quiz che sta svolgendo, e inoltre occorre incrementarli il punteggio aumentando di 1 la variabile punteggio.

2) - Può darsi che non sia la prima volta che risolve lo stesso quiz, sia perché abbia sbagliato o sia perché ha voluto provare di nuovo; in tal caso la valutazione la si può ripetere, però non ha diritto ad alcun punto, quindi la variabile punteggio non va incrementata.

Per comunicare immediatamente il risultato del quiz possiamo utilizzare una funzione detta window.alert().

Tale funzione non occorre che la scriviamo noi, in quanto è compresa già in Internet Explorer, noi possiamo solo dire di eseguirla quando vogliamo noi.

Window.alert() è una funzione che dà un messaggio del tipo:

Con questa funzione si blocca il programma, finché non si preme "OK".

Le parentesi sono obbligatorie. tutto quello che scriviamo nelle parente compare nella finestra di dialogo che si apre.

Vediamo come funziona.

Se all'interno delle parentesi scrivessi in questo modo:

window.alert(punteggio);

nella finestra mi apparirebbe solo il valore contenuto nella variabile che io ho chiamato punteggio.

Quindi il nostro alunno vedrebbe un numero ma non capirebbe niente.

Per cui occorre scrivere una frase completa che spieghi il numero. Se invece scrivo:

window.alert("ESATTO! - "  +"Punti: "+ punteggio +" su 10")

La frase che vede è più completa.

In pratica quello che scrivo tra virgolette sono le parole esatte così come le vedrà il nostro allievo. Quello che si trova fuori delle virgolette rappresenta una variabile, nel nostro caso punteggio, e windows scrive non punteggio, bensì il valore contenuto in punteggio, cioè il voto.

Anche in JavaScript esistono gli operatori logici, OR, AND, NOT.

Oggi vediamo l'operatore AND.

AND sappiamo che verifica la verità o la coesistenza di due o più condizioni. Il simbolo il JavaScript è doppio &&.

Esempio

La istruzione if di sopra è vera quando si verificano due condizioni contemporaneamente, cioè quelle poste tra le parentesi; e cioè:

Se (valore1==i) cioè il numero contenuto nel contatore i è proprio uguale al numero contenuto in valore1, ed inoltre anche il numero contenuto in flag[i] è proprio uguale a zero, solo allora, devi mettere flag[i] a 1, in quanto vuol dire che l'alunno ha risolto proprio quel quiz, o in maniera errata o corretta, ma lo ha risolto.

Le parentesi esterne sono obbligatorie e sono quelle della if. Quelle interne, pure obbligatorie sono quelle di ogni condizione che deve essere vera.

Osservazione

Possimo ora notare la diffrenza tra un uguale = semplice e un uguale doppio ==.

Il semple uguale = una operazione di assegnazione.

Se scrivo:

valore1=1

vuol dire che obbligo a mettere il numero 1 in valore 1, cioè è una operazione di assegnazione.

Se invece scrivo:

valore1==1

vuol dire che faccio un confronto con la if e vedo se il numero contenuto in valore1 è proprio uguale ad 1; quindi è una operazione di confronto, non di assegnazione.

Detto questo possiamo passare a scrivere per intero la nostra funzione, che può essere questa:

Anche per oggi basta. Il nostro programma di valutazione è ancora incompleto, quindi non può funzionare completamente, ma buona parte del lavoro lo abbiamo già fatto.

Anche se la pagina viene caricata ed eseguita, non vediamo alcun effetto sulla pagina che resta questa: Esercizi sui colori (ora)

Scuola Elettrica

Scuola Elettrica