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.

$scope.comenzar = textoOriginal => {
	if (!textoOriginal) return;
	$scope.haComenzado = true;
	let textoComoArreglo = textoOriginal
			.replace(/[áéíóúñ]/g, coincidencia => {
				return {
					á: "a",
					é: "e",
					í: "i",
					ó: "o",
					ú: "u",
					ñ: "n"
				}[coincidencia];
			})
			.replace(/\W+/g, " ")
			.toLowerCase()
			.split(" "),
		contador = 0,
		textoModificado = [];
	textoComoArreglo.forEach(palabra => {
		if (
			$scope.deberiaBorrarEstaPalabra() &&
			contador < $scope.minimaSeparacionEntreInputs
		) {
			contador++;
			textoModificado.push({
				palabraOriginal: palabra,
				palabraIntroducida: ""
			});
		} else {
			textoModificado.push({
				palabra: palabra
			});
			if (contador > 0) contador--;
		}
	});
	$scope.textoModificado = textoModificado;
};

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:

$scope.deberiaBorrarEstaPalabra = () => {
	let arreglo = [false, false, false, true, false, false, true];
	return arreglo[Math.floor(Math.random() * arreglo.length)];
};

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.

<div class="container-fluid" ng-app="app">
    <div class="row" ng-controller="MainController">
        <div class="col-12" ng-if="!haComenzado">
            <div class="form-group">
                <label for="texto">Pega el texto aquí: </label>
                <textarea class="form-control" ng-model="texto.texto" name="texto" id="texto" cols="30" rows="10"></textarea>
            </div>
            <button ng-click="comenzar(texto.texto)" class="btn btn-success">Comenzar <i class="fa fa-arrow-right"></i></button>
        </div>
        <div class="col-12" ng-if="haComenzado">
            <br><button ng-click="volver()" class="btn btn-warning"><i class="fa fa-arrow-left"></i> Volver</button>&nbsp;<button ng-click="comenzar(texto.texto)" class="btn btn-primary">Mezclar <i class="fa fa-refresh"></i></button>
            <form class="form-inline">
                <span ng-repeat="palabra in textoModificado">
		<span ng-if="palabra.palabra">{{palabra.palabra}}&nbsp;</span>
                <div ng-if="palabra.palabraOriginal">
                    <input enfocar-siguiente-al-presionar-enter ng-style="{'width': ( (palabra.palabraOriginal.length === 1 ? 44 :  palabra.palabraOriginal.length <= 7 ? palabra.palabraOriginal.length * 25 : palabra.palabraOriginal.length * 9)) + 'px'}" ng-model="palabra.palabraIntroducida"
                        class="form-control" ng-class="{'is-valid': palabra.palabraOriginal === palabra.palabraIntroducida , 'is-invalid': palabra.palabraOriginal !== palabra.palabraIntroducida}" type="text">
                </div>
                </span>
            </form>
        </div>
    </div>
</div>

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: https://codepen.io/parzibyte/pen/VMRggY/