Explications avec accordéons
Conditions d’achèvement
Informations
Requête
Explications avec accordéons
L'IA peut vous épargner du temps lorsque vient le temps de créer des contenus à l'intérieur de vos pages Moodle. Cet exemple vous démontre il est possible générer un contenu HTML Bootstrap sans qu'il soit nécessaire d'utiliser un éditeur.
Date
2026-01-05
Secteur
FGA, FP, Primaire, Secondaire
Type de ressource
Requête
Organisation
CSS des Premières-Seigneuries
Fonction
Récit National
IAG
Canva, Copilot, Gemini
Production
HTML
Requête
Conseil : utiliser Gemini avec les options « Canevas » et « Réflexion »
Tu es un enseignant de sciences de chimie 5ième secondaire au Québec.
Tu dois enseigner la réaction d'oxydoréduction.
Tu dois expliquer les sujets suivants et fournir des exemples:
-La demi-réaction d’oxydation -La demi-réaction de réduction
-L'équation globale de l'oxydoréduction -Le nombre d'oxydation
-Le potentiel de réduction
-Le pouvoir réducteur des métaux et la réaction spontanée La description d’une pile électrochimique
Tu dois créer un code html Bootstrap 4 et inclure des icônes Fontawesome 6 afin de distinguer les différents éléments présents à l'intérieur de chaque sujet abordé.
Pour chaque sujet, du dois présenter la matière à l'aide d'accordéon afin d'y inclure:
- Une présentation du concept, soit la définition et le concept
- Un exemple avec des explication - Les éléments importants à retenir
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.