Suite EdNum - Éducation Numérique (Webapps & Ressources)

🎯 Présentation du projet

Bienvenue dans la Suite EdNum, un projet développé par l'Animation Pédagogique Éducation Numérique (HEP-VS).

Ce dépôt regroupe des applications web interactives (webapps) et des outils pédagogiques, sans publicité, et créés spécifiquement pour accompagner l'enseignement de la science informatique à l'école primaire (en complément des manuels valaisans et vaudois Décodage).

La philosophie pédagogique repose sur des interfaces épurées, une progression adaptative, de la gamification et une utilisation garantie 100% hors-ligne pour permettre aux élèves et aux enseignant·e·s de se concentrer sur l'apprentissage.

🍎 Pour les enseignant·e·s (Utilisation simple)

Ces outils sont conçus pour fonctionner de la manière la plus simple possible, directement dans le navigateur (Chrome, Firefox, Safari, Edge) de votre ordinateur de classe ou de votre tablette.

✨ Les avantages pour votre classe

• Zéro installation : Pas de serveur, pas de logiciel lourd. Téléchargez le dossier, double-cliquez sur index.html et c'est parti !
• 100% Hors-ligne : Une fois la page ouverte (ou installée comme application sur tablette), vous n'avez plus besoin d'internet. Parfait pour les écoles avec une connexion instable.
• Essayez tout de suite : Toutes nos applications sont directement jouables en ligne sur le portail www.ednum.org.

📦 Installation via npm (pour les responsables informatiques)

Si Node.js (≥ 18) is installé sur votre machine, vous pouvez lancer la suite directement avec une seule commande — sans téléchargement manuel ni serveur à configurer :

npx @ednum/suite-ednum

Cela démarre automatiquement un serveur local et ouvre le portail dans votre navigateur sur http://localhost:3000.

Port personnalisé : PORT=8080 npx @ednum/suite-ednum Sans ouverture automatique du navigateur : npx @ednum/suite-ednum --no-open

📱 Compatibilité Multi-Supports (Responsive Design)

Nos applications sont pensées pour s'adapter à toutes les tailles d'écran (Mobile, Tablette, Desktop, et Ecrans larges). L'interface reste claire et utilisable sur tous les supports.

Voici un exemple avec le simulateur d'automate, prouvant la compatibilité sur de multiples supports :

| Mobile | Écran large (Wide) | |:---:|:---:| | | | | Affichage vertical compact | Exploitation complète de la largeur d'écran |

🎮 Nos Webapps pour les élèves (Jeux pédagogiques)

Toutes nos applications intègrent une interface unifiée (design "Glassmorphism" moderne), un mode clair/sombre/contraste élevé, une difficulté adaptative intelligente, et des graphiques circulaires pour visualiser les progrès. L'application portail d'accueil (index.html) permet un accès facile et rapide à chaque outil. Pour les plus jeunes (4-7 ans, Cycle 1), un portail simplifié est également disponible (indexC1.html).

1. Simulateur Automate (webapps/simulateur_automate.html)

• À quoi sert l'outil : Un simulateur de robot programmable permettant aux élèves de découvrir les bases de la robotique et de la pensée algorithmique à travers des parcours libres et des puzzles de cheminement dynamiques. Mode d'emploi détaillé | Tutoriel de partage.
• Lien DÉ>CODAGE : 3-4e · Scénario 2 — Automates · Automate (Demi-cycle 3-4H)
• Fonctionnalités : 5 modes principaux (Exploration, Simulateur, Pilotage, Décodage, et Dessin). Explorez librement le robot, résolvez des puzzles avec règles strictes (Facile, Moyen, Difficile, Extrême), prédisez les parcours et trouvez des bugs. Utilisez les modes interactifs Chasse aux paires ou Épeler sur des tapis spécifiques pour récolter des paires ou former des mots. Créez aussi vos propres défis.
• Valeur pédagogique : Travaille la pensée algorithmique, la décomposition de problèmes, la décentration cognitive (droite/gauche relatives au robot) et favorise l'anticipation par la programmation à l'aveugle.

2. Pixel Studio (webapps/binaire_studio.html)

• À quoi sert l'outil : Un studio de codage interactif faisant le lien entre des images matricielles (en noir et blanc ou en 4 couleurs) et leur représentation binaire (1 ou 2 bits par pixel). Mode d'emploi détaillé.
• Lien DÉ>CODAGE : 5-6e · Scénario 4 — Codage de données, codage binaire (Demi-cycle 5-6H)
• Fonctionnalités : 3 modes : Décoder (dessiner d'après le code), Encoder (trouver le code d'une image) et Éditeur Libre. Propose un suivi des scores sur les modes Décoder et Encoder, un basculement instantané entre le mode Noir & Blanc (1 bit) et le mode Couleurs (2 bits : noir 00, vert 01, bleu 10, jaune 11), export PNG et partage par URL.
• Valeur pédagogique : Matérialise le concept abstrait de "numérisation". Comprendre que l'information visuelle (pixels) se traduit en séquences binaires de 0 et de 1.

