Curso de React | 15. Trivial con ReactJS

1. Importamos el .json en nuestra aplicación y mostrar la primera pregunta en pantalla.

2. Mostrar las posibles respuestas de esa pregunta.

3. Añadir un botón por cada una de las respuestas.

4. Al pulsar cada uno de los botones debe mostrarse un mensaje de alerta.

5. Detectar la respuesta correcta. Si es correcta, mostraremos un mensaje de alerta con el texto éxito. Si es incorrecta, mostraremos un mensaje de alerta con el mensaje fracaso.

6. Poner la imagen vinculada a la pregunta.

7. Darle diseño a la aplicación utilizando styled-components.

8. Al acertar una pregunta, avanzaremos a la siguiente.

9. Al fallar una pregunta, retrocedemos a la anterior.

10. Mostrar un popup al ganar el juego.

11. Desordenar las preguntas y las respuestas. Para ello, utilizaremos la siguiente función:

export const  shuffleArray = (array) => {
    let counter = array.length;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        let index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        let temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

Descargar código fuente