Introducción

Retomando la sección de cosas que hago para usos personales, recuerdo que una vez hice una app para memorizar un texto. Es muy simple, pegas un texto que tienes que memorizar y el software se encarga de eliminar algunas partes de éste y dejarlas en blanco.

Luego, tienes que completar estos campos. Y la app te indica si lo hiciste bien o mal. Si no te gusta la forma en la que se mezclaron las palabras, puedes mezclarlas de nuevo.

Tecnologías utilizadas

• Para su funcionamiento utiliza AngularJS en su versión 1.6.5.
• Para el diseño, aprovecha el bonito estilo de Bootstrap 4.
• Finalmente, los iconos son gracias a Fontawesome.

Explicación y funcionamiento

Trataré de dar una explicación del funcionamiento. Tenemos la interfaz principal compuesta por un textarea y un botón.

Al botón le añadimos el atributo ng-click para que AngularJS se encargue de llamar a la función comenzar, que recibe el texto como argumento.

See the gist on github.

Primeramente detenemos la ejecución si no hay texto, es decir, si lo dejaron en blanco. Luego, quitamos todos los acentos y letras ñ, para que los usuarios no se quejen de que pusieron bien la palabra pero “olvidaron la tilde”.

Luego, separamos todo el texto en cada espacio que encontremos, y lo convertimos en un arreglo. Lo recorremos completamente y en cada iteración hacemos una comparación.

Si el azar nos dice que borremos la palabra, entonces la borramos. Y ponemos en un nuevo arreglo (no el original, sino uno nuevo) un objeto con la palabra original y una cadena vacía, que será la que introducirá el usuario.

En caso de que no se deba borrar la palabra, la ponemos tal y como está.

La variable del contador es para que no queden muchos inputs cercanos o pegados.

¿Debería quitar esta palabra?

Este método se encarga de regresar, de acuerdo a una elección aleatoria, un booleano. Simplemente elige un valor de un arreglo. En el arreglo hay más falsos que verdaderos, pero esto ayuda a que no elimine muchas palabras. El código es este:

See the gist on github.

Verificar si coinciden

Finalmente, para verificar si el usuario introdujo la palabra correcta, en la vista agregamos algunas clases dependiendo de ello. Si está bien, agregamos la clase is-valid y si no, la clase is-invalid. Esto hace que se coloree de verde o rojo.

See the gist on github.

También es importante notar que la anchura del input viene dada de acuerdo a la longitud de la palabra. Dicha anchura o longitud es calculada con una fórmula medio rara pero que al final de todo funciona y cambia de acuerdo a qué tan larga esté la palabra.

Tal vez sería mejor calcular el ancho en una función interna, pero hoy no cambiaré el código.

App final

Así se ve al hacer click en comenzar:

Probar

Aquí dejo un pen para probar la app en vivo. Espero que les guste 🙂

See the Pen Memorizar o estudiar texto by Luis Cabrera Benito (@parzibyte) on CodePen.

Si hay algo que me molesta son los exámenes en donde tienes que utilizar la memoria para responderlos. Qué pereza y qué pérdida de tiempo, prefiero las cosas prácticas. Pero en fin, ojalá a alguien le sirva el software.