Partage IA

1. Découvrir

Découvrez la valeur de l'indice et des rétroactions spécifiques pour l'apprenant(e) avant de lui soumettre un problème à résoudre.

Tester avec :

• Canva
• Page web autonome (Google Sites)
• Moodle

2. Générer le code

Soumettez votre requête à l'IA de votre choix pour générer le code source d'une activité similaire et copiez le code généré.

Tu es un expert en conception Web.

Tu dois générer le code d'une page HTML autonome qui contient une activité interactive destinée à des élèves du secondaire qui apprécient les environnements ludiques avec des icônes et des couleurs variées.

Tu dois choisir les couleurs en respectant les règles d'accessibilité. 

Tu dois offrir une navigation intuitive et des boutons colorés qui possèdent des marges intérieures suffisantes pour que les lettres ne touchent pas les côtés en plus de permettent de revenir en arrière au besoin. 

Tu dois adopter un ton encourageant, bienveillant et formateur.

Ces élèves doivent développer la compétence « justifier un choix en s’appuyant sur des exemples, un raisonnement clair et des procédés variés ».

Tu dois créer 4 pages.

Contenu de la page 1 :

Tu dois proposer 4 productions culturelles et inviter l'élève à en choisir une qui l'interpelle pour dénoncer les inégalités :

Collage féministe (art urbain)
Chanson Tshinanu (Samian feat. Kashtin)
Spectacle d’humour (Mathieu Cyr)
Chanson Ma peau (Sarahmée)

Tu dois offrir une zone d'écriture à l'élève qui devra inscrire une première justification. Tu dois lui demander d'expliquer pourquoi cette oeuvre est celle qui communique le mieux le message.

Contenu de la page 2 :

L'élève doit voir sa justification précédente et choisir une rétroaction d'amélioration parmi cette liste : 

« Ajoute une citation ou un exemple précis de la production. »
« Explique davantage ton raisonnement étape par étape. »
« Indique un critère qui soutient ton choix (impact, clarté, pertinence). »
« Montre l’effet que cette production a sur toi, les autres ou la société. »
« Mets en évidence un procédé (répétition, image, humour, mots connotés, etc.). »
« Varie les moyens pour appuyer tes idées. »

La rétroaction qui est sélectionné doit changer de couleur pour aider à voir qu'elle est sélectionnée.

L'élève doit pouvoir bonifier sa justification précédente qui doit être déjà inscrite dans la nouvelle zone d'écriture. Tu dois l'inviter à tenir compte de la rétroaction choisie.

Contenu de la page 3 :

Le processus se répète pour la page 3. Tu dois signaler visuellement à l'élève que la rétroaction précédemment choisie est déjà sélectionnée et qu'elle ne peut pas être sélectionné à nouveau. 

Contenu de la page 4 :

Félicite l'élève et offre-lui un message encourageant qui tiendra compte des rétroactions qu'il aura choisies.

Affiche côte à côte la première justification et la dernière version améliorée.

Affiche le type de production choisie et la liste des rétroactions utilisées par l’élève.

Évite d'utiliser une technologie qui fera en sorte que dès qu'une lettre est inscrite dans une zone d'écriture, la page soit rechargée.

⚠️  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.

3. Publier

Directives pour la publication de votre code dans Moodle, Google Sites ou Canva.

• Publication Google Sites
• Publication Moodle
• Canva ne nécessite pas de publication car il propose un lien de partage.