TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)

Tempo di lettura tutorial Tempo di lettura/visione: 6 min

Introduzione

In questo tutorial vedremo come risolvere alcuni problemi riscontrabili nell’applicazione del gioco a quiz creata nel tutorial precedente [COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 1)].

Nello specifico tratteremo:

Risoluzione del problema relativo all’inserimento di uno spazio nella risposta
Risoluzione del problema relativo all’aggiornamento del punteggio
Risoluzione del problema relativo alla mancanza di una schermata finale

Tecnologia:

Pc
App Inventor 2
Smartphone Android
Rete Wi-Fi

Risoluzione del problema relativo all’inserimento di uno spazio nella risposta

Provando l’applicazione del gioco a quiz avrai notato che a volte la risposta corretta viene riconosciuta come risposta sbagliata, a causa della presenza di uno spazio vuoto nella risposta, inserito automaticamente dalla tastiera dello smartphone.
Per risolvere questo inconveniente basta implementare in fase di programmazione una funzione che rimuova eventuali spazi vuoti presenti prima o dopo la stringa di testo.

Per implementare questa funzione:

passa direttamente alla modalità Blocks;
trascina nella Viewer il blocco “trim”, che trovi nella sezione Text;
inserisci il blocco “trim” all’interno dell’evento “when Button_OK.Click do”, prima del blocco “uppcase”, come mostrato nella figura 1.

Figura Tutorial TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)

Figura 1

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Il corso gratuito "Collaborare a scuola con il digitale"

Un'area personalizzata con i tuoi contenuti preferiti

Una lezione di prova gratuita per ogni corso online

Dirette ed eventi dedicati agli utenti iscritti

Risoluzione del problema relativo all’aggiornamento del punteggio

Provando l’applicazione del gioco a quiz avrai notato che una volta inserita la risposta corretta e confermata con il bottone OK, il punteggio continua ad aggiornarsi ogni volta che si conferma la risposta.
Per risolvere questo inconveniente basta togliere la possibilità di continuare a confermare la stessa domanda grazie all’utilizzo di un timer: una volta inserita la risposta e confermata con il bottone OK, per un certo intervallo di tempo sarà impossibile confermare di nuovo la risposta e poi si passerà direttamente alla domanda successiva.

Innanzitutto devi aggiornare l’interfaccia grafica:

inserisci il componente invisibile Clock, che trovi nella sezione Sensors, e che permette di generare un evento dopo un intervallo di tempo prestabilito;
scegli la durata dell’intervallo inserendo il tempo in millisecondi (per esempio 3000 per un intervallo di 3 secondi) nella finestra TimerInterval della sezione Properties relativa al componente Clock1, come mostrato nella figura 2;
spunta le opzioni TimerAlwaysFires e TimerEnabled (sempre nella sezione Properties), come mostrato nella figura 3.

Figura 2

Figura 3

Passando alla fase di programmazione, devi per prima cosa aggiornare il comportamento del Button_OK, in modo che, premendo il pulsante, dopo la verifica della risposta, si attiverà l’intervallo di tempo impostato nel componente Clock1 e in questo intervallo sarà disabilitato l’uso dei pulsanti:

passa alla modalità Blocks;
trascina nella Viewer il blocco “set Clock1.TimerEnabled to”, che trovi tra le funzionalità relative al componente Clock1;
inserisci di fianco al to il blocco “true”, che trovi nella sezione Logic;
trascina nella Viewer il blocco “set Button_OK. Enabled to”, che trovi tra le funzionalità relative al componente Button_OK;
inserisci di fianco al to il blocco “false”, che trovi nella sezione Logic;
trascina nella Viewer il blocco “set Button_PROSSIMA. Enabled to”, che trovi tra le funzionalità relative al componente Button_RICOMINCIA;
inserisci di fianco al to il blocco “false”, che trovi nella sezione Logic;
inserisci tutti i blocchi fin qui creati all’interno dell’evento “when Button_OK.Click do”, come mostrato nella figura 4.

