269 lines
8.2 KiB
Markdown
269 lines
8.2 KiB
Markdown
# 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
|
|
```javascript
|
|
// 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
|
|
```javascript
|
|
// 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
|
|
```json
|
|
{
|
|
"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)
|
|
- [x] 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) |