https://spa-trivial.netlify.app/
El proyecto consiste en crear una single page application en la que mostraremos un Quiz.
Características:
- El Quiz constará de 10 preguntas. Cada pregunta tendrá 4 opciones y solo una de ellas será la correcta.
- Deberán ser preguntas que vengan de https://opentdb.com/ u otras API´s.
- La Aplicación tendrá que ser una SPA(single-page-application). Solo una pregunta cada vez en pantalla.
Esta sección incluye el lenguaje de etiquetado,maquetación y programación empleado
Pantalla de inicio del programa
Una vez pulsado el botón Start se muestra la primera pregunta y cuatro botones con las posibles respuestas. Debajo de las mismas hay una barra de progreso.
Una vez pulsado uno de los botones se marcará en amarillo la respuesta correcta y las incorrectas temblarán y se oscurecerán. Tras esto aparecerá un botón "Next" que nos llevará a la siguiente pregunta.
Una vez acabado el Quiz se mostará la puntuación obtenida. Se nos dará opción de volver a empezar o de mostrar una gráfica con el historial de aciertos de todas las partidas acumuladas.
La gráfica mostrará el número de acierto pro partidas jugadas.
- Estructura básica HTML
- Añadido barra de navegación
- Contenedores preguntas y respuestas
- FlexBox
- Diseño Responsivo
- Stats chart in home
- Barra de progreso
- Uso de local storage
- Petición de datos a Api´s
- Randomizar respuestas
- Gestión de falsos clicks
- Gestión de puntuación
- Implementación de gráficas
- Para guardar contadores
- Control de asincronías
- Modal inferior
- Gestión de caracteres
- Destructuración de funciones
- Refactorización de código
- Implementación de sonidos por puntuación
Jorge Campo
Germán Molero