Voici un exemple de fiche interactive que j'ai créée avec l'IA pour pouvoir corriger mes copies de Bac. L'idée de cet atelier est de vous montrer comment obtenir un résultat similaire, un outil sur mesure qui s'adaptera parfaitement à vos propres besoins !
1. Le HTML, qu'est-ce que c'est ?
Le HTML (HyperText Markup Language) n'est pas un document texte classique (comme un `.docx` ou un `.odt`) ni un tableau (comme `.xls`). C'est le langage utilisé pour créer les pages internet.
- ✨ L'avantage majeur : Contrairement à Word, une page HTML peut être interactive (boutons, calculs automatiques, cases à cocher, exports).
-
🙈 La particularité : C'est un langage "interprété". Si vous l'ouvrez avec un éditeur de texte simple, vous verrez du code difficile à lire avec des "balises" (ex:
<b>texte en gras</b>). C'est le navigateur web (Chrome, Firefox...) qui traduit ce code pour l'afficher joliment.
ma_grille.html et il suffira de double-cliquer dessus pour l'utiliser.
2. Demander à l'IA (Le Prompt)
Pour que l'outil réponde exactement à vos besoins, il faut formuler une demande claire. Voici un exemple de prompt prêt à l'emploi pour créer une grille de correction avec un système de cases à cocher et un export Excel/CSV.
L'exercice s'intitule 'Transport de l'électricité' et est noté sur 7 points. Je veux un tableau où chaque ligne correspond à un élève. Pour chaque question de l'exercice, je souhaite pouvoir attribuer les points très rapidement appuyant sur des boutons (par pas de 0,5 : 0, 0,5, 1,5 ou 2, etc...) selon le barème. L'outil doit faire la somme automatique par élève.
Voici le bareme question 1 : 1,5 point, question 2 : 2 points, question 3.1 : 1 point, question 3.2, 1 point, question 4. 1,5 point
Enfin, ajoute un gros bouton en bas permettant d'exporter tous les résultats et les notes dans un fichier CSV, que je pourrai facilement ouvrir ensuite sur Excel ou LibreOffice."
3. Récupérer le code généré
Une fois que vous validez votre prompt, l'IA va vous répondre. Elle vous donnera quelques explications, mais surtout, elle va générer un grand bloc de code informatique.
Ne sélectionnez pas tout le texte avec votre souris ! Cherchez l'encadré noir ou gris qui contient le code. En haut à droite de cet encadré se trouve toujours une petite icône "Copier" (souvent représentée par deux pages superposées). Cliquez dessus.
4. Visualiser et Tester votre outil
Plutôt que de sauvegarder directement le fichier à l'aveugle, nous allons utiliser un outil en ligne pour voir le résultat en direct.
- Ouvrez un nouvel onglet et allez sur le site html.onlineviewer.net.
- L'écran est généralement divisé en deux. Dans la partie de gauche (le code), effacez tout le texte présent par défaut.
- Faites un Clic-droit > Coller (ou
Ctrl+V) pour coller le code de l'IA. - Regardez la partie de droite : Votre outil de correction apparaît instantanément !
5. Sauvegarder et tester pour de bon
Une fois que l'outil affiché dans le visualiseur correspond exactement à ce que vous vouliez, il est temps de le récupérer :
- Sur le site, dans la partie de gauche (côté code), cliquez sur le bouton "Export to file".
- Allez dans le dossier Téléchargements de votre ordinateur.
- Trouvez le fichier qui vient d'être téléchargé (il se termine par
.html). - Double-cliquez sur ce fichier HTML : vous y retrouverez la page interactive que vous venez de créer, s'ouvrant directement dans votre navigateur web.
- Il ne vous reste plus qu'à ranger et sauvegarder ce fichier dans vos dossiers comme un document classique pour pouvoir le réutiliser au moment où vous en aurez besoin.
Les boutons interactifs permettant de télécharger un fichier (comme votre bouton d'exportation des notes) ne fonctionnent pas bien lorsque vous êtes encore dans l'aperçu
de l'outil html.onlineviewer.net. C'est un comportement tout à fait normal lié à la sécurité du site.
👉 L'export en CSV est donc
à tester uniquement lorsque vous aurez exporté et ouvert votre propre fichier HTML sur votre ordinateur !
🎉 Félicitations ! Vous avez créé votre premier outil de correction autonome. Il fonctionnera partout, tout le temps, même sans connexion internet.
