FOAP-NetMind-2022 / beetlepush

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

Escribir nuevos niveles (añadir métodos) #32

Closed omiras closed 2 years ago

omiras commented 2 years ago

Nuevos niveles

omiras commented 2 years ago

Para añadir nuevos niveles, se necesita modificar 2 archivos:

levels.js

Crear un nuevo objeto para el nuevo método. Fijarse en como se utilzan cada una de las propiedades del objeto y añadir los valores necesarios para el nuevo método

   * LEVEL 14
   *  *********************/
   {
    helpTitle: "Filter method will create a new array ...",
    selectorName: "Every method",
    doThis: "What do they have in common ?",
    selector: ".dance",
    syntax: "every();",
    help: "The every() method checks if all elements in an array pass a test (provided as a function).Method return true/false if the function returns true/false for all array elements <a href= 'https://www.w3schools.com/jsref/jsref_every.asp'> more help </a>",
    examples: [
      //example with every method using names array
      '<strong>1</strong> const names = ["John", "Mary", "Joe"]; <br><strong>2</strong> const allNames = names.every(name => name.length > 3);<br> <strong>3</strong> console.log(allNames);',
      '<strong>TERMINAL</strong> <br> <div class="console-wrapper"> false</div>',

    ],
    myGrass : [{name:'ladybug',fly:true, poisonous: false, color: 'red'},{name:'bee',fly:true, poisonous: true, color:'yellow'},{name:'dragonFly',fly:true, poisonous: false, color:'turquoise'}],
    myGrassSolution : ['ladybug','ladybug','ladybug','ladybug','ladybug'],
    completed: false,
    userSolution: "",
    boardMarkup: `
    <bracket>
    <grass>
     <ladybug>
    </grass>
    <grass>
     <bee>
    </grass>
    <grass>
     <dragonFly>
    </grass>
    </bracket>

    `,
    boardMarkupSolution: ` 
    <bracket>
    <grass>
     <ladybug class= "dance">
    </grass>
    <grass>
     <bee class= "dance">
    </grass>
    <grass>
     <dragonFly class= "dance">
    </grass>
    </bracket>
  `,
  instructions: "<div style='font-size:20px'> Congratulations you have reached the last level. <br><br>In this level we have an array of objects. For example: {name: 'worm', fly: false, poisonous: false} taking in to account these propierties, use the every() method to find out what do they have in common .</b></div>" 

  },

field.js

Es necesario modificar la función checkIfCorrect para el nuevo nivel. Básicamente hay que añadir un nuevo case en el switch

omiras commented 2 years ago

Podéis mirar ejemplos de cómo utilizar los métodos de array en estos ejercicios comentados: https://github.com/omiras/array-playground

omiras commented 2 years ago

map simple

map objetos

Nota: fijaos que en otros ejercicios Sara y Fabian han nombrado el nombre del bicho también con la propiedad "name"

myGrass: [{ // name: "ladybug", // weight: 100 // }, { // name: "spider", // weight: 150 // }}

myGrassSolution: [ // { // name: "ladybug", // weight: 200 // }, { // name: "spider", // weight: 300 // } // ]

Ordenar objetos (sort)

Ordenar un array de bichos por peso. De menos pesado a más pesado.

myGrass: [{ // name: "ladybug", // weight: 100 // }, name: "butterfly", // weight: 33 // },{ // name: "spider", // weight: 150 // }]

omiras commented 2 years ago

Debemos cambiar el arrayEquals por un método que realmente compruebe si dos arrays son iguales. La biblioteca loadsh nos va a permitir realizar esta comparación

https://www.geeksforgeeks.org/lodash-_-isequal-method/

Image

SaraaLee commented 2 years ago

Image

SaraaLee commented 2 years ago

####### OPCIONAL PARA LA CADENITA

<grass>
                <ant class= "dance">
              </grass>
              <grass style="background-image: url('/images/insects/antString2.png'); background-repeat: no-repeat; background-position: center; border: 0px">
              </grass>
              <grass>
                <ant class= "dance">
              </grass>
              <grass style="background-image: url('/images/insects/antString2.png'); background-repeat: no-repeat; background-position: center; border: 0px">
              </grass>
              <grass>
                <ant class= "dance">
              </grass>
omiras commented 2 years ago

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:

Image

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

Image