TESINA D’ESAME Babini Elisa-Sapienza Jessica · Nel nostro progetto entrano in gioco entrambe le...

Babini Elisa-Sapienza Jessica

Il progetto nasce dalla collaborazione tra l’ITIS “N.Baldini” e la scuola elementare “Mesini” di Borgo Montone. Ci è stato proposto di collaborare con maestre e bambini per creare software di gioco, sulla base delle loro idee. Abbiamo lavorato insieme per la creazione di due giochi: la casa stregata e apri l’occhio; La casa stregata è stata ideata dai bambini frequentanti la classe 2°, mentre apri l’occhio dai bambini di 1°.

INTRODUZIONE AL LINGUAGGIO DI PROGRAMMAZIONE: JAVASCRIPT Abbiamo utilizzato JavaScript in quanto necessitavamo di un linguaggio di programmazione che permettesse l’inserimento di contenuti eseguibili all’interno di pagine web, questo per soddisfare la volontà dei bambini e delle maestre che volevano rendere il gioco disponibile nel sito scolastico. JavaScript è un linguaggio di programmazione interpretato e leggero, che dispone di funzionalità orientate agli oggetti. Il principale vantaggio dell’utilizzo di linguaggi “server side” (linguaggi che devono essere interpretati dal browser prima di essere eseguiti), come JavaScript, consiste nel fatto che le pagine web non sono più pagine HTML statiche, ma possono comprendere programmi che interagiscono con l’utente, controllando il browser e creando dinamicamente nuovi contenuti HTML.

SFATIAMO ALCUNI MITI:

JAVASCRIPT NON E’ JAVA Uno degli errori più comuni è quello di considerare JavaScript come una versione semplificata di Java; a parte una lieve somiglianza sintattica e il fatto che Java e JavaScript possono entrambi far girare contenuto eseguibile all’interno di pagine web i linguaggi sono completamente diversi e dispongono di caratteristiche disgiunte e complementari. Java Script può controllare il comportamento del browser e il suo contenuto, ma non può effettuare elaborazioni grafiche o gestire la rete; Java non ha alcuna possibilità di controllare il browser nella sua interezza, ma può gestire la grafica, la rete e il multithreading come un sistema operativo in miniatura.

JAVASCRIPT NON E’ SEMPLICE JavaScript viene considerato un linguaggio di script piuttosto che un linguaggio di programmazione, in quanto JavaScript non ha un proprio ambiente di sviluppo, ma viene inserito nel codice HTML della pagina web attraverso tag specifici. Generalmente si pensa che i linguaggi di script siano più semplici perché sono destinati ad essere usati da persone che non sono programmatori. Nondimeno, JavaScript sembra a un primo sguardo un linguaggio molto semplice, in realtà queste persone possono utilizzare JavaScript solo per piccole e limitate applicazioni, in quanto il linguaggio dispone di diverse caratteristiche appositamente progettate per renderlo semplice da usare da parte di chi non è un programmatore di professione, sotto questa apparente semplicità, però,

JavaScript nasconde la completezza di un linguaggio di programmazione vero e proprio; complesso come, e tal volta più, degli altri. JAVASCRIPT LATO CLIENT O LATO SERVER? JavaScript può essere classificato in due diversi ambienti: JavaScript lato client (Client Side JavaScript) e JavaScript lato server (Server Side JavaScript). La differenza consiste nel diverso “ambito” di esecuzione: si parla di lato client quando lo script viene interpretato dal browser del proprio computer, mentre per lato server si intende l’interpretazione eseguita da un computer remoto sul quale si trova lo script, in questo caso, alla tua macchina viene inviata una pagina HTML. Nel nostro progetto entrano in gioco entrambe le funzionalità, in quanto il programma può essere eseguito localmente dagli studenti della scuola, e da chiunque visiti il sito scolastico.

FUNZIONALITA’ DI JAVASCRIPT: interazione con l’utente Un’importate caratteristica di JavaScript è la possibilità di definire i cosiddetti gestori di eventi, routine eseguite in seguito al verificarsi di un particolare evento. Generalmente questi eventi sono generati dall’utente quando, ad esempio, sposta il mouse su un collegamento ipertestuale, inserisce un valore in un modulo o fa click su un pulsante. Questa prerogativa è essenziale perché la programmazione di interfacce grafiche, richiede di per se un modello a eventi. JavaScript può intraprendere qualsiasi tipo di azione in risposta a un evento generato dall’utente. Tra le più interessanti funzionalità di JavaScript ne elenchiamo alcune che danno un’ idea delle potenzialità di un linguaggio dalle caratteristiche così vaste, da rendere anche i programmi più semplici, magari lunghi solo alcune righe, in grado di produrre risultati complessi: E’ possibile modificare le immagini visualizzate tramite il tag <IMG>, permettendo l’applicazione di effetti speciali, talvolta anche molto sofisticati, quando il mouse passa sopra a una determinata area o fa click su una qualsivoglia zona della finestra del browser. JavaScript dispone di un metodo “window.setTimeout()” che permette di programmare l’esecuzione di un blocco di codice in modo che venga eseguito dopo un certo numero di millisecondi.

ALCUNI CENNI SULLA SINTASSI DI JAVASCRIPT

