Arxiu de l'autor: Estudiant

QuizMe: Treball amb varies llistes de variables relacionades mitjançant la variable índex.

http://beta.appinventor.mit.edu/learn/tutorials/quizme/quizme.html
Autor: Isaac Rodríguez Ramos

Fent el tutorialQuizMe, que ofereix la web oficial de App Inventor, es poden aprendrevaries funcions noves d’aquest programa, tals com:

  • Fer una variable que sigui una llista d’elements i que aquests siguin seleccionats.
  • Crear una variable que unifiqui totes les variables que continguin una llista d’elements, fent així que si hi ha una llista de preguntes, respostes i fotografies, tota pregunta vagi amb la seva corresponent fotografia i resposta.

Creació de llista de variables

Per a crear una variable que sigui una llista es tant simple com crear la variable, adjuntar-li un “make a list” i en els diferents items anar especificant els elements que vulguem incloure, sempre amb la funció “text”.

 1

Crida de variables

Així doncs, tenim una variable que inclou al mateix temps molts items o subvariables. Per a poder-les ‘cridar’ s’ha de seleccionar quan la volem (per exemple quan inicies la aplicació), on han de ser traslladades (per exemple a un “Label”), quina llista (en aquest cas “QuestionList”) i quina variable (com en tenim tres en la “QuestionList”, del 1 al 3). És important veure que la numeració a les llistes de variables a App Inventor comença al 1, a diferencia del Processing que començava al 0, creant confusions entre programes.

Per tant, per dur a terme aquesta ‘crida’ de, posem per cas, la subvariable 1, haurem de agafar la funció “Screen1.Initialize”, incloure en aquesta “QuestionLabel.Text”, posteriorment “selectlistitem” i a “list” triar la llista en qüestió i a “index”, mitjançant “number”, indicar quina variable, en aquest cas “1”.

2

Variable Índex o Guia

No obstant, en aquest cas, sempre que s’obri la pantalla apareixerà la subvariable 1. Si volem que, al clicar un botó cada cop aparegui una subvariable diferent, en crearem una altre anomenada en el tutorial com a “currentQuestionIndex”. Aquesta servirà  com a guia a totes les llistes; la variable índex.

3

Col·locarem la variable índex com a “index” en el “selectlistitem”. Llavors, quan cliquem un botó, abans de seleccionar cap item, indiquem que la variable “currentQuestionIndex” augmenti x de valor (normalment 1, en el cas de que vulguem que surtin per ordre) o col·loquem un “randominteger” from “1” to “lenght of list” juntament amb la llista corresponent, en el cas de que vulguem que les subvariables surtin saltejades atzarosament.

4

Com veiem en la captura de pantalla, cada cop que es cliqui al botó, apareixerà la variable següent a la llista “QuestionList”

Aquest sistema, si ho volem fer sempre per ordre de la llista, crea un problema. Quan s’arriba al final de la llista i no queden subvariables, la app es bloqueja. Per tant, haurem de crear una funció com a retorn a la primera subvariable. Ho farem mitjançant un “if” quan cliquem el botó, fent que si la variable “currentQuestionIndex” arriba al final de la llista, aquesta retorni al valor “0”.

9

Coordinació de llistes

Així doncs, mitjançant una variable guia oíndex com la “currentQuestionIndex” podem fer que moltes llistes vagin coordinades. En aquest tutotial, per exemple, les preguntes han d’anar coordinades amb la seva corresponent fotografia. Així doncs, es crea el següent esquema:

6

Amb tot això, haurem pogut crear un “Label” i una “Image” que aniran canviant conjuntament  a mida que es cliqui un botó gràcies a les llistes de variables i les seves corresponents funcions. A més, mitjançant una variable guia o índex, farem que cada element d’una llista correspongui a un d’una altre llista.

