# 🔗 Guide d'Intégration - Memory Pictogrammes (Option 1) Intégration du jeu Memory Pictogrammes GHS dans l'architecture **formations/memory-pictogrammes/**. --- ## 📌 Structure Finale Recommandée ``` Racine du site NextGN (/) ├── index.html (Page d'accueil) ├── formations/ ← NOUVEAU DOSSIER │ └── memory-pictogrammes/ │ ├── memory-pictogrammes.html (Page du jeu) │ ├── assets/ │ │ ├── css/ │ │ │ ├── memory-game.css │ │ │ ├── hud.css │ │ │ ├── animations.css │ │ │ └── leaderboard.css │ │ ├── js/ │ │ │ ├── memory-game.js │ │ │ ├── game-state.js │ │ │ ├── analytics.js │ │ │ ├── leaderboard.js │ │ │ └── utils.js │ │ └── pictogrammes/ │ │ ├── 1-gaz-comprime.png │ │ ├── 2-exclamation.png │ │ └── ... (9 images) │ └── docs/ │ ├── README.md │ ├── INTEGRATION_GUIDE.md │ ├── MANIFEST.md │ └── CONFIG.js ├── documentation-index.html ├── Exo_BioCID.html ├── Exo_FDS.html ├── data/ (Peut rester vide) └── ... (autres pages) ``` --- ## 🚀 Étapes de Déploiement ### **Étape 1 : Créer l'arborescence** ```bash # Créer les dossiers mkdir -p formations/memory-pictogrammes/assets/{css,js,pictogrammes} mkdir -p formations/memory-pictogrammes/docs # Copier les fichiers cp memory-pictogrammes.html formations/memory-pictogrammes/ cp assets/css/* formations/memory-pictogrammes/assets/css/ cp assets/js/* formations/memory-pictogrammes/assets/js/ cp assets/pictogrammes/* formations/memory-pictogrammes/assets/pictogrammes/ cp README.md INTEGRATION_GUIDE.md MANIFEST.md CONFIG.js formations/memory-pictogrammes/docs/ ``` ### **Étape 2 : Vérifier les chemins** Le fichier `memory-pictogrammes.html` contient déjà les bons chemins : **Fichiers CSS/JS** : Chemins relatifs (identiques car dans le même répertoire) ```html ``` **Lien de retour** : Chemin `../../index.html` (déjà mis à jour) ```html ``` ### **Étape 3 : Ajouter le lien dans index.html** Dans ta page `index.html` principale, ajouter la carte du jeu : ```html
🎮

Memory Pictogrammes GHS

Jeu interactif pour mémoriser les 9 symboles de danger. Avec scoring, classement et animations avancées.

Gamifié Interactif Pictogrammes
Jouer Maintenant 🎮
``` ### **Étape 4 : Tester** ```bash # Option 1 : Fichier local # Double-clic sur formations/memory-pictogrammes/memory-pictogrammes.html # Option 2 : Serveur local python -m http.server 8000 # Ouvrir http://localhost:8000/formations/memory-pictogrammes/memory-pictogrammes.html # Option 3 : Production # Ouvrir http://votre-domaine.com/formations/memory-pictogrammes/memory-pictogrammes.html ``` --- ## ✅ Checklist d'Intégration - [ ] Créer dossier `formations/memory-pictogrammes/` - [ ] Copier tous les fichiers aux bons emplacements - [ ] Copier la documentation dans `docs/` - [ ] Vérifier les chemins (CSS/JS/images affichés) - [ ] Tester lien "NextGN Formation" (retour à index.html) - [ ] Ajouter la carte dans index.html - [ ] Tester le jeu (flip, matching, scores) - [ ] Vérifier responsive (mobile) - [ ] Vérifier localStorage (scores persistent) --- ## 🎯 Avantages de l'Option 1 ✅ **Scalable** : Prête pour futurs exercices/jeux dans `formations/` ✅ **Organisée** : Assets, code, docs séparés ✅ **Maintenable** : Hiérarchie claire ✅ **Flexible** : Facile à dupliquer ou modifier ✅ **Professionnelle** : Structure robuste --- ## 📁 Structure Évolutive L'architecture peut accueillir d'autres formations : ``` formations/ ├── memory-pictogrammes/ │ ├── memory-pictogrammes.html │ ├── assets/ │ └── docs/ ├── memory-ingredients/ ← Futur jeu │ ├── memory-ingredients.html │ ├── assets/ │ └── docs/ ├── quiz-securite/ ← Future formation │ ├── quiz-securite.html │ ├── assets/ │ └── docs/ └── ... (autres formations) ``` --- ## 🔒 Permissions (si serveur Linux) ```bash # Définir les bonnes permissions chmod -R 755 formations/ chmod -R 644 formations/memory-pictogrammes/assets/* chmod 644 formations/memory-pictogrammes/memory-pictogrammes.html ``` --- ## 🐛 Dépannage ### Pictogrammes invisibles - Vérifier le chemin : `assets/pictogrammes/` - Vérifier les permissions : `chmod 644 formations/memory-pictogrammes/assets/pictogrammes/*` ### CSS/JS ne se chargent pas - Ouvrir console (F12) et vérifier erreurs 404 - Vérifier chemins relatifs depuis `formations/memory-pictogrammes/` ### Lien retour ne fonctionne pas - Vérifier que le chemin est `../../index.html` - Tester depuis racine du site ### Scores non sauvegardés - Vérifier que localStorage est activé - Tester en mode incognito - Vérifier console pour erreurs --- ## 📝 Notes Importantes 1. **Chemins relatifs** : Tous les chemins dans `memory-pictogrammes.html` sont relatifs à `formations/memory-pictogrammes/` 2. **Lien de retour** : `../../index.html` remonte 2 niveaux (formations/ puis racine) 3. **Assets partagés** : Les CSS/JS ne référencent que des assets locaux 4. **Scalabilité** : La structure `formations/` permet d'ajouter d'autres exercices --- ## ✨ Points à Retenir | Aspect | Configuration | |--------|---------------| | **Page du jeu** | `formations/memory-pictogrammes/memory-pictogrammes.html` | | **Assets CSS** | `formations/memory-pictogrammes/assets/css/` | | **Assets JS** | `formations/memory-pictogrammes/assets/js/` | | **Images** | `formations/memory-pictogrammes/assets/pictogrammes/` | | **Documentation** | `formations/memory-pictogrammes/docs/` | | **Lien depuis index.html** | `href="formations/memory-pictogrammes/memory-pictogrammes.html"` | | **Lien de retour** | `href="../../index.html"` | --- **Prêt pour intégration! 🚀** Pour plus de détails sur le jeu, voir : `formations/memory-pictogrammes/docs/README.md`