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

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.

  by Luca Balestra
App Inventor 2

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:

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

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

Riferimenti e links

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!

Vuoi leggere il tutorial quando vuoi, anche offline?





Hai letto la lezione? Che cosa ne pensi? Lascia un commento qui sotto!