A més, si agafes aquesta variable guia i, en el Blocks Editor, la cliques amb el botó dret i selecciones “watch” al mateix moment que tens l’aplicació connectada amb el dispositiu mòbil, et permet veure quin valor té en aquell moment. Aquesta funció et permet trobar errors.

7

Donar resposta correcte o incorrecte

Pel que fa les respostes, es fa mitjançant un “ifelse”, doncs si la solució que dóna l’usuari correspon en exactitud a la variable de la llista de solucions, serà correcte i, sinó, incorrecte. Veiem com també a cada pregunta correspon la seva solució intervenint la variable “currentQuestionIndex”.

8

Inconvenients de la app QuizMe

Com a coses negatives a aquesta aplicació, no es molt viable el fet de que s’hagi descriure idènticament la solució com està a la llista, doncs el fet de que escriguis una lletra majúscula o minúscula diferent ja et dóna error. Això es podria solucionar donant varies opcions de resposta o fent una llista dins de la llista donant les varies alternatives a la resposta (amb majúscules, minúscules, accents…)

Per altra banda, no m’ha acabat de funcionar a la perfecció en el meu dispositiu mòbil, però aquest fet pot ser degut a problemes de format o incompatibilitat…

Canvi de pantalla

Per afegir un canvi de pantalles a la nostra aplicació s’ha de pensar de la mateixa manera que ho fem per crear vàries screens independents, només afegint el fet que s’envien missatges entre elles. El canvi de pantalles és, al cap i a la fi, enviar un missatge d’una pantalla autònoma a l’altra.

Tan és així que, quan dissenyem, cada pantalla té el seu espai i els seus components propis, i igual en el Blocks Editor, on només podrem veure els components corresponents a la pantalla que tinguem activa, i cap element d’alguna altra pantalla de l’app. És important recordar que cap component o variable que definim en una pantalla serà accessible des d’una altra, i que per tant els blocs del codi vinculats a una pantalla no es poden referir al blocs del codi d’una altra pantalla.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més, com a l’exemple següent, on es mostren els quatre canvis de pantalla des del menú principal, als quatre espais que construeixen el joc.

És important recordar que quan creem un projecte, per defecte, App Inventor anomena la primera pantalla com a Screen 1, i que tot i que li podem canviar el nom al menú de propietats, l’opció de reanomenar-la del tot no hi és, i quan es treballi al Blocks Editor s’haurà de tenir en compte.

Quan s’afegeix una altra pantalla, des de l’opció Add Screen, a la part superior del Design Editor, sí que se’ns permet donar-li un nom, i si es treballa amb vàries pantalles, és important donar-li un nom significatiu per evitar problemes a posteriori.

Treballar amb vàries pantalles, com s’ha dit, és fàcil: es canvia d’una a l’altra, s’afegeixen els elements que siguin necessaris i s’editen com es vulguin.

Una vegada obert el Blocks Editor, ens adonem que només apareix l’editor de la pantalla que tenim oberta al Design Editor, i reiterant el que s’ha avisat abans, els elements d’una no apareixen a l’altre.

Canviar d’una pantalla a l’altre mitjançant un botó

Una vegada en el Blocks Editor, i en la primera pantalla (Screen 1), per fer el pas a la pantalla del menú principal (menu), farem servir l’opció, dins Built-in/Control, de open another screen with quan cliquem un botó. En aquest cas, en pseudocodi, seria “quan cliquem el botó de maria (mariabutton), s’obre la pantalla menú”. Aquest seria el pas que comentàvem de l’espai introductori al menú principal.

canvidepantalla

Com hem dit, la pantalla menú no apareix com a elements, ja que pertany a una altra pantalla. El que s’ha de fer és cridar a un component de text i anomenar-lo exactament igual que la pantalla on volem anar. Aquesta dinàmica funciona per totes les pantalles de la mateixa manera, i així un sol botó o n’hi hagi més.

El canvi de pantalles es podrà comprovar un cop, el joc sigui passat a un mòbil o tauleta.