Tutorial flash #2 - MiniQuiz

Benvenuti!!

Ecco l'immagine con tutto il codice per avere una panoramica generale e adesso andremo a vedere nello specifico cosa fare. La richiesta questa volta era per creare un piccolo mini quiz e con la scusa esercitarsi con i vari componenti di AppInventor, anche io all'inizio facevo tante prove con piccoli progettini per capire come funzionavano i vari componenti.

Passiamo quindi a salutare M@x@M per lo spunto che mi ha dato e anche per la fantasia del suo nick name 😋 e vediamo come ho ragionato io ed affrontato il problema, useremo sempre any component perché si presta bene quando dobbiamo ripetere più volte la stessa azione ma per componenti diversi e poi vedremo anche la versione semplificata ma anche più lunga nel codice (coming soon).

Come sempre vi invito anche a trovare la vostra strada e il vostro modo di ragionare , sperimentando i vari blocchi e le varie strade, anche gli errori hanno il loro valore.

Prima di tutto analizziamo le variabili:

• CINTURE è una variabile dichiarata come una lista e inizializzata con tutti i nomi relativi alle cinture e i colori che si usano nel jiujitsu 
• LISTA LABEL come dice il nome è una lista e contiene tutti i componenti delle varie label che abbiamo usato per salvare il nome delle cinture, si trova come ultimo blocco tra quelli delle label (ma come tipologia in tutti i blocchi) e serve ad indicare a AppInventor quale componente vogliamo usare , nel nostro caso nei vari blocchi any component.
• LISTA TEXTBOX come sopra contiene tutti i componenti textbox che abbiamo usato nel nostro progetto così da poterli richiamare quando vogliamo.
• LISTA MESCOLATA è una lista d'appoggio che useremo per mescolare i vari nomi delle cinture, essendo un quiz dovremo poi ordinarle noi.
• INDEX è un indice generico che useremo nella procedure per mescolare.

Vediamo velocemente i funzionamento e poi passiamo nello specifico.

La grafica volutamente spartana prevede l'inserimento di 10 label e 10 textbox, le prime avranno al loro interno il nome delle cinture mentre le seconde serviranno per inserire un numero che indica l'ordine di importanza delle cinture, dalla meno importante (la bianca) a quella più importante (la nera). Scopo del quiz ordinare i livelli inserendo il numerino corretto nella textbox.

Il tutto è stato organizzato in degli arrangement e alla fine abbiamo due pulsanti, uno per mescolare e l'altro per verificare le varie risposte.

 


La prima foto presenta la grafica finale, mentre la seconda fa vedere la struttura (impariamo a leggerla per avere tutte le informazioni possibili) , nello screen1 ho inserito un vertical arrangement che riceverà poi 10 horizontal in cui andremo ad inserire , in orizzontale quindi sullo stesso livello , una label e una textbox; vi lascio alla visone delle impostazioni che ho utilizzato e magari a provare quelle che vi piacciono di più per l'effetto finale.

Da notare come l'albero della struttura si apre e lo spostamento verso destra ci fa capir che quel componente è compre all'interno di quello un gradino più a sinistra o sullo stesso livello se si trovano precisamente nella stessa colonna. Ho posizionato poi l'allineamento orizzontale verso sinistra per ordinare tutto verso il bordo sinistro. Per le misure ho lascito quasi tutto automatico così da poter permettere ai vari componenti di adattarsi quando mescoleremo il tutto. Non è detto che questa soluzione sia sempre valida anzi spesso utilizzo i valori in percentuale.

 
 

La prima cosa che andremo a fare mescolare i vari componenti label affinché chi prova il quiz debba poi ordinarli nel modo corretto ed useremo una lista di supporto, con questo metodo non andremo a mescolare spostando i componenti ma solamente i nomi che sono all'interno delle varie label usando la lista che abbiamo creato all'inizio.

Per prendere dei valori random e posizionarli nelle varie label ho pensato di riempire una lista con i numeri da 1 a 10 in ordine casuale e utilizzare questi valori per andare a prendere nella lista con i nomi delle cinture (che resta ordinata e sarà essenziale per la verifica finale) il valore che mi interessa e sostituirlo nel testo della label, effetto finale sembrerà di mescolare le label.

