Dia6

Tutorial Diario
D´ıa 6

Introducci´
on
Hola! Bienvenido al sexto d´ıa del taller Programa Tus Ideas :)
Hoy aprender´as a desarrollar aplicaciones “tipo cuestionario” o “trivia” donde el usuario
va avanzando a trav´es de una serie de elementos, que est´an internamente almacenados en una
lista. Desarrollar´as como tutorial el juego 4 Fotos 1 Imagen, donde el usuario debe ingresar
la palabraasociada a las 4 fotos que muestra la aplicaci´on. Despu´es ver´as c´omo extender
´esta y otras aplicaciones. El concepto fundamental que aprender´as en este d´ıa es a iterar
sobre una lista utilizando una variable como ´ındice.

1

1. tutorial: 4 fotos y 1 palabra

1.

Tutorial: 4 Fotos y 1 Palabra
En este tutorial desarrollaremos el juego 4 Fotos y 1 Palabra (4F1P), que consiste en

mostrar alusuario una serie de “diapositivas” que consisten en 4 im´agenes, y un campo
de texto para que se ingrese la palabra esperada. La interfaz de usuario se muestra en
la Figura 1.1.

Figura 1.1: Interfaz de usuario 4F1P.
En este tutorial aprender´as a recorrer una lista utilizando una variable como ´ındice, para
as´ı implementar una aplicaci´on tipo “cuestionario” o “trivia”. Este tipo de aplicaciones seencuentra tanto en juegos (como 4F1P) como en otro tipo de aplicaciones m´as “serias”
(Duolingo, Google Forms, etc.).
A continuaci´on desarrollaremos el esqueleto de este juego, que luego podr´as completar a
tu gusto.

2

1. tutorial: 4 fotos y 1 palabra
Agregando los Componentes
Para obtener una interfaz de usuario como la de la Figura 1.1 debes utilizar los componentes que se describen en laTabla 1.1
Tipo de Componente
Disposici´
onTabular

Nombre
Disposici´
onTabular1

Imagen

Imagen1, Imagen2, Imagen3, Imagen4

CampoDeTexto

CampoDeTextoRespuesta

Bot´
on

Bot´
onContestar

Etiqueta

EtiquetaMensaje

Prop´osito
Aqu´ı pondr´as las 4 fotos que se muestran
para cada palabra.
Necesitas 4 componentes de imagen, que
van dentro de las celdas de la disposici´on
tabular.
Aqu´ı el usuarioingresa la palabra asociada
a las fotos.
Al presionar el bot´on
la aplicaci´on averiguar´a si la respuesta
es correcta o no. Si es
correcta se pasa a la
siguiente palabra.
Una etiqueta para
mostrarle al usuario
un mensaje cuando se
equivoca.

Tabla 1.1: Componentes de la interfaz de usuario de 4F1P.
Una vez que ordenaste los componentes en el Dise˜
nador, tienes que configurarlos de la
siguientemanera:
1. Cambia el T´ıtulo de la pantalla a “¿Cu´al es la Palabra?”.
2. Configura la Disposici´
onTabular1 para que tenga 2 columnas y 2 registros. Ajusta
el Ancho como “Ajustar al contenedor”, y el Alto en 300 pixeles.
3. Para las im´agenes, ajusta su Alto y Ancho en 150 pixeles. Cambia la propiedad Foto
de cada una de ellas con los textos “raiz1.jpg”, “raiz2.jpg”, “raiz3.jpg” y “raiz4.jpg”,respectivamente. Los archivos los puedes encontrar en la carpeta ProgramaTusIdeas/
Dia6.
3

1. tutorial: 4 fotos y 1 palabra
4. Cambia la Pista del CampoDeTextoRespuesta1 por el texto “Ingresa la palabra”.
5. Borra el texto de la EtiquetaMensaje para que est´e vac´ıo. Este texto lo usaremos
cuando el usuario acierte o se equivoque en su respuesta.
Agregando el Comportamiento
El comportamiento de laaplicaci´on debe ser como sigue: cuando el usuario presiona el
Bot´
onContestar, la aplicaci´on compara el texto ingresado por el usuario, con la palabra
esperada. Si la respuesta coincide con la soluci´on, se avanza a la siguiente palabra, y se
actualizan las propiedades Foto de los componentes de imagen para que muestren la siguiente
imagen en la lista.
Implementaremos este comportamiento de lasiguiente manera:
1. Definir una variable listaPalabras con las palabras que se van a mostrar en la aplicaci´on. Adem´as, definimos una variable ı
´ndice que usaremos para avanzar en la lista.
En este tutorial partiremos con 2 palabras, como se muestra en la Figura 1.2.

Figura 1.2: Lista de palabras y variable ´ındice.

2. Para cambiar f´acilmente las fotos de los componentes de imagen, usaremos la...