Guardar progreso

[omiras]

1. Seguir el ejemplo de CSS diner para guardar el progreso en localStorage
2. Para cada nivel, guardar:
   1. Si está completado
   2. El número de intentos que utilizado el usuario
   3. El código introducido por el usuario para poder precargarlo
   4. Cuando se cargue la app, hay que cargar la info de localStorage para determinar qué nieveles ya están superados.
   5. Cuando un usuario acceda a un nivel en concreto, precargar el código JS que había introducido en el editor JS.

[omiras]

1. Investigar como usa actualmente el localStorage Beetlepush. Intentad entender como funciona.
2. Pensad en que modelo de datos necesitáis para guardar lo que pide issue. Pinta que hay que guardar un array de objetos, donde cada objeto contiene:
   1. Si está completado o no
   2. Un number con el número de intentos hasta completarlo
   3. Un string para guardar el último código que ha intentado (o es ya el correcto) por parte del usuario

[omiras]

Primer punto: modificar el código para que ahora guarde también el JavaScript que el usuario ha introducido para intentar resolver el ejercicio

[omiras]

Segundo punto: Cuando acceda el usuario a un nivel nuevo, bien sea por las flechitas o por el menú, debéis mirar en localStorage si existe una entrada para ese nivel, y precargarle en el editor JavaScript el código que ya había introducido (tanto si ya estana correcto como si lo tenía a medias)

[omiras]

[omiras]

Guardar progreso nuevo

Actualizar progreso

Resetear progreso

• Escribir tests como si la persona fuera un robot, que pasos debe seguir para probar la funcionalidad y que resultado se le espera.

https://github.com/FOAP-NetMind-2022/beetlepush/issues/2#issuecomment-1204042348

[victoriageeks]

Guardar progreso nuevo

1. El usuario accede al nivel (x).
2. El usuario hace "click" en la sentencia Type in an Array method, que es un apartado donde el usuario puede escribir la respuesta de cada nivel.
3. El fondo de la sentencia mencionada anteriormente, parpadeará en color azul aunque el usuario previamente haya hecho "click" hasta que empiece a escribir su respuesta (sea correcta o incorrecta).
4. El usuario escribe un método de array y presiona el botón enter situado a la derecha de la línea 1 en el Javascript Editor, o bien presiona enter de su propio teclado. Su resultado es guardado independientemente esté bien o mal.

Actualizar progreso

Si el usuario ha guardado correctamente su progreso mediante enter, puede avanzar por diferentes niveles aún siendo su respuesta incorrecta en niveles anteriores gracias a la flecha derecha situada en la barra de navegación en la parte superior-derecha. A continuación planteamos una simulación de una situación para actualizar el progreso:

1. El usuario no sabe la respuesta del nivel 1, el usuario escribe en el editor: myGrass.x();
2. El usuario presiona el botón enter.
3. El usuario hace "click" en la flecha derecha y avanza al nivel 2, aún siendo la respuesta del nivel 1 incorrecta.
4. El usuario vuelve al nivel 1 haciendo "click" en la flecha izquierda.
5. El usuario cuando accede al nivel 1, en la línea 1 del Javascript Editor ve su resultado anterior _myGrass.x();
6. El usuario puede actualizar su respuesta borrando su respuesta anterior.
7. El usuario escribe la respuesta correcta myGrass.push('ladybug'); y pulsa enter.

POSIBLE BUG: El usuario si ha puesto la respuesta correcta, cuando avanza de nivel, por ejemplo al 2, y vuelve al 1, no deja escribir y tampoco deja resetear el progreso, el usuario debe refrescar la página para realizar ambas funcionalidades.

Resetear progreso

1. El usuario se situa en la barra de navegación donde explican los niveles en la parte superior derecha, y hace "click" al "menu hamburguer".
2. La barra de navegación se actualizará y mostrará los niveles además de un botón que dice: Reset progress .
3. El usuario hace "click" a dicho botón para resetear el progreso.
4. El usuario es redirigido al nivel 1 donde no ha sido precargado ningún código en el editor.

[omiras]

@thebadjavi Haz un clone nuevo del proyecto y prueba las funcionalidades de los test anteriores. Si alguno no lo entiendes, puedes preguntar a @victoriageeks . Cuando hayas finalizado, me informas a mí y aquí en un comentario, gracias!

[thebadjavi]

1. He actualizado el proyecto lo he iniciado y el editor js en vez de poner “myGrass” pone “undifined”, me sale en los 2 primeros niveles que yo ya tenia completados en los demás niveles que no he pasado aun me sale el texto correctamente de “myGrass”, Supongo que intenta cargar el contenido ya ejecutado anteriormente pero no esta guardado.

2. En la zona de ayuda, el botón debería abrirse en una pestaña nueva solo en los primeros niveles

3. El botón reset progress si haces f5 y vuelves a resetear no vacía el editor js, solo te lleva al lvl 1.

4. Quizás tarda demasiado para cambiar de nivel

5. Si hay un enter en blanco no lo valida como correcto