LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

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

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

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.

  by Luca Balestra
App Inventor 2

Tempo di lettura/visione: 6 min

black friday weturtle

Un regalo per te!

La prima lezione di tutti i nostri corsi è gratuita! Visita i corsi che preferisci, fai il login e accedi alla lezione gratuita!

-20% sui nuovi corsi!

Approfitta della settimana del Black Friday su WeTurtle!

SCOPRI I CORSI CODICE SCONTO

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:

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.

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.
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.
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.

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.
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;
  • 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.
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;
  • 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.
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.
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.

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 TurtleTALENT su Facebook.
Creare app con App Inventor 2 - ID SOFIA: 48653


Vuoi approfondire gli argomenti trattati in questo tutorial?


Ti consigliamo il corso Creare app con App Inventor 2 - ID SOFIA: 48653

SCOPRI IL CORSO

Vuoi leggere il tutorial quando vuoi, anche offline?





Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO