Grâce à l'IA, dynamisez vos e-learnings par des petits jeux en HTML en 5min

Le clic « Suivant », ennemi n° 1 de la sensibilisation

On le sait tous, nos utilisateurs ne sont pas les plus grands fans de nos modules de e-learning.

Quelque soit le sujet ! Il n'y a pas qu'en cyber !

Si je stéréotype un peu, on a souvent un bon gros bloc de test, une image ou une vidéo si on a de la chance, et un quiz à la fin du module.

La vie de l'apprenant pouvant donc se réduire à une série spectaculaire de clics très rapides sur les boutons "Suivant" et un jeu aléatoire de réponses au quiz.

Ce qui manque avec certains modules, ce n'est pas le contenu. C'est l'action. On apprend en faisant, en se trompant, en recevant un retour immédiat. Jusqu'ici, fabriquer de l'interactivité demandait un budget, un développeur ou un outil auteur haut de gamme. Ce n'est plus le cas. Aujourd'hui, une IA générative peut vous fabriquer en quelques minutes un mini-jeu prêt à glisser dans votre module. Je l'ai testé cette semaine pour l'un de mes propres cours, et je voulais vous partager cette expérience avec quelques exemples réalisés avec Claude en quelques minutes. A vous de jouer !

Le principe : décrire un jeu, recevoir un fichier

Le mécanisme tient en une phrase : vous décrivez en français le jeu que vous voulez, l'IA vous rend un fichier HTML autonome, et vous l'intégrez dans votre page de cours.

Pas besoin de savoir coder. Un fichier HTML « autonome » contient tout dans une seule page : le texte, la mise en forme et la logique du jeu. Il s'ouvre dans n'importe quel navigateur. Et la plupart des plateformes savent l'afficher, via un bloc « code embarqué », un « iframe », une ressource « page web » ou un petit paquet SCORM.

Concrètement, la demande ressemble à ceci :

« Crée-moi un mini-jeu HTML en un seul fichier. On présente 8 documents d'entreprise un par un. L'apprenant doit les classer en Public, Interne, Confidentiel ou Secret. Après chaque réponse, affiche une explication courte. À la fin, affiche un score et un message d'encouragement. Style sobre, couleurs de ma charte : bleu nuit et vert. »

Quelques minutes plus tard, vous testez. Ça ne vous plaît pas ? Vous demandez « ajoute un chronomètre », « rends les explications plus drôles », « ajoute un niveau difficile ». On itère comme on parlerait à un graphiste patient et infatigable.

Pour qui ? Pour tout le monde, vraiment

Vous êtes coincé avec le LMS de l'entreprise ou un éditeur du XXe siècle. C'est le cas le plus fréquent. Les modules sont des diaporamas cliquables, les quiz se limitent au QCM, et chaque demande d'évolution prend six mois, voire est impossible.

Le jeu HTML est votre passe-muraille : vous ne changez pas d'outil, vous ajoutez simplement une brique vivante au milieu d'un contenu existant.

Vous avez déjà une plateforme de sensibilisation moderne. Tant mieux, mais elle reste conçue pour tous ses clients à la fois. Elle ne connaît ni vos outils internes, ni votre politique de classification, ni l'incident qui a secoué votre service compta en mars. Un jeu sur mesure vient compléter le catalogue avec ce qui vous ressemble : vos procédures, vos mots, vos cas réels.

Dans les deux cas, on retrouve le même gain : passer d'un contenu qu'on lit à une situation qu'on vit.

Quelques exemples de jeux à semer dans vos modules

Voici de quoi vous mettre en appétit. Aucune ne demande une ligne de code de votre part : juste une description claire.

1. Le tampon de confidentialité

Crée-moi un mini-jeu HTML en un seul fichier. On présente 8 documents d'entreprise un par un. L'apprenant doit les classer en Public, Interne, Confidentiel ou Secret. Après chaque réponse, affiche une explication courte. À la fin, affiche un score et un message d'encouragement. Plutot que cliquer sur des boutons, je préfère faire un geste de déplacer un tampon, comme le vrai geste. donc les 4 propositions doivent être des tampons. Style sobre, couleurs de ma charte : 0B7B7B et FEFAE0

Moi je trouve cela marrant

Mais peut-être qu'une version plus réaliste de l'interface outil serait utile ? Il suffit de demander

reprends le jeu-classification-documents.html mais cette fois-ci transforme comme si c'était des documents word et que l'utilisateur devait utiliser le système d'étiquetage des documents proposé par Microsoft. l'idée est que le geste soit le plus réaliste

2. Le détecteur d'hameçonnage

