Proyecto: Suma de fracciones

Hola, muy buenos días. Bienvenido a la entrada final sobre aplicaciones programadas con App inventor. Hoy vamos a realizar una aplicación para que el estudiante aprenda a sumar fracciones heterogéneas, utilizando un método de bloques. 

Si les interesa ahondar en esta metodología de enseñanza basada en equivalencias pueden ingresar al siguiente link:

Vídeo suma de fracciones en bloque.

Antes de comenzar con la programación vamos a especificar que es lo que realizará esta aplicación:

A la izquierda se pueden ver bloques de un entero representado como un entero, dos medios, tres tercios, hasta doce doceavos. Y con la ayuda de una barra vertical el estudiante podrá ir viendo la equivalencia entre estas fracciones, facilitando así la manera de hallar el mínimo común múltiplo a la hora de sumar fracciones.

A la derecha de eso podrán escribir la equivalencia que han encontrado a la fracción solicitada, con el botón revisar podrán ver si la equivalencia introducida es la necesaria. 

Luego abajo de ello estará indicada la suma que debe realizar el estudiante, donde deberán ingresar el resultado. Al presionar el botón enviar podrán comprobar si el resultado es correcto.

Al lado del botón enviar hay número del 1 al 7, estos botones son para presentar 7 sumas de fracciones distintas, al apretar un número los demás se bloquean. Lo que lleva al último botón, el botón Reiniciar. Con este botón la barra vertical del lienzo volverá a su posición inicial, los campos de texto se restablecerán quedando en blanco, y los botones para elegir un nuevo ejercicio de suma de fracciones se habilitarán.

Además, a continuación se presentará una propuesta de Actividad para realizar junto a la aplicación.

Actividad propuesta.

Juan tenía muchas ganas de comer helado, por lo que le pidió dinero a su madre para comprar uno. Al volver a casa con el helado, la madre se dio cuenta que era demasiado así que lo más probable es que Juan no podría comerlo todo. Es por ello que la madre de Juan decidió partir el helado en dos tercios.

El hijo recibió con gusto el helado que le dio la mamá, pero aún quería más. La mamá al escuchar ello decidió darle un cuarto más del total del helado que trajo el niño. 

Y además, la mamá le dijo a su hijo que si podía decirle cuanto helado había comido, mañana también podría comer otro.

• ¿Puedes ayudar a Juan a saber cuantas partes del helado se comió finalmente?

• ¿Qué sucedería si la segunda vez que la madre le dio helado, en vez de darle un cuarto del total, le hubiera dado un cuarto del helado restante?¿Cuántas partes del helado habría comido Juan?

Lo ideal es que al plantear este problema al estudiante, pueda ayudarse de la aplicación que se va a programar a continuación, observándolo las fracciones desde lo pictórico, y definiendo equivalencias para poder sumar fracciones heterogéneas. 

Ahora comencemos con la realización de la aplicación.

Respecto a las imágenes que verás a continuación, puedes poner la primera o formar la primera con las demás de modo que quede igual, la ventaja de hacerlo como la segunda manera es que hay posibilidad de integrar en un futuro una opción que permita arrastrarlas por separado y poder organizarlas como el estudiante prefiera.

Las imágenes a utilizar serán:

Ya con las imágenes determinadas, debes disponer en el siguiente orden el visor de tu aplicación. Lo que se utilizó fue disposiciones verticales y horizontales, un lienzo, spriteimagen, botones, etiquetas, campos de texto y un notificador.

Nótese que el visor está en Monitor Size, pues es el que mejor representa los píxeles de la pantalla de mi celular.

También te recomiendo cambiar el nombre de los textos, botones y spriteimagen para facilitar el trabajo al momento de programar.

Vamos a comenzar programando el deslizador, lo ideal es que el alto de esta imagen cubra por completo a los 12 bloques de fracciones, en el visor se ve pequeño pero verás que al emular la aplicación se verá correctamente.

Para mover este deslizador debemos hacer un algoritmo similar al realizado en el taller 1 para mover al perro. Lo cual queda de la siguiente manera:

Al tomar el Xactual el deslizador se moverá de izquierda a derecha siguiendo nuestro dedo, pero como tiene y=0 quedará fijo en cuanto a la altura, por lo que no subirá ni bajará.

Programado ello, el estudiante ya podrá intuir cuales son las equivalencias al ayudarse con el deslizador.

Por lo que, ahora vamos a programar los botones del 1 al 7 que presenten siete sumas distintas.

En mi caso, la primera suma será 2/3+1/4, donde 2/3 es equivalente a 8/12 y 1/4 es equivalente a 3/12, con un mínimo común múltiplo igual a 12.

Para hacer que los números se muestren en pantalla debemos realizar lo siguiente:

Pero queremos que al apretar el botón 1, los demás botones se des-habiliten para que el estudiante pueda realizar tranquilamente los cálculos necesarios. Por lo que los bloques quedarían así:

Entonces, al momento de apretar el botón 1 se presentarán en la primera casilla el 2/3 y en la segunda casilla el 1/4, tanto en la suma como en el apartado de equivalencias.

Para programar la verificación de la equivalencia, debemos crear una variable que en este caso llamaremos equivalencia. Está variable debe ser inicializada en 0.

Cada vez que se apriete un botón del 1 al 7, se pondrá la variable con el valor correspondiente al botón.

Luego de ello vamos a crear un procedimiento llamado equivalencia_fracciones, para que nos indique si la equivalencia ingresada por el estudiante es la correcta o no. El modo de realizar esta operación es con un si...entonces, donde se lea el texto del campo de texto y lo compare con el resultado correcto, si el resultado es el solicitado entonces el notificador le dirá al estudiante que está bien, y si no, el notificador dirá que está mal.

Programado ello, cuando se presione el botón Revisar, se llamará a este procedimiento.

Programado ese procedimiento ahora haremos algo muy similar para comprobar si el resultado de la suma del estudiante es el correcto.

Al igual que antes se creará una variable inicializada en 0 para el resultado.

Además cuando le demos clic al botón 1 se pondrá esta variable con el valor 1. Para que el procedimiento pueda identificar que suma se está realizando.

Luego de esto crearemos el procedimiento al igual que antes:

Y finalmente, cuando se apreté enviar, se llamará a este procedimiento.

Ya hemos programado el deslizador, el apartado de equivalencias y la realización de la suma, por lo que nos falta el botón reiniciar. Un poco más arriba ya se explicó que es lo que este botón realizaría, entonces solo me limitaré a mostrar los bloques.

Como puedes ver solo he mostrado la programación del botón 1, esto se debe a que los demás botones funcionan de la misma forma, solo hay que cambiar el valor de cada fracción.

Por si no te quedó claro, aquí te mostraré con una imágenes como quedarían los bloques incluyendo al botón 2.

Con esto ya concluye la realización de la aplicación, queda para ti el desafío para terminar los demás botones, puedes agregar mas botones para tener mas sumas o incluso realizar sumas aleatorias mediante la creación de listas.

Antes de dar por terminada esta entrada te dejare un vídeo de que es a lo que debes llegar, junto a un link que te permita descargar la aplicación terminada para que te puedas guiar o si quieres animarte a mejorarla. 

Archivo aplicación Suma de Fracciones.

¡Mucha suerte, espero hayas aprendido!