3. Mots secrets (webapps/binaire_message.html)

• À quoi sert l'outil : Un jeu interactif pour chiffrer et déchiffrer des mots en utilisant l'alphabet binaire. Mode d'emploi détaillé.
• Lien DÉ>CODAGE : 7-8e · Activité 2 — Codages en folie (séance 2) (Demi-cycle 7-8H)
• Fonctionnalités : 2 modes principaux (Encoder un mot secret et Décoder un message secret), avec suivi des scores.
• Valeur pédagogique : Les élèves découvrent que les lettres sont représentées par des nombres, eux-mêmes encodés en binaire. Stimule le calcul mental (puissances de 2) et renforce la collaboration avec le mode (dé)codeur de messages.

4. Routage Réseau (webapps/routage_reseau.html)

• À quoi sert l'outil : Simulation visuelle pour trouver le chemin le plus rapide pour acheminer un "paquet" dans un réseau. Mode d'emploi détaillé.
• Lien DÉ>CODAGE : 7-8e · Activité 8 — Les réseaux, Niveau 2 (Demi-cycle 7-8H)
• Valeur pédagogique : Montre qu'un chemin court "visuellement" n'est pas le plus rapide (coût des routes). Sensibilise à l'infrastructure d'Internet et développe des stratégies d'optimisation face à des graphes complexes.

5. Codage binaire (webapps/binaire_codage.html)

• À quoi sert l'outil : Entraînement intensif au passage des nombres entiers (décimal) vers le binaire, et inversement. Mode d'emploi détaillé.
• Lien DÉ>CODAGE : 7-8e · Activité 2 — Codages en folie (séance 1) (Demi-cycle 7-8H)
• Valeur pédagogique : Consolide la numération de position sur 8 bits (jusqu'à 255) et guide l'élève de manière proactive et étayée (feedback "trop grand / trop petit").

6. Bit de Parité (webapps/bit_de_parite.html)

• À quoi sert l'outil : Jeu sur la parité (paire) permettant de comprendre comment l'ordinateur détecte qu'un message a été altéré. Mode d'emploi détaillé.
• Lien DÉ>CODAGE : 7-8e · Enquête 5 — Peut-on détecter des erreurs... ? (Demi-cycle 7-8H)
• Valeur pédagogique : Initie à l'intégrité de la donnée via des métadonnées (le bit de parité) et développe le repérage spatial via des coordonnées sur une grille.

7. Générateur de mots de passe (webapps/generateur_mot_de_passe.html)

• À quoi sert l'outil : Création et audit interactif de mots de passe robustes (briques de construction, mot de passe magique, détection de motifs, estimation du temps de craquage et 4 règles d'or de cybersécurité). Mode d'emploi détaillé.
• Contexte & Utilisation : Outil pratique pour aider les élèves (dès 5-6H) à concevoir et mémoriser un mot de passe sécurisé pour se connecter à leur environnement numérique de travail (edu.vs.ch).
• Valeur pédagogique : Sensibilise à la cyberhygiène, à l'importance de la longueur et de la complexité face aux attaques par force brute ou dictionnaires.

🛠️ Ressources pratiques pour les enseignant·e·s

Trouvez ces outils dans le portail central index.html ou directement dans le dossier webapps/teacher/. Mode d'emploi des outils enseignants.

Générateur de Barème (webapps/teacher/bareme.html)

Un petit utilitaire sans publicité permettant de générer instantanément un barème de points pour la correction d'évaluations (avec option d'impression PDF au format propre). Mode d'emploi détaillé.

Tirage au Sort (webapps/teacher/tirage.html)

Outil visuel pour désigner un·e élève au hasard. Gère la sauvegarde automatique (localStorage), l'exclusion d'élèves (absents) et conserve l'historique des tirages. Mode d'emploi détaillé.

Créateur de QR codes (webapps/teacher/qrcode.html)

Générateur sobre et rapide de QR codes pour la classe (liens, textes, Wi-Fi, fiches et planches imprimables, projection TBI, téléchargement HD et copie presse-papier). Mode d'emploi détaillé.

Minuteur visuel (Time-Timer) (webapps/teacher/time_timer.html)

Compte à rebours visuel de 60 minutes avec disque coloré paramétrable, réglage fluide au glisser-déposer, raccourcis d'activités prédéfinis, carillons sonores (Web Audio API sans ressource externe) et modes plein écran / projection TBI pour structurer le temps en classe.

