avec l’IA
Laurent Welykyj
Ce document détaille une méthode pratique pour concevoir une application de révision personnalisée en utilisant l’intelligence artificielle Claude. Le guide explique comment s’inscrire sur la plateforme et fournit un modèle de commande précis pour générer un fichier informatique unique contenant des cours et des exercices interactifs.
L’objectif est de permettre aux enseignants de créer des outils pédagogiques variés, tels que des flashcards ou des QCM, adaptés à différents niveaux de difficulté. En suivant ces instructions, l’utilisateur obtient un support numérique directement consultable sur navigateur, facilitant ainsi l’apprentissage autonome des élèves. Le texte souligne enfin l’importance d’inclure des fonctionnalités de suivi des scores pour encourager la progression des apprenants.
EXEMPLES d’applications créées
L’application générée pourra ensuite être ouverte simplement dans un navigateur comme Edge, Chrome ou Firefox
Étape 1 – Créer un compte sur Claude
- Ouvrir un navigateur (Edge, Chrome, Firefox).
- Aller sur le site claude.ai.
- Cliquer sur Sign up / S’inscrire.
- Choisir un mode de connexion :
- soit Continuer avec Google,
- soit Continuer avec une adresse e‑mail.
- Choisir l’offre gratuite (suffit pour un prototype pédagogique).
Étape 2 – Préparer le «prompt » à coller dans Claude en utilisant une autre IA car la version gratuite est limitée en terme de requête.
Vous allez rédiger un texte, une consigne (prompt) que vous collerez ensuite dans Claude.
Ce prompt expliquera à l’IA ce qu’elle doit générer : une page web en HTML/CSS/JavaScript pour réviser.
Voici un modèle de prompt que vous pourrez adapter (par exemple à vos référentiels, programmes, niveaux, etc.) :
EXEMPLE DE PROMPT À COLLER DANS CLAUDE
EXEMPLE COURT
Fais moi un prompt pour Claude. Je veux faire une application en HTML pour des élèves de terminale BAC PRO en histoire géographie sur les 4 thèmes au programme (charger le référentiel en PDF). Je veux un rappel du cours, des dates et des notions. Je veux des exercices avec des QCM, de l’association, des questions sèches et des questions type examen bac pro. Je veux des exercices différenciés et des scores.
EXEMPLE LONG
Fais moi un prompt pour CLAUDE. Tu es un développeur web expert en pédagogie.
Ta mission : générer le code complet d’une application de révision en HTML/CSS/JavaScript dans un seul fichier HTML, prêt à être enregistré et ouvert dans un navigateur.
Contexte pédagogique :
- Public : élèves de [indiquer le niveau : CAP, Bac Pro, BTS…].
- Discipline : [indiquer : français, histoire-géo, EMC, etc.].
- Objectif : réviser les notions clés, repères, définitions et préparer aux examens certificatifs.
- Possibilité d’intégrer mon cours ou les référentiels officiels Contenus à intégrer dans l’application :
- Une section Cours
- Affichage de fiches de cours courtes (titre + résumé + éventuellement exemples).
- Prévoir une structure simple pour que je puisse facilement remplacer le texte par le mien.
- Une section Exercices d’application
- Exercices à réponse courte (questions ouvertes).
- Correction affichable par un bouton « Voir la réponse ».
- Une section Flashcards
- Cartes avec une question/terme au recto, et la réponse/définition au verso.
- Possibilité de cliquer pour retourner la carte.
- Une section Exercices d’association
- Associer des notions à leurs définitions (par exemple sous forme de listes à faire correspondre ou de drag‑and‑drop simple si possible).
- Une section QCM
- Questions à choix multiples avec plusieurs propositions et une ou plusieurs bonnes réponses.
- Correction automatique et affichage du score.
- Une section Questions type examen
- Questions plus longues (rédaction courte, analyse de document, question de cours).
- Zone de texte pour écrire la réponse + modèle de correction ou éléments de réponse affichables.
Différenciation pédagogique :
- Proposer au moins trois parcours :
- Parcours « Découverte / Aide » (questions simples, rappels de cours fréquents).
- Parcours « Standard » (niveau attendu à l’examen).
- Parcours « Avancé / Entraînement intensif » (questions plus difficiles, plus nombreuses).
- Prévoir un système simple de niveau (un menu déroulant ou des boutons) pour choisir le parcours au début.
Scores et suivi :
- À chaque QCM ou activité corrigée automatiquement, afficher :
- le nombre de bonnes réponses,
- le pourcentage de réussite,
- un message d’encouragement adapté (par exemple : « À retravailler », « En bonne voie », « Excellent ! »).
- Afficher un score global à la fin d’une session (somme ou moyenne des activités).
Contraintes techniques :
- Génère un seul fichier HTML contenant tout :
- la structure HTML,
- le style CSS (intégré dans <style>),
- le JavaScript (intégré dans <script>).
- Interface claire et responsive, utilisable sur ordinateur et sur smartphone.
- Ajoute des commentaires dans le code pour m’indiquer où je peux modifier :
- les intitulés de cours,
- les questions,
- les réponses,
- les niveaux de difficulté.
- N’utilise pas de bibliothèques externes (pas de CDN, pas de frameworks), uniquement HTML/CSS/JS natif.
Étape 3 – Utiliser Claude pour générer l’application
- Se connecter à votre compte Claude (claude.ai).
- Ouvrir une nouvelle conversation.
- Coller le prompt complet ci‑dessus dans la zone de texte.
- Cliquer sur Envoyer.
- Attendre que Claude génère le code HTML complet de la mini‑application.
- Double‑cliquer sur le fichier pour l’ouvrir dans Edge, Chrome ou Firefox.
Vous pouvez également utiliser une autre IA mais Claude donne les résultats les plus probants.
Le cas échéant, vous pouvez utiliser Mistral et une fois les lignes de code créées, vous devez copier le code obtenu sur un document (BLOC NOTE) et l’enregistrer en mettant à la fin .html
