Quiz di astronomia con App Inventor

Quiz di astronomia con App Inventor

In questa lezione realizzeremo un semplicissimo quiz di astronomia con App Inventor.

Ipotizziamo, così come abbiamo fatto con Scratch, una serie di domande:

1) Di che cosa sono fatti gli anelli di Saturno?
A) Di nuvole
B) Di pietre
C) Di latte
D) Di carta

Risposta corretta: B


2) Quale di questi è il nome di un cratere lunare?
A) Leopardi
B) Copernico
C) Mozart
D) Beethoven

Risposta corretta: B


3) Quale pianeta veniva osservato dalla sonda Messenger?
A) Terra
B) Giove
C) Marte
D) Mercurio

Risposta corretta: D

Sviluppo layout – Quiz di astronomia con App Inventor

quiz astronomia

Seguiamo queste impostazioni per ogni elemento che vedete in Componenti utilizzati, come da figura in alto.

Per il titolo, impostiamo nel pannello proprietà:

– Testo: Benvenuti, oggi facciamo un quiz di astronomia!

– DimensioneTesto: 18.

Questo elemento rappresenta il titolo dell’app, cioè il messaggio di benvenuto: ‘Benvenuto, oggi facciamo un quiz di astronomia‘.


Immagine
,
impostiamo nel pannello proprietà:

– Altezza: 250.

– Immagine: impostate un’immagine a piacere.


Inizia
, impostiamo nel pannello proprietà:

– ColoreSfondo: blu.

– DimensioneTesto: 20.

– Sagoma: arrotondata.

– ColoreTesto: bianco.

Quando clicchiamo su questo pulsante, si inizierà a giocare e quindi verranno poste le domande.

Per l’etichetta domanda impostiamo nel pannello proprietà:

– ColoreSfondo: blu.

– Testo: cancellatelo.

– Visibile: togliete il segno di spunta.

Quest’etichetta servirà a far visualizzare le domande a partire dalla prima.

Per l’elemento a scorrimento risposta impostiamo nel pannello proprietà:

– ElementiDaStringa: A,B,C,D.

– Visibile: togliete il segno di spunta.

Quest’etichetta permetterà di scegliere una riposta tra le 4 opzioni: A,B,C,D.

Il pulsante Risposta ha le seguenti proprietà:

– DimensioneTesto: 16.

– ColoreSfondo: giallo.

– Sagoma: arrotondata.

– Testo: Verifica

Questo pulsante consente al clic di verificare la correttezza della risposta data.

Il pulsante Successiva ha le seguenti proprietà:

– DimensioneTesto: 16.

– ColoreSfondo: magenta.

– Sagoma: arrotondata.

– Testo: Successiva.

– Visibile: togliete il segno di spunta.

Questo pulsante serve ad andare alla domanda successiva.

Per l’etichetta Punteggio impostiamo nel pannello proprietà:

DimensioneTesto: 18.

– Testo: Cancellatelo.

– Visibile: togliete il segno di spunta.

Quest’etichetta servirà a far visualizzare il punteggio di volta in volta raggiunto.

Per l’etichetta RispostaEsatta impostiamo nel pannello proprietà:

– ColoreSfondo: blu.

– Testo: cancellatelo.

– Visibile: togliete il segno di spunta.

Quest’etichetta servirà a far visualizzare il messaggio, se la risposta è corretta oppure no.


Programmiamo la nostra app sul quiz di astronomia

Per programmare questo quiz di astronomia con App Inventor, seguiremo questi passaggi.

Innanzitutto inizializziamo le variabili globali: punteggio e indice.

Dopo creiamo 3 liste:

– Una per le domande

– Una per le risposte

– L’ultima per le immagini.

lise app inventor

Al primo elemento di domande corrisponde il primo elemento di risposte ed il primo elemento di immagini. Così con le altre domande.

Creiamo una procedura per le domande.

domande

Programmiamo poi i blocchi di codice al verificarsi dell’evento .cliccato sul pulsante inizia .

quando inicia è cliccato app inventor

Programmiamo anche i blocchi di codice al verificarsi dell’evento .cliccato sul pulsante risposta.

pulsanti app Inventor

Infine programmiamo i blocchi di codice da inserire all’interno dell’evento .cliccato sul pulsante successiva.

Abbiamo terminato la nostra semplice app su un quiz di astronomia con App inventor.

Provate a fare quiz più lunghi e su altri temi.

Alcuni link utili

Gioco indovina numero con App Inventor

App sugli angoli con App Inventor

App sugli angoli

App sugli angoli

