--- 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 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. * [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 pour le cycle 3 avec exemples de réussite](https://codimd.apps.education.fr/s/R-N-hbQka) ::: :::danger **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** * Sur [**Capytale** <i class="fa fa-external-link" aria-hidden="true"></i>](https://capytale2.ac-paris.fr/web/c/2423-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) - 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 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. --- ## 💬 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 #### 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. #### Sur CAPYTALE Vous trouverez le tout (V1 & V2, .py et .csv) sur Capytale à cette adresse : https://capytale2.ac-paris.fr/web/c/2423-6804418 Code de partage : 2423-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