Se han seleccionado cuatro categorías para las preguntas: Monumentos, Espacios Naturales, Comidas y Personajes Históricos. De cada categoría cada alumno elegirá un elemento para crear preguntas sobre él y elegir la foto correspondiente que servirá como respuesta a cada pregunta.

Para la creación de las preguntas los alumnos tendrán que buscar información en internet. Además se ha decidido crear diferentes niveles de dificultad para las preguntas y así poder conocer más datos de cada uno de los elementos.

Los alumnos deben elegir una foto que servirá como respuesta a cada pregunta.

Posteriormente se imprimirán y se harán fotos de la imagen desde distintos ángulos de manera que sirvan para alimentar posteriormente a los modelos de Inteligencia Artificial de clasificación de imágenes.

La idea del proyecto es que la manera de responder a las preguntas sea realizar una foto desde la App y que, mediante la técnica de clasificación de imágenes mediante Inteligencia Artificial, se la App la que nos diga si la foto corresponde a la pregunta que se presente. Para ello será necesario realizar las siguientes acciones:

• • 1. 1. Creación de proyecto en Teachable Machine por cada categoría / tema

       2. Creación en el proyecto de una "clase" por cada "objeto". Importante: el nombre de la clase debe de ser exactamente el mismo que el nombre que le hemos dado en la hoja de cálculo.

       3. Entrenar el modelo:

          • Subir a dicha clase la imagen que hemos seleccionado de cada objeto a su clase correspondiente.

          • Subir a esa misma clase las fotos que hemos hecho a la imagen impresa.

       4. Preparación del modelo en Teachable Machine.

       5. Exportar el modelo subiéndolo a la nube y creación un enlace que nos permite acceder a él desde la App.