In questo tutorial creiamo un’app sugli angoli, utilizzando App Inventor.

Realizzeremo dunque un programma che controlli se un angolo è nullo, retto, piatto, giro o qualsiasi.

Un angolo è:

Retto:  se la misura dell’ampiezza in gradi è 90.

Piatto: se la misura dell’ampiezza in gradi è 180.

Giro: se la misura dell’ampiezza in gradi è 360.

App sugli angoli con App Inventor

Faremo in modo di far inserire un valore all’utente, tramite una casella di testo e poi, con un pulsante, verifichiamo semplicemente se l’angolo è nullo, retto, piatto, giro o qualsiasi.

Andiamo dunque su progetti e creiamo un nuovo progetto di nome angoli.

layout app sugli angoli

Creazione del layout

Innanzitutto impostiamo per lo screen1 uno sfondo grigio chiaro.

App sugli angoli – Etichetta per il Titolo

Dopo andiamo sul pannello a destra Impaginazione e scegliamo un elemento di DisposizioneOrizzontale.

Trasciniamo questo elemento nel visualizzatore ed impostiamo la larghezza in modo da riempire il contenitore e impostiamo anche l’AllineamentoOrizzontale al centro.

Disposizione Orizzontale

Adesso andiamo nel pannello a destra, Interfaccia Utente, e trasciniamo l’elemento etichetta all’interno di DisposizioneOrizzontale1, ci servirà per mettere il titolo della nostra app.

Titolo App

Quindi per l’etichetta, che rinominiamo titolo, impostiamo le seguenti proprietà, nel pannello a destra:

Grassetto: mettete il segno di spunta.

DimensioneTesto: 20.

Testo: App sugli angoli.

ColoreTesto: blu scuro.

App sugli angoli – Casella di testo e pulsante

Dopo andiamo nuovamente sul pannello a destra Impaginazione e scegliamo un elemento di DisposizioneOrizzontale e lo posizioniamo sotto il precedente. Impostiamo la larghezza in modo da riempire il contenitore, l’AllineamentoVerticale e l’AllineamentoOrizzontale al centro.

Poi, andando su Interfaccia Utente, trasciniamo l’elemento casella di testo all’interno di DisposizioneOrizzontale2, ci servirà per far inserire il valore dell’angolo. Rinominiamo dunque questo elemento con il nome di angolo.

Accanto trasciniamo anche il pulsante di valutazione che chiameremo valuta.

casella di testo angolo

Per la casella di testo di nome angolo, impostiamo le seguenti proprietà, nel pannello a destra:

Suggerimento: cancellate il contenuto.

DimensioneTesto: 18;

Per il pulsante che abbiamo rinominato valuta, impostiamo le seguenti proprietà, nel pannello a destra:

ColoreSfondo: magenta.

DimensioneTesto: 18;

Testo: Valuta.

App sugli angoli – Etichetta per il risultato

Quindi adesso andiamo nuovamente sul pannello a destra, Impaginazione e scegliamo un altro elemento di DisposizioneOrizzontale e lo posizioniamo sotto il precedente.

All’interno inseriamo un’etichetta andando su Interfaccia Utente, rinominiamo questa etichetta risultato.

Impostiamo le seguenti proprietà, nel pannello a destra:

DimensioneTesto: 20.

Testo: cancellatelo.

ColoreSfondo: giallo.

Programmazione dell’App

Adesso andiamo nella sezione Blocchi.

evento cliccato

Dopo andiamo su controllo e scegliamo la struttura se allora altrimenti.

Impostiamo come prima condizione: se l’angolo è inferiore a 0 oppure maggiore di 360 e visualizziamo nell’etichetta la frase ‘Valori non validi‘.

controllo dell'input

Dopo aggiungiamo un blocco altrimenti se come da figura in basso.

altrimenti se

In questo modo inseriamo la seconda condizione:

Se l’angolo è uguale a 0, allora visualizziamo la frase “Angolo nullo”.

angolo nullo

Continuiamo ad inserire le altre condizioni e poi inseriamo tutto il codice nell’evento ‘per sempre quando valuta .Cliccato‘:

script app sugli angoli

Avviando l’Emulatore, da Connetti – Emulatore, si visualizzerà una schermata come questa:

app-angoli

Inserendo ad esempio il valore 90, si ha:

Provate ad inserire altri valori.

Potete personalizzare quest’app sugli angoli come meglio credete, ad esempio facendo inserire il valore dall’utente e verificare poi se la risposta è corretta.

Alcuni link utili

Gioco indovina numero con App Inventor

Quiz di astronomia con App Inventor