Creación con IA de entornos de aprendizaje interactivos: ejemplos prácticos

Desde ya con Chat GPT, Gemini u otras IA generativas como Claude puedes crear simulaciones interactivas de diferentes contenidos, formatos de interacción e interfaz. No necesitas saber código. Te explico cómo hacerlo. 

Probemos con Gemini, que lo ha sacado hace poco y funciona realmente bien. 

He creado 3 artilugios interactivos muy sencillos: 

• un mapa de orígenes de filósofos/as, 
• un mapa de quesos españoles de Denominación de Origen Protegida (DOP) 
• y un resumen de un contenido de Historia de España de 2º de Bachillerato. 

Pincha sobre las imágenes para acceder a cada recurso.

¿Qué he hecho para crear, por ejemplo, este último? Vas a Gemini, en la ventana de contexto seleccionas Canvas, subes un pdf con un temario (en este caso La II República, de 2º de Bachillerato de Historia de España) y escribes lo que quieres: 

"Crea una simulación interactiva para que estudiantes de Bachillerato de Historia de España repasen el tema del pdf. Título: La II República española. La simulación empezará con varias ventanas con cada apartado o bloque, sobre las que al pinchar aparecerá un resumen útil para que el estudiante repase. En cada bloque, debajo del contenido se podrá acceder al panel principal a través de un botón. Interfaz atractiva. Los contenidos deben estar desarrollados para que el estudiante repase todos los contenidos. Básate en el pdf adjunto para estructurar los bloques y añadir los contenidos relevantes. Incluye un bloque para textos y en cada bloque añade un glosario. Código insertable en Codepen". 

Inmediatamente y en poco tiempo, Gemini te generará un código. Cuando termine de crearlo, pincha sobre Vista previa, en la parte superior derecha, y verás una interfaz más o menos como aparecerá en tu navegador. Puedes interactuar u comprobar que los botones funcionan. la interfaz te gusta y los contenidos son adecuados. 

Junto a Vista previa, verás un icono en forma triangular. Si pinchas sobre él podrás crear un enlace para compartir con quien quieras esta simulación. 

Si quieres tenerla en tu ordenador sin necesidad de conexión a internet, puedes hacer lo siguiente: Seleccionas Código en la parte superior derecha. Al lado de Vista previa verás un icono de compartir (dos hojas superpuestas). Pincha sobre él si se copiará el código. Ahora ve a https://codepen.io, regístrate con tu cuenta de Gmail y verás una interfaz como ésta:

Al insertar el código en la ventana de la izquierda, inmediatamente verás la simulación en la parte inferior. Renombra la simulación en la parte superior izquierda, pincha arriba sobre Save y abajo a la derecha verás Export. Elige la opción Export.zip y se te cargará en tu ordenador un archivo comprimido que al abrirlo tendrá archivos y carpetas. 

Pincha en la carpeta dist y verás el archivo index.html. Si pinchas sobre él, se te abrirá tu navegador y podrás ver e interactuar con tu simulación. 

Ambas opciones de visualización son útiles. La de copiar el código es más cómoda, pero si no dispones de internet y quieres coleccionar tus artilugios en local, tienes más autonomía, y siempre puedes copiar el código y modificar en Gemini, Chat GPT u otra IA lo que quieras.

Con Chat GPT creé una simulación de impacto climático, ajustando diferentes variables. Puedes acceder a ella, pinchando aquí.

Si no sabes qué decirle a la IA para que te genere la simulación, he creado un asistente que te ayuda a crear prompts para la creación de simulaciones interactivas. Pincha aquí para acceder a él. Te pedirá algunos datos y te generará un prompt que después puedes pegar en otra IA o en Chat GPT.