- Descripcion del Proyecto
- Mobile First
- Tecnologias usadas
- Objetivos
- Organizacion
- Diseño de producto
- Uso
- Caracteristicas
- Estructura del proyecto
- Funciones principales
- Contribución
- Colaboradores
Este es un proyecto es una aplicación web interactiva de Quiz, este proyecto permite a los usuarios registrarse, iniciar sesión, y responder preguntas aleatorias sobre diversos temas. También permite ver los resultados y los gráficos de rendimiento, se utiliza el FireBase, para la autenticación y el almacenamiento de los datos
Puesto que en la actualidad es tan importante, el uso de los aplicativos en móviles, nuestra aplicación se adapta a los diferentes tamaños de pantalla tanto para pantallas de móviles como de ordenadores de sobre mesa, como podemos observar en las siguientes imágenes:
- Vista movil:
- Vista IPad:
- Vista Desktop:
- HTML.
- CSS.
- JAVASCRIPT.
- CHART.JS
- FIREBASE. Modulos Auth y Firestore.
- ✅ Diseño del Front: diseño responsive, mobile first, semántica HTML5
- ✅ Manipulación del DOM: vista dinámica de preguntas en el DOM, en SPA.
- ✅ Asincronía: obtención de 10 preguntas aleatorias de la API www.opentdb.com
- ✅ Local Storage: guardado de cada partida y fecha de users no logeados en LS
- ✅ Firebase Firestore: almacenamiento de partidas de usuarios autenticados.
- ✅ Firebase Auth: implementación de metodos de acceso Email-contraseña / Google.
- ✅ Gráfica y Tabla: implementacion de grafica con la librería Chart.js y tabla Scores
- ✅ Github: gestión de proyecto con GitHub, uso de ramas, fork y pull request.
- ✅ Despliegue: Despliegue en Github Pages.
- Manejo de Trello
- Uso de Ramas en GitHub
.jpeg "Diseño producto página bienvenida")
.jpeg "Diseño producto página preguntas")
.jpeg "Diseño producto página resultados")
- Ingresa aqui para empezar a jugar
- Regístrate o inicia sesión.
- Comienza el Quiz.
- Responde las preguntas que se van presentando.
- Al finalizar de responder las preguntas, revisa tus resultados y los gráficos de rendimiento.
En una primera pantalla, se muestra la alternativa de realizar el Quiz, sin tener suscribirse, esta alternativa no te da la opcion de ver la grafica de resultados, a diferencia de si nos registramos.
Una vez en el Quiz, realizamos una petición a la Api, la que a traves de un fetch desde JavaScript, nos proporciona un listado de 10 preguntas aleatorias, las cuales con los algoritmos realizados, nos da la alternativa de que el usuario puede seleccionar la respuesta correcta, una vez elegida la respuesta, se pintara la correcta de color verde y las incorrectas de color rojo, para que el usuario pueda ver cual es la respuesta correcta.
La logica del juego esta pensada para que el usuario no pueda pasar la pregunta si no marcó algunas de las respuesta proporcionadas.
Una vez respondidas las diez preguntas, el usuario deberá, dar click al boton de Comprueba tus resultados, el cual lo llevara a una pantalla con la puntuacion obtenida.
Tambien desde esta vista, tienes la posibilidad de acceder nuevamente a otro Quiz, para asi poder obtener el mejor puntaje acumulado.
- index.html: Página principal de la aplicación.
- script.js: Script principal que maneja la lógica del Quiz, autenticación y almacenamiento de los resultados.
- style.css: Estilos para la aplicación.
- assets/: Contiene los archivos multimedia, como los sonidos y la música de fondo.
- pages/: Contiene las páginas adicionales como resultados y el área de las preguntas.
- Autenticación: Registro, inicio y cierre de sesión de usuarios usando Firebase.
- Quiz: Obtención de preguntas desde la Open Trivia Database API, renderizado de manera renderizada y dinámica.
- Resultados: Almacenamiento de resultados en Firebase y LocalStorage y visualización de resultados.
- Gráficos: Generación de gráficos de rendimiento con Chart.js.
Si deseas contribuir a este proyecto, por favor sigue los siguientes pasos:
- Haz un fork del repositorio.
- Crea una nueva rama (git checkout -b nueva-rama).
- Realiza tus cambios y haz commit (git commit -am 'Agrega nueva característica').
- Sube tus cambios a la rama (git push origin nueva-caracteristica).
- Abre un Pull Request.
Los colaboradores de este proyecto somos Miguel Pardal, Emilio Latorre y Stephani Damiani, estudiantes de Full Stack.