| Quiz | #1

 

Benvenuti!

Oggi partiremo con un progetto molto carino e spero interessante, sicuramente almeno una volta avrete pensato di creare un quiz e vedremo la mia interpretazione per realizzarlo.
Il progetto finale sarà più complesso (tutto fattibile naturalmente) e completo del semplice tutorial, che lascerò come esempio sperando si tornare più volte con piccoli focus sulle altre procedure introdotte, e tratterà strettamente i blocchi del quiz e nello specifico come caricare velocemente molte domande con relative risposte (una modalità off line e una on line) , mescolamento e posizionamento in app , svolgimento del quiz. 
In più il progetto prevede anche una semplice animazione iniziale , login semplice, punteggio con best score e timer in gioco.Prima di tutto ci serve un database di facile compilazione per poter segnare tutte le domande e le risposte, magari da poter modificare e aggiornare facilmente. Con altissima probabilità tutti quelli che leggono in questo momento hanno un account Google, o comunque potrete farlo gratuitamente , quindi ho deciso di utilizzare Fogli di Google. Ci basta andare direttamente sul nostro drive e in alto a sinistra cliccare il tasto più con la scritta nuovo e dal menu selezionare Fogli , ogni riga del nostro foglio di lavoro dovrà essere una domanda divisa in 5 colonne: una riceverà la domanda e le altre quattro le risposte. Fatto questo ci basta semplicemente andare su File-->Scarica e da li selezionare valori separati da virgola (csv,foglio corrente). Questo file dovremo caricarlo nel nostro progetto come asset quindi nella schermata designer editor nella sezione Media andiamo 

 ad effettuare l' upload del nostro foglio di google. 

Perfetto il nostro database off line è stato importato correttamente, veloce , semplice e pratico , unico neo non potremo modificarlo da remoto e volutamente lo lascerò così per poi considerare in un secondo momento la versione modificabile.

Come sempre partiamo con l'inizializzazione della nostra app quindi tutti i settaggi necessari affinché tutto fili liscio, variabili e valori iniziali saranno completi quindi troveremo anche termini che non useremo ma che voglio accennare per una facile comprensione del progetto anche senza la mia guida (spero, altrimenti rimandati a settembre 😂 ).

Ormai siete tutti più bravi di me quindi sorvolo sulle variabili BEST_SCORE , USER, SCORE E QUESTION che si commentano da sole e continuiamo con le liste che contengono la domanda proposta in quel momento QUESTION , le domande già uscite FIRED_QUESTION, tutte le domande caricate LIST_OF_QUESTION e le risposte ovviamente ANSWERS. L'ultima lista contiene i componenti BUTTONS per poi gestirli rapidamente con le funzioni di anybutton. Nell'angolo di destra invece troviamo il blocco Initialize che contiene la partenza di un clock che servirà per l'animazione e il blocco File che serve per caricare dalla memoria dell'app il file csv per essere processato e organizzato. Il componente File lo troviamo nella sezione storage e il blocco ReadFrom riceve il nome del file da caricare , compreso l'estensione, é preceduto da due slash, mi raccomando dobbiamo scrivere esattamente il nome del file compreso estensione e caratteri maiuscoli o minuscoli , nel nostro caso //nazionibis.csv 

Il blocco Read passa le info al blocco when File1 GotText che ci restituisce il testo del nostro file ma dobbiamo utilizzare un blocco particolare delle liste per trasformare il formato csv in uno più congeniale al nostro ambiente , una lista.  Questo blocco è proprio list from csv table text che prendendo in carico un formato csv (che vi ricordo in origine era una tabella , quindi continua ad avere questa parvenza) di una tabella lo trasforma in una lista , questa lista però è molto particolare perché al suo interno avrà altre liste. 

