Trivia (Laboratoria)

• Este proyecto se realizó siguiendo estas consideraciones El Proyecto , lo desarrollamos dentro de la semana de Pre - admisión de Laboratoria - Sede Lima y lo mejoré posteriormente

• Periodo : 26 - 29 Abril, 2021

Proyecto para postulación de Laboratoria, se usó HTML, CSS y JS

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Criterios que cumple el proyecto
• 5. Consideraciones técnicas

---

1. Preámbulo

La trivia es un tipo de juego, generalmente en el marco de un concurso, en el que se plantea una serie de preguntas cuyas respuestas deben ser escogidas entre diferentes opciones.

En la actualidad, con lo extendido del uso de smartphones, sus aplicaciones, y el acceso a Internet, existen muchas posibilidades de participar de una trivia online. Con una rápida búsqueda en internet, te podrás dar cuenta que existen trivias de muchas temáticas (ciencia, series, televisión, etc.), Hay varias que, incluso, ofrecen dinero como recompensa.

2. Resumen del proyecto

Esta es una aplicación web que le permita a un usuario responder distintas preguntas escogiendo sus respuestas de una lista de alternativas.

3. Objetivos de aprendizaje

Los objetivos en general son los siguientes, de los cuáles utilicé los que están con ✓:

HTML y CSS

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construye tu aplicación respetando el diseño realizado (maquetación).

JavaScript

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Declaración correcta de variables (const & let)

Estructura del código y guía de estilo

• Utilizo identificadores descriptivos (Nomenclatura | Semántica).

4. Criterios que cumple el proyecto

• Mostrar una pantalla de bienvenida, pida tu nombre para comenzar a jugar.
• Mostrar un mensaje de Hola [tu nombre] y dos botones para comenzar a jugar.
  • Jugar con preguntas de tipo A (Por ejemplo: sobre comida)
  • Jugar con preguntas de tipo B (Por ejemplo: sobre cervezas)
• Lanzar la pregunta 1 con alternativas, el usuario responde, luego se muestra la pregunta 2 y luego la 3.
• Mostrar una pantalla de resultados (respuestas correctas) y dos botones de volver a jugar:
  • Jugar con preguntas de tipo A (Por ejemplo: sobre comida)
  • Jugar con preguntas de tipo B (Por ejemplo: sobre cervezas)
• Agregar una cuenta regresiva con un tiempo límite para responder cada pregunta.
• Subir tu código a GitHub (commit/push) y desplegar la interfaz usando GitHub pages.

Definición del producto

¿Cómo el producto soluciona los problemas/necesidades de dichos usuarios?

Esta aplicación les permite a los usuarios relajarse un momento, ya que es muy intuitiva para usarlo, no demorará en reponder las preguntas y saber su puntaje final.

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

En estos mockups, se planteo el esquema del juego:

Plantilla de Bienvenida

Plantilla de Categoria

Plantilla de Preguntas

Plantilla de Resultados

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

A continuación muestro como quedó el Juego de Trivia :

En la pantalla de BIENVENIDA, se solicita al usuario su nombre para empezar a jugar.

Pantalla de INICIO

Una vez escriba su nombre debe darle click en ENTRAR

Pantalla de INICIO

En la pantalla CATEGORIA, se muestra el nombre del usuario a su vez, se solicita al usuario que seleccione una de las categorías. Una vez selecciona una de ellas, lo redireccionara a la sección de preguntas, de acuerdo a la categoría seleccionada.

Pantalla de CATEGORIA

En la pantalla PREGUNTAS , si el usuario no selecciona nada, se agota su tiempo de 10 segundos.

Pantalla de PREGUNTAS (Aparece un timer que contabiliza un tiempo para pasar a la siguiente pregunta)

En la pantalla PREGUNTAS , al agotarse el tiempo pasa a la siguiente pregunta automaticamente.

Pantalla de PREGUNTAS (Aparece un timer que contabiliza un tiempo para pasar a la siguiente pregunta)

En la pantalla PREGUNTAS , el usuario selecciona una opción de respuesta, si esta es correcta el juego le avisará y a su vez se desactivaran todas las respuestas, debe darle click a NEXT.

Pantalla de PREGUNTAS (Aparece un timer que contabiliza un tiempo para pasar a la siguiente pregunta)

En la pantalla PREGUNTAS , el usuario selecciona una opción de respuesta, si esta es incorrecta el juego le avisará y a su vez se desactivaran todas las respuestas, debe darle click a NEXT.

Pantalla de PREGUNTAS (Aparece un timer que contabiliza un tiempo para pasar a la siguiente pregunta)

En la pantalla RESULTADOS se muestra las respuestas, e indica cuáles fueron correctas y cuáles fueron incorrectas. Asimismo, el usuario tiene la opción de volver a jugar, o finalizar el juego.

Pantalla de RESULTADOS (Al cerrar sesión, se inicia el juego nuevamente)

5. Consideraciones técnicas

La lógica del proyecto esta implementada completamente en JS, HTML y CSS En este proyecto NO se uso librerías o frameworks, solo vanilla JavaScript.

index.html

Acá va la página que se muestra al usuario, también nos sirve para indicar qué script se usa y une todo lo que hemos hecho.

style.css

Este archivo contiene las reglas de estilo.

main.js

Acá está todo el código que tiene que ver con la interacción del DOM (seleccionar, actualizar y manipular elementos del DOM y eventos), entre otras funciones que son necesarias para actualizar el resultado en la pantalla (UI).

Realizado por :

Sammy Gigi Cantoral Montejo (sgcm14)