“key sensitive”: è un linguaggio che distingue tra maiuscole e minuscole; questo significa che le parole chiave, le variabili, i nomi delle funzioni e gli altri identificatori devono essere sempre digitati in maniera precisa, verificando la corrispondenza di lettere maiuscole e minuscole; punti e virgola opzionali: le istruzioni semplici sono generalmente seguiti da punto e

virgola, in maniera analoga a quanto accade in C, C++ e Java.In questo modo le istruzioni vengono separate le une dalle altre. In JavaScript però si possono omettere i punti e virgola quando le istruzioni vengono scritte su righe diverse; commenti: come Java, supporta sia commenti simili a quelli del linguaggio C, sia

quelli simili a quelli del C++. Tutti i caratteri tra un simbolo // e alla fine della riga

sono considerati un commento e vengono ignorati dall’interprete; inoltre, tutto quello che sta tra i caratteri /* e */ viene anch’esso trattato come un commento; identificatori: un identificatore non è altro che un nome; gli identificatori vengono

utilizzati per battezzare variabili e funzioni (entrambi sono particolari proprietà degli oggetti); parole riservate: esiste un certo numero di parole “riservate”, parole che non

possono essere utilizzate come identificatori in quanto hanno un significato particolare per il linguaggio, infatti fanno parte della sintassi stessa di JavaScript; fra queste troviamo: delete, function, null, var, while.

Realizzati da Babini Elisa e Sapienza Jessica; da un’idea dei bambini e delle maestre

della scuola Elementare “Mesini” di Borgo Montone.

LA CASA STREGATA

DESCRIZIONE I bambini hanno pensato ad un gioco che hanno chiamato: <<La casa stregata>>. Questo gioco consiste nel visualizzare a video un’immagine (disegnata e successivamente riprodotta tramite scanner dai bambini, con l’aiuto delle maestre), di una casa ricca di particolari (finestre, porta, scopa, gatto, nuvola, sole, etc.). Ognuno di questi particolari è anche un cosiddetto punto sensibile, in quanto è in grado di “trasformarsi” in un’altra immagine con un click del mouse.

Lo scopo del gioco è proprio quello di individuare tutte queste 13 aree, in modo da cambiare le immagini originali con i 13 particolari “nascosti”; tutto questo entro un certo tempo preimpostato (deciso dalle maestre). Se alla fine dei 5 minuti, il bambino avrà trovato tutte le 13 aree sensibili verrà premiato con la visualizzazione della casa illuminata (anch’essa disegnata da loro);

Se, in caso contrario, alla fine del tempo a disposizione, non si cliccato su tutte le 13 immagini, viene aperta un’altra pagina che informa “il giocatore” di quanti particolari sono stati trovati. CARATTERISTICHE AGGIUNTIVE: Per rendere più “appassionante” ed interessante il gioco, abbiamo introdotto 2 nuove proprietà:

- i suoni: ad ogni click, si sentono suoni corrispondenti alle varie immagini; questi suoni sono stati prodotti dai bambini sul tema dei vari soggetti visualizzati (es: l’urlo del fantasma, i versi dei pipistrelli, etc.).

- le storie: ad ogni clic, compare una breve filastrocca che i bambini hanno pensato, in modo da rappresentare meglio il soggetto in questione; (filastrocca sulla luna che si rompe, sull’uscita del fantasma, etc.).

INFORMAZIONI SULLA QUALITA’ DEL PRODOTTO:

Il prodotto software doveva disporre di diverse caratteristiche, le maestre infatti, necessitavano di un gioco che fosse:

di semplice utilizzo: le regole del gioco sono infatti semplici ed immediate da apprendere anche da bambini di 6 o 7 anni; semplice nello scopo: il tempo a disposizione infatti è abbastanza elevato, in modo

da permettere a bambini che hanno da poco imparato a leggere, di riuscire ad individuare tutte le aree sensibili e di leggere le rispettive storielle; di gradevole interfaccia grafica: sono stati scelti infatti dei colori che rispettano la

tonalità della casa e non sono eccessivamente appariscenti o stancanti per la vista;

APRI L’OCCHIO

DESCRIZIONE I bambini hanno pensato ad un gioco che hanno chiamato: <<Apri l’occhio>>. Questo gioco consiste nel visualizzare a video 10 disegni (prodotti dai bambini), che rappresentano scenari diversi;

al giocatore, dopo aver scelto lo scenario, verrà fatta osservare l’immagine per un certo tempo; al termine dei 30 secondi verranno visualizzati (uno dopo l’altro), 10 particolari, 5 dei quali corrispondenti all’immagine osservata e 5 estranei allo scenario; ogni volta che compare un particolare con la domanda che chiede se il particolare fa parte di quell’immagine vista fino ad un attimo prima, il bambino dovrà cliccare sul bottone con la risposta corretta: SI Qunado il particolare è presente nell’imagine; NO Quando il particolare è estraneo allo scenario osservato; immediatamente verrà poi informato il giocatore sull’esattezza o l’inesattezza della risposta data, dopodichè si passerà alla domanda del particolare successivo; alla decima ed ultima domanda si aprirà una nuova pagina che informerà l’utente sul risultato totale raggiunto, ovvero sul numero di domande alle quali si è risposto correttamente.

