Aplicación educativa que permite ao alumnado comprender a relación entre os múltiplos e submúltiplos do metro cúbico e a súa relación cos litros mediante un conversor en tempo real.
Este é o prompt para realizar esta aplicación
Actúa como un experto en diseño de aplicaciones educativas interactivas en HTML, CSS y JavaScript para alumnado de 5º y 6º de Educación Primaria en matemáticas.
Tu tarea es crear una aplicación tipo juego completamente funcional en un único archivo HTML (sin librerías externas), lista para abrir en navegador.
⚠️ IMPORTANTE: Debes respetar exactamente la estructura, funcionamiento y lógica descrita. No simplifiques ni cambies el enfoque manipulativo.
---
## 🎯 OBJETIVO DIDÁCTICO
Diseñar una aplicación manipulativa para trabajar la conversión entre unidades de volumen (km³ → mm³) y su relación con la capacidad (litros), comprendiendo especialmente que:
👉 1 dm³ = 1 litro 👉 El resto de unidades se convierten proporcionalmente
---
## 🧱 ELEMENTOS MANIPULATIVOS (OBLIGATORIO)
Crear bloques tipo LEGO arrastrables para estas unidades:
* km³ * hm³ * dam³ * m³ * dm³ * cm³ * mm³
Cada bloque debe:
* Tener tamaño proporcional (los mayores más grandes) * Tener un color distinto * Mostrar su unidad escrita dentro * Poder arrastrarse (drag & drop)
---
## 🧩 ZONA DE TRABAJO
* Crear un área grande (mínimo 400x400 px) * Los bloques se sueltan dentro * Se apilan de abajo hacia arriba automáticamente * Se pueden añadir infinitos bloques
---
## 🧮 CÁLCULO AUTOMÁTICO (CLAVE)
El sistema debe:
1. Sumar todos los bloques añadidos 2. Convertir TODO automáticamente a litros
Usar estas equivalencias exactas:
* km³ = 1e12 L * hm³ = 1e9 L * dam³ = 1e6 L * m³ = 1000 L * dm³ = 1 L * cm³ = 0.001 L * mm³ = 0.000001 L
El resultado debe actualizarse en tiempo real.
---
## 🔄 SELECTOR DE UNIDAD
Añadir un menú desplegable con:
* kL, hL, daL, L, dL, cL, mL
El resultado debe:
* Convertirse automáticamente al cambiar * Mostrarse con formato claro
---
## 🎨 REPRESENTACIÓN VISUAL (OBLIGATORIA)
Mostrar un icono + texto que cambie según la unidad seleccionada:
* kL → 🏊 Piscina * hL → 🛢️ Bidón * daL → 🧴 Garrafa * L → 🍶 Botella grande * dL → 🥤 Botella pequeña * cL → 🥫 Lata * mL → 🥃 Chupito
El icono debe:
* Tener tamaño moderado * Texto más pequeño que el emoji
---
## 🔁 BOTÓN DE REINICIO (CORRECCIÓN IMPORTANTE)
Debe existir un botón:
* Redondo * Visible en todo momento * Situado en la **esquina superior derecha de la pantalla** * Posición fija (no se mueve al hacer scroll)
Debe:
* Borrar todos los bloques * Reiniciar el cálculo * Reproducir un sonido breve
🔧 Requisito técnico obligatorio:
* Usar CSS con `position: fixed` * Ubicarlo con `top: 20px` y `right: 20px`
---
## 🎨 DISEÑO
* Visual, claro y atractivo * Adaptado a primaria * Poco texto * Colores diferenciados * Fácil uso en pizarra digital
---
## ⚙️ REQUISITOS TÉCNICOS
* Un único archivo HTML * HTML + CSS + JavaScript puro * Sin librerías externas * Código claro y organizado
---
## 🔧 PERSONALIZACIÓN PARA EL DOCENTE
Permitir modificar fácilmente:
* Valores de los bloques * Unidades trabajadas * Iconos * Tamaños visuales
El código debe estar preparado para ello (usar objetos tipo `const values = {}`).
---
## 📦 FORMATO DE SALIDA
Devuelve únicamente el código completo en un único archivo HTML, listo para copiar y usar.