Come abbiamo accennato ogni riga del nostro foglio sarà una domanda completa : prima colonna sarà la domanda (anche se al momento non sembra 😂) , seconda colonna sarà la risposta esatta (poi vedremo perché) e a seguire le altre risposte .Ogni riga del nostro foglio finirà all'interno di un elemento della nostra lista , quindi l'elemento 1 della lista LIST_OF_QUESTION sarà formato dalla lista ( DELL'ITALIA, ROMA,VIENNA,BERLINO,BERNA) , il secondo elemento sarà la seconda riga e così via. Il formato dei dati che andiamo ad utilizzare è molto importante e a seconda dello strumento utilizzato potrebbe variare in modo sostanziale sia per l'utilizzo che dovremo fare dei dati sia per la struttura e caratteristiche del database scelto. 

Ultimo blocco della foto non è altro che una sequenza di istruzioni che avvengono al click sul button play che andrà a nascondere l' arrangement MENU per rendere visibile quello GAME, effetto finale sembrerà un cambio di screen con il vantaggio di non aver creato nessun screen salvaguardando il peso finale dell'app ( QUI un esempio di questo metodo ); la label settata a 5 e l'avvio del clock fanno parte di altre procedure pensate per abbellire e arricchire il progetto.

SET QUESTION probabilmente la procedura più importante, il cuore pulsante del progetto che ci permette di prelevare, mescolare e posizionare le domande del nostro quiz e individuare anche una possibili fine del nostro gioco , si ci sono più possibilità, e in questo blocco possiamo verificare la fine del gioco a causa della fine delle domande.

La prima condizione che incontriamo infatti è proprio quella che verifica se la lunghezza della lista delle domande è maggiore di quella che contiene le domande già fatte, se questa affermazione è vera vuol dire che abbiamo ancora domande non presentate , in caso contrario else andremo a preparare la fine del quiz, lo vedremo dopo. In caso positivo andremo ad estrarre una domanda a caso della lista generale LIST_OF_QUESTION utilizzando pick a random item e andando a salvare questo valore all'interno della variabile QUESTION che diventerà la nostra domanda da proporre. Sarebbe troppo facile vero? E allora introduciamo anche un bel while che useremo per evitare i doppioni, quindi eviterà di presentare più volte la stessa domanda.  Dobbiamo andare a verificare se all'interno della lista delle domande già presentate FIRED_QUESTION è già presente l'elemento n.1 della lista  QUESTION cioè la nostra domanda , l'unico elemento sicuramente diverso. Se l'elemento è presente entriamo nel ciclo while per estrarre una nuova domanda e questo avverrà fino a quando la condizione non sarà falsa, quindi se l'elemento non è nella lista . Condizione vera si entra nel ciclo , condizione falsa si prosegue. Il nostro is in list effettuerà il controllo mentre select list item preleverà l'elemento da verificare. 

Una volta estratta una domanda nuova uscendo dal ciclo while andremo a settare la label QUESTION usando un blocco join che ci permetterà di comporre la frase con la scritta " QUAL E' LA CAPITALE " + la nostra domanda presente nel db (database) es. DELL'ITALIA andando a prelevare questo elemento grazie a select list item e indice 1 e poi il nostro punto interrogativo. L'ho separato perché in alcuni database l'utilizzo di caratteri speciali potrebbe portare ad errori o non sono proprio consentiti, questi tutorial sono anche spunto per vedere più procedure e metodi ma ciò non toglie che si potrebbe semplicemente scrivere tutta la domanda direttamente nel foglio, in questo caso mi sembrava carino lasciare una parte una parte fissa e una variabile 😂 che ci volete fare !

Impostata la domanda andiamo ad aggiungere alla lista delle domande proposte quella appena caricata add item to list FIRED cosa ? select item 1 della variabile QUESTION , il passaggio successivo è un po' strano perché andiamo a copiare la variabile QUESTION dentro ANSWERS passaggio inutile ma quella sera continuava a dare errore ed ho ovviato in questo modo. La ribellione di AppInventor 😂 

Adesso arriva il bello , utilizzando i blocchi any andremo a inserire all'interno dei buttons le varie risposte creando sempre una sequenza casuale ad ogni partita così da complicare la vita anche ai maghi della memoria o memoria fotografica.

Il blocco for each per ogni elemento della lista BUTTONS andrà a settare il testo del pulsante in questione (item) prelevando dalla variabile che contiene le nostre risposte un elemento casuale tra 2 e la lunghezza della nostra variabile, in questo modo non siamo vincolati a cambiare codice se un domani volessimo aggiungere 5 opzioni invece di 4. Mi è stato chiesto più volte questo funzionamento quindi vediamo se riesco a spigarlo con un esempio. Primo passaggio del for each viene prelevato il primo elemento della lista BUTTONS (che è un componente button) e viene passato al blocco set Button text grazie ad item (che cambierà ad ogni passaggio) dicendogli di impostarlo come l'elemento che andiamo a prendere dalla nostra domanda QUESTION tramite un elemento casuale tra 1 e la lunghezza della lista (per mescolare). A questo punto rimuoviamo dalla lista ANSWERS la risposta appena posizionata ma visto che non abbiamo un riferimento per poterlo trovare andremo ad utilizzare index in list e il blocco any button text , passandogli sempre il valore del button tramite item , per trovarlo all'interno della lista.

Secondo passaggio del for each secondo button (item) prelevo un testo casuale tra le risposte nella lista ANSWERS (che adesso ha una lunghezza differente, più piccola) e lo inserisco come testo del pulsante item , cancello questo testo dalla lista ANSWERS prelevandolo grazie al blocco che restituisce la posizione di un elemento all'interno di una lista. Passaggio 3 terzo button e così via fino all'ultimo elemento della lista.

Domanda casuale posizionata e risposte mescolate posizionate non ti resta che provare a rispondere correttamente 😛 .

Tutto questo sarà fatto solo se abbiamo ancora domande da presentare mentre in caso contrario else prima di tutto fermiamo il timer del gioco set clock GAME enabled to false e partiamo con il controllo del punteggio. 

Se il nostro punteggio totalizzato in questa partita sommato al tempo rimasto moltiplicato per 10 vuol dire che abbiamo superato il nostro record quindi abbiamo un nuovo BEST SCORE che prontamente andiamo a salvare nella variabile BEST SCORE per essere poi salvato nel tinyDb insieme al nome utente, impostiamo la musichetta e la facciamo suonare ( set source e call play ) è festa grande 🎉🎈

Una label ben posizionata mostra il nome utente e il BEST SCORE raggiunto mentre una notifica appare per complimentarsi con l'utente e segnale anche il bonus guadagnato in quella partita. Infatti per introdurre un premio aggiuntivo per chi è più veloce ho introdotto dei punti extra moltiplicando il tempo rimasto per 10 e aggiungendolo al totale punti fatti. 

Questa sezione abbiamo visto che si attiva solo su nuovo record mentre per un fine partita normale impostiamo una musica più sobria e suoniamo a festa ( set source e call play ) anche il messaggio notificato è più leggero ma sempre di complimenti perché cit. signori si nasce e io modestamente lo nacqui 😂 Utilizzando una notifica con scelta possiamo chiedere se si vuole fare un'altra partita o no.

Ora è tardi e si nota dalle fesserie che dico, prossima puntata vedremo come impostare il click dei pulsanti per verificare le risposte date e il funzionamento del clock che scandisce i tempi del gioco.

Notte 😴

Continua 👉 QUI 👈

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