Si buscas una aplicación web fluida, ligera y totalmente adaptable a cualquier pantalla (móviles, tablets y PC), esta plantilla de Trivia Web es un excelente proyecto demostrativo. Está construida usando únicamente tecnologías nativas (Vanilla JS), sin depender de frameworks pesados como React o Vue, lo que garantiza una carga ultrarrápida.
💡 ¿De qué trata el proyecto?
El proyecto es un juego de preguntas y respuestas de opción múltiple diseñado con una interfaz moderna y atractiva (modo oscuro con paleta de colores azul neón y púrpura).
🌟 Características clave
Sistema de temporizador dinámico: Cada pregunta cuenta con una barra de tiempo visual de 20 segundos. Responder más rápido otorga un bono de puntos.
Detector de rachas: Premia al jugador cuando encadena varias respuestas correctas consecutivas.
Persistencia de récords: Guarda la puntuación máxima del usuario en el navegador utilizando localStorage, diferenciando el récord según la cantidad de preguntas elegidas.
Web Share API: Permite a los usuarios compartir sus resultados directamente en sus redes sociales o copiar la puntuación al portapapeles.
Accesibilidad e interfaz responsiva: Adaptado para navegación táctil, teclado y control remoto (
focus-visible).
🌍 ¿De dónde provienen las preguntas y su API?
El juego funciona bajo un sistema híbrido dual:
1. Modo En Español (Banco Local / Offline)
Origen: Un vector ejecutable interno (
BANCO) escrito directamente en JavaScript.Funcionamiento: No requiere conexión a internet. Las preguntas están organizadas por categorías como Geografía, Ciencia, Historia, Cultura General, Deportes, Tecnología, Entretenimiento y una sección dedicada a Venezuela y Colombia.
Ventaja: Carga instantánea y 100% libre de fallos por red.
2. Modo Internacional (Open Trivia DB API)
Origen: Conexión mediante
fetchasíncrono a Open Trivia DB (opentdb.com).¿Qué es Open Trivia DB? Es una plataforma pública y colaborativa open-source que provee una base de datos con más de 25,000 preguntas de trivia en formato JSON.
Funcionamiento: Consume la API pasando parámetros como cantidad (
amount), categoría (category) y dificultad (difficulty). Las preguntas vienen codificadas en URL (URL Encoding) para evitar errores con caracteres especiales y se decodifican al vuelo condecodeURIComponent().Resiliencia / Manejo de errores: Si la API falla (por falta de internet, límite de peticiones o filtro vacío), el código incluye un bloque
try...catchque detecta el fallo y conmuta automáticamente al banco en español para que la partida nunca se rompa.
🛠️ Ficha Técnica para Desarrolladores
| Componente | Tecnología / Librería |
| Estructura | HTML5 semántico |
| Estilos | CSS Custom Properties (Variables), Flexbox y CSS Grid |
| Fuente | Outfit (Google Fonts) |
| Iconos | FontAwesome 6.5 |
| Lógica | JavaScript ES6+ (Async/Await, Fetch API, LocalStorage) |
Descargar la plantilla aca
