Site_web/formations/memory-pictogrammes/docs/INTEGRATION_GUIDE.md

🔗 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

# 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)

<link rel="stylesheet" href="assets/css/memory-game.css">
<script src="assets/js/memory-game.js"></script>
<!-- ✅ Fonctionne depuis formations/memory-pictogrammes/ -->

Lien de retour : Chemin ../../index.html (déjà mis à jour)

<a href="../../index.html" class="header-logo">NextGN Formation</a>
<!-- ✅ Retour à la racine du site -->

Étape 3 : Ajouter le lien dans index.html

Dans ta page index.html principale, ajouter la carte du jeu :

<!-- Section Formations/Exercices interactifs -->
<section id="formations">
    <!-- Autres formations/exercices existants -->
    
    <!-- 🎮 NOUVELLE CARTE : Memory Pictogrammes -->
    <div class="formation-card">
        <div class="card-icon">🎮</div>
        <h3>Memory Pictogrammes GHS</h3>
        <p>
            Jeu interactif pour mémoriser les 9 symboles de danger.
            Avec scoring, classement et animations avancées.
        </p>
        <div class="card-tags">
            <span class="tag">Gamifié</span>
            <span class="tag">Interactif</span>
            <span class="tag">Pictogrammes</span>
        </div>
        <a href="formations/memory-pictogrammes/memory-pictogrammes.html" 
           class="btn btn-primary">
            Jouer Maintenant 🎮
        </a>
    </div>
</section>

Étape 4 : Tester

# 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)

# 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