Figura 4

Per concludere la fase di programmazione, non ti resta che implementare l’evento “when Clock1.Timer do”, ovvero l’evento generato allo scadere dell’intervallo del componente Clock1:

trascina nella Viewer il blocco “when Clock1.Timer do”, che trovi tra le funzionalità relative al componente Clock1;
inserisci di fianco al do gli stessi blocchi presenti all’interno dell’evento “when Button_PROSSIMA.Click do”, come mostrato nella figura 5;
inserisci i blocchi necessari per disabilitare il timer del componente Clock1 e per abilitare di nuovo il componente Button_OK e il componente Button_PROSSIMA, come mostrato nella figura 6.

Figura 5

Figura 6

Risoluzione del problema relativo alla mancanza di una schermata finale

Provando l’applicazione del gioco a quiz avrai notato che una volta completate tutte le domande si torna automaticamente alla schermata iniziale.
Per risolvere questo inconveniente basta inserire una schermata finale dove poter leggere il punteggio ottenuto e dove poter scegliere se provare di nuovo il quiz o uscire dal gioco.

Innanzitutto devi progettare l’interfaccia grafica: al termine di questa fase, la schermata finale avrà un aspetto simile a quello di figura 7.

Figura 7

Nella modalità Designer, hai bisogno dei seguenti oggetti:

uno Screen, che inserisci premendo sul pulsante “Add screen” in alto (rinominalo con Screen2);
una Label, che trovi nella sezione User Interface (rinominalo con Label_PUNTEGGIO_FINALE, imposta 28 nella proprietà FontSize, imposta Fill Parent nella proprietà Width, scrivi PUNTEGGIO FINALE nella proprietà Text, imposta Center nella proprietà TextAlignment);
un HorizontalArrangement, che trovi nella sezione Layout (inseriscilo sotto la Label, imposta Fill Parent nella proprietà Width);
un Button, che trovi nella sezione User Interface (inseriscilo all’interno dell’HorizontalArrangement, rinominalo Button_RICOMINCIA, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, scrivi RICOMINCIA nella proprietà Text, imposta Center nella proprietà TextAlignment);
un Button, che trovi nella sezione User Interface (inseriscilo all’interno dell’HorizontalArrangement a destra del Button_RICOMINCIA, rinominalo Button_ESCI, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, scrivi ESCI nella proprietà Text, imposta Center nella proprietà TextAlignment).

Terminata la progettazione dell’interfaccia grafica della nuova schermata, non resta che aggiornare il codice relativo ai componenti dello Screen1, e scrivere il codice relativo allo Screen2 e ai componenti inseriti al suo interno (Button_RICOMINCIA e Button_ESCI).
Devi sapere infatti che quando inserisci un nuovo schermo, questo si comporta come un’applicazione separata: tutti i blocchi che inserisci nella modalità Blocks, relativo a questo schermo, non sono visibili in altri schermi.

Per aggiornare il codice relativo ai componenti inseriti nello Screen1, devi implementare una procedura che permetta di passare allo schermo Screen2 con il punteggio ottenuto nel quiz, una volta arrivati all’ultima domanda:

seleziona Screen1 in alto;
passa alla modalità Blocks;
trascina nella Viewer il blocco “to procedure do”, che trovi nella sezione Procedures, e rinominalo “to Screen2 do”;
inserisci di fianco al do il blocco “open another screen with start value”;
inserisci di fianco a screenName un blocco “text string”, che trovi nella sezione Text, e scrivi Screen2 al suo interno;
inserisci di fianco a startValue il blocco “get global punteggio”, che trovi nella sezione Variables, come mostrato nella figura 8;

Figura 8

inserisci il blocco “call Screen2”, che trovi nella sezione Procedures, all’interno dell’evento “when Button_PROSSIMA.Click do” e dell’evento “when Clock1.Timer do”, come mostrato rispettivamente nella figura 9 e nella figura 10.

