Class_generator/CLAUDE_local.md

Architecture Cours d'Anglais Modulaire

Système de leçons interactives HTML pour enfants de 8-9 ans

🎯 Objectif

Créer une plateforme modulaire permettant de générer facilement des cours d'anglais interactifs avec différents types de jeux et contenus pédagogiques.

🏗️ Architecture en 3 Niveaux

Niveau 1 : Page d'Accueil (index.html)

• Titre : "Cours d'Anglais Interactif"
• Options :
  • 🎮 "Créer une leçon personnalisée" → Niveau 2
  • 📊 "Statistiques" (futur)
  • ⚙️ "Paramètres" (futur)

Niveau 2 : Sélection Type de Jeu (game-selector.html)

Interface avec cards cliquables pour chaque type de jeu :

• 🔨 Whack-a-Mole (Tape-taupe vocabulaire)
• 🧠 Memory Game (Jeu de mémoire)
• ❓ Quiz Game (Questions/Réponses)
• 🎯 Target Game (Viser les bonnes réponses)
• 📝 Temp Games (Module temporaire pour nouveaux jeux)

Niveau 3 : Sélection Contenu/Niveau (level-selector.html)

Interface dynamique qui s'adapte au jeu choisi :

• 📚 SBS Level 8 (votre contenu actuel)
• 🐱 Animals Vocabulary
• 🌈 Colors & Numbers
• 👨‍👩‍👧‍👦 Family Members
• 🍎 Food & Drinks
• 🏠 House & Furniture

Niveau 4 : Jeu (game.html)

Page générique qui charge dynamiquement :

• Le moteur de jeu sélectionné
• Le contenu pédagogique choisi
• Interface de retour/navigation

📁 Structure des Fichiers

cours-anglais/
├── index.html                    # Accueil
├── game-selector.html            # Sélection type de jeu
├── level-selector.html           # Sélection niveau/contenu
├── game.html                     # Page de jeu générique
│
├── css/
│   ├── main.css                  # Styles généraux
│   ├── navigation.css            # Styles navigation
│   └── games.css                 # Styles jeux
│
├── js/
│   ├── core/
│   │   ├── navigation.js         # Gestion navigation 3 niveaux
│   │   ├── game-loader.js        # Chargement dynamique des jeux
│   │   └── utils.js              # Fonctions utilitaires
│   │
│   ├── games/
│   │   ├── whack-a-mole.js       # Module Whack-a-Mole
│   │   ├── memory-game.js        # Module Memory Game
│   │   ├── quiz-game.js          # Module Quiz
│   │   ├── target-game.js        # Module Target Game
│   │   └── temp-games.js         # Module temporaire
│   │
│   └── content/
│       ├── sbs-level-8.js        # Contenu SBS Level 8
│       ├── animals.js            # Vocabulaire animaux
│       ├── colors.js             # Couleurs et nombres
│       ├── family.js             # Famille
│       ├── food.js               # Nourriture
│       └── house.js              # Maison
│
├── assets/
│   ├── images/
│   ├── sounds/
│   └── icons/
│
└── config/
    └── games-config.json         # Configuration des jeux disponibles

🔧 Système de Modules

Format des Modules de Jeu

// Exemple: whack-a-mole.js
class WhackAMoleGame {
    constructor(content, container) {
        this.content = content;
        this.container = container;
        this.score = 0;
        this.init();
    }
    
    init() { /* Initialisation */ }
    start() { /* Démarrage */ }
    stop() { /* Arrêt */ }
    destroy() { /* Nettoyage */ }
}

// Export pour utilisation
window.GameModules = window.GameModules || {};
window.GameModules.WhackAMole = WhackAMoleGame;

Format des Modules de Contenu

// Exemple: sbs-level-8.js
window.ContentModules = window.ContentModules || {};
window.ContentModules.SBSLevel8 = {
    name: "SBS Level 8",
    description: "Vocabulaire du manuel SBS Level 8",
    vocabulary: [
        { english: "cat", french: "chat", image: "cat.jpg" },
        { english: "dog", french: "chien", image: "dog.jpg" },
        // ...
    ],
    grammar: [
        // Règles de grammaire si nécessaire
    ],
    difficulty: "intermediate"
};

🎮 Spécifications des Jeux

Whack-a-Mole (Priorité 1)

• Principe : Taupes apparaissent avec mots anglais, élève doit taper les bonnes réponses
• Variantes :
  • Mot anglais affiché, taper la traduction française
  • Image affichée, taper le mot anglais
  • Son joué, taper le mot correspondant
• Paramètres : Vitesse, nombre de taupes, durée

Memory Game (Priorité 2)

• Principe : Retourner des cartes pour faire des paires mot/traduction ou mot/image
• Variantes : Tailles de grille (4x4, 6x6, 8x8)

Quiz Game (Priorité 3)

• Principe : Questions à choix multiples ou réponses libres
• Types : QCM, Vrai/Faux, Compléter la phrase

Target Game (Futur)

• Principe : Viser avec la souris les bonnes réponses qui bougent
• Variantes : Ballons, bulles, cibles

🛠️ Fonctionnalités Transversales

Navigation

• Boutons "Retour" sur chaque niveau
• Breadcrumb navigation
• URLs avec paramètres pour partage/bookmark
• Raccourcis clavier (ESC = retour)

Système de Scoring

• Points par bonne réponse
• Malus par erreur
• Bonus vitesse
• Historique des scores
• Badges/achievements

Accessibilité

• Support clavier complet
• Textes alternatifs pour images
• Contrastes élevés
• Tailles de police ajustables

Responsive Design

• Adaptation tablette/mobile
• Interface tactile
• Orientation portrait/paysage

📊 Configuration et Personnalisation

Fichier de Configuration Globale

{
    "games": {
        "whack-a-mole": {
            "enabled": true,
            "name": "Whack-a-Mole",
            "icon": "🔨",
            "description": "Tape sur les bonnes réponses !"
        },
        "memory-game": {
            "enabled": true,
            "name": "Memory Game",
            "icon": "🧠",
            "description": "Trouve les paires !"
        }
    },
    "content": {
        "sbs-level-8": {
            "enabled": true,
            "name": "SBS Level 8",
            "icon": "📚",
            "description": "Vocabulaire manuel SBS"
        }
    },
    "settings": {
        "defaultDifficulty": "easy",
        "soundEnabled": true,
        "animationsEnabled": true
    }
}

🚀 Plan de Développement

Phase 1 (Urgent - Demain)

• Architecture de base
• Navigation 3 niveaux
• Module Whack-a-Mole
• Contenu SBS Level 8
• Module temporaire avec 2-3 mini-jeux

Phase 2 (Semaine suivante)

• Module Memory Game
• Contenu Animals
• Système de scoring
• Améliorations UI/UX

Phase 3 (Semaines suivantes)

• Module Quiz Game
• Contenus Colors, Family, Food
• Système de statistiques
• Export/Import de contenus

Phase 4 (Long terme)

• Module Target Game
• Éditeur de contenu intégré
• Système multi-utilisateurs
• Progression pédagogique

💡 Notes d'Implémentation

URL Routing

• index.html → Accueil
• index.html?page=games → Sélection jeux
• index.html?page=levels&game=whack-a-mole → Sélection niveau
• index.html?page=play&game=whack-a-mole&content=sbs-level-8 → Jeu

Stockage Local

• Scores et progression : localStorage
• Préférences utilisateur : localStorage
• Cache des contenus : sessionStorage

Performance

• Lazy loading des modules
• Préchargement des assets critiques
• Compression des images
• Minification JS/CSS en production

🎨 Direction Artistique

Palette de Couleurs

• Primaire : Bleu (#3B82F6) - Confiance, apprentissage
• Secondaire : Vert (#10B981) - Succès, validation
• Accent : Orange (#F59E0B) - Énergie, attention
• Erreur : Rouge (#EF4444) - Erreurs claires
• Neutre : Gris (#6B7280) - Textes, backgrounds

Style Visuel

• Design moderne et épuré
• Animations fluides et non-agressives
• Icons emoji + Font Awesome
• Typography lisible (16px minimum)
• Boutons larges et tactiles (44px minimum)