Zabbix Certified Quiz 📊

Aplicación web interactiva para practicar preguntas de exámenes de certificación Zabbix con los colores oficiales de la marca.

https://zabbix.sergiosoriano.es

🌟 Características

• ✅ Interfaz moderna y responsive
• ✅ Múltiples sets de preguntas (archivos JSON)
• ✅ Preguntas aleatorias en cada intento
• ✅ Feedback inmediato con respuestas correctas
• ✅ Barra de progreso y puntuación en tiempo real
• ✅ Colores oficiales de Zabbix Brand Guidelines
• ✅ Arquitectura modular (HTML, CSS, JS separados)

📁 Estructura del Proyecto

zabbix-quiz/
├── src/                  # Código fuente
│   ├── index.html       # Estructura HTML
│   ├── styles.css       # Estilos CSS
│   ├── script.js        # Lógica JavaScript
│   ├── questions.json   # Preguntas principales
│   └── *.json          # Otros sets de preguntas
├── config/              # Configuración
│   └── nginx.conf       # Config servidor web
├── docker-compose.yml   # Docker
├── Makefile            # Automatización
└── README.md           # Documentación

🚀 Inicio Rápido

Opción 1: Python (Desarrollo)

make dev
# Accede a: http://localhost:8000/

Opción 2: Docker (Producción)

make docker-up
# Accede a: http://localhost:82/

🛠️ Comandos Disponibles

make dev            # Servidor Python (puerto 8000)
make docker-up      # Iniciar Docker (puerto 82)
make docker-down    # Detener Docker
make docker-logs    # Ver logs
make status         # Estado del contenedor
make clean          # Limpiar recursos

📝 Añadir Preguntas

Crear nuevo set de preguntas

1. Crea un archivo JSON en src/ (ej: src/zabbix-advanced.json)
2. Usa este formato:

[
  {
    "question": "Tu pregunta aquí?",
    "options": [
      "Opción 1",
      "Opción 2",
      "Opción 3",
      "Opción 4"
    ],
    "answerIndex": 0
  }
]

3. Añade el nombre del archivo en src/script.js:

const possibleFiles = [
    'questions.json',
    'zabbix-advanced.json',  // ← Añadir aquí
];

Nota: answerIndex empieza en 0 (primera opción = 0)

🎨 Colores Oficiales Zabbix

Color	Código	Uso
Rojo Zabbix	#D40000	Botones, títulos
Azul Oscuro	#0C2447	Fondo de página
Azul Brillante	#0099CC	Acentos, progreso

🔧 Personalización

Cambiar colores

Edita src/styles.css:

:root {
    --zabbix-red: #D40000;
    --zabbix-dark-blue: #0C2447;
    --zabbix-bright-blue: #0099CC;
}

Cambiar puertos

# Python
make dev PORT=3000

# Docker
DOCKER_PORT=3000 make docker-up

🐛 Solución de Problemas

Error al cargar preguntas

• Verifica que los archivos .json estén en src/
• Comprueba el formato JSON (sin errores de sintaxis)
• Revisa la consola del navegador (F12)

Puerto ocupado

# Cambiar puerto
make dev PORT=3001
DOCKER_PORT=3001 make docker-up

Docker no inicia

docker compose logs  # Ver errores
make clean          # Limpiar
make docker-up      # Reintentar

🔒 Seguridad (Nginx)

El archivo config/nginx.conf restringe el acceso solo a archivos necesarios:

• ✅ index.html, styles.css, script.js, *.json
• ❌ Bloquea archivos de configuración

📱 Compatibilidad

• ✅ Chrome, Firefox, Safari, Edge (últimas versiones)
• ✅ Dispositivos móviles (responsive)

🤝 Contribuir

1. Añade preguntas en src/*.json
2. Mejora estilos en src/styles.css
3. Agrega funcionalidades en src/script.js

📚 Referencias

• Zabbix Brand Guidelines
• Zabbix Documentation
• Zabbix Certification

---

¡Buena suerte con tu certificación Zabbix! 🎯