martes, 3 de abril de 2012

Aplicación AppInventor para repasar las tablas de multiplicar

Siempre con la idea de que los alumnos aprendan trabajando vamos a ver cómo son ellos los que fácilmente pueden construir una aplicación para practicar las tablas de multiplicar. Esta aplicación pueden llevarla en sus dispositivos, ser descargada por sus padre etc, etc...

Podríamos complicar la aplicación pero he optado por la versión más sencilla posible.

Lo primero de todo es definir el interfaz gráfico de nuestra aplicación. En este caso va a ser muy sencillo.



Pasemos a describirlos las zonas más importantes:
  1. Zona donde se nos preguntará la multiplicación cuyo resultado debe introducir el usuario. Está compuesta por tres etiquetas lbl_first, lbl_cross y lbl_second que se muestran organizadas horizontalmente.
  2. Zona de texto, txt_Result, donde el usuario introducirá el resultado de lo aparecido en la zona 1.
  3. Botones, dispuestos horizontalmente, uno para Comprobar si la respuesta es correcta (btn_check) y otro para poner a cero el número de aciertos llevados a cabo (btn_reset).
  4. Zona donde mediante el uso de una etiqueta lbl_score se mostrará al usuario el número de respuestas que lleva acertadas.
  5. Lista de todos los elementos del interfaz de usuario.
  6. Elementos multimedia añadidos, que son dos sonidos, uno para el acierto y otro para el error.
Tras definir el interfaz gráfico debemos abrir el editor de bloques de la aplicación (Blocks Editor) pulsando un botón que no sale en la zona superior derecha de la pantalla. Mediante esta parte de la aplicación lo que haremos, como ya expliqué en post anteriores, es describir el comportamiento de la aplicación. Dicha descripción se realiza gráficamente ensamblando bloques. Para esta aplicación necesitaremos los siguiente bloques:


En primer lugar crearemos la variable global Resul donde almacenaremos la puntuación del usuario.

Y, al iniciar la aplicación (Screen1.Initialize)
  • Llamaremos al procedimiento Renew (que se describe más abajo).
  • Limpiaremos la zona donde el usuario va a meter las respuestas.
  • Pondremos a 0 la puntuación.
  • Limpiaremos el mensaje que se muestra en el marcador.

El procedimiento Renew tiene la siguiente apariencia:


Al ser un procedimiento podrá ser llamado desde cualquier otro sitio de la aplicación. Hace lo siguiente:
  • Fijar la primera cifra de la aplicación a un valor aleatorio entre 0 y 9 (ambos inclusive)
  • Fijar la segunda cifra de la multiplicación a un valor aleatorio entre 0 y 9 (ambos inclusive)
  • Vaciar el campo del resultado para que el usuario va a insertar la respuesta.
Posteriormente lo que tenemos que hacer es definir el comportamiento de cada uno de los botones de la aplicación.


Mediante el uso de un bloque de control if-the-else comprobamos si lo insertado por el usuario es el resultado real de la aplicación.
  • Si el resultado es correcto (todo lo contenido en then-do). Añadimos un punto al resultado (la variable global resul), actualizamos la etiqueta que muestra la puntuación (lbl_score) y reproducimos el sonido que hemos subido para acompañar el acierto (correct.mp3)
  • Si el resultado es incorrecto  simplemente reproducimos el sonido de error (error.wav)
  • En todos los casos llamamos de nuevo a Renew.
Como podéis ver reproducir un sonido implicar fijar la fuente del reproductor (Player1.Source) y posteriormente iniciar el mismo (Player1.Start).

Y para finalizar lo que sucede al presionar el botón de Reset.


  • Quitamos cualquier puntuación fijando el texto de la etiqueta lbl_score a simplemente "Your score is:", sin puntuación alguna.
  • Volvemos a llamar al procedimiento Renew.
  • Fijamos la puntuación acumulada a cero (La variable global Resul).
  • Vaciamo el campo del resultado para que el usuario va a insertar la respuesta.
No es la versión óptima y seguramente se os ocurren muchas mejorar a al aplicación, pero creo que para es fácil de hacer y podemos conseguir que los propios alumnos vayan construyendo su arsenal de aplicaciones educativas.

Si no queréis hacer el ejercicio desde cero podéis bajaros el proyecto App Inventor desde aquí. Y podéis ver cómo subir dicho proyecto en el sigiente vídeo.


No hay comentarios:

Publicar un comentario en la entrada