Créer une application pédagogique grâce à l'IA : Vibe coding
Microlearning grâce à l'utilisation de petites applications pédagogiques générées par IA - TraAm 2025-2026
Ce scénario repose sur l'utilisation d'une IA générative capable de produire du code HTML afin de créer des applications pédagogiques interactives (QCM, exercices autocorrectifs, simulations simples) :
- Les enseignants conçoivent des prompts adaptés à leurs objectifs pédagogiques, permettant de générer rapidement des outils utilisables directement dans un navigateur, sans installation.
- Les élèves peuvent utiliser ces applications pour s’entraîner, réviser ou s’autoévaluer. Dans certains cas, ils peuvent également participer à la conception des outils, favorisant ainsi leur compréhension des notions et leur engagement.
- Ces applications qui demandent un temps de réalisation réduit sont adaptées au Microlearning.
Référence bibliographique : RAISSI, Hanene Ahlem et ROUBACHE, Izzeddine. L'apport du microlearning sur la réduction de la surcharge cognitive : un nouveau paradigme pour l'enseignement supérieur. Passerelle. 2024, vol. 13, n° 02, p. 91-105.
Exemples :
- De l'ADN à la protéine : application demandant à l'élève, à partir d'une courte séquence d'ADN (brin codant), d'écrire la séquence d'ARNm correspond, puis à l'aide du code génétique d'écrire le peptide produit lors de la synthèse des protéines.
- Prompt : Génère une application en ligne où à partir d’une séquence d’ADN il faut écrire l’ARNm transcrit, puis la séquence d’acides aminés de la protéine traduite (fourni un tableau du code génétique). Le programme corrige les étapes et déclenche un feu d’artifice en cas de parcours parfait.
- Capture d'écran de l'application produite

- Fichier de l'application à décompresser, cela décompresse le fichier html qui est utilisable par double clic ou intégration à Éléa (voir tutoriel).
- Flashcards de révision : le prompt fournit permet d'adapter la production de l'application autonome de flashcard à tout contexte d'enseignement. Il faut joindre le fichier de cours au prompt.
- Prompt : Agis comme un expert en pédagogie et en développement web afin de créer automatiquement des flashcards de révision à partir d’un cours fourni, en extrayant uniquement les notions essentielles (définitions, mécanismes, vocabulaire clé) puis en générant entre 20 et 50 cartes au format ["Question", "Réponse"] avec des questions courtes et claires adaptées au niveau Terminale STL et des réponses précises, concises et scientifiquement exactes ; ensuite, produis un fichier HTML autonome (incluant HTML, CSS et JavaScript sans bibliothèque externe), responsive et immédiatement fonctionnel, permettant d’afficher une carte à la fois avec possibilité de retourner la carte (clic ou bouton), naviguer entre les cartes (précédent, suivant, mélanger), afficher un compteur et une barre de progression, et offrir une navigation clavier (flèches, espace) et tactile (swipe), puis fournis uniquement un lien de téléchargement du fichier HTML sans afficher le code.
- Capture d'écran de l'application produite

- Fichier de l'application à décompresser, cela décompresse le fichier html qui est utilisable par double clic ou intégration à Éléa (voir tutoriel).
- Exerciseurs avec autocorrection : exercice interaction proposant différents types de questions (QCM, réponse courte, texte à trous...). Il faut joindre le fichier de cours au prompt.
- Prompt : Agis comme un expert en pédagogie, en évaluation et en développement web pour analyser un cours, en extraire les notions essentielles et créer une évaluation interactive auto-corrigée comprenant des questions variées (QCM, réponses courtes et rédigées avec mots-clés) adaptées au niveau du public, avec un barème détaillé et un calcul automatique d’une note sur 20, incluant une correction (exacte ou par mots-clés), l’affichage du score global et du détail par question ainsi qu’un message précisant la limite des corrections ouvertes, puis génère un fichier HTML autonome unique (sans bibliothèque externe, fonctionnant localement et compatible tous supports) intégrant une interface complète (identité, questions, boutons corriger, réinitialiser, télécharger) et permettant de télécharger la page telle quelle via JavaScript, en fournissant directement le code HTML complet prêt à l’emploi sans explication.
- Capture d'écran de l'application produite.

- Exemple sur le cours sur l'immunité en terminale STL : Fichier de l'application à décompresser, cela décompresse le fichier html qui est utilisable par double clic ou intégration à Éléa (voir tutoriel).
Tutoriel Éléa :
- Créer un parcours vide ou vous placer dans le parcours où vous souhaitez insérer l'activité.
- Ajouter une activité "Page", mettre un titre à la page, puis choisir dans le menu "outils" puis "<> code source"
- Ouvrir le fichier html dans un éditeur de texte (le code devient visible), copier le code (tout le texte) et le coller dans Éléa dans la zone "<> code source.
- Dans Éléa en bas cliquer "Enregistrer et afficher"
- L'activité s'affiche et est accessible depuis le parcours.
Documents à télécharger
Autres ressources
Apprendre à apprendre avec l’IA en BTS ESF
Utilisation de l'IA dans la création d'un parcours Éléa
Chatbot pour réviser en CBPH
Comment la réglementation peut-elle protéger nos données transmises à l’IA ?
Créer une application pédagogique grâce à l'IA : Vibe coding