Instructions RÉCIT MST — référence IAG

Formats d'activités — logique et structure

Le projet RÉCIT MST organise ses ressources selon 4 intentions pédagogiques progressives. Chaque format d'activité est associé à une intention et possède une structure non négociable.

Conventions techniques — pages HTML RÉCIT MST

Template HTML obligatoire

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <meta name="description" content="[Description]">
  <title>[Titre descriptif]</title>
  <link rel="shortcut icon" href="https://recitmst.qc.ca/favicon.ico" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' 'unsafe-inline';
             style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;">
</head>
<body>
  <a href="#main-content" class="skip-link visually-hidden">
    Aller au contenu principal
  </a>
  <header role="banner"></header>
  <main id="main-content" role="main" aria-live="polite"></main>
  <div id="sr-announcer" role="status" aria-live="polite" class="visually-hidden"></div>
  <footer role="contentinfo">
    Ingénierie RÉCIT MST (mst@recit.gouv.qc.ca) |
    Programmation par une IAG avec
    <a href="https://drive.google.com/file/d/1dTVZGoRG6YVKinoENRLTWRhY4FVWxdPG/view?usp=sharing"
       style="text-decoration:underline;" target="_blank">ces instructions de sécurité</a>.
  </footer>
</body>
</html>

Encapsulation JavaScript obligatoire

// Option A — IIFE (recommandée pour compatibilité file://)
(function() {
    'use strict';
    // Tout le code ici — aucune variable globale
})();

// Option B — Module ES6
<script type="module">
    'use strict';
    // Encapsulation native
</script>

// ✗ INTERDIT — casse le parseur JS
let msg = 'L'élève doit vérifier';

// ✓ CORRECT — guillemets doubles
let msg = "L'élève doit vérifier";

// ✓ CORRECT — template literal
let msg = `L'élève doit vérifier`;

Sécurité — manipulation du DOM

// ✓ Autorisé
element.textContent = valeur;
const div = document.createElement('div');
element.setAttribute('data-id', valeurSanitisee);

// ✗ Interdit (sauf avec DOMPurify)
element.innerHTML = anything;
document.write(anything);

Pratiques strictement interdites

Système d'onglets

Scoper le JavaScript au conteneur .tab-group, jamais à section ou closest('section'). Les modales doivent être placées en dehors des conteneurs .tab-group pour ne pas être confondues avec des panneaux.

// ✓ Correct
const group = btn.closest('.tab-group');
const panels = group.querySelectorAll('.tab-panel');

// ✗ Incorrect (brise les onglets multiples)
const panels = btn.closest('section').querySelectorAll('.tab-panel');

Boutons imbriqués

Un <button> ne peut pas contenir un autre <button>. Si l'imbrication est nécessaire, remplacer l'élément conteneur par <div role="button" tabindex="0">.

CDN autorisés (exceptions documentées)

YouTube — règles d'intégration

• Utiliser youtube-nocookie.com pour l'intégration vidéo (confidentialité).
• Le script IFrame API doit charger depuis youtube.com (pas d'équivalent nocookie).
• Les pages servies en file:// déclenchent l'erreur 153 — utiliser VS Code Live Server ou python -m http.server.

Accessibilité WCAG 2.2 niveau AA — règles minimales

• Contraste de texte ≥ 4,5:1 (texte normal), ≥ 3:1 (texte large).
• Navigation au clavier complète. Focus visible sur tous les éléments interactifs.
• Attribut alt descriptif sur toutes les images. Balises <title> et <desc> dans chaque <svg>.
• Annonceur aria-live="polite" pour les mises à jour dynamiques.
• Liens « Aller au contenu principal » en début de page.
• Formules mathématiques via MathJax ou KaTeX (jamais d'images de formules).
• Supporter prefers-reduced-motion pour les animations.

Variables CSS obligatoires

:root {
    --accent-primary:   #0069bf;  /* Bleu RÉCIT */
    --accent-secondary: #faa22a;  /* Orange RÉCIT */
    --text-main:        #1e293b;
    --text-muted:       #475569;
    --bg-page:          #f8fafc;
    --bg-card:          #ffffff;
    --bg-surface:       #f1f5f9;
    --border-color:     #cbd5e1;
    --border-light:     #e2e8f0;
    --color-success:    #16a34a;
    --color-error:      #dc2626;
    --color-warning:    #d97706;
    --color-heading:    #384f5c;
    --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius-md: 8px;
    --radius-lg: 12px;
    --container-width: 1200px;
}

Hauteur des iframes intégrées

Utiliser wrapper.getBoundingClientRect().height (et non scrollHeight) avec overflow: hidden sur html, body pour éviter les boucles infinies. Utiliser un double requestAnimationFrame plutôt qu'un setTimeout pour une mesure post-layout fiable.

Gestion d'erreurs

window.addEventListener('error', (event) => {
    console.error('Erreur JS:', event.message, event.filename, event.lineno);
    // Afficher un message de repli à l'utilisateur
    const container = document.getElementById('error-container');
    if (container) {
        container.textContent = "Une erreur s'est produite. Veuillez recharger la page.";
    }
}, { passive: true });

Conventions éditoriales

Règles typographiques — toutes productions

Listes à puces

• Éléments constituant des phrases complètes : majuscule initiale, point final, cohérence stylistique.
• Éléments courts (fragments) : minuscules, point-virgule en fin de chaque élément sauf le dernier qui prend un point.

Favicon et pied de page (pages HTML)

Favicon obligatoire dans <head> :

<link rel="shortcut icon" href="https://recitmst.qc.ca/favicon.ico" />

Pied de page obligatoire :

Ingénierie RÉCIT MST (mst@recit.gouv.qc.ca) | Programmation par une IAG avec
<a href="https://drive.google.com/file/d/1dTVZGoRG6YVKinoENRLTWRhY4FVWxdPG/view?usp=sharing"
   style="text-decoration:underline;" target="_blank">ces instructions de sécurité</a>.

Contenu mathématique et graphique

• Formules mathématiques : MathJax ou KaTeX exclusivement (jamais d'images de formules).
• Images statiques : attribut alt descriptif obligatoire.
• SVG : balises <title> et <desc> incluses à l'intérieur de chaque <svg>.
• Outils tiers (Desmos, GeoGebra) : activer les options d'accessibilité (audiographe, etc.).

Cohérence terminologique — documents didactiques

• Distinguer clairement les savoirs disciplinaires (PFEQ/PDA) et les compétences globales (apprentissage en profondeur) quand les deux sont présents.
• Ne jamais écrire « apprentissage en profondeur » pour désigner des techniques d'IA (deep learning).
• Utiliser « apprentissage en profondeur (Fullan et Quinn) » ou « apprentissage significatif » pour lever toute ambiguïté.

Ton et posture pédagogique

• Ton bienveillant, guidant, structuré — jamais condescendant.
• Éviter les formules de validation émotionnelle vides dans les rétroactions (ex. : « Bravo ! Excellente réponse ! »).
• Préférer des rétroactions descriptives qui expliquent le raisonnement attendu.
• L'élève est toujours positionné comme agent actif et expert en devenir, jamais comme utilisateur passif de l'IA.

Checklist de validation avant livraison

Pédagogie

Technique

Accessibilité

Éditorial