Cómo añadir recursos interactivos creados con Claude a eXeLearning

Con la inteligencia artificial Claude, podemos hacer recursos interactivos (animaciones de todo tipo, líneas de tiempo, calculadoras, etc.) que podremos insertar en eXeLearning. En la terminología de Claude, estos recursos interactivos se llaman ARTEFACTOS.

Para ello debemos decirle que nos cree aquello que deseamos en HTML (esto es lo más importante para que luego lo podamos incorporar a eXeLearning). Aquí hay un ejemplo con el prompt que hemos utilizado:

Crea una aplicación interactiva en HTML para calcular el área y perímetro de un sector circular. Sobre el dibujo de un círculo habrá un punto que podremos desplazar para hacer el sector. Podremos cambiar el radio y se indicarán los grados también. Utiliza un estilo atractivo y moderno.

Se lo hemos hecho repetir unas cuantas veces, haciéndole añadir cosas como las fórmulas o modificar el estilo que puso en un principio. Este es el aspecto final:

Si deseas más información sobre la creación de este tipo de aplicaciones, puedes consultar: Cómo crear mini-aplicaciones educativas con Claude.

A partir de aquí podemos continuar con el método 1 (copiar y pegar código) o el 2 (descargar archivo HTML). Si no sabes cuál elegir, te recomendamos el 1, si te da problemas, el 2 es más seguro.

1. Copiar y pegar el código directamente en un iDevice

Este método es más sencillo y por eso hemos considerado añadirlo como una actualización a lo ya existente.

Una vez credo el artefacto, tal como se explicó antes, escribiremos el siguiente prompt:

Quiero hacer la aplicación para eXeLearning que será puesta en un iDevice y que, por tanto, no deberá tener etiquetas HTML: head, body ni style. Debe ser HTML puro con los estilos en línea y scripts.

Claude generará el nuevo código. Pulsamos sobre el botón Code (si no aparece ya seleccionado) y después lo copiamos con el botón Copiar que hay en la parte inferior.

En eXeLearning pulsamos el botón para insertar código (<>) o el botón HTML de cualquier iDevice y pegamos el código. Guardamos el iDevice, el proyecto y lo probamos desde la vista previa.

2. Descargar un archivo HTML para añadirlo a eXeLearning

Este método es alternativo al anterior y lo podemos usar si por algún motivo no nos ha ido bien.

• Una vez hemos creado el artefacto tal como se indica más arriba, lo guardamos con el botón para descargar. Obtendremos una página web.
• Insertamos un iDevice de cualquier tipo, por ejemplo de Texto

• Pulsamos el botón para Insertar/editar medio embebido

• Seleccionamos el archivo que acabamos de descargar y seleccionamos tipo iframe.

• Le ponemos un tamaño que podremos modificar posteriormente.

• Guardamos el iDevice, el proyecto y ya tenemos el artefacto incrustado listo para su uso.

Puedes ver aquí en acción el ejemplo que hemos usado para este artículo.

Nota: La redacción de este artículo tiene nivel 0 en el Marco para la integración de la IA generativa en las tareas educativas.