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

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

Introduzione

In questo tutorial vedremo come modificare l’applicazione del gioco a quiz creata nel tutorial precedente [COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)] per trasformarla in un gioco a quiz a risposta multipla.

Nello specifico tratteremo:

Modifiche dell’interfaccia grafica
Modifiche del codice di programmazione

Tecnologie utilizzate:

Pc
App Inventor 2
Smartphone Android con installata l'applicazione MIT AI2 Companion
Rete Wi-Fi

Modifiche dell’interfaccia grafica

Provando l’applicazione del gioco a quiz avrai notato che è formata da domande a risposta aperta: il compito dell’utente è quello di cercare di inserire la risposta corretta all’interno del componente TextBox.
Per trasformare l’applicazione in un quiz a risposta multipla basta sostituire il componente TextBox con il componente ListPicker, un pulsante che, quando viene cliccato, mostra all’utente una lista di testi (in questo caso una lista di possibili risposte) tra cui scegliere.

Per prima cosa devi quindi aggiornare l’interfaccia grafica: al termine di questa fase, la schermata avrà un aspetto simile a quello di figura 1.
Nella modalità Designer:

elimina il componente TextBox1, selezionandolo nella sezione Components e poi cliccando sul pulsante Delete in basso;
inserisci un componente HorizontalArrangement, che trovi nella sezione Layout (inseriscilo sopra il componente HorizontalArrangement già presente, imposta Fill Parent nella proprietà Width);
inserisci un componente ListPicker, che trovi nella sezione User Interface (inseriscilo all’interno del nuovo componente HorizontalArrangement, rinominalo ListPicker_SCELTA_RISPOSTA, imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width, scrivi SCEGLI LA RISPOSTA nella proprietà Text, imposta Center nella proprietà TextAlignment).

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

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

Modifiche del codice di programmazione

Terminata la modifica dell’interfaccia grafica, non resta che scrivere il codice per definire il comportamento dei nuovi componenti inseriti e revisionare alcune parti di codice per aggiornare il comportamento dei vecchi componenti.
Per prima cosa devi creare una lista principale che tenga in memoria una serie di liste (il numero di queste liste deve corrispondere al numero delle domande che compongono il quiz), che a loro volta tengono in memoria una serie di elementi (il numero di questi elementi deve corrispondere al numero delle possibili risposte per ogni domanda).

Nella modalità Blocks (figura 2):

trascina nella Viewer il blocco "initialize global name to", che trovi nella sezione Variables, e rinominalo “initialize global lista_possibili_risposte";
inserisci di fianco al to il blocco “make a list”, che trovi nella sezione Lists, e, cliccando sull’ingranaggio in alto a sinistra del blocco, trascina altri item sotto i due già presenti fino ad arrivare al numero di domande che compongono il quiz (in questo caso la lista principale è composta da tre item perché il quiz è composto da tre domande);
per ogni item della lista principale, inserisci un blocco “make a list”, che trovi nella sezione Lists, formato a sua volta da tre item (in questo caso ogni domanda del quiz ha tre possibili risposte tra cui scegliere);
completa il blocco “make a list” con dei blocchi “text string”, che trovi nella sezione Text, scrivendo al loro interno delle possibili risposte (non dimenticare di inserire la risposta corretta tra le possibili risposte).

Figura 2

Per implementare il comportamento del nuovo componente ListPicker_SCELTA_RISPOSTA prima che venga premuto dall’utente (figura 3):

trascina nella Viewer il blocco “When ListPicker_SCELTA_RISPOSTA.BeforePicking do”, che trovi tra le funzionalità del componente ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al do il blocco “set ListPicker_SCELTA_RISPOSTA.Elements to”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al to il blocco “select list item”, che trovi nella sezione Lists;
completa il blocco “select list item” con il blocco “get global lista_possibili_risposte” (inserendolo di fianco a list), che trovi nella sezione Variables, e con il blocco “get global indice” (inserendolo di fianco a index), che trovi sempre nella sezione Variables.

Figura 3

Per implementare il comportamento del nuovo componente ListPicker_SCELTA_RISPOSTA dopo essere stato premuto dall’utente (figura 4):

trascina nella Viewer il blocco “When ListPicker_SCELTA_RISPOSTA.AfterPicking do”, che trovi tra le funzionalità del componente ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al do il blocco “set ListPicker_SCELTA_RISPOSTA.Text to”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al to il blocco “ListPicker_SCELTA_RISPOSTA.Selection”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA.

Figura 4

Per aggiornare il comportamento del vecchio componente Button_OK (figura 5):

all’interno dell’evento “when Button_OK.Click”, elimina il blocco “TextBox1.Text”;
inserisci di fianco al blocco “upcase” il blocco “ListPicker_SCELTA_RISPOSTA.Text”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA.

Figura 5

Per aggiornare il comportamento del vecchio componente Button_PROSSIMA (figura 6):

all’interno dell’evento “when Button_PROSSIMA.Click”, elimina il blocco “TextBox1.Text” e il blocco “text string”;
inserisci il blocco “set ListPicker_SCELTA_RISPOSTA.Text to”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al to il blocco “text string”, che trovi nella sezione Text, scrivendo “SCEGLI LA RISPOSTA” al suo interno.

Figura 6

Per aggiornare il comportamento del vecchio componente Clock1 (figura 7):

all’interno dell’evento “when Clock1.Timer”, elimina il blocco “TextBox1.Text” e il blocco “text string”;
inserisci il blocco “set ListPicker_SCELTA_RISPOSTA.Text to”, che trovi tra le funzionalità del blocco ListPicker_SCELTA_RISPOSTA;
inserisci di fianco al to il blocco “text string”, che trovi nella sezione Text, scrivendo “SCEGLI LA RISPOSTA” al suo interno.

Figura 7

Riferimenti e links

A questo link puoi scaricare il file del gioco creato da noi.

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, segui We Turtle e TALENT su Facebook e iscriviti al nostro canale Youtube!

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

In questo tutorial vedremo come modificare l’applicazione del gioco a quiz creata nel tutorial precedente [COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)] per trasformarla in un gioco a quiz a risposta multipla.

Introduzione

Modifiche dell’interfaccia grafica

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Modifiche del codice di programmazione

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

In questo tutorial vedremo come modificare l’applicazione del gioco a quiz creata nel tutorial precedente [COSTRUIRE UN GIOCO A QUIZ CON APP INVENTOR (pt. 2)] per trasformarla in un gioco a quiz a risposta multipla.

Introduzione

Modifiche dell’interfaccia grafica

Registrati a WeTurtle per accedere ai vantaggi, è gratis!

La community di docenti e educatori ti offre:

Modifiche del codice di programmazione

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