Figura 9

Figura 10

Per implementare il comportamento dell’applicazione al passaggio allo Screen2:

seleziona Screen2 in alto;
trascina nella Viewer il blocco "initialize global name to", che trovi nella sezione Variables, e rinominalo “initialize global punteggio_finale";
inserisci di fianco al to il blocco "Basic Number Block", che trovi nella sezione Math, come mostrato in figura 11;

Figura 11

trascina nella Viewer il blocco "when Screen2.Initialize do", che trovi tra le funzionalità relative al componente Screen2;
inserisci di fianco al do il blocco “set global punteggio_finale to”, che trovi nella sezione Variables;
inserisci di fianco al to il blocco “get start value”, che trovi nella sezione Control;
inserisci il blocco “set Label_PUNTEGGIO_FINALE.Text to”, che trovi tra le funzionalità del componente Label_PUNTEGGIO_FINALE;
inserisci di fianco al to il blocco “join”, che trovi nella sezione Text;
completa il blocco “join” con il blocco “text string”, scrivendo “Punteggio finale:” al suo interno, e con il blocco “get global punteggio_finale”, che trovi nella sezione Variables, come mostrato nella figura 12.

Figura 12

Per implementare il comportamento dell’applicazione all’azione dell’utente di cliccare il Button_RICOMINCIA:

seleziona Screen2 in alto;
trascina nella Viewer il blocco “when Button_RICOMINCIA.Click do”, che trovi tra le funzionalità relative al componente Button_RICOMINCIA;
inserisci di fianco al do il blocco “close screen”, che trovi nella sezione Control, come mostrato nella figura 13.

Figura 13

Per implementare il comportamento dell’applicazione all’azione dell’utente di cliccare il Button_ESCI:

seleziona Screen2 in alto;
trascina nella Viewer il blocco “when Button_ESCI.Click do”, che trovi tra le funzionalità relative al componente Button_ESCI;
inserisci di fianco al do il blocco “close application”, che trovi nella sezione Control, come mostrato nella figura 14.

Figura 14

Riferimenti e links

Se vuoi maggiori informazioni o una consulenza o se vuoi far parte della famiglia We Turtle scrivi all'indirizzo email: info@weturtle.org

Per restare sempre aggiornato iscriviti alla piattaforma e segui We Turtle e TALENT su Facebook.

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Italia.

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)

In questo tutorial vedremo come risolvere alcuni problemi riscontrabili nell’applicazione del gioco a quiz creata nel tutorial precedente.

Introduzione

Risoluzione del problema relativo all’inserimento di uno spazio nella risposta

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Risoluzione del problema relativo all’aggiornamento del punteggio

Risoluzione del problema relativo alla mancanza di una schermata finale

Riferimenti e links

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio

LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

TUTORIAL - COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)

In questo tutorial vedremo come risolvere alcuni problemi riscontrabili nell’applicazione del gioco a quiz creata nel tutorial precedente.

Introduzione

Risoluzione del problema relativo all’inserimento di uno spazio nella risposta

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Risoluzione del problema relativo all’aggiornamento del punteggio

Risoluzione del problema relativo alla mancanza di una schermata finale

Riferimenti e links

Scopri i servizi di Weturtle

per il PIANO SCUOLA 4.0 del PNRR

Ottieni uno spazio di apprendimento con contenuti didattici per docenti e studenti, dove facilitare lo scambio e favorire la comunità di pratica e dove tenere sotto controllo i progressi della classe e dei docenti.

Vuoi leggere il tutorial quando vuoi, anche offline?

AUTORE

AUTORE

Scopri i corsi di formazione di WeTurtle

POTREBBE INTERESSARTI ANCHE

Vuoi fare una domanda all'autore?

GLI ALTRI UTENTI HANNO CHIESTO

ACCEDI ALLA TUA AREA RISERVATA

Username o password errati

NON SEI ANCORA REGISTRATO?

Wetruvio