82/365 · HTML: acordeones para niveles (básico/medio/reto)

Ayer vimos cómo crear flashcards interactivas en HTML puro, sin plugins ni dependencias. Hoy toca hablar de otra estructura que uso constantemente en mis recursos: acordeones con niveles de dificultad. Esos bloques desplegables que permiten mostrar el mismo contenido en tres capas: básico, medio y reto.

Si entras en edumind.es/recursos, verás que muchos de los HTMLs embebibles siguen esta lógica. No es casualidad. Personalmente, me chirría cuando todo el alumnado recibe la misma explicación al mismo nivel, como si todos tuvieran el mismo punto de partida. La realidad del aula es otra: tienes estudiantes que necesitan una versión más sencilla, otros que ya dominan lo básico y buscan profundizar, y algunos que quieren un reto extra.

Los acordeones permiten que cada estudiante elija su nivel de entrada, sin que nadie se sienta señalado ni limitado. Esto no es menor: es accesibilidad cognitiva en su forma más práctica.

Qué son los acordeones y por qué funcionan en educación

Un acordeón es un elemento de interfaz que oculta y muestra contenido al hacer clic. En educación, su utilidad va mucho más allá de lo estético: permiten revelar información de forma progresiva, sin saturar la pantalla ni la mente del estudiante. Esto conecta directamente con la teoría de la carga cognitiva de John Sweller, que sostiene que presentar demasiada información de golpe sobrecarga la memoria de trabajo y dificulta el aprendizaje.

Dicho de otra forma: cuando ocultas información hasta que el estudiante decide desplegarla, le estás dando control sobre su ritmo de procesamiento. No es lo mismo recibir tres explicaciones a la vez que elegir cuál leer primero.

En primaria, esto significa que un alumno que todavía está afianzando la lectoescritura puede quedarse en el nivel básico, mientras otro que ya domina el concepto puede ir directo al reto. Y ambos están trabajando en la misma actividad, con el mismo recurso.

Por qué los tres niveles (básico/medio/reto) son clave

La estructura de tres niveles no es arbitraria. Responde a una necesidad real de diferenciación sin segregación. Muchas personas piensan que el problema del aula diversa es que no hay tiempo para atender a todos. Casi nunca lo es. El problema es que intentamos dar la misma respuesta a necesidades distintas.

El nivel básico ofrece una explicación simplificada, con vocabulario accesible y ejemplos concretos. Es la puerta de entrada para quien necesita andamiaje. El nivel medio es la explicación estándar, la que cubre el currículo esperado. Y el nivel reto es la extensión: conexiones, aplicaciones, preguntas abiertas. Cuando lo pruebas con alumnado real, cambia todo: dejan de esperar a que termines de explicar y empiezan a explorar a su ritmo.

Esto conecta directamente con los principios del Diseño Universal para el Aprendizaje (DUA), especialmente con el principio de proporcionar múltiples formas de representación. No se trata de hacer tres actividades diferentes, sino de ofrecer tres puntos de acceso al mismo contenido. La clave está en que el estudiante pueda elegir, probar, volver atrás si hace falta, y avanzar cuando esté listo.

Un ejemplo funcional: acordeones en HTML puro

La estructura es sencilla: cada nivel es un bloque con un título clicable y un contenido oculto por defecto. Al hacer clic en el título, se despliega el contenido. Puedes programarlo con CSS puro (usando el truco del checkbox invisible) o con un toque mínimo de JavaScript. Yo prefiero la segunda opción porque es más accesible para lectores de pantalla.

El código básico incluye tres secciones: "Nivel básico", "Nivel medio" y "Nivel reto". Cada una tiene un botón o encabezado clicable y un div con la explicación. Al hacer clic, se añade una clase que cambia la altura del div de 0 a auto, con una transición suave. Puedes añadir iconos (como flechas) que rotan al desplegar, para mejorar la retroalimentación visual.

Lo interesante es que puedes combinar esto con otros elementos: incluir un vídeo en el nivel básico, un esquema en el medio, y una actividad de investigación en el reto. O meter flashcards dentro del acordeón. O un ejercicio autoevaluable. La estructura es la misma, el contenido lo decides tú.

El riesgo: niveles que etiquetan en lugar de liberar

El mayor peligro de los niveles es que se conviertan en etiquetas fijas. "Tú eres de básico, tú de medio, tú de reto". Eso no es diferenciación, es segregación disfrazada. La diferencia fundamental es que el estudiante debe poder moverse entre niveles según la tarea, el día, su confianza, su interés.

Otro riesgo es que el nivel básico sea condescendiente o infantilizante, y el reto sea simplemente "más de lo mismo pero más largo". Los tres niveles deben ser pedagógicamente sólidos. Básico no significa tonto. Reto no significa inalcanzable. Cada nivel debe respetar al estudiante que lo elige.

Y un riesgo técnico: si el acordeón no funciona bien en móvil o no es accesible para teclado y lectores de pantalla, estás creando barreras en lugar de quitarlas. Por eso insisto en que la IA te genere el código, pero tú debes probarlo con tu alumnado real, en sus dispositivos reales.

Cómo empezar: el prompt y la curación

Si quieres probar, el prompt a la IA puede ser algo como: "Genera un HTML completo con tres acordeones desplegables para niveles básico, medio y reto. Incluye CSS accesible con transiciones suaves y JavaScript para interacción. Hazlo responsive y compatible con lectores de pantalla." Luego, añades el contenido específico de tu tema.

La IA te dará la estructura. Tú decides qué va en cada nivel. Y aquí está la magia: puedes pedirle a la IA que te genere las tres versiones de la misma explicación. Por ejemplo: "Explícame la fotosíntesis en tres niveles: uno para 3º de primaria, otro para 5º, y otro con un reto de investigación." La IA te da las tres versiones, tú las ajustas según tu grupo, y las integras en el acordeón.

Esto abre las puertas a la facilidad para proponer herramientas de repaso, revisión y aprendizaje que antes eran imposibles de imaginar por tiempo y coste. No se trata de sustituir tu criterio pedagógico. Se trata de que la tecnología te permita construir poco a poco las explicaciones, la comprensión y, sobre todo, hacerla accesible a nivel de comprensión.

Resumen

• Los acordeones permiten mostrar información de forma progresiva, reduciendo la carga cognitiva y dando control al estudiante sobre su ritmo de aprendizaje.
• La estructura de tres niveles (básico/medio/reto) responde a los principios del DUA: múltiples formas de representación del mismo contenido, sin segregar.
• Cada nivel debe ser pedagógicamente sólido: básico no es condescendiente, reto no es inalcanzable, y el estudiante debe poder moverse libremente entre ellos.
• La IA puede generar tanto la estructura técnica (HTML/CSS/JS) como las tres versiones del contenido, ahorrando tiempo en maquetación y adaptación.
• El riesgo principal es convertir los niveles en etiquetas fijas o crear barreras de accesibilidad; siempre prueba con tu alumnado real en sus dispositivos reales.
• Esto no es menor: ofrecer múltiples puntos de acceso al mismo contenido es una herramienta de equidad, porque permite que cada estudiante encuentre su entrada sin sentirse señalado.

Nos vemos en el día 83/365

Luis Vilela Acuña