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
 
Tu dois créer une page html bootstrap 4 qui sera importée dans Moodle 4.5. Attention au chargement de jquery. crer en javascript pur si c'est plus robuste.
Tu dois utiliser les classes boostrap et lorsque ce n'est pas possible, tu dois placer les styles à l'intérieur des balises. Tu ne dois pas générer de balise <style>.
Je possède déjà bootstrap 4. Tu dois placer la balise <script> à la fin du body. 
Tu dois me retourner le code html situé à l'intérieur de la balise <body>
Modifié le: jeudi, 18 septembre 2025, 13:08