search

FOAP-NetMind-2022 / beetlepush

Learn JavaScript array methods
https://beetlepush.vercel.app/
Mozilla Public License 2.0
4 stars 0 forks source link

Funcionalidad Nivel 1 #2

Closed omiras closed 2 years ago

omiras commented 2 years ago

Objetivo

Queremos que al cargar la app, se muestre el primer nivel del juego. El primer nivel del juego va a ser el método push.

Análisis

  1. El usuario accede a /
  2. Aparece la información del primer nivel, tal y como se muestra en la captura de pantalla
  3. El objetivo de este nivel es "pushear" una naranja, que originalmente aparece fuera del plato, dentro del úlitmo plato.
  4. El usuario escribe la solución en la cajita blanca
  5. El usuario pulsa Enter o bien hace click encima del botón para comprobar su solución 4.1 Si no es correcto: toda la pantalla de código vibra 4.2 Si es correcto, la naranja debe "saltar" al plato.

Image

  1. El usuario deberia poder escribir libremente código JavaScript. Podemos utilizar la función eval para evaluar si el código JavaScript que escribe el usuario y lo que deberíamos obtener tras ejecutar el método de array, coincide.
  2. Exactamente, ¿qué deberíamos comprobar para saber si el usuario ha puesto bien el código?¿Si dos arrays al final de ejecutar el código JS son iguales? ¿Depende de cada ejercicio?
  3. Ver como levels.js puede albergar la solución del ejercicio. ¿Vamos a necesitar modificar la estructura?

Nivel 1

Cómo probar la funcionalidad

omiras commented 2 years ago

Acordaos por favor de escribir la sección: "Cómo probar la funcionalidad", podéis seguir esto de modelo: https://github.com/Singulars2022/cinedebarrio/issues/13#issuecomment-1103786573

thebadjavi commented 2 years ago

Análisis Técnico

Entender el levels.js y restaurants.js elaborar como comprobar la correccion

Instrucciones de prueba

Es Case sensitive es pide una sentencia JavaScript que resuelva lo demandado.

una vez dentro del input comprobamos que lo que introduce el usuario resuelve de manera correcta lo que se le pide, además de tener un control de errores con try catch.

fataranto commented 2 years ago

Se ha corregido que no llegaba a verse la animación cuando el usuario resolvía el ejercicio, de hecho, lo que hacía era actualizar la vista justo al momento de cambiar de nivel, ahora se puede ver el resultado y luego de un par de segundos cambia de nivel. Para probarlo, funcionan los dos primeros niveles: nivel 1: hay que hacer un push de "orange" al array myGrass para poner la naranja que está suelta sobre la mesa al final, dentro de un plato. Para eso escribimos en la primer línea del editor: myGrass.push("orange") nivel 2: hay que eliminar el último elemento: myGrass.pop() El nivel 3 no tiene un ejercicio asignado todavía

omiras commented 2 years ago

Buen día! La idea es no hacer más niveles, solo un par para ver si funciona, así que con dos niveles me parece suficiente. Sugiero eliminar los demás. Recuerdo que faltaban algunos detalles visuales.

Encontramos además algún bug; como que si probabas un código y no era correcto, luego no funcionaba el hecho de poner el código correcto. Vimos algunos mensajes de error en la consola del navegador, lo podemos revisar hoy!

omiras commented 2 years ago

Información que debería aparecer para cada nivel:

  1. Pequeña descripción de método (explicadlo con vuestras palabras, pero os podéis basar en Mozilla o W3school)
  2. Enlace a una de estas páginas explicando el método
  3. Un ejemplo de uso en el panel de la derecha
  4. En el botón "help me I'm stuck!" podéis poner una descripción similar a la CSS Dinner, explicando de qué va el ejercicio y lo que tienen que poner para solucionarlo.
SaraaLee commented 2 years ago

Hola mis queridos Beetlepusheros, aquí propuesta de qué se podría meter en la parte del editor....

Propuesta del texto, poner una explicación del ejercicio tipo Froggy, en la parte donde estaba antes el HTML del repo original. Por ejemplo: Bienvenido al nivel 1 de Beetle Push, aquí tenemos un array de Ladybugs que blablabla.... Explicación poco técnica pero que le de un sentido a la temática de la app y el juego.

Podemos colaborar entre todos (¿?) para ir escribiendo los textos de cada nivel , (issue a parte ?, asignarla a esta?)

Ya me decis

fataranto commented 2 years ago

Están implementados los cambios y la funcionalidad.

Para probarlo, funcionan los dos primeros niveles: nivel 1: hay que hacer un push de "orange" al array myGrass para poner la naranja que está suelta sobre la mesa al final, dentro de un plato. Para eso escribimos en la primer línea del editor: myGrass.push("orange") nivel 2: hay que eliminar el último elemento: myGrass.pop()

omiras commented 2 years ago

@fataranto @thebadjavi

Los tests son un poco vagos, no me he explicado bien. Os pongo un ejemplo completo de cómo probar la issue. Voy además, a especificar los posibles resultados.

El test que escribáis debe consistir en un conjunto de pasos : UNO, DOS, TRES que un usuario que no ha implementado la issue, pueda probar.

Método de array incorrecto

  1. El usuario accede al nivel 1
  2. El usuario hace click en el contenedor identificado como JavaScript Editor
  3. El editor debe ganar el foco y el usuario debe poder escribir
  4. El usuario escribe un método de array incorrecto, como por ejemplo, myGrass.push("patata");
  5. El usuario pulsa ENTER o bien hace click en el botón ENTER
  6. JavaScript Editor "vibra" y no ocurre nada más.

Método de array correcto

// TODO :)