🌍 WebQuest: Huella de Carbono, Población y Crecimiento Versión (ES/EN) (pero aplicable a todas las WebQuest de este entorno)
WebQuest bilingüe (Español/Inglés) diseñada para alumnado de ESO/Bachillerato, centrada en la relación entre crecimiento poblacional, emisiones de CO₂ y sostenibilidad global.
Incluye narrativa inmersiva, actividades guiadas, recursos interactivos, evaluación y un quiz autocorregible.
Completamente implementada en HTML + CSS + JavaScript, con diseño responsive y selector de idioma ES/EN.
🚀 Demo en GitHub Pages
🔗 https://franmondejar.github.io/WebQuest/
Versión completamente funcional, accesible y lista para usar en cualquier plataforma educativa.
🎯 Descripción del Proyecto
Esta WebQuest propone una misión narrativa ambientada en el año 2084: el alumnado pertenece a la Generación Renacer, un grupo de jóvenes investigadores que deben reconstruir la historia del colapso ambiental.
A través de pestañas temáticas, los estudiantes trabajan:
- Concepto de huella de carbono
- Impacto del crecimiento poblacional
- Análisis de datos reales
- Reflexión crítica sobre el futuro
- Producción final de un informe multimedia
El recurso está diseñado para su uso en:
- Moodle
- Aula Virtual
- GitHub Pages
- Google Classroom
- Cualquier LMS compatible con contenido HTML
🧩 Características principales
- 🌐 Bilingüe: selector de idioma español/inglés integrado
- 🧭 Navegación por pestañas
- 🎬 Narrativa tipo cine
- 📚 Recursos y enlaces reales
- 🧠 Quiz autocorregible
- ♿ Etiquetas ARIA e inclusión accesible
- 📱 Responsive (móvil/tablet/escritorio)
- 🎨 Diseño limpio, moderno y pedagógico
- 🔧 Código completamente editable
🛠️ Tecnologías utilizadas
- HTML5
- CSS3 (responsive y variables CSS)
- JavaScript vanilla
- GitHub Pages
Sin frameworks externos.
100% ligero y compatible con navegadores modernos.
🏫 Cómo usar este recurso en Moodle
✔️ Opción 1: Enlazar como URL (recomendado)
- En Moodle → Añadir actividad o recurso
- Seleccionar URL
- Pegar este enlace:
https://franmondejar.github.io/WebQuest/
- Mostrar en ventana nueva o emergente
✔️ Opción 2: Incrustar dentro de una Página/Libro (iframe)
Pegar este código en el editor HTML (<>):
```html