🧪 Applications en avant-première (Dossier alpha/)

• 🏗️ Jeu de la grue : Mode d'emploi
• 💻 Pseudo-code : Mode d'emploi
• ⚡ Compresseur magique (RLE) : Mode d'emploi
• 🔐 Machine à chiffrer (César, Vigenère, Morse) : Mode d'emploi
• 📦 Machine à trier : Mode d'emploi
• 🔀 Réseau de tri : Mode d'emploi
• 🔒 Coffre-fort numérique : Mode d'emploi
• 🧠 Dresseur de neurones & Détective IA : Mode d'emploi
• 👓 Lentille de dyslexie (DYS) : Mode d'emploi
• 🃏 Une chose après l'autre (Tri par insertion) : Mode d'emploi
• ⌨️ Dactylo (Clavier suisse romand QWERTZ) : Apprentissage et entraînement à la frappe au clavier avec 10 niveaux progressifs, statistiques MPM et précision en direct.

💻 For Developers and Contributors

Do you like clean, lean, and extremely performant code? This project is for you. We have made the radical choice of 100% Vanilla. No React, no Tailwind, no npm install to compile production. The source code is the production code.

🏗️ Technical Architecture

• Stack: HTML / CSS (Native Variables) / JS (ES6).
• Offline-First & PWA: A robust Service Worker (sw.js) pre-caches all assets and HTML files using a Stale-While-Revalidate strategy. The cache manifest and a SHA-256 cache-busting hash are auto-generated by node meta/scripts/generate-sw-manifest.js. An update notification prompts users to reload when a new version is available.
• Shared Design System: All Glassmorphism, Dark Mode, and UI components (.btn, .tabs, .card) are split across four CSS files loaded in parallel: assets/css/tokens.css (design tokens & variables), assets/css/base.css (resets & typography), assets/css/components.css (reusable components), and assets/css/utilities.css (helper classes).
• Global Managers:
  • Scores and Gamification: assets/js/scores.js (ScoreManager).
  • Sounds (Web Audio API): assets/js/audio.js (no external .mp3 files).
  • Toasts & Particles: assets/js/toast.js and assets/js/confetti.js.
• Vector Icons (FontAwesome): We use FontAwesome 7 Pro (Solid & Duotone). Instead of loading a huge font file, a Node.js script (meta/scripts/generate_fa_subset.js) parses the HTML and dynamically generates assets/js/fa-subset.js (under 20kb!).

🤝 How to contribute?

Contributions (new apps, bug fixes, or UI optimizations) are highly appreciated! Check out the Contributing Guide to learn more.

1. Fork the project and clone your repo.
2. Create a branch (feature/new-app).
3. Make your changes while respecting the Project Patterns (see meta/memory/code-patterns.md).
4. Run the unit and E2E tests before submitting.
5. Open a Pull Request to main.

🧪 Testing

Our CI pipeline checks every PR. We use Node.js for unit tests and Playwright (Python) for E2E tests.

To run tests locally:

# 1. Unit Tests (Node.js)
npm run test:unit

# 2. E2E Tests (Playwright/Python)
python3 -m pip install -r meta/tests/e2e/requirements.txt && playwright install
python3 -m http.server 8000 > server.log 2>&1 &
sleep 5
python3 -m pytest meta/tests/e2e/
kill $(lsof -t -i :8000) 2>/dev/null || true

• Security: A _headers file must exist in the root configuring HSTS (Strict-Transport-Security) for static deployments to enforce HTTPS.
• Experimental Features: Alpha-stage applications are hosted under the alpha/webapps/ directory.

📜 Changelog and Internal Documentation

Our entire development process (architecture decisions, logs) is archived in the meta/memory/ folder. If you modify the global architecture, remember to update project-context.md or event-log.md.

📬 Contact / Support

For any pedagogical or technical questions, you can contact me: 📧 vivian.epiney [at] hepvs.ch

⚖️ Licences & Mentions Légales

Ce projet s'inscrit pleinement dans la philosophie des biens communs numériques éducatifs et du logiciel libre :

• Code source : 100% du code source est distribué sous licence AGPL-3.0 (GNU Affero General Public License v3). Partagez, modifiez, mais gardez le code libre !
• Contenus didactiques & pédagogiques : Les documentations, modes d'emploi, tutoriels et défis pédagogiques sont mis à disposition sous licence CC BY-SA 4.0 (Creative Commons Attribution – Partage dans les Mêmes Conditions 4.0 International).
• Icônes : Les icônes vectorielles proviennent de la suite Font Awesome Pro (Fonticons, Inc.), utilisées sous licence commerciale d'utilisation pour le projet.
• Pages d'information légale :
  • Mentions légales
  • Politique de confidentialité & Données élèves
  • Conditions générales d'utilisation (CGU)