• Título de la aplicación:  mediante una etiqueta con el nombre de la aplicación (se proponer el nombre "¿Conoces Extremadura?", con fondo negro, letra tamaño 20, negrita, en color blanco, centrada. y ancho que se ajuste al contenedor (para que ocupe el ancho de la pantalla del dispositivo.

• Bloque de tema o categoría: incluiremos una disposición horizontal (cuyo ancho se ajuste al contenedor) donde incluiremos una etiqueta con el texto "Tema" en negrita y de ancho un 15%, y también incluiremos un desplegable al que le daremos el nombre de "tema", al que le incluiremos las opciones correspondientes a los temas elegidos (incluyendo los nombres de los temas el la propiedad "ElementosDesdeCadena" escribiendo dichas temas separados por comas y sin espacio detrás de la coma"). Además pondremos el nombre del primer tema en la propiedad "Selección", para que dicho tema aparezca automáticamente seleccionado cuando iniciemos nuestra aplicación. 

• Bloque nivel: incluiremos una disposición horizontal (cuyo ancho se ajuste al contenedor) donde incluiremos una etiqueta con el texto "Nivel", en negrita y de ancho un 15%, y también incluiremos un desplegable al que le daremos el nombre de "nivel", al que le incluiremos las opciones correspondientes a los niveles (incluyendo los nombres de los niveles en la propiedad "ElementosDesdeCadena" es decir "Fácil,Medio,Difícil"). Además pondremos el valor "Fácil" en la propiedad "Selección", para que dicho nivel aparezca automáticamente seleccionado cuando iniciemos nuestra aplicación.

• Línea de progreso: se incluirá un elemento "LinearProgress" que nos indicará lo que vayamos avanzando en las preguntas según se vaya "jugando". Lo pondremos con ancho que se ajuste al contenedor y la propiedad "ProgressColor" con el color rojo y la propiedad Minimum a 1 y máximun a 13 (número de filas que tendrá la hoja de cálculo: 12 respuestas más la fila del título de cada columna).

• Botones de respuestas: 

1. Para la creación de los botones de respuesta lo haremos incluyéndolos previamente en una disposición desplazable vertical (por si no camben en la pantalla del dispositivo y es necesario arrastrar arriba o abajo las opciones), cuyo alto se ajuste al contenedor y cuyo ancho sea del 100%. 

2. Dentro de la disposición anterior meteremos una disposición tabular para incluir en ella los botones de las opciones de respuesta. Dado que se van a crear doce opciones lo que haremos será indicarle que la disposición tabular tendrá 2 columnas y 6 filas.  Al igual que en la disposición anterior le pondremos que el alto se ajuste al contenedor y que el ancho sea del 100%. 

3. Posteriormente dentro de cada celda de la disposición tabular incluiremos un botón cuyo ancho sea del 50% y al alto que se ajuste al contenedor. A cada botón le daremos el nombre "OpcionX" donde X irás desde 1 a 12. Se recomienda que el texto del botón se deje en vacío, pero que se ponga en negrita.

Una vez finalizada todo esto nos debería haber quedado algo como lo siguiente:

Nota: Antes de comenzar el diseño de esta parte se recomienda desmarcar "visible" de la disposición que contiene los botones y que hemos creado en el punto anterior,

• Área de botones principales: incluiremos una disposición horizontal (cuyo ancho se ajuste al contenedor) donde incluiremos:

  • 1. Una etiqueta sin texto y de ancho un 2% para separar los botones del lateral

    2. Un botón que denominaremos "Iniciar", con el texto "Iniciar", con color de fondo violeta, con letra negrita y tamaño 22 y formato redondeado. El ancho es para que se ajuste al contenedor. Este botón servirá para iniciar las preguntar e in pasando a la siguiente

    3. Una etiqueta sin texto y de ancho un 3% para separa los botones entre sí.

    4. Un botón que denominaremos "Foto", con el texto "Tomar Foto", con color de fondo naranja, con letra negrita y tamaño 22 y formato redondeado. El ancho es para que se ajuste al contenedor. Este botón servirá para hacer la foto que clasificaremos mediante la Inteligencia Artificial

    5. Una etiqueta sin texto y de ancho un 2% para separar los botones del lateral

• Área de puntos: incluiremos una disposición horizontal (cuyo ancho se ajuste al contenedor) donde incluiremos:

  • 1. Una etiqueta con el texto "Puntos:" y de ancho un 25%l

    2. Una etiqueta denominada "Puntos" con el texto "0" que servirá para ir mostrando los puntos obtenidos. El ancho es para que se ajuste al contenedor.

• Área de preguntas: incluiremos una etiqueta denominada "Pregunta" con el texto inicial "Pregunta" en negrita y centrada. que servirá para ir mostrando las preguntas. El ancho es para que se ajuste al contenedor y alto automático.

• Visor Web: incluiremos cuatro componentes de interfaz de usuario denominado "VisorWeb" de que servirá para visualizar la foto que estemos realizando y que será la que se envíe para su clasificación mediante la Inteligencia Artificial (Teachable Machine). Se incluirán cuatro diferentes para

• Componente Web: incluiremos un componente no visible "Web" del grupo "Conectividad" que denominaremos "Conexion" y que servirá para conectarnos con la hoja de cálculo de preguntas y respuestas.

• Notificador: incluiremos un componente no visible "Notificador" del grupo "Interfaz de Usuario" que servirá para poder mandar mensajes a pantalla.

• Texto a Voz: incluiremos dos componentes no visibles "TextoAVoz" del grupo "Medios" uno para las preguntas y otro para los mensajes de error o acierto.

• Extension para conexion con TeachableMachine (una por cada tema): Para ello tenemos que incorporar una extensión que se conectará con nuestro modelo de clasificación creado en Teachable Machine a partir de nuestras propias categorías y fotos (ver apartado Extensiones para poder descargarla). Para incorporar dicha extensión a nuestra App deberemos:

1. Buscar el apartado “Extensión” dentro de la Paleta que está a la izquierda (donde se encuentran todos los objetos disponibles para las app’s)

2. Hacer click en “Import extension” y buscar el archivo en nuestro ordenador. Esperar hasta que el ordenador nos indique que se ha incorporado la extensión. 

3. Una vez incorporada deberemos darle a la propiedad "WebViewer" el nombre del Visor Web que añadimos anteriormente (es la manera de conectar la foto con la extensión).

A cada extensión se le asociará el modelo de Teachable Machine correspondiente:

3. • Monumentos: https://teachablemachine.withgoogle.com/models/SNyX-6bV_/

   • Espacios Naturales: https://teachablemachine.withgoogle.com/models/oRQQ22jMO/

   • Comidas: https://teachablemachine.withgoogle.com/models/iZVh7fZCU/

   • Personajes Históricos: https://teachablemachine.withgoogle.com/models/-W2G3DRY4/

En el siguiente proceso vamos a crear una "url" que nos permite que al ejecutarla se descargue automáticamente dicha hoja de cálculo en el dispositivo correspondiente. Veamos como construir la "url".

• Compartir la hoja de cálculo mediante enlace (para cualquier persona).

• Copiar url de la barra de navegación de la hoja de cálculo.

Será algo similar a esto: 

https://docs.google.com/spreadsheets/d/1v23-l5lfO5Jk1D94elp-d8PUc_LS1ZnAucvB66ewAaQ/edit#gid=0

Entendamos las partes de esta url

1. https://docs.google.com/  ... nos indica que es un documento de la plataforma google..

2. spreadsheets/d/   .. me indica que es una hoja de cálculo ...

3. 1v23-l5lfO5Jk1D94elp-d8PUc_LS1ZnAucvB66ewAaQ   ... este el código único que identifica la hoja de cálculo de las preguntas y respuestas

4. edit  ... indicando el modo en el que entro en mi hoja de cálculo (edición)

5. gid=   identifica la pestaña dentro de la hoja de cálculo. La primera se crea con el valor 0 (gid=0) y las siguientes se genera un número de varias cifras en el momento de crearla

La url anterior nos sirve para ver el documento desde el navegador, pero si queremos descargar en nuestraaplicación (o en cualquier dispositivo) tendremos que modificar la url.

• Modificación url de consulta por enlace para descarga automática de la hoja en un dispositivo cualquiera en formato "CSV" ("Comma Separated Values"). Realizando el siguiente cambio en la url.

1. Eliminar la ultima parte de la url dejándola como: 

https://docs.google.com/spreadsheets/d/1v23-l5lfO5Jk1D94elp-d8PUc_LS1ZnAucvB66ewAaQ/

2. Anadir al final de la ulr la parte correspondiente a la "exportación" en formato CSV:

export?gid=0&format=csv    lo que indica "exportar de dicha hoja de cálculo la pestaña 0 en formato csv"

En nuestro proyecto dado que vamos a utilizar diferentes pestañas tendremos que utilizar la "0" y las que correpondan según nuestro documento. En este caso particular:

• 0 - es la pestaña "Monumentos

• 489982837 - es la pestaña "Personajes Históricos"

• 100137317 - es la pestaña "Comidas"

• 1597799800 - es la pestaña "Espacios Naturales"

• Probar funcionamiento de la nueva url,

Si se ha realizado correctamente la construcción de la nueva url podemos probarla poniéndola en el navegador y viendo que se descarga la hoja de cálculo en el ordenador.

Vamos a incluir en el siguiente apartado las acciones que se van a realizar cuando se arranque la aplicación.

• Definición de variables: se definen cada una de las variables que vamos a utilizar al principio:

  • inicioHoja: varialble de tipo texto para montar la url de conexión a la hoja de cálculo. Tendrá como valor la parte inicial de la utl de conexión a la hoja de cálculo, es decir:  

https://docs.google.com/spreadsheets/d/1v23-l5lfO5Jk1D94elp-d8PUc_LS1ZnAucvB66ewAaQ/export?gid=

• • finHoja: varialble de tipo texto para montar la url de conexión a la hoja de cálculo. Tendrá como valor la parte final de la utl de conexión a la hoja de cálculo, es decir:      &format=csv

  • botones: variable de tipo lista texto para montar la lista de los botones: desde "Opcion1" a "Opcion12"

  • nivel: variable de diccionario que relaciona los niveles con el número de columna de la hoja de cálculo correspondiente a la pregunta que vamos a seleccionar. Fácil - 2, Medio - 3, Difícil - 4.

  • tema: variable de diccionario que relaciona los temas con el número de la pestaña de la hoja de cálculo correspondiente.: de la hoja de cálculo correspondiente (ver valores en apartado anterior de "conexión a la hoja de cálculo")

  • temaIA: variable de diccionario que relaciona los temas con la url correspondiente a al modelo de Inteligencia Artificial creado con Teachable Machine para cada uno de los temas.

    • • Monumentos: https://teachablemachine.withgoogle.com/models/SNyX-6bV_/

      • Espacios Naturales: https://teachablemachine.withgoogle.com/models/oRQQ22jMO/

      • Comidas: https://teachablemachine.withgoogle.com/models/iZVh7fZCU/

      • Personajes Históricos: https://teachablemachine.withgoogle.com/models/-W2G3DRY4/

Habrá tres momentos en los que tendremos que recomenzar el juego y conectarnos a la hoja de cálculo. Esos momento son: cuando se inicie la aplicación, cuando se cambie el tema o cuando se cambie la dificutal. En esos momentos llamaremos a la conexión de la hoja de cálculo montando la URL de la pestaña que queremos consular. Al ser un proceso que se repite lo codificaremos en una sola función que denominaremos "obtenerDatos" y que llamaremos en los tres eventos indicados: Screen1.Inicializar, nivel.DespuésdeSeleccionar, tema.Después de Seleccionar.

Cuando obtengamos la información de la hoja de cálculo estaremos preparados para comenzar el juego por lo que almacenaremos en un diccionario cada pregunta asociada a su respuesta y pondremos los valores de las diferentes opciones en los botones. Después inicializaremos el juego poniendo por ejemplo la línea de progreso al mínimo, los puntos a cero... Esto lo haremos utilizando diferentes funciones para que quede más claro que se hace en cada conjunto de bloques.

Para todos estos bloques será necesario definir cuatro variables de trabajo:

• preguntas: diccionario donde se almacenará cada pregunta asociada a su respuesta. Se crea como un diccionario vacío

• datos: variable de tipo lista donde recuperaremos la información de la hoja de cálculo, cada elemento será una dila de la hoja de cálculo. Se define inicialmente como una lista vacía.

• datos_aleatorios: será una copia de la lista anterior que utilizaremos para mostrar las preguntas de forma aleatoria. Se define inicialmente como una lista vacía

• ordenBoton: índice que utilizaremos para recorrer la lista de opciones. Se define inicialmente con el valor numérico 1.

El juego se comienza pulsando el botón "Iniciar", y por ello se "lanza" la primera pregunta, o las siguientes si no es la primera. En cualquier caso siempre se bloquearán en este punto los botones para que no pueda contentar hasta que no se lea la pregunta.

Dado que lanzar la siguiente pregunta puede hacer de diversas formas (pulsando el botón siguiente o después de validar la respuesta dada mediante botón o mediante foto) se programará mediante funciones de manera que no sea necesario repetir el código.

• Si la anterior era la última pregunta se ha acabado el juego la App mostrará el resumen con la puntuación obtenida.

• Si no es la última se solicitará una pregunta. Se buscará una aleatoriamente de la lista se pondrá dicho texto en la etiqueta "Pregunta" y la App la "leerá". Una vez finalizada  la lectura se habilitarán los botones para que el usuario pueda responder. Además se eliminará la pregunta de la lista para que no pueda volver a repetir

Para esta parte solo será necesario crear una variable de tipo texto denominada "mensaje" definida inicialmente en blanco.

Se controla si el texto del botón pulsado corresponde con la respuesta a la pregunta correspondiente controlando un botón genérico. Nota: para controlar que el botón pulsado es el de una opción se comprueba que el tamaño de la letra no sea 22 (ni "Siguiente" ni "Tomar Foto.

• Si la respuesta es correcta se dará el mensaje correspondiente, se pondrá el botón con fondo verde y se sumará 1 a los puntos.

• Si la respuesta no es correcta se pondrá el botón en gris y se dará el mensaje correspondiente.

En cualquier caso el sistema "hablará" el mensaje y una vez que acabe de decirlo el sistema pasará a la pregunta siguiente.

Si el botón pulsado es "Tomar Foto" llamaremos a la Inteligencia Artificial para que nos de la clasificación de la imagen obtenida. Esto lo haremos mediante la llamada a la extensión de Teachable Machine llamando al modelo correspondiente al tema que del que estemos "jugando". 

La extensión nos devuelve todas las clasificaciones del modelo con el porcentaje que se parece a cada una de ellas. Será necesario recorrer toda la lista para ver cual tiene mayor porcentaje y posteriormente comprobar si es la misma que la respuesta..

• Si la respuesta es correcta se dará el mensaje correspondiente y se sumará 1 a los puntos. Además se comprobará qué botón tiene el mismo texto que la respuesta para ponerlo en verde.

• Si la respuesta no es correcta se dará el mensaje correspondiente indicando cuál era la respueta correcta.

En cualquier caso el sistema "hablará" el mensaje y una vez que acabe de decirlo el sistema pasará a la pregunta siguiente /utilizando el mismo bloque que el punto anterior).

Para controlar que clasificación tiene mayor porcentaje será necesario utilizar dos variables auxiliares:

• porcentajeMayor: variable numérica con valor incial 0.

• Respuesta: para guardar el texto del nombre de la clasificación con mayor porcentaje.

Nota: el proceso de clasificación devuelve un máximo de 18 caracteres por lo que no podremos comprobar si la respuesta completa es correcta, solo compararemos los 18 primeros caracteres (o menos si la respuesta tiene menos de 18 letras)