Per ora consideriamo solo il blocco for each , ci permette per ogni number quindi ogni numero (possiamo anche modificare questo nome per rendere più facile la visualizzazione, basta cliccarci sopra) che va da 1 from fino a to e in questo caso come valore ho usato proprio la lunghezza della lista CINTURE non perché fosse necessario ma perché spesso legarci ad un termine che può variare (pensiamo di allungare la lista aggiungendo altri elementi) mi permette di non andare a modificare il codice perché si modificherà in automatico. Questo blocco ci permette di decidere anche di quanti elementi alla volta muoverci nella nostra valutazione infatti  by impostato ad 1 ci permette di avanzare di un' unità alla volta , risultato finale per 10 volte quel blocco farà quello che andremo a scrivere all'interno e number porterà il conto di questi passaggi e non solo ...

Entrando nel vivo del blocco andiamo subito a impostare la variabile INDEX riempiendola con un valore casale tra 1 e 10 , subito sotto il blocco while test do  ci permette di controllare se questo numero è già presente nella nostra LISTA MESCOLATA che all'inizio del nostro codice avevamo preventivamente cancellato portandola ad empty list, tutto ciò avverrà alla pressione del pulsante MESCOLA. A cosa serve il blocco while ? Mentre controlla che se il nostro INDEX appena sfornato è già presente all'interno della lista mescolata cosa farà? Se è vero, per evitare doppioni, andrà a lanciare nuovamente il blocco random per salvare un nuovo valore nella variabile, e tutto ciò continuerà mentre questo valore è presente nella lista. Quindi se è presente continua ad estrarre numeri altrimenti esce da questo loop e aggiunge il valore alla lista MESCOLA ( add items to list ).

Tutto questo ripetuto per 10 volte ci permetterà di avere una lista mescolata di numeri che vanno da 1 a 10.

Il blocco subito prima quello appena spiegato è molto semplice , for each item per ogni elemento nella lista delle textbox preleva questo valore (che possiamo vedere come il nome del componente) e lo passa al blocco set TextBox.text che andrà a modificare il valore testuale della textbox ripulendola per una nuova partita. Per ogni elemento gli passa il nome e AppInventor sa a quale componente deve andare a modificare il valore del testo, valore fondamentale per far funziona i blocchi any.

Adesso vedremo l'ultimo pezzo di questo prima parte di codice l'ultimo for each che serve per ripulire tutte le textbox prima di una nuova prova, questo blocco per ogni come avrete capito insieme a blocchi any component riescono a snellire e velocizzare tantissimo il codice; la procedura che andremo a vedere è molto più semplice di quanto possa sembrare basta solo avere ben in mente come sono stati salvati i dati e come funzionano i blocchi per prendere i dati dalle liste.

Poniamo l'attenzione solo sul blocco finale e vediamo insieme cosa abbiamo fatto, le vignette ci faranno vedere il valore di ogni blocco, il for each preleva ad uno ad uno gli elementi dalla LISTA LABEL (quelli dove abbiamo messo il "nome" di ogni label) e li passa tramite il blocco item nella posizione of component per dirgli, ehi guarda che adesso devi cambiare il valore del testo di questa label (il cui nome è item) e lo devi sostituire con il valore che inserisco in to. 

Il "nome" della label ad ogni giro lo prenderà dalla lista LISTA LABEL è la prima vignetta in alto e corrisponde a quel codice indicibile com.google.appinventor.components.runtime.Label@7c3a16d , ogni nome è separato da una virgola e sono inseriti nelle parentesi quadre perché così vengono identificate le liste in AppInventor , a lui piace così 😂. Questo nome indicibile cambierà ad ogni giro perché lo dovrà fare per ogni componente nella lista quindi ad ogni giro item avrà un valore differente.

Scelto il componente da modificare gli dobbiamo dire cosa scrivere nel testo nella label e lo facciamo andando a prelevare questo valore da una lista , nello specifico CINTURE, e usiamo il blocco delle liste select list item che ha bisogno di sapere due cose fondamentali dove andare a prendere il valore che cerchiamo quindi il nome della lista e la posizione nella lista dove andare a pescare il termine corretto. Il primo passaggio è banale il secondo un pò meno, è un index quindi un numero per cui gli altri due blocchi celesti che seguono select list e index in list se li useremo bene dovranno dare come risultato un numero. All'inizio noi abbiamo creato una lista di numeri mescolati (vignetta rosa sulla destra) e sarà proprio un elemento di questa lista che mi dirà quale testo assegnare alla label facendo in modo di non prendere un elenco ordinato ma mischiato. Ok, ma se mi serve un numero perché sto usando nuovamente la lista LISTA LABEL che in vece ha quei nomi strani al suo interno? In realtà questo blocco index in list thing mi da un numero e nella precisione la posizione di item nella lista LISTA LABEL , un giro di blocchi che può sembrare inutile ma in realtà sfrutta il susseguirsi dei termini salvati in item per ricavare un numero sequenziale che va da 1 a 10, è come se avessi inglobato nel mio codice un ripeti dieci volte. Infatti se per esempio siamo al terno passaggio del for each vuol dire che sta usando il terno elemento della lista LABEL, io sfrutto questa informazione per prendere il valore 3 e usarlo come indice; al passaggio successivo avrò 4 poi 5 e così via. 