CARATTERISTICHE AGGIUNTIVE: Per rendere più intrigante il gioco, l’ordine dei particolari esatti e sbagliati è differente da scenario a scenario;

INFORMAZIONI SULLA QUALITA’ DEL PRODOTTO: Il prodotto software doveva disporre di diverse caratteristiche, le maestre infatti, necessitavano di un gioco che fosse:

di semplice utilizzo: le regole del gioco sono infatti semplici ed immediate da apprendere anche da bambini di 6 o 7 anni; semplice nello scopo: il tempo a disposizione infatti è abbastanza elevato, in modo

da permettere a bambini anche piccoli di memorizzare il disegno che gli viene mostrato;

di gradevole interfaccia grafica: sono infatti molto numerosi i disegni che compaiono nelle varie pagine, in modo da rendere più interessante e allegra la pagina stessa; (aspetto importante soprattutto quando si ha a che fare con dei bambini).

SEZIONE TECNICA

LA CASA STREGATA Per il gioco della casa stregata sono stati vari i problemi da risolvere dalla “rappresentazione” della casa alla sorpresa finale, ed ora li andremo a elencare:

Rappresentazione della casa; Scambio delle immagini della casa, con particolari ad esse corrispondenti; Rendere i particolari subito visibili dopo il click; Visualizzazione del testo corrispondente ad ogni particolare; Abbinare ad ogni scambio dell’immagine un suono; Fare il conteggio delle immagini scoperte dall’utente; Impostare una funzione del tempo che permette; Scambio dell’immagine della casa, con un’ immagine “premio” della casa illuminata.

RAPPRESENTAZIONE DELLA CASA

La rappresentazione della casa è stata considerata come problema in quando, ad ogni area specifica della casa “iniziale” corrisponde un preciso particolare, quindi bisognava trovare il modo di dividere la casa originale in aree di determinate dimensioni, le quali dimensioni dovevano essere rispettate anche dai particolari da andare a sostituire. Il problema è stato risolto, dividendo la casa in celle e creando una tabella con celle della dimensione voluta, e andando a creare particolari che avessero la stesa dimensione delle celle alle quali si devono andare a sostituire. Le maestre si sono occupate della divisione dell’ immagine della casa e della creazione di particolari delle dimensioni esatte, predisponendo la tabella della casa “iniziale”.

SCAMBIO DELLE IMMAGINI DELLA CASA Come già detto ad ogni cella corrispondente alla casa originale, corrisponde un particolare con dimensioni uguali alla cella nel quale andrà inserito, il problema era trovare una funzione che permettesse lo scambio delle immagini. Sapendo che ogni immagini in JavaScript ha una proprietà definita come src che permette di impostare il percorso dell’immagine da inserire, inizialmente viene inserito il percorso della cella corrispondente dell’immagine della casa originale, poi, attraverso una funzione che viene richiamata ad ogni click sulle celle della tabella, viene inserito come percorso, il percorso del particolare da andare a sostituire.

RENDERE I PARTICOLARI IMMEDIATAMENTE VISIBILI

Un fattore considerato da noi importante, avendo a disposizione un tempo definito per scoprire tutti i particolari, è, avere a disposizione, subito dopo il click, il particolare corrispondente senza dovere aspettare il caricamento delle immagini dei particolari stessi. Questo è stato messo in pratica creando un vettore nel quale sono stati inseriti i particolari, e facendo in modo che tali immagini fossero caricate insieme alla pagina, in modo che lo scambio sia pressoché istantaneo.

INSERIMENTO DEL TESTO Ad ogni particolare corrisponde una breve storia dell’ immagine che verrà mostrata, abbaio pensato di fare in modo che questo testo fosse un’immagine, in quanto era complicato pensare di andare a scambiare solo il testo, in quanto JavaScript non permette di andare a leggere da file, quindi, abbiamo chiesto alla maestra di creare il testo come un immagine, di modo che dopo aver creato il vettore contenente i testi, fosse facile scambiare il testo, trattandola come un immagine, andando ad utilizzare quindi la proprietà src.

ABBINARE AD OGNI PARTICOLARE UN SUONO

Il problema principale è stato di trovare una funzione che permettesse di inserire dei suoni in una funzione dello script, dopo aver trovato questa funzione, un altro problema è stato abbinare ad ogni particolare il suono corrispondente prodotto dai bambini, problema risolto andando a inserire i suoni in un vettore.

CONTEGGIO DELLE IMMAGINI SCOPERTE DALL’UTENTE

Avendo ritenuto utile in caso di non vittoria dell’utente, informarlo dei risultati raggiunti, abbiamo impostato un contatore per il conteggio dei particolari indovinati. Il contatore viene incrementato ad ogni scambio, ed è inserito nella funzione nella quale avviene la sostituzione.

IMPOSTARE LA FUNZIONE TEMPO Abbiamo dovuto cercare una funzione che permettesse di gestire il tempo in JavaScript, in quanto il tempo a disposizione per scoprire i particolari, come è stato già detto, è limitato. La funzione che gestisce il tempo in JavaScript, è legata al timer del PC, e il tempo impostato è in millisecondi.

SCAMBIO DELL’IMMAGINE DELLA CASA CON IL PREMIO