Fais moi un nouveau jeu en HTML
Principe : « Repère le levier ». L'apprenant lit 3 mails réalistes affichés comme dans une messagerie.
Pour chaque mail, 2 étapes :
1. Repérer : il clique sur des passages prédécoupés du mail et leur attribue un levier émotionnel (urgence, peur, autorité, curiosité, appât du gain, flatterie, ou aucun). Puis « Vérifier » : correction visuelle et explication de chaque levier.
2. Reprendre la main : il choisit le bon réflexe (pause, vérifier par un second canal, signaler, traiter normalement, répondre). Feedback expliqué.
Mails : un faux avis de livraison, une fraude au président, et un mail RH légitime (pour montrer qu'une émotion n'est pas une preuve).
Ton bienveillant, jamais punitif : on gagne des graines 🌱 par levier repéré. Fin : bilan + carte récap des 6 leviers avec une phrase-réflexe pour chacun.
Charte : fond #FEFAE0, couleur principale #0B7B7B. Responsive mobile.

3. Bon geste ou pas ?

fais moi maintenant un jeu Inspiré des applis de rencontre : des situations défilent sous forme de cartes. « Un inconnu demande à entrer derrière toi avec un carton dans les bras. » Glisser à droite pour accepter, à gauche pour refuser. même code couleur

4. Apprends à lire une bonne URL

fais moi un autre jeu. On affiche une série d'URL qui se ressemblent : banque.fr, banque-secure.com, bamque.fr, banque.fr.connexion-client.net. L'apprenant doit dire laquelle est légitime, avec un compte à rebours. On apprend à lire une adresse de droite à gauche sans même s'en rendre compte.

Comment s'y prendre en cinq étapes

1. Partez de l'objectif, pas du jeu. Quel comportement voulez-vous voir changer ? « Classer correctement un document » donne le tampon ; « résister à l'urgence » donne l'histoire à embranchements. Le jeu sert le geste, jamais l'inverse.

2. Décrivez comme à un prestataire. Donnez le contexte (public, durée visée, niveau), la mécanique (ce que l'apprenant fait), le contenu (vos vrais exemples), le retour (explication, score) et la forme (couleurs, ton). Précisez toujours : « un seul fichier HTML, sans ressource externe ».

3. Testez comme un apprenant pressé. Cliquez n'importe où, répondez faux exprès, ouvrez sur votre téléphone. Signalez à l'IA tout ce qui coince, elle corrige.

4. Modifiez les textes. C'est facile, cela se fait directement dans le code HTML fourni. Remplacez simplement les phrases proposées, les questions, les réponses par les textes qui vous vont bien. Au pire, demandez directement à l'IA de le faire... mais bon on frôle la fainéantise 😀

5. Intégrez dans votre plateforme. Selon votre outil : bloc « code HTML » ou « intégration web », iframe, ressource « fichier » ou paquet SCORM. Faites un essai avec votre équipe LMS avant de lancer à grande échelle : certaines plateformes filtrent les scripts.

Quelques garde-fous de jardinier prudent

• Evidemment rien de sensible dans la demande. S'il fallait vraiment vous le rappeler, ne donnez pas à l'IA de vrais documents internes, noms de clients ou incidents identifiables. Inventez des exemples réalistes : le jeu n'en sera pas moins efficace.

• Aucun mot de passe réel saisi, aucune donnée envoyée. Pour le testeur de mot de passe notamment, exigez un calcul 100 % dans le navigateur et invitez les apprenants à tester des exemples, jamais leurs vrais mots de passe.

• Relisez le fond. L'IA est bonne en code, moins infaillible sur votre politique interne. Vérifiez chaque explication affichée : un jeu qui enseigne une erreur est pire que pas de jeu.

• Pensez accessibilité. Demandez explicitement une navigation au clavier, des contrastes suffisants et des textes lisibles par un lecteur d'écran.

• Mettez votre DSI dans la boucle. Un fichier HTML avec du script, c'est du code. Faites-le valider comme tout autre contenu intégré : c'est aussi un bel exemple de cohérence pour un responsable sensibilisation.

Votre seule limite : votre imagination

Pendant des années, la question était « qu'est-ce que mon outil me permet de faire ? ». Elle devient « qu'est-ce que j'ai envie de faire vivre à mes collaborateurs ? ». Le budget, la technique et les délais ne sont plus le goulot d'étranglement. La créativité, si.

Alors je vous lance un petit défi : prenez votre module le plus soporifique, repérez l'écran où tout le monde décroche, et remplacez-le par un jeu. Un seul. Puis regardez ce qui pousse.

👉Et si vous testez, envoyez-moi le résultat. Cela pourra certainement inspirer d'autres responsables de sensibilisation !