Adesso leggiamo il codice da destra verso sinistra per vedere che valore ci portiamo avanti fino ad arrivare alla fine, i vari valori li leggiamo anche nelle vignette blue. Supponiamo di essere al primo passaggio del for each e leggiamo l'ultimo blocco, voglio sapere l'indice (la posizione) di item nella lista LABEL che essendo il primo elemento della lista mi darà come valore 1. Spostandoci verso sinistra questo 1 mi servirà per prendere il primo elemento della lista MESCOLATA e come vediamo dalla vignetta rosa (termine evidenziato) è il numero 8 , ecco che magicamente stiamo modificando un operazione che va sempre in successione per avere numeri casuali. Ancora più a sinistra l'8 mi serve per prelevare l'ottavo elemento dalla lista CINTURE quindi CINTURA MARRONE 2° STRISCIA e questo sarà il nuovo testo della label . Ripetete lo stesso ipotizzando di trovarli al quinto giro e dovrete trovare come valore finale CINTURA ARANCIONE.

E' molto più facile provando che spiegando ve lo assicuro 😅.

Vediamo invece come controllare le risposte esatte, sbagliate oppure non scritte, volendo si potrebbe impostare anche una condizione per non far partire la verifica e lanciare una notifica che dice : Attenzione !! Tutti i valori devono essere inseriti. Ma questo lo lascio come compito a casa oppure fatemi sapere nei commenti se avete bisogno di aiuto.

Quando premiamo il pulsante VERIFICA prima di tutto facciamo sparire la tastiera virtuale troviamo quel comando nel menu dei blocchi di screen1 e poi facciamo di nuovo affidamento ad un for each ma questa volta andando a scorrere la LISTA TEXTBOX . Cosa succederà? Per ogni elemento (item) nella lista delle textbox verifico se il testo della textbox che sto valutando adesso (quale? quella che si chiama item cioè quel nome lungo lungo che prendiamo ad ogni giro dalla lista con tutti i componenti textbox), il blocco verde TextBox.Text che trovo in any component , è uguale ad un elemento che prelevo dalla lista MESCOLATA . Con la lista MESCOLATA abbiamo assegnato ad ogni label un testo specifico preso con un numero casuale, quel numero ci dice proprio la posizione di quel testo nella lista originale, quindi proprio il numero che deve inserire chi gioca al quiz.

Quindi se il testo inserito da noi nella textbox è proprio uguale alla posizione che aveva prima di mescolare le label allora modifico il testo proprio della textbox che sto valutando (item , il conto lo tiene il for each) in OK perchè la risposta è esatta. 

In alternativa se la textbox è vuota (is empty TextBox.Text se è vuota mi darà true accedendo alla parte del then  ) allora sostituisci il testo con delle XXXXXX per far capire che il valore è mancante, altrimenti else sostituisci il testo con ERRATO.  

Anche in questo caso ho usato lo stratagemma di prelevare la posizione (index in list) dell'elemento nella stessa lista da dove l'ho prelevato poco prima con item avendo così un INDICE che incrementa automaticamente ad ogni passaggio , cosa che per esempio non ho potuto fare nel codice per mescolare andando quindi ad introdurre un ripeti per ogni numero da ....a !

Per concludere visto che il progetto è separato da tutto il resto ho dovuto prevedere, e lo dovrete valutare anche voi nella vostra app, il riempimento della lista MESCOLATA all'inizio di screen1 altrimenti, se non viene premuto MESCOLA, se si tenta il quiz al premere di VERIFICA avremo un errore poiché il codice sta lavorando con una lista vuota.

Bene spero vi sia piaciuto e che possa essere una buona esercitazione tra liste , procedure per mescolare e blocchi avanzati Any component, ti ricordo inoltre che QUI e QUI potrai trovare altri tutorial su Any component , mentre 👉 QUI 👈 potrai scaricare il progetto in formato .aia e controllare tutte le modifiche e tutte le impostazioni. Un piccolo regalo che ho messo alla fine altrimenti non avresti seguito attentamente 😝

Ci vediamo al prossimo tutorial o nei commenti!

 Se hai apprezzato il mio lavoro offrimi un bel caffè 😍