Alla fine del gioco, in caso di vittoria, ossia se l’utente ha trovato i 13 particolari, l’immagine della casa contenente i particolari deve essere scambiata con l’immagine della casa illuminata. Dato che non è importante avere la divisione della casa illuminata in celle, in quanto non devono essere effettuate nuove operazioni sulle varie parti che compongono la casa, abbiamo pensato di fare un collegamento con una nuova pagine nel quale è presente l’ immagine della casa illuminata.

LISTATO: la casa stregata

Scopri.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Il gioco della casa stregata</title> <script language="JavaScript1.1"> var images=new Array(13); var storie=new Array(13); var controlla=new Array(13); var conta=0 function vettore1(storie,images,controlla) { for (var i=1;i<=13;i++) { storie[i]=new Image(); storie[i].src="testo/"+"testo"+i+".jpg"; } for (var e=1;e<=13;e++) { images[e]=new Image(); images[e].src="eccolo/"+"cel"+e+"n.jpg"; } for (var j=1;j<=13;j++) { controlla[j]=0; } } function scambia(imgi,n) { document.all.music.src='sound/s'+n+'.wav'; imgi.src=images[n].src; testo.src=storie[n].src; if (controlla[n]==0) { conta=conta+1; controlla[n]=1; } if (conta==13) { document.location="premio.htm"; }

} function t_out() { if (conta<13) { st="?"+conta; document.location="peccato.htm"+st; } } </script> <bgsound src="#" id=music loop=1 autostart="true"> </head> <body onLoad="vettore1(storie,images,controlla)" bgcolor="#0000FF"> <script language="Javascript"> setTimeout("t_out()", 360000); </script> <table align="left" cellspacing="0" cellpadding="0" border="0" height="277"> <tr> <td height="98"><img src="immagini/cel1.jpg" alt="" width="137" height="119" border="0" name="cel1" onclick="scambia(cel1,1)"></td> <td height="98"><img src="immagini/cel2.jpg" alt="" width="108" height="119" border="0" name="cel2" onclick="scambia(cel2,2)"></td> <td colspan="2" height="98"><img src="immagini/cel3.jpg" alt="" width="124" height="119" border="0" name="cel3" onclick="scambia(cel3,3)"></td> <td height="98"><img src="immagini/cel4.jpg" alt="" width="154" height="119" border="0" name="cel4" onclick="scambia(cel4,4)"></td> <TD WIDTH="15" height="98"></TD> <TD ROWSPAN="3" height="277" ><IMG SRC="testo/testo.jpg" BORDER=0 name="testo" width="217" height="367"></TD> </tr> <tr> <td height="54"><img src="immagini/cel5.jpg" alt="" width="137" height="125" border="0" name="cel5" onclick="scambia(cel5,5)"></td> <td height="54"><img src="immagini/cel6.jpg" alt="" width="108" height="125" border="0" name="cel6" onclick="scambia(cel6,6)"></td> <td colspan="2" height="54"><img src="immagini/cel7.jpg" alt="" width="124" height="125" border="0" name="cel7" onclick="scambia(cel7,7)"></td> <td height="54"><img src="immagini/cel8.jpg" alt="" width="154" height="125" border="0" name="cel8" onclick="scambia(cel8,8)"></td> </tr> <tr> <td height="125"><img src="immagini/cel9.jpg" alt="" width="137" height="127" border="0" name="cel9" onclick="scambia(cel9,9)"></td> <td height="125"><img src="immagini/cel10.jpg" alt="" width="108" height="127" border="0" name="cel10" onclick="scambia(cel10,10)"></td> <td height="125"><img src="immagini/cel11.jpg" alt="" width="69" height="127" border="0" name="cel11" onclick="scambia(cel11,11)"></td> <td height="125"><img src="immagini/cel12.jpg" alt="" width="55" height="127" border="0" name="cel12" onclick="scambia(cel12,12)"></td> <td height="125"><img src="immagini/cel13.jpg" alt="" width="154" height="127" border="0" name="cel13" onclick="scambia(cel13,13)"></td> </tr> </table> </body> </html>

peccato.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Nuova pagina 1</title> <script language="Javascript"> var conta=location.search.substr(1); document.write(''); document.write(' '); document.write('HAI INDOVINATO ',conta,' PARTICOLARI!! RIPROVACI!!') </script> <STYLE> BODY{font-family:"comic sans ms"} BODY { font-size:1cm } BODY { border-color:red} </STYLe> </head> <body bgcolor="#0000FF"> <p> </p> <p> </p> <h1 align="center"><font face="Comic Sans MS"> &</font></h1> <h1 align="center"><font face="Comic Sans MS"> <font color="#FF0000"> NON HAI VINTO!!! </font></font> </h1> <h1 align="left"> <font color="#FF0000"> </font></h1> <p> </p> <p align="right"> </p> <p align="right"><a href="scopri.htm"><font face="Comic Sans MS" size="3" color="#FFFFFF">RICOMINCIA A GIOCARE</font></a></p> </body> </html>

premio.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Nuova pagina 3</title> <script language="Javascript"> </script>

</head> <body bgcolor="#0000FF"> <table cellSpacing=0 cellPadding=0 align=center border="0"> <tr> <td width="100%"><img border="0" src="Premio.bmp" width="523" height="371"></td> </tr> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p align="right"><font face="Comic Sans MS" size="3"><a href="scopri.htm"><font color="#FFFFFF">RICOMINCIA A GIOCARE</font></a></font></p> </body> </html>

