Los modelos de lenguaje grande (LLM) se han vuelto lo suficientemente potentes como para crear aplicaciones completas y funcionales en muy poco tiempo, a veces en cuestión de minutos. Esto los ha convertido en una herramienta invaluable para crear contenido interactivo y atractivo para el aula y más allá.
Para que este proceso sea accesible para todos, esta guía se enfoca en la creación de contenido interactivo con la ayuda de HTMLLenguaje de Marcado de Hipertexto. Es el idioma estándar utilizado para crear páginas y aplicaciones web. Para nuestros propósitos, lo usamos para estructurar todo nuestro archivo de contenido interactivo.. Dado que no es necesario escribir el código a mano, las únicas habilidades requeridas son tu creatividad, perseverancia y tu gusto único.
Todo el contenido interactivo analizado aquí es generado por un LLM. Los elementos adicionales, como imágenes o archivos de audio, se crean por separado mediante otros modelos de IA especializados o se obtienen de forma convencional, para luego integrarse si es necesario.
Cuatro Tipos de Contenido Interactivo Generado por IA
"La verdadera diferencia radica en dónde se ejecuta y cómo se mantiene activo."
Dentro del Entorno de la IA
Dónde se ejecuta:
Dentro de ChatGPT, Gemini, Claude, etc. (a través de una función de Canvas, visor o vista previa).
Capacidades:
Puede manejar proyectos complejos (mundos 3D, entornos interactivos).
A menudo permite exportar datos (texto, CSV, PDF).
A veces es posible compartirlo directamente con los estudiantes a través de un enlace.
Uso:
Prototipado rápido y lecciones interactivas avanzadas dentro de la propia IA.
Disciplina de Prompt (Instrucción):
Construye una aplicación limpia y autónoma en HTMLLenguaje de Marcado de Hipertexto. Es el idioma estándar utilizado para crear páginas y aplicaciones web./JSJavaScript, un lenguaje de programación que, junto con HTML y CSS, construye sitios web interactivos./CSSHojas de Estilo en Cascada, un lenguaje de diseño que, junto con HTML y JS, define el aspecto visual de los sitios web interactivos. dentro de un único bloque de código.
Fuera del Entorno de la IA
Dónde se ejecuta:
En una computadora local o alojadoEjecutándose en un servidor (una computadora potente que está permanentemente en línea) para que sea accesible para cualquier persona en Internet. en línea (Netlify).
Características:
Existe como un único archivo HTMLLenguaje de Marcado de Hipertexto. Es el idioma estándar utilizado para crear páginas web. portátil.
Puede utilizar otros archivos de la misma carpeta (imágenes, texto), requiriendo a veces la interacción del usuario.
Estar alojadoEjecutándose en un servidor conectado permanentemente a Internet. significa que es un sitio web completamente funcional, accesible desde cualquier dispositivo.
Uso:
Herramientas y lecciones educativas duraderas y fáciles de compartir.
Disciplina de Prompt (Instrucción):
Construye una aplicación limpia y autónoma en HTMLLenguaje de Marcado de Hipertexto. Es el idioma estándar utilizado para crear páginas web./JSJavaScript, un lenguaje de programación para crear interactividad./CSSHojas de Estilo en Cascada para el diseño visual. dentro de un único bloque de código.
Dentro de la IA, Potenciado por la IA
Dónde se ejecuta:
Dentro de Gemini (actualmente el único entorno que admite esta función).
Características:
Incluye todas las capacidades de una aplicación estándar "Dentro de la IA".
Permite contenido personalizado, iterativo y adaptativo.
Requiere configuración cero.
No puede funcionar fuera de Gemini; el poder de la IA está ligado a la plataforma.
Uso:
Demostración de lecciones interactivas adaptativas potenciadas por IA en vivo dentro de Gemini.
Disciplina de Prompt (Instrucción):
Crea únicamente un único archivo HTML autónomo.
Usa JavaScript nativo (vanilla) y fetch() directo para llamar a Gemini.
No utilices ningún SDK, wrapper, librería de ayuda, backend, proxy, función en la nube, endpoint de servidor o widget de entrada de clave API.
Escribe directamente en el código (Hardcode):
const apiKey = ""; // No modificar ni validar. El entorno de ejecución inyectará la clave automáticamente cuando esté vacía.
Implementa exactamente una función de ayuda asíncrona reutilizable:
async function callGemini(prompt)
Dentro de esa función:
- Construye la URL con:
https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}
- Envía una solicitud POST con Content-Type application/json
- Envía el cuerpo:
{ contents: [{ parts: [{ text: prompt }] }] }
- Procesa el JSON
- Devuelve:
data.candidates?.[0]?.content?.parts?.[0]?.text
Implementa un reintento con respaldo exponencial (exponential backoff):
- Máximo 5 intentos
- Retraso inicial de 1000ms
- El retraso se duplica después de cada fallo
La aplicación debe permanecer completamente del lado del cliente y en un solo archivo.
Devuelve solo el HTML final.
Fuera de la IA, Potenciado por la IA
Dónde se ejecuta:
De forma local o alojadoEjecutándose en un servidor en la nube para el acceso público en Internet., utilizando claves API para llamar a servicios de IA.
Características:
Incluye todas las capacidades de una aplicación estándar "Fuera de la IA".
Requiere una Clave APIUn código especial que le permite a tu aplicación acceder a un servicio de IA, como Gemini. Es como una contraseña para tu aplicación. de Gemini AI Studio, OpenAI, etc.
Flujo de trabajo: Generar → descargar HTMLEl archivo de la página web. → añadir clave APILa contraseña de acceso al servicio de IA..
Añade complejidad (gestión de la privacidad de los datos).
Uso:
Construcción de herramientas independientes, escalables y potenciadas por IA.
Disciplina de Prompt (Instrucción):
Construye una aplicación HTMLLenguaje para páginas web. autónoma que contenga un campo de entrada sutil para una clave APICódigo de acceso al servicio. y un botón de 'confirmar'; tras confirmar, la interfaz de la aplicación debe aparecer y volverse funcional, utilizando esa clave para llamar al modelo open-mistral-7b. Detalles Técnicos de Implementación: Endpoint: Usa https://api.mistral.ai/v1/chat/completions Encabezados: Usa Content-Type: application/json y Authorization: Bearer <TU_CLAVE> Formato del Cuerpo: Usa la estructura estándar: {"model": "open-mistral-7b", "messages": [{"role": "user", "content": "..."}]} Cors: Asegúrate de que la solicitud fetch maneje CORS correctamente para un archivo local.
Flujo de Trabajo: De 'Dentro de la IA' a un Sitio Web en Vivo
Una guía de tres pasos para hacer que tu contenido generado por IA sea portátil y compartible.
Paso 1: Obtener el Código
Algunas aplicaciones tendrán un botón de "Descargar" que te proporcionará un archivo .html directamente. Para otras, tendrás que copiar manualmente el código, pegarlo en un nuevo archivo de texto (.txt), guardarlo y luego cambiar la extensión del archivo de .txt a .html.
Paso 2: Usar el Archivo
Simplemente haciendo doble clic en el archivo .html se ejecutará en tu navegador. Puedes enviar este archivo a cualquier persona y podrá hacer lo mismo. Para convertirlo en un sitio web en vivo, utiliza un servicio como Netlify para arrastrar y soltar la carpeta que contiene tu archivo. Para que esto funcione, tu archivo principal debe llamarse index.html.
Paso 3: Añadir Archivos Locales
Tu aplicación "Fuera de la IA" puede utilizar otros archivos. Coloca elementos como imágenes (.jpg), sonidos (.mp3) o objetos 3D en la misma carpeta que tu archivo index.html. Luego, la aplicación puede programarse para cargarlos. Nota: algunos elementos pueden cargarse automáticamente al iniciar, mientras que otros pueden requerir una acción del usuario (como hacer clic en un botón) debido a las políticas de seguridad del navegador.
Principios para un Contenido Interactivo Atractivo
Basados en principios fundamentales del diseño de juegos, estos consejos ayudan a crear experiencias de aprendizaje cautivadoras.
1
Autonomía (Agency): “Déjame tener el control.”
🧠 Por qué
La autonomía es la base. Si el usuario no se siente en control, nada más importa. Es la diferencia entre mirar y jugar. El estudiante debe sentir el control, no solo de lo que hace, sino de cómo piensa, explora y responde. Un juego puede simular que el alumno es un científico, detective o viajero del tiempo, pero el verdadero poder proviene de dejarle decidir cómo interactuar y expresarse.
✅ Qué añadir:
Libertad para elegir cómo navegar por la información.
Control sobre el ritmo y el orden de las tareas.
Tareas abiertas con espacio para la interpretación personal.
2
Elección (Choice): “Dame decisiones reales.”
🧠 Por qué
Una vez que tengo el control, necesito decisiones para manifestarlo. La elección hace visible la autonomía. Cuando los estudiantes tienen control, necesitan momentos de decisión. La elección transforma la libertad en acción. Las buenas elecciones ofrecen diferencias significativas; no se trata de un simple "A o B", sino de "¿Qué enfoque adopto? ¿Qué camino decido seguir?".
✅ Qué añadir:
Tareas u objetivos seleccionables en un orden no lineal.
Tareas con ramificaciones (consecuencias alternativas).
Desafíos opcionales o misiones secundarias.
Libertad en el orden de exploración.
3
Participación Activa: “Déjame hacer cosas, no solo hacer clic para avanzar.”
🧠 Por qué
Ahora que elijo y dirijo el rumbo, quiero interactuar. Tocar, arrastrar, armar, rotar... quiero interactuar con ese universo y hacer que las cosas sucedan.
✅ Qué añadir:
Tareas que requieran interacción real (no solo observación pasiva).
Simulaciones, clasificación de elementos, construcción y ensamblaje.
Metáforas del mundo real (ajustar controles deslizantes, hacer zoom, rotar, arrastrar, combinar).
4
Descubrimiento: “Permíteme revelar cosas, no solo recibirlas.”
🧠 Por qué
Ahora que me muevo e interactúo, quiero sorpresas. El descubrimiento recompensa la curiosidad. Genera un aprendizaje emocional y recuerdos más profundos. El compromiso es mucho más rico cuando hay algo que buscar y encontrar. Desarrolla una conexión emocional y un sentido de propiedad sobre el conocimiento.
✅ Qué añadir:
Exploración libre de entornos ricos en contenido.
Experiencias de aprendizaje planteadas como acertijos o puzles.
Contenido estructurado por capas o niveles.
Narrativa integrada en el propio entorno.
5
Retroalimentación (Feedback): “Haz que el mundo me responda.”
🧠 Por qué
Cada instante de autonomía, elección, interacción y descubrimiento debe sentirse vivo. La retroalimentación cierra el ciclo. Sin ella, el usuario se siente ignorado.
Respuesta auditiva o textual (sonidos simples o mensajes dinámicos).
Evidencias o logros guardados (cartas coleccionadas, piezas armadas, páginas completadas).
Verificaciones de aprendizaje fluidas y de baja fricción (“Escribe aquí lo que descubriste”).
A New Era of Content Creation
Large language models (LLMs) have become powerful enough to create whole, working applications in a very short amount of time—sometimes in a matter of minutes. This has made them an invaluable tool for creating engaging interactive content for the classroom and beyond.
To make this process accessible for everyone, this guide focuses on creating interactive content with the help of HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file.. Since the code itself doesn't need to be written by hand, the only required skills are your creativity, perseverance, and unique taste.
All the interactive content discussed here is generated by an LLM. Additional pieces, like images or audio files, are created separately by other specialized AI models or sourced conventionally, and then integrated if needed.
Four Types of AI-Generated Interactive Content
"The real difference is where it runs and how it stays alive."
Inside AI Environment
Runs:
Inside ChatGPT, Gemini, Claude, etc. (via a Canvas, viewer, or preview).
Capabilities:
Can handle complex projects (3D worlds, interactive environments).
Can often export data (text, CSV, PDF).
Sometimes possible to share directly with students via a link.
Use:
Rapid prototyping and advanced interactive lessons inside the AI.
Prompt Discipline:
Build a self-contained, clean HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file./JSJavaScript, a programming language that, together with HTML and CSS, builds interactive websites./CSSCascading Style Sheets, a language for styling that, together with HTML and JS, builds interactive websites. app in a single code block.
Outside AI Environment
Runs:
On a local computer or hostedRunning on a server (a powerful computer that is permanently online) so that it's accessible to anyone on the internet. online (Netlify).
Characteristics:
Exists as a single, portable HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file. file.
Can use other files from the same folder (images, text), sometimes requiring user input.
HostedRunning on a server (a powerful computer that is permanently online) so that it's accessible to anyone on the internet. = a fully functioning website, accessible on any device.
Use:
Durable, shareable educational tools and lessons.
Prompt Discipline:
Build a self-contained, clean HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file./JSJavaScript, a programming language that, together with HTML and CSS, builds interactive websites./CSSCascading Style Sheets, a language for styling that, together with HTML and JS, builds interactive websites. app in a single code block.
Inside AI, Powered by AI
Runs:
Inside Gemini (currently the only environment supporting this).
Characteristics:
Includes all capabilities of a standard 'Inside AI' app.
Enables personalized, iterative, and adaptive content.
Zero setup required.
Cannot function outside Gemini; AI power is tied to the platform.
Use:
Demonstrating adaptive, AI-powered interactive lessons live within Gemini.
Prompt Discipline:
Create a single self-contained HTML file only.
Use vanilla JavaScript and direct fetch() to call Gemini.
Do not use any SDK, wrapper, helper library, backend, proxy, cloud function, server endpoint, environment-variable loader, or API-key input widget.
Hardcode:
const apiKey = ""; // Do not modify or validate. The runtime environment will inject the key automatically when empty.
Implement exactly one reusable async helper:
async function callGemini(prompt)
Inside that function:
- Build the URL with:
https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}
- Send a POST request with Content-Type application/json
- Send:
{ contents: [{ parts: [{ text: prompt }] }] }
- Parse JSON
- Return:
data.candidates?.[0]?.content?.parts?.[0]?.text
Implement exponential backoff retry:
- 5 attempts maximum
- initial delay 1000ms
- delay doubles after each failure
The app must remain fully client-side and single-file.
Return only the final HTML.
Outside AI, Powered by AI
Runs:
Locally or hostedRunning on a server (a powerful computer that is permanently online) so that it's accessible to anyone on the internet., using API keys to call AI services.
Characteristics:
Includes all capabilities of a standard 'Outside AI' app.
Requires an API KeyA special code that allows your application to access an AI service, like Gemini. It's like a password for your app. from Gemini AI Studio, OpenAI, etc.
Workflow: Generate → download HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file. → add API keyA special code that allows your application to access an AI service, like Gemini. It's like a password for your app..
Adds complexity (privacy management).
Use:
Building scalable, independent, AI-powered tools.
Prompt Discipline:
Build a self-contained HTMLHyperText Markup Language. It's the standard language used to create web pages and web applications. For our purposes, we're using it to make our whole interactive content file. application that contains a subtle input field for an API keyA special code that allows your application to access an AI service, like Gemini. It's like a password for your app. and a 'confirm' button; after confirming, the app interface should appear and become functional, using that key to call the open-mistral-7b model. Technical Implementation Details: Endpoint: Use https://api.mistral.ai/v1/chat/completions Headers: Use Content-Type: application/json and Authorization: Bearer <YOUR_KEY> Body Format: Use the standard structure: {"model": "open-mistral-7b", "messages": [{"role": "user", "content": "..."}]} Cors: Ensure the fetch request handles CORS correctly for a local file.
Workflow: From 'Inside AI' to a Live Website
A three-step guide to making your AI-generated content portable and shareable.
Step 1: Getting the Code
Some applications will have a "Download" button that gives you an .html file directly. For others, you'll need to manually copy the code, paste it into a new text file (.txt), save it, and then rename the file's extension from .txt to .html.
Step 2: Using the File
Simply double-clicking the .html file will run it in your browser. You can send this file to anyone, and they can do the same. To make it a live website, use a service like Netlify to drag-and-drop the folder containing your file. For this to work, your main file must be named index.html.
Step 3: Adding Local Files
Your 'Outside AI' application can use other files. Place assets like images (.jpg), sounds (.mp3), or 3D objects in the same folder as your index.html. The app can then be coded to load them. Note: some assets may load automatically on start, while others might require user action (like a button click) due to browser security policies.
Principles for Engaging Interactive Content
Based on core principles from game design, these tips help create compelling learning experiences.
1
Agency: “Let me be in charge.”
🧠 Why
Agency is the foundation. If the player doesn’t feel in control, nothing else matters. It’s the difference between watching and playing. The learner should feel in control — not just of what they do, but how they think, explore, and respond. A game can pretend the learner is a scientist, detective, or time traveler — but the power comes from letting them decide how to engage and express themselves.
✅ Add:
Freedom to choose how to navigate information
Control over pacing and task sequence
Open-ended tasks with room for interpretation
2
Choice: “Give me real decisions.”
🧠 Why
Once I have control, I need decisions to express it. Choice makes agency visible. Once learners have agency, they need moments of decision. Choice turns freedom into action. Good choices are about meaningful differences not just “A or B,” but “What approach do I take? What path do I follow?”
✅ Add:
Selectable tasks or goals in non-linear order
Branching tasks
Optional challenges or side quests
Order of exploration
3
Active Engagement: “Let me do things, not just click through.”
🧠 Why
Now that I’m choosing and steering, I want to interact. Tapping, dragging, assembling, rotating — I want to touch the world and make stuff happen.
✅ Add:
Tasks that require interaction (not just observation)
Now that I’m moving and interacting, I want surprises. Discovery rewards curiosity. It creates emotional learning and deeper memory. Engagement is richer when there’s something to find. It builds emotional connection and ownership over knowledge.
✅ Add:
Open exploration of rich environments
Puzzle-like learning experiences
Layered content
Environmental storytelling
5
Feedback: “Let the world respond to me.”
🧠 Why
Every moment of agency, choice, engagement, and discovery needs to feel alive. Feedback ties the loop. Without it, the player feels ignored.