Escribir nuevos niveles

[omiras]

Análisis

• • Que haya diversos niveles de dificultad. Primero un push fácil, luego un push más complicado

• Haremos tantos niveles como métodos de array "importantes" hay (25)

• Podemos empezar por hacer niveles simples para aprovechar tal y como funciona la App ahora, esto es, métodos de array SIN uso de objetos

• Creo que sería adecuado en esta issue arreglar el avance del progreso del juego, que actualmente no funciona. update: parece que si funciona, pero comprobarlo igualmente.

• No podemos dejar ladybug suelto, porque no da una idea al usuario que tiene que ponerlo entre comillas. Cambiar el array myGrass a : myGrass = ["ladybug","ladybug","ladybug","ladybug"];

• Seria adecuado en esta issue hacer que los animales se rendericen usando la propiedades myGrass o myGrassSolution de cada objeto del fichero js/levels.js

• ¿Qué debe aparecer en HTML Viewer?

  1. Un poquito de "lore". Si no algo así como "La mariquita ladybug quiere añadirse al resto de sus amigas al final de array. Ayúdala usando el método push"

• En la primera iteración de esta issue vamos a crear 12 niveles, a gusto de los programadores (recomiendo focalizar en aquellos que ya habéis utilizado en clase)

Definimos la arquitectura final de la app en cuanto al renderizado de niveles y comprobación de la solución:

myGrass: Contiene el array inicial que se va a mostrar al usuario, y sobre el cual tendrá que aplicar el método de array de forma correcta. myGrassSolution: Contiene el array final con la solución. Si el array inicial tras aplicar el método propuesto por el usuario es exactamente al array en myGrassSolution; el ejercicio es correcto (funcionalidad ya existente!) boardMarkup: Contiene la renderización del nivel inicial. Podemos usar clases para el nivel, ids, etc. boardMarkupSolution: Es la renderización que debe verse tras superar con éxito el nivel . Esto hay que cambiarlo en el código actual!; pues actualmente renderiza myGrassSolution lore: Breve historiteta de lo que se pretende conseguir en el nivel. Ejemplo : "La abeja no es bienvenida en la madriguera de los gusanos. Expulsala con el método pop". Tenéís que cargar la información de esta propiedad en la caja negra, en ve del boardMarkup.

[SaraaLee]

1. hemos definido los metodos de array que podrian ser susceptibles de salir

2. Hemos arreglado el array para ponerle las comillas.

3. Hemos definido el orden de los 12 primeros niveles

4. PUSH

5. POP

6. SHIFT

7. UNSHIFT

8. SLICE

9. SPLICE

10. REVERSE

11. CONCAT

12. INCLUDES

13. FIND

14. FINDINDEX

15. SOME

[omiras]

• Problema que tenemos es que, si son dos array lo que hay que comparar, el código funciona
• El programa que espera que existe una variable de nombre myGrass. Al usar el método arrayEquals nos dice si exactamente dos arrays son iguales, y eso es una certeza de que el ejercicio está bien
• Pero podrian hacer trampa haciendo lo siguiente:
• Esto podria solucionarse en parte, si volvemos a poner let myGrass -> const myGrass

myGrass = ["ladybug", "ladybug", "ladybug", "ladybug", "ladybug"]

• Depende el nivel donde nos encontramos, para comprobar si un ejercicio bien, SIEMPRE se llama a una funcion,
• La función podria llamarse checkLevelCorrect. La función debe recibir: el nivel a comprobar, TODO el código introducido por el usuario

• La función es un switch por nivel:

  • switch(currentLevel):

  • En cada switch podemos libremente hacer las comprobaciones que creamos oportunas.

  • Tipo: un includes para ver si el usuario ha puesto el metodo 'push'. Un arrayEquals para ver si los array son iguales

  • al final el switch devuelve un true o false

[SaraaLee]

Queridos beetlepusheros, he estado dándole vueltas este fin de semana a la nueva función que debería validar los niveles, para poder incluir aquellos que den resultados diferentes a un array (valores booleans, strings, numbers...). Siguiendo las instrucciones de Oscar he creado esta función:

De momento son condiciones muy literales, habrá que ir puliéndolo por si se puede refactorizar.