LA CASA STREGATA: commento al listato 1° pagina: reg_pres.htm

In questa pagina sono presenti le istruzioni e le regole del gioco, sotto forma di testo html. Per rendere subito visibili le immagini degli scenari nella pagina successiva, è necessario caricare le immagini suddette nella memoria cache, quest’oprerazione è eseguita caricando le immagini in un vettore creato nello script. Il vettore vim viene costruito tramite un ciclo for(), questo è possibile in quanto i nomi delle immagini sono stati dati in modo da rendere possibile la creazione del vettore attraverso un ciclo; nel vettore sono inseriti i 10 scenari creati dai bambini, quindi le condizioni del ciclo saranno: quella iniziale i=1, quella finale i<=10 e l’incremento della variabile i. Per il passaggio alla pagina successiva è stato creato un collegamento ipertestuale utilizzando la proprietà “a href” nella quale è stato inserito il percorso della pagina successiva: “scenari.htm”. 2° pagina: scenari.htm

Sono state inserite le 10 immagini degli scenari, che sono immediatamente visibili in quanto sono già state caricate nella pagina precedente, ad ogni immagine viene assegnata una funzione “avanti(indice)” nel gestore dell’evento onclick, quindi quando l’utente ciccherà su una qualsiasi immagine, sarà richiamata la suddetta funzione. La funzione si occupa del passaggio alla pagina scena.htm, e fa in modo che nella pagina successiva sia possibile sapere la posizione dell’immagine cliccata all’interno del vettore in modo da poterla mostrare. Questo è realizzato mettendo dopo il percorso dell’immagine il punto interrogativo seguito dalla posizione dell’immagine scelta all’interno del record dell’immagine. 3° pagina: scena.htm

Viene mostrata l’immagine dello scenario scelto, che è disponibile per 30 secondi, dopodiché avviene il passaggio alla pagine successiva: part.htm. E’ possibile risalire all’immagine scelta attraverso l’istruzione locatio.search che va a prelevare la stringa che segue il percorso dal punto interrogativo in poi, attraverso substr(1), si elimina il punto interrogativo, attenendo, nel nostro caso la posizione dell’immagine nel record.

Per render possibile l’esecuzione della funzione che permette di “ricostruire” attraverso l’indice il percorso dell’immagine, è stata utilizzata una proprietà delle immagini: onload, che permette di richiamare un evento alla fine del caricamento di un’immagine, quindi è stat inserita un immagine del colore dello sfondo in modo che non sia visibile, ma che richiami la funzione suddetta. L’iimagine deve essere visibile per 30 secondi, quindi viene utilizzata l’istruzione SetTimeout(), dove, si specifica, la funzione da eseguire e il tempo dop il quale la funzione deve andare in esecuzione, nel nostro caso la funzione è t_out() e il tempo impostato 30 secondi. La funzione tout() si occupa del passaggio alla pagina pert.htm, e si occupa di informare la pagina successiva del numero dello scenario scekìlto dall’utente, in modo che sia possibile risalire ai particolari appartenenti allo scenario. 4° pagina: part.htm

Questa pagina si occupa di mostrare i particolari ad uno ad uno chiedendo all’utente se il particolare è presente o meno nella scena. Per svolgere questa funzione, vengono creati 2 vettori, uno contenete i particolari correlati allo scenario scelto, attraverso la ricostruzione dei percorsi di tali immagini attraverso l’istruzione locatio.search, e un secondo vettore contenente le risposte le risposte corrette. Nella pagina è presente una tabella composta da 3 righe e 1 colonna, nella prima riga è posta la domanda, nella seconda, viene mostrato il particolare, nella restante riga sono inseriti i bottoni SI e NO, per rispondere alle domande. A entrambi i bottoni è stata associata, nella proprietà onclick, una funzione, per il SI: si(con,v), per il no: no(con,v), le funzioni si occupano della creazione del vettore contenente le risposte dell’utente, si occupa di confrontare tale vettore con il vettore contenente le risposte esatte e quindi si occupa del conteggio delle risposte esatte e di informare l’utente ad ogni particolare “dell’esito” della risposta. Per informare ad ogni particolare se la risposta data è corretta o meno, vengono utilizzati degli alert, con l’apposito messaggio. Quando il contatore conta, che viene incrementato ad ogni risposta raggiunge quota 10, si passa alla pagina successiva: fine.htm, alla quale viene passato il numero deille risposte corrette. Per caricare il primo particolare, viene utilizzata la tecnica della pagina precedente, ossia si inserisce un’immagine non riconoscibile che permette l’esecuzione della funzione che inserisce il primo particolare. 5° pagina: fine.htm

In questa pagina viene visualizzato il risultato raggiunto, ossia il numero dei particolari indovinati, questo è possibile attraverso l’istruzione location.search, che estrae il numero delle risposte corrette, poi tramite document.write, viene scritto all’interno della pagina.

APRI L’OCCHIO

Nel gioco apri l’occhio i problemi da risolvere si possono così dividere:

passaggio dalla pagina con le regole alla pagina degli scenari; scelta dello scenario e passaggio alla pagina con la scena; passaggio dalla pagina con la scena alla pagina dei particolari pagina dei particolari; definizione degli errori e dei particolari che invece sono stati indovinati.

PASSAGGIO DALLA PAGINA INIZIALE A QUELLA CON GLI SCENARI

Il passaggio dalla prima pagina, alla pagina degli scenari è considerata un problema in quanto le immagini degli scenari devono essere rese disponibili subito dopo l’apertura della 2° pagina. Per rendere possibile tutto ciò è necessario avere le immagini degli scenari nella cache del computer e per far questo vengono richiamate nella prima pagina creando un vettore di immagini.

SCELTA SCENARIO E VISUALIZZAZIONE DELLA SCENA Lo scenario viene scelto mediante un click sull’immagine corrispondente, per passaggio alla pagina nella quale è contenuta la scena, è necessario conoscere il numero dello scenario scelto, in modo da poterlo visualizzare nella pagina seguente. Un altro problema nella visualizzazione della scena si trova nel fatto che per mostrare la scena, bisogna utilizzare la variabile passata dalla pagina precedente e tale operazione può essere fatta solo attraverso lo script, quindi bisognerà utilizzare un metodo che faccia partire lo script, e permetta la definizione della proprietà src, relativa all’immagine della scena scelta.

PASSAGGIO DALLA SCENA AI PARTICOLARI Nel passaggio dalla scena alla pagina dei particolari è necessario tenere conto del tempo in quanto, per decisione delle maestre e dei bambini la scena deve essere visibile per 30 secondi, dopo questi 30 secondi si passa alla pagina dei particolari

PAGINA DEI PARTICOLARI Per la pagina dei particolari è necessario trovare il modo di suddividere la pagina in 3 aree:

una prima area nella quale è inserita la domanda, una seconda area nella quale è inserita l’immagine, e una 3° area nella quale sono presenti i pulsanti per definire se il particolare appartiene o meno alla scena vista e dove è presente il messaggio di congratulazioni se la risposta è esatta e il messaggio che comunica l’errore se la risposta è sbagliata.

DEFINIRE GLI ERRORI Per rendere possibile la comunicazione del risultato, è necessario conoscere per ogni scena la soluzione. Quindi per ogni scena andrà impostato un vettore soluzione che viene caricato all’avvio della pagina e che sarà confrontato con un vettore risposte nel quale sono inserite le risposte dell’utente, in caso siano uguali, all’utente sarà visualizzato un messaggio di congratulazioni, altrimenti un messaggio che lo informa dell’errore.

LISTATO: apri l’occhio

1° pagina: reg_pres.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-Language" content="it"> <title>Home page</title> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> </head> <body bgcolor="#70C9F3"> <script language="Javascript"> var vim= new Array(10); for (i=1; i<=10; i++) { vim[i]= new Image(); path= "images/scena/a"+i+".jpg"; vim[i].src=path ; } </script> <h1><font face="Comic Sans MS" color="#FF0000">Regole e presentazione</font></h1> <p> </p> <p> </p> <p><a href="scenari.htm">Avanti</a></p> </html>

2° pagina: scenari.htm <html> <head> <meta http-equiv="Content-Language" content="it"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Scegli lo scenario con cui giocare</title> <script language="javascript"> var vim= new Array(10); for (i=1; i<=10; i++) { vim[i]= new Image(); path= "images/scena/a"+i+".jpg";

vim[i].src=path ; } function avanti(indice) { var st="?"+indice; document.location="scena.htm"+st } </script> </head> <body bgcolor="#70C9F3"> <h1 align="center"><font face="Comic Sans MS" color="#FF0000">Scegli lo scenario con cui giocare</font></h1> <p> <img border="0" src="images/scena/a1.jpg" name="a1" width="216" height="196" onclick="avanti(1)"> <img border="0" src="images/scena/a2.jpg" name="a2" width="216" height="196" onclick="avanti(2)"> <img border="0" src="images/scena/a3.jpg" name="a3" width="216" height="196" onclick="avanti(3)"> <img border="0" src="images/scena/a4.jpg" name="a4" width="216" height="196" onclick="avanti(4)"> <img border="0" src="images/scena/a5.jpg" name="a5" width="216" height="196" onclick="avanti(5)"> <img border="0" src="images/scena/a6.jpg" name="a6" width="216" height="196" onclick="avanti(6)"> <img border="0" src="images/scena/a7.jpg" name="a7" width="216" height="196" onclick="avanti(7)"> <img border="0" src="images/scena/a8.jpg" name="a8" width="216" height="196" onclick="avanti(8)"> <img border="0" src="images/scena/a9.jpg" name="a9" width="216" height="196" onclick="avanti(9)"> <img border="0" src="images/scena/a10.jpg" name="a10" width="216" height="196" onclick="avanti(10)"> </body> </html>

3° pagina: scena.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Nuova pagina 1</title> </head> <body bgcolor="#33CCFF"> <script language="javascript"> var indice=location.search.substr(1); function p(scen) { var path="images/scena/a"+indice+".jpg"; scen.src=path; } function t_out() { st="?"+indice; document.location="part.htm"+st;

} </script> <script language="Javascript"> setTimeout("t_out()",2000); </script> <table border="0" width="6%" height="319" align=center> <tr> <td width="100%" height="319"><img border="0" name="scen" src="" width="352" height="319" ></td> </tr> </table> <table border="0" width="49%"> <tr> <td width="100%"><img border="0" src="images/scena/a.jpg" width="3" onload=p(scen) height="5"></td> </tr> </table> </body> </html>

