La pertinence de l'IA pour la pratique guidée
Conditions d’achèvement
Informations
Article
La pertinence de l'IA pour la pratique guidée
Découvrez comment l'IA peut vous aider à concevoir une pratique guidée sans connaitre le langage de programmation HTML. Les bénéfices pour vos étudiants consistent à se faire offrir un questionnement et des rétroactions qui visent à valider leur compréhension des savoirs enseignés. Ils peuvent également se voir offrir une explication complémentaire en lien avec la question posée.
Auteur
Yvon Quémener
Date
2026-01-05
Secteur
FGA, FP, Primaire, Secondaire
Type de ressource
Article
Organisation
CSS des Premières-Seigneuries
IAG
Canva, Gemini
Production
HTML
Pour la personne enseignante
- Temps de conception moindre pour offrir de l’interactivité et des rétroactions
- Gain de temps malgré la validation et la correction
- Interactivité « sur mesure »
Pour la personne apprenante
- Lors de la pratique guidée :
- démonstrations explicites et morcelées
- Questionnements rétroactifs automatisés
- problèmes résolus, calculateurs ou simulateurs pour voir et comprendre comment atteindre le résultat attendu
- indices pour étayer l’aide
- Lors de la pratique autonome (exercices) :
- rétroaction spécifique lors du questionnement pour apprendre de ses erreurs
- formulation d’indices (au début seulement) pour étayer l’aide
Source : Guide MPAREILLE RÉCIT SED/FAD
Exemple en français : l'accord du participe passé
Requête à l'IA :
Tu dois créer une page html bootstrap 4. La page contient une activité interactive. La page propose une activité en lien avec l'accord du participe passé avec le verbe avoir et être. Une pratique guidée est présentée à l'élève. La pratique guidée doit expliquer la règle avec le verbe avoir et être. La pratique guidée simule la pensée de l'enseignant qui explique les règles à un élève. Tu dois rendre l'activité interactive en expliquant par étapes un accord du participe passé avec le verbe être et avoir. Une fois que la pratique guidée est terminée, un texte à corriger est présenté à l'élève (activer la visiblité). Au dessus du texte, une consigne est placée dans une boîte alerte. Le texte doit contenir environ 200 mots et la moitié des participes passés doivent être bien accordés. L'élève doit trouver des erreurs d'accords de participe passé conjugué avec le verbe avoir et être présents dans le texte. Il doit pouvoir cliquer sur chaque mot du texte. Aucun indice doit être présent avant la sélection des mots. Après avoir cliqué sur un mot, une bordure appraît. La validation est immédiate lorsqu'un mot est cliqué. Si l'erreur est identifiée, le mot est placé dans une alert success (un crochet visible indique la bonne réponse ). Si le choix de l'élève n'est pas bon, le mot est placé dans une alert danger et il faut afficher dans un tooltip la règle qui explique pourquoi l'accord est correct. Si le mot sélectionné n'est pas un participe passé, le mot est placé dans une alert warning. Sous le texte à corriger, placer un bouton de validation "chercher les autres erreurs présentes". Lorsque le bouton est cliqué, toutes les erreurs du texte qui n'ont pas été repèrées par l'élève sont identifiées à l'écran. En tout temps, le tooltip s'affiche lors du survol de la souris sur le mot du texte contenant une alert.
⚠️ Attention : les "Moodleurs" doivent ajouter ce complément de requête pour Moodle afin de récupérer le code source dans une page Moodle.
Instructions Techniques (TRÈS IMPORTANTES) :Technologie : Utiliser Bootstrap 4 (supposé présent dans Moodle) et du JavaScript "vanilla" (pas de jQuery ou React).
Compatibilité Moodle (JavaScript) :
Aucun attribut 'inline' (pas de onclick="..." dans le HTML).
Placer tout le JavaScript dans une seule balise <script> à la toute fin du code.
Le script doit s'exécuter après le chargement (utiliser document.addEventListener('DOMContentLoaded', ...)).
Utiliser querySelectorAll ou la délégation d'événements (document.body.addEventListener('click', ...) qui est plus robuste) pour attacher les fonctions aux boutons.
Utiliser des attributs data-* (ex: data-correct, data-target) sur les éléments HTML pour stocker les informations (comme les réponses ou les ID cibles).
Compatibilité Moodle (CSS) :
Aucune balise <style>.
Si des styles sont nécessaires (ex: cacher un élément), les placer "inline" (ex: style="display:none;").
Format de sortie : Fournir le code comme un fragment HTML unique (sans <html>, <head> ou <body>) prêt à être collé dans la vue HTML (</>) de l'éditeur Moodle.
Mathématiques : la trigonométrie
Voici un texte de requête complet et détaillé qui permettrait à une IA de générer exactement le code final.
Requête :
Agis comme un développeur web pédagogique expert. Crée une page interactive utilisant Bootstrap 4 pour apprendre à un élève comment trouver un angle dans un triangle rectangle à l'aide de la trigonométrie (SOH CAH TOA). Voici les spécifications précises : 1. Structure de la page : En haut : La section "À Toi de Jouer !" contenant le problème interactif. Elle doit inclure un énoncé généré aléatoirement, un SVG dynamique du triangle, et un QCM. En bas : Une section "Besoin d'aide ?" avec 4 onglets explicatifs (SOH CAH TOA, Identifier les côtés, Choisir la formule, Calculer). Contenu dynamique : Le texte dans les onglets d'explication doit s'adapter dynamiquement aux valeurs du problème généré (ex: citer les longueurs réelles du problème en cours). 2. Le Problème Interactif : Génère aléatoirement un cas (Sinus, Cosinus ou Tangente) avec des valeurs entières réalistes. SVG Dynamique : Dessine le triangle proportionnellement aux valeurs. L'angle droit doit toujours être en bas à gauche. Les côtés connus doivent afficher leur valeur. Les côtés inconnus doivent afficher "?". Assure-toi que le SVG a une hauteur suffisante et un padding adéquat pour que les étiquettes (labels) situées sous le triangle ne soient jamais coupées. QCM : Offre 4 choix de réponse : la bonne réponse, et 3 distracteurs plausibles (erreurs de calcul courantes, mauvaise formule, radians au lieu de degrés). Boutons : Ajoute un bouton "Indice" (qui donne une aide contextuelle), un bouton "Vérifier" (avec rétroaction pédagogique précise selon l'erreur), et un bouton "Nouveau Problème" (qui réinitialise tout et remet l'onglet d'explication au début). 3. Ton et Pédagogie : Utilise un ton "Enseignant" bienveillant et conversationnel (ex: "Moi (le prof) : ..."). Utilise des blocs visuels distincts (style .teacher-thought) pour les interventions du prof. 4. Contraintes Techniques : Format de sortie : Retourne uniquement le code HTML contenu à l'intérieur de la balise <body> (ne mets pas les balises <html>, <head> ou <body>). CSS : N'utilise pas de balise <style> dans le HTML. Tous les styles CSS doivent être injectés dynamiquement dans le . SVG ViewBox : Définis explicitement l'attribut viewBox des éléments SVG via JavaScript (setAttribute) lors du rendu pour garantir un affichage correct. Propreté : Pas de commentaires HTML visibles dans le rendu. Pas de pied de page (footer) ni de mention de copyright.
⚠️ Attention : les "Moodleurs" doivent ajouter ce complément de requête pour Moodle afin de récupérer le code source dans une page Moodle.
Instructions Techniques (TRÈS IMPORTANTES) :Technologie : Utiliser Bootstrap 4 (supposé présent dans Moodle) et du JavaScript "vanilla" (pas de jQuery ou React).
Compatibilité Moodle (JavaScript) :
Aucun attribut 'inline' (pas de onclick="..." dans le HTML).
Placer tout le JavaScript dans une seule balise <script> à la toute fin du code.
Le script doit s'exécuter après le chargement (utiliser document.addEventListener('DOMContentLoaded', ...)).
Utiliser querySelectorAll ou la délégation d'événements (document.body.addEventListener('click', ...) qui est plus robuste) pour attacher les fonctions aux boutons.
Utiliser des attributs data-* (ex: data-correct, data-target) sur les éléments HTML pour stocker les informations (comme les réponses ou les ID cibles).
Compatibilité Moodle (CSS) :
Aucune balise <style>.
Si des styles sont nécessaires (ex: cacher un élément), les placer "inline" (ex: style="display:none;").
Format de sortie : Fournir le code comme un fragment HTML unique (sans <html>, <head> ou <body>) prêt à être collé dans la vue HTML (</>) de l'éditeur Moodle.
Ce type d'activité contient un script complexe. Si vous éprouvez des difficultés à intégrer le code généré à l'intérieur d'une page Moodle, je vous recommande de conserver le code complet et de créer un fichier texte à l'aide du Bloc notes puis de l'enregistrer sous : monfichier.html puis l'intégrer dans Moodle en tant que fichier.
Conseil : Choisir l'option « Nouvelle fenêtre" au lieu de Automatique.
Sciences : la pratique guidée
Conseil : utiliser Gemini avec les options « Canevas » et « Réflexion »
Requête :
Tu es un enseignant de science au secondaire au Québec. Tu dois créer une pratique guidée interactive. La page est constituée de 3 sections. Dans le haut de la page (première section), tu dois afficher une barre de progression de l'élève. Dans cette zone, tu dois ajouter un message ou une icône lorsqu'il a saisi la valeur numérique de la bonne réponse à la fin de la dernière étape de résolution. Dans cette zone, on offre 3 Boutons: -"Ressource Alloprof" https://www.alloprof.qc.ca/fr/eleves/bv/chimie/la-calorimetrie-q-m-c-deltat-c1025 - "Générer un nouveau problème aléatoire" - "Choisir une autre variation du problème" En dessous (deuxième section), dans un encadré, le problème est présenté à l'élève. Exemple de problème: On dépose un morceau de cuivre d’une masse de 75 g dans un contenant thermos rempli d’eau (500 mL). On constate que la température de l’eau augmente. Elle passe de 15°C à 22 °C. Quelle est la quantité de chaleur que le morceau de cuivre a transféré à l’eau. Quel était la température initiale du morceau de cuivre ? En dessous (troisième section), on retrouve un aperçu de la feuille de l'élève car il est invité à résoudre le problème par étape sur une feuille de papier. L'affichage correspond à ce que l'élève est censé inscrire sur sa feuille, étape par étape. De chaque côté de la feuille, les boutons "Étape précédente" et "Étape suivante" permettent la navigation (actualiser la barre de progression) Au chargement, la feuille est vide. À chaque étape, tu dois placer un bouton "indice" et un bouton "afficher". Par exemple, à l'étape 1 On lui demandera d'identifier la valeur numérique de chaque symbole et d'y ajouter les unités. Lorsqu'il cliquera sur "Vérifier" la zone du bas de la page affichera alors, m = (avec la valeur et les unités correspondantes) et =? afin d'identifier l'inconnu. Le bouton "Afficher" montre à l'élève ce qu'il devrait avoir fait à cette étape. L'indice pourrait demander à l'élève comment il compte s'y prendre pour trouver l'inconnu. On cherche à le guider. l'enseignant qui pense à voix haute 1. Qu'est-ce que je cherche? 2. Comment dois-je m'y prendre? Précisions: Le problème doit être aléatoire (les nombres ainsi que le métal submergé peuvent changer). Tu dois offrir un bouton permettant de voir le tableau de référence des capacités massiques des métaux suivants : Fer, cuivre, aluminium, argent et plomb. Le problème est présenté et décliné en étapes (le nombre d'étapes peut varier selon le type de problème). Voici le questionnement à poser à l'élève à chaque étape: Le problème contient des valeurs numériques aléatoires, tu dois t'assurer que le volume d'eau se situe dans les limites situées entre 100 et 1000ml avec des volumes correspondant à un bécher. Tu dois t'assurer d'une température de l'eau finale située entre 30 et 90 degrés. tu dois utiliser des nombres et des métaux différents pour chaque problème généré de façon aléatoire. Variation 1 : le problème initial avec ses étapes de résolution Variation 2 : Chercher le bon métal Variation 3 : Chercher la température finale utiliser mathjax avec les délimiteurs \( doubler les barres obliques (\\) dans les chaînes de caractères du script.
⚠️ Attention : les "Moodleurs" doivent ajouter ce complément de requête pour Moodle après la validation dans Canvas afin de récupérer le code source dans une page Moodle.
Instructions Techniques (TRÈS IMPORTANTES) :Technologie : Utiliser Bootstrap 4 (supposé présent dans Moodle) et du JavaScript "vanilla" (pas de jQuery ou React).
Compatibilité Moodle (JavaScript) :
Aucun attribut 'inline' (pas de onclick="..." dans le HTML).
Placer tout le JavaScript dans une seule balise <script> à la toute fin du code.
Le script doit s'exécuter après le chargement (utiliser document.addEventListener('DOMContentLoaded', ...)).
Utiliser querySelectorAll ou la délégation d'événements (document.body.addEventListener('click', ...) qui est plus robuste) pour attacher les fonctions aux boutons.
Utiliser des attributs data-* (ex: data-correct, data-target) sur les éléments HTML pour stocker les informations (comme les réponses ou les ID cibles).
Compatibilité Moodle (CSS) :
Aucune balise <style>.
Si des styles sont nécessaires (ex: cacher un élément), les placer "inline" (ex: style="display:none;").
Format de sortie : Fournir le code comme un fragment HTML unique (sans <html>, <head> ou <body>) prêt à être collé dans la vue HTML (</>) de l'éditeur Moodle.
Ce type d'activité contient un script complexe. Si vous éprouvez des difficultés à intégrer le code généré à l'intérieur d'une page Moodle, je vous recommande de conserver le code complet et de créer un fichier texte à l'aide du Bloc notes puis de l'enregistrer sous : monfichier.html puis l'intégrer dans Moodle en tant que fichier.
Conseil : Choisir l'option « Nouvelle fenêtre" au lieu de Automatique.