Además del switch, esta función incluye también la parte del código que dejaba pasar de nivel si la solución era correcta ( aunque he detectado que a partir de cierto nivel deja de hacerlo). También hay que repasar esto.

Adjunto Pastebin para el que quiera ver todo el código de la function.

A ver que os parece. No voy a hacer push de la issue-14, a no ser que se de luz verde al código.

https://pastebin.com/aX6h5HkE

Estaba pensando en hacer un bugs.js que sea un objeto que incluya los diferentes bichos que tenemos con propiedades tipo: numero de patas, si es alado, etc... Decidme si os parece buena idea también.

Hasta mañana empujadores de escarabajos!

[Andreu-G]

Si haces "includes", éste comprueba que exista ese string, no que sea ese en concreto. Es decir, que con ese código, si el usuario hace:

myGrass.push('ladybug')asdasdasd

includes() comprobará que "myGrass.push('ladybug')" existe en el input del usuario, y como es cierto, dará correcto. Llegados a este punto, yo comprobaría directamente que ambos strings sean exactamente iguales.

A parte de eso, buen trabajo 👍, ya iremos iterando. Voto por mirar lo del bugs.js en clase, porque imagino que cambiará bastantes cosas y no podemos decidirlo a la ligera.

[SaraaLee]

Para lo que comenta Andreu se me ocurre usar una expresión regular

https://gyazo.com/c87e7de84d18e591575f60d1bc343821

case 0: let expresion = /^myGrass.push('ladybug')$/g let expresion2 = /^myGrass.push("ladybug")$/g

    isCorrect = expresion.test(inputUser) || expresion2.test(inputUser)

    break;

ahora nos evitariamos esos trolleos de añadir mas cosas al string y que lo validara

[fataranto]

Yo creo que se debería definir todo en una función recibiendo parámetros de cada nivel tipo: method: "push", elements: ["ladybug", "ant"], solution: "myGrass.push("ladybug", "ant")

A partir de allí la función puede ir verificando cada paso y respondiendo el error con un mensaje del tipo, si la solución no contiene el string "push" responde con un error "debes utilizar el método push", si lo contiene, verifica los elementos que tiene que utilizar y recién entonces verificar si el resultado es igual a la solución. De esta manera, podemos pasar a verificar si los dos arrays son iguales, como ya lo venimos haciendo, o lo que estuvimos probando esta semana, en el caso de que el resultado esperado sea un número o un boolean.

[SaraaLee]

Me gusta tu idea Fabián ! Podemos tener un feedback con el usuario para darle alguna pista de dónde o porqué se ha equivocado.

[omiras]

FIND

1. Ver si contiene la palabra myGrass.find
2. evaluar el input del usuario eval(text) == "ladybug"

[omiras]

@Ste2812 comenta que el link de ayuda debería abrirse en una pestaña nueva.

[omiras]

@SaraaLee Escribe los tests para al menos 1 nivel que sea interesante de probar.

[SaraaLee]

// TEST

PARA EL NIVEL #9

• El usuario debe posicionarse en el JavaScript Editor
• Primero escribirá el método de array : myGrass.concat()
• Ahora debe llamar al segundo array dentro del método, el usuario añadirá myGrass.concat(myGrassBaby)
• Para comprobar si el ejercicio se ha resuelto correctamente hará click en el botón de Ejecutar

PARA EL NIVEL #10

• El usuario debe posicionarse en el JavaScript Editor
• Primero escribirá el método de array : myGrass.fill()
• Ahora debe añadir el string "butterfly" dentro del método, el usuario tendrá que tener escrito lo siguiente myGrass.fill("butterfly")
• Para comprobar si el ejercicio se ha resuelto correctamente hará click en el botón de Ejecutar

[omiras]

Hola,

He estado trabajando un poco en esta, creo que ya lo tenemos. Podéis bajar la rama issue-32-new-eval .

Hay que adaptar un poco los niveles pero podemos llegar a poner lo que queramos por nivel. Ejemplo:

Variables importantes:

variableToCheck: Indica cual es la variable que hay que usar para comparar su evaluación con myGrassSolution myGrass: El código inicial para el usuario myGrassSolution: El valor que esperamos obtener de la variable 'variableToCheck'. Funciona bien, pero ya os comentaré que si el resultado es un array que muta, tenemos que poner sus elementos como strings separados por una coma. Tengo que probarlo con objetos todavía