4° pagina: part.htm <html> <head> <meta http-equiv="Content-Language" content="it"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Nuova pagina 1</title> <script language="javascript"> var v=new Array(12); var indice=location.search.substr(1); var con=new Array(10); var risp=new Array(10); var conta=0; var giusti=0; for (var i=1;i<=12;i++) { v[i]= new Image(); v[i].src= "images/a"+indice+"/"+i+".jpg"; } if (indice==1) { con[1]=0; con[2]=0; con[3]=1; con[4]=0; con[5]=1; con[6]=0; con[7]=1; con[8]=1; con[9]=0; con[10]=1;} if (indice==2) {

con[1]=0; con[2]=1; con[3]=0; con[4]=0; con[5]=0; con[6]=1; con[7]=1; con[8]=0; con[9]=1; con[10]=1;} if (indice==3) { con[1]=0; con[2]=1; con[3]=1; con[4]=1; con[5]=1; con[6]=0; con[7]=0; con[8]=1; con[9]=0; con[10]=0;} if (indice==4) { con[1]=0; con[2]=1; con[3]=0; con[4]=1; con[5]=0; con[6]=1; con[7]=0; con[8]=0; con[9]=1; con[10]=1;} if (indice==5) { con[1]=1; con[2]=1; con[3]=1; con[4]=0; con[5]=0; con[6]=1; con[7]=0; con[8]=1; con[9]=0; con[10]=0;} if (indice==6) { con[1]=1; con[2]=0; con[3]=1; con[4]=0; con[5]=1; con[6]=1; con[7]=1; con[8]=0; con[9]=0; con[10]=0;} if (indice==7) { con[1]=0; con[2]=1;

con[3]=1; con[4]=1; con[5]=0; con[6]=0; con[7]=0; con[8]=0; con[9]=1; con[10]=1;} if (indice==8) { con[1]=1; con[2]=1; con[3]=0; con[4]=0; con[5]=1; con[6]=1; con[7]=1; con[8]=0; con[9]=0; con[10]=0;} if (indice==9) { con[1]=1; con[2]=0; con[3]=1; con[4]=0; con[5]=1; con[6]=0; con[7]=1; con[8]=0; con[9]=1; con[10]=0;} if (indice==10) { con[1]=1; con[2]=1; con[3]=1; con[4]=1; con[5]=0; con[6]=0; con[7]=0; con[8]=1; con[9]=0; con[10]=0;} function si(con,v) { part.src=v[conta+2].src; if (conta<10) { conta=conta+1; risp[conta]=1; } if (risp[conta]==con[conta] ) { giusti=giusti+1; alert('Bravo...il particolare appartiene alla scena!!') } else {alert('Hai sbagliato...il particolare non appartiene alla scena vista!!!')} if (conta==10) { st="?"+giusti;

</body> </html>

5° pagina: fine.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Nuova pagina 1</title> <script language="Javascript"> var st=location.search.substr(1) if (st=="10") { document.write('BRAVO!!!! HAI VINTO!!!!')} if (st=="0") {document.write('Non hai indovinato nessun particolare!!!')} else{document.write('Hai indovinato ',st,' particolari!!!')} </script> <STYLE> BODY{font-family:"comic sans ms"} BODY { font-size:1cm } BODY { border-color:red} </STYLe> </head> <body bgcolor="#70C9F3"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p align="right"><b><a href="Reg_pres.htm"><font face="Comic Sans MS" size="2" color="#FFFFFF">RICOMINCIA A GIOCARE</font></a></b></p> </body> </html>

LA CASA STREGATA: commento al listato

1° pagina: reg_pres.htm

In questa pagina sono presenti le istruzioni e le regole del gioco, sotto forma di testo html. Per rendere subito visibili le immagini degli scenari nella pagina successiva, è necessario caricare le immagini suddette nella memoria cache, quest’oprerazione è eseguita caricando le immagini in un vettore creato nello script. Il vettore vim viene costruito tramite un ciclo for(), questo è possibile in quanto i nomi delle immagini sono stati dati in modo da rendere possibile la creazione del vettore attraverso un ciclo; nel vettore sono inseriti i 10 scenari creati dai bambini, quindi le condizioni del ciclo saranno: quella iniziale i=1, quella finale i<=10 e l’incremento della variabile i. Per il passaggio alla pagina successiva è stato creato un collegamento ipertestuale utilizzando la proprietà “ a href” nella quale è stato inserito il percorso della pagina successiva: “scenari.htm”. 2° pagina: scenari.htm

Sono state inserite le 10 immagini degli scenari, che sono immediatamente visibili in quanto sono già state caricate nella pagina precedente, ad ogni immagine viene assegnata una funzione “avanti(indice)” nel gestore dell’evento onclick, quindi quando l’utente ciccherà su una qualsiasi immagine, sarà richiamata la suddetta funzione. La funzione si occupa del passaggio alla pagina scena.htm, e fa in modo che nella pagina successiva sia possibile sapere la posizione dell’immagine cliccata all’interno del vettore in modo da poterla mostrare. Questo è realizzato mettendo dopo il percorso dell’immagine il punto interrogativo seguito dalla posizione dell’immagine scelta all’interno del record dell’immagine. 3° pagina: scena.htm

Viene mostrata l’immagine dello scenario scelto, che è disponibile per 30 secondi, dopodiché avviene il passaggio alla pagine successiva: part.htm. E’ possibile risalire all’immagine scelta attraverso l’istruzione locatio.search che va a prelevare la stringa che segue il percorso dal punto interrogativo in poi, attraverso substr(1), si elimina il punto interrogativo, attenendo, nel nostro caso la posizione dell’immagine nel record.

Per render possibile l’esecuzione della funzione che permette di “ricostruire” attraverso l’indice il percorso dell’immagine, è stata utilizzata una proprietà delle immagini: onload, che permette di richiamare un evento alla fine del caricamento di un’immagine, quindi è stat inserita un immagine del colore dello sfondo in modo che non sia visibile, ma che richiami la funzione suddetta. L’iimagine deve essere visibile per 30 secondi, quindi viene utilizzata l’istruzione SetTimeout(), dove, si specifica, la funzione da eseguire e il tempo dop il quale la funzione deve andare in esecuzione, nel nostro caso la funzione è t_out() e il tempo impostato 30 secondi. La funzione tout() si occupa del passaggio alla pagina pert.htm, e si occupa di informare la pagina successiva del numero dello scenario scekìlto dall’utente, in modo che sia possibile risalire ai particolari appartenenti allo scenario. 4° pagina: part.htm

Questa pagina si occupa di mostrare i particolari ad uno ad uno chiedendo all’utente se il particolare è presente o meno nella scena. Per svolgere questa funzione, vengono creati 2 vettori, uno contenete i particolari correlati allo scenario scelto, attraverso la ricostruzione dei percorsi di tali immagini attraverso l’istruzione locatio.search, e un secondo vettore contenente le risposte le risposte corrette. Nella pagina è presente una tabella composta da 3 righe e 1 colonna, nella prima riga è posta la domanda, nella seconda, viene mostrato il particolare, nella restante riga sono inseriti i bottoni SI e NO, per rispondere alle domande. A entrambi i bottoni è stata associata, nella proprietà onclick, una funzione, per il SI: si(con,v), per il no: no(con,v), le funzioni si occupano della creazione del vettore contenente le risposte dell’utente, si occupa di confrontare tale vettore con il vettore contenente le risposte esatte e quindi si occupa del conteggio delle risposte esatte e di informare l’utente ad ogni particolare “dell’esito” della risposta. Per informare ad ogni particolare se la risposta data è corretta o meno, vengono utilizzati degli alert, con l’apposito messaggio. Quando il contatore conta, che viene incrementato ad ogni risposta raggiunge quota 10, si passa alla pagina successiva: fine.htm, alla quale viene passato il numero deille risposte corrette. Per caricare il primo particolare, viene utilizzata la tecnica della pagina precedente, ossia si inserisce un’immagine non riconoscibile che permette l’esecuzione della funzione che inserisce il primo particolare. 5° pagina: fine.htm

In questa pagina viene visualizzato il risultato raggiunto, ossia il numero dei particolari indovinati, questo è possibile attraverso l’istruzione location.search, che estrae il numero delle risposte corrette, poi tramite document.write, viene scritto all’interno della pagina.

MANUALE PER L’UTENTE

Per facilitare l’utilizzo del prodotto software, entrambi i giochi riservano una pagina alle

istruzioni; tali istruzioni sono scritte in modo semplice e scorrevole in modo che possano essere utilizzate anche da bambini; Per l’utilizzo di entrambi i prodotti è sufficiente quindi attenersi alle regole descritte nelle

prime pagine; questo sia che si utilizzi il prodotto in locale, sia che si giochi collegandosi ad internet al sito della scuola elementare <<Mesini>>; Per una visione più nitida delle immagini si consiglia di impostare i colori dello schermo

a 16,8 milioni di colori; I prodotti dispongono di assistenti all’utenza in grado di fornire assistenza qualora fosse

necessario a chi riscontra un qualsiasi tipo di problema: Babini Elisa << [email protected] >> Sapienza Jessica << [email protected] t >>

Riteniamo utile imparare ad utilizzare linguaggi di programmazione non trattati in ambito scolastico per renderci conto di cosa voglia dire lavorare con l’ informatica, avere quindi a che fare con nuovi linguaggi. Nel nostro caso è stato indispensabile studiare JavaScript a partire dai concetti base fino alla sintassi della programmazione pur rendendoci conto che l’unico modo per imparare veramente un linguaggio di programmazione è cominciare a scrivere dei programmi.

Si ringraziano per la disponibilità e la collaborazione il prof.re Zoli Paolo dell’ITIS e la maestra Claudia della scuola elementare Mesini.

TESINA D’ESAME Babini Elisa-Sapienza Jessica · Nel nostro progetto entrano in gioco entrambe le...

Documents

Transcript of TESINA D’ESAME Babini Elisa-Sapienza Jessica · Nel nostro progetto entrano in gioco entrambe le...