--- title: Outil pour créer une progression par glisser-déposer tags: Programme, TICE, tuto, Progression description: Tuto pour un outil pour créer une progression par glisser-déposer ---  # 🧩 Générateur interactif de progression en 6e - Tutoriel :::warning Cette page donne un tutoriel et présente un outil interactif conçu pour aider les enseignants de mathématiques à construire une **progression annuelle** pour le niveau 6e selon le nouveau programme 2025. Présentation générale sur la [page académique (Maths et Numérique / Outils) <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/spip.php?article3470). Autres ressources : * [Programme cycle 3 sur éduscol](https://eduscol.education.fr/251/mathematiques-cycle-3) * [Une extraction pour le niveau 6e](https://codimd.apps.education.fr/s/O3FEdQmRa). * [Synthèse du programme cycle 3 et exemples de réussite](https://codimd.apps.education.fr/s/R-N-hbQka) * [Changements dans le programme de 6e](https://codimd.apps.education.fr/s/BIBjSvfhn) * 🆕[Générateur de calendrier de reprise des automatismes en 6e](https://codimd.apps.education.fr/s/xd2gxRA1m) ::: :::danger **🧩 Générateur interactif de progression en 6e - Deux versions en ligne :** * [**V1 sans automatismes** <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_outil-web-interactif-iaipr-ot.html) * [**V2 avec Automatismes 🛠 et emoji** 😎 <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_outil-web-interactif-auto-iaipr-ot.html) **<i class="fa fa-code-fork" aria-hidden="true"></i> Code source** partagé sous licence libre [Creative Commons By-SA <i class="fa fa-creative-commons" aria-hidden="true"></i><i class="fa fa-user-circle-o" aria-hidden="true"></i><i class="fa fa-repeat" aria-hidden="true"></i>](https://creativecommons.org/licenses/by-sa/4.0/deed.fr) * Sur [**Capytale** <i class="fa fa-external-link" aria-hidden="true"></i>](https://capytale2.ac-paris.fr/bibliotheque/6804418) * Sur [**La Forge** <i class="fa fa-external-link" aria-hidden="true"></i>](https://forge.apps.education.fr/pantalonivincent/generateur-progressions) ::: Le principe est de glisser et déposer les objectifs listés dans le menu de gauche vers les blocs de séquences à droite. Essayez ci-dessous : <iframe src="https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_outil-web-interactif-auto-iaipr-ot.html" width="120%" height="570px" frameborder="0" allowfullscreen> </iframe> > [🔗Ouvrir en pleine largeur dans un nouvel onglet <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_outil-web-interactif-auto-iaipr-ot.html) > 📎 Ce fichier HTML interactif s’ouvre en ligne dans votre navigateur. Vos modifications peuvent être enregistrées localement (Ctrl+S), y compris tous les glisser-déposer, les titres, commentaires, et ajouts personnalisés. ## 🗂️ 1. Panneau de gauche : Objectifs du programme Le panneau gauche regroupe tous les **objectifs classés par thème et sous-thème**. Il y a tous les objectifs de 6e et quelques objectifs de CM2 et CM1 des nouveaux programmes de cycle 3, en vue des deux années de transition. - 📁 Cliquez sur les titres pour **déplier/replier**. - 🎯 Chaque objectif peut être **glissé** vers la droite dans une séquence. - ✅ Une fois placé, l’objectif devient grisé et barré à gauche. - 🔢 Des **compteurs** affichent le nombre d’objectifs placés / total par thème. - 🛠 Ce pictogramme, dans la [version avec automatismes](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_outil-web-interactif-auto-iaipr-ot.html) indique un automatisme. Ils sont listés deux fois : dans chaque thème et dans le dernier thème **Automatismes**. ### 🔘 Boutons utiles - **Tout déplier / replier** : pour afficher ou masquer tous les thèmes. - **☰** en haut à gauche : masque/affiche le panneau gauche. - || La séparation verticale entre les deux panneaux est mobile. --- ## 🧱 2. Panneau de droite : Construction de la progression ### 📦 Les séquences Chaque séquence est un bloc **repliable** (avec la flèche <i class="fa fa-play"></i>) avec plusieurs fonctionnalités : - ✍️ **Titre éditable** (cliquez pour modifier). - 📥 Déposez les objectifs depuis la gauche dans la zone pointillée. - On peut à tout moment remettre un objectif à gauche (croix pour supprimer à droite) ou glisser et déposer un objectif dans une autre séquence. - 🔼🔽 **Flèches** pour réorganiser les séquences. - 📝 **Ajouter un commentaire** (ex : ressource, lien, remarque). - ➖🛠 **Ajouter un séparateur** "Exos / RdP / Automatismes" pour déposer en dessous les objectifs qui seront traités en exercices. Le texte de ce séparateur peut être édité et servir à autre chose. - ❌ Supprimez la séquence si besoin. ### ➕ Boutons en bas - **➕ Séquence** : ajoute un nouveau bloc. - ==**➕ Vacances**== : insère une ligne décorative "Vacances" (éditable) entre deux séquences. --- ## 🧾 3. Ajouter des éléments spécifiques ### 📝 Commentaires / Ressources - Chaque séquence peut contenir un ou plusieurs **commentaires** : - Bloc repliable. - Titre et texte **entièrement éditables**. - 🔗 Les **liens web sont automatiquement activés**. ### 📎 Séparateur "➖Exo / 🛠" - Ajoute une **ligne horizontale stylisée** pour délimiter la partie les objectifs qui seront traités en exercices dans une séquence. En particulier on y mettra les objectifs "Résolution de problèmes (RdP)" - ✏️ Le texte "Exo / RdP" par défaut est **modifiable**. ### 🏖️ Vacances - Le bouton ==**➕ Vacances**== ajoute un séparateur visuel entre les séquences. - ✏️ Le texte "Vacances" est **éditable** eg "🍁 Vacances d'automne 🍁". --- ## 🧑‍ 4. En-tête personnalisable En haut de la page : - Le **titre principal** est fixe, - 🖼️ Le logo de l’académie est intégré dans le fichier - Le **sous-titre** est éditable (ex : nom professeur, du collège, nom de version, etc.). --- ## 💾 5. Sauvegarde de votre travail ### ✅ Tout est **sauvegardé** lorsque vous faites : - `Ctrl + S` (ou `Cmd + S` sur Mac) ou clic droit *Enregistrer sous* (Page Web, Complète) - <i class="fa fa-apple" aria-hidden="true"></i><i class="fa fa-bug" aria-hidden="true"></i> Des bugs sous Mac ont été remontés concernant la sauvegarde, il semble préférable d'utiliser le navigateur Chrome <i class="fa fa-chrome" aria-hidden="true"></i>. - Lorsque vous ouvrez le fichier ensuite, vous retrouvez vos : - Objectifs déplacés - Titres de séquences - Commentaires - Vacances - Séparateurs Exos / RdP - Sous-titre personnalisé 💡 **Pas besoin de base de données ni de connexion Internet.** C’est un fichier autonome qui reste interactif. Vous pouvez transmettre ce fichier par mail à des collègues. ### Export / sauvegarde pdf - `Ctrl+P` permet un export propre en pdf : - Uniquement le volet de droite, - Sans les boutons, - En couleur ou N&B. - Zoom conseillé : 70% --- ## Exemples de progressions selon ce format ### Progression du collège Jules Verne (Bourges, Cher, ac. Orléans-Tours) Merci à Céline Bruel, formatrice académique experte qui a participé au groupe de travail sur les progressions en 2024 ([GT progressions](https://codimd.apps.education.fr/s/xjiqofUM8)), de nous partager la progression 25-26 de l'équipe du collège, enrichie de plusieurs ressources en ligne. <iframe src="https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_celine-bruel-clg-jules-verne-bourges-ot.html" width="100%" height="600px" frameborder="0" allowfullscreen> </iframe> [Ouvrir dans un nouvel onglet <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_celine-bruel-clg-jules-verne-bourges-ot.html) ### Progression du collège Robert Schuman d'Amilly (45) Merci à Julien Lasne du collège Robert Schuman d'Amilly (45) de nous partager leur progression avec de nombreuses ressources en commentaire (clic droit sur les liens, ouvrir dans un nouvel onglet). Cette progression est conçue en lien avec le manuel TRAM, des références à certaines pages et chapitres sont données. <iframe src="https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_julien-lasne-clg-schuman-amilly.html" width="100%" height="600px" frameborder="0" allowfullscreen> </iframe> [Ouvrir dans un nouvel onglet <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_julien-lasne-clg-schuman-amilly.html) ### Progression de Jean-Yves Labouche Jean-Yves a partagé sa progression de 6e sur son site ici : https://www.monclasseurdemaths.fr/profs/progression-en-6e-rentr%C3%A9e-2025/ Je l'ai rentrée comme exemple dans l'outil créé, et cela fait une bonne base de travail, facilement modifiable. Tous les objectifs de 6e sont placés dans 20 séquences et trois thèmes transversaux qui sont notés à la fin. <iframe src="https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_jyl-2-06.html" width="100%" height="570px" frameborder="0" allowfullscreen> </iframe> [Ouvrir dans un nouvel onglet <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_jyl-2-06.html) ### Progression V40 - Amélie Cazottes Amélie Cazottes, formatrice dans l'académie qui a rejoint l'académie de Limoges nous partage cette progression en 40 séquences. C'est une adaptation *mutatis mutandis* de la "V40" proposée l'an dernier par le [GT progressions](https://codimd.apps.education.fr/s/xjiqofUM8). <iframe src="https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_spiralee40-amelie_cazottes.html" width="100%" height="570px" frameborder="0" allowfullscreen> </iframe> [Ouvrir dans un nouvel onglet <i class="fa fa-external-link" aria-hidden="true"></i>](https://pedagogie.ac-orleans-tours.fr/documents/html/progression_6e_spiralee40-amelie_cazottes.html) ### 🚧 Autres exemples à venir... 🛠️ <i class="fa fa-gear fa-spin fa-2x" style="color: DodgerBlue"></i> N'hésitez pas à partager votre progression. --- ## Identifier ce qui change dans le programme de 6e Ce document élaboré par deux collègues de l'académie (Jean-Michel Gazeau sur la base d'un pdf d'Elise Locatelli) utilise le même code couleur que l'outil de progression pour les thèmes et sous thèmes et permet de voir ce qui change de manière synthétique. https://codimd.apps.education.fr/s/BIBjSvfhn <iframe src="https://codimd.apps.education.fr/s/BIBjSvfhn" width="100%" height="550px" frameborder="0" allowfullscreen> </iframe> ## 💬 Questions ou retours ? Cet outil est développé par **Vincent Pantaloni, IA-IPR de mathématiques**. Pour toute suggestion, vous pouvez me contacter par mail ou via [𝕏 @VPantaloni](https://x.com/VPantaloni) --- ## <i class="fa fa-code-fork" aria-hidden="true"></i> Code source Le code est partagé sous licence libre [Creative Commons By-SA <i class="fa fa-creative-commons" aria-hidden="true"></i><i class="fa fa-user-circle-o" aria-hidden="true"></i><i class="fa fa-repeat" aria-hidden="true"></i>](https://creativecommons.org/licenses/by-sa/4.0/deed.fr) Citez cette page (https://codimd.apps.education.fr/s/lo4myTCVy) en cas de remix. #### Principe Pour construire une telle page html j'ai utilisé deux fichiers : * Un tableur (fichier csv, UTF8 séparateur virgule) nommé `Objectifs-6e-CM2.csv` qui comporte les thèmes et objectifs. Ce fichier sera appelé ensuite, par : * un fichier Python qui permet d'intégrer du JavaScript, et qui une fois exécuté produit le fichier interactif nommé `progression_6e_outil-web-interactif.html` L'avantage est que le même outil peut être utilisé pour une progression de n'importe quel niveau, il suffit de changer le fichier tableur source Thèmes, Sous-thèmes et Objectifs. L'avantage est que le même outil peut être utilisé pour une progression de n'importe quel niveau, il suffit de changer le fichier tableur source en gardant le même format. Il faudra aussi modifier les lignes de titres. ligne 374 : `<h4> Liste des objectifs et 🅰utomatismes🛠 de 6e (et CM). </h4>` pour le volet de gauche, et ligne 423 : `<h2 style="margin: 0;">Progression de 6e en mathématiques</h2>` en fonction du niveau et de la discipline. #### Sur CAPYTALE Vous trouverez le tout (V1 & V2, .py et .csv) sur Capytale à cette adresse : https://capytale2.ac-paris.fr/bibliotheque/6804418 #### Sur La Forge La V2 `progression.py` et `Objectifs-6e-CM2-Auto-2.csv` (avec automatismes) sont déposés sur La Forge des communs numériques : https://forge.apps.education.fr/pantalonivincent/generateur-progressions