StillHammer/Class_generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement comprehensive AI text report/export system

Browse Source 
- Add AIReportSystem.js for detailed AI response capture and report generation
- Add AIReportInterface.js UI component for report access and export
- Integrate AI reporting into LLMValidator and SmartPreviewOrchestrator
- Add missing modules to Application.js configuration (unifiedDRS, smartPreviewOrchestrator)
- Create missing content/chapters/sbs.json for book metadata
- Enhance Application.js with debug logging for module loading
- Add multi-format export capabilities (text, HTML, JSON)
- Implement automatic learning insights extraction from AI feedback
- Add session management and performance tracking for AI reports

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
StillHammer 2025-09-26 21:24:13 +08:00
parent 38920cc858
commit 05142bdfbc
94 changed files with 56587 additions and 12651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
.envTMP Normal file
View File

@ -0,0 +1,48 @@
# ========================================
# FICHIER: .env - CONFIGURATION COMPLÈTE PRÊTE À UTILISER
# ========================================
# GOOGLE SHEETS - Configuration complète fournie
GOOGLE_SERVICE_ACCOUNT_EMAIL=seo-generator@seo-generator-470715.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC/pvp9roHCUqgv\nOaabM3LLY1XLeqajhN6s0XXXDPOgvuPPuMlg4v7nEuFQOrft39bXS5D73MtihmxE\ngrQQJpzsv1dyuhB6fPmbmNgOsctoQuCFMGb/Mc6Pt3MZD7hHeifyoPhBlu9a6Fpp\n2NB4Bi9i/fN82UegOz03wYUpqXJEuMYexUP6iOj9KrUlJ8hgd+SUABMFrc5WKHYa\neRCeI/XuK9W3u0W1UXu/DSJRkay4hzuseyYgLldUUCISNlpw9XVsvEg0CSJ5N62D\nykKwiYmW78+UaQQPupiOtRHZWzt4Nr8DpACgVFqkohY2BRmqcyDqq3jEvZdOFweZ\nqWt9ZNSFAgMBAAECggEAKtvsqK6d1hcmBWmfGJYo1dMhHKARJABSy9MLx0veL9SA\nnbN1VXVuC77tJEP9XfTw1rTPd4Oo+B+XlrqkCfiYn1kq9T0m8j2AlItZxe98zZQn\nIaHxZqB80Sb1VmVtkI6A4IGfAwv9+xZ7IbCa7jxz3G9uRD1TB0I4Ln/Yh7idFUDZ\nsHXO30VDaB3QNEQnOTFTQCJ+e/JxQCMALXiLllaW/9aXD19LbgcjQaFAlR2/kKZo\nxBArFZ8ozmV2RINLEAKVXLqf5hHklLAIF77vox4yjhP+VKJ8JKI8cIItmLLLkZsZ\n2liNxFjqemeu4GT8Mgjy5JemkDRsI4s8BQtFLk9IAQKBgQDvOFX8Z8Xp+3+UmOpC\nmG1P62xV66v4i2tdYd1mqEWwlunPvHsufSiyFWRINi3a2FYt0mElVtfB5K6qOF91\nXXEAia80YQHjvqznZJChgJkuz1jlYU+9pSbeLLGKTVHX2JAeF9B8LEZEjf9zYRcd\nbRs/Wr0LXPPUP5bEmZ7RUo34eQKBgQDNGHg8BqwIRmXzhA81VrRI5R+AM/t0xMuf\nsyVJj4rBCVOChgn2kURu9ZkppXrvP6sFSOXBhhXF0/4sN9sYKaMa6FyB7Pz/c8EM\nagB80csV0GsZj0/CYRpqryxdtxGy6v4vFE7ncSS+je8M5Du9PCKx0JXrCEuAroMQ\naP8+nIIRbQKBgHcMu0YUwtryDYj/HL4tq2D1kYGk+n2DrNfZR1y6a4w5XnzCmS8G\nnIUbvj9trx5VQXYmV7BEarWUwBP4YBFBgmY5HxdbG5yinNu/IXcuT42LJPtqlUuU\n8CXraiOg3RUlMnu3cEsLoaCmZjWeYOmFDeVWm/QWu0Wqq7aFmRMlGYBJAoGANml2\nhJ5Uh8F9jNSNYF5HaEt5Rv8DiGApkY3qp5BwhHQf9rHu9L5nhHSeFOF1MwIWMkm7\nwtL69cgfV8Xd15Q8VIgu+r1QBcnE/rEkvfi+w2PO9jICPBSc+I7O23IVPP2BQCZI\nJLjswa1QLYBjpPnOTpSDIZ7KwTILTZA9n3PQQiUCgYEAzhW/vR4M8mqWZ+f1Kiwo\ngBrzQmtRzDAr4FpZ2NGK8o2KYox1DOvLHV/BExfALN025hoUcMifW4wK4ionPqwy\n3lxRvLMRZ4ObkVzWpI2q9L2rvNfINo60QcnX8tJC7oElzYPZeHp0naEzJSbPfQsM\nxmmc5R1PzIynW+Q2cfapzXY=\n-----END PRIVATE KEY-----\n"
GOOGLE_SHEETS_ID=1iA2GvWeUxX-vpnAMfVm3ZMG9LhaC070SdGssEcXAh2c
# LLM APIs - EXTRAITES DE LLMManager.js
# ⚠️ SÉCURITÉ: Ces clés étaient hardcodées dans votre code !
OPENAI_API_KEY=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
ANTHROPIC_API_KEY=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
CLAUDE_API_KEY=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
GEMINI_API_KEY=AIzaSyAMzmIGbW5nJlBG5Qyr35sdjb3U2bIBtoE
GOOGLE_API_KEY=AIzaSyAMzmIGbW5nJlBG5Qyr35sdjb3U2bIBtoE
DEEPSEEK_API_KEY=sk-6e02bc9513884bb8b92b9920524e17b5
MOONSHOT_API_KEY=sk-zU9gyNkux2zcsj61cdKfztuP1Jozr6lFJ9viUJRPD8p8owhL
MISTRAL_API_KEY=wESikMCIuixajSH8WHCiOV2z5sevgmVF
# CONFIGURATION LOGGING
LOG_LEVEL=INFO
NODE_ENV=development
ENABLE_FILE_LOG=true
ENABLE_CONSOLE_LOG=true
ENABLE_SHEETS_LOGGING=false
# DIGITALOCEAN SPACES - EXTRAITES DE DigitalOceanWorkflow.js
# ⚠️ Ces credentials étaient hardcodées dans votre code !
DO_ENDPOINT=https://autocollant.fra1.digitaloceanspaces.com
DO_BUCKET_NAME=autocollant
DO_ACCESS_KEY_ID=DO801XTYPE968NZGAQM3
DO_SECRET_ACCESS_KEY=5aCCBiS9K+J8gsAe3M3/0GlliHCNjtLntwla1itCN1s
DO_REGION=fra1
DO_SPACES_BUCKET=autocollant
# EMAIL (optionnel - pour ErrorReporting.js)
EMAIL_USER=your-email@gmail.com
EMAIL_APP_PASSWORD=your_app_password
# Configuration supplémentaire pour les tests
MAX_COST_PER_ARTICLE=1.00
TRACE_PATH=logs/trace.log

297
CLAUDE.md
View File

@ -8,14 +8,23 @@
Building a **bulletproof modular system** with strict separation of concerns using vanilla JavaScript, HTML, and CSS. The architecture enforces inviolable responsibility patterns with sealed modules and dependency injection.
### 🏗️ Architecture Status
**PHASE 1 COMPLETED ✅** - Core foundation built with rigorous architectural patterns:
- **Module.js** - Abstract base class with WeakMap privates and sealed instances
- **EventBus.js** - Strict event system with validation and module registration
- **ModuleLoader.js** - Dependency injection with proper initialization order
- **Router.js** - Navigation with guards, middleware, and state management
- **Application.js** - Auto-bootstrap system with lifecycle management
- **Development Server** - HTTP server with ES6 modules and CORS support
**PHASE 1 COMPLETED ✅** - Core foundation built with rigorous architectural patterns:
- ✅ **Module.js** - Abstract base class with WeakMap privates and sealed instances
- ✅ **EventBus.js** - Strict event system with validation and module registration
- ✅ **ModuleLoader.js** - Dependency injection with proper initialization order
- ✅ **Router.js** - Navigation with guards, middleware, and state management
- ✅ **Application.js** - Auto-bootstrap system with lifecycle management
- ✅ **Development Server** - HTTP server with ES6 modules and CORS support
**DRS SYSTEM COMPLETED ✅** - Advanced learning modules with AI integration:
- ✅ **TextModule** - Reading comprehension exercises with AI text analysis
- ✅ **AudioModule** - Listening exercises with AI audio comprehension
- ✅ **ImageModule** - Visual comprehension with AI vision analysis
- ✅ **GrammarModule** - Grammar exercises with AI linguistic analysis
- ✅ **AI Integration** - OpenAI → DeepSeek → Disable fallback system
- ✅ **Persistent Storage** - Progress tracking with timestamps and metadata
- ✅ **Data Merge System** - Local/external data synchronization
## 🔥 Critical Requirements
@ -34,6 +43,13 @@ Building a **bulletproof modular system** with strict separation of concerns usi
- **Modular CSS** - Component-scoped styling
- **Event-Driven** - No direct module coupling
### UI/UX Design Principles (CRITICAL)
- **NO SCROLL POLICY** - All interfaces MUST fit within viewport height without scrolling
- **Height Management** - Vertical space is precious, horizontal space is abundant
- **Compact Navigation** - Top bars and headers must be minimal height
- **Responsive Layout** - Use available width, preserve viewport height
- **Mobile-First** - Design for smallest screens first, then scale up
## 🚀 Development Workflow
### Starting the System
@ -173,10 +189,10 @@ window.app.getCore().router.navigate('/games')
## 🚧 Next Development Phase
### Immediate Tasks (PHASE 2)
1. **Component-based UI System** - Reusable UI components with scoped CSS
2. **Example Game Module** - Simple memory game to validate architecture
3. **Content System Integration** - Port content loading from Legacy
4. **Testing Framework** - Validate module contracts and event flow
1. ❌ **Component-based UI System** - Reusable UI components with scoped CSS
2. ❌ **Example Game Module** - Simple memory game to validate architecture
3. ❌ **Content System Integration** - Port content loading from Legacy
4. ❌ **Testing Framework** - Validate module contracts and event flow
### Known Legacy Issues to Fix
31 bug fixes and improvements from the old system:
@ -212,6 +228,8 @@ The system provides explicit error messages for violations:
- ✅ Call `_setInitialized()` after successful init
- ✅ Use private methods with underscore prefix
- ✅ Seal objects to prevent modification
- ✅ **Start with simple solutions first** - Test basic functionality before adding complexity
- ✅ **Test code in console first** - Validate logic with quick console tests before file changes
### DON'Ts
- ❌ Never access another module's internals directly
@ -219,6 +237,23 @@ The system provides explicit error messages for violations:
- ❌ Never modify Module base class or core system
- ❌ Never skip dependency validation
- ❌ Never use file:// protocol (always use HTTP server)
- ❌ **NEVER HARDCODE JSON PATHS** - Always use dynamic paths based on selected book/chapter
- ❌ **Never overcomplicate positioning logic** - Use simple CSS transforms (translate(-50%, -50%)) for centering before complex calculations
## 🧠 Problem-Solving Best Practices
### UI Positioning Issues
1. **Start Simple**: Use basic CSS positioning (center with transform) first
2. **Test in Console**: Validate positioning logic with `console.log` and direct DOM manipulation
3. **Check Scope**: Ensure variables like `contentLoader` are globally accessible when needed
4. **Cache-bust**: Add `?v=2` to CSS/JS files when browser cache causes issues
5. **Verify Real Dimensions**: Use `getBoundingClientRect()` only when basic centering fails
### Debugging Workflow
1. **Console First**: Test functions directly in browser console before modifying files
2. **Log Everything**: Add extensive logging to understand execution flow
3. **One Change at a Time**: Make incremental changes and test each step
4. **Simple Solutions Win**: Prefer `left: 50%; transform: translateX(-50%)` over complex calculations
## 🎯 Success Metrics
@ -259,4 +294,244 @@ The `Legacy/` folder contains the complete old system. Key architectural changes
---
## 📋 COMPREHENSIVE TEST CHECKLIST
### 🏗️ Architecture Tests
#### Core System Tests
- [ ] **Module.js Tests**
- [ ] Abstract class cannot be instantiated directly
- [ ] WeakMap private data is truly private
- [ ] Object.seal() prevents modification
- [ ] Lifecycle methods work correctly (init, destroy)
- [ ] Validation methods throw appropriate errors
- [ ] **EventBus.js Tests**
- [ ] Event registration and deregistration
- [ ] Module validation before event usage
- [ ] Event history tracking
- [ ] Cross-module communication isolation
- [ ] Memory leak prevention on module destroy
- [ ] **ModuleLoader.js Tests**
- [ ] Dependency injection order
- [ ] Circular dependency detection
- [ ] Module initialization sequence
- [ ] Error handling for missing dependencies
- [ ] Module unloading and cleanup
- [ ] **Router.js Tests**
- [ ] Navigation guards functionality
- [ ] Middleware execution order
- [ ] State management
- [ ] URL parameter handling
- [ ] History management
- [ ] **Application.js Tests**
- [ ] Auto-bootstrap system
- [ ] Lifecycle management
- [ ] Module registration
- [ ] Error recovery
- [ ] Debug panel functionality
### 🎮 DRS System Tests
#### Module Interface Tests
- [ ] **ExerciseModuleInterface Tests**
- [ ] All required methods implemented
- [ ] Method signatures correct
- [ ] Error throwing for abstract methods
#### Individual Module Tests
- [ ] **TextModule Tests**
- [ ] Text loading and display
- [ ] Question generation/extraction
- [ ] AI validation with fallback
- [ ] Progress tracking
- [ ] UI interaction (buttons, inputs)
- [ ] Viewing time tracking
- [ ] Results calculation
- [ ] **AudioModule Tests**
- [ ] Audio playback controls
- [ ] Playback counting
- [ ] Transcript reveal timing
- [ ] AI audio analysis
- [ ] Progress tracking
- [ ] Penalty system for excessive playbacks
- [ ] **ImageModule Tests**
- [ ] Image loading and display
- [ ] Zoom functionality
- [ ] Observation time tracking
- [ ] AI vision analysis
- [ ] Question types (description, details, interpretation)
- [ ] Progress tracking
- [ ] **GrammarModule Tests**
- [ ] Rule explanation display
- [ ] Exercise type variety (fill-blank, correction, etc.)
- [ ] Hint system
- [ ] Attempt tracking
- [ ] AI grammar analysis
- [ ] Scoring with penalties/bonuses
### 🤖 AI Integration Tests
#### AI Provider Tests
- [ ] **OpenAI Integration**
- [ ] API connectivity test
- [ ] Response format validation
- [ ] Error handling
- [ ] Timeout management
- [ ] **DeepSeek Integration**
- [ ] API connectivity test
- [ ] Fallback from OpenAI
- [ ] Response format validation
- [ ] Error handling
- [ ] **AI Fallback System**
- [ ] Provider switching logic
- [ ] Graceful degradation to basic validation
- [ ] Status tracking and reporting
- [ ] Recovery mechanisms
#### Response Parsing Tests
- [ ] **Structured Response Parsing**
- [ ] [answer]yes/no extraction
- [ ] [explanation] extraction
- [ ] Error handling for malformed responses
- [ ] Multiple format support
### 💾 Data Persistence Tests
#### Progress Tracking Tests
- [ ] **Mastery Tracking**
- [ ] Timestamp recording
- [ ] Metadata storage
- [ ] Progress calculation
- [ ] Persistent storage integration
- [ ] **Data Merge System**
- [ ] Local vs external data merging
- [ ] Conflict resolution strategies
- [ ] Import/export functionality
- [ ] Data integrity validation
### 🎨 UI/UX Tests
#### Design Principles Tests
- [ ] **No Scroll Policy**
- [ ] All interfaces fit viewport height
- [ ] Responsive breakpoint testing
- [ ] Mobile viewport compliance
- [ ] **Responsive Design**
- [ ] Mobile-first approach validation
- [ ] Horizontal space utilization
- [ ] Vertical space conservation
#### Component Tests
- [ ] **Button Interactions**
- [ ] Hover effects
- [ ] Disabled states
- [ ] Click handlers
- [ ] Loading states
- [ ] **Form Controls**
- [ ] Input validation
- [ ] Error display
- [ ] Accessibility compliance
- [ ] Keyboard navigation
### 🌐 Network & Server Tests
#### Development Server Tests
- [ ] **ES6 Modules Support**
- [ ] Import/export functionality
- [ ] MIME type handling
- [ ] CORS configuration
- [ ] **Caching Strategy**
- [ ] Assets cached correctly
- [ ] HTML not cached for development
- [ ] Cache invalidation
- [ ] **Error Handling**
- [ ] 404 page display
- [ ] Graceful error recovery
- [ ] Error message clarity
### 🔄 Integration Tests
#### End-to-End Scenarios
- [ ] **Complete Exercise Flow**
- [ ] Module loading
- [ ] Exercise presentation
- [ ] User interaction
- [ ] AI validation
- [ ] Progress saving
- [ ] Results display
- [ ] **Multi-Module Navigation**
- [ ] Module switching
- [ ] State preservation
- [ ] Memory cleanup
- [ ] **Data Persistence Flow**
- [ ] Progress tracking across sessions
- [ ] Data export/import
- [ ] Sync functionality
### ⚡ Performance Tests
#### Loading Performance
- [ ] **Module Loading Times**
- [ ] <100ms module loading
- [ ] <50ms event propagation
- [ ] <200ms application startup
#### Memory Management
- [ ] **Memory Leaks**
- [ ] Module cleanup verification
- [ ] Event listener removal
- [ ] DOM element cleanup
### 🔒 Security Tests
#### Module Isolation Tests
- [ ] **Private State Protection**
- [ ] WeakMap data inaccessible
- [ ] Sealed object modification prevention
- [ ] Cross-module boundary enforcement
#### Input Validation Tests
- [ ] **Boundary Validation**
- [ ] All inputs validated
- [ ] Error messages for violations
- [ ] Malicious input handling
### 🎯 TESTING PRIORITY
#### **HIGH PRIORITY** (Core System)
1. Module.js lifecycle and sealing tests
2. EventBus communication isolation
3. ModuleLoader dependency injection
4. Basic DRS module functionality
#### **MEDIUM PRIORITY** (Integration)
1. AI provider fallback system
2. Data persistence and merging
3. UI/UX compliance tests
4. End-to-end exercise flows
#### **LOW PRIORITY** (Polish)
1. Performance benchmarks
2. Advanced security tests
3. Edge case scenarios
4. Browser compatibility
---
**This is a high-quality, maintainable system built for educational software that will scale.**

545
LLMManager.js Normal file
View File

@ -0,0 +1,545 @@
// ========================================
// FICHIER: LLMManager.js
// Description: Hub central pour tous les appels LLM (Version Node.js)
// Support: Claude, OpenAI, Gemini, Deepseek, Moonshot, Mistral
// ========================================
const fetch = globalThis.fetch.bind(globalThis);
const { logSh } = require('./ErrorReporting');
// Charger les variables d'environnement
require('dotenv').config();
// ============= CONFIGURATION CENTRALISÉE =============
const LLM_CONFIG = {
openai: {
apiKey: process.env.OPENAI_API_KEY,
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o-mini',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
temperature: 0.7,
timeout: 300000, // 5 minutes
retries: 3
},
claude: {
apiKey: process.env.ANTHROPIC_API_KEY,
endpoint: 'https://api.anthropic.com/v1/messages',
model: 'claude-sonnet-4-20250514',
headers: {
'x-api-key': '{API_KEY}',
'Content-Type': 'application/json',
'anthropic-version': '2023-06-01'
},
temperature: 0.7,
maxTokens: 6000,
timeout: 300000, // 5 minutes
retries: 6
},
deepseek: {
apiKey: process.env.DEEPSEEK_API_KEY,
endpoint: 'https://api.deepseek.com/v1/chat/completions',
model: 'deepseek-chat',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
temperature: 0.7,
timeout: 300000, // 5 minutes
retries: 3
},
moonshot: {
apiKey: process.env.MOONSHOT_API_KEY,
endpoint: 'https://api.moonshot.ai/v1/chat/completions',
model: 'moonshot-v1-32k',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
temperature: 0.7,
timeout: 300000, // 5 minutes
retries: 3
},
mistral: {
apiKey: process.env.MISTRAL_API_KEY,
endpoint: 'https://api.mistral.ai/v1/chat/completions',
model: 'mistral-small-latest',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
max_tokens: 5000,
temperature: 0.7,
timeout: 300000, // 5 minutes
retries: 3
}
};
// Alias pour compatibilité avec le code existant
LLM_CONFIG.gpt4 = LLM_CONFIG.openai;
// ============= HELPER FUNCTIONS =============
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// ============= INTERFACE UNIVERSELLE =============
/**
* Fonction principale pour appeler n'importe quel LLM
* @param {string} llmProvider - claude|openai|deepseek|moonshot|mistral
* @param {string} prompt - Le prompt à envoyer
* @param {object} options - Options personnalisées (température, tokens, etc.)
* @param {object} personality - Personnalité pour contexte système
* @returns {Promise<string>} - Réponse générée
*/
async function callLLM(llmProvider, prompt, options = {}, personality = null) {
const startTime = Date.now();
try {
// Vérifier si le provider existe
if (!LLM_CONFIG[llmProvider]) {
throw new Error(`Provider LLM inconnu: ${llmProvider}`);
}
// Vérifier si l'API key est configurée
const config = LLM_CONFIG[llmProvider];
if (!config.apiKey || config.apiKey.startsWith('VOTRE_CLE_')) {
throw new Error(`Clé API manquante pour ${llmProvider}`);
}
logSh(`🤖 Appel LLM: ${llmProvider.toUpperCase()} (${config.model}) | Personnalité: ${personality?.nom || 'aucune'}`, 'DEBUG');
// 📢 AFFICHAGE PROMPT COMPLET POUR DEBUG AVEC INFO IA
logSh(`\n🔍 ===== PROMPT ENVOYÉ À ${llmProvider.toUpperCase()} (${config.model}) | PERSONNALITÉ: ${personality?.nom || 'AUCUNE'} =====`, 'PROMPT');
logSh(prompt, 'PROMPT');
// 📤 LOG LLM REQUEST COMPLET
logSh(`📤 LLM REQUEST [${llmProvider.toUpperCase()}] (${config.model}) | Personnalité: ${personality?.nom || 'AUCUNE'}`, 'LLM');
logSh(prompt, 'LLM');
// Préparer la requête selon le provider
const requestData = buildRequestData(llmProvider, prompt, options, personality);
// Effectuer l'appel avec retry logic
const response = await callWithRetry(llmProvider, requestData, config);
// Parser la réponse selon le format du provider
const content = parseResponse(llmProvider, response);
// 📥 LOG LLM RESPONSE COMPLET
logSh(`📥 LLM RESPONSE [${llmProvider.toUpperCase()}] (${config.model}) | Durée: ${Date.now() - startTime}ms`, 'LLM');
logSh(content, 'LLM');
const duration = Date.now() - startTime;
logSh(`✅ ${llmProvider.toUpperCase()} (${personality?.nom || 'sans personnalité'}) réponse en ${duration}ms`, 'INFO');
// Enregistrer les stats d'usage
await recordUsageStats(llmProvider, prompt.length, content.length, duration);
return content;
} catch (error) {
const duration = Date.now() - startTime;
logSh(`❌ Erreur ${llmProvider.toUpperCase()} (${personality?.nom || 'sans personnalité'}): ${error.toString()}`, 'ERROR');
// Enregistrer l'échec
await recordUsageStats(llmProvider, prompt.length, 0, duration, error.toString());
throw error;
}
}
// ============= CONSTRUCTION DES REQUÊTES =============
function buildRequestData(provider, prompt, options, personality) {
const config = LLM_CONFIG[provider];
const temperature = options.temperature || config.temperature;
const maxTokens = options.maxTokens || config.maxTokens;
// Construire le système prompt si personnalité fournie
const systemPrompt = personality ?
`Tu es ${personality.nom}. ${personality.description}. Style: ${personality.style}` :
'Tu es un assistant expert.';
switch (provider) {
case 'openai':
case 'gpt4':
case 'deepseek':
case 'moonshot':
case 'mistral':
return {
model: config.model,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: prompt }
],
max_tokens: maxTokens,
temperature: temperature,
stream: false
};
case 'claude':
return {
model: config.model,
max_tokens: maxTokens,
temperature: temperature,
system: systemPrompt,
messages: [
{ role: 'user', content: prompt }
]
};
default:
throw new Error(`Format de requête non supporté pour ${provider}`);
}
}
// ============= APPELS AVEC RETRY =============
async function callWithRetry(provider, requestData, config) {
let lastError;
for (let attempt = 1; attempt <= config.retries; attempt++) {
try {
logSh(`🔄 Tentative ${attempt}/${config.retries} pour ${provider.toUpperCase()}`, 'DEBUG');
// Préparer les headers avec la clé API
const headers = {};
Object.keys(config.headers).forEach(key => {
headers[key] = config.headers[key].replace('{API_KEY}', config.apiKey);
});
// URL standard
let url = config.endpoint;
const options = {
method: 'POST',
headers: headers,
body: JSON.stringify(requestData),
timeout: config.timeout
};
const response = await fetch(url, options);
const responseText = await response.text();
if (response.ok) {
return JSON.parse(responseText);
} else if (response.status === 429) {
// Rate limiting - attendre plus longtemps
const waitTime = Math.pow(2, attempt) * 1000; // Exponential backoff
logSh(`⏳ Rate limit ${provider.toUpperCase()}, attente ${waitTime}ms`, 'WARNING');
await sleep(waitTime);
continue;
} else {
throw new Error(`HTTP ${response.status}: ${responseText}`);
}
} catch (error) {
lastError = error;
if (attempt < config.retries) {
const waitTime = 1000 * attempt;
logSh(`⚠ Erreur tentative ${attempt}: ${error.toString()}, retry dans ${waitTime}ms`, 'WARNING');
await sleep(waitTime);
}
}
}
throw new Error(`Échec après ${config.retries} tentatives: ${lastError.toString()}`);
}
// ============= PARSING DES RÉPONSES =============
function parseResponse(provider, responseData) {
try {
switch (provider) {
case 'openai':
case 'gpt4':
case 'deepseek':
case 'moonshot':
case 'mistral':
return responseData.choices[0].message.content.trim();
case 'claude':
return responseData.content[0].text.trim();
default:
throw new Error(`Parser non supporté pour ${provider}`);
}
} catch (error) {
logSh(`❌ Erreur parsing ${provider}: ${error.toString()}`, 'ERROR');
logSh(`Response brute: ${JSON.stringify(responseData)}`, 'DEBUG');
throw new Error(`Impossible de parser la réponse ${provider}: ${error.toString()}`);
}
}
// ============= GESTION DES STATISTIQUES =============
async function recordUsageStats(provider, promptTokens, responseTokens, duration, error = null) {
try {
// TODO: Adapter selon votre système de stockage Node.js
// Peut être une base de données, un fichier, MongoDB, etc.
const statsData = {
timestamp: new Date(),
provider: provider,
model: LLM_CONFIG[provider].model,
promptTokens: promptTokens,
responseTokens: responseTokens,
duration: duration,
error: error || ''
};
// Exemple: log vers console ou fichier
logSh(`📊 Stats: ${JSON.stringify(statsData)}`, 'DEBUG');
// TODO: Implémenter sauvegarde réelle (DB, fichier, etc.)
} catch (statsError) {
// Ne pas faire planter le workflow si les stats échouent
logSh(`⚠ Erreur enregistrement stats: ${statsError.toString()}`, 'WARNING');
}
}
// ============= FONCTIONS UTILITAIRES =============
/**
* Tester la connectivité de tous les LLMs
*/
async function testAllLLMs() {
const testPrompt = "Dis bonjour en 5 mots maximum.";
const results = {};
const allProviders = Object.keys(LLM_CONFIG);
for (const provider of allProviders) {
try {
logSh(`🧪 Test ${provider}...`, 'INFO');
const response = await callLLM(provider, testPrompt);
results[provider] = {
status: 'SUCCESS',
response: response,
model: LLM_CONFIG[provider].model
};
} catch (error) {
results[provider] = {
status: 'ERROR',
error: error.toString(),
model: LLM_CONFIG[provider].model
};
}
// Petit délai entre tests
await sleep(500);
}
logSh(`📊 Tests terminés: ${JSON.stringify(results, null, 2)}`, 'INFO');
return results;
}
/**
* Obtenir les providers disponibles (avec clés API valides)
*/
function getAvailableProviders() {
const available = [];
Object.keys(LLM_CONFIG).forEach(provider => {
const config = LLM_CONFIG[provider];
if (config.apiKey && !config.apiKey.startsWith('VOTRE_CLE_')) {
available.push(provider);
}
});
return available;
}
/**
* Obtenir des statistiques d'usage par provider
*/
async function getUsageStats() {
try {
// TODO: Adapter selon votre système de stockage
// Pour l'instant retourne un message par défaut
return { message: 'Statistiques non implémentées en Node.js' };
} catch (error) {
return { error: error.toString() };
}
}
// ============= MIGRATION DE L'ANCIEN CODE =============
/**
* Fonction de compatibilité pour remplacer votre ancien callOpenAI()
* Maintient la même signature pour ne pas casser votre code existant
*/
async function callOpenAI(prompt, personality) {
return await callLLM('openai', prompt, {}, personality);
}
// ============= EXPORTS POUR TESTS =============
/**
* Fonction de test rapide
*/
async function testLLMManager() {
logSh('🚀 Test du LLM Manager Node.js...', 'INFO');
// Test des providers disponibles
const available = getAvailableProviders();
logSh('Providers disponibles: ' + available.join(', ') + ' (' + available.length + '/5)', 'INFO');
// Test d'appel simple sur chaque provider disponible
for (const provider of available) {
try {
logSh(`🧪 Test ${provider}...`, 'DEBUG');
const startTime = Date.now();
const response = await callLLM(provider, 'Dis juste "Test OK"');
const duration = Date.now() - startTime;
logSh(`✅ Test ${provider} réussi: "${response}" (${duration}ms)`, 'INFO');
} catch (error) {
logSh(`❌ Test ${provider} échoué: ${error.toString()}`, 'ERROR');
}
// Petit délai pour éviter rate limits
await sleep(500);
}
// Test spécifique OpenAI (compatibilité avec ancien code)
try {
logSh('🎯 Test spécifique OpenAI (compatibilité)...', 'DEBUG');
const response = await callLLM('openai', 'Dis juste "Test OK"');
logSh('✅ Test OpenAI compatibilité: ' + response, 'INFO');
} catch (error) {
logSh('❌ Test OpenAI compatibilité échoué: ' + error.toString(), 'ERROR');
}
// Afficher les stats d'usage
try {
logSh('📊 Récupération statistiques d\'usage...', 'DEBUG');
const stats = await getUsageStats();
if (stats.error) {
logSh('⚠ Erreur récupération stats: ' + stats.error, 'WARNING');
} else if (stats.message) {
logSh('📊 Stats: ' + stats.message, 'INFO');
} else {
// Formatter les stats pour les logs
Object.keys(stats).forEach(provider => {
const s = stats[provider];
logSh(`📈 ${provider}: ${s.calls} appels, ${s.successRate}% succès, ${s.avgDuration}ms moyen`, 'INFO');
});
}
} catch (error) {
logSh('❌ Erreur lors de la récupération des stats: ' + error.toString(), 'ERROR');
}
// Résumé final
const workingCount = available.length;
const totalProviders = Object.keys(LLM_CONFIG).length;
if (workingCount === totalProviders) {
logSh(`✅ Test LLM Manager COMPLET: ${workingCount}/${totalProviders} providers opérationnels`, 'INFO');
} else if (workingCount >= 2) {
logSh(`✅ Test LLM Manager PARTIEL: ${workingCount}/${totalProviders} providers opérationnels (suffisant pour DNA Mixing)`, 'INFO');
} else {
logSh(`❌ Test LLM Manager INSUFFISANT: ${workingCount}/${totalProviders} providers opérationnels (minimum 2 requis)`, 'ERROR');
}
logSh('🏁 Test LLM Manager terminé', 'INFO');
}
/**
* Version complète avec test de tous les providers (même non configurés)
*/
async function testLLMManagerComplete() {
logSh('🚀 Test COMPLET du LLM Manager (tous providers)...', 'INFO');
const allProviders = Object.keys(LLM_CONFIG);
logSh(`Providers configurés: ${allProviders.join(', ')}`, 'INFO');
const results = {
configured: 0,
working: 0,
failed: 0
};
for (const provider of allProviders) {
const config = LLM_CONFIG[provider];
// Vérifier si configuré
if (!config.apiKey || config.apiKey.startsWith('VOTRE_CLE_')) {
logSh(`⚙️ ${provider}: NON CONFIGURÉ (clé API manquante)`, 'WARNING');
continue;
}
results.configured++;
try {
logSh(`🧪 Test ${provider} (${config.model})...`, 'DEBUG');
const startTime = Date.now();
const response = await callLLM(provider, 'Réponds "OK" seulement.', { maxTokens: 100 });
const duration = Date.now() - startTime;
results.working++;
logSh(`✅ ${provider}: "${response.trim()}" (${duration}ms)`, 'INFO');
} catch (error) {
results.failed++;
logSh(`❌ ${provider}: ${error.toString()}`, 'ERROR');
}
// Délai entre tests
await sleep(700);
}
// Résumé final complet
logSh(`📊 RÉSUMÉ FINAL:`, 'INFO');
logSh(` • Providers total: ${allProviders.length}`, 'INFO');
logSh(` • Configurés: ${results.configured}`, 'INFO');
logSh(` • Fonctionnels: ${results.working}`, 'INFO');
logSh(` • En échec: ${results.failed}`, 'INFO');
const status = results.working >= 4 ? 'EXCELLENT' :
results.working >= 2 ? 'BON' : 'INSUFFISANT';
logSh(`🏆 STATUS: ${status} (${results.working} LLMs opérationnels)`,
status === 'INSUFFISANT' ? 'ERROR' : 'INFO');
logSh('🏁 Test LLM Manager COMPLET terminé', 'INFO');
return {
total: allProviders.length,
configured: results.configured,
working: results.working,
failed: results.failed,
status: status
};
}
// ============= EXPORTS MODULE =============
module.exports = {
callLLM,
callOpenAI,
testAllLLMs,
getAvailableProviders,
getUsageStats,
testLLMManager,
testLLMManagerComplete,
LLM_CONFIG
};

521
SMART_PREVIEW_SPECS.md Normal file
View File

@ -0,0 +1,521 @@
# Smart Preview System - Technical Specifications
## 🎯 System Overview
**Smart Preview** is an intelligent course preparation system that provides systematic content review with LLM-powered validation. Students can preview and validate their understanding of entire chapter content through adaptive exercises with prerequisite-based progression.
## 🏗️ Dynamic Modular Architecture
### Orchestrator + Semi-Independent Modules
**Core Philosophy**: Dynamic class system with an orchestrator that pilots semi-independent exercise modules. Each module can be loaded, unloaded, and controlled dynamically.
#### **SmartPreviewOrchestrator.js** - Main Controller
- Extends Module base class
- Manages dynamic loading/unloading of exercise modules
- Handles exercise sequencing and variation patterns
- Coordinates shared services (LLM, Prerequisites)
- Tracks overall progress and session state
#### **Semi-Independent Exercise Modules**
1. **VocabularyModule.js** - Vocabulary exercises (groups of 5)
2. **VocabExamModule.js** - AI-verified comprehensive vocabulary exam system
3. **PhraseModule.js** - Individual phrase comprehension
4. **TextModule.js** - Sentence-by-sentence text processing
5. **AudioModule.js** - Audio comprehension exercises
6. **ImageModule.js** - Image description exercises
7. **GrammarModule.js** - Grammar construction and validation
#### **Shared Service Modules**
- **LLMValidator.js** - LLM integration for all exercise types
- **PrerequisiteEngine.js** - Dependency tracking and content filtering
- **ContextMemory.js** - Progressive context building across exercises
### Module Interface Standard
```javascript
// All exercise modules must implement this interface
class ExerciseModuleInterface {
// Check if module can run with current prerequisites
canRun(prerequisites, chapterContent): boolean;
// Present exercise UI and content
present(container, exerciseData): Promise<void>;
// Validate user input with LLM
validate(userInput, context): Promise<ValidationResult>;
// Get current progress data
getProgress(): ProgressData;
// Clean up and prepare for unloading
cleanup(): void;
}
```
### Dynamic Loading System
```javascript
// Orchestrator can dynamically control modules
orchestrator.loadModule('vocabulary');
orchestrator.switchTo('phrase', prerequisites);
orchestrator.unloadModule('text');
orchestrator.getAvailableModules(currentPrerequisites);
// Module lifecycle management
module.canRun(prereqs) → module.present() → module.validate() → module.cleanup()
```
### Module Dependencies
```javascript
// Orchestrator dependencies
dependencies: ['eventBus', 'contentLoader']
// Each exercise module receives shared services via injection
constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory)
```
## 📋 Functional Requirements
### 1. Systematic Review by Content Type
#### Vocabulary Review (Groups of 5)
- Display 5 vocabulary words with translations
- Test recognition/translation with LLM validation
- Must achieve mastery (80%+) before next group
- Track learned vocabulary for prerequisite system
#### Vocabulary Exam System (AI-Verified Comprehensive Assessment)
- **Batch Testing Approach**: Present 15-20 vocabulary questions in sequence, collect all answers, then send complete batch to AI for evaluation
- **Multiple Question Types**:
- Translation (L1→L2 and L2→L1)
- Definition matching and explanation
- Context usage (fill-in-the-blank with sentences)
- Synonym/antonym identification
- Audio recognition (if audio available)
- **AI-Powered Batch Evaluation**:
- Single API call evaluates entire batch for efficiency
- Cross-question consistency checking within batch
- Semantic understanding over exact word matching
- Context-aware validation for multiple correct answers
- Partial credit for near-correct responses
- Intelligent feedback for incorrect answers
- **Batch Processing Benefits**:
- Reduced API costs and latency
- Consistent evaluation across question set
- Better pattern recognition for student strengths/weaknesses
- **Adaptive Difficulty**: Next batch adapts based on previous batch performance
- **Mastery Certification**: Must achieve 85%+ overall score to pass
- **Spaced Repetition Integration**: Failed words automatically added to review queue
- **Progress Analytics**: Detailed breakdown by word, question type, and difficulty level
#### Phrase Comprehension (Individual)
- Present single phrases for translation/comprehension
- LLM evaluation for semantic accuracy (not exact matching)
- Context-aware validation considering multiple correct answers
#### Text Processing (Sentence by Sentence)
- Break texts into individual sentences
- Progressive context building (sentence 1 → sentence 1+2 → sentence 1+2+3)
- Each sentence validated with accumulated context
- Prerequisites: only texts containing learned vocabulary words
#### Audio Comprehension
- Play audio segments with transcription for LLM reference
- User provides comprehension in their own words
- LLM evaluates understanding against transcription
#### Image Description
- Present images for description exercises
- LLM evaluates vocabulary usage and accuracy of description
- No exact matching required - intelligent semantic evaluation
#### Grammar Exercises
- Present grammar-focused exercises (sentence construction, tense usage, etc.)
- LLM evaluates grammar correctness and natural language flow
- Context-aware grammar validation considering multiple correct structures
- Track grammar concept mastery (present tense, articles, sentence structure, etc.)
### 2. Prerequisite Dependency System
#### Smart Filtering
```javascript
// Only chapter vocabulary words are prerequisites
chapterVocab = ['shirt', 'coat', 'blue', 'work', 'wear'];
// Basic words assumed known
assumedKnown = ['the', 'is', 'a', 'to', 'in', 'on', 'at', ...];
// Dependency extraction
function getPrerequisites(content, chapterVocabulary) {
const words = extractWords(content);
return words.filter(word =>
chapterVocabulary.includes(word) ||
chapterVocabulary.includes(getBaseForm(word))
);
}
```
#### Progressive Unlocking
- Vocabulary groups unlock based on completion of previous groups
- Phrases unlock when ALL required chapter words are learned
- Text sentences unlock progressively with vocabulary mastery
- Real-time content availability updates
### 3. Exercise Variation Engine
#### Dynamic Pattern Generation
```javascript
const exercisePattern = [
'vocabulary-5', // First 5 vocab words
'single-phrase', // Available phrase with learned words
'vocabulary-5', // Next 5 vocab words
'text-sentence-1', // First sentence of available text
'vocabulary-5', // Continue vocabulary
'vocab-exam-checkpoint', // Comprehensive exam after 15-20 learned words
'text-sentence-2-ctx', // Second sentence with context from first
'image-description', // Image exercise
'audio-comprehension', // Audio exercise
'vocab-exam-final', // Final comprehensive exam at chapter end
// Pattern continues...
];
// Vocabulary Exam Trigger Logic
const examTriggers = {
checkpoint: {
condition: 'wordsLearned >= 15 && wordsLearned % 15 === 0',
examType: 'checkpoint',
wordsToTest: 'last15Learned',
passingScore: 80
},
final: {
condition: 'chapterComplete',
examType: 'comprehensive',
wordsToTest: 'allChapterWords',
passingScore: 85
},
remedial: {
condition: 'examFailed',
examType: 'focused',
wordsToTest: 'failedWords',
passingScore: 75
}
};
```
#### Context Memory System
- Store user responses for progressive exercises
- Build context for text comprehension exercises
- Pass accumulated context to LLM for evaluation
- Reset context appropriately between different texts/topics
### 4. LLM Integration
#### Evaluation Prompts
```javascript
// Translation Validation
const translationPrompt = `
Evaluate this language learning translation:
- Original (English): "${originalText}"
- Student translation (Chinese/French): "${userAnswer}"
- Context: ${exerciseType} exercise
- Previous context: ${contextHistory}
Evaluate if the translation captures the essential meaning, even if not word-for-word exact.
Return JSON: {
score: 0-100,
correct: boolean,
feedback: "constructive feedback in user's language",
keyPoints: ["important vocabulary/grammar noted"]
}
`;
// Vocabulary Exam Batch Validation
const vocabExamBatchPrompt = `
Evaluate this vocabulary exam batch (15-20 questions):
- Language level: ${languageLevel}
- Total questions in batch: ${batchSize}
Questions and responses:
${questionsArray.map((q, i) => `
${i+1}. Question type: ${q.type} | Target word: "${q.targetWord}"
Expected: "${q.expectedAnswer}"
Student answer: "${q.userAnswer}"
Context: "${q.contextSentence || 'N/A'}"
`).join('')}
For different question types:
- Translation: Accept semantic equivalents, consider cultural variations
- Definition: Accept paraphrasing that captures core meaning
- Context usage: Evaluate grammatical correctness and semantic appropriateness
- Synonyms: Accept close semantic relationships, not just exact synonyms
Evaluate ALL questions in the batch and look for consistency patterns.
Return JSON: {
batchScore: 0-100,
totalCorrect: number,
totalPartialCredit: number,
overallFeedback: "general performance summary",
questions: [
{
questionId: number,
score: 0-100,
correct: boolean,
partialCredit: boolean,
feedback: "specific feedback for this question",
correctAlternatives: ["alternative answers if applicable"],
learningTip: "helpful tip for this word/concept"
}
// ... for each question in batch
],
strengthAreas: ["areas where student performed well"],
weaknessAreas: ["areas needing improvement"],
recommendedActions: ["specific next steps for improvement"]
}
`;
// Audio Comprehension Validation
const audioPrompt = `
Evaluate audio comprehension:
- Audio transcription: "${transcription}"
- Student comprehension: "${userAnswer}"
- Language level: beginner/intermediate
Did the student understand the main meaning? Accept paraphrasing and different expressions.
Return JSON: {score: 0-100, correct: boolean, feedback: "..."}
`;
// Image Description Validation
const imagePrompt = `
Evaluate image description:
- Student description: "${userAnswer}"
- Target vocabulary from chapter: ${chapterVocab}
- Exercise type: free description
Evaluate vocabulary usage, accuracy of description, and language naturalness.
Return JSON: {score: 0-100, correct: boolean, feedback: "...", vocabularyUsed: []}
`;
// Grammar Exercise Validation
const grammarPrompt = `
Evaluate grammar usage:
- Exercise type: ${grammarType} (sentence construction, tense usage, etc.)
- Student response: "${userAnswer}"
- Target grammar concepts: ${grammarConcepts}
- Language level: ${languageLevel}
Evaluate grammatical correctness, naturalness, and appropriate usage of target concepts.
Accept multiple correct variations but identify errors clearly.
Return JSON: {
score: 0-100,
correct: boolean,
feedback: "constructive grammar feedback",
grammarErrors: ["specific errors identified"],
grammarStrengths: ["correct usage noted"],
suggestion: "alternative correct formulation if needed"
}
`;
```
#### API Configuration
- Support multiple LLM providers (OpenAI, Claude, local Ollama)
- Fallback mechanisms for API failures
- Rate limiting and error handling
- Configurable temperature and model parameters
### 5. Progress Tracking
#### Mastery Validation
- Individual word mastery tracking (attempts, success rate, last reviewed)
- Phrase/sentence comprehension scores
- Grammar concept mastery tracking (tenses, sentence structure, etc.)
- **Vocabulary Exam Performance**:
- Checkpoint exam scores (every 15 words)
- Comprehensive exam certification status
- Question-type specific performance (translation, definition, context, etc.)
- Remedial exam tracking for failed words
- Overall chapter progress percentage
- Difficulty adaptation based on performance
#### Visual Progress Indicators
- Progress bar showing overall completion
- Section-based progress (vocabulary: 45/60, phrases: 8/12, texts: 2/5, grammar: 6/8)
- Mastery indicators (✅ learned, 🟡 reviewing, ❌ needs work)
- Grammar concept tracking (present tense: ✅, articles: 🟡, word order: ❌)
- Time estimates for completion
## 🎮 User Experience Flow
### Session Start
1. Load chapter content and analyze prerequisites
2. Display progress overview and available exercises
3. Present first available exercise based on mastery state
### Exercise Flow
1. **Present Content** - Show vocabulary/phrase/text/image/audio/grammar exercise
2. **User Interaction** - Input translation/description/comprehension/grammar construction
3. **LLM Validation** - Intelligent evaluation with feedback (including grammar analysis)
4. **Progress Update** - Update mastery tracking (vocabulary, grammar concepts, etc.)
5. **Next Exercise** - Dynamic selection based on progress and variation pattern
### Adaptive Progression
- If user struggles (< 60% score): additional practice exercises
- If user excels (> 90% score): accelerated progression
- Smart retry system for failed exercises
- Prerequisite re-evaluation after each mastery update
### Session End
- Progress summary with achievements
- Recommendations for next session
- Mastery gaps identified for focused review
## 🔧 Technical Implementation
### Dynamic Modular File Structure
```
src/games/smart-preview/
├── SmartPreviewOrchestrator.js # Main orchestrator module
├── exercise-modules/ # Semi-independent exercise modules
│ ├── VocabularyModule.js # Vocabulary exercises (groups of 5)
│ ├── VocabExamModule.js # AI-verified batch vocabulary exams
│ ├── PhraseModule.js # Individual phrase comprehension
│ ├── TextModule.js # Sentence-by-sentence processing
│ ├── AudioModule.js # Audio comprehension
│ ├── ImageModule.js # Image description
│ └── GrammarModule.js # Grammar construction
├── services/ # Shared service modules
│ ├── LLMValidator.js # LLM integration for all modules
│ ├── PrerequisiteEngine.js # Dependency tracking
│ └── ContextMemory.js # Progressive context building
├── interfaces/
│ └── ExerciseModuleInterface.js # Standard interface for all modules
└── templates/
├── orchestrator.html # Main UI template
└── modules/ # Module-specific templates
├── vocabulary.html
├── vocab-exam.html # Batch exam interface
├── phrase.html
├── text.html
├── audio.html
├── image.html
└── grammar.html
```
### Dynamic Module Data Flow
```
1. Orchestrator Initialization
└── Load shared services (LLM, Prerequisites, Context)
└── Analyze chapter content and prerequisites
└── Determine available exercise modules
2. Module Loading & Sequencing
└── orchestrator.getAvailableModules(prerequisites)
└── orchestrator.loadModule(selectedType)
└── module.canRun(prerequisites) → boolean
3. Exercise Execution
└── module.present(container, exerciseData)
└── user interaction & input capture
└── module.validate(userInput, context) → ValidationResult
4. Dynamic Adaptation
└── Update mastery tracking
└── prerequisiteEngine.reevaluate(newMastery)
└── orchestrator.selectNextModule(progress, variation)
└── module.cleanup() → orchestrator.unloadModule()
5. Module Lifecycle
canRun() → present() → validate() → cleanup() → unload/switch
```
### Integration Points
#### With Existing System
- Extends Module base class architecture
- Uses EventBus for communication
- Integrates with existing content loading system
- Compatible with current routing system
#### Content Requirements
- Chapter vocabulary lists with base forms
- Phrase/sentence collections with difficulty indicators
- Audio files with transcriptions
- Images with contextual information
- Text passages segmented by sentences
### Performance Considerations
- Lazy loading of exercises and content
- LLM request caching for repeated validations
- Efficient prerequisite checking algorithms
- Minimal DOM manipulation for smooth UX
## 🚀 Dynamic Implementation Strategy
### **MVP Phase 1: Orchestrator + Vocabulary Module (Week 1)**
```
1. SmartPreviewOrchestrator.js - Core controller
└── Module loading/unloading system
└── Basic exercise sequencing
└── Progress tracking foundation
2. VocabularyModule.js - First exercise module
└── Groups of 5 vocabulary system
└── Basic LLM mock validation
└── Standard interface implementation
3. Services Foundation
└── LLMValidator.js (mock responses initially)
└── PrerequisiteEngine.js (chapter vocab filtering)
└── ExerciseModuleInterface.js (standard contract)
```
### **Phase 2: Add Core Modules (Week 2)**
```
4. PhraseModule.js - Individual phrase comprehension
5. TextModule.js - Sentence-by-sentence processing
6. Basic ContextMemory.js - Progressive context building
7. Real LLM integration (replace mocks)
```
### **Phase 3: Complete Module Set (Week 3)**
```
8. AudioModule.js - Audio comprehension
9. ImageModule.js - Image description
10. GrammarModule.js - Grammar construction
11. Advanced prerequisite logic
12. Exercise variation patterns
```
### **Phase 4: Intelligence & Polish (Week 4)**
```
13. Adaptive difficulty system
14. Advanced context memory
15. Performance optimization
16. Error handling and fallbacks
17. UI/UX refinements
```
### **Development Approach**
- **Modular Testing**: Each module independently testable
- **Progressive Enhancement**: Add modules incrementally
- **Interface-Driven**: All modules follow standard contract
- **Service Injection**: Shared services injected into modules
- **Dynamic Loading**: Modules loaded only when needed
## 📊 Success Metrics
### Learning Effectiveness
- User completion rates per session
- Average time to vocabulary mastery
- Retention rates in follow-up sessions
- User satisfaction scores
### Technical Performance
- LLM response times (< 2 seconds)
- Exercise loading times (< 500ms)
- System uptime and error rates
- Content coverage completeness
### Adaptive Accuracy
- Prerequisite system accuracy (avoiding impossible exercises)
- LLM validation consistency with human evaluation
- Progression appropriateness for user level

26
analyze-failures.js Normal file
View File

@ -0,0 +1,26 @@
import { runAllTests } from './src/testing/runTests.js';
async function analyzeFailures() {
console.log('Running test suite...');
const results = await runAllTests();
console.log('\n=== DETAILED FAILURE ANALYSIS ===');
results.suites.forEach(suite => {
if (!suite.success && suite.result && suite.result.details) {
console.log(`\n${suite.suiteName}:`);
suite.result.details
.filter(test => test.state === 'failed')
.forEach(test => {
console.log(` ❌ ${test.name}`);
console.log(` Error: ${test.error?.message || 'Unknown'}`);
if (test.error?.stack) {
const stackLine = test.error.stack.split('\n')[0];
console.log(` Stack: ${stackLine}`);
}
});
}
});
}
analyzeFailures().catch(console.error);

BIN
assets/SBSBook.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

1
assets/favicon.ico Normal file
View File

@ -0,0 +1 @@
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="%23667eea"/><text x="16" y="22" text-anchor="middle" fill="white" font-family="Arial" font-size="18" font-weight="bold">C</text></svg>

BIN
caddy.exe Normal file
View File

Binary file not shown.

51
content/books/sbs.json Normal file
View File

@ -0,0 +1,51 @@
{
"id": "sbs",
"name": "Side by Side",
"description": "Side by Side English Learning Series - Complete course for intermediate learners",
"difficulty": "intermediate",
"language": "en-US",
"metadata": {
"version": "1.0",
"created": "2025-09-23",
"updated": "2025-09-23",
"source": "Side by Side English Learning Series",
"target_level": "intermediate",
"total_estimated_hours": 100,
"prerequisites": ["basic-english"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand grammar structures in context",
"Develop conversational skills",
"Practice reading and listening comprehension"
],
"content_tags": ["vocabulary", "grammar", "conversation", "practical-english"],
"total_chapters": 12,
"available_chapters": ["7-8"],
"completion_criteria": {
"overall_progress": 80,
"chapters_completed": 8,
"vocabulary_mastery": 85
}
},
"chapters": [
{
"id": "sbs-7-8",
"chapter_number": "7-8",
"name": "Daily Life & Vocabulary",
"description": "Master intermediate vocabulary for daily situations including clothing, body parts, emotions and technology",
"estimated_hours": 25,
"difficulty": "intermediate",
"prerequisites": ["sbs-5-6"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand clothing and body parts terminology",
"Learn emotional expressions and feelings",
"Practice technology and social media vocabulary"
],
"vocabulary_count": 150,
"phrases_count": 45,
"dialogs_count": 8,
"exercises_count": 25
}
]
}

169
content/chapters/sbs-7-8.json Normal file
View File

@ -0,0 +1,169 @@
{
"id": "sbs-7-8",
"book_id": "sbs",
"name": "Daily Life & Vocabulary",
"description": "Side by Side Level 7-8 vocabulary with language-agnostic format",
"difficulty": "intermediate",
"language": "en-US",
"chapter_number": "7-8",
"metadata": {
"version": "1.0",
"created": "2025-09-23",
"updated": "2025-09-23",
"source": "Side by Side English Learning Series",
"target_level": "intermediate",
"estimated_hours": 25,
"prerequisites": ["sbs-5-6"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand clothing and body parts terminology",
"Learn emotional expressions and feelings",
"Practice technology and social media vocabulary"
],
"content_tags": ["vocabulary", "daily-life", "practical-english", "conversational"],
"completion_criteria": {
"vocabulary_mastery": 80,
"quiz_score": 75,
"games_completed": 5
}
},
"vocabulary": {
"central": { "user_language": "中心的；中央的", "type": "adjective", "pronunciation": "/ˈsentrəl/" },
"avenue": { "user_language": "大街；林荫道", "type": "noun", "pronunciation": "/ˈævənjuː/" },
"refrigerator": { "user_language": "冰箱", "type": "noun", "pronunciation": "/rɪˈfrɪdʒəreɪtər/" },
"closet": { "user_language": "衣柜；壁橱", "type": "noun", "pronunciation": "/ˈklɒzɪt/" },
"elevator": { "user_language": "电梯", "type": "noun", "pronunciation": "/ˈeləveɪtər/" },
"building": { "user_language": "建筑物；大楼", "type": "noun", "pronunciation": "/ˈbɪldɪŋ/" },
"air conditioner": { "user_language": "空调", "type": "noun", "pronunciation": "/ɛr kənˈdɪʃənər/" },
"superintendent": { "user_language": "主管；负责人", "type": "noun", "pronunciation": "/ˌsuːpərɪnˈtendənt/" },
"bus stop": { "user_language": "公交车站", "type": "noun", "pronunciation": "/bʌs stɒp/" },
"jacuzzi": { "user_language": "按摩浴缸", "type": "noun", "pronunciation": "/dʒəˈkuːzi/" },
"machine": { "user_language": "机器；设备", "type": "noun", "pronunciation": "/məˈʃiːn/" },
"two and a half": { "user_language": "两个半", "type": "number", "pronunciation": "/tuː ænd ə hæf/" },
"in the center of": { "user_language": "在……中心", "type": "preposition", "pronunciation": "/ɪn ðə ˈsentər ʌv/" },
"town": { "user_language": "城镇", "type": "noun", "pronunciation": "/taʊn/" },
"a lot of": { "user_language": "许多", "type": "determiner", "pronunciation": "/ə lɑt ʌv/" },
"noise": { "user_language": "噪音", "type": "noun", "pronunciation": "/nɔɪz/" },
"sidewalks": { "user_language": "人行道", "type": "noun", "pronunciation": "/ˈsaɪdwɔːks/" },
"all day and all night": { "user_language": "整日整夜", "type": "adverb", "pronunciation": "/ɔːl deɪ ænd ɔːl naɪt/" },
"convenient": { "user_language": "便利的", "type": "adjective", "pronunciation": "/kənˈviːniənt/" },
"shirt": { "user_language": "衬衫", "type": "noun", "pronunciation": "/ʃɜːrt/" },
"coat": { "user_language": "外套、大衣", "type": "noun", "pronunciation": "/koʊt/" },
"pants": { "user_language": "裤子", "type": "noun", "pronunciation": "/pænts/" },
"shoes": { "user_language": "鞋子", "type": "noun", "pronunciation": "/ʃuːz/" },
"hat": { "user_language": "帽子", "type": "noun", "pronunciation": "/hæt/" },
"dress": { "user_language": "连衣裙", "type": "noun", "pronunciation": "/drɛs/" },
"suit": { "user_language": "套装", "type": "noun", "pronunciation": "/suːt/" },
"tie": { "user_language": "领带", "type": "noun", "pronunciation": "/taɪ/" },
"socks": { "user_language": "袜子", "type": "noun", "pronunciation": "/sɑːks/" },
"blouse": { "user_language": "女式衬衫", "type": "noun", "pronunciation": "/blaʊs/" },
"skirt": { "user_language": "裙子", "type": "noun", "pronunciation": "/skɜːrt/" },
"sweater": { "user_language": "毛衣", "type": "noun", "pronunciation": "/ˈswɛtər/" },
"jacket": { "user_language": "夹克", "type": "noun", "pronunciation": "/ˈdʒækɪt/" },
"jeans": { "user_language": "牛仔裤", "type": "noun", "pronunciation": "/dʒiːnz/" },
"shorts": { "user_language": "短裤", "type": "noun", "pronunciation": "/ʃɔːrts/" },
"sneakers": { "user_language": "运动鞋", "type": "noun", "pronunciation": "/ˈsniːkərz/" },
"boots": { "user_language": "靴子", "type": "noun", "pronunciation": "/buːts/" },
"gloves": { "user_language": "手套", "type": "noun", "pronunciation": "/ɡlʌvz/" },
"scarf": { "user_language": "围巾", "type": "noun", "pronunciation": "/skɑːrf/" },
"belt": { "user_language": "腰带", "type": "noun", "pronunciation": "/bɛlt/" },
"head": { "user_language": "头", "type": "noun", "pronunciation": "/hɛd/" },
"hair": { "user_language": "头发", "type": "noun", "pronunciation": "/hɛr/" },
"eyes": { "user_language": "眼睛", "type": "noun", "pronunciation": "/aɪz/" },
"nose": { "user_language": "鼻子", "type": "noun", "pronunciation": "/noʊz/" },
"mouth": { "user_language": "嘴", "type": "noun", "pronunciation": "/maʊθ/" },
"ears": { "user_language": "耳朵", "type": "noun", "pronunciation": "/ɪrz/" },
"face": { "user_language": "脸", "type": "noun", "pronunciation": "/feɪs/" },
"neck": { "user_language": "脖子", "type": "noun", "pronunciation": "/nɛk/" },
"shoulders": { "user_language": "肩膀", "type": "noun", "pronunciation": "/ˈʃoʊldərz/" },
"arms": { "user_language": "胳膊", "type": "noun", "pronunciation": "/ɑːrmz/" },
"hands": { "user_language": "手", "type": "noun", "pronunciation": "/hændz/" },
"fingers": { "user_language": "手指", "type": "noun", "pronunciation": "/ˈfɪŋɡərz/" },
"chest": { "user_language": "胸部", "type": "noun", "pronunciation": "/tʃɛst/" },
"back": { "user_language": "背部", "type": "noun", "pronunciation": "/bæk/" },
"stomach": { "user_language": "腹部、肚子", "type": "noun", "pronunciation": "/ˈstʌmək/" },
"legs": { "user_language": "腿", "type": "noun", "pronunciation": "/lɛɡz/" },
"feet": { "user_language": "脚", "type": "noun", "pronunciation": "/fiːt/" },
"happy": { "user_language": "快乐的", "type": "adjective", "pronunciation": "/ˈhæpi/" },
"sad": { "user_language": "悲伤的", "type": "adjective", "pronunciation": "/sæd/" },
"angry": { "user_language": "生气的", "type": "adjective", "pronunciation": "/ˈæŋɡri/" },
"worried": { "user_language": "担心的", "type": "adjective", "pronunciation": "/ˈwɜːrid/" },
"excited": { "user_language": "兴奋的", "type": "adjective", "pronunciation": "/ɪkˈsaɪtɪd/" },
"tired": { "user_language": "疲劳的", "type": "adjective", "pronunciation": "/ˈtaɪərd/" },
"hungry": { "user_language": "饥饿的", "type": "adjective", "pronunciation": "/ˈhʌŋɡri/" },
"thirsty": { "user_language": "口渴的", "type": "adjective", "pronunciation": "/ˈθɜːrsti/" },
"cold": { "user_language": "寒冷的", "type": "adjective", "pronunciation": "/koʊld/" },
"hot": { "user_language": "炎热的", "type": "adjective", "pronunciation": "/hɑːt/" },
"computer": { "user_language": "电脑", "type": "noun", "pronunciation": "/kəmˈpjuːtər/" },
"laptop": { "user_language": "笔记本电脑", "type": "noun", "pronunciation": "/ˈlæptɑːp/" },
"phone": { "user_language": "电话", "type": "noun", "pronunciation": "/foʊn/" },
"tablet": { "user_language": "平板电脑", "type": "noun", "pronunciation": "/ˈtæblət/" },
"internet": { "user_language": "互联网", "type": "noun", "pronunciation": "/ˈɪntərnet/" },
"email": { "user_language": "电子邮件", "type": "noun", "pronunciation": "/ˈiːmeɪl/" },
"website": { "user_language": "网站", "type": "noun", "pronunciation": "/ˈwɛbsaɪt/" },
"app": { "user_language": "应用程序", "type": "noun", "pronunciation": "/æp/" },
"social media": { "user_language": "社交媒体", "type": "noun", "pronunciation": "/ˈsoʊʃəl ˈmidiə/" },
"password": { "user_language": "密码", "type": "noun", "pronunciation": "/ˈpæswərd/" }
},
"phrases": {
"I live in a two-bedroom apartment": { "user_language": "我住在一间两居室的公寓", "context": "housing", "pronunciation": "/aɪ lɪv ɪn ə tuː ˈbɛdruːm əˈpɑːrtmənt/" },
"It's in the center of town": { "user_language": "它在城镇中心", "context": "location", "pronunciation": "/ɪts ɪn ðə ˈsentər ʌv taʊn/" },
"There's a lot of noise": { "user_language": "有很多噪音", "context": "complaint", "pronunciation": "/ðɛrz ə lɑt ʌv nɔɪz/" },
"It's very convenient": { "user_language": "这很便利", "context": "advantage", "pronunciation": "/ɪts ˈvɛri kənˈviniənt/" },
"What are you wearing?": { "user_language": "你穿的是什么？", "context": "clothing", "pronunciation": "/wʌt ɑr ju ˈwɛrɪŋ/" },
"I'm wearing a blue shirt": { "user_language": "我穿着一件蓝色的衬衫", "context": "clothing", "pronunciation": "/aɪm ˈwɛrɪŋ ə blu ʃɜrt/" },
"How do you feel?": { "user_language": "你感觉怎么样？", "context": "emotions", "pronunciation": "/haʊ du ju fil/" },
"I feel happy today": { "user_language": "我今天感觉很开心", "context": "emotions", "pronunciation": "/aɪ fil ˈhæpi təˈdeɪ/" },
"Do you have internet access?": { "user_language": "你有网络连接吗？", "context": "technology", "pronunciation": "/du ju hæv ˈɪntərnet ˈækses/" },
"I need to check my email": { "user_language": "我需要查看我的电子邮件", "context": "technology", "pronunciation": "/aɪ nid tu tʃɛk maɪ ˈimeɪl/" }
},
"dialogs": {
"apartment_search": {
"title": "Looking for an Apartment",
"participants": ["Alex", "Manager"],
"lines": [
{ "speaker": "Alex", "text": "I'm looking for a two-bedroom apartment.", "user_language": "我在找一间两居室的公寓。" },
{ "speaker": "Manager", "text": "We have one available on Central Avenue.", "user_language": "我们在中央大道有一间可用的。" },
{ "speaker": "Alex", "text": "Is it convenient for transportation?", "user_language": "交通方便吗？" },
{ "speaker": "Manager", "text": "Yes, there's a bus stop right outside.", "user_language": "是的，外面就有一个公交车站。" }
]
},
"clothing_shopping": {
"title": "Shopping for Clothes",
"participants": ["Customer", "Salesperson"],
"lines": [
{ "speaker": "Customer", "text": "I need a shirt for work.", "user_language": "我需要一件工作穿的衬衫。" },
{ "speaker": "Salesperson", "text": "What size do you wear?", "user_language": "你穿什么尺码？" },
{ "speaker": "Customer", "text": "Medium. Do you have it in blue?", "user_language": "中码。你们有蓝色的吗？" },
{ "speaker": "Salesperson", "text": "Yes, here's a nice blue shirt.", "user_language": "有，这里有一件漂亮的蓝色衬衫。" }
]
}
},
"exercises": {
"vocabulary_matching": {
"type": "matching",
"instructions": "Match the English words with their Chinese meanings",
"pairs": [
{ "english": "shirt", "chinese": "衬衫" },
{ "english": "happy", "chinese": "快乐的" },
{ "english": "computer", "chinese": "电脑" },
{ "english": "apartment", "chinese": "公寓" }
]
},
"fill_in_blanks": {
"type": "fill_blanks",
"instructions": "Fill in the blanks with the correct words",
"sentences": [
{ "text": "I live in a two-bedroom _______", "answer": "apartment", "user_language": "我住在一间两居室的_______" },
{ "text": "I'm wearing a blue _______", "answer": "shirt", "user_language": "我穿着一件蓝色的_______" }
]
}
},
"statistics": {
"vocabulary_count": 67,
"phrases_count": 10,
"dialogs_count": 2,
"exercises_count": 2,
"estimated_completion_time": 25
}
}

19
content/chapters/sbs.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "Side by Side English Course",
"description": "Complete English language learning course",
"version": "1.0",
"language": "en",
"targetLanguage": "fr",
"chapters": [
{
"id": "sbs-7-8",
"name": "Chapters 7-8: Past Tense & Irregular Verbs",
"description": "Learn past tense and irregular verbs with practical exercises"
}
],
"metadata": {
"created": "2025-09-26",
"level": "intermediate",
"estimatedHours": 20
}
}

482
drs-main.html Normal file
View File

@ -0,0 +1,482 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎓 DRS Unifié - Class Generator 2.0</title>
<!-- Styles -->
<link rel="stylesheet" href="src/styles/base.css?v=3">
<link rel="stylesheet" href="src/styles/components.css?v=17">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.app-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.app-header {
background: white;
border-radius: 16px 16px 0 0;
padding: 24px;
text-align: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.app-header h1 {
margin: 0 0 8px 0;
color: #111827;
font-size: 2.5em;
}
.app-header p {
margin: 0;
color: #6b7280;
font-size: 1.1em;
}
.app-main {
background: white;
border-radius: 0 0 16px 16px;
padding: 24px;
min-height: 600px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.exercise-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.exercise-card {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.exercise-card:hover {
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}
.exercise-card.active {
border-color: #10b981;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.exercise-icon {
font-size: 2.5em;
margin-bottom: 12px;
display: block;
}
.exercise-title {
font-size: 1.1em;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.exercise-description {
font-size: 0.9em;
color: #6b7280;
margin: 0;
}
.difficulty-selector {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 24px;
}
.difficulty-btn {
padding: 8px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
}
.difficulty-btn.active {
border-color: #3b82f6;
background: #3b82f6;
color: white;
}
.difficulty-btn:hover:not(.active) {
border-color: #9ca3af;
background: #f9fafb;
}
.drs-workspace {
border: 2px dashed #e5e7eb;
border-radius: 12px;
padding: 24px;
min-height: 500px;
background: #fafafa;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.drs-workspace.active {
border-style: solid;
border-color: #10b981;
background: white;
text-align: left;
align-items: stretch;
}
.workspace-placeholder {
color: #9ca3af;
}
.workspace-placeholder h3 {
margin: 0 0 16px 0;
font-size: 1.3em;
}
.workspace-placeholder p {
margin: 0;
font-size: 1.1em;
line-height: 1.6;
}
.controls {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.status-bar {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 20px;
font-size: 14px;
color: #475569;
}
.status-bar.success {
background: #ecfdf5;
border-color: #10b981;
color: #065f46;
}
.status-bar.error {
background: #fef2f2;
border-color: #ef4444;
color: #991b1b;
}
.status-bar.loading {
background: #eff6ff;
border-color: #3b82f6;
color: #1e40af;
}
@media (max-width: 768px) {
.exercise-selector {
grid-template-columns: 1fr;
}
.controls {
flex-direction: column;
}
.difficulty-selector {
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<div class="app-container">
<header class="app-header">
<h1>🎓 DRS Unifié</h1>
<p>Système d'apprentissage avec composants UI unifiés</p>
</header>
<main class="app-main">
<!-- Exercise Type Selector -->
<div class="exercise-selector">
<div class="exercise-card" data-type="text">
<span class="exercise-icon">📚</span>
<div class="exercise-title">Compréhension Écrite</div>
<p class="exercise-description">Lecture et analyse de texte</p>
</div>
<div class="exercise-card" data-type="audio">
<span class="exercise-icon">🎵</span>
<div class="exercise-title">Compréhension Orale</div>
<p class="exercise-description">Écoute et analyse audio</p>
</div>
<div class="exercise-card" data-type="image">
<span class="exercise-icon">🖼️</span>
<div class="exercise-title">Analyse d'Image</div>
<p class="exercise-description">Observation et description</p>
</div>
<div class="exercise-card" data-type="grammar">
<span class="exercise-icon">📝</span>
<div class="exercise-title">Grammaire</div>
<p class="exercise-description">Exercices grammaticaux</p>
</div>
</div>
<!-- Difficulty Selector -->
<div class="difficulty-selector">
<button class="difficulty-btn active" data-difficulty="easy">Facile</button>
<button class="difficulty-btn" data-difficulty="medium">Moyen</button>
<button class="difficulty-btn" data-difficulty="hard">Difficile</button>
</div>
<!-- Controls -->
<div class="controls">
<button id="startBtn" class="btn btn-primary" disabled>🚀 Démarrer l'exercice</button>
<button id="resetBtn" class="btn btn-outline">🔄 Réinitialiser</button>
</div>
<!-- Status Bar -->
<div id="statusBar" class="status-bar" style="display: none;">
Prêt à commencer...
</div>
<!-- DRS Workspace -->
<div id="drsWorkspace" class="drs-workspace">
<div class="workspace-placeholder">
<h3>👆 Choisissez un type d'exercice</h3>
<p>Sélectionnez un exercice ci-dessus, choisissez la difficulté, puis cliquez sur "Démarrer"</p>
</div>
</div>
</main>
</div>
<!-- Loading Application -->
<script type="module">
import app from './src/Application.js';
// Wait for application to be ready
console.log('🚀 Initializing DRS Main Application...');
let selectedType = null;
let selectedDifficulty = 'medium';
let unifiedDRS = null;
// DOM elements
const exerciseCards = document.querySelectorAll('.exercise-card');
const difficultyButtons = document.querySelectorAll('.difficulty-btn');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const statusBar = document.getElementById('statusBar');
const workspace = document.getElementById('drsWorkspace');
// Utility functions
function showStatus(message, type = 'loading') {
statusBar.textContent = message;
statusBar.className = `status-bar ${type}`;
statusBar.style.display = 'block';
}
function hideStatus() {
statusBar.style.display = 'none';
}
function updateWorkspace(active = false) {
if (active) {
workspace.classList.add('active');
workspace.innerHTML = '';
} else {
workspace.classList.remove('active');
workspace.innerHTML = `
<div class="workspace-placeholder">
<h3>👆 Choisissez un type d'exercice</h3>
<p>Sélectionnez un exercice ci-dessus, choisissez la difficulté, puis cliquez sur "Démarrer"</p>
</div>
`;
}
}
function updateStartButton() {
startBtn.disabled = !selectedType;
if (selectedType) {
startBtn.textContent = `🚀 Démarrer: ${getTypeLabel(selectedType)} (${getDifficultyLabel(selectedDifficulty)})`;
} else {
startBtn.textContent = '🚀 Démarrer l\'exercice';
}
}
function getTypeLabel(type) {
const labels = {
text: 'Lecture',
audio: 'Audio',
image: 'Image',
grammar: 'Grammaire'
};
return labels[type] || type;
}
function getDifficultyLabel(difficulty) {
const labels = {
easy: 'Facile',
medium: 'Moyen',
hard: 'Difficile'
};
return labels[difficulty] || difficulty;
}
// Exercise type selection
exerciseCards.forEach(card => {
card.addEventListener('click', () => {
// Remove active class from all cards
exerciseCards.forEach(c => c.classList.remove('active'));
// Add active class to clicked card
card.classList.add('active');
// Update selected type
selectedType = card.dataset.type;
updateStartButton();
console.log(`📋 Selected exercise type: ${selectedType}`);
});
});
// Difficulty selection
difficultyButtons.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class from all buttons
difficultyButtons.forEach(b => b.classList.remove('active'));
// Add active class to clicked button
btn.classList.add('active');
// Update selected difficulty
selectedDifficulty = btn.dataset.difficulty;
updateStartButton();
console.log(`🎯 Selected difficulty: ${selectedDifficulty}`);
});
});
// Start exercise
startBtn.addEventListener('click', async () => {
if (!selectedType || !unifiedDRS) {
showStatus('❌ Impossible de démarrer - système non prêt', 'error');
return;
}
try {
showStatus(`🚀 Démarrage de l'exercice ${getTypeLabel(selectedType)}...`, 'loading');
updateWorkspace(true);
await unifiedDRS.start(workspace, {
type: selectedType,
difficulty: selectedDifficulty
});
showStatus(`✅ Exercice ${getTypeLabel(selectedType)} démarré!`, 'success');
startBtn.disabled = true;
} catch (error) {
console.error('❌ Error starting exercise:', error);
showStatus(`❌ Erreur: ${error.message}`, 'error');
updateWorkspace(false);
}
});
// Reset
resetBtn.addEventListener('click', () => {
console.log('🔄 Resetting DRS...');
updateWorkspace(false);
hideStatus();
startBtn.disabled = false;
updateStartButton();
});
// Wait for application to initialize
try {
await app.start();
console.log('✅ Application started successfully');
// Get UnifiedDRS module
const moduleLoader = app.getCore().moduleLoader;
unifiedDRS = moduleLoader.getModule('unifiedDRS');
if (unifiedDRS) {
console.log('✅ UnifiedDRS module loaded');
showStatus('✅ Système DRS prêt - choisissez un exercice!', 'success');
// Auto-hide status after 3 seconds
setTimeout(() => {
hideStatus();
}, 3000);
} else {
throw new Error('UnifiedDRS module not found');
}
} catch (error) {
console.error('❌ Failed to initialize application:', error);
showStatus(`❌ Erreur d'initialisation: ${error.message}`, 'error');
}
// Set up event listeners for DRS events
if (app.getCore().eventBus) {
const eventBus = app.getCore().eventBus;
eventBus.registerModule({ name: 'drsMain' });
eventBus.on('drs:started', (event) => {
console.log('📢 Exercise started:', event.data);
showStatus(`🎯 Exercice en cours: étape 1/${event.data.steps}`, 'success');
}, 'drsMain');
eventBus.on('drs:step-completed', (event) => {
console.log('📢 Step completed:', event.data);
showStatus(`🎯 Étape ${event.data.step + 1}/${event.data.total} complétée`, 'success');
}, 'drsMain');
eventBus.on('drs:completed', (event) => {
console.log('📢 Exercise completed:', event.data);
showStatus(`🎉 Exercice terminé! Temps: ${Math.round(event.data.stats.timeSpent / 1000)}s`, 'success');
startBtn.disabled = false;
updateStartButton();
}, 'drsMain');
eventBus.on('drs:hint-used', (event) => {
console.log('📢 Hint used:', event.data);
showStatus(`💡 Indice utilisé pour l'étape ${event.data.step + 1}`, 'success');
}, 'drsMain');
}
console.log('🎓 DRS Main page initialized');
</script>
</body>
</html>

465
drs-unified-test.html Normal file
View File

@ -0,0 +1,465 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎓 Test DRS Unifié - Class Generator 2.0</title>
<!-- Styles -->
<link rel="stylesheet" href="src/styles/base.css">
<link rel="stylesheet" href="src/styles/components.css">
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.test-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.test-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 24px;
text-align: center;
}
.test-header h1 {
margin: 0 0 8px 0;
font-size: 2em;
}
.test-header p {
margin: 0;
opacity: 0.9;
font-size: 1.1em;
}
.test-content {
padding: 24px;
}
.test-controls {
display: flex;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.status {
padding: 12px;
border-radius: 8px;
margin: 16px 0;
font-weight: 500;
}
.status.success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #10b981;
}
.status.error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #ef4444;
}
.status.loading {
background: #eff6ff;
color: #1e40af;
border: 1px solid #3b82f6;
}
.drs-container {
border: 2px dashed #e5e7eb;
border-radius: 12px;
padding: 20px;
min-height: 400px;
background: #fafafa;
text-align: center;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.drs-container.active {
border-style: solid;
border-color: #3b82f6;
background: white;
text-align: left;
}
.empty-state {
font-size: 1.1em;
}
.debug-panel {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.debug-panel h3 {
margin: 0 0 12px 0;
color: #475569;
}
.debug-info {
font-family: monospace;
font-size: 12px;
color: #64748b;
background: white;
padding: 8px;
border-radius: 4px;
white-space: pre-wrap;
}
@media (max-width: 768px) {
.test-controls {
flex-direction: column;
}
.test-controls button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="test-container">
<div class="test-header">
<h1>🎓 Test DRS Unifié</h1>
<p>Nouveau système DRS avec composants UI extraits</p>
</div>
<div class="test-content">
<!-- Controls -->
<div class="test-controls">
<button id="startTextBtn" class="btn btn-primary">📚 Start Text Exercise</button>
<button id="startAudioBtn" class="btn btn-secondary">🎵 Start Audio Exercise</button>
<button id="startImageBtn" class="btn btn-outline">🖼️ Start Image Exercise</button>
<button id="startGrammarBtn" class="btn btn-success">📝 Start Grammar Exercise</button>
<button id="resetBtn" class="btn btn-danger">🔄 Reset</button>
</div>
<!-- Status -->
<div id="status" class="status" style="display: none;"></div>
<!-- DRS Container -->
<div id="drsContainer" class="drs-container">
<div class="empty-state">
<h3>👆 Choisissez un type d'exercice</h3>
<p>Sélectionnez un bouton ci-dessus pour tester le DRS unifié</p>
</div>
</div>
<!-- Debug Panel -->
<div class="debug-panel">
<h3>🔍 Debug Info</h3>
<div id="debugInfo" class="debug-info">Ready to test...</div>
</div>
</div>
</div>
<script type="module">
import UnifiedDRS from './src/DRS/UnifiedDRS.js';
import EventBus from './src/core/EventBus.js';
// Create mock ContentLoader
class MockContentLoader {
constructor() {
this.name = 'mockContentLoader';
}
async loadExercise(request) {
console.log('📚 Mock loading exercise:', request);
// Return mock exercise data based on type
const exercises = {
text: {
title: "Reading Comprehension",
type: "text",
steps: [
{
instruction: "Read the following passage and answer the question.",
text: "The sun is a star at the center of our solar system. It provides light and heat that makes life possible on Earth. The sun is about 4.6 billion years old and will continue to shine for another 5 billion years.",
question: "How old is the sun approximately?",
options: ["1 billion years", "4.6 billion years", "10 billion years", "100 million years"],
correct: 1,
hint: "Look for the specific number mentioned in the passage."
},
{
instruction: "Answer another question about the passage.",
question: "How much longer will the sun continue to shine?",
options: ["1 billion years", "3 billion years", "5 billion years", "10 billion years"],
correct: 2,
hint: "The passage mentions the sun will continue for another specific duration."
}
]
},
audio: {
title: "Listening Exercise",
type: "audio",
steps: [
{
instruction: "Listen to the audio and answer the question.",
audioUrl: "https://www.soundjay.com/misc/sounds/bell-ringing-05.wav",
transcript: "Hello, this is a test audio message. The weather today is sunny and warm.",
question: "What is the weather like today?",
options: ["Rainy", "Sunny and warm", "Cold", "Windy"],
correct: 1,
hint: "Listen carefully to the description of the weather."
}
]
},
image: {
title: "Image Analysis",
type: "image",
steps: [
{
instruction: "Look at the image and answer the question.",
imageUrl: "https://via.placeholder.com/400x300/667eea/ffffff?text=Beautiful+Sunset",
question: "What do you see in this image?",
options: ["Sunrise", "Sunset", "Night sky", "Storm"],
correct: 1,
hint: "Look at the colors and lighting in the image."
}
]
},
grammar: {
title: "Grammar Exercise",
type: "grammar",
steps: [
{
instruction: "Fill in the blanks with the correct words.",
sentence: "The cat _____ on the mat yesterday.",
question: "Complete the sentence with the correct past tense form.",
explanation: "Use the past tense of 'sit' which is 'sat'.",
correct: "sat",
hint: "Think about the past tense of the verb 'sit'."
},
{
instruction: "Choose the correct grammatical form.",
question: "Which sentence is grammatically correct?",
options: [
"I have went to the store",
"I have gone to the store",
"I have go to the store",
"I have going to the store"
],
correct: 1,
explanation: "The correct past participle of 'go' is 'gone', not 'went'.",
hint: "Remember the difference between past tense and past participle."
}
]
}
};
const exercise = exercises[request.subtype] || exercises.text;
// Simulate loading delay
await new Promise(resolve => setTimeout(resolve, 500));
return exercise;
}
}
// Initialize system
const eventBus = new EventBus();
const contentLoader = new MockContentLoader();
// Register mock content loader
eventBus.registerModule(contentLoader);
const unifiedDRS = new UnifiedDRS('unifiedDRS', {
eventBus,
contentLoader
});
// Register DRS module
eventBus.registerModule(unifiedDRS);
// Initialize
await unifiedDRS.init();
// Get DOM elements
const startTextBtn = document.getElementById('startTextBtn');
const startAudioBtn = document.getElementById('startAudioBtn');
const startImageBtn = document.getElementById('startImageBtn');
const startGrammarBtn = document.getElementById('startGrammarBtn');
const resetBtn = document.getElementById('resetBtn');
const status = document.getElementById('status');
const drsContainer = document.getElementById('drsContainer');
const debugInfo = document.getElementById('debugInfo');
// Utility functions
function showStatus(message, type = 'loading') {
status.textContent = message;
status.className = `status ${type}`;
status.style.display = 'block';
}
function hideStatus() {
status.style.display = 'none';
}
function updateDebug(info) {
const timestamp = new Date().toLocaleTimeString();
debugInfo.textContent = `[${timestamp}] ${info}`;
}
function activateDRSContainer() {
drsContainer.classList.add('active');
drsContainer.innerHTML = '';
}
function resetDRSContainer() {
drsContainer.classList.remove('active');
drsContainer.innerHTML = `
<div class="empty-state">
<h3>👆 Choisissez un type d'exercice</h3>
<p>Sélectionnez un bouton ci-dessus pour tester le DRS unifié</p>
</div>
`;
}
// Event listeners
startTextBtn.addEventListener('click', async () => {
try {
showStatus('🚀 Starting text exercise...', 'loading');
updateDebug('Starting text exercise');
activateDRSContainer();
await unifiedDRS.start(drsContainer, {
type: 'text',
difficulty: 'medium'
});
showStatus('✅ Text exercise started successfully!', 'success');
updateDebug('Text exercise started successfully');
} catch (error) {
showStatus(`❌ Error: ${error.message}`, 'error');
updateDebug(`Error starting text exercise: ${error.message}`);
console.error('Error starting text exercise:', error);
}
});
startAudioBtn.addEventListener('click', async () => {
try {
showStatus('🚀 Starting audio exercise...', 'loading');
updateDebug('Starting audio exercise');
activateDRSContainer();
await unifiedDRS.start(drsContainer, {
type: 'audio',
difficulty: 'medium'
});
showStatus('✅ Audio exercise started successfully!', 'success');
updateDebug('Audio exercise started successfully');
} catch (error) {
showStatus(`❌ Error: ${error.message}`, 'error');
updateDebug(`Error starting audio exercise: ${error.message}`);
console.error('Error starting audio exercise:', error);
}
});
startImageBtn.addEventListener('click', async () => {
try {
showStatus('🚀 Starting image exercise...', 'loading');
updateDebug('Starting image exercise');
activateDRSContainer();
await unifiedDRS.start(drsContainer, {
type: 'image',
difficulty: 'medium'
});
showStatus('✅ Image exercise started successfully!', 'success');
updateDebug('Image exercise started successfully');
} catch (error) {
showStatus(`❌ Error: ${error.message}`, 'error');
updateDebug(`Error starting image exercise: ${error.message}`);
console.error('Error starting image exercise:', error);
}
});
startGrammarBtn.addEventListener('click', async () => {
try {
showStatus('🚀 Starting grammar exercise...', 'loading');
updateDebug('Starting grammar exercise');
activateDRSContainer();
await unifiedDRS.start(drsContainer, {
type: 'grammar',
difficulty: 'medium'
});
showStatus('✅ Grammar exercise started successfully!', 'success');
updateDebug('Grammar exercise started successfully');
} catch (error) {
showStatus(`❌ Error: ${error.message}`, 'error');
updateDebug(`Error starting grammar exercise: ${error.message}`);
console.error('Error starting grammar exercise:', error);
}
});
resetBtn.addEventListener('click', () => {
try {
showStatus('🔄 Resetting DRS...', 'loading');
updateDebug('Resetting DRS system');
resetDRSContainer();
hideStatus();
updateDebug('DRS system reset successfully');
} catch (error) {
showStatus(`❌ Reset error: ${error.message}`, 'error');
updateDebug(`Reset error: ${error.message}`);
console.error('Reset error:', error);
}
});
// Event listeners for DRS events
eventBus.on('drs:started', (event) => {
updateDebug(`Exercise started: ${event.data.type} (${event.data.steps} steps)`);
}, 'testPage');
eventBus.on('drs:step-completed', (event) => {
updateDebug(`Step ${event.data.step + 1}/${event.data.total} completed`);
}, 'testPage');
eventBus.on('drs:hint-used', (event) => {
updateDebug(`Hint used for step ${event.data.step + 1}`);
}, 'testPage');
eventBus.on('drs:completed', (event) => {
const stats = event.data.stats;
showStatus(`🎉 Exercise completed! Time: ${Math.round(stats.timeSpent / 1000)}s, Hints: ${stats.userStats.hints}`, 'success');
updateDebug(`Exercise completed - Time: ${Math.round(stats.timeSpent / 1000)}s, Hints: ${stats.userStats.hints}`);
}, 'testPage');
// Register test page with EventBus
eventBus.registerModule({ name: 'testPage' });
// Initial debug update
updateDebug('UnifiedDRS test page loaded and ready');
console.log('🎓 UnifiedDRS Test Page ready!');
</script>
</body>
</html>

26
fix-server.bat Normal file
View File

@ -0,0 +1,26 @@
@echo off
echo 🔧 Fixing server issue...
REM Kill process on port 8080 specifically
echo 🛑 Stopping server on port 8080...
for /f "tokens=5" %%a in ('netstat -aon ^| findstr ":8080 "') do (
echo Killing process %%a
taskkill /F /PID %%a 2>nul
)
REM Kill all Node processes just in case
echo 🛑 Stopping all Node.js processes...
taskkill /F /IM node.exe /T 2>nul
REM Wait a moment
echo ⏳ Waiting...
timeout /t 3 /nobreak >nul
REM Start the correct server
echo 🚀 Starting correct server...
cd /d "%~dp0"
echo Working directory: %CD%
echo Starting: node server.js
node server.js
pause

2339
index.html
View File

File diff suppressed because it is too large Load Diff

31
package-lock.json generated Normal file
View File

@ -0,0 +1,31 @@
{
"name": "class-generator",
"version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "class-generator",
"version": "2.0.0",
"license": "MIT",
"dependencies": {
"dotenv": "^17.2.2"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/dotenv": {
"version": "17.2.2",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
"integrity": "sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==",
"license": "BSD-2-Clause",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://dotenvx.com"
}
}
}
}

5
package.json
View File

@ -20,5 +20,8 @@
"license": "MIT",
"engines": {
"node": ">=14.0.0"
},
"dependencies": {
"dotenv": "^17.2.2"
}
}
}

16
restart-clean.bat Normal file
View File

@ -0,0 +1,16 @@
@echo off
echo 🔄 Restarting Class Generator with clean shutdown...
REM Kill all Node.js processes
echo 🛑 Stopping all Node.js processes...
taskkill /F /IM node.exe /T 2>nul
REM Wait a moment
timeout /t 2 /nobreak >nul
REM Start the server
echo 🚀 Starting fresh server...
cd /d "%~dp0"
node server.js
pause

618
server.js
View File

@ -4,15 +4,16 @@
*/
import { createServer } from 'http';
import { readFile, stat } from 'fs/promises';
import { readFile, writeFile, stat, readdir, mkdir } from 'fs/promises';
import { join, extname } from 'path';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import { existsSync } from 'fs';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const PORT = process.env.PORT || 3000;
const PORT = process.env.PORT || 8080;
const HOST = process.env.HOST || 'localhost';
// MIME types for different file extensions
@ -46,11 +47,55 @@ const server = createServer(async (req, res) => {
console.log(`${new Date().toISOString()} - ${req.method} ${urlPath}`);
// Legacy API endpoint to get all available books (deprecated - use ContentLoader)
if (urlPath === '/api/books') {
console.warn('⚠️ /api/books is deprecated. Use ContentLoader.loadBooks() instead');
return await handleBooksAPI(res);
}
// API endpoint for LLM configuration (IAEngine)
if (urlPath === '/api/llm-config') {
return await handleLLMConfigAPI(req, res);
}
// Progress API endpoints (DRS and Flashcards only)
if (urlPath === '/api/progress/save') {
return await handleProgressSave(req, res);
}
// Data merge endpoint for combining local and external sources
if (urlPath === '/api/progress/merge') {
return await handleProgressMerge(req, res);
}
// Sync status endpoint
if (urlPath === '/api/progress/sync-status') {
return await handleSyncStatus(req, res);
}
// DRS progress load: /api/progress/load/drs/bookId/chapterId
const drsLoadMatch = urlPath.match(/^\/api\/progress\/load\/drs\/([^\/]+)\/([^\/]+)$/);
if (drsLoadMatch) {
const [, bookId, chapterId] = drsLoadMatch;
return await handleProgressLoad(req, res, 'drs', bookId, chapterId);
}
// Flashcards progress load: /api/progress/load/flashcards
if (urlPath === '/api/progress/load/flashcards') {
return await handleProgressLoad(req, res, 'flashcards');
}
// Set CORS headers for all requests
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// Disable caching completely for development
res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
res.setHeader('Pragma', 'no-cache');
res.setHeader('Expires', '0');
res.setHeader('Surrogate-Control', 'no-store');
// Handle preflight requests
if (req.method === 'OPTIONS') {
res.writeHead(200);
@ -90,6 +135,91 @@ const server = createServer(async (req, res) => {
}
});
async function handleBooksAPI(res) {
try {
const booksDir = join(__dirname, 'content', 'books');
const files = await readdir(booksDir);
const jsonFiles = files.filter(file => file.endsWith('.json'));
const books = [];
for (const file of jsonFiles) {
try {
const filePath = join(booksDir, file);
const content = await readFile(filePath, 'utf8');
const data = JSON.parse(content);
books.push({
id: data.id,
name: data.name,
description: data.description,
difficulty: data.difficulty,
language: data.language,
chapters: data.chapters || []
});
} catch (error) {
console.error(`Error reading ${file}:`, error);
}
}
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(books, null, 2));
console.log(` ✅ Served API books list (${books.length} books)`);
} catch (error) {
console.error('Error in books API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to load books' }));
}
}
async function handleChaptersAPI(res, bookId) {
try {
const booksDir = join(__dirname, 'content', 'books');
const bookPath = join(booksDir, `${bookId}.json`);
const content = await readFile(bookPath, 'utf8');
const bookData = JSON.parse(content);
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(bookData.chapters || [], null, 2));
console.log(` ✅ Served API chapters for book ${bookId} (${bookData.chapters?.length || 0} chapters)`);
} catch (error) {
console.error(`Error in chapters API for ${bookId}:`, error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to load chapters' }));
}
}
async function handleChapterContentAPI(res, chapterId) {
try {
const chaptersDir = join(__dirname, 'content', 'chapters');
const chapterPath = join(chaptersDir, `${chapterId}.json`);
const content = await readFile(chapterPath, 'utf8');
const chapterData = JSON.parse(content);
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(chapterData, null, 2));
console.log(` ✅ Served API content for chapter ${chapterId}`);
} catch (error) {
console.error(`Error in chapter content API for ${chapterId}:`, error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to load chapter content' }));
}
}
async function serveFile(filePath, res) {
try {
const ext = extname(filePath).toLowerCase();
@ -99,10 +229,10 @@ async function serveFile(filePath, res) {
res.setHeader('Content-Type', mimeType);
// Set cache headers for static assets
if (['.css', '.js', '.png', '.jpg', '.gif', '.svg', '.ico', '.woff', '.woff2'].includes(ext)) {
if (['.css', '.png', '.jpg', '.gif', '.svg', '.ico', '.woff', '.woff2'].includes(ext)) {
res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour
} else {
res.setHeader('Cache-Control', 'no-cache'); // No cache for HTML and other files
res.setHeader('Cache-Control', 'no-cache'); // No cache for HTML and JS files (development)
}
// Add security headers
@ -163,6 +293,486 @@ function send404(res, message = 'Not Found') {
console.log(` ❌ 404: ${message}`);
}
// Progress storage functions for DRS and Flashcards
async function handleProgressSave(req, res) {
try {
if (req.method !== 'POST') {
res.writeHead(405, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Method not allowed' }));
return;
}
// Read request body
let body = '';
req.on('data', chunk => body += chunk.toString());
req.on('end', async () => {
try {
const { system, bookId, chapterId, progressData } = JSON.parse(body);
// Validate system (only DRS and Flashcards allowed)
if (!['drs', 'flashcards'].includes(system)) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Invalid system. Only "drs" and "flashcards" allowed' }));
return;
}
// Create saves directory if it doesn't exist
const savesDir = join(__dirname, 'saves');
if (!existsSync(savesDir)) {
await mkdir(savesDir, { recursive: true });
}
// Create filename based on system and identifiers
const filename = system === 'drs'
? `${system}-progress-${bookId}-${chapterId}.json`
: `${system}-progress.json`;
const filePath = join(savesDir, filename);
// Add metadata
const saveData = {
...progressData,
system,
bookId: system === 'drs' ? bookId : undefined,
chapterId: system === 'drs' ? chapterId : undefined,
savedAt: new Date().toISOString(),
version: '1.0'
};
await writeFile(filePath, JSON.stringify(saveData, null, 2));
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify({
success: true,
filename,
savedAt: saveData.savedAt
}));
console.log(` ✅ Saved ${system} progress: ${filename}`);
} catch (parseError) {
console.error('Error parsing progress save request:', parseError);
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Invalid JSON data' }));
}
});
} catch (error) {
console.error('Error in progress save API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to save progress' }));
}
}
async function handleProgressLoad(req, res, system, bookId, chapterId) {
try {
if (req.method !== 'GET') {
res.writeHead(405, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Method not allowed' }));
return;
}
// Validate system
if (!['drs', 'flashcards'].includes(system)) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Invalid system' }));
return;
}
const filename = system === 'drs'
? `${system}-progress-${bookId}-${chapterId}.json`
: `${system}-progress.json`;
const filePath = join(__dirname, 'saves', filename);
try {
const content = await readFile(filePath, 'utf8');
const progressData = JSON.parse(content);
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(progressData));
console.log(` ✅ Loaded ${system} progress: ${filename}`);
} catch (fileError) {
// File doesn't exist - return empty progress
const emptyProgress = system === 'drs' ? {
masteredVocabulary: [],
masteredPhrases: [],
masteredGrammar: [],
completed: false,
masteryCount: 0,
system,
bookId,
chapterId
} : {
system: 'flashcards',
progress: {},
stats: {}
};
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(emptyProgress));
console.log(` ℹ️ No saved progress found for ${system}, returning empty`);
}
} catch (error) {
console.error('Error in progress load API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to load progress' }));
}
}
// API handler for LLM configuration
async function handleLLMConfigAPI(req, res) {
try {
// Only allow GET requests
if (req.method !== 'GET') {
res.writeHead(405, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Method not allowed' }));
return;
}
// Load environment variables
const { config } = await import('dotenv');
config();
// Extract only the LLM API keys
const llmConfig = {
OPENAI_API_KEY: process.env.OPENAI_API_KEY,
ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
DEEPSEEK_API_KEY: process.env.DEEPSEEK_API_KEY,
MISTRAL_API_KEY: process.env.MISTRAL_API_KEY,
GEMINI_API_KEY: process.env.GEMINI_API_KEY
};
// Filter out undefined keys
const validKeys = Object.fromEntries(
Object.entries(llmConfig).filter(([key, value]) => value && value.length > 0)
);
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(validKeys));
console.log(` ✅ Served LLM config with ${Object.keys(validKeys).length} API keys`);
} catch (error) {
console.error('Error in LLM config API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to load LLM configuration' }));
}
}
// Data merge handler for combining local and external progress
async function handleProgressMerge(req, res) {
try {
if (req.method !== 'POST') {
res.writeHead(405, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Method not allowed' }));
return;
}
// Read request body
let body = '';
req.on('data', chunk => body += chunk.toString());
req.on('end', async () => {
try {
const { system, bookId, chapterId, localData, externalData, mergeStrategy = 'timestamp' } = JSON.parse(body);
// Validate system
if (!['drs', 'flashcards'].includes(system)) {
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Invalid system. Only "drs" and "flashcards" allowed' }));
return;
}
// Perform data merge
const mergedData = await mergeProgressData(localData, externalData, mergeStrategy);
// Add merge metadata
mergedData.mergeInfo = {
strategy: mergeStrategy,
mergedAt: new Date().toISOString(),
localItems: countProgressItems(localData),
externalItems: countProgressItems(externalData),
totalItems: countProgressItems(mergedData),
conflicts: mergedData.conflicts || []
};
// Save merged data
const savesDir = join(__dirname, 'saves');
if (!existsSync(savesDir)) {
await mkdir(savesDir, { recursive: true });
}
const filename = system === 'drs'
? `${system}-progress-${bookId}-${chapterId}.json`
: `${system}-progress.json`;
const filePath = join(savesDir, filename);
await writeFile(filePath, JSON.stringify(mergedData, null, 2));
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify({
success: true,
mergedData,
mergeInfo: mergedData.mergeInfo
}));
console.log(` ✅ Merged ${system} progress: ${mergedData.mergeInfo.totalItems} total items`);
} catch (parseError) {
console.error('Error parsing progress merge request:', parseError);
res.writeHead(400, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Invalid JSON data' }));
}
});
} catch (error) {
console.error('Error in progress merge API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to merge progress' }));
}
}
// Sync status handler
async function handleSyncStatus(req, res) {
try {
if (req.method !== 'GET') {
res.writeHead(405, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Method not allowed' }));
return;
}
const savesDir = join(__dirname, 'saves');
const syncStatus = {
savesDirectory: savesDir,
lastSync: null,
savedFiles: [],
totalFiles: 0
};
try {
if (existsSync(savesDir)) {
const files = await readdir(savesDir);
const jsonFiles = files.filter(file => file.endsWith('.json'));
syncStatus.totalFiles = jsonFiles.length;
for (const file of jsonFiles) {
try {
const filePath = join(savesDir, file);
const stats = await stat(filePath);
const content = await readFile(filePath, 'utf8');
const data = JSON.parse(content);
syncStatus.savedFiles.push({
filename: file,
lastModified: stats.mtime.toISOString(),
savedAt: data.savedAt || stats.mtime.toISOString(),
system: data.system || 'unknown',
bookId: data.bookId,
chapterId: data.chapterId,
hasTimestamps: hasTimestampData(data),
itemCount: countProgressItems(data)
});
// Update last sync time to most recent file
if (!syncStatus.lastSync || stats.mtime > new Date(syncStatus.lastSync)) {
syncStatus.lastSync = stats.mtime.toISOString();
}
} catch (fileError) {
console.warn(`Error reading file ${file}:`, fileError);
}
}
}
} catch (dirError) {
console.warn('Saves directory not accessible:', dirError);
}
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.writeHead(200);
res.end(JSON.stringify(syncStatus));
console.log(` ✅ Sync status: ${syncStatus.totalFiles} files`);
} catch (error) {
console.error('Error in sync status API:', error);
res.writeHead(500, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ error: 'Failed to get sync status' }));
}
}
// Data merge utilities
async function mergeProgressData(localData, externalData, strategy = 'timestamp') {
const merged = {
masteredVocabulary: [],
masteredPhrases: [],
masteredGrammar: [],
completed: false,
masteryCount: 0,
conflicts: []
};
// Copy metadata from most recent source
const localTimestamp = localData?.savedAt || localData?.lastModified || '1970-01-01T00:00:00.000Z';
const externalTimestamp = externalData?.savedAt || externalData?.lastModified || '1970-01-01T00:00:00.000Z';
const useExternal = new Date(externalTimestamp) > new Date(localTimestamp);
const primarySource = useExternal ? externalData : localData;
const secondarySource = useExternal ? localData : externalData;
// Copy basic properties
merged.system = primarySource.system || localData.system || 'drs';
merged.bookId = primarySource.bookId || localData.bookId;
merged.chapterId = primarySource.chapterId || localData.chapterId;
merged.completed = primarySource.completed || secondarySource.completed || false;
merged.savedAt = new Date().toISOString();
// Merge each category
const categories = ['masteredVocabulary', 'masteredPhrases', 'masteredGrammar'];
for (const category of categories) {
const localItems = localData[category] || [];
const externalItems = externalData[category] || [];
const mergeResult = mergeItemArrays(localItems, externalItems, strategy);
merged[category] = mergeResult.items;
merged.conflicts.push(...mergeResult.conflicts.map(c => ({ ...c, category })));
}
// Calculate mastery count (max of both sources plus any new merged items)
merged.masteryCount = Math.max(
localData.masteryCount || 0,
externalData.masteryCount || 0,
merged.masteredVocabulary.length + merged.masteredPhrases.length + merged.masteredGrammar.length
);
return merged;
}
function mergeItemArrays(localItems, externalItems, strategy) {
const result = {
items: [],
conflicts: []
};
const itemMap = new Map();
// Add all items to map, handling conflicts
const addToMap = (items, source) => {
items.forEach(item => {
const itemKey = typeof item === 'string' ? item : item.item;
const itemData = typeof item === 'string' ? { item, masteredAt: '1970-01-01T00:00:00.000Z', source } : { ...item, source };
if (itemMap.has(itemKey)) {
const existing = itemMap.get(itemKey);
const conflict = {
item: itemKey,
local: source === 'local' ? itemData : existing,
external: source === 'external' ? itemData : existing,
resolution: 'pending'
};
// Resolve conflict based on strategy
let resolvedItem;
switch (strategy) {
case 'timestamp':
const existingTime = new Date(existing.masteredAt || existing.lastReviewAt || '1970-01-01');
const newTime = new Date(itemData.masteredAt || itemData.lastReviewAt || '1970-01-01');
if (newTime > existingTime) {
resolvedItem = { ...itemData, attempts: (existing.attempts || 1) + (itemData.attempts || 1) };
conflict.resolution = `newer_timestamp_from_${source}`;
} else {
resolvedItem = { ...existing, attempts: (existing.attempts || 1) + (itemData.attempts || 1) };
conflict.resolution = 'kept_existing_newer_timestamp';
}
break;
case 'attempts':
resolvedItem = {
...existing,
attempts: (existing.attempts || 1) + (itemData.attempts || 1),
lastReviewAt: new Date().toISOString()
};
conflict.resolution = 'merged_attempts';
break;
case 'prefer_local':
resolvedItem = source === 'local' ? itemData : existing;
conflict.resolution = 'preferred_local';
break;
case 'prefer_external':
resolvedItem = source === 'external' ? itemData : existing;
conflict.resolution = 'preferred_external';
break;
default:
resolvedItem = existing;
conflict.resolution = 'kept_existing_default';
}
itemMap.set(itemKey, resolvedItem);
result.conflicts.push(conflict);
} else {
itemMap.set(itemKey, itemData);
}
});
};
// Process both arrays
addToMap(localItems, 'local');
addToMap(externalItems, 'external');
// Convert map back to array, removing source metadata
result.items = Array.from(itemMap.values()).map(item => {
const { source, ...cleanItem } = item;
return cleanItem;
});
return result;
}
function countProgressItems(data) {
if (!data) return 0;
const vocab = data.masteredVocabulary?.length || 0;
const phrases = data.masteredPhrases?.length || 0;
const grammar = data.masteredGrammar?.length || 0;
return vocab + phrases + grammar;
}
function hasTimestampData(data) {
if (!data) return false;
const checkArray = (arr) => {
return arr && arr.length > 0 && arr.some(item =>
typeof item === 'object' && (item.masteredAt || item.lastReviewAt)
);
};
return checkArray(data.masteredVocabulary) ||
checkArray(data.masteredPhrases) ||
checkArray(data.masteredGrammar);
}
// Start server
server.listen(PORT, HOST, () => {
console.log('\n🚀 Class Generator Development Server');

109
src/Application.js
View File

@ -17,6 +17,9 @@ class Application {
this._moduleLoader = new ModuleLoader(this._eventBus);
this._router = null;
// Register core modules immediately for early access
this._registerCoreModules();
// Configuration
this._config = {
autoStart: config.autoStart !== false, // Default true
@ -139,6 +142,15 @@ class Application {
};
}
/**
* Get a loaded module by name
* @param {string} moduleName - Name of the module to get
* @returns {Object|null} Module instance or null if not found
*/
getModule(moduleName) {
return this._moduleLoader ? this._moduleLoader.getModule(moduleName) : null;
}
// Private methods
async _autoStart() {
// Wait for DOM to be ready
@ -150,6 +162,27 @@ class Application {
}
}
_registerCoreModules() {
// Register bootstrap module to allow HTML script to use EventBus
this._eventBus.registerModule({ name: 'Bootstrap' });
// Register Application itself as a module
this._eventBus.registerModule({ name: 'Application' });
// Register ModuleLoader as a module
this._eventBus.registerModule({ name: 'ModuleLoader' });
// Register core dependencies by storing them directly in ModuleLoader
// This allows other modules to depend on 'eventBus'
this._moduleLoader._loadedModules.set('eventBus', this._eventBus);
this._moduleLoader._modules.set('eventBus', {
name: 'eventBus',
instance: this._eventBus,
loaded: true,
initialized: true
});
}
async _initializeCore() {
// Register router as a module
this._moduleLoader.register('router', Router, ['eventBus']);
@ -166,10 +199,14 @@ class Application {
}
async _loadModules() {
console.log(`🔄 Loading ${this._config.modules.length} modules...`);
for (const moduleConfig of this._config.modules) {
try {
const { name, path, dependencies = [], config = {} } = moduleConfig;
console.log(`📦 Loading module: ${name} from ${path}`);
// Dynamically import module
const moduleModule = await import(path);
const ModuleClass = moduleModule.default;
@ -178,9 +215,7 @@ class Application {
this._moduleLoader.register(name, ModuleClass, dependencies);
await this._moduleLoader.loadAndInitialize(name, config);
if (this._config.enableDebug) {
console.log(`📦 Module ${name} loaded successfully`);
}
console.log(`✅ Module ${name} loaded and initialized successfully`);
} catch (error) {
console.error(`❌ Failed to load module ${moduleConfig.name}:`, error);
@ -195,10 +230,17 @@ class Application {
}
async _startRouting() {
// Register default routes
// Register generic routes with dynamic loading
this._router.register('/', this._handleHomeRoute.bind(this));
this._router.register('/games', this._handleGamesRoute.bind(this));
this._router.register('/play', this._handlePlayRoute.bind(this));
this._router.register('/books', this._handleBooksRoute.bind(this));
this._router.register('/chapters', this._handleChaptersRoute.bind(this), { exact: false });
this._router.register('/games', this._handleGamesRoute.bind(this), { exact: false });
this._router.register('/dynamic-revision', this._handleDynamicRevisionRoute.bind(this));
this._router.register('/settings', this._handleSettingsRoute.bind(this));
// Now that routes are registered, handle the current route
console.log('🛣️ Routes registered, handling initial route...');
this._router._handleCurrentRoute();
if (this._config.enableDebug) {
console.log('🛣️ Routing system started');
@ -235,12 +277,47 @@ class Application {
this._eventBus.emit('navigation:home', { path, state }, 'Application');
}
async _handleGamesRoute(path, state) {
this._eventBus.emit('navigation:games', { path, state }, 'Application');
async _handleBooksRoute(path, state) {
this._eventBus.emit('navigation:books', { path, state }, 'Application');
}
async _handlePlayRoute(path, state) {
this._eventBus.emit('navigation:play', { path, state }, 'Application');
async _handleChaptersRoute(path, state) {
this._eventBus.emit('navigation:chapters', { path, state }, 'Application');
}
async _handleGamesRoute(path, state) {
this._eventBus.emit('navigation:games', { path, state }, 'Application');
// Simple approach: Force re-render by emitting the chapter navigation event
console.log('🔄 Games route - path:', path, 'state:', state);
// Extract chapter ID from path or use current one
const pathParts = path.split('/');
let chapterId = pathParts[2] || window.currentChapterId || 'sbs';
console.log('🔄 Games route - using chapterId:', chapterId);
// Make sure currentChapterId is set
if (!window.currentChapterId) {
window.currentChapterId = chapterId;
}
// Force navigation to the chapter games - this will trigger the content loading
setTimeout(() => {
console.log('🔄 Games route - forcing navigation event');
this._eventBus.emit('navigation:games', {
path: `/games/${chapterId}`,
data: { path: `/games/${chapterId}` }
}, 'Application');
}, 100);
}
async _handleDynamicRevisionRoute(path, state) {
this._eventBus.emit('navigation:dynamic-revision', { path, state }, 'Application');
}
async _handleSettingsRoute(path, state) {
this._eventBus.emit('navigation:settings', { path, state }, 'Application');
}
}
@ -248,9 +325,15 @@ class Application {
const app = new Application({
enableDebug: true,
modules: [
// Modules will be registered here
// { name: 'ui', path: './components/UI.js', dependencies: ['eventBus'] },
// { name: 'gameEngine', path: './games/GameEngine.js', dependencies: ['eventBus', 'ui'] }
// Core system modules
{ name: 'contentLoader', path: './core/ContentLoader.js', dependencies: ['eventBus'] },
{ name: 'gameLoader', path: './core/GameLoader.js', dependencies: ['eventBus'] },
{ name: 'intelligentSequencer', path: './core/IntelligentSequencer.js', dependencies: ['eventBus'] },
// DRS system
{ name: 'unifiedDRS', path: './DRS/UnifiedDRS.js', dependencies: ['eventBus', 'contentLoader'] },
{ name: 'smartPreviewOrchestrator', path: './DRS/SmartPreviewOrchestrator.js', dependencies: ['eventBus', 'contentLoader'] },
// UI components
{ name: 'settingsDebug', path: './components/SettingsDebug.js', dependencies: ['eventBus', 'router'] }
]
});

748
src/DRS/SmartPreviewOrchestrator.js Normal file
View File

@ -0,0 +1,748 @@
/**
* SmartPreviewOrchestrator - Main controller for Dynamic Revision System
* Manages dynamic loading/unloading of exercise modules and coordinates shared services
*/
import Module from '../core/Module.js';
const privateData = new WeakMap();
class SmartPreviewOrchestrator extends Module {
constructor(name, dependencies, config) {
super(name, ['eventBus', 'contentLoader']);
// Validate dependencies
if (!dependencies.eventBus) {
throw new Error('SmartPreviewOrchestrator requires EventBus dependency');
}
if (!dependencies.contentLoader) {
throw new Error('SmartPreviewOrchestrator requires ContentLoader dependency');
}
// Store dependencies and configuration
this._eventBus = dependencies.eventBus;
this._contentLoader = dependencies.contentLoader;
this._config = config || {};
// Initialize private data
privateData.set(this, {
loadedModules: new Map(),
availableModules: new Map(),
currentModule: null,
sharedServices: {
llmValidator: null,
prerequisiteEngine: null,
contextMemory: null,
aiReportInterface: null
},
sessionState: {
currentChapter: null,
chapterContent: null,
masteredVocabulary: new Set(),
masteredPhrases: new Set(),
masteredGrammar: new Set(),
sessionProgress: {},
exerciseSequence: [],
sequenceIndex: 0
},
moduleRegistry: {
'vocabulary': './exercise-modules/VocabularyModule.js',
'phrase': './exercise-modules/PhraseModule.js',
'text': './exercise-modules/TextModule.js',
'audio': './exercise-modules/AudioModule.js',
'image': './exercise-modules/ImageModule.js',
'grammar': './exercise-modules/GrammarModule.js'
}
});
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
try {
console.log('🎯 Initializing Smart Preview Orchestrator...');
// Initialize shared services
await this._initializeSharedServices();
// Set up event listeners
this._setupEventListeners();
// Register available module types
this._registerModuleTypes();
this._setInitialized();
console.log('✅ Smart Preview Orchestrator initialized successfully');
} catch (error) {
console.error('❌ SmartPreviewOrchestrator initialization failed:', error);
throw error;
}
}
async destroy() {
this._validateNotDestroyed();
try {
console.log('🧹 Cleaning up Smart Preview Orchestrator...');
// Unload all loaded modules
await this._unloadAllModules();
// Cleanup shared services
await this._cleanupSharedServices();
// Remove event listeners
this._eventBus.off('drs:startSession', this._handleStartSession, this.name);
this._eventBus.off('drs:switchModule', this._handleSwitchModule, this.name);
this._eventBus.off('drs:updateProgress', this._handleUpdateProgress, this.name);
this._setDestroyed();
console.log('✅ Smart Preview Orchestrator destroyed successfully');
} catch (error) {
console.error('❌ SmartPreviewOrchestrator cleanup failed:', error);
throw error;
}
}
// Public API Methods
/**
* Start a new revision session for a chapter
* @param {string} bookId - Book identifier
* @param {string} chapterId - Chapter identifier
* @returns {Promise<boolean>} - Success status
*/
async startRevisionSession(bookId, chapterId) {
this._validateInitialized();
try {
console.log(`🚀 Starting revision session: ${bookId} - ${chapterId}`);
// Load chapter content
const chapterContent = await this._contentLoader.loadContent(chapterId);
const data = privateData.get(this);
data.sessionState.currentChapter = { bookId, chapterId };
data.sessionState.chapterContent = chapterContent;
// Load existing progress from files
if (window.getChapterProgress) {
try {
const savedProgress = await window.getChapterProgress(bookId, chapterId);
// Populate session state with saved progress (handle both old and new format)
if (savedProgress.masteredVocabulary) {
const vocabItems = savedProgress.masteredVocabulary.map(entry => {
return typeof entry === 'string' ? entry : entry.item;
});
data.sessionState.masteredVocabulary = new Set(vocabItems);
}
if (savedProgress.masteredPhrases) {
const phraseItems = savedProgress.masteredPhrases.map(entry => {
return typeof entry === 'string' ? entry : entry.item;
});
data.sessionState.masteredPhrases = new Set(phraseItems);
}
if (savedProgress.masteredGrammar) {
const grammarItems = savedProgress.masteredGrammar.map(entry => {
return typeof entry === 'string' ? entry : entry.item;
});
data.sessionState.masteredGrammar = new Set(grammarItems);
}
console.log(`📁 Loaded existing progress: ${savedProgress.masteredVocabulary.length} vocab, ${savedProgress.masteredPhrases.length} phrases, mastery count: ${savedProgress.masteryCount}`);
} catch (error) {
console.warn('Failed to load existing progress:', error);
}
}
// Initialize prerequisites
await this._analyzePrerequisites(chapterContent);
// Generate exercise sequence
await this._generateExerciseSequence();
// Start AI reporting session
if (data.sharedServices.llmValidator && data.sharedServices.aiReportInterface) {
const sessionId = data.sharedServices.llmValidator.startReportSession({
bookId,
chapterId,
difficulty: this._config.difficulty || 'medium',
exerciseTypes: Array.from(data.availableModules.keys()),
totalExercises: data.sessionState.exerciseSequence.length
});
// Notify the report interface
data.sharedServices.aiReportInterface.onSessionStart({
bookId,
chapterId,
sessionId
});
console.log(`📊 Started AI report session: ${sessionId}`);
}
// Start with first available exercise
await this._startNextExercise();
// Emit session started event
this._eventBus.emit('drs:sessionStarted', {
bookId,
chapterId,
totalExercises: data.sessionState.exerciseSequence.length,
availableModules: Array.from(data.availableModules.keys())
}, this.name);
return true;
} catch (error) {
console.error('❌ Failed to start revision session:', error);
this._eventBus.emit('drs:sessionError', { error: error.message }, this.name);
return false;
}
}
/**
* Get available exercise modules based on current prerequisites
* @returns {Array<string>} - Available module names
*/
getAvailableModules() {
this._validateInitialized();
const data = privateData.get(this);
return Array.from(data.availableModules.keys());
}
/**
* Get shared services for external access
* @returns {Object} - Shared services
*/
getSharedServices() {
this._validateInitialized();
const data = privateData.get(this);
return data.sharedServices;
}
/**
* Switch to a different exercise module
* @param {string} moduleType - Type of module to switch to
* @returns {Promise<boolean>} - Success status
*/
async switchToModule(moduleType) {
this._validateInitialized();
try {
const data = privateData.get(this);
if (!data.availableModules.has(moduleType)) {
throw new Error(`Module type ${moduleType} is not available`);
}
// Unload current module
if (data.currentModule) {
await this._unloadModule(data.currentModule);
}
// Load new module
const module = await this._loadModule(moduleType);
data.currentModule = moduleType;
// Present exercise
const exerciseData = await this._getExerciseData(moduleType);
const container = document.getElementById('drs-exercise-container');
await module.present(container, exerciseData);
this._eventBus.emit('drs:moduleActivated', { moduleType, exerciseData }, this.name);
return true;
} catch (error) {
console.error(`❌ Failed to switch to module ${moduleType}:`, error);
return false;
}
}
/**
* Get current session progress
* @returns {Object} - Progress information
*/
getSessionProgress() {
this._validateInitialized();
const data = privateData.get(this);
const state = data.sessionState;
return {
currentChapter: state.currentChapter,
masteredVocabulary: state.masteredVocabulary.size,
masteredPhrases: state.masteredPhrases.size,
masteredGrammar: state.masteredGrammar.size,
completedExercises: state.sequenceIndex,
totalExercises: state.exerciseSequence.length,
progressPercentage: Math.round((state.sequenceIndex / state.exerciseSequence.length) * 100)
};
}
// Private Methods
async _initializeSharedServices() {
console.log('🔧 Initializing shared services...');
const data = privateData.get(this);
try {
// Initialize LLMValidator (mock for now)
const { default: LLMValidator } = await import('./services/LLMValidator.js');
data.sharedServices.llmValidator = new LLMValidator(this._config.llm || {});
// Initialize AIReportInterface
const { default: AIReportInterface } = await import('../components/AIReportInterface.js');
data.sharedServices.aiReportInterface = new AIReportInterface(
data.sharedServices.llmValidator,
this._config.aiReporting || {}
);
// Initialize PrerequisiteEngine
const { default: PrerequisiteEngine } = await import('./services/PrerequisiteEngine.js');
data.sharedServices.prerequisiteEngine = new PrerequisiteEngine();
// Initialize ContextMemory
const { default: ContextMemory } = await import('./services/ContextMemory.js');
data.sharedServices.contextMemory = new ContextMemory();
console.log('✅ Shared services initialized');
} catch (error) {
console.error('❌ Failed to initialize shared services:', error);
throw error;
}
}
async _cleanupSharedServices() {
const data = privateData.get(this);
// Cleanup services if they have cleanup methods
Object.values(data.sharedServices).forEach(service => {
if (service && typeof service.cleanup === 'function') {
service.cleanup();
}
});
}
_setupEventListeners() {
this._eventBus.on('drs:startSession', this._handleStartSession.bind(this), this.name);
this._eventBus.on('drs:switchModule', this._handleSwitchModule.bind(this), this.name);
this._eventBus.on('drs:updateProgress', this._handleUpdateProgress.bind(this), this.name);
this._eventBus.on('drs:exerciseCompleted', this._handleExerciseCompleted.bind(this), this.name);
}
_registerModuleTypes() {
const data = privateData.get(this);
// Register all available module types
Object.keys(data.moduleRegistry).forEach(moduleType => {
data.availableModules.set(moduleType, {
path: data.moduleRegistry[moduleType],
loaded: false,
instance: null
});
});
}
async _loadModule(moduleType) {
const data = privateData.get(this);
const moduleInfo = data.availableModules.get(moduleType);
if (!moduleInfo) {
throw new Error(`Unknown module type: ${moduleType}`);
}
if (data.loadedModules.has(moduleType)) {
return data.loadedModules.get(moduleType);
}
try {
console.log(`📦 Loading module: ${moduleType}`);
// Dynamic import of module
const modulePath = moduleInfo.path.startsWith('./') ?
moduleInfo.path : `./${moduleInfo.path}`;
const { default: ModuleClass } = await import(modulePath);
// Create instance with shared services
const moduleInstance = new ModuleClass(
this, // orchestrator reference
data.sharedServices.llmValidator,
data.sharedServices.prerequisiteEngine,
data.sharedServices.contextMemory
);
// Initialize module
await moduleInstance.init();
data.loadedModules.set(moduleType, moduleInstance);
moduleInfo.loaded = true;
moduleInfo.instance = moduleInstance;
console.log(`✅ Module loaded: ${moduleType}`);
return moduleInstance;
} catch (error) {
console.error(`❌ Failed to load module ${moduleType}:`, error);
throw error;
}
}
async _unloadModule(moduleType) {
const data = privateData.get(this);
const module = data.loadedModules.get(moduleType);
if (module) {
try {
await module.cleanup();
data.loadedModules.delete(moduleType);
const moduleInfo = data.availableModules.get(moduleType);
if (moduleInfo) {
moduleInfo.loaded = false;
moduleInfo.instance = null;
}
console.log(`📤 Module unloaded: ${moduleType}`);
} catch (error) {
console.error(`❌ Error unloading module ${moduleType}:`, error);
}
}
}
async _unloadAllModules() {
const data = privateData.get(this);
const moduleTypes = Array.from(data.loadedModules.keys());
for (const moduleType of moduleTypes) {
await this._unloadModule(moduleType);
}
}
async _analyzePrerequisites(chapterContent) {
const data = privateData.get(this);
// Use PrerequisiteEngine to analyze chapter content
const prerequisites = data.sharedServices.prerequisiteEngine.analyzeChapter(chapterContent);
console.log('📊 Prerequisites analyzed:', prerequisites);
}
async _generateExerciseSequence() {
const data = privateData.get(this);
// Generate exercise sequence based on content and mastery
const chapterContent = data.sessionState.chapterContent;
const masteredVocab = data.sessionState.masteredVocabulary;
const masteredPhrases = data.sessionState.masteredPhrases;
// Filter content to focus on non-mastered items
const allVocab = Object.keys(chapterContent.vocabulary || {});
const allPhrases = Object.keys(chapterContent.phrases || {});
const unmasteredVocab = allVocab.filter(word => !masteredVocab.has(word));
const unmasteredPhrases = allPhrases.filter(phrase => !masteredPhrases.has(phrase));
console.log(`📊 Content analysis:`);
console.log(` 📚 Vocabulary: ${unmasteredVocab.length}/${allVocab.length} unmastered`);
console.log(` 💬 Phrases: ${unmasteredPhrases.length}/${allPhrases.length} unmastered`);
const sequence = [];
// Create vocabulary groups (focus on unmastered, but include some mastered for review)
const vocabGroupSize = 5;
const vocabGroups = Math.ceil(unmasteredVocab.length / vocabGroupSize);
for (let i = 0; i < vocabGroups; i++) {
sequence.push({
type: 'vocabulary',
subtype: 'group',
groupSize: vocabGroupSize,
groupIndex: i,
adaptive: true // Mark as adaptive sequence
});
}
// Add unmastered phrases (prioritize new content)
unmasteredPhrases.forEach((phrase, index) => {
if (index < 10) { // Limit to 10 phrases per session
sequence.push({
type: 'phrase',
subtype: 'individual',
index: allPhrases.indexOf(phrase),
adaptive: true
});
}
});
// Add some review items if we have extra capacity
if (sequence.length < 15) {
const reviewVocab = [...masteredVocab].slice(0, 3);
const reviewPhrases = [...masteredPhrases].slice(0, 2);
reviewVocab.forEach(word => {
sequence.push({
type: 'vocabulary',
subtype: 'review',
word: word,
adaptive: true
});
});
reviewPhrases.forEach(phrase => {
sequence.push({
type: 'phrase',
subtype: 'review',
index: allPhrases.indexOf(phrase),
adaptive: true
});
});
}
// Shuffle for variety
for (let i = sequence.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[sequence[i], sequence[j]] = [sequence[j], sequence[i]];
}
const adaptiveInfo = unmasteredVocab.length === 0 && unmasteredPhrases.length === 0 ?
' (Review mode - all content mastered!)' :
' (Adaptive - focusing on unmastered content)';
console.log(`🧠 Generated adaptive sequence: ${sequence.length} exercises${adaptiveInfo}`);
data.sessionState.exerciseSequence = sequence;
data.sessionState.sequenceIndex = 0;
}
async _startNextExercise() {
const data = privateData.get(this);
const sequence = data.sessionState.exerciseSequence;
const currentIndex = data.sessionState.sequenceIndex;
if (currentIndex >= sequence.length) {
// End AI reporting session
if (data.sharedServices.llmValidator && data.sharedServices.aiReportInterface) {
const sessionStats = this.getSessionProgress();
// End the report session
data.sharedServices.llmValidator.endReportSession();
// Notify the report interface
data.sharedServices.aiReportInterface.onSessionEnd({
exerciseCount: sequence.length,
averageScore: sessionStats.averageScore || 0,
completedAt: new Date()
});
console.log('📊 Ended AI report session');
}
// Session complete - mark as completed and save
const currentChapter = data.sessionState.currentChapter;
if (currentChapter && window.markChapterCompleted) {
try {
await window.markChapterCompleted(currentChapter.bookId, currentChapter.chapterId);
console.log(`🏆 Chapter marked as completed: ${currentChapter.bookId}/${currentChapter.chapterId}`);
} catch (error) {
console.warn('Failed to mark chapter as completed:', error);
}
}
this._eventBus.emit('drs:sessionComplete', this.getSessionProgress(), this.name);
return;
}
const exercise = sequence[currentIndex];
await this.switchToModule(exercise.type);
}
async _getExerciseData(moduleType) {
const data = privateData.get(this);
const chapterContent = data.sessionState.chapterContent;
const sequence = data.sessionState.exerciseSequence;
const currentExercise = sequence[data.sessionState.sequenceIndex];
// Generate exercise data based on module type and current exercise parameters
switch (moduleType) {
case 'vocabulary':
return this._generateVocabularyExerciseData(chapterContent, currentExercise);
case 'phrase':
return this._generatePhraseExerciseData(chapterContent, currentExercise);
case 'text':
return this._generateTextExerciseData(chapterContent, currentExercise);
default:
return { type: moduleType, content: chapterContent };
}
}
_generateVocabularyExerciseData(chapterContent, exercise) {
const vocabulary = chapterContent.vocabulary || {};
const vocabArray = Object.entries(vocabulary);
const startIndex = exercise.groupIndex * exercise.groupSize;
const endIndex = Math.min(startIndex + exercise.groupSize, vocabArray.length);
const vocabGroup = vocabArray.slice(startIndex, endIndex);
return {
type: 'vocabulary',
subtype: exercise.subtype,
groupIndex: exercise.groupIndex,
vocabulary: vocabGroup.map(([word, data]) => ({
word,
translation: data.user_language,
pronunciation: data.pronunciation,
type: data.type
}))
};
}
_generatePhraseExerciseData(chapterContent, exercise) {
const phrases = chapterContent.phrases || {};
const phraseEntries = Object.entries(phrases);
const phraseIndex = exercise.index || 0;
// Check if phrase exists at this index
if (phraseIndex >= phraseEntries.length) {
console.warn(`⚠️ Phrase at index ${phraseIndex} not found (total: ${phraseEntries.length})`);
return null;
}
const [phraseText, phraseData] = phraseEntries[phraseIndex];
// Create phrase object for compatibility
const phrase = {
id: `phrase_${phraseIndex}`,
english: phraseText,
text: phraseText,
translation: phraseData.user_language,
user_language: phraseData.user_language,
pronunciation: phraseData.pronunciation,
context: phraseData.context || 'general',
...phraseData
};
// Verify prerequisites for this phrase
const data = privateData.get(this);
const unlockStatus = data.sharedServices.prerequisiteEngine.canUnlock('phrase', phrase);
return {
type: 'phrase',
subtype: exercise.subtype,
phrase: phrase,
phraseIndex: phraseIndex,
totalPhrases: phraseEntries.length,
unlockStatus: unlockStatus,
chapterContent: chapterContent, // For language detection
metadata: {
userLanguage: chapterContent.metadata?.userLanguage || 'English',
targetLanguage: chapterContent.metadata?.targetLanguage || 'French'
}
};
}
_generateTextExerciseData(chapterContent, exercise) {
const texts = chapterContent.texts || [];
const textIndex = exercise.textIndex || 0;
const text = texts[textIndex];
return {
type: 'text',
subtype: exercise.subtype,
text,
sentenceIndex: exercise.sentenceIndex || 0
};
}
// Event Handlers
async _handleStartSession(event) {
const { bookId, chapterId } = event.data;
await this.startRevisionSession(bookId, chapterId);
}
async _handleSwitchModule(event) {
const { moduleType } = event.data;
await this.switchToModule(moduleType);
}
async _handleUpdateProgress(event) {
const data = privateData.get(this);
const { type, item, mastered } = event.data;
const currentChapter = data.sessionState.currentChapter;
if (type === 'vocabulary' && mastered) {
data.sessionState.masteredVocabulary.add(item);
// Save to persistent storage with metadata
if (currentChapter && window.addMasteredItem) {
try {
const metadata = {
exerciseType: 'vocabulary',
sessionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
moduleType: 'VocabularyModule',
sequenceIndex: data.sessionState.sequenceIndex
};
await window.addMasteredItem(currentChapter.bookId, currentChapter.chapterId, 'vocabulary', item, metadata);
} catch (error) {
console.warn('Failed to save vocabulary progress:', error);
}
}
} else if (type === 'phrase' && mastered) {
data.sessionState.masteredPhrases.add(item);
// Save to persistent storage with metadata
if (currentChapter && window.addMasteredItem) {
try {
const metadata = {
exerciseType: 'phrase',
sessionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
moduleType: 'PhraseModule',
sequenceIndex: data.sessionState.sequenceIndex,
aiValidated: true
};
await window.addMasteredItem(currentChapter.bookId, currentChapter.chapterId, 'phrases', item, metadata);
} catch (error) {
console.warn('Failed to save phrase progress:', error);
}
}
} else if (type === 'grammar' && mastered) {
data.sessionState.masteredGrammar.add(item);
// Save to persistent storage with metadata
if (currentChapter && window.addMasteredItem) {
try {
const metadata = {
exerciseType: 'grammar',
sessionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
moduleType: 'GrammarModule',
sequenceIndex: data.sessionState.sequenceIndex
};
await window.addMasteredItem(currentChapter.bookId, currentChapter.chapterId, 'grammar', item, metadata);
} catch (error) {
console.warn('Failed to save grammar progress:', error);
}
}
}
this._eventBus.emit('drs:progressUpdated', this.getSessionProgress(), this.name);
}
async _handleExerciseCompleted(event) {
const data = privateData.get(this);
data.sessionState.sequenceIndex++;
// Move to next exercise
await this._startNextExercise();
}
}
export default SmartPreviewOrchestrator;

690
src/DRS/UnifiedDRS.js Normal file
View File

@ -0,0 +1,690 @@
/**
* UnifiedDRS - Modern DRS implementation using extracted UI components
* Replaces individual DRS modules with a unified, component-based approach
*/
import Module from '../core/Module.js';
import componentRegistry from '../components/ComponentRegistry.js';
class UnifiedDRS extends Module {
constructor(name, dependencies, config) {
super(name, ['eventBus', 'contentLoader']);
// Validate dependencies
if (!dependencies.eventBus) {
throw new Error('UnifiedDRS requires EventBus dependency');
}
if (!dependencies.contentLoader) {
throw new Error('UnifiedDRS requires ContentLoader dependency');
}
this._eventBus = dependencies.eventBus;
this._contentLoader = dependencies.contentLoader;
this._config = {
exerciseTypes: ['text', 'audio', 'image', 'grammar'],
defaultDifficulty: 'medium',
showProgress: true,
showHints: true,
autoNext: false,
...config
};
// UI state
this._currentExercise = null;
this._currentStep = 0;
this._totalSteps = 0;
this._userProgress = {
correct: 0,
total: 0,
hints: 0,
timeSpent: 0
};
// Component instances
this._components = {
mainCard: null,
progressBar: null,
nextButton: null,
hintButton: null,
hintPanel: null,
resultPanel: null
};
// Container and timing
this._container = null;
this._isActive = false;
this._startTime = null;
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
console.log('🎓 Initializing Unified DRS...');
// Initialize component registry
await componentRegistry.init();
// Set up event listeners
this._eventBus.on('drs:start', this._handleStart.bind(this), this.name);
this._eventBus.on('drs:next', this._handleNext.bind(this), this.name);
this._eventBus.on('drs:hint', this._handleHint.bind(this), this.name);
this._eventBus.on('drs:submit', this._handleSubmit.bind(this), this.name);
this._eventBus.on('content:loaded', this._handleContentLoaded.bind(this), this.name);
this._setInitialized();
console.log('✅ Unified DRS initialized');
}
async destroy() {
this._validateNotDestroyed();
console.log('🧹 Destroying Unified DRS...');
// Clean up UI
this._cleanupUI();
// Clean up components
Object.values(this._components).forEach(component => {
if (component && componentRegistry) {
componentRegistry.destroy(component);
}
});
this._setDestroyed();
console.log('✅ Unified DRS destroyed');
}
// Public API
/**
* Start a new exercise session
* @param {HTMLElement} container - Container element
* @param {Object} exerciseConfig - Exercise configuration
*/
async start(container, exerciseConfig = {}) {
this._validateInitialized();
if (!container) {
throw new Error('Container element is required');
}
console.log('🎯 Starting Unified DRS exercise...');
this._container = container;
this._currentStep = 0;
this._totalSteps = 0;
this._userProgress = { correct: 0, total: 0, hints: 0, timeSpent: 0 };
this._isActive = true;
// Load exercise content
const exerciseType = exerciseConfig.type || this._config.exerciseTypes[0];
const content = await this._loadExerciseContent(exerciseType, exerciseConfig);
if (!content) {
throw new Error(`Failed to load exercise content for type: ${exerciseType}`);
}
this._currentExercise = content;
this._totalSteps = content.steps ? content.steps.length : 1;
// Create UI
await this._createUI();
// Start first step
this._showCurrentStep();
// Start timing
this._startTime = Date.now();
// Emit started event
this._eventBus.emit('drs:started', {
type: exerciseType,
steps: this._totalSteps,
config: exerciseConfig
}, this.name);
console.log(`✅ Exercise started: ${exerciseType} (${this._totalSteps} steps)`);
}
/**
* Get current progress
*/
getProgress() {
return {
currentStep: this._currentStep + 1,
totalSteps: this._totalSteps,
percentage: this._totalSteps > 0 ? Math.round(((this._currentStep + 1) / this._totalSteps) * 100) : 0,
userStats: { ...this._userProgress },
timeSpent: this._startTime ? Date.now() - this._startTime : 0
};
}
/**
* Check if exercise is currently active
*/
isActive() {
return this._isActive;
}
// Private methods
/**
* Load exercise content based on type
*/
async _loadExerciseContent(type, config) {
try {
console.log(`📚 Loading ${type} exercise content...`);
// Request content from ContentLoader
const contentRequest = {
type: 'exercise',
subtype: type,
difficulty: config.difficulty || this._config.defaultDifficulty,
bookId: config.bookId,
chapterId: config.chapterId,
...config
};
console.log('📋 UnifiedDRS content request:', contentRequest);
const content = await this._contentLoader.loadExercise(contentRequest);
console.log(`✅ UnifiedDRS content loaded:`, {
title: content.title,
stepsCount: content.steps ? content.steps.length : 0,
hasSteps: !!content.steps,
contentKeys: Object.keys(content),
firstStep: content.steps ? content.steps[0] : null
});
return content;
} catch (error) {
console.error(`❌ Failed to load ${type} exercise:`, error);
return null;
}
}
/**
* Create the main UI using components
*/
async _createUI() {
if (!this._container) return;
// Clear container
this._container.innerHTML = '';
// Create main exercise card
this._components.mainCard = componentRegistry.create('Card', {
title: this._currentExercise.title || 'Exercise',
type: 'exercise',
className: 'drs-main-card'
});
// Create progress bar if enabled
if (this._config.showProgress) {
this._components.progressBar = componentRegistry.create('ProgressBar', {
value: 0,
max: this._totalSteps,
color: 'primary',
showLabel: true,
className: 'drs-progress'
});
}
// Create navigation buttons
this._components.nextButton = componentRegistry.create('Button', {
text: this._currentStep === this._totalSteps - 1 ? 'Finish' : 'Next',
type: 'primary',
onClick: () => this._handleNext(),
className: 'drs-next-btn'
});
// Create hint button if enabled
if (this._config.showHints) {
this._components.hintButton = componentRegistry.create('Button', {
text: 'Hint',
icon: '💡',
type: 'outline',
onClick: () => this._handleHint(),
className: 'drs-hint-btn'
});
}
// Create hint panel (initially hidden)
this._components.hintPanel = componentRegistry.create('Panel', {
title: 'Hint',
type: 'hint',
collapsible: true,
collapsed: true,
className: 'drs-hint-panel'
});
// Create result panel (initially hidden)
this._components.resultPanel = componentRegistry.create('Panel', {
title: 'Result',
type: 'success',
className: 'drs-result-panel'
});
// Assemble UI
this._assembleUI();
}
/**
* Assemble all UI components into the container
*/
_assembleUI() {
// Progress bar at top
if (this._components.progressBar) {
this._container.appendChild(this._components.progressBar.getElement());
}
// Main card
this._container.appendChild(this._components.mainCard.getElement());
// Action buttons container
const actionsDiv = document.createElement('div');
actionsDiv.className = 'drs-actions';
actionsDiv.style.cssText = `
display: flex;
gap: 12px;
margin-top: 16px;
justify-content: space-between;
`;
// Left side: hint button
if (this._components.hintButton) {
actionsDiv.appendChild(this._components.hintButton.getElement());
}
// Right side: next button
const rightActions = document.createElement('div');
rightActions.style.cssText = 'margin-left: auto;';
rightActions.appendChild(this._components.nextButton.getElement());
actionsDiv.appendChild(rightActions);
this._container.appendChild(actionsDiv);
// Panels at bottom
this._container.appendChild(this._components.hintPanel.getElement());
this._container.appendChild(this._components.resultPanel.getElement());
// Initially hide panels
this._components.hintPanel.hide();
this._components.resultPanel.hide();
}
/**
* Show current exercise step
*/
_showCurrentStep() {
if (!this._currentExercise || !this._components.mainCard) return;
const step = this._currentExercise.steps?.[this._currentStep] || this._currentExercise;
console.log(`📖 Showing step ${this._currentStep + 1}/${this._totalSteps}:`, {
id: step.id,
type: step.type,
hasContent: !!step.content,
contentKeys: step.content ? Object.keys(step.content) : [],
step: step
});
const progress = this.getProgress();
// Update progress bar
if (this._components.progressBar) {
this._components.progressBar.setValue(this._currentStep + 1);
this._components.progressBar.setLabel(`Step ${progress.currentStep} of ${progress.totalSteps}`);
}
// Update main card content
const stepContent = this._generateStepContent(step);
this._components.mainCard.setContent(stepContent);
// Update next button text
if (this._components.nextButton) {
const isLast = this._currentStep === this._totalSteps - 1;
this._components.nextButton.setText(isLast ? 'Finish' : 'Next');
}
// Hide result panel for new step
if (this._components.resultPanel) {
this._components.resultPanel.hide();
}
}
/**
* Generate HTML content for current step
*/
_generateStepContent(step) {
let content = '';
// Step instruction
if (step.instruction) {
content += `<div class="drs-instruction">${step.instruction}</div>`;
}
// Content based on type
if (step.type === 'text' || step.type === 'multiple-choice' || !step.type) {
content += this._generateTextContent(step);
} else if (step.type === 'audio') {
content += this._generateAudioContent(step);
} else if (step.type === 'image') {
content += this._generateImageContent(step);
} else if (step.type === 'grammar' || step.type === 'fill-blank') {
content += this._generateGrammarContent(step);
} else {
// Fallback for unknown types
console.warn(`⚠️ Unknown step type: ${step.type}, falling back to text`);
content += this._generateTextContent(step);
}
return content;
}
/**
* Generate text exercise content
*/
_generateTextContent(step) {
let content = `<div class="drs-text-content">`;
// Use step.content if available (new format from ContentLoader)
const stepData = step.content || step;
// Show passage/text
if (stepData.passage) {
content += `<div class="drs-text-passage">${stepData.passage}</div>`;
} else if (stepData.text) {
content += `<div class="drs-text-passage">${stepData.text}</div>`;
}
// Show question
if (stepData.question) {
content += `<div class="drs-question">${stepData.question}</div>`;
}
// Show options (multiple choice)
const options = stepData.options || step.options;
if (options && options.length > 0) {
console.log('🎯 Generating radio options:', options);
content += `<div class="drs-options">`;
options.forEach((option, index) => {
content += `
<label class="drs-option">
<input type="radio" name="answer" value="${index}" required>
<span>${option}</span>
</label>
`;
});
content += `</div>`;
} else {
console.warn('⚠️ No options found for multiple choice step:', step);
}
content += `</div>`;
return content;
}
/**
* Generate audio exercise content
*/
_generateAudioContent(step) {
let content = `<div class="drs-audio-content">`;
if (step.audioUrl) {
content += `
<div class="drs-audio-player">
<audio controls>
<source src="${step.audioUrl}" type="audio/mpeg">
Your browser does not support audio playback.
</audio>
</div>
`;
}
if (step.transcript) {
content += `<div class="drs-transcript" style="display: none;">${step.transcript}</div>`;
content += `<button class="drs-show-transcript btn btn-secondary">Show Transcript</button>`;
}
if (step.question) {
content += `<div class="drs-question">${step.question}</div>`;
}
content += `</div>`;
return content;
}
/**
* Generate image exercise content
*/
_generateImageContent(step) {
let content = `<div class="drs-image-content">`;
if (step.imageUrl) {
content += `
<div class="drs-image-container">
<img src="${step.imageUrl}" alt="${step.description || 'Exercise image'}" class="drs-image">
</div>
`;
}
if (step.question) {
content += `<div class="drs-question">${step.question}</div>`;
}
content += `</div>`;
return content;
}
/**
* Generate grammar exercise content
*/
_generateGrammarContent(step) {
let content = `<div class="drs-grammar-content">`;
if (step.sentence) {
// Fill-in-the-blank style
const processedSentence = step.sentence.replace(/_+/g, '<input type="text" class="drs-blank">');
content += `<div class="drs-sentence">${processedSentence}</div>`;
}
if (step.explanation) {
content += `<div class="drs-explanation">${step.explanation}</div>`;
}
content += `</div>`;
return content;
}
/**
* Event handlers
*/
_handleStart() {
console.log('📢 DRS start event received');
}
_handleNext() {
console.log('📋 Next button clicked');
if (!this._isActive) {
console.log('⚠️ DRS not active, ignoring next');
return;
}
console.log(`Current step: ${this._currentStep}/${this._totalSteps}`);
// Validate current step
const isValid = this._validateCurrentStep();
if (!isValid) {
console.log('❌ Validation failed, showing error');
this._showValidationError();
return;
}
console.log('✅ Validation passed, moving to next step');
// Move to next step or finish
if (this._currentStep < this._totalSteps - 1) {
// Emit step completed (for the step we just finished)
this._eventBus.emit('drs:step-completed', {
step: this._currentStep, // The step we just completed
total: this._totalSteps
}, this.name);
this._currentStep++;
this._showCurrentStep();
} else {
// Emit final step completed
this._eventBus.emit('drs:step-completed', {
step: this._currentStep,
total: this._totalSteps
}, this.name);
this._finishExercise();
}
}
_handleHint() {
if (!this._components.hintPanel) return;
const step = this._currentExercise.steps?.[this._currentStep] || this._currentExercise;
if (step.hint) {
this._components.hintPanel.setContent(step.hint);
this._components.hintPanel.show();
this._components.hintPanel.expand();
// Track hint usage
this._userProgress.hints++;
// Emit hint used event
this._eventBus.emit('drs:hint-used', {
step: this._currentStep,
hint: step.hint
}, this.name);
}
}
_handleSubmit(event) {
console.log('📝 Submit event:', event);
this._handleNext();
}
_handleContentLoaded(event) {
console.log('📚 Content loaded event:', event);
}
/**
* Validate current step input
*/
_validateCurrentStep() {
console.log('🔍 Validating current step...');
// Basic validation - check for required inputs
const inputs = this._container.querySelectorAll('input[required], input[type="radio"]');
console.log(`Found ${inputs.length} inputs to validate`);
if (inputs.length === 0) {
console.log('✅ No validation needed');
return true; // No validation needed
}
// Check radio buttons
const radioGroups = this._container.querySelectorAll('input[type="radio"]');
if (radioGroups.length > 0) {
console.log(`Checking ${radioGroups.length} radio buttons...`);
const groupNames = new Set();
radioGroups.forEach(radio => groupNames.add(radio.name));
for (const groupName of groupNames) {
const checked = this._container.querySelector(`input[name="${groupName}"]:checked`);
if (!checked) {
console.log(`❌ No radio button selected for group: ${groupName}`);
return false;
}
console.log(`✅ Radio group "${groupName}" has selection: ${checked.value}`);
}
}
// Check text inputs
const textInputs = this._container.querySelectorAll('input[required]:not([type="radio"])');
if (textInputs.length > 0) {
console.log(`Checking ${textInputs.length} text inputs...`);
for (const input of textInputs) {
if (!input.value.trim()) {
console.log(`❌ Required text input is empty: ${input.name || input.id}`);
return false;
}
console.log(`✅ Text input has value: ${input.value}`);
}
}
console.log('✅ All validations passed');
return true;
}
/**
* Show validation error
*/
_showValidationError() {
if (this._components.resultPanel) {
this._components.resultPanel.setType('warning');
this._components.resultPanel.setContent('Please answer all questions before continuing.');
this._components.resultPanel.show();
setTimeout(() => {
this._components.resultPanel.hide();
}, 3000);
}
}
/**
* Finish exercise
*/
_finishExercise() {
this._isActive = false;
// Calculate final stats
this._userProgress.timeSpent = Date.now() - this._startTime;
const finalStats = this.getProgress();
// Show completion message
if (this._components.resultPanel) {
this._components.resultPanel.setType('success');
this._components.resultPanel.setContent(`
<h4>Exercise Complete!</h4>
<p>Time spent: ${Math.round(finalStats.timeSpent / 1000)}s</p>
<p>Hints used: ${this._userProgress.hints}</p>
`);
this._components.resultPanel.show();
}
// Hide next button
if (this._components.nextButton) {
this._components.nextButton.hide();
}
// Emit completion event
this._eventBus.emit('drs:completed', {
stats: finalStats,
exercise: this._currentExercise
}, this.name);
console.log('🎉 Exercise completed!', finalStats);
}
/**
* Clean up UI
*/
_cleanupUI() {
if (this._container) {
this._container.innerHTML = '';
this._container = null;
}
this._isActive = false;
}
}
export default UnifiedDRS;

1884
src/DRS/exercise-modules/AudioModule.js Normal file
View File

File diff suppressed because it is too large Load Diff

2060
src/DRS/exercise-modules/GrammarModule.js Normal file
View File

File diff suppressed because it is too large Load Diff

1949
src/DRS/exercise-modules/ImageModule.js Normal file
View File

File diff suppressed because it is too large Load Diff

915
src/DRS/exercise-modules/PhraseModule.js Normal file
View File

@ -0,0 +1,915 @@
/**
* PhraseModule - Individual phrase comprehension with mandatory AI validation
* Uses GPT-4-mini only, no fallbacks, structured response format
*/
import ExerciseModuleInterface from '../interfaces/ExerciseModuleInterface.js';
class PhraseModule extends ExerciseModuleInterface {
constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory) {
super();
// Validate dependencies
if (!orchestrator || !llmValidator || !prerequisiteEngine || !contextMemory) {
throw new Error('PhraseModule requires all service dependencies');
}
this.orchestrator = orchestrator;
this.llmValidator = llmValidator;
this.prerequisiteEngine = prerequisiteEngine;
this.contextMemory = contextMemory;
// Module state
this.initialized = false;
this.container = null;
this.currentExerciseData = null;
this.currentPhrase = null;
this.validationInProgress = false;
this.lastValidationResult = null;
// Configuration - AI ONLY, no fallbacks
this.config = {
requiredProvider: 'openai', // GPT-4-mini only
model: 'gpt-4o-mini',
temperature: 0.1, // Very low for consistent evaluation
maxTokens: 500,
timeout: 30000,
noFallback: true // Critical: No mocks allowed
};
// Languages configuration
this.languages = {
userLanguage: 'English', // User's native language
targetLanguage: 'French' // Target learning language
};
// Bind methods
this._handleUserInput = this._handleUserInput.bind(this);
this._handleRetry = this._handleRetry.bind(this);
this._handleNextPhrase = this._handleNextPhrase.bind(this);
}
async init() {
if (this.initialized) return;
console.log('💬 Initializing PhraseModule...');
// Test AI connectivity - recommandé mais pas obligatoire
try {
const testResult = await this.llmValidator.testConnectivity();
if (testResult.success) {
console.log(`✅ AI connectivity verified (providers: ${testResult.availableProviders?.join(', ') || testResult.provider})`);
this.aiAvailable = true;
} else {
console.warn('⚠️ AI connection failed - will use mock validation:', testResult.error);
this.aiAvailable = false;
}
} catch (error) {
console.warn('⚠️ AI connectivity test failed - will use mock validation:', error.message);
this.aiAvailable = false;
}
this.initialized = true;
console.log(`✅ PhraseModule initialized (AI: ${this.aiAvailable ? 'available' : 'disabled - using mock mode'})`);
}
/**
* Check if module can run with current prerequisites
* @param {Array} prerequisites - List of learned vocabulary/concepts
* @param {Object} chapterContent - Full chapter content
* @returns {boolean} - True if module can run
*/
canRun(prerequisites, chapterContent) {
// Check if there are phrases and if prerequisites allow them
const phrases = chapterContent?.phrases || [];
if (phrases.length === 0) return false;
// Find phrases that can be unlocked with current prerequisites
const availablePhrases = phrases.filter(phrase => {
const unlockStatus = this.prerequisiteEngine.canUnlock('phrase', phrase);
return unlockStatus.canUnlock;
});
return availablePhrases.length > 0;
}
/**
* Present exercise UI and content
* @param {HTMLElement} container - DOM container to render into
* @param {Object} exerciseData - Specific exercise data to present
* @returns {Promise<void>}
*/
async present(container, exerciseData) {
if (!this.initialized) {
throw new Error('PhraseModule must be initialized before use');
}
this.container = container;
this.currentExerciseData = exerciseData;
this.currentPhrase = exerciseData.phrase;
this.validationInProgress = false;
this.lastValidationResult = null;
// Detect languages from chapter content
this._detectLanguages(exerciseData);
console.log(`💬 Presenting phrase exercise: "${this.currentPhrase?.english || this.currentPhrase?.text}"`);
// Render initial UI
await this._renderPhraseExercise();
}
/**
* Validate user input with mandatory AI (GPT-4-mini)
* @param {string} userInput - User's response
* @param {Object} context - Exercise context
* @returns {Promise<ValidationResult>} - Structured validation result
*/
async validate(userInput, context) {
if (!userInput || !userInput.trim()) {
throw new Error('Please provide an answer');
}
if (!this.currentPhrase) {
throw new Error('No phrase loaded for validation');
}
console.log(`🧠 AI validation: "${this.currentPhrase.english}" -> "${userInput}"`);
// Build structured prompt for GPT-4-mini
const prompt = this._buildStructuredPrompt(userInput);
try {
// Direct call to IAEngine with strict parameters
const aiResponse = await this.llmValidator.iaEngine.validateEducationalContent(prompt, {
preferredProvider: this.config.requiredProvider,
temperature: this.config.temperature,
maxTokens: this.config.maxTokens,
timeout: this.config.timeout,
systemPrompt: `You are a language learning evaluator. ALWAYS respond in the exact format: [answer]yes/no [explanation]your explanation here`
});
// Parse structured response
const parsedResult = this._parseStructuredResponse(aiResponse);
// Record interaction in context memory
this.contextMemory.recordInteraction({
type: 'phrase',
subtype: 'comprehension',
content: {
phrase: this.currentPhrase,
originalText: this.currentPhrase.english || this.currentPhrase.text,
targetLanguage: this.languages.targetLanguage
},
userResponse: userInput.trim(),
validation: parsedResult,
context: { languages: this.languages }
});
return parsedResult;
} catch (error) {
console.error('❌ AI validation failed:', error);
// No fallback allowed - throw error to user
throw new Error(`AI validation failed: ${error.message}. Please check connection and retry.`);
}
}
/**
* Get current progress data
* @returns {ProgressData} - Progress information for this module
*/
getProgress() {
return {
type: 'phrase',
currentPhrase: this.currentPhrase?.english || 'None',
validationStatus: this.validationInProgress ? 'validating' : 'ready',
lastResult: this.lastValidationResult,
aiProvider: this.config.requiredProvider,
languages: this.languages
};
}
/**
* Clean up and prepare for unloading
*/
cleanup() {
console.log('🧹 Cleaning up PhraseModule...');
// Remove event listeners
if (this.container) {
this.container.innerHTML = '';
}
// Reset state
this.container = null;
this.currentExerciseData = null;
this.currentPhrase = null;
this.validationInProgress = false;
this.lastValidationResult = null;
console.log('✅ PhraseModule cleaned up');
}
// Private Methods
/**
* Detect languages from exercise data
* @private
*/
_detectLanguages(exerciseData) {
// Try to detect from chapter content or use defaults
const chapterContent = this.currentExerciseData?.chapterContent;
if (chapterContent?.metadata?.userLanguage) {
this.languages.userLanguage = chapterContent.metadata.userLanguage;
}
if (chapterContent?.metadata?.targetLanguage) {
this.languages.targetLanguage = chapterContent.metadata.targetLanguage;
}
// Fallback detection from phrase content
if (this.currentPhrase?.user_language) {
this.languages.targetLanguage = this.currentPhrase.user_language;
}
console.log(`🌍 Languages detected: ${this.languages.userLanguage} -> ${this.languages.targetLanguage}`);
}
/**
* Build structured prompt for GPT-4-mini
* @private
*/
_buildStructuredPrompt(userAnswer) {
const originalText = this.currentPhrase.english || this.currentPhrase.text || '';
const expectedTranslation = this.currentPhrase.user_language || this.currentPhrase.translation || '';
return `You are evaluating a ${this.languages.userLanguage}/${this.languages.targetLanguage} phrase comprehension exercise.
CRITICAL: You MUST respond in this EXACT format: [answer]yes/no [explanation]your explanation here
Evaluate this student response:
- Original phrase (${this.languages.userLanguage}): "${originalText}"
- Expected meaning (${this.languages.targetLanguage}): "${expectedTranslation}"
- Student answer: "${userAnswer}"
- Context: Individual phrase comprehension exercise
Rules:
- [answer]yes if the student captured the essential meaning (even if not word-perfect)
- [answer]no if the meaning is wrong, missing, or completely off-topic
- [explanation] must be encouraging, educational, and constructive
- Focus on comprehension, not perfect translation
Format: [answer]yes/no [explanation]your detailed feedback here`;
}
/**
* Parse structured AI response
* @private
*/
_parseStructuredResponse(aiResponse) {
try {
let responseText = '';
// Extract text from AI response
if (typeof aiResponse === 'string') {
responseText = aiResponse;
} else if (aiResponse.content) {
responseText = aiResponse.content;
} else if (aiResponse.text) {
responseText = aiResponse.text;
} else {
responseText = JSON.stringify(aiResponse);
}
console.log('🔍 Parsing AI response:', responseText.substring(0, 200) + '...');
// Extract [answer] - case insensitive
const answerMatch = responseText.match(/\[answer\](yes|no)/i);
if (!answerMatch) {
throw new Error('AI response missing [answer] format');
}
// Extract [explanation] - multiline support
const explanationMatch = responseText.match(/\[explanation\](.+)/s);
if (!explanationMatch) {
throw new Error('AI response missing [explanation] format');
}
const isCorrect = answerMatch[1].toLowerCase() === 'yes';
const explanation = explanationMatch[1].trim();
const result = {
score: isCorrect ? 85 : 45, // High score for yes, low for no
correct: isCorrect,
feedback: explanation,
answer: answerMatch[1].toLowerCase(),
explanation: explanation,
timestamp: new Date().toISOString(),
provider: this.config.requiredProvider,
model: this.config.model,
cached: false,
formatValid: true
};
console.log(`✅ AI response parsed: ${result.answer} - "${result.explanation.substring(0, 50)}..."`);
return result;
} catch (error) {
console.error('❌ Failed to parse AI response:', error);
console.error('Raw response:', aiResponse);
throw new Error(`AI response format invalid: ${error.message}`);
}
}
/**
* Render the phrase exercise interface
* @private
*/
async _renderPhraseExercise() {
if (!this.container || !this.currentPhrase) return;
const originalText = this.currentPhrase.english || this.currentPhrase.text || 'No phrase text';
const pronunciation = this.currentPhrase.pronunciation || '';
this.container.innerHTML = `
<div class="phrase-exercise">
<div class="exercise-header">
<h2>💬 Phrase Comprehension</h2>
<div class="language-info">
<span class="source-lang">${this.languages.userLanguage}</span>
<span class="arrow">→</span>
<span class="target-lang">${this.languages.targetLanguage}</span>
</div>
</div>
<div class="phrase-content">
<div class="phrase-card">
<div class="phrase-display">
<div class="phrase-text">"${originalText}"</div>
${pronunciation ? `<div class="phrase-pronunciation">[${pronunciation}]</div>` : ''}
${!this.aiAvailable ? `
<div class="ai-status-warning">
⚠️ AI validation unavailable - using mock mode
</div>
` : ''}
</div>
<div class="comprehension-input">
<label for="comprehension-input">
What does this phrase mean in ${this.languages.targetLanguage}?
</label>
<textarea
id="comprehension-input"
placeholder="Enter your understanding of this phrase..."
rows="3"
autocomplete="off"
></textarea>
</div>
<div class="phrase-controls">
<button id="validate-btn" class="btn btn-primary" disabled>
<span class="btn-icon">${this.aiAvailable ? '🧠' : '🎭'}</span>
<span class="btn-text">${this.aiAvailable ? 'Validate with AI' : 'Validate (Mock Mode)'}</span>
</button>
<div id="validation-status" class="validation-status"></div>
</div>
</div>
<div class="explanation-panel" id="explanation-panel" style="display: none;">
<div class="panel-header">
<h3>🤖 AI Explanation</h3>
<span class="ai-model">${this.config.model}</span>
</div>
<div class="explanation-content" id="explanation-content">
<!-- AI explanation will appear here -->
</div>
<div class="panel-actions">
<button id="next-phrase-btn" class="btn btn-primary" style="display: none;">
Continue to Next Exercise
</button>
<button id="retry-btn" class="btn btn-secondary" style="display: none;">
Try Another Answer
</button>
</div>
</div>
</div>
</div>
`;
// Add CSS styles
this._addStyles();
// Add event listeners
this._setupEventListeners();
}
/**
* Setup event listeners
* @private
*/
_setupEventListeners() {
const input = document.getElementById('comprehension-input');
const validateBtn = document.getElementById('validate-btn');
const retryBtn = document.getElementById('retry-btn');
const nextBtn = document.getElementById('next-phrase-btn');
// Enable validate button when input has text
if (input) {
input.addEventListener('input', () => {
const hasText = input.value.trim().length > 0;
if (validateBtn) {
validateBtn.disabled = !hasText || this.validationInProgress;
}
});
// Allow Enter to validate (with Shift+Enter for new line)
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && !e.shiftKey && !validateBtn.disabled) {
e.preventDefault();
this._handleUserInput();
}
});
}
// Validate button
if (validateBtn) {
validateBtn.onclick = this._handleUserInput;
}
// Retry button
if (retryBtn) {
retryBtn.onclick = this._handleRetry;
}
// Next button
if (nextBtn) {
nextBtn.onclick = this._handleNextPhrase;
}
}
/**
* Handle user input validation
* @private
*/
async _handleUserInput() {
const input = document.getElementById('comprehension-input');
const validateBtn = document.getElementById('validate-btn');
const statusDiv = document.getElementById('validation-status');
if (!input || !validateBtn || !statusDiv) return;
const userInput = input.value.trim();
if (!userInput) return;
try {
// Set validation in progress
this.validationInProgress = true;
validateBtn.disabled = true;
input.disabled = true;
// Show loading status
statusDiv.innerHTML = `
<div class="status-loading">
<div class="loading-spinner">🧠</div>
<span>AI is evaluating your answer...</span>
</div>
`;
// Call AI validation
const result = await this.validate(userInput, {});
this.lastValidationResult = result;
// Show result in explanation panel
this._showExplanation(result);
// Update status
statusDiv.innerHTML = `
<div class="status-complete">
<span class="result-icon">${result.correct ? '✅' : '❌'}</span>
<span>AI evaluation complete</span>
</div>
`;
} catch (error) {
console.error('❌ Validation error:', error);
// Show error status
statusDiv.innerHTML = `
<div class="status-error">
<span class="error-icon">⚠️</span>
<span>Error: ${error.message}</span>
</div>
`;
// Re-enable input for retry
this._enableRetry();
}
}
/**
* Show AI explanation in dedicated panel
* @private
*/
_showExplanation(result) {
const explanationPanel = document.getElementById('explanation-panel');
const explanationContent = document.getElementById('explanation-content');
const nextBtn = document.getElementById('next-phrase-btn');
const retryBtn = document.getElementById('retry-btn');
if (!explanationPanel || !explanationContent) return;
// Show panel
explanationPanel.style.display = 'block';
// Set explanation content (read-only)
explanationContent.innerHTML = `
<div class="explanation-result ${result.correct ? 'correct' : 'incorrect'}">
<div class="result-header">
<span class="result-indicator">${result.correct ? '✅ Correct!' : '❌ Not quite right'}</span>
<span class="ai-confidence">Score: ${result.score}/100</span>
</div>
<div class="explanation-text">${result.explanation}</div>
</div>
`;
// Show appropriate buttons
if (nextBtn) nextBtn.style.display = result.correct ? 'inline-block' : 'none';
if (retryBtn) retryBtn.style.display = result.correct ? 'none' : 'inline-block';
// Scroll to explanation
explanationPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
/**
* Enable retry after error
* @private
*/
_enableRetry() {
this.validationInProgress = false;
const input = document.getElementById('comprehension-input');
const validateBtn = document.getElementById('validate-btn');
if (input) {
input.disabled = false;
input.focus();
}
if (validateBtn) {
validateBtn.disabled = false;
}
}
/**
* Handle retry button
* @private
*/
_handleRetry() {
// Hide explanation panel and enable new input
const explanationPanel = document.getElementById('explanation-panel');
const statusDiv = document.getElementById('validation-status');
if (explanationPanel) explanationPanel.style.display = 'none';
if (statusDiv) statusDiv.innerHTML = '';
this._enableRetry();
}
/**
* Handle next phrase button
* @private
*/
_handleNextPhrase() {
// Mark phrase as completed and continue to next exercise
if (this.currentPhrase && this.lastValidationResult) {
const phraseId = this.currentPhrase.id || this.currentPhrase.english || 'unknown';
const metadata = {
difficulty: this.lastValidationResult.correct ? 'easy' : 'hard',
sessionId: this.orchestrator?.sessionId || 'unknown',
moduleType: 'phrase',
aiScore: this.lastValidationResult.score,
correct: this.lastValidationResult.correct,
provider: this.lastValidationResult.provider || 'openai'
};
this.prerequisiteEngine.markPhraseMastered(phraseId, metadata);
// Also save to persistent storage if phrase was correctly understood
if (this.lastValidationResult.correct && window.addMasteredItem &&
this.orchestrator?.bookId && this.orchestrator?.chapterId) {
window.addMasteredItem(
this.orchestrator.bookId,
this.orchestrator.chapterId,
'phrases',
phraseId,
metadata
);
}
}
// Emit completion event to orchestrator
this.orchestrator._eventBus.emit('drs:exerciseCompleted', {
moduleType: 'phrase',
result: this.lastValidationResult,
progress: this.getProgress()
}, 'PhraseModule');
}
/**
* Add CSS styles for phrase exercise
* @private
*/
_addStyles() {
if (document.getElementById('phrase-module-styles')) return;
const styles = document.createElement('style');
styles.id = 'phrase-module-styles';
styles.textContent = `
.phrase-exercise {
max-width: 800px;
margin: 0 auto;
padding: 20px;
display: grid;
gap: 20px;
}
.exercise-header {
text-align: center;
margin-bottom: 20px;
}
.language-info {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 10px;
font-size: 0.9em;
color: #666;
}
.phrase-content {
display: grid;
gap: 20px;
}
.phrase-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.phrase-display {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #f8f9ff, #e8f4fd);
border-radius: 8px;
}
.phrase-text {
font-size: 1.8em;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
line-height: 1.3;
}
.phrase-pronunciation {
font-style: italic;
color: #666;
font-size: 1.1em;
}
.comprehension-input {
margin-bottom: 20px;
}
.comprehension-input label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #555;
}
.comprehension-input textarea {
width: 100%;
padding: 15px;
font-size: 1.1em;
border: 2px solid #ddd;
border-radius: 8px;
resize: vertical;
min-height: 80px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.comprehension-input textarea:focus {
outline: none;
border-color: #667eea;
}
.phrase-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.validation-status {
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.status-loading, .status-complete, .status-error {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 20px;
font-weight: 500;
}
.status-loading {
background: #e3f2fd;
color: #1976d2;
}
.status-complete {
background: #e8f5e8;
color: #2e7d32;
}
.status-error {
background: #ffebee;
color: #c62828;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.explanation-panel {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
border-left: 4px solid #667eea;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.panel-header h3 {
margin: 0;
color: #333;
}
.ai-model {
font-size: 0.9em;
color: #666;
background: #f5f5f5;
padding: 4px 8px;
border-radius: 4px;
}
.explanation-content {
margin-bottom: 20px;
}
.explanation-result.correct {
border-left: 4px solid #4caf50;
background: linear-gradient(135deg, #f1f8e9, #e8f5e8);
}
.explanation-result.incorrect {
border-left: 4px solid #f44336;
background: linear-gradient(135deg, #fff3e0, #ffebee);
}
.explanation-result {
padding: 20px;
border-radius: 8px;
margin-bottom: 15px;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-weight: 600;
}
.result-indicator {
font-size: 1.1em;
}
.ai-confidence {
font-size: 0.9em;
color: #666;
}
.explanation-text {
line-height: 1.6;
color: #333;
font-size: 1.05em;
}
.panel-actions {
display: flex;
gap: 15px;
justify-content: center;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: #5a6268;
}
.ai-status-warning {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
border: 1px solid #ffc107;
border-radius: 8px;
padding: 10px 15px;
margin: 10px 0;
text-align: center;
font-size: 0.9em;
color: #856404;
font-weight: 500;
}
@media (max-width: 768px) {
.phrase-exercise {
padding: 15px;
}
.phrase-card, .explanation-panel {
padding: 20px;
}
.phrase-text {
font-size: 1.5em;
}
.panel-actions {
flex-direction: column;
}
}
`;
document.head.appendChild(styles);
}
}
export default PhraseModule;

1510
src/DRS/exercise-modules/TextModule.js Normal file
View File

File diff suppressed because it is too large Load Diff

923
src/DRS/exercise-modules/VocabularyModule.js Normal file
View File

@ -0,0 +1,923 @@
/**
* VocabularyModule - Groups of 5 vocabulary exercise implementation
* First exercise module following the ExerciseModuleInterface
*/
import ExerciseModuleInterface from '../interfaces/ExerciseModuleInterface.js';
class VocabularyModule extends ExerciseModuleInterface {
constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory) {
super();
// Validate dependencies
if (!orchestrator || !llmValidator || !prerequisiteEngine || !contextMemory) {
throw new Error('VocabularyModule requires all service dependencies');
}
this.orchestrator = orchestrator;
this.llmValidator = llmValidator;
this.prerequisiteEngine = prerequisiteEngine;
this.contextMemory = contextMemory;
// Module state
this.initialized = false;
this.container = null;
this.currentExerciseData = null;
this.currentVocabularyGroup = [];
this.currentWordIndex = 0;
this.groupResults = [];
this.isRevealed = false;
// Configuration
this.config = {
groupSize: 5,
masteryThreshold: 80, // 80% correct to consider mastered
maxAttempts: 3,
showPronunciation: true,
randomizeOrder: true
};
// Bind methods
this._handleNextWord = this._handleNextWord.bind(this);
this._handleRevealAnswer = this._handleRevealAnswer.bind(this);
this._handleUserInput = this._handleUserInput.bind(this);
this._handleDifficultySelection = this._handleDifficultySelection.bind(this);
}
async init() {
if (this.initialized) return;
console.log('📚 Initializing VocabularyModule...');
this.initialized = true;
console.log('✅ VocabularyModule initialized');
}
/**
* Check if module can run with current prerequisites
* @param {Array} prerequisites - List of learned vocabulary/concepts
* @param {Object} chapterContent - Full chapter content
* @returns {boolean} - True if module can run
*/
canRun(prerequisites, chapterContent) {
// Vocabulary module can always run if there's vocabulary in the chapter
const hasVocabulary = chapterContent && chapterContent.vocabulary &&
Object.keys(chapterContent.vocabulary).length > 0;
return hasVocabulary;
}
/**
* Present exercise UI and content
* @param {HTMLElement} container - DOM container to render into
* @param {Object} exerciseData - Specific exercise data to present
* @returns {Promise<void>}
*/
async present(container, exerciseData) {
if (!this.initialized) {
throw new Error('VocabularyModule must be initialized before use');
}
this.container = container;
this.currentExerciseData = exerciseData;
// Extract vocabulary group
this.currentVocabularyGroup = exerciseData.vocabulary || [];
this.currentWordIndex = 0;
this.groupResults = [];
this.isRevealed = false;
if (this.config.randomizeOrder) {
this._shuffleArray(this.currentVocabularyGroup);
}
console.log(`📚 Presenting vocabulary group (${this.currentVocabularyGroup.length} words)`);
// Render initial UI
await this._renderVocabularyExercise();
// Start with first word
this._presentCurrentWord();
}
/**
* Validate user input with simple string matching (NO AI)
* @param {string} userInput - User's response
* @param {Object} context - Exercise context and expected answer
* @returns {Promise<ValidationResult>} - Validation result with score and feedback
*/
async validate(userInput, context) {
if (!userInput || !userInput.trim()) {
return {
score: 0,
correct: false,
feedback: "Please provide an answer.",
timestamp: new Date().toISOString(),
provider: 'local'
};
}
const currentWord = this.currentVocabularyGroup[this.currentWordIndex];
const expectedTranslation = currentWord.translation;
const userAnswer = userInput.trim();
// Simple string matching validation (NO AI)
const isCorrect = this._checkTranslation(userAnswer, expectedTranslation);
const result = {
score: isCorrect ? 100 : 0,
correct: isCorrect,
feedback: isCorrect
? "Correct! Well done."
: `Incorrect. The correct answer is: ${expectedTranslation}`,
timestamp: new Date().toISOString(),
provider: 'local',
expectedAnswer: expectedTranslation,
userAnswer: userAnswer
};
// Record interaction in context memory
this.contextMemory.recordInteraction({
type: 'vocabulary',
subtype: 'translation',
content: {
vocabulary: [currentWord],
word: currentWord.word,
expectedTranslation
},
userResponse: userAnswer,
validation: result,
context: { validationType: 'simple_string_match' }
});
return result;
}
/**
* Get current progress data
* @returns {ProgressData} - Progress information for this module
*/
getProgress() {
const totalWords = this.currentVocabularyGroup.length;
const completedWords = this.groupResults.length;
const correctWords = this.groupResults.filter(result => result.correct).length;
return {
type: 'vocabulary',
totalWords,
completedWords,
correctWords,
currentWordIndex: this.currentWordIndex,
groupResults: this.groupResults,
progressPercentage: totalWords > 0 ? Math.round((completedWords / totalWords) * 100) : 0,
accuracyPercentage: completedWords > 0 ? Math.round((correctWords / completedWords) * 100) : 0
};
}
/**
* Clean up and prepare for unloading
*/
cleanup() {
console.log('🧹 Cleaning up VocabularyModule...');
// Remove event listeners
if (this.container) {
this.container.innerHTML = '';
}
// Reset state
this.container = null;
this.currentExerciseData = null;
this.currentVocabularyGroup = [];
this.currentWordIndex = 0;
this.groupResults = [];
this.isRevealed = false;
console.log('✅ VocabularyModule cleaned up');
}
/**
* Get module metadata
* @returns {Object} - Module information
*/
getMetadata() {
return {
name: 'VocabularyModule',
type: 'vocabulary',
version: '1.0.0',
description: 'Groups of 5 vocabulary exercises with LLM validation',
capabilities: ['translation', 'pronunciation', 'spaced_repetition'],
config: this.config
};
}
// Private Methods
/**
* Check translation with simple string matching and fuzzy logic
* @param {string} userAnswer - User's answer
* @param {string} expectedTranslation - Expected correct answer
* @returns {boolean} - True if answer is acceptable
* @private
*/
_checkTranslation(userAnswer, expectedTranslation) {
if (!userAnswer || !expectedTranslation) return false;
// Normalize both strings
const normalizeString = (str) => {
return str.toLowerCase()
.trim()
.replace(/[.,!?;:"'()]/g, '') // Remove punctuation
.replace(/\s+/g, ' '); // Normalize whitespace
};
const normalizedUser = normalizeString(userAnswer);
const normalizedExpected = normalizeString(expectedTranslation);
// Exact match after normalization
if (normalizedUser === normalizedExpected) {
return true;
}
// Split expected answer into alternatives (e.g., "shirt, t-shirt" or "shirt / t-shirt")
const alternatives = normalizedExpected.split(/[,/|;]/).map(alt => alt.trim());
// Check if user answer matches any alternative
for (const alternative of alternatives) {
if (normalizedUser === alternative) {
return true;
}
// Allow partial matches for single words if they're very close
if (alternative.split(' ').length === 1 && normalizedUser.split(' ').length === 1) {
const similarity = this._calculateSimilarity(normalizedUser, alternative);
if (similarity > 0.85) { // 85% similarity threshold
return true;
}
}
}
return false;
}
/**
* Calculate string similarity using simple character comparison
* @param {string} str1 - First string
* @param {string} str2 - Second string
* @returns {number} - Similarity score between 0 and 1
* @private
*/
_calculateSimilarity(str1, str2) {
if (str1 === str2) return 1.0;
if (str1.length === 0 || str2.length === 0) return 0.0;
// Simple character-based similarity
const longer = str1.length > str2.length ? str1 : str2;
const shorter = str1.length > str2.length ? str2 : str1;
if (longer.length === 0) return 1.0;
const editDistance = this._levenshteinDistance(str1, str2);
return (longer.length - editDistance) / longer.length;
}
/**
* Calculate Levenshtein distance between two strings
* @param {string} str1 - First string
* @param {string} str2 - Second string
* @returns {number} - Edit distance
* @private
*/
_levenshteinDistance(str1, str2) {
const matrix = [];
for (let i = 0; i <= str2.length; i++) {
matrix[i] = [i];
}
for (let j = 0; j <= str1.length; j++) {
matrix[0][j] = j;
}
for (let i = 1; i <= str2.length; i++) {
for (let j = 1; j <= str1.length; j++) {
if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
matrix[i][j] = matrix[i - 1][j - 1];
} else {
matrix[i][j] = Math.min(
matrix[i - 1][j - 1] + 1,
matrix[i][j - 1] + 1,
matrix[i - 1][j] + 1
);
}
}
}
return matrix[str2.length][str1.length];
}
async _renderVocabularyExercise() {
if (!this.container) return;
const totalWords = this.currentVocabularyGroup.length;
const progressPercentage = totalWords > 0 ?
Math.round((this.currentWordIndex / totalWords) * 100) : 0;
this.container.innerHTML = `
<div class="vocabulary-exercise">
<div class="exercise-header">
<h2>📚 Vocabulary Practice</h2>
<div class="progress-info">
<span class="progress-text">
Word ${this.currentWordIndex + 1} of ${totalWords}
</span>
<div class="progress-bar">
<div class="progress-fill" style="width: ${progressPercentage}%"></div>
</div>
</div>
</div>
<div class="vocabulary-card" id="vocabulary-card">
<!-- Card content will be populated by _presentCurrentWord -->
</div>
<div class="exercise-controls" id="exercise-controls">
<!-- Controls will be populated dynamically -->
</div>
<div class="group-results" id="group-results" style="display: none;">
<!-- Results will be shown when group is complete -->
</div>
</div>
`;
// Add CSS styles
this._addStyles();
}
_presentCurrentWord() {
if (this.currentWordIndex >= this.currentVocabularyGroup.length) {
this._showGroupResults();
return;
}
const currentWord = this.currentVocabularyGroup[this.currentWordIndex];
const card = document.getElementById('vocabulary-card');
const controls = document.getElementById('exercise-controls');
if (!card || !controls) return;
this.isRevealed = false;
card.innerHTML = `
<div class="word-card">
<div class="word-display">
<h3 class="target-word">${currentWord.word}</h3>
${this.config.showPronunciation && currentWord.pronunciation ?
`<div class="pronunciation">[${currentWord.pronunciation}]</div>` : ''}
<div class="word-type">${currentWord.type || 'word'}</div>
</div>
<div class="answer-section" id="answer-section">
<div class="translation-input">
<label for="translation-input">Translation:</label>
<input type="text"
id="translation-input"
placeholder="Enter the translation..."
autocomplete="off">
</div>
</div>
<div class="revealed-answer" id="revealed-answer" style="display: none;">
<div class="correct-translation">
<strong>Correct Answer:</strong> ${currentWord.translation}
</div>
${this.config.showPronunciation && currentWord.pronunciation ?
`<div class="pronunciation-text">[${currentWord.pronunciation}]</div>` : ''}
</div>
</div>
`;
controls.innerHTML = `
<div class="control-buttons">
<button id="reveal-btn" class="btn-secondary">Reveal Answer</button>
<button id="submit-btn" class="btn-primary">Submit</button>
</div>
`;
// Add event listeners
document.getElementById('reveal-btn').onclick = this._handleRevealAnswer;
document.getElementById('submit-btn').onclick = this._handleUserInput;
// Allow Enter key to submit
const input = document.getElementById('translation-input');
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this._handleUserInput();
}
});
// Focus on input
input.focus();
}
async _handleUserInput() {
const input = document.getElementById('translation-input');
const userInput = input ? input.value.trim() : '';
if (!userInput) {
this._showFeedback('Please enter a translation.', 'warning');
return;
}
// Disable input during validation
this._setInputEnabled(false);
this._showFeedback('Checking answer...', 'info');
try {
const validationResult = await this.validate(userInput, {});
// Store result
this.groupResults[this.currentWordIndex] = {
word: this.currentVocabularyGroup[this.currentWordIndex].word,
userAnswer: userInput,
correct: validationResult.correct,
score: validationResult.score,
feedback: validationResult.feedback,
timestamp: new Date().toISOString()
};
// Show result and difficulty selection
this._showValidationResult(validationResult);
} catch (error) {
console.error('Validation error:', error);
this._showFeedback('Error validating answer. Please try again.', 'error');
this._setInputEnabled(true);
}
}
_handleRevealAnswer() {
const revealedSection = document.getElementById('revealed-answer');
const answerSection = document.getElementById('answer-section');
if (revealedSection && answerSection) {
revealedSection.style.display = 'block';
answerSection.style.display = 'none';
this.isRevealed = true;
// Mark as incorrect since user revealed the answer
this.groupResults[this.currentWordIndex] = {
word: this.currentVocabularyGroup[this.currentWordIndex].word,
userAnswer: '[revealed]',
correct: false,
score: 0,
feedback: 'Answer was revealed',
timestamp: new Date().toISOString()
};
this._showDifficultySelection();
}
}
_showValidationResult(validationResult) {
const feedbackClass = validationResult.correct ? 'success' : 'error';
this._showFeedback(validationResult.feedback, feedbackClass);
// Show correct answer if incorrect
if (!validationResult.correct) {
const revealedSection = document.getElementById('revealed-answer');
if (revealedSection) {
revealedSection.style.display = 'block';
}
}
// Show difficulty selection
setTimeout(() => {
this._showDifficultySelection();
}, 2000);
}
_showDifficultySelection() {
const controls = document.getElementById('exercise-controls');
if (!controls) return;
controls.innerHTML = `
<div class="difficulty-selection">
<p>How difficult was this word?</p>
<div class="difficulty-buttons">
<button class="difficulty-btn btn-error" data-difficulty="again">
Again (< 1 min)
</button>
<button class="difficulty-btn btn-warning" data-difficulty="hard">
Hard (< 6 min)
</button>
<button class="difficulty-btn btn-primary" data-difficulty="good">
Good (< 10 min)
</button>
<button class="difficulty-btn btn-success" data-difficulty="easy">
Easy (< 4 days)
</button>
</div>
</div>
`;
// Add event listeners for difficulty buttons
document.querySelectorAll('.difficulty-btn').forEach(btn => {
btn.onclick = (e) => this._handleDifficultySelection(e.target.dataset.difficulty);
});
}
_handleDifficultySelection(difficulty) {
const currentWord = this.currentVocabularyGroup[this.currentWordIndex];
// Update result with difficulty
if (this.groupResults[this.currentWordIndex]) {
this.groupResults[this.currentWordIndex].difficulty = difficulty;
}
// Mark word as mastered if good or easy
if (['good', 'easy'].includes(difficulty)) {
const metadata = {
difficulty: difficulty,
sessionId: this.orchestrator?.sessionId || 'unknown',
moduleType: 'vocabulary',
attempts: this.groupResults[this.currentWordIndex]?.attempts || 1,
correct: this.groupResults[this.currentWordIndex]?.correct || false
};
this.prerequisiteEngine.markWordMastered(currentWord.word, metadata);
// Also save to persistent storage
if (window.addMasteredItem && this.orchestrator?.bookId && this.orchestrator?.chapterId) {
window.addMasteredItem(
this.orchestrator.bookId,
this.orchestrator.chapterId,
'vocabulary',
currentWord.word,
metadata
);
}
}
console.log(`Word "${currentWord.word}" marked as ${difficulty}`);
// Move to next word
this.currentWordIndex++;
this._presentCurrentWord();
}
_handleNextWord() {
this.currentWordIndex++;
this._presentCurrentWord();
}
_showGroupResults() {
const resultsContainer = document.getElementById('group-results');
const card = document.getElementById('vocabulary-card');
const controls = document.getElementById('exercise-controls');
if (!resultsContainer) return;
const correctCount = this.groupResults.filter(result => result.correct).length;
const totalCount = this.groupResults.length;
const accuracy = totalCount > 0 ? Math.round((correctCount / totalCount) * 100) : 0;
let resultClass = 'results-poor';
if (accuracy >= 80) resultClass = 'results-excellent';
else if (accuracy >= 60) resultClass = 'results-good';
const resultsHTML = `
<div class="group-results-content ${resultClass}">
<h3>📊 Group Results</h3>
<div class="results-summary">
<div class="accuracy-display">
<span class="accuracy-number">${accuracy}%</span>
<span class="accuracy-label">Accuracy</span>
</div>
<div class="count-display">
${correctCount} / ${totalCount} correct
</div>
</div>
<div class="word-results">
${this.groupResults.map((result, index) => `
<div class="word-result ${result.correct ? 'correct' : 'incorrect'}">
<span class="word-name">${result.word}</span>
<span class="user-answer">"${result.userAnswer}"</span>
<span class="result-icon">${result.correct ? '✅' : '❌'}</span>
</div>
`).join('')}
</div>
<div class="results-actions">
<button id="continue-btn" class="btn-primary">Continue to Next Exercise</button>
</div>
</div>
`;
resultsContainer.innerHTML = resultsHTML;
resultsContainer.style.display = 'block';
// Hide other sections
if (card) card.style.display = 'none';
if (controls) controls.style.display = 'none';
// Add continue button listener
document.getElementById('continue-btn').onclick = () => {
// Emit completion event to orchestrator
this.orchestrator._eventBus.emit('drs:exerciseCompleted', {
moduleType: 'vocabulary',
results: this.groupResults,
progress: this.getProgress()
}, 'VocabularyModule');
};
}
_setInputEnabled(enabled) {
const input = document.getElementById('translation-input');
const submitBtn = document.getElementById('submit-btn');
const revealBtn = document.getElementById('reveal-btn');
if (input) input.disabled = !enabled;
if (submitBtn) submitBtn.disabled = !enabled;
if (revealBtn) revealBtn.disabled = !enabled;
}
_showFeedback(message, type = 'info') {
// Create or update feedback element
let feedback = document.getElementById('feedback-message');
if (!feedback) {
feedback = document.createElement('div');
feedback.id = 'feedback-message';
feedback.className = 'feedback-message';
const card = document.getElementById('vocabulary-card');
if (card) {
card.appendChild(feedback);
}
}
feedback.className = `feedback-message feedback-${type}`;
feedback.textContent = message;
feedback.style.display = 'block';
// Auto-hide info messages
if (type === 'info') {
setTimeout(() => {
if (feedback) {
feedback.style.display = 'none';
}
}, 3000);
}
}
_shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
_addStyles() {
if (document.getElementById('vocabulary-module-styles')) return;
const styles = document.createElement('style');
styles.id = 'vocabulary-module-styles';
styles.textContent = `
.vocabulary-exercise {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.exercise-header {
text-align: center;
margin-bottom: 30px;
}
.progress-info {
margin-top: 10px;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
margin-top: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.3s ease;
}
.vocabulary-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.word-display {
text-align: center;
margin-bottom: 30px;
}
.target-word {
font-size: 2.5em;
color: #333;
margin-bottom: 10px;
font-weight: bold;
}
.pronunciation {
font-style: italic;
color: #666;
margin-bottom: 5px;
}
.word-type {
color: #888;
font-size: 0.9em;
text-transform: uppercase;
}
.translation-input {
margin-bottom: 20px;
}
.translation-input label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.translation-input input {
width: 100%;
padding: 12px;
font-size: 1.1em;
border: 2px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
}
.translation-input input:focus {
border-color: #667eea;
outline: none;
}
.revealed-answer {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
}
.correct-translation {
font-size: 1.2em;
color: #28a745;
margin-bottom: 5px;
}
.pronunciation-text {
font-style: italic;
color: #666;
}
.exercise-controls {
text-align: center;
}
.control-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.difficulty-selection {
text-align: center;
}
.difficulty-buttons {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 15px;
}
.difficulty-btn {
padding: 10px 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.3s ease;
}
.group-results-content {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
}
.results-summary {
margin-bottom: 30px;
}
.accuracy-display {
margin-bottom: 10px;
}
.accuracy-number {
font-size: 3em;
font-weight: bold;
display: block;
}
.results-excellent .accuracy-number { color: #28a745; }
.results-good .accuracy-number { color: #ffc107; }
.results-poor .accuracy-number { color: #dc3545; }
.word-results {
text-align: left;
margin-bottom: 30px;
}
.word-result {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 5px;
border-radius: 8px;
background-color: #f8f9fa;
}
.word-result.correct { background-color: #d4edda; }
.word-result.incorrect { background-color: #f8d7da; }
.feedback-message {
padding: 10px;
border-radius: 8px;
margin-top: 15px;
text-align: center;
}
.feedback-info { background-color: #d1ecf1; color: #0c5460; }
.feedback-success { background-color: #d4edda; color: #155724; }
.feedback-warning { background-color: #fff3cd; color: #856404; }
.feedback-error { background-color: #f8d7da; color: #721c24; }
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-success { background-color: #28a745; color: white; }
.btn-warning { background-color: #ffc107; color: #212529; }
.btn-error { background-color: #dc3545; color: white; }
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
`;
document.head.appendChild(styles);
}
}
export default VocabularyModule;

61
src/DRS/interfaces/ExerciseModuleInterface.js Normal file
View File

@ -0,0 +1,61 @@
/**
* ExerciseModuleInterface - Standard interface for all exercise modules
* All exercise modules must implement these methods
*/
class ExerciseModuleInterface {
/**
* Check if module can run with current prerequisites
* @param {Array} prerequisites - List of learned vocabulary/concepts
* @param {Object} chapterContent - Full chapter content
* @returns {boolean} - True if module can run
*/
canRun(prerequisites, chapterContent) {
throw new Error('ExerciseModuleInterface.canRun() must be implemented by subclass');
}
/**
* Present exercise UI and content
* @param {HTMLElement} container - DOM container to render into
* @param {Object} exerciseData - Specific exercise data to present
* @returns {Promise<void>}
*/
async present(container, exerciseData) {
throw new Error('ExerciseModuleInterface.present() must be implemented by subclass');
}
/**
* Validate user input with LLM
* @param {string} userInput - User's response
* @param {Object} context - Exercise context and expected answer
* @returns {Promise<ValidationResult>} - Validation result with score and feedback
*/
async validate(userInput, context) {
throw new Error('ExerciseModuleInterface.validate() must be implemented by subclass');
}
/**
* Get current progress data
* @returns {ProgressData} - Progress information for this module
*/
getProgress() {
throw new Error('ExerciseModuleInterface.getProgress() must be implemented by subclass');
}
/**
* Clean up and prepare for unloading
*/
cleanup() {
throw new Error('ExerciseModuleInterface.cleanup() must be implemented by subclass');
}
/**
* Get module metadata
* @returns {Object} - Module information
*/
getMetadata() {
throw new Error('ExerciseModuleInterface.getMetadata() must be implemented by subclass');
}
}
export default ExerciseModuleInterface;

563
src/DRS/services/AIReportSystem.js Normal file
View File

@ -0,0 +1,563 @@
/**
* AIReportSystem - Système d'export et de rapport des explications de l'IA
* Capture et formate les réponses détaillées de l'IAEngine pour les étudiants
*/
class AIReportSystem {
constructor(config = {}) {
this.config = {
includeTimestamps: config.includeTimestamps !== false,
formatStyle: config.formatStyle || 'detailed', // 'detailed', 'summary', 'json'
language: config.language || 'fr',
includeScores: config.includeScores !== false,
...config
};
// Stockage des sessions d'apprentissage
this.sessionReports = new Map();
this.currentSessionId = null;
}
/**
* Démarre une nouvelle session de rapport
* @param {Object} sessionInfo - Informations de la session
* @returns {string} - ID de session
*/
startSession(sessionInfo = {}) {
const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
const session = {
id: sessionId,
startTime: new Date(),
endTime: null,
exerciseCount: 0,
totalScore: 0,
averageScore: 0,
sessionInfo: {
bookId: sessionInfo.bookId || 'unknown',
chapterId: sessionInfo.chapterId || 'unknown',
difficulty: sessionInfo.difficulty || 'medium',
exerciseTypes: sessionInfo.exerciseTypes || [],
...sessionInfo
},
exercises: [],
aiInteractions: [],
summary: {
strengths: [],
areasForImprovement: [],
keyLearnings: [],
recommendations: []
}
};
this.sessionReports.set(sessionId, session);
this.currentSessionId = sessionId;
console.log(`📊 Started AI report session: ${sessionId}`);
return sessionId;
}
/**
* Ajoute une réponse IA au rapport
* @param {Object} aiResponse - Réponse de l'IAEngine
* @param {Object} exerciseContext - Contexte de l'exercice
*/
addAIResponse(aiResponse, exerciseContext = {}) {
if (!this.currentSessionId) {
console.warn('⚠️ No active session for AI report');
return;
}
const session = this.sessionReports.get(this.currentSessionId);
if (!session) {
console.error('❌ Session not found:', this.currentSessionId);
return;
}
// Créer l'entrée de rapport
const reportEntry = {
timestamp: new Date(),
exerciseType: exerciseContext.exerciseType || 'unknown',
exerciseStep: exerciseContext.exerciseStep || 0,
originalContent: exerciseContext.originalContent || '',
userAnswer: exerciseContext.userAnswer || '',
aiResponse: {
score: aiResponse.score || 0,
correct: aiResponse.correct || false,
feedback: aiResponse.feedback || '',
encouragement: aiResponse.encouragement || '',
keyPoints: aiResponse.keyPoints || [],
mainPointsUnderstood: aiResponse.mainPointsUnderstood || [],
grammarErrors: aiResponse.grammarErrors || [],
grammarStrengths: aiResponse.grammarStrengths || [],
suggestion: aiResponse.suggestion || '',
vocabularyUsed: aiResponse.vocabularyUsed || [],
creativityScore: aiResponse.creativityScore || null
},
context: {
difficulty: exerciseContext.difficulty || session.sessionInfo.difficulty,
exerciseNumber: session.exerciseCount + 1,
...exerciseContext
}
};
// Ajouter au rapport de session
session.exercises.push(reportEntry);
session.aiInteractions.push(reportEntry);
session.exerciseCount++;
if (aiResponse.score !== undefined) {
session.totalScore += aiResponse.score;
session.averageScore = session.totalScore / session.exerciseCount;
}
// Extraire les points d'apprentissage
this._extractLearningPoints(reportEntry, session);
console.log(`📝 Added AI response to report (Exercise ${session.exerciseCount})`);
}
/**
* Extrait les points d'apprentissage de la réponse IA
* @private
*/
_extractLearningPoints(reportEntry, session) {
const response = reportEntry.aiResponse;
// Points forts
if (response.grammarStrengths && response.grammarStrengths.length > 0) {
response.grammarStrengths.forEach(strength => {
if (!session.summary.strengths.includes(strength)) {
session.summary.strengths.push(strength);
}
});
}
// Domaines d'amélioration
if (response.grammarErrors && response.grammarErrors.length > 0) {
response.grammarErrors.forEach(error => {
if (!session.summary.areasForImprovement.includes(error)) {
session.summary.areasForImprovement.push(error);
}
});
}
// Points clés compris
if (response.keyPoints && response.keyPoints.length > 0) {
response.keyPoints.forEach(point => {
if (!session.summary.keyLearnings.includes(point)) {
session.summary.keyLearnings.push(point);
}
});
}
// Suggestions
if (response.suggestion && !session.summary.recommendations.includes(response.suggestion)) {
session.summary.recommendations.push(response.suggestion);
}
}
/**
* Termine la session actuelle
*/
endSession() {
if (!this.currentSessionId) {
console.warn('⚠️ No active session to end');
return;
}
const session = this.sessionReports.get(this.currentSessionId);
if (session) {
session.endTime = new Date();
session.duration = session.endTime - session.startTime;
}
console.log(`📊 Ended AI report session: ${this.currentSessionId}`);
this.currentSessionId = null;
}
/**
* Génère un rapport de session formaté
* @param {string} sessionId - ID de la session (optionnel, utilise la session courante si non spécifié)
* @param {string} format - Format du rapport ('text', 'html', 'json')
* @returns {string} - Rapport formaté
*/
generateReport(sessionId = null, format = 'text') {
const targetSessionId = sessionId || this.currentSessionId;
if (!targetSessionId) {
throw new Error('No session available for report generation');
}
const session = this.sessionReports.get(targetSessionId);
if (!session) {
throw new Error(`Session not found: ${targetSessionId}`);
}
switch (format.toLowerCase()) {
case 'html':
return this._generateHTMLReport(session);
case 'json':
return this._generateJSONReport(session);
case 'text':
default:
return this._generateTextReport(session);
}
}
/**
* Génère un rapport texte formaté
* @private
*/
_generateTextReport(session) {
const lines = [];
// En-tête
lines.push('='.repeat(60));
lines.push('📚 RAPPORT D\'APPRENTISSAGE IA');
lines.push('='.repeat(60));
lines.push('');
// Informations de session
lines.push(`📖 Livre/Chapitre: ${session.sessionInfo.bookId}/${session.sessionInfo.chapterId}`);
lines.push(`🎯 Difficulté: ${session.sessionInfo.difficulty}`);
lines.push(`📅 Date: ${session.startTime.toLocaleDateString('fr-FR')}`);
lines.push(`⏱️ Heure: ${session.startTime.toLocaleTimeString('fr-FR')}`);
if (session.endTime) {
const duration = Math.round((session.endTime - session.startTime) / 1000 / 60);
lines.push(`⏰ Durée: ${duration} minutes`);
}
lines.push('');
// Statistiques générales
lines.push('📊 STATISTIQUES GÉNÉRALES');
lines.push('-'.repeat(30));
lines.push(`• Exercices complétés: ${session.exerciseCount}`);
if (session.averageScore > 0) {
lines.push(`• Score moyen: ${Math.round(session.averageScore)}%`);
}
lines.push('');
// Détails des exercices
if (session.exercises.length > 0) {
lines.push('📝 DÉTAIL DES EXERCICES');
lines.push('-'.repeat(30));
session.exercises.forEach((exercise, index) => {
const response = exercise.aiResponse;
lines.push(`\n${index + 1}. ${exercise.exerciseType.toUpperCase()} (${exercise.timestamp.toLocaleTimeString('fr-FR')})`);
if (exercise.originalContent) {
lines.push(` 💡 Contenu: ${exercise.originalContent.substring(0, 100)}${exercise.originalContent.length > 100 ? '...' : ''}`);
}
if (exercise.userAnswer) {
lines.push(` ✏️ Réponse: ${exercise.userAnswer}`);
}
if (response.score !== undefined) {
lines.push(` 🎯 Score: ${response.score}% ${response.correct ? '✅' : '❌'}`);
}
if (response.feedback) {
lines.push(` 📢 Retour: ${response.feedback}`);
}
if (response.encouragement) {
lines.push(` 💪 Encouragement: ${response.encouragement}`);
}
if (response.keyPoints && response.keyPoints.length > 0) {
lines.push(` 🔑 Points clés: ${response.keyPoints.join(', ')}`);
}
if (response.suggestion) {
lines.push(` 💡 Suggestion: ${response.suggestion}`);
}
});
}
// Résumé d'apprentissage
lines.push('\n📈 RÉSUMÉ D\'APPRENTISSAGE');
lines.push('-'.repeat(30));
if (session.summary.strengths.length > 0) {
lines.push('\n✅ Points forts:');
session.summary.strengths.forEach(strength => lines.push(` • ${strength}`));
}
if (session.summary.areasForImprovement.length > 0) {
lines.push('\n🔄 Domaines d\'amélioration:');
session.summary.areasForImprovement.forEach(area => lines.push(` • ${area}`));
}
if (session.summary.keyLearnings.length > 0) {
lines.push('\n🧠 Apprentissages clés:');
session.summary.keyLearnings.forEach(learning => lines.push(` • ${learning}`));
}
if (session.summary.recommendations.length > 0) {
lines.push('\n🎯 Recommandations:');
session.summary.recommendations.forEach(rec => lines.push(` • ${rec}`));
}
lines.push('\n' + '='.repeat(60));
lines.push('🎓 Rapport généré par Class Generator 2.0');
lines.push('='.repeat(60));
return lines.join('\n');
}
/**
* Génère un rapport HTML formaté
* @private
*/
_generateHTMLReport(session) {
const html = `
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rapport d'Apprentissage IA - ${session.sessionInfo.bookId}</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 20px; }
.stats { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; }
.exercise { border-left: 4px solid #007bff; padding: 15px; margin: 15px 0; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.score-good { color: #28a745; font-weight: bold; }
.score-medium { color: #ffc107; font-weight: bold; }
.score-poor { color: #dc3545; font-weight: bold; }
.summary { background: #e9ecef; padding: 20px; border-radius: 8px; margin-top: 20px; }
.tag { display: inline-block; background: #007bff; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.8em; margin: 2px; }
.feedback { font-style: italic; color: #666; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 5px; }
.encouragement { color: #28a745; font-weight: 500; margin: 10px 0; }
</style>
</head>
<body>
<div class="header">
<h1>📚 Rapport d'Apprentissage IA</h1>
<p>${session.sessionInfo.bookId} - ${session.sessionInfo.chapterId}</p>
<p>${session.startTime.toLocaleDateString('fr-FR')} à ${session.startTime.toLocaleTimeString('fr-FR')}</p>
</div>
<div class="stats">
<h3>📊 Statistiques</h3>
<p><strong>Exercices complétés:</strong> ${session.exerciseCount}</p>
${session.averageScore > 0 ? `<p><strong>Score moyen:</strong> <span class="${this._getScoreClass(session.averageScore)}">${Math.round(session.averageScore)}%</span></p>` : ''}
<p><strong>Difficulté:</strong> ${session.sessionInfo.difficulty}</p>
${session.duration ? `<p><strong>Durée:</strong> ${Math.round(session.duration / 1000 / 60)} minutes</p>` : ''}
</div>
<h3>📝 Détail des exercices</h3>
${session.exercises.map((exercise, index) => `
<div class="exercise">
<h4>${index + 1}. ${exercise.exerciseType.toUpperCase()} - ${exercise.timestamp.toLocaleTimeString('fr-FR')}</h4>
${exercise.originalContent ? `<p><strong>💡 Contenu:</strong> ${exercise.originalContent}</p>` : ''}
${exercise.userAnswer ? `<p><strong>✏️ Votre réponse:</strong> ${exercise.userAnswer}</p>` : ''}
${exercise.aiResponse.score !== undefined ? `
<p><strong>🎯 Score:</strong>
<span class="${this._getScoreClass(exercise.aiResponse.score)}">${exercise.aiResponse.score}%</span>
${exercise.aiResponse.correct ? '✅' : '❌'}
</p>
` : ''}
${exercise.aiResponse.feedback ? `<div class="feedback">📢 <strong>Retour:</strong> ${exercise.aiResponse.feedback}</div>` : ''}
${exercise.aiResponse.encouragement ? `<div class="encouragement">💪 ${exercise.aiResponse.encouragement}</div>` : ''}
${exercise.aiResponse.keyPoints && exercise.aiResponse.keyPoints.length > 0 ? `
<p><strong>🔑 Points clés:</strong><br>
${exercise.aiResponse.keyPoints.map(point => `<span class="tag">${point}</span>`).join('')}</p>
` : ''}
${exercise.aiResponse.suggestion ? `<p><strong>💡 Suggestion:</strong> ${exercise.aiResponse.suggestion}</p>` : ''}
</div>
`).join('')}
<div class="summary">
<h3>📈 Résumé d'apprentissage</h3>
${session.summary.strengths.length > 0 ? `
<h4>✅ Points forts</h4>
<ul>${session.summary.strengths.map(s => `<li>${s}</li>`).join('')}</ul>
` : ''}
${session.summary.areasForImprovement.length > 0 ? `
<h4>🔄 Domaines d'amélioration</h4>
<ul>${session.summary.areasForImprovement.map(a => `<li>${a}</li>`).join('')}</ul>
` : ''}
${session.summary.keyLearnings.length > 0 ? `
<h4>🧠 Apprentissages clés</h4>
<ul>${session.summary.keyLearnings.map(l => `<li>${l}</li>`).join('')}</ul>
` : ''}
${session.summary.recommendations.length > 0 ? `
<h4>🎯 Recommandations</h4>
<ul>${session.summary.recommendations.map(r => `<li>${r}</li>`).join('')}</ul>
` : ''}
</div>
<footer style="text-align: center; margin-top: 40px; color: #666; border-top: 1px solid #ddd; padding-top: 20px;">
🎓 Rapport généré par Class Generator 2.0 - ${new Date().toLocaleDateString('fr-FR')}
</footer>
</body>
</html>`;
return html;
}
/**
* Génère un rapport JSON
* @private
*/
_generateJSONReport(session) {
return JSON.stringify(session, null, 2);
}
/**
* Obtient la classe CSS pour un score
* @private
*/
_getScoreClass(score) {
if (score >= 80) return 'score-good';
if (score >= 60) return 'score-medium';
return 'score-poor';
}
/**
* Exporte un rapport vers un fichier
* @param {string} sessionId - ID de la session
* @param {string} format - Format du fichier ('text', 'html', 'json')
* @param {string} filename - Nom du fichier (optionnel)
* @returns {string} - URL de téléchargement
*/
exportReport(sessionId = null, format = 'text', filename = null) {
const session = this.sessionReports.get(sessionId || this.currentSessionId);
if (!session) {
throw new Error('Session not found for export');
}
const content = this.generateReport(sessionId, format);
// Créer le nom de fichier
const defaultFilename = `rapport_ia_${session.sessionInfo.bookId}_${session.sessionInfo.chapterId}_${new Date().toISOString().split('T')[0]}.${format}`;
const finalFilename = filename || defaultFilename;
// Créer un blob et une URL de téléchargement
const mimeTypes = {
'text': 'text/plain;charset=utf-8',
'html': 'text/html;charset=utf-8',
'json': 'application/json;charset=utf-8'
};
const blob = new Blob([content], { type: mimeTypes[format] || 'text/plain' });
const url = URL.createObjectURL(blob);
// Déclencher le téléchargement
const a = document.createElement('a');
a.href = url;
a.download = finalFilename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// Nettoyer l'URL
setTimeout(() => URL.revokeObjectURL(url), 100);
console.log(`📥 Exported AI report: ${finalFilename}`);
return url;
}
/**
* Obtient toutes les sessions
* @returns {Array} - Liste des sessions
*/
getAllSessions() {
return Array.from(this.sessionReports.values());
}
/**
* Supprime une session
* @param {string} sessionId - ID de la session à supprimer
*/
deleteSession(sessionId) {
if (this.sessionReports.delete(sessionId)) {
console.log(`🗑️ Deleted AI report session: ${sessionId}`);
// Si c'est la session courante, la réinitialiser
if (this.currentSessionId === sessionId) {
this.currentSessionId = null;
}
}
}
/**
* Nettoie les anciennes sessions (plus de X jours)
* @param {number} daysOld - Nombre de jours (défaut: 30)
*/
cleanupOldSessions(daysOld = 30) {
const cutoffDate = new Date();
cutoffDate.setDate(cutoffDate.getDate() - daysOld);
let deletedCount = 0;
for (const [sessionId, session] of this.sessionReports.entries()) {
if (session.startTime < cutoffDate) {
this.sessionReports.delete(sessionId);
deletedCount++;
}
}
console.log(`🧹 Cleaned up ${deletedCount} old AI report sessions`);
}
/**
* Obtient les statistiques globales de toutes les sessions
* @returns {Object} - Statistiques globales
*/
getGlobalStats() {
const sessions = this.getAllSessions();
if (sessions.length === 0) {
return {
totalSessions: 0,
totalExercises: 0,
averageScore: 0,
mostCommonExerciseType: null,
totalTimeSpent: 0
};
}
const totalExercises = sessions.reduce((sum, session) => sum + session.exerciseCount, 0);
const totalScore = sessions.reduce((sum, session) => sum + session.totalScore, 0);
const averageScore = totalExercises > 0 ? totalScore / totalExercises : 0;
// Types d'exercices les plus courants
const exerciseTypes = {};
sessions.forEach(session => {
session.exercises.forEach(exercise => {
exerciseTypes[exercise.exerciseType] = (exerciseTypes[exercise.exerciseType] || 0) + 1;
});
});
const mostCommonExerciseType = Object.keys(exerciseTypes).reduce((a, b) =>
exerciseTypes[a] > exerciseTypes[b] ? a : b, null);
// Temps total passé
const totalTimeSpent = sessions
.filter(session => session.duration)
.reduce((sum, session) => sum + session.duration, 0);
return {
totalSessions: sessions.length,
totalExercises,
averageScore: Math.round(averageScore),
mostCommonExerciseType,
totalTimeSpent: Math.round(totalTimeSpent / 1000 / 60), // en minutes
exerciseTypeDistribution: exerciseTypes
};
}
}
export default AIReportSystem;

474
src/DRS/services/ContextMemory.js Normal file
View File

@ -0,0 +1,474 @@
/**
* ContextMemory - Progressive context building service
* Stores user responses and builds context for sequential exercises
*/
class ContextMemory {
constructor() {
this.sessions = new Map(); // sessionId -> session data
this.currentSessionId = null;
this.maxHistoryLength = 50; // Maximum number of interactions to remember
this.contextTypes = ['vocabulary', 'phrase', 'text', 'audio', 'image', 'grammar'];
}
/**
* Start a new session
* @param {string} sessionId - Unique session identifier
* @param {Object} sessionData - Initial session data
*/
startSession(sessionId, sessionData = {}) {
this.currentSessionId = sessionId;
this.sessions.set(sessionId, {
id: sessionId,
startTime: new Date().toISOString(),
chapterData: sessionData,
interactions: [],
contextBuilders: {
vocabulary: new Map(), // word -> interaction history
phrase: new Map(), // phrase -> interaction history
text: new Map(), // text -> progressive context
audio: new Map(), // audio -> comprehension context
image: new Map(), // image -> description context
grammar: new Map() // grammar concept -> usage context
},
progressiveContext: {
currentText: null,
accumulatedSentences: [],
currentDialog: null,
accumulatedDialogLines: [],
learningPath: []
}
});
console.log(`🧠 Context memory session started: ${sessionId}`);
}
/**
* End current session and cleanup
* @param {string} sessionId - Session to end (optional, defaults to current)
*/
endSession(sessionId = null) {
const targetSessionId = sessionId || this.currentSessionId;
if (this.sessions.has(targetSessionId)) {
const session = this.sessions.get(targetSessionId);
session.endTime = new Date().toISOString();
session.duration = new Date(session.endTime) - new Date(session.startTime);
console.log(`🧠 Context memory session ended: ${targetSessionId} (${session.interactions.length} interactions)`);
}
if (targetSessionId === this.currentSessionId) {
this.currentSessionId = null;
}
}
/**
* Record an interaction and build context
* @param {Object} interaction - Interaction data
* @returns {Object} - Updated context for this interaction type
*/
recordInteraction(interaction) {
if (!this.currentSessionId) {
throw new Error('No active session. Call startSession() first.');
}
const session = this.sessions.get(this.currentSessionId);
// Add timestamp and normalize interaction
const normalizedInteraction = {
timestamp: new Date().toISOString(),
type: interaction.type || 'unknown',
subtype: interaction.subtype || 'general',
content: interaction.content || {},
userResponse: interaction.userResponse || '',
validation: interaction.validation || {},
context: interaction.context || {},
...interaction
};
// Store interaction
session.interactions.push(normalizedInteraction);
// Build type-specific context
this._buildContextForType(session, normalizedInteraction);
// Build progressive context if applicable
this._buildProgressiveContext(session, normalizedInteraction);
// Maintain history limits
this._maintainHistoryLimits(session);
console.log(`🧠 Recorded ${normalizedInteraction.type} interaction`);
return this.getContextForType(normalizedInteraction.type, normalizedInteraction.content);
}
/**
* Get context for a specific exercise type
* @param {string} exerciseType - Type of exercise
* @param {Object} content - Exercise content for context matching
* @returns {Object} - Context information
*/
getContextForType(exerciseType, content = {}) {
if (!this.currentSessionId) {
return { history: [], progressiveContext: {} };
}
const session = this.sessions.get(this.currentSessionId);
const contextBuilder = session.contextBuilders[exerciseType];
if (!contextBuilder) {
return { history: [], progressiveContext: session.progressiveContext };
}
// Get relevant history based on content
const relevantHistory = this._getRelevantHistory(session, exerciseType, content);
return {
history: relevantHistory,
progressiveContext: session.progressiveContext,
typeSpecificContext: this._getTypeSpecificContext(session, exerciseType, content)
};
}
/**
* Get full session history
* @param {string} sessionId - Session ID (optional, defaults to current)
* @returns {Array} - Session interaction history
*/
getSessionHistory(sessionId = null) {
const targetSessionId = sessionId || this.currentSessionId;
if (!targetSessionId || !this.sessions.has(targetSessionId)) {
return [];
}
return this.sessions.get(targetSessionId).interactions;
}
/**
* Get context summary for LLM prompts
* @param {string} exerciseType - Type of current exercise
* @param {Object} content - Current exercise content
* @returns {string} - Formatted context summary
*/
getContextSummary(exerciseType, content = {}) {
const context = this.getContextForType(exerciseType, content);
if (!context.history.length) {
return 'No previous context.';
}
// Format recent relevant interactions for LLM
const recentInteractions = context.history.slice(-5); // Last 5 relevant interactions
const summary = recentInteractions.map(interaction => {
const score = interaction.validation.score || 'N/A';
const correct = interaction.validation.correct ? '✅' : '❌';
return `${interaction.type}: "${interaction.userResponse}" ${correct} (${score})`;
}).join('\n');
// Add progressive context if applicable
let progressiveInfo = '';
if (context.progressiveContext.accumulatedSentences.length > 0) {
progressiveInfo = `\nProgressive text context: ${context.progressiveContext.accumulatedSentences.length} previous sentences`;
}
return `Recent context:\n${summary}${progressiveInfo}`;
}
/**
* Clear session data
* @param {string} sessionId - Session to clear (optional, defaults to current)
*/
clearSession(sessionId = null) {
const targetSessionId = sessionId || this.currentSessionId;
if (this.sessions.has(targetSessionId)) {
this.sessions.delete(targetSessionId);
console.log(`🧹 Context memory cleared for session: ${targetSessionId}`);
}
if (targetSessionId === this.currentSessionId) {
this.currentSessionId = null;
}
}
/**
* Get memory statistics
* @returns {Object} - Memory usage statistics
*/
getStats() {
return {
activeSessions: this.sessions.size,
currentSessionId: this.currentSessionId,
currentSessionInteractions: this.currentSessionId ?
this.sessions.get(this.currentSessionId)?.interactions.length || 0 : 0,
totalInteractions: Array.from(this.sessions.values())
.reduce((total, session) => total + session.interactions.length, 0)
};
}
// Private Methods
_buildContextForType(session, interaction) {
const { type, content } = interaction;
const contextBuilder = session.contextBuilders[type];
if (!contextBuilder) return;
// Create or update type-specific context
switch (type) {
case 'vocabulary':
this._buildVocabularyContext(contextBuilder, interaction);
break;
case 'phrase':
this._buildPhraseContext(contextBuilder, interaction);
break;
case 'text':
this._buildTextContext(contextBuilder, interaction);
break;
case 'audio':
this._buildAudioContext(contextBuilder, interaction);
break;
case 'image':
this._buildImageContext(contextBuilder, interaction);
break;
case 'grammar':
this._buildGrammarContext(contextBuilder, interaction);
break;
}
}
_buildVocabularyContext(contextBuilder, interaction) {
const words = interaction.content.vocabulary || [];
words.forEach(wordData => {
const word = wordData.word;
if (!contextBuilder.has(word)) {
contextBuilder.set(word, []);
}
contextBuilder.get(word).push({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
attempts: contextBuilder.get(word).length + 1
});
});
}
_buildPhraseContext(contextBuilder, interaction) {
const phraseKey = interaction.content.phrase?.id ||
interaction.content.phrase?.english ||
`phrase_${interaction.timestamp}`;
if (!contextBuilder.has(phraseKey)) {
contextBuilder.set(phraseKey, []);
}
contextBuilder.get(phraseKey).push({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
attempts: contextBuilder.get(phraseKey).length + 1
});
}
_buildTextContext(contextBuilder, interaction) {
const textKey = interaction.content.text?.id ||
`text_${interaction.content.textIndex || 0}`;
if (!contextBuilder.has(textKey)) {
contextBuilder.set(textKey, {
sentences: [],
responses: []
});
}
const textContext = contextBuilder.get(textKey);
textContext.responses.push({
timestamp: interaction.timestamp,
sentenceIndex: interaction.content.sentenceIndex || 0,
userResponse: interaction.userResponse,
validation: interaction.validation
});
}
_buildAudioContext(contextBuilder, interaction) {
const audioKey = interaction.content.audio?.id ||
`audio_${interaction.timestamp}`;
if (!contextBuilder.has(audioKey)) {
contextBuilder.set(audioKey, []);
}
contextBuilder.get(audioKey).push({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
comprehensionLevel: interaction.validation.score || 0
});
}
_buildImageContext(contextBuilder, interaction) {
const imageKey = interaction.content.image?.id ||
`image_${interaction.timestamp}`;
if (!contextBuilder.has(imageKey)) {
contextBuilder.set(imageKey, []);
}
contextBuilder.get(imageKey).push({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
vocabularyUsed: interaction.validation.vocabularyUsed || []
});
}
_buildGrammarContext(contextBuilder, interaction) {
const grammarConcepts = interaction.content.grammarConcepts || ['general'];
grammarConcepts.forEach(concept => {
if (!contextBuilder.has(concept)) {
contextBuilder.set(concept, []);
}
contextBuilder.get(concept).push({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
errors: interaction.validation.grammarErrors || [],
strengths: interaction.validation.grammarStrengths || []
});
});
}
_buildProgressiveContext(session, interaction) {
const { type, content } = interaction;
const progressive = session.progressiveContext;
// Handle text progression (sentence by sentence)
if (type === 'text') {
const textId = content.text?.id || `text_${content.textIndex || 0}`;
if (progressive.currentText !== textId) {
// New text - reset accumulated sentences
progressive.currentText = textId;
progressive.accumulatedSentences = [];
}
// Add current sentence to accumulation
if (content.sentence) {
progressive.accumulatedSentences.push({
index: content.sentenceIndex || progressive.accumulatedSentences.length,
sentence: content.sentence,
userResponse: interaction.userResponse,
validation: interaction.validation,
timestamp: interaction.timestamp
});
}
}
// Handle dialog progression
if (type === 'dialog') {
const dialogId = content.dialog?.id || `dialog_${content.dialogIndex || 0}`;
if (progressive.currentDialog !== dialogId) {
progressive.currentDialog = dialogId;
progressive.accumulatedDialogLines = [];
}
if (content.line) {
progressive.accumulatedDialogLines.push({
index: content.lineIndex || progressive.accumulatedDialogLines.length,
line: content.line,
userResponse: interaction.userResponse,
validation: interaction.validation,
timestamp: interaction.timestamp
});
}
}
// Track learning path
progressive.learningPath.push({
type,
timestamp: interaction.timestamp,
success: interaction.validation.correct || false,
score: interaction.validation.score || 0
});
}
_getRelevantHistory(session, exerciseType, content) {
// Get recent interactions of the same type
return session.interactions
.filter(interaction => interaction.type === exerciseType)
.slice(-10) // Last 10 interactions of this type
.map(interaction => ({
timestamp: interaction.timestamp,
userResponse: interaction.userResponse,
validation: interaction.validation,
content: interaction.content
}));
}
_getTypeSpecificContext(session, exerciseType, content) {
const contextBuilder = session.contextBuilders[exerciseType];
if (!contextBuilder) return {};
// Return type-specific context based on current content
const context = {};
// Add relevant context based on exercise type and content
if (exerciseType === 'text' && session.progressiveContext.currentText) {
context.previousSentences = session.progressiveContext.accumulatedSentences;
}
if (exerciseType === 'dialog' && session.progressiveContext.currentDialog) {
context.previousLines = session.progressiveContext.accumulatedDialogLines;
}
return context;
}
_maintainHistoryLimits(session) {
// Limit interaction history to prevent memory bloat
if (session.interactions.length > this.maxHistoryLength) {
session.interactions = session.interactions.slice(-this.maxHistoryLength);
}
// Clean up old context builders
Object.values(session.contextBuilders).forEach(builder => {
if (builder instanceof Map) {
builder.forEach((value, key) => {
if (Array.isArray(value) && value.length > 20) {
// Keep only recent 20 entries per item
builder.set(key, value.slice(-20));
}
});
}
});
// Limit progressive context
if (session.progressiveContext.accumulatedSentences.length > 10) {
session.progressiveContext.accumulatedSentences =
session.progressiveContext.accumulatedSentences.slice(-10);
}
if (session.progressiveContext.learningPath.length > 50) {
session.progressiveContext.learningPath =
session.progressiveContext.learningPath.slice(-50);
}
}
/**
* Cleanup all sessions
*/
cleanup() {
this.sessions.clear();
this.currentSessionId = null;
console.log('🧹 Context memory completely cleared');
}
}
export default ContextMemory;

745
src/DRS/services/IAEngine.js Normal file
View File

@ -0,0 +1,745 @@
/**
* IAEngine - Intelligence Artificielle Engine pour les exercices éducatifs
* Basé sur LLMManager.js mais adapté pour ES6 modules et contexte éducatif
*/
class IAEngine {
constructor(config = {}) {
// Configuration par défaut
this.config = {
defaultProvider: config.defaultProvider || 'openai',
fallbackProviders: config.fallbackProviders || ['deepseek'], // OpenAI -> DeepSeek -> Disable
timeout: config.timeout || 30000, // 30 secondes
maxRetries: config.maxRetries || 3,
retryDelay: config.retryDelay || 1000,
enableFallback: config.enableFallback !== false,
debug: config.debug || true, // Enable debug par défaut pour voir le fallback
disableOnAllFailed: config.disableOnAllFailed !== false, // Désactive si tous échouent
...config
};
// Configuration des providers LLM
this.providers = {
openai: {
endpoint: 'https://api.openai.com/v1/chat/completions',
model: 'gpt-4o-mini',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
temperature: 0.3, // Plus conservateur pour l'éducation
maxTokens: 1000,
timeout: 30000,
retries: 3
},
claude: {
endpoint: 'https://api.anthropic.com/v1/messages',
model: 'claude-3-haiku-20240307',
headers: {
'x-api-key': '{API_KEY}',
'Content-Type': 'application/json',
'anthropic-version': '2023-06-01'
},
temperature: 0.3,
maxTokens: 1000,
timeout: 30000,
retries: 3
},
deepseek: {
endpoint: 'https://api.deepseek.com/v1/chat/completions',
model: 'deepseek-chat',
headers: {
'Authorization': 'Bearer {API_KEY}',
'Content-Type': 'application/json'
},
temperature: 0.3,
maxTokens: 1000,
timeout: 30000,
retries: 3
}
};
// Cache pour éviter les appels répétés
this.cache = new Map();
this.stats = {
totalRequests: 0,
successfulRequests: 0,
failedRequests: 0,
cacheHits: 0,
providerUsage: {}
};
// Variables d'environnement simulées (en production, celles-ci viendraient du serveur)
this.apiKeys = null;
this.consecutiveErrors = 0;
this.maxConsecutiveErrors = 5;
// État de disponibilité des providers
this.providerStatus = {
openai: { available: null, lastTested: null, consecutiveFailures: 0 },
deepseek: { available: null, lastTested: null, consecutiveFailures: 0 }
};
this.aiDisabled = false; // État global : IA complètement désactivée
this.disableReason = null;
this._initializeApiKeys();
}
/**
* Initialise les clés API (simulation, en production elles viendraient du serveur)
*/
async _initializeApiKeys() {
// En développement, on peut simuler les clés API
// En production, ces clés devraient venir du serveur via un endpoint sécurisé
try {
// Essayer de récupérer les clés depuis le serveur
const response = await fetch('/api/llm-config', {
method: 'GET',
credentials: 'same-origin'
});
if (response.ok) {
this.apiKeys = await response.json();
this._log('✅ API keys loaded from server');
} else {
throw new Error('Server API keys not available');
}
} catch (error) {
this._log('⚠️ Using mock mode - server keys not available');
// En cas d'échec, utiliser le mode mock
this.apiKeys = { mock: true };
}
}
/**
* Appel principal à un LLM pour validation éducative
* @param {string} prompt - Le prompt éducatif à envoyer
* @param {Object} options - Options personnalisées
* @returns {Promise<Object>} - Réponse structurée
*/
async validateEducationalContent(prompt, options = {}) {
const startTime = Date.now();
this.stats.totalRequests++;
// Vérifier si l'IA est complètement désactivée
if (this.aiDisabled) {
this._log('🚫 AI system is disabled, using mock validation');
this.stats.failedRequests++;
return this._generateMockValidation(prompt, options);
}
// Vérification du cache
const cacheKey = this._generateCacheKey(prompt, options);
if (this.cache.has(cacheKey)) {
this.stats.cacheHits++;
this._log('📦 Cache hit for educational validation');
return this.cache.get(cacheKey);
}
// Ordre de fallback : OpenAI -> DeepSeek -> Disable
const providers = this._getProviderOrder(options.preferredProvider);
let lastError = null;
let allProvidersFailed = true;
for (const provider of providers) {
// Vérifier si le provider est marqué comme non disponible
if (this.providerStatus[provider]?.available === false) {
this._log(`⏭️ Skipping ${provider.toUpperCase()} - marked as unavailable`);
continue;
}
try {
this._log(`🤖 Attempting ${provider.toUpperCase()} for educational validation`);
const result = await this._callProvider(provider, prompt, options);
// Succès : mettre à jour le statut du provider
this.providerStatus[provider] = {
available: true,
lastTested: new Date().toISOString(),
consecutiveFailures: 0,
lastDuration: Date.now() - startTime
};
// Cache le résultat
this.cache.set(cacheKey, result);
// Nettoyer le cache si il devient trop gros
if (this.cache.size > 1000) {
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
// Mettre à jour les stats
this.stats.successfulRequests++;
this.consecutiveErrors = 0;
this._updateProviderStats(provider, Date.now() - startTime, true);
allProvidersFailed = false;
this._log(`✅ ${provider.toUpperCase()} educational validation successful (${Date.now() - startTime}ms)`);
return result;
} catch (error) {
lastError = error;
this.consecutiveErrors++;
this._updateProviderStats(provider, Date.now() - startTime, false);
// Mettre à jour le statut d'échec du provider
this.providerStatus[provider].available = false;
this.providerStatus[provider].lastTested = new Date().toISOString();
this.providerStatus[provider].consecutiveFailures = (this.providerStatus[provider].consecutiveFailures || 0) + 1;
this.providerStatus[provider].lastError = error.message;
this._log(`❌ ${provider.toUpperCase()} failed: ${error.message}`);
// Si pas de fallback activé, arrêter
if (!this.config.enableFallback) {
break;
}
}
}
// Tous les providers ont échoué
this.stats.failedRequests++;
// Si tous les providers configurés ont échoué, désactiver l'IA
if (allProvidersFailed && this.config.disableOnAllFailed) {
this.aiDisabled = true;
this.disableReason = 'All providers failed during operation';
this._log('🚫 All providers failed - AI system disabled');
}
// Basculer en mode mock
this._log('⚠️ All providers failed, switching to mock mode');
return this._generateMockValidation(prompt, options);
}
/**
* Appelle un provider spécifique
* @private
*/
async _callProvider(provider, prompt, options) {
// Si pas de clés API, utiliser le mode mock
if (!this.apiKeys || this.apiKeys.mock) {
return this._generateMockValidation(prompt, options);
}
const config = this.providers[provider];
if (!config) {
throw new Error(`Provider ${provider} not configured`);
}
const apiKey = this.apiKeys[`${provider.toUpperCase()}_API_KEY`];
if (!apiKey) {
throw new Error(`API key missing for ${provider}`);
}
// Construire la requête
const requestData = this._buildRequest(provider, prompt, options);
// Préparer les headers
const headers = {};
Object.keys(config.headers).forEach(key => {
headers[key] = config.headers[key].replace('{API_KEY}', apiKey);
});
// Effectuer l'appel
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), config.timeout);
try {
const response = await fetch(config.endpoint, {
method: 'POST',
headers,
body: JSON.stringify(requestData),
signal: controller.signal
});
clearTimeout(timeoutId);
if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP ${response.status}: ${errorText}`);
}
const responseData = await response.json();
return this._parseResponse(provider, responseData);
} catch (error) {
clearTimeout(timeoutId);
throw error;
}
}
/**
* Construit la requête selon le format du provider
* @private
*/
_buildRequest(provider, prompt, options) {
const config = this.providers[provider];
const temperature = options.temperature ?? config.temperature;
const maxTokens = options.maxTokens ?? config.maxTokens;
// Prompt système pour l'éducation
const systemPrompt = options.systemPrompt ||
'You are an expert language learning evaluator. Provide constructive, encouraging feedback for students. Return responses in valid JSON format only.';
switch (provider) {
case 'openai':
case 'deepseek':
return {
model: config.model,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: prompt }
],
max_tokens: maxTokens,
temperature: temperature,
stream: false
};
case 'claude':
return {
model: config.model,
max_tokens: maxTokens,
temperature: temperature,
system: systemPrompt,
messages: [
{ role: 'user', content: prompt }
]
};
default:
throw new Error(`Request format not supported for ${provider}`);
}
}
/**
* Parse la réponse selon le format du provider
* @private
*/
_parseResponse(provider, responseData) {
let content;
try {
switch (provider) {
case 'openai':
case 'deepseek':
content = responseData.choices[0].message.content.trim();
break;
case 'claude':
content = responseData.content[0].text.trim();
break;
default:
throw new Error(`Parser not supported for ${provider}`);
}
// Essayer de parser en JSON si possible
try {
const jsonResponse = JSON.parse(content);
return {
...jsonResponse,
provider,
timestamp: new Date().toISOString(),
cached: false
};
} catch (jsonError) {
// Si ce n'est pas du JSON valide, retourner comme texte
return {
content: content,
provider,
timestamp: new Date().toISOString(),
cached: false
};
}
} catch (error) {
this._log(`❌ Error parsing ${provider} response: ${error.message}`);
throw new Error(`Failed to parse ${provider} response: ${error.message}`);
}
}
/**
* Génère une réponse mock réaliste
* @private
*/
_generateMockValidation(prompt, options) {
const mockResponses = {
translation: () => ({
score: Math.floor(Math.random() * 40) + 60, // 60-100
correct: Math.random() > 0.3,
feedback: "Good effort! Consider the nuance of the verb tense.",
keyPoints: ["vocabulary usage", "grammar structure"],
suggestions: ["Try to focus on the context", "Remember the word order rules"]
}),
comprehension: () => ({
score: Math.floor(Math.random() * 30) + 70, // 70-100
correct: Math.random() > 0.25,
feedback: "You understood the main idea well. Pay attention to details.",
mainPointsUnderstood: ["main topic", "key action"],
missedPoints: Math.random() > 0.7 ? ["time reference"] : []
}),
grammar: () => ({
score: Math.floor(Math.random() * 50) + 50, // 50-100
correct: Math.random() > 0.4,
feedback: "Good sentence structure. Watch the word order.",
grammarErrors: Math.random() > 0.5 ? ["word order"] : [],
grammarStrengths: ["verb conjugation", "article usage"],
suggestion: Math.random() > 0.7 ? "Try: 'I wear a blue shirt to work.'" : null
}),
general: () => ({
score: Math.floor(Math.random() * 40) + 60,
correct: Math.random() > 0.3,
feedback: "Keep practicing! You're making good progress.",
encouragement: "Don't give up, you're learning!"
})
};
// Détecter le type d'exercice depuis le prompt
const exerciseType = this._detectExerciseType(prompt);
const responseGenerator = mockResponses[exerciseType] || mockResponses.general;
const mockResponse = responseGenerator();
return {
...mockResponse,
provider: 'mock',
timestamp: new Date().toISOString(),
cached: false,
mockGenerated: true
};
}
/**
* Détecte le type d'exercice depuis le prompt
* @private
*/
_detectExerciseType(prompt) {
const lowerPrompt = prompt.toLowerCase();
if (lowerPrompt.includes('translation') || lowerPrompt.includes('translate')) {
return 'translation';
}
if (lowerPrompt.includes('grammar') || lowerPrompt.includes('grammatical')) {
return 'grammar';
}
if (lowerPrompt.includes('comprehension') || lowerPrompt.includes('understand')) {
return 'comprehension';
}
return 'general';
}
/**
* Détermine l'ordre des providers à essayer (OpenAI -> DeepSeek seulement)
* @private
*/
_getProviderOrder(preferredProvider) {
// Ordre fixe : OpenAI -> DeepSeek seulement
const preferredOrder = ['openai', 'deepseek'];
if (preferredProvider && preferredOrder.includes(preferredProvider)) {
// Commencer par le provider préféré, puis les autres dans l'ordre
return [preferredProvider, ...preferredOrder.filter(p => p !== preferredProvider)];
}
// Utiliser l'ordre par défaut : OpenAI -> DeepSeek
return preferredOrder;
}
/**
* Génère une clé de cache
* @private
*/
_generateCacheKey(prompt, options) {
const keyData = {
prompt: prompt.substring(0, 100), // Première partie du prompt
temperature: options.temperature || 0.3,
type: this._detectExerciseType(prompt)
};
return JSON.stringify(keyData);
}
/**
* Met à jour les statistiques du provider
* @private
*/
_updateProviderStats(provider, duration, success) {
if (!this.stats.providerUsage[provider]) {
this.stats.providerUsage[provider] = {
calls: 0,
successes: 0,
failures: 0,
totalDuration: 0,
avgDuration: 0
};
}
const stats = this.stats.providerUsage[provider];
stats.calls++;
stats.totalDuration += duration;
stats.avgDuration = Math.round(stats.totalDuration / stats.calls);
if (success) {
stats.successes++;
} else {
stats.failures++;
}
}
/**
* Log avec contrôle de debug
* @private
*/
_log(message, level = 'INFO') {
if (this.config.debug || level === 'ERROR') {
console.log(`[IAEngine ${level}] ${message}`);
}
}
/**
* API publiques utilitaires
*/
/**
* Obtient les statistiques d'usage
*/
getStats() {
return {
...this.stats,
cacheSize: this.cache.size,
consecutiveErrors: this.consecutiveErrors,
isInMockMode: this.consecutiveErrors >= this.maxConsecutiveErrors
};
}
/**
* Vide le cache
*/
clearCache() {
this.cache.clear();
this._log('🧹 Cache cleared');
}
/**
* Reset les statistiques
*/
resetStats() {
this.stats = {
totalRequests: 0,
successfulRequests: 0,
failedRequests: 0,
cacheHits: 0,
providerUsage: {}
};
this.consecutiveErrors = 0;
this._log('📊 Stats reset');
}
/**
* Test de connectivité spécifique à un provider
*/
async testProviderConnectivity(provider) {
if (!this.providers[provider]) {
throw new Error(`Provider ${provider} not configured`);
}
const testPrompt = 'Test';
const testOptions = {
maxTokens: 10,
temperature: 0,
timeout: 10000 // Test plus rapide
};
const startTime = Date.now();
try {
// Forcer l'utilisation du provider spécifique
const result = await this._callProvider(provider, testPrompt, testOptions);
const duration = Date.now() - startTime;
// Mettre à jour le statut
this.providerStatus[provider] = {
available: true,
lastTested: new Date().toISOString(),
consecutiveFailures: 0,
lastDuration: duration
};
this._log(`✅ ${provider.toUpperCase()} connectivity test successful (${duration}ms)`);
return {
success: true,
provider: provider,
duration: duration,
response: result
};
} catch (error) {
const duration = Date.now() - startTime;
// Mettre à jour le statut d'échec
this.providerStatus[provider].available = false;
this.providerStatus[provider].lastTested = new Date().toISOString();
this.providerStatus[provider].consecutiveFailures++;
this.providerStatus[provider].lastError = error.message;
this._log(`❌ ${provider.toUpperCase()} connectivity test failed: ${error.message} (${duration}ms)`);
return {
success: false,
provider: provider,
duration: duration,
error: error.message
};
}
}
/**
* Test de connectivité global (tous les providers)
*/
async testAllProvidersConnectivity() {
this._log('🔍 Testing connectivity for all providers...');
const results = {};
const testPromises = [];
// Tester OpenAI et DeepSeek en parallèle
for (const provider of ['openai', 'deepseek']) {
testPromises.push(
this.testProviderConnectivity(provider)
.then(result => results[provider] = result)
.catch(error => results[provider] = { success: false, error: error.message })
);
}
await Promise.allSettled(testPromises);
// Déterminer l'état global
const availableProviders = Object.keys(results).filter(p => results[p].success);
if (availableProviders.length === 0) {
this.aiDisabled = true;
this.disableReason = 'All providers failed connectivity test';
this._log('🚫 All AI providers failed - AI system disabled');
} else {
this.aiDisabled = false;
this.disableReason = null;
this._log(`✅ AI system available with providers: ${availableProviders.join(', ')}`);
}
return {
results,
availableProviders,
aiDisabled: this.aiDisabled,
disableReason: this.disableReason,
providerStatus: this.providerStatus
};
}
/**
* Test de connectivité simplifié (pour compatibilité)
*/
async testConnectivity() {
const fullTest = await this.testAllProvidersConnectivity();
if (fullTest.availableProviders.length > 0) {
return {
success: true,
provider: fullTest.availableProviders[0],
availableProviders: fullTest.availableProviders,
providerStatus: this.providerStatus
};
} else {
return {
success: false,
error: this.disableReason,
providerStatus: this.providerStatus,
stats: this.getStats()
};
}
}
/**
* Méthodes spécialisées pour l'éducation
*/
/**
* Validation de traduction éducative
*/
async validateTranslation(original, userTranslation, context = {}) {
const prompt = `Evaluate this language learning translation:
- Original (English): "${original}"
- Student translation: "${userTranslation}"
- Context: ${context.exerciseType || 'vocabulary'} exercise
- Target language: ${context.targetLanguage || 'French/Chinese'}
Evaluate if the translation captures the essential meaning. Be encouraging but accurate.
Return JSON: {
"score": 0-100,
"correct": boolean,
"feedback": "constructive feedback",
"keyPoints": ["important aspects noted"],
"encouragement": "positive reinforcement"
}`;
return await this.validateEducationalContent(prompt, {
systemPrompt: 'You are a supportive language learning tutor. Always provide encouraging feedback.',
preferredProvider: 'openai'
});
}
/**
* Validation de compréhension audio/texte
*/
async validateComprehension(content, userResponse, context = {}) {
const prompt = `Evaluate comprehension:
- Content: "${content}"
- Student response: "${userResponse}"
- Exercise type: ${context.exerciseType || 'comprehension'}
Did the student understand the main meaning? Accept paraphrasing.
Return JSON: {
"score": 0-100,
"correct": boolean,
"feedback": "constructive feedback",
"mainPointsUnderstood": ["concepts captured"],
"encouragement": "motivating message"
}`;
return await this.validateEducationalContent(prompt, {
systemPrompt: 'You are a patient language teacher. Focus on understanding, not perfection.'
});
}
/**
* Validation grammaticale
*/
async validateGrammar(userResponse, context = {}) {
const prompt = `Evaluate grammar usage:
- Student response: "${userResponse}"
- Target concepts: ${JSON.stringify(context.grammarConcepts || {})}
- Language level: ${context.languageLevel || 'beginner'}
Evaluate grammatical correctness and naturalness. Be encouraging.
Return JSON: {
"score": 0-100,
"correct": boolean,
"feedback": "constructive grammar feedback",
"grammarErrors": ["specific errors"],
"grammarStrengths": ["what was done well"],
"suggestion": "improvement suggestion",
"encouragement": "positive reinforcement"
}`;
return await this.validateEducationalContent(prompt, {
systemPrompt: 'You are a grammar expert who focuses on helping students improve with kindness.'
});
}
}
export default IAEngine;

415
src/DRS/services/LLMValidator.js Normal file
View File

@ -0,0 +1,415 @@
/**
* LLMValidator - LLM integration service for exercise validation
* Uses IAEngine for intelligent evaluation of all exercise types
*/
import IAEngine from './IAEngine.js';
import AIReportSystem from './AIReportSystem.js';
class LLMValidator {
constructor(config = {}) {
this.config = {
provider: config.provider || 'openai',
temperature: config.temperature || 0.3,
maxTokens: config.maxTokens || 1000,
timeout: config.timeout || 30000,
debug: config.debug || false,
enableReporting: config.enableReporting !== false, // Enabled by default
...config
};
// Initialize the IAEngine
this.iaEngine = new IAEngine({
defaultProvider: this.config.provider,
fallbackProviders: ['claude', 'deepseek'],
timeout: this.config.timeout,
debug: this.config.debug
});
// Initialize AI Report System
this.reportSystem = new AIReportSystem({
includeTimestamps: true,
formatStyle: 'detailed',
language: 'fr',
includeScores: true
});
console.log('🧠 LLMValidator initialized with IAEngine and AI Report System');
}
/**
* Start a new AI report session
* @param {Object} sessionInfo - Session information
* @returns {string} - Session ID
*/
startReportSession(sessionInfo = {}) {
if (!this.config.enableReporting) {
return null;
}
return this.reportSystem.startSession(sessionInfo);
}
/**
* End the current AI report session
*/
endReportSession() {
if (!this.config.enableReporting) {
return;
}
this.reportSystem.endSession();
}
/**
* Add AI response to the report system
* @private
*/
_addToReport(aiResponse, exerciseContext) {
if (!this.config.enableReporting) {
return;
}
this.reportSystem.addAIResponse(aiResponse, exerciseContext);
}
/**
* Generate and export a report
* @param {string} format - Report format ('text', 'html', 'json')
* @param {string} filename - Optional filename
* @returns {string} - Download URL
*/
exportReport(format = 'text', filename = null) {
if (!this.config.enableReporting) {
throw new Error('Reporting is disabled');
}
return this.reportSystem.exportReport(null, format, filename);
}
/**
* Get a formatted report as string
* @param {string} format - Report format ('text', 'html', 'json')
* @returns {string} - Formatted report
*/
getReport(format = 'text') {
if (!this.config.enableReporting) {
throw new Error('Reporting is disabled');
}
return this.reportSystem.generateReport(null, format);
}
/**
* Validate translation exercise
* @param {string} originalText - Original text
* @param {string} userAnswer - User's translation
* @param {Object} context - Exercise context
* @returns {Promise<ValidationResult>}
*/
async validateTranslation(originalText, userAnswer, context = {}) {
try {
console.log(`🔍 Validating translation: "${originalText}" -> "${userAnswer}"`);
const result = await this.iaEngine.validateTranslation(originalText, userAnswer, {
exerciseType: context.exerciseType || 'vocabulary',
targetLanguage: context.targetLanguage || 'French/Chinese',
contextHistory: context.contextHistory || '',
wordType: context.wordType || 'general'
});
// Add to AI report system
this._addToReport(result, {
exerciseType: 'vocabulary',
originalContent: originalText,
userAnswer: userAnswer,
difficulty: context.difficulty,
exerciseStep: context.exerciseStep
});
// Ensure backward compatibility with expected format
return this._normalizeResult(result, 'translation');
} catch (error) {
console.error('❌ Translation validation error:', error);
return this._generateFallbackResult('translation');
}
}
/**
* Validate audio comprehension
* @param {string} transcription - Audio transcription
* @param {string} userAnswer - User's comprehension response
* @param {Object} context - Exercise context
* @returns {Promise<ValidationResult>}
*/
async validateAudioComprehension(transcription, userAnswer, context = {}) {
try {
console.log(`🎵 Validating audio comprehension: "${transcription}" -> "${userAnswer}"`);
const result = await this.iaEngine.validateComprehension(transcription, userAnswer, {
exerciseType: 'audio',
languageLevel: context.languageLevel || 'beginner'
});
// Add to AI report system
this._addToReport(result, {
exerciseType: 'audio',
originalContent: transcription,
userAnswer: userAnswer,
difficulty: context.difficulty,
exerciseStep: context.exerciseStep
});
return this._normalizeResult(result, 'audio');
} catch (error) {
console.error('❌ Audio comprehension validation error:', error);
return this._generateFallbackResult('audio');
}
}
/**
* Validate image description
* @param {string} userAnswer - User's description
* @param {Object} context - Exercise context with target vocabulary
* @returns {Promise<ValidationResult>}
*/
async validateImageDescription(userAnswer, context = {}) {
try {
console.log(`🖼️ Validating image description: "${userAnswer}"`);
const prompt = `Evaluate image description:
- Student description: "${userAnswer}"
- Target vocabulary: ${JSON.stringify(context.targetVocabulary || {})}
- Exercise type: free description
Evaluate vocabulary usage, accuracy, and creativity.
Return JSON: {
"score": 0-100,
"correct": boolean,
"feedback": "constructive feedback",
"vocabularyUsed": ["words from target vocabulary used"],
"creativityScore": 0-100
}`;
const result = await this.iaEngine.validateEducationalContent(prompt, {
preferredProvider: this.config.provider
});
return this._normalizeResult(result, 'image');
} catch (error) {
console.error('❌ Image description validation error:', error);
return this._generateFallbackResult('image');
}
}
/**
* Validate grammar exercise
* @param {string} userAnswer - User's grammar response
* @param {Object} context - Exercise context with grammar concepts
* @returns {Promise<ValidationResult>}
*/
async validateGrammar(userAnswer, context = {}) {
try {
console.log(`📝 Validating grammar: "${userAnswer}"`);
const result = await this.iaEngine.validateGrammar(userAnswer, {
grammarConcepts: context.grammarConcepts || {},
languageLevel: context.languageLevel || 'beginner'
});
// Add to AI report system
this._addToReport(result, {
exerciseType: 'grammar',
originalContent: context.grammarPrompt || '',
userAnswer: userAnswer,
difficulty: context.difficulty,
exerciseStep: context.exerciseStep
});
return this._normalizeResult(result, 'grammar');
} catch (error) {
console.error('❌ Grammar validation error:', error);
return this._generateFallbackResult('grammar');
}
}
/**
* Validate text comprehension
* @param {string} text - Original text
* @param {string} userAnswer - User's comprehension response
* @param {Object} context - Exercise context
* @returns {Promise<ValidationResult>}
*/
async validateTextComprehension(text, userAnswer, context = {}) {
try {
console.log(`📖 Validating text comprehension: "${text}" -> "${userAnswer}"`);
const result = await this.iaEngine.validateComprehension(text, userAnswer, {
exerciseType: 'text',
contextHistory: context.contextHistory || ''
});
// Add to AI report system
this._addToReport(result, {
exerciseType: 'text',
originalContent: text,
userAnswer: userAnswer,
difficulty: context.difficulty,
exerciseStep: context.exerciseStep
});
return this._normalizeResult(result, 'text');
} catch (error) {
console.error('❌ Text comprehension validation error:', error);
return this._generateFallbackResult('text');
}
}
/**
* Normalize result to ensure backward compatibility
* @private
*/
_normalizeResult(result, exerciseType) {
// If result is already in the expected format, return as is
if (result.score !== undefined && result.correct !== undefined) {
return {
score: result.score,
correct: result.correct,
feedback: result.feedback || result.encouragement || 'Good effort!',
timestamp: result.timestamp || new Date().toISOString(),
provider: result.provider || 'unknown',
cached: result.cached || false,
// Include exercise-specific fields
...(exerciseType === 'translation' && {
keyPoints: result.keyPoints || [],
suggestions: result.suggestions || []
}),
...(exerciseType === 'audio' && {
mainPointsUnderstood: result.mainPointsUnderstood || [],
missedPoints: result.missedPoints || []
}),
...(exerciseType === 'image' && {
vocabularyUsed: result.vocabularyUsed || [],
creativityScore: result.creativityScore || 70
}),
...(exerciseType === 'grammar' && {
grammarErrors: result.grammarErrors || [],
grammarStrengths: result.grammarStrengths || [],
suggestion: result.suggestion || null
}),
...(exerciseType === 'text' && {
keyConceptsUnderstood: result.keyConceptsUnderstood || [],
missedPoints: result.missedPoints || []
})
};
}
// If result has unexpected format, try to extract content
return {
score: 75, // Default score
correct: true,
feedback: result.content || result.feedback || 'Response received',
timestamp: new Date().toISOString(),
provider: result.provider || 'unknown',
cached: false
};
}
/**
* Generate fallback result when validation fails
* @private
*/
_generateFallbackResult(exerciseType) {
const fallbackResponses = {
translation: {
score: Math.floor(Math.random() * 40) + 60,
correct: Math.random() > 0.3,
feedback: "Good effort! Keep practicing your translations.",
keyPoints: ["vocabulary usage", "meaning accuracy"],
suggestions: ["Focus on context", "Review similar words"]
},
audio: {
score: Math.floor(Math.random() * 30) + 70,
correct: Math.random() > 0.25,
feedback: "You captured the main idea. Work on details.",
mainPointsUnderstood: ["main topic"],
missedPoints: ["specific details"]
},
image: {
score: Math.floor(Math.random() * 35) + 65,
correct: Math.random() > 0.2,
feedback: "Creative description! Try using more target vocabulary.",
vocabularyUsed: ["basic", "color"],
creativityScore: Math.floor(Math.random() * 30) + 70
},
grammar: {
score: Math.floor(Math.random() * 50) + 50,
correct: Math.random() > 0.4,
feedback: "Good attempt. Review the grammar rule.",
grammarErrors: Math.random() > 0.5 ? ["word order"] : [],
grammarStrengths: ["basic structure"],
suggestion: "Practice with similar examples"
},
text: {
score: Math.floor(Math.random() * 40) + 60,
correct: Math.random() > 0.3,
feedback: "You understood the general meaning well.",
keyConceptsUnderstood: ["main idea"],
missedPoints: ["some details"]
}
};
const fallback = fallbackResponses[exerciseType] || fallbackResponses.translation;
return {
...fallback,
timestamp: new Date().toISOString(),
provider: 'fallback',
cached: false,
fallbackGenerated: true
};
}
/**
* Get validation statistics
*/
getStats() {
return this.iaEngine.getStats();
}
/**
* Clear cache
*/
clearCache() {
this.iaEngine.clearCache();
console.log('🧹 LLMValidator cache cleared');
}
/**
* Test connectivity
*/
async testConnectivity() {
try {
const testResult = await this.iaEngine.testConnectivity();
console.log('🧪 LLMValidator connectivity test:', testResult.success ? '✅ OK' : '❌ Failed');
return testResult;
} catch (error) {
console.error('❌ LLMValidator connectivity test failed:', error);
return {
success: false,
error: error.message
};
}
}
/**
* Cleanup resources
*/
cleanup() {
this.clearCache();
console.log('🧹 LLMValidator cleaned up');
}
}
export default LLMValidator;

460
src/DRS/services/PrerequisiteEngine.js Normal file
View File

@ -0,0 +1,460 @@
/**
* PrerequisiteEngine - Dependency tracking and content filtering service
* Manages vocabulary prerequisites and unlocks content based on mastery
*/
class PrerequisiteEngine {
constructor() {
this.chapterVocabulary = new Set();
this.masteredWords = new Set();
this.masteredPhrases = new Set();
this.masteredGrammar = new Set();
this.contentAnalysis = null;
// Basic words assumed to be known (no need to learn)
this.assumedKnown = new Set([
// Articles and determiners
'a', 'an', 'the', 'this', 'that', 'these', 'those', 'some', 'any', 'each', 'every',
// Pronouns
'I', 'you', 'he', 'she', 'it', 'we', 'they', 'me', 'him', 'her', 'us', 'them',
'my', 'your', 'his', 'her', 'its', 'our', 'their', 'mine', 'yours', 'hers', 'ours', 'theirs',
// Prepositions
'in', 'on', 'at', 'by', 'for', 'with', 'to', 'from', 'of', 'about', 'under', 'over',
'through', 'during', 'before', 'after', 'above', 'below', 'up', 'down', 'out', 'off',
// Common verbs
'is', 'are', 'was', 'were', 'be', 'been', 'being', 'have', 'has', 'had', 'do', 'does', 'did',
'will', 'would', 'could', 'should', 'can', 'may', 'might', 'must',
// Conjunctions
'and', 'or', 'but', 'because', 'if', 'when', 'where', 'how', 'why', 'what', 'who', 'which',
// Common adverbs
'not', 'no', 'yes', 'very', 'so', 'too', 'also', 'only', 'just', 'still', 'even',
// Numbers
'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten',
'first', 'second', 'third', 'last', 'next'
]);
}
/**
* Analyze chapter content and extract vocabulary requirements
* @param {Object} chapterContent - Full chapter content data
* @returns {Object} - Analysis results
*/
analyzeChapter(chapterContent) {
console.log('📊 Analyzing chapter prerequisites...');
// Extract chapter vocabulary
this.chapterVocabulary.clear();
if (chapterContent.vocabulary) {
Object.keys(chapterContent.vocabulary).forEach(word => {
this.chapterVocabulary.add(word.toLowerCase());
});
}
// Analyze all content types
const analysis = {
totalVocabulary: this.chapterVocabulary.size,
phrases: this._analyzePhrases(chapterContent.phrases || {}),
texts: this._analyzeTexts(chapterContent.texts || []),
dialogs: this._analyzeDialogs(chapterContent.dialogs || []),
audio: this._analyzeAudio(chapterContent.audio || []),
images: this._analyzeImages(chapterContent.images || []),
grammar: this._analyzeGrammar(chapterContent.grammar || {}),
vocabularyCategories: this._categorizeVocabulary(chapterContent.vocabulary || {})
};
this.contentAnalysis = analysis;
console.log('✅ Chapter analysis complete:', analysis);
return analysis;
}
/**
* Check if content can be unlocked based on current mastery
* @param {string} contentType - Type of content (phrase, text, audio, etc.)
* @param {Object} contentItem - Specific content item
* @returns {Object} - Unlock status and missing prerequisites
*/
canUnlock(contentType, contentItem) {
const requiredWords = this.getPrerequisites(contentType, contentItem);
const missingWords = requiredWords.filter(word => !this.isMastered(word));
return {
canUnlock: missingWords.length === 0,
requiredWords,
missingWords,
masteredCount: requiredWords.length - missingWords.length,
totalRequired: requiredWords.length
};
}
/**
* Get vocabulary prerequisites for specific content
* @param {string} contentType - Type of content
* @param {Object} contentItem - Content item
* @returns {Array<string>} - Required vocabulary words
*/
getPrerequisites(contentType, contentItem) {
let text = '';
// Extract text based on content type
switch (contentType) {
case 'phrase':
text = contentItem.english || contentItem.text || '';
break;
case 'text':
text = contentItem.content || contentItem.text || '';
break;
case 'dialog':
text = contentItem.conversation ?
contentItem.conversation.map(line => line.english || line.text || '').join(' ') : '';
break;
case 'audio':
text = contentItem.transcription || contentItem.text || '';
break;
case 'grammar':
text = contentItem.example || contentItem.sentence || '';
break;
default:
text = JSON.stringify(contentItem);
}
return this._extractPrerequisites(text);
}
/**
* Mark vocabulary as mastered
* @param {string} word - Word to mark as mastered
* @param {Object} metadata - Additional metadata (attempts, sessionId, etc.)
*/
markWordMastered(word, metadata = {}) {
const normalizedWord = word.toLowerCase();
if (this.chapterVocabulary.has(normalizedWord)) {
const masteredEntry = {
word: normalizedWord,
masteredAt: new Date().toISOString(),
attempts: 1,
...metadata
};
this.masteredWords.add(normalizedWord);
console.log(`✅ Word mastered: ${word} at ${masteredEntry.masteredAt}`);
}
}
/**
* Mark phrase as mastered
* @param {string} phraseId - Phrase identifier to mark as mastered
* @param {Object} metadata - Additional metadata (attempts, sessionId, etc.)
*/
markPhraseMastered(phraseId, metadata = {}) {
const masteredEntry = {
phrase: phraseId,
masteredAt: new Date().toISOString(),
attempts: 1,
...metadata
};
this.masteredPhrases.add(phraseId);
console.log(`✅ Phrase mastered: ${phraseId} at ${masteredEntry.masteredAt}`);
}
/**
* Mark grammar concept as mastered
* @param {string} grammarConcept - Grammar concept to mark as mastered
* @param {Object} metadata - Additional metadata (attempts, sessionId, etc.)
*/
markGrammarMastered(grammarConcept, metadata = {}) {
const masteredEntry = {
concept: grammarConcept,
masteredAt: new Date().toISOString(),
attempts: 1,
...metadata
};
this.masteredGrammar.add(grammarConcept);
console.log(`✅ Grammar concept mastered: ${grammarConcept} at ${masteredEntry.masteredAt}`);
}
/**
* Check if a word is considered mastered
* @param {string} word - Word to check
* @returns {boolean} - True if mastered or assumed known
*/
isMastered(word) {
const normalizedWord = word.toLowerCase();
return this.assumedKnown.has(normalizedWord) ||
this.masteredWords.has(normalizedWord) ||
!this.chapterVocabulary.has(normalizedWord); // Non-chapter words assumed known
}
/**
* Get available content based on current mastery
* @param {string} contentType - Type of content to check
* @param {Array} contentList - List of content items
* @returns {Array} - Available content items with unlock status
*/
getAvailableContent(contentType, contentList) {
return contentList.map((item, index) => {
const unlockStatus = this.canUnlock(contentType, item);
return {
...item,
index,
unlockStatus,
available: unlockStatus.canUnlock
};
});
}
/**
* Get mastery progress statistics
* @returns {Object} - Progress statistics
*/
getMasteryProgress() {
return {
vocabulary: {
total: this.chapterVocabulary.size,
mastered: this.masteredWords.size,
percentage: Math.round((this.masteredWords.size / Math.max(this.chapterVocabulary.size, 1)) * 100)
},
phrases: {
total: this.contentAnalysis?.phrases.total || 0,
mastered: this.masteredPhrases.size,
percentage: Math.round((this.masteredPhrases.size / Math.max(this.contentAnalysis?.phrases.total || 1, 1)) * 100)
},
grammar: {
total: this.contentAnalysis?.grammar.concepts || 0,
mastered: this.masteredGrammar.size,
percentage: Math.round((this.masteredGrammar.size / Math.max(this.contentAnalysis?.grammar.concepts || 1, 1)) * 100)
}
};
}
// Private Methods
_extractPrerequisites(text) {
if (!text) return [];
// Extract words and filter for chapter vocabulary only
const words = text.toLowerCase()
.replace(/[^\w\s]/g, ' ') // Remove punctuation
.split(/\s+/)
.filter(word => word.length > 0)
.map(word => this._getBaseForm(word));
// Return only words that are in chapter vocabulary (prerequisites)
return [...new Set(words)].filter(word =>
this.chapterVocabulary.has(word) &&
!this.assumedKnown.has(word)
);
}
_getBaseForm(word) {
// Simple stemming - can be enhanced with proper stemming library
const normalizedWord = word.toLowerCase();
// Remove common suffixes to find base form
const suffixes = ['s', 'es', 'ed', 'ing', 'ly', 'er', 'est'];
for (const suffix of suffixes) {
if (normalizedWord.endsWith(suffix) && normalizedWord.length > suffix.length + 2) {
const baseForm = normalizedWord.slice(0, -suffix.length);
if (this.chapterVocabulary.has(baseForm)) {
return baseForm;
}
}
}
return normalizedWord;
}
_analyzePhrases(phrases) {
// Convert object to array of entries
const phraseEntries = Object.entries(phrases);
const analysis = {
total: phraseEntries.length,
withPrerequisites: 0,
averagePrerequisites: 0,
categories: {}
};
let totalPrereqs = 0;
phraseEntries.forEach(([phraseText, phraseData]) => {
// Create phrase object with english text for getPrerequisites
const phraseObj = {
english: phraseText,
translation: phraseData.user_language,
context: phraseData.context || 'general',
...phraseData
};
const prereqs = this.getPrerequisites('phrase', phraseObj);
if (prereqs.length > 0) {
analysis.withPrerequisites++;
}
totalPrereqs += prereqs.length;
// Categorize phrases
const category = phraseData.context || 'general';
analysis.categories[category] = (analysis.categories[category] || 0) + 1;
});
analysis.averagePrerequisites = Math.round((totalPrereqs / Math.max(phraseEntries.length, 1)) * 100) / 100;
return analysis;
}
_analyzeTexts(texts) {
// Convert object to array if needed
const textArray = Array.isArray(texts) ? texts : Object.values(texts);
const analysis = {
total: textArray.length,
totalSentences: 0,
averagePrerequisites: 0,
categories: {}
};
let totalPrereqs = 0;
textArray.forEach(text => {
const prereqs = this.getPrerequisites('text', text);
totalPrereqs += prereqs.length;
// Count sentences
const sentences = (text.content || text.text || '').split(/[.!?]+/).filter(s => s.trim().length > 0);
analysis.totalSentences += sentences.length;
// Categorize texts
const category = text.category || text.type || 'general';
analysis.categories[category] = (analysis.categories[category] || 0) + 1;
});
analysis.averagePrerequisites = Math.round((totalPrereqs / Math.max(textArray.length, 1)) * 100) / 100;
return analysis;
}
_analyzeDialogs(dialogs) {
// Convert object to array of entries if needed
const dialogEntries = Array.isArray(dialogs) ? dialogs : Object.entries(dialogs);
const analysis = {
total: dialogEntries.length,
totalLines: 0,
averagePrerequisites: 0
};
let totalPrereqs = 0;
dialogEntries.forEach(dialogItem => {
// Handle both array format and object format
const dialog = Array.isArray(dialogs) ? dialogItem : dialogItem[1];
const prereqs = this.getPrerequisites('dialog', dialog);
totalPrereqs += prereqs.length;
if (dialog.conversation) {
analysis.totalLines += dialog.conversation.length;
}
});
analysis.averagePrerequisites = Math.round((totalPrereqs / Math.max(dialogEntries.length, 1)) * 100) / 100;
return analysis;
}
_analyzeAudio(audioItems) {
// Convert object to array if needed
const audioArray = Array.isArray(audioItems) ? audioItems : Object.values(audioItems);
return {
total: audioArray.length,
withTranscription: audioArray.filter(item => item.transcription).length,
categories: audioArray.reduce((cats, item) => {
const cat = item.type || 'general';
cats[cat] = (cats[cat] || 0) + 1;
return cats;
}, {})
};
}
_analyzeImages(imageItems) {
// Convert object to array if needed
const imageArray = Array.isArray(imageItems) ? imageItems : Object.values(imageItems);
return {
total: imageArray.length,
withDescriptions: imageArray.filter(item => item.description).length,
categories: imageArray.reduce((cats, item) => {
const cat = item.category || item.type || 'general';
cats[cat] = (cats[cat] || 0) + 1;
return cats;
}, {})
};
}
_analyzeGrammar(grammarData) {
const concepts = Object.keys(grammarData);
return {
concepts: concepts.length,
conceptList: concepts,
categories: concepts.reduce((cats, concept) => {
const cat = grammarData[concept]?.category || 'general';
cats[cat] = (cats[cat] || 0) + 1;
return cats;
}, {})
};
}
_categorizeVocabulary(vocabulary) {
const categories = {};
Object.entries(vocabulary).forEach(([word, data]) => {
const type = data.type || 'unknown';
categories[type] = (categories[type] || 0) + 1;
});
return categories;
}
/**
* Reset all mastery tracking
*/
reset() {
this.masteredWords.clear();
this.masteredPhrases.clear();
this.masteredGrammar.clear();
console.log('🔄 Prerequisites reset');
}
/**
* Export mastery state for persistence
* @returns {Object} - Serializable mastery state
*/
exportMasteryState() {
return {
masteredWords: Array.from(this.masteredWords),
masteredPhrases: Array.from(this.masteredPhrases),
masteredGrammar: Array.from(this.masteredGrammar),
timestamp: new Date().toISOString()
};
}
/**
* Import mastery state from persistence
* @param {Object} state - Previously exported mastery state
*/
importMasteryState(state) {
if (state.masteredWords) {
this.masteredWords = new Set(state.masteredWords);
}
if (state.masteredPhrases) {
this.masteredPhrases = new Set(state.masteredPhrases);
}
if (state.masteredGrammar) {
this.masteredGrammar = new Set(state.masteredGrammar);
}
console.log('📥 Mastery state imported');
}
}
export default PrerequisiteEngine;

103
src/content/sbs-level-7-8.json → src/chapters/chapter-7-8.json
View File

@ -1,8 +1,13 @@
{
"name": "SBS Level 7-8 New",
"description": "Side by Side Level 7-8 vocabulary with language-agnostic format",
"difficulty": "intermediate",
"language": "en-US",
"chapter_info": {
"chapter_number": "7-8",
"book_reference": "SBS",
"completion_criteria": {
"vocabulary_mastery": 80,
"quiz_score": 75,
"games_completed": 5
}
},
"vocabulary": {
"central": { "user_language": "中心的；中央的", "type": "adjective" },
"avenue": { "user_language": "大街；林荫道", "type": "noun" },
@ -137,5 +142,93 @@
"block": { "user_language": "屏蔽", "type": "verb" },
"tag": { "user_language": "标记", "type": "verb" }
},
"sentences": []
"content_structure": {
"vocabulary_sections": [
{
"section_id": "housing",
"title": "Housing & Living",
"words": ["central", "avenue", "building", "elevator", "superintendent", "bus stop", "jacuzzi", "machine", "town", "noise", "sidewalks", "convenient"]
},
{
"section_id": "clothing",
"title": "Clothing & Accessories",
"words": ["shirt", "coat", "dress", "skirt", "blouse", "jacket", "sweater", "suit", "tie", "pants", "jeans", "belt", "hat", "glove", "purse", "glasses", "pajamas", "socks", "shoes", "bathrobe", "tee shirt", "scarf", "wallet", "ring", "sandals"]
},
{
"section_id": "body",
"title": "Body Parts & Health",
"words": ["throat", "shoulder", "chest", "back", "arm", "elbow", "wrist", "hip", "thigh", "knee", "shin", "ankle", "cough", "sneeze", "wheeze", "feel dizzy", "feel nauseous", "twist", "burn", "hurt", "cut", "sprain", "dislocate", "break"]
},
{
"section_id": "emotions",
"title": "Emotions & Feelings",
"words": ["upset", "worried", "concerned", "anxious", "nervous", "excited", "thrilled", "delighted", "pleased", "satisfied", "disappointed", "frustrated", "annoyed", "furious", "exhausted", "overwhelmed", "confused", "embarrassed", "proud", "jealous", "guilty"]
},
{
"section_id": "communication",
"title": "Communication & Actions",
"words": ["recommend", "suggest", "insist", "warn", "promise", "apologize", "complain", "discuss", "argue", "disagree", "agree", "decide", "choose", "prefer", "enjoy", "appreciate", "celebrate", "congratulate"]
},
{
"section_id": "technology",
"title": "Technology & Digital",
"words": ["website", "password", "username", "download", "upload", "install", "update", "delete", "save", "print", "scan", "copy", "paste", "search", "browse", "surf", "stream", "tweet", "post", "share", "like", "follow", "unfollow", "block", "tag"]
}
]
},
"assessment": {
"vocabulary_quizzes": [
{
"quiz_id": "housing_basic",
"section": "housing",
"difficulty": "beginner",
"question_count": 12,
"pass_score": 70
},
{
"quiz_id": "emotions_advanced",
"section": "emotions",
"difficulty": "advanced",
"question_count": 21,
"pass_score": 80
}
],
"practical_exercises": [
{
"exercise_id": "clothing_conversation",
"type": "role_play",
"scenario": "Shopping for clothes",
"required_vocabulary": ["shirt", "coat", "dress", "suit", "jacket"]
},
{
"exercise_id": "tech_tutorial",
"type": "guided_practice",
"scenario": "Using social media",
"required_vocabulary": ["post", "share", "like", "follow", "tag"]
}
]
},
"sentences": [
{
"id": "housing_01",
"text": "The apartment building is in the center of town.",
"vocabulary_used": ["building", "central", "town"],
"difficulty": "beginner",
"audio": "housing_01.mp3"
},
{
"id": "emotions_01",
"text": "I feel anxious and overwhelmed about the presentation.",
"vocabulary_used": ["anxious", "overwhelmed"],
"difficulty": "intermediate",
"audio": "emotions_01.mp3"
},
{
"id": "tech_01",
"text": "Don't forget to download the app and create your username.",
"vocabulary_used": ["download", "username"],
"difficulty": "intermediate",
"audio": "tech_01.mp3"
}
]
}

268
src/chapters/sbs-copy.json Normal file
View File

@ -0,0 +1,268 @@
{
"name": "SBS",
"description": "Side by Side Level 7-8 vocabulary with language-agnostic format",
"difficulty": "intermediate",
"language": "en-US",
"metadata": {
"version": "1.0",
"created": "2025-09-23",
"updated": "2025-09-23",
"source": "Side by Side English Learning Series",
"target_level": "intermediate",
"estimated_hours": 25,
"prerequisites": ["basic-english"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand clothing and body parts terminology",
"Learn emotional expressions and feelings",
"Practice technology and social media vocabulary"
],
"content_tags": ["vocabulary", "daily-life", "practical-english", "conversational"],
"chapter_info": {
"chapter_number": "7-8",
"total_chapters": 12,
"completion_criteria": {
"vocabulary_mastery": 80,
"quiz_score": 75,
"games_completed": 5
}
}
},
"vocabulary": {
"central": { "user_language": "中心的；中央的", "type": "adjective" },
"avenue": { "user_language": "大街；林荫道", "type": "noun" },
"refrigerator": { "user_language": "冰箱", "type": "noun" },
"closet": { "user_language": "衣柜；壁橱", "type": "noun" },
"elevator": { "user_language": "电梯", "type": "noun" },
"building": { "user_language": "建筑物；大楼", "type": "noun" },
"air conditioner": { "user_language": "空调", "type": "noun" },
"superintendent": { "user_language": "主管；负责人", "type": "noun" },
"bus stop": { "user_language": "公交车站", "type": "noun" },
"jacuzzi": { "user_language": "按摩浴缸", "type": "noun" },
"machine": { "user_language": "机器；设备", "type": "noun" },
"two and a half": { "user_language": "两个半", "type": "number" },
"in the center of": { "user_language": "在……中心", "type": "preposition" },
"town": { "user_language": "城镇", "type": "noun" },
"a lot of": { "user_language": "许多", "type": "determiner" },
"noise": { "user_language": "噪音", "type": "noun" },
"sidewalks": { "user_language": "人行道", "type": "noun" },
"all day and all night": { "user_language": "整日整夜", "type": "adverb" },
"convenient": { "user_language": "便利的", "type": "adjective" },
"upset": { "user_language": "失望的", "type": "adjective" },
"shirt": { "user_language": "衬衫", "type": "noun" },
"coat": { "user_language": "外套、大衣", "type": "noun" },
"dress": { "user_language": "连衣裙", "type": "noun" },
"skirt": { "user_language": "短裙", "type": "noun" },
"blouse": { "user_language": "女式衬衫", "type": "noun" },
"jacket": { "user_language": "夹克、短外套", "type": "noun" },
"sweater": { "user_language": "毛衣、针织衫", "type": "noun" },
"suit": { "user_language": "套装、西装", "type": "noun" },
"tie": { "user_language": "领带", "type": "noun" },
"pants": { "user_language": "裤子", "type": "noun" },
"jeans": { "user_language": "牛仔裤", "type": "noun" },
"belt": { "user_language": "腰带、皮带", "type": "noun" },
"hat": { "user_language": "帽子", "type": "noun" },
"glove": { "user_language": "手套", "type": "noun" },
"purse": { "user_language": "手提包、女式小包", "type": "noun" },
"glasses": { "user_language": "眼镜", "type": "noun" },
"pajamas": { "user_language": "睡衣", "type": "noun" },
"socks": { "user_language": "袜子", "type": "noun" },
"shoes": { "user_language": "鞋子", "type": "noun" },
"bathrobe": { "user_language": "浴袍", "type": "noun" },
"tee shirt": { "user_language": "T恤", "type": "noun" },
"scarf": { "user_language": "围巾", "type": "noun" },
"wallet": { "user_language": "钱包", "type": "noun" },
"ring": { "user_language": "戒指", "type": "noun" },
"sandals": { "user_language": "凉鞋", "type": "noun" },
"throat": { "user_language": "喉咙", "type": "noun" },
"shoulder": { "user_language": "肩膀", "type": "noun" },
"chest": { "user_language": "胸部", "type": "noun" },
"back": { "user_language": "背部", "type": "noun" },
"arm": { "user_language": "手臂", "type": "noun" },
"elbow": { "user_language": "肘部", "type": "noun" },
"wrist": { "user_language": "手腕", "type": "noun" },
"hip": { "user_language": "髋部", "type": "noun" },
"thigh": { "user_language": "大腿", "type": "noun" },
"knee": { "user_language": "膝盖", "type": "noun" },
"shin": { "user_language": "胫骨", "type": "noun" },
"ankle": { "user_language": "脚踝", "type": "noun" },
"cough": { "user_language": "咳嗽", "type": "verb" },
"sneeze": { "user_language": "打喷嚏", "type": "verb" },
"wheeze": { "user_language": "喘息", "type": "verb" },
"feel dizzy": { "user_language": "感到头晕", "type": "verb" },
"feel nauseous": { "user_language": "感到恶心", "type": "verb" },
"twist": { "user_language": "扭伤", "type": "verb" },
"burn": { "user_language": "烧伤", "type": "verb" },
"hurt": { "user_language": "受伤", "type": "verb" },
"cut": { "user_language": "割伤", "type": "verb" },
"sprain": { "user_language": "扭伤", "type": "verb" },
"dislocate": { "user_language": "脱臼", "type": "verb" },
"break": { "user_language": "骨折", "type": "verb" },
"recommend": { "user_language": "推荐", "type": "verb" },
"suggest": { "user_language": "建议", "type": "verb" },
"insist": { "user_language": "坚持", "type": "verb" },
"warn": { "user_language": "警告", "type": "verb" },
"promise": { "user_language": "承诺", "type": "verb" },
"apologize": { "user_language": "道歉", "type": "verb" },
"complain": { "user_language": "抱怨", "type": "verb" },
"discuss": { "user_language": "讨论", "type": "verb" },
"argue": { "user_language": "争论", "type": "verb" },
"disagree": { "user_language": "不同意", "type": "verb" },
"agree": { "user_language": "同意", "type": "verb" },
"decide": { "user_language": "决定", "type": "verb" },
"choose": { "user_language": "选择", "type": "verb" },
"prefer": { "user_language": "偏爱", "type": "verb" },
"enjoy": { "user_language": "享受", "type": "verb" },
"appreciate": { "user_language": "欣赏", "type": "verb" },
"celebrate": { "user_language": "庆祝", "type": "verb" },
"congratulate": { "user_language": "祝贺", "type": "verb" },
"worried": { "user_language": "担心的", "type": "adjective" },
"concerned": { "user_language": "关心的", "type": "adjective" },
"anxious": { "user_language": "焦虑的", "type": "adjective" },
"nervous": { "user_language": "紧张的", "type": "adjective" },
"excited": { "user_language": "兴奋的", "type": "adjective" },
"thrilled": { "user_language": "激动的", "type": "adjective" },
"delighted": { "user_language": "高兴的", "type": "adjective" },
"pleased": { "user_language": "满意的", "type": "adjective" },
"satisfied": { "user_language": "满足的", "type": "adjective" },
"disappointed": { "user_language": "失望的", "type": "adjective" },
"frustrated": { "user_language": "沮丧的", "type": "adjective" },
"annoyed": { "user_language": "恼怒的", "type": "adjective" },
"furious": { "user_language": "愤怒的", "type": "adjective" },
"exhausted": { "user_language": "筋疲力尽的", "type": "adjective" },
"overwhelmed": { "user_language": "不知所措的", "type": "adjective" },
"confused": { "user_language": "困惑的", "type": "adjective" },
"embarrassed": { "user_language": "尴尬的", "type": "adjective" },
"proud": { "user_language": "自豪的", "type": "adjective" },
"jealous": { "user_language": "嫉妒的", "type": "adjective" },
"guilty": { "user_language": "内疚的", "type": "adjective" },
"website": { "user_language": "网站", "type": "noun" },
"password": { "user_language": "密码", "type": "noun" },
"username": { "user_language": "用户名", "type": "noun" },
"download": { "user_language": "下载", "type": "verb" },
"upload": { "user_language": "上传", "type": "verb" },
"install": { "user_language": "安装", "type": "verb" },
"update": { "user_language": "更新", "type": "verb" },
"delete": { "user_language": "删除", "type": "verb" },
"save": { "user_language": "保存", "type": "verb" },
"print": { "user_language": "打印", "type": "verb" },
"scan": { "user_language": "扫描", "type": "verb" },
"copy": { "user_language": "复制", "type": "verb" },
"paste": { "user_language": "粘贴", "type": "verb" },
"search": { "user_language": "搜索", "type": "verb" },
"browse": { "user_language": "浏览", "type": "verb" },
"surf": { "user_language": "网上冲浪", "type": "verb" },
"stream": { "user_language": "流媒体", "type": "verb" },
"tweet": { "user_language": "发推特", "type": "verb" },
"post": { "user_language": "发布", "type": "verb" },
"share": { "user_language": "分享", "type": "verb" },
"like": { "user_language": "点赞", "type": "verb" },
"follow": { "user_language": "关注", "type": "verb" },
"unfollow": { "user_language": "取消关注", "type": "verb" },
"block": { "user_language": "屏蔽", "type": "verb" },
"tag": { "user_language": "标记", "type": "verb" }
},
"content_structure": {
"vocabulary_sections": [
{
"section_id": "housing",
"title": "Housing & Living",
"words": ["central", "avenue", "building", "elevator", "superintendent", "bus stop", "jacuzzi", "machine", "town", "noise", "sidewalks", "convenient"]
},
{
"section_id": "clothing",
"title": "Clothing & Accessories",
"words": ["shirt", "coat", "dress", "skirt", "blouse", "jacket", "sweater", "suit", "tie", "pants", "jeans", "belt", "hat", "glove", "purse", "glasses", "pajamas", "socks", "shoes", "bathrobe", "tee shirt", "scarf", "wallet", "ring", "sandals"]
},
{
"section_id": "body",
"title": "Body Parts & Health",
"words": ["throat", "shoulder", "chest", "back", "arm", "elbow", "wrist", "hip", "thigh", "knee", "shin", "ankle", "cough", "sneeze", "wheeze", "feel dizzy", "feel nauseous", "twist", "burn", "hurt", "cut", "sprain", "dislocate", "break"]
},
{
"section_id": "emotions",
"title": "Emotions & Feelings",
"words": ["upset", "worried", "concerned", "anxious", "nervous", "excited", "thrilled", "delighted", "pleased", "satisfied", "disappointed", "frustrated", "annoyed", "furious", "exhausted", "overwhelmed", "confused", "embarrassed", "proud", "jealous", "guilty"]
},
{
"section_id": "communication",
"title": "Communication & Actions",
"words": ["recommend", "suggest", "insist", "warn", "promise", "apologize", "complain", "discuss", "argue", "disagree", "agree", "decide", "choose", "prefer", "enjoy", "appreciate", "celebrate", "congratulate"]
},
{
"section_id": "technology",
"title": "Technology & Digital",
"words": ["website", "password", "username", "download", "upload", "install", "update", "delete", "save", "print", "scan", "copy", "paste", "search", "browse", "surf", "stream", "tweet", "post", "share", "like", "follow", "unfollow", "block", "tag"]
}
]
},
"learning_paths": {
"beginner": {
"recommended_order": ["housing", "clothing", "body", "emotions"],
"estimated_time": "12 hours"
},
"intermediate": {
"recommended_order": ["housing", "clothing", "body", "emotions", "communication", "technology"],
"estimated_time": "20 hours"
},
"advanced": {
"recommended_order": ["emotions", "communication", "technology", "housing", "clothing", "body"],
"estimated_time": "15 hours"
}
},
"assessment": {
"vocabulary_quizzes": [
{
"quiz_id": "housing_basic",
"section": "housing",
"difficulty": "beginner",
"question_count": 12,
"pass_score": 70
},
{
"quiz_id": "emotions_advanced",
"section": "emotions",
"difficulty": "advanced",
"question_count": 21,
"pass_score": 80
}
],
"practical_exercises": [
{
"exercise_id": "clothing_conversation",
"type": "role_play",
"scenario": "Shopping for clothes",
"required_vocabulary": ["shirt", "coat", "dress", "suit", "jacket"]
},
{
"exercise_id": "tech_tutorial",
"type": "guided_practice",
"scenario": "Using social media",
"required_vocabulary": ["post", "share", "like", "follow", "tag"]
}
]
},
"sentences": [
{
"id": "housing_01",
"text": "The apartment building is in the center of town.",
"vocabulary_used": ["building", "central", "town"],
"difficulty": "beginner",
"audio": "housing_01.mp3"
},
{
"id": "emotions_01",
"text": "I feel anxious and overwhelmed about the presentation.",
"vocabulary_used": ["anxious", "overwhelmed"],
"difficulty": "intermediate",
"audio": "emotions_01.mp3"
},
{
"id": "tech_01",
"text": "Don't forget to download the app and create your username.",
"vocabulary_used": ["download", "username"],
"difficulty": "intermediate",
"audio": "tech_01.mp3"
}
]
}

37
src/chapters/sbs-real.json Normal file
View File

@ -0,0 +1,37 @@
{
"name": "SBS",
"description": "Side by Side Level 7-8 vocabulary with language-agnostic format",
"difficulty": "intermediate",
"language": "en-US",
"metadata": {
"version": "1.0",
"created": "2025-09-23",
"updated": "2025-09-23",
"source": "Side by Side English Learning Series",
"target_level": "intermediate",
"estimated_hours": 25,
"prerequisites": ["basic-english"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand clothing and body parts terminology",
"Learn emotional expressions and feelings",
"Practice technology and social media vocabulary"
],
"content_tags": ["vocabulary", "daily-life", "practical-english", "conversational"],
"total_chapters": 12
},
"learning_paths": {
"beginner": {
"recommended_order": ["housing", "clothing", "body", "emotions"],
"estimated_time": "12 hours"
},
"intermediate": {
"recommended_order": ["housing", "clothing", "body", "emotions", "communication", "technology"],
"estimated_time": "20 hours"
},
"advanced": {
"recommended_order": ["emotions", "communication", "technology", "housing", "clothing", "body"],
"estimated_time": "15 hours"
}
}
}

268
src/chapters/sbs.json Normal file
View File

@ -0,0 +1,268 @@
{
"name": "SBS",
"description": "Side by Side Level 7-8 vocabulary with language-agnostic format",
"difficulty": "intermediate",
"language": "en-US",
"metadata": {
"version": "1.0",
"created": "2025-09-23",
"updated": "2025-09-23",
"source": "Side by Side English Learning Series",
"target_level": "intermediate",
"estimated_hours": 25,
"prerequisites": ["basic-english"],
"learning_objectives": [
"Master intermediate vocabulary for daily situations",
"Understand clothing and body parts terminology",
"Learn emotional expressions and feelings",
"Practice technology and social media vocabulary"
],
"content_tags": ["vocabulary", "daily-life", "practical-english", "conversational"],
"chapter_info": {
"chapter_number": "7-8",
"total_chapters": 12,
"completion_criteria": {
"vocabulary_mastery": 80,
"quiz_score": 75,
"games_completed": 5
}
}
},
"vocabulary": {
"central": { "user_language": "中心的；中央的", "type": "adjective", "pronunciation": "/ˈsentrəl/" },
"avenue": { "user_language": "大街；林荫道", "type": "noun", "pronunciation": "/ˈævənjuː/" },
"refrigerator": { "user_language": "冰箱", "type": "noun", "pronunciation": "/rɪˈfrɪdʒəreɪtər/" },
"closet": { "user_language": "衣柜；壁橱", "type": "noun", "pronunciation": "/ˈklɒzɪt/" },
"elevator": { "user_language": "电梯", "type": "noun", "pronunciation": "/ˈeləveɪtər/" },
"building": { "user_language": "建筑物；大楼", "type": "noun", "pronunciation": "/ˈbɪldɪŋ/" },
"air conditioner": { "user_language": "空调", "type": "noun", "pronunciation": "/ɛr kənˈdɪʃənər/" },
"superintendent": { "user_language": "主管；负责人", "type": "noun", "pronunciation": "/ˌsuːpərɪnˈtendənt/" },
"bus stop": { "user_language": "公交车站", "type": "noun", "pronunciation": "/bʌs stɒp/" },
"jacuzzi": { "user_language": "按摩浴缸", "type": "noun", "pronunciation": "/dʒəˈkuːzi/" },
"machine": { "user_language": "机器；设备", "type": "noun", "pronunciation": "/məˈʃiːn/" },
"two and a half": { "user_language": "两个半", "type": "number", "pronunciation": "/tuː ænd ə hæf/" },
"in the center of": { "user_language": "在……中心", "type": "preposition", "pronunciation": "/ɪn ðə ˈsentər ʌv/" },
"town": { "user_language": "城镇", "type": "noun", "pronunciation": "/taʊn/" },
"a lot of": { "user_language": "许多", "type": "determiner", "pronunciation": "/ə lɑt ʌv/" },
"noise": { "user_language": "噪音", "type": "noun", "pronunciation": "/nɔɪz/" },
"sidewalks": { "user_language": "人行道", "type": "noun", "pronunciation": "/ˈsaɪdwɔːks/" },
"all day and all night": { "user_language": "整日整夜", "type": "adverb", "pronunciation": "/ɔːl deɪ ænd ɔːl naɪt/" },
"convenient": { "user_language": "便利的", "type": "adjective", "pronunciation": "/kənˈviːniənt/" },
"upset": { "user_language": "失望的", "type": "adjective", "pronunciation": "/ʌpˈset/" },
"shirt": { "user_language": "衬衫", "type": "noun", "pronunciation": "/ʃɜːrt/" },
"coat": { "user_language": "外套、大衣", "type": "noun", "pronunciation": "/koʊt/" },
"dress": { "user_language": "连衣裙", "type": "noun", "pronunciation": "/dres/" },
"skirt": { "user_language": "短裙", "type": "noun", "pronunciation": "/skɜːrt/" },
"blouse": { "user_language": "女式衬衫", "type": "noun", "pronunciation": "/blaʊs/" },
"jacket": { "user_language": "夹克、短外套", "type": "noun" },
"sweater": { "user_language": "毛衣、针织衫", "type": "noun" },
"suit": { "user_language": "套装、西装", "type": "noun" },
"tie": { "user_language": "领带", "type": "noun" },
"pants": { "user_language": "裤子", "type": "noun" },
"jeans": { "user_language": "牛仔裤", "type": "noun" },
"belt": { "user_language": "腰带、皮带", "type": "noun" },
"hat": { "user_language": "帽子", "type": "noun" },
"glove": { "user_language": "手套", "type": "noun" },
"purse": { "user_language": "手提包、女式小包", "type": "noun" },
"glasses": { "user_language": "眼镜", "type": "noun" },
"pajamas": { "user_language": "睡衣", "type": "noun" },
"socks": { "user_language": "袜子", "type": "noun" },
"shoes": { "user_language": "鞋子", "type": "noun" },
"bathrobe": { "user_language": "浴袍", "type": "noun" },
"tee shirt": { "user_language": "T恤", "type": "noun" },
"scarf": { "user_language": "围巾", "type": "noun" },
"wallet": { "user_language": "钱包", "type": "noun" },
"ring": { "user_language": "戒指", "type": "noun" },
"sandals": { "user_language": "凉鞋", "type": "noun" },
"throat": { "user_language": "喉咙", "type": "noun" },
"shoulder": { "user_language": "肩膀", "type": "noun" },
"chest": { "user_language": "胸部", "type": "noun" },
"back": { "user_language": "背部", "type": "noun" },
"arm": { "user_language": "手臂", "type": "noun" },
"elbow": { "user_language": "肘部", "type": "noun" },
"wrist": { "user_language": "手腕", "type": "noun" },
"hip": { "user_language": "髋部", "type": "noun" },
"thigh": { "user_language": "大腿", "type": "noun" },
"knee": { "user_language": "膝盖", "type": "noun" },
"shin": { "user_language": "胫骨", "type": "noun" },
"ankle": { "user_language": "脚踝", "type": "noun" },
"cough": { "user_language": "咳嗽", "type": "verb" },
"sneeze": { "user_language": "打喷嚏", "type": "verb" },
"wheeze": { "user_language": "喘息", "type": "verb" },
"feel dizzy": { "user_language": "感到头晕", "type": "verb" },
"feel nauseous": { "user_language": "感到恶心", "type": "verb" },
"twist": { "user_language": "扭伤", "type": "verb" },
"burn": { "user_language": "烧伤", "type": "verb" },
"hurt": { "user_language": "受伤", "type": "verb" },
"cut": { "user_language": "割伤", "type": "verb" },
"sprain": { "user_language": "扭伤", "type": "verb" },
"dislocate": { "user_language": "脱臼", "type": "verb" },
"break": { "user_language": "骨折", "type": "verb" },
"recommend": { "user_language": "推荐", "type": "verb" },
"suggest": { "user_language": "建议", "type": "verb" },
"insist": { "user_language": "坚持", "type": "verb" },
"warn": { "user_language": "警告", "type": "verb" },
"promise": { "user_language": "承诺", "type": "verb" },
"apologize": { "user_language": "道歉", "type": "verb" },
"complain": { "user_language": "抱怨", "type": "verb" },
"discuss": { "user_language": "讨论", "type": "verb" },
"argue": { "user_language": "争论", "type": "verb" },
"disagree": { "user_language": "不同意", "type": "verb" },
"agree": { "user_language": "同意", "type": "verb" },
"decide": { "user_language": "决定", "type": "verb" },
"choose": { "user_language": "选择", "type": "verb" },
"prefer": { "user_language": "偏爱", "type": "verb" },
"enjoy": { "user_language": "享受", "type": "verb" },
"appreciate": { "user_language": "欣赏", "type": "verb" },
"celebrate": { "user_language": "庆祝", "type": "verb" },
"congratulate": { "user_language": "祝贺", "type": "verb" },
"worried": { "user_language": "担心的", "type": "adjective" },
"concerned": { "user_language": "关心的", "type": "adjective" },
"anxious": { "user_language": "焦虑的", "type": "adjective" },
"nervous": { "user_language": "紧张的", "type": "adjective" },
"excited": { "user_language": "兴奋的", "type": "adjective" },
"thrilled": { "user_language": "激动的", "type": "adjective" },
"delighted": { "user_language": "高兴的", "type": "adjective" },
"pleased": { "user_language": "满意的", "type": "adjective" },
"satisfied": { "user_language": "满足的", "type": "adjective" },
"disappointed": { "user_language": "失望的", "type": "adjective" },
"frustrated": { "user_language": "沮丧的", "type": "adjective" },
"annoyed": { "user_language": "恼怒的", "type": "adjective" },
"furious": { "user_language": "愤怒的", "type": "adjective" },
"exhausted": { "user_language": "筋疲力尽的", "type": "adjective" },
"overwhelmed": { "user_language": "不知所措的", "type": "adjective" },
"confused": { "user_language": "困惑的", "type": "adjective" },
"embarrassed": { "user_language": "尴尬的", "type": "adjective" },
"proud": { "user_language": "自豪的", "type": "adjective" },
"jealous": { "user_language": "嫉妒的", "type": "adjective" },
"guilty": { "user_language": "内疚的", "type": "adjective" },
"website": { "user_language": "网站", "type": "noun" },
"password": { "user_language": "密码", "type": "noun" },
"username": { "user_language": "用户名", "type": "noun" },
"download": { "user_language": "下载", "type": "verb" },
"upload": { "user_language": "上传", "type": "verb" },
"install": { "user_language": "安装", "type": "verb" },
"update": { "user_language": "更新", "type": "verb" },
"delete": { "user_language": "删除", "type": "verb" },
"save": { "user_language": "保存", "type": "verb" },
"print": { "user_language": "打印", "type": "verb" },
"scan": { "user_language": "扫描", "type": "verb" },
"copy": { "user_language": "复制", "type": "verb" },
"paste": { "user_language": "粘贴", "type": "verb" },
"search": { "user_language": "搜索", "type": "verb" },
"browse": { "user_language": "浏览", "type": "verb" },
"surf": { "user_language": "网上冲浪", "type": "verb" },
"stream": { "user_language": "流媒体", "type": "verb" },
"tweet": { "user_language": "发推特", "type": "verb" },
"post": { "user_language": "发布", "type": "verb" },
"share": { "user_language": "分享", "type": "verb" },
"like": { "user_language": "点赞", "type": "verb" },
"follow": { "user_language": "关注", "type": "verb" },
"unfollow": { "user_language": "取消关注", "type": "verb" },
"block": { "user_language": "屏蔽", "type": "verb" },
"tag": { "user_language": "标记", "type": "verb" }
},
"content_structure": {
"vocabulary_sections": [
{
"section_id": "housing",
"title": "Housing & Living",
"words": ["central", "avenue", "building", "elevator", "superintendent", "bus stop", "jacuzzi", "machine", "town", "noise", "sidewalks", "convenient"]
},
{
"section_id": "clothing",
"title": "Clothing & Accessories",
"words": ["shirt", "coat", "dress", "skirt", "blouse", "jacket", "sweater", "suit", "tie", "pants", "jeans", "belt", "hat", "glove", "purse", "glasses", "pajamas", "socks", "shoes", "bathrobe", "tee shirt", "scarf", "wallet", "ring", "sandals"]
},
{
"section_id": "body",
"title": "Body Parts & Health",
"words": ["throat", "shoulder", "chest", "back", "arm", "elbow", "wrist", "hip", "thigh", "knee", "shin", "ankle", "cough", "sneeze", "wheeze", "feel dizzy", "feel nauseous", "twist", "burn", "hurt", "cut", "sprain", "dislocate", "break"]
},
{
"section_id": "emotions",
"title": "Emotions & Feelings",
"words": ["upset", "worried", "concerned", "anxious", "nervous", "excited", "thrilled", "delighted", "pleased", "satisfied", "disappointed", "frustrated", "annoyed", "furious", "exhausted", "overwhelmed", "confused", "embarrassed", "proud", "jealous", "guilty"]
},
{
"section_id": "communication",
"title": "Communication & Actions",
"words": ["recommend", "suggest", "insist", "warn", "promise", "apologize", "complain", "discuss", "argue", "disagree", "agree", "decide", "choose", "prefer", "enjoy", "appreciate", "celebrate", "congratulate"]
},
{
"section_id": "technology",
"title": "Technology & Digital",
"words": ["website", "password", "username", "download", "upload", "install", "update", "delete", "save", "print", "scan", "copy", "paste", "search", "browse", "surf", "stream", "tweet", "post", "share", "like", "follow", "unfollow", "block", "tag"]
}
]
},
"learning_paths": {
"beginner": {
"recommended_order": ["housing", "clothing", "body", "emotions"],
"estimated_time": "12 hours"
},
"intermediate": {
"recommended_order": ["housing", "clothing", "body", "emotions", "communication", "technology"],
"estimated_time": "20 hours"
},
"advanced": {
"recommended_order": ["emotions", "communication", "technology", "housing", "clothing", "body"],
"estimated_time": "15 hours"
}
},
"assessment": {
"vocabulary_quizzes": [
{
"quiz_id": "housing_basic",
"section": "housing",
"difficulty": "beginner",
"question_count": 12,
"pass_score": 70
},
{
"quiz_id": "emotions_advanced",
"section": "emotions",
"difficulty": "advanced",
"question_count": 21,
"pass_score": 80
}
],
"practical_exercises": [
{
"exercise_id": "clothing_conversation",
"type": "role_play",
"scenario": "Shopping for clothes",
"required_vocabulary": ["shirt", "coat", "dress", "suit", "jacket"]
},
{
"exercise_id": "tech_tutorial",
"type": "guided_practice",
"scenario": "Using social media",
"required_vocabulary": ["post", "share", "like", "follow", "tag"]
}
]
},
"sentences": [
{
"id": "housing_01",
"text": "The apartment building is in the center of town.",
"vocabulary_used": ["building", "central", "town"],
"difficulty": "beginner",
"audio": "housing_01.mp3"
},
{
"id": "emotions_01",
"text": "I feel anxious and overwhelmed about the presentation.",
"vocabulary_used": ["anxious", "overwhelmed"],
"difficulty": "intermediate",
"audio": "emotions_01.mp3"
},
{
"id": "tech_01",
"text": "Don't forget to download the app and create your username.",
"vocabulary_used": ["download", "username"],
"difficulty": "intermediate",
"audio": "tech_01.mp3"
}
]
}

461
src/components/AIReportInterface.js Normal file
View File

@ -0,0 +1,461 @@
/**
* AIReportInterface - UI component pour accéder aux rapports IA
* Provides buttons and interface for accessing AI reports and explanations
*/
import componentRegistry from './ComponentRegistry.js';
class AIReportInterface {
constructor(llmValidator, config = {}) {
this.llmValidator = llmValidator;
this.config = {
showInline: config.showInline !== false, // Show reports inline by default
showDownloadButtons: config.showDownloadButtons !== false,
position: config.position || 'bottom-right', // Position in UI
autoShow: config.autoShow !== false, // Auto-show after exercises
...config
};
this.container = null;
this.isVisible = false;
console.log('📊 AIReportInterface initialized');
}
/**
* Create and insert the report interface into the DOM
* @param {HTMLElement} parentContainer - Parent element
*/
create(parentContainer) {
if (this.container) {
console.warn('⚠️ AIReportInterface already created');
return;
}
this.container = document.createElement('div');
this.container.className = `ai-report-interface position-${this.config.position}`;
this.container.innerHTML = this._generateHTML();
// Style the component
this._applyStyles();
// Add event listeners
this._attachEventListeners();
// Insert into parent
parentContainer.appendChild(this.container);
console.log('📊 AIReportInterface created and inserted into DOM');
}
/**
* Generate the HTML structure
* @private
*/
_generateHTML() {
return `
<div class="ai-report-panel" ${!this.config.showInline ? 'style="display: none;"' : ''}>
<div class="ai-report-header">
<h4>📚 Rapport IA</h4>
<button class="ai-report-toggle" title="Masquer/Afficher">−</button>
</div>
<div class="ai-report-content">
<div class="ai-report-summary">
<p class="ai-report-status">Aucune session active</p>
</div>
${this.config.showDownloadButtons ? `
<div class="ai-report-actions">
<button class="btn-small btn-outline" id="viewReportBtn">
👁️ Voir le rapport
</button>
<div class="ai-report-download-group">
<button class="btn-small btn-primary" id="downloadTextBtn">
📄 Texte
</button>
<button class="btn-small btn-primary" id="downloadHtmlBtn">
🌐 HTML
</button>
<button class="btn-small btn-primary" id="downloadJsonBtn">
📋 JSON
</button>
</div>
</div>
` : ''}
<div class="ai-report-inline-view" id="inlineReportView" style="display: none;">
<div class="ai-report-inline-content"></div>
<button class="btn-small btn-outline" id="closeInlineBtn">Fermer</button>
</div>
</div>
</div>
`;
}
/**
* Apply CSS styles to the component
* @private
*/
_applyStyles() {
const style = document.createElement('style');
style.textContent = `
.ai-report-interface {
position: fixed;
z-index: 1000;
max-width: 350px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ai-report-interface.position-bottom-right {
bottom: 20px;
right: 20px;
}
.ai-report-interface.position-bottom-left {
bottom: 20px;
left: 20px;
}
.ai-report-interface.position-top-right {
top: 20px;
right: 20px;
}
.ai-report-panel {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
overflow: hidden;
transition: all 0.3s ease;
}
.ai-report-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-report-header h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.ai-report-toggle {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.ai-report-toggle:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.ai-report-content {
padding: 16px;
}
.ai-report-summary {
margin-bottom: 16px;
}
.ai-report-status {
margin: 0;
font-size: 13px;
color: #6b7280;
text-align: center;
padding: 8px;
background: #f9fafb;
border-radius: 6px;
}
.ai-report-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-report-download-group {
display: flex;
gap: 6px;
justify-content: space-between;
}
.btn-small {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
border: 1px solid #e5e7eb;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
text-align: center;
flex: 1;
}
.btn-small.btn-primary {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.btn-small.btn-primary:hover {
background: #2563eb;
border-color: #2563eb;
}
.btn-small.btn-outline {
background: white;
color: #374151;
border-color: #d1d5db;
}
.btn-small.btn-outline:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.ai-report-inline-view {
margin-top: 16px;
padding: 12px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.ai-report-inline-content {
max-height: 300px;
overflow-y: auto;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
font-family: 'Monaco', 'Consolas', monospace;
margin-bottom: 12px;
}
.ai-report-panel.collapsed .ai-report-content {
display: none;
}
.ai-report-panel.collapsed .ai-report-toggle::after {
content: '+';
}
@media (max-width: 768px) {
.ai-report-interface {
position: fixed;
bottom: 10px;
left: 10px;
right: 10px;
max-width: none;
}
.ai-report-download-group {
flex-direction: column;
gap: 8px;
}
}
`;
document.head.appendChild(style);
}
/**
* Attach event listeners
* @private
*/
_attachEventListeners() {
if (!this.container) return;
// Toggle panel
const toggleBtn = this.container.querySelector('.ai-report-toggle');
if (toggleBtn) {
toggleBtn.addEventListener('click', () => this.toggle());
}
// View report inline
const viewReportBtn = this.container.querySelector('#viewReportBtn');
if (viewReportBtn) {
viewReportBtn.addEventListener('click', () => this.showInlineReport());
}
// Download buttons
const downloadTextBtn = this.container.querySelector('#downloadTextBtn');
if (downloadTextBtn) {
downloadTextBtn.addEventListener('click', () => this.downloadReport('text'));
}
const downloadHtmlBtn = this.container.querySelector('#downloadHtmlBtn');
if (downloadHtmlBtn) {
downloadHtmlBtn.addEventListener('click', () => this.downloadReport('html'));
}
const downloadJsonBtn = this.container.querySelector('#downloadJsonBtn');
if (downloadJsonBtn) {
downloadJsonBtn.addEventListener('click', () => this.downloadReport('json'));
}
// Close inline view
const closeInlineBtn = this.container.querySelector('#closeInlineBtn');
if (closeInlineBtn) {
closeInlineBtn.addEventListener('click', () => this.hideInlineReport());
}
}
/**
* Update the status display
* @param {string} message - Status message
* @param {string} type - Status type ('info', 'success', 'warning')
*/
updateStatus(message, type = 'info') {
if (!this.container) return;
const statusElement = this.container.querySelector('.ai-report-status');
if (statusElement) {
statusElement.textContent = message;
statusElement.className = `ai-report-status ai-report-status-${type}`;
}
}
/**
* Notify about session start
* @param {Object} sessionInfo - Session information
*/
onSessionStart(sessionInfo) {
this.updateStatus(`📚 Session active: ${sessionInfo.bookId}/${sessionInfo.chapterId}`, 'success');
if (this.config.autoShow) {
this.show();
}
}
/**
* Notify about session end
* @param {Object} sessionStats - Session statistics
*/
onSessionEnd(sessionStats) {
const exerciseCount = sessionStats.exerciseCount || 0;
const avgScore = sessionStats.averageScore || 0;
this.updateStatus(
`✅ Session terminée: ${exerciseCount} exercices, ${Math.round(avgScore)}% moyen`,
'success'
);
}
/**
* Show inline report
*/
async showInlineReport() {
if (!this.llmValidator || !this.llmValidator.config.enableReporting) {
alert('Le système de rapport n\'est pas disponible');
return;
}
try {
const report = this.llmValidator.getReport('text');
const inlineView = this.container.querySelector('#inlineReportView');
const inlineContent = this.container.querySelector('.ai-report-inline-content');
if (inlineContent && inlineView) {
inlineContent.textContent = report;
inlineView.style.display = 'block';
}
} catch (error) {
alert(`Erreur lors de la génération du rapport: ${error.message}`);
}
}
/**
* Hide inline report
*/
hideInlineReport() {
const inlineView = this.container.querySelector('#inlineReportView');
if (inlineView) {
inlineView.style.display = 'none';
}
}
/**
* Download report in specified format
* @param {string} format - Report format ('text', 'html', 'json')
*/
async downloadReport(format) {
if (!this.llmValidator || !this.llmValidator.config.enableReporting) {
alert('Le système de rapport n\'est pas disponible');
return;
}
try {
await this.llmValidator.exportReport(format);
this.updateStatus(`📥 Rapport ${format.toUpperCase()} téléchargé`, 'success');
// Reset status after 3 seconds
setTimeout(() => {
this.updateStatus('Rapport disponible au téléchargement', 'info');
}, 3000);
} catch (error) {
alert(`Erreur lors du téléchargement: ${error.message}`);
}
}
/**
* Show the report interface
*/
show() {
if (!this.container) return;
this.container.style.display = 'block';
this.isVisible = true;
}
/**
* Hide the report interface
*/
hide() {
if (!this.container) return;
this.container.style.display = 'none';
this.isVisible = false;
}
/**
* Toggle the report interface visibility
*/
toggle() {
const panel = this.container.querySelector('.ai-report-panel');
if (panel) {
panel.classList.toggle('collapsed');
}
}
/**
* Destroy the component and clean up
*/
destroy() {
if (this.container && this.container.parentNode) {
this.container.parentNode.removeChild(this.container);
}
this.container = null;
console.log('📊 AIReportInterface destroyed');
}
}
// Register the component
componentRegistry.register('aiReportInterface', AIReportInterface);
export default AIReportInterface;

379
src/components/Button.js Normal file
View File

@ -0,0 +1,379 @@
/**
* Button Component - Reusable button with consistent styling and behavior
* Extracted from DRS module patterns (TextModule, AudioModule, etc.)
*/
class Button {
constructor(options = {}) {
// Default configuration
this.config = {
text: options.text || 'Button',
icon: options.icon || null,
type: options.type || 'primary', // primary, secondary, outline, success, danger
size: options.size || 'normal', // sm, normal, lg
disabled: options.disabled || false,
loading: options.loading || false,
onClick: options.onClick || (() => {}),
className: options.className || '',
id: options.id || null,
...options
};
this.element = null;
this.originalText = this.config.text;
this.originalIcon = this.config.icon;
this._createButton();
Object.seal(this);
}
/**
* Create the button element
* @private
*/
_createButton() {
this.element = document.createElement('button');
this.element.className = this._getButtonClasses();
if (this.config.id) {
this.element.id = this.config.id;
}
this._updateContent();
this._attachEventListeners();
this._updateState();
}
/**
* Get CSS classes for the button
* @returns {string} - Space-separated CSS classes
* @private
*/
_getButtonClasses() {
const classes = ['btn'];
// Type classes
classes.push(`btn-${this.config.type}`);
// Size classes
if (this.config.size !== 'normal') {
classes.push(`btn-${this.config.size}`);
}
// Custom classes
if (this.config.className) {
classes.push(this.config.className);
}
return classes.join(' ');
}
/**
* Update button content (text and icon)
* @private
*/
_updateContent() {
let content = '';
if (this.config.loading) {
content = `
<span class="btn-spinner">⟳</span>
<span class="btn-text">${this.config.loadingText || 'Loading...'}</span>
`;
} else {
if (this.config.icon) {
content += `<span class="btn-icon">${this.config.icon}</span>`;
}
if (this.config.text) {
content += `<span class="btn-text">${this.config.text}</span>`;
}
}
this.element.innerHTML = content;
}
/**
* Attach event listeners
* @private
*/
_attachEventListeners() {
this.element.addEventListener('click', (event) => {
if (!this.config.disabled && !this.config.loading) {
this.config.onClick(event, this);
}
});
// Prevent default form submission if inside a form
this.element.addEventListener('click', (event) => {
if (this.element.type === 'button') {
event.preventDefault();
}
});
}
/**
* Update button state (disabled, loading, etc.)
* @private
*/
_updateState() {
this.element.disabled = this.config.disabled || this.config.loading;
// Update ARIA attributes
this.element.setAttribute('aria-disabled', this.config.disabled);
if (this.config.loading) {
this.element.setAttribute('aria-busy', 'true');
} else {
this.element.removeAttribute('aria-busy');
}
}
// Public API
/**
* Set button text
* @param {string} text - New button text
*/
setText(text) {
this.config.text = text;
this._updateContent();
return this;
}
/**
* Set button icon
* @param {string} icon - New button icon (emoji or HTML)
*/
setIcon(icon) {
this.config.icon = icon;
this._updateContent();
return this;
}
/**
* Enable the button
*/
enable() {
this.config.disabled = false;
this._updateState();
return this;
}
/**
* Disable the button
*/
disable() {
this.config.disabled = true;
this._updateState();
return this;
}
/**
* Set loading state
* @param {boolean} loading - Whether button is loading
* @param {string} loadingText - Optional loading text
*/
setLoading(loading, loadingText = null) {
this.config.loading = loading;
if (loadingText) {
this.config.loadingText = loadingText;
}
this._updateContent();
this._updateState();
return this;
}
/**
* Update onClick handler
* @param {Function} handler - New click handler
*/
setOnClick(handler) {
this.config.onClick = handler || (() => {});
return this;
}
/**
* Add CSS class to button
* @param {string} className - CSS class to add
*/
addClass(className) {
this.element.classList.add(className);
return this;
}
/**
* Remove CSS class from button
* @param {string} className - CSS class to remove
*/
removeClass(className) {
this.element.classList.remove(className);
return this;
}
/**
* Toggle CSS class on button
* @param {string} className - CSS class to toggle
* @param {boolean} force - Force add/remove
*/
toggleClass(className, force) {
this.element.classList.toggle(className, force);
return this;
}
/**
* Show the button
*/
show() {
this.element.style.display = '';
return this;
}
/**
* Hide the button
*/
hide() {
this.element.style.display = 'none';
return this;
}
/**
* Focus the button
*/
focus() {
this.element.focus();
return this;
}
/**
* Get the DOM element
* @returns {HTMLButtonElement} - The button element
*/
getElement() {
return this.element;
}
/**
* Append button to a container
* @param {HTMLElement} container - Container to append to
*/
appendTo(container) {
if (container && container.appendChild) {
container.appendChild(this.element);
}
return this;
}
/**
* Remove button from DOM
*/
remove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
return this;
}
/**
* Destroy the button and clean up
*/
destroy() {
this.remove();
this.element = null;
this.config = null;
}
/**
* Clone the button with new options
* @param {Object} newOptions - Options to override
* @returns {Button} - New button instance
*/
clone(newOptions = {}) {
return new Button({
...this.config,
...newOptions
});
}
// Static factory methods
/**
* Create a primary button
* @param {string} text - Button text
* @param {Function} onClick - Click handler
* @param {string} icon - Optional icon
* @returns {Button} - Button instance
*/
static primary(text, onClick, icon = null) {
return new Button({
text,
onClick,
icon,
type: 'primary'
});
}
/**
* Create a secondary button
* @param {string} text - Button text
* @param {Function} onClick - Click handler
* @param {string} icon - Optional icon
* @returns {Button} - Button instance
*/
static secondary(text, onClick, icon = null) {
return new Button({
text,
onClick,
icon,
type: 'secondary'
});
}
/**
* Create an outline button
* @param {string} text - Button text
* @param {Function} onClick - Click handler
* @param {string} icon - Optional icon
* @returns {Button} - Button instance
*/
static outline(text, onClick, icon = null) {
return new Button({
text,
onClick,
icon,
type: 'outline'
});
}
/**
* Create a success button
* @param {string} text - Button text
* @param {Function} onClick - Click handler
* @param {string} icon - Optional icon
* @returns {Button} - Button instance
*/
static success(text, onClick, icon = null) {
return new Button({
text,
onClick,
icon,
type: 'success'
});
}
/**
* Create a danger button
* @param {string} text - Button text
* @param {Function} onClick - Click handler
* @param {string} icon - Optional icon
* @returns {Button} - Button instance
*/
static danger(text, onClick, icon = null) {
return new Button({
text,
onClick,
icon,
type: 'danger'
});
}
}
export default Button;

474
src/components/Card.js Normal file
View File

@ -0,0 +1,474 @@
/**
* Card Component - Reusable card container with consistent styling
* Extracted from DRS module patterns (exercise cards, question cards, result cards)
*/
class Card {
constructor(options = {}) {
// Default configuration
this.config = {
title: options.title || null,
content: options.content || '',
footer: options.footer || null,
type: options.type || 'default', // default, exercise, question, result, info, warning, success, danger
size: options.size || 'normal', // sm, normal, lg
elevated: options.elevated !== false, // true by default
interactive: options.interactive || false, // hover effects, clickable
onClick: options.onClick || null,
className: options.className || '',
id: options.id || null,
...options
};
this.element = null;
this.headerElement = null;
this.bodyElement = null;
this.footerElement = null;
this._createCard();
Object.seal(this);
}
/**
* Create the card element
* @private
*/
_createCard() {
this.element = document.createElement('div');
this.element.className = this._getCardClasses();
if (this.config.id) {
this.element.id = this.config.id;
}
// Create card structure
this.element.innerHTML = this._getCardHTML();
// Get references to sections
this.headerElement = this.element.querySelector('.card-header');
this.bodyElement = this.element.querySelector('.card-body');
this.footerElement = this.element.querySelector('.card-footer');
this._attachEventListeners();
this._setupARIA();
}
/**
* Get CSS classes for the card
* @returns {string} - Space-separated CSS classes
* @private
*/
_getCardClasses() {
const classes = ['card'];
// Type classes
if (this.config.type !== 'default') {
classes.push(`card-${this.config.type}`);
}
// Size classes
if (this.config.size !== 'normal') {
classes.push(`card-${this.config.size}`);
}
// State classes
if (this.config.elevated) {
classes.push('card-elevated');
}
if (this.config.interactive) {
classes.push('card-interactive');
}
// Custom classes
if (this.config.className) {
classes.push(this.config.className);
}
return classes.join(' ');
}
/**
* Get card HTML structure
* @returns {string} - HTML string
* @private
*/
_getCardHTML() {
return `
${this.config.title ? `<div class="card-header"><h3 class="card-title">${this.config.title}</h3></div>` : ''}
<div class="card-body">
${this.config.content}
</div>
${this.config.footer ? `<div class="card-footer">${this.config.footer}</div>` : ''}
`;
}
/**
* Attach event listeners
* @private
*/
_attachEventListeners() {
if (this.config.interactive && this.config.onClick) {
this.element.addEventListener('click', (event) => {
this.config.onClick(event, this);
});
this.element.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.config.onClick(event, this);
}
});
}
}
/**
* Setup ARIA attributes for accessibility
* @private
*/
_setupARIA() {
if (this.config.interactive) {
this.element.setAttribute('tabindex', '0');
this.element.setAttribute('role', 'button');
this.element.setAttribute('aria-label', this.config.title || 'Interactive card');
}
}
// Public API
/**
* Set card title
* @param {string} title - New title
*/
setTitle(title) {
this.config.title = title;
if (title) {
if (!this.headerElement) {
// Create header if it doesn't exist
const headerHTML = `<div class="card-header"><h3 class="card-title">${title}</h3></div>`;
this.element.insertAdjacentHTML('afterbegin', headerHTML);
this.headerElement = this.element.querySelector('.card-header');
} else {
const titleElement = this.headerElement.querySelector('.card-title');
if (titleElement) {
titleElement.textContent = title;
}
}
} else if (this.headerElement) {
this.headerElement.remove();
this.headerElement = null;
}
return this;
}
/**
* Set card content
* @param {string|HTMLElement} content - New content
*/
setContent(content) {
this.config.content = content;
if (this.bodyElement) {
if (typeof content === 'string') {
this.bodyElement.innerHTML = content;
} else if (content instanceof HTMLElement) {
this.bodyElement.innerHTML = '';
this.bodyElement.appendChild(content);
}
}
return this;
}
/**
* Append content to card body
* @param {string|HTMLElement} content - Content to append
*/
appendContent(content) {
if (this.bodyElement) {
if (typeof content === 'string') {
this.bodyElement.insertAdjacentHTML('beforeend', content);
} else if (content instanceof HTMLElement) {
this.bodyElement.appendChild(content);
}
}
return this;
}
/**
* Set card footer
* @param {string} footer - New footer content
*/
setFooter(footer) {
this.config.footer = footer;
if (footer) {
if (!this.footerElement) {
// Create footer if it doesn't exist
const footerHTML = `<div class="card-footer">${footer}</div>`;
this.element.insertAdjacentHTML('beforeend', footerHTML);
this.footerElement = this.element.querySelector('.card-footer');
} else {
this.footerElement.innerHTML = footer;
}
} else if (this.footerElement) {
this.footerElement.remove();
this.footerElement = null;
}
return this;
}
/**
* Set card type/theme
* @param {string} type - Card type (default, exercise, question, result, info, warning, success, danger)
*/
setType(type) {
// Remove old type class
this.element.className = this.element.className.replace(/card-\w+/g, '');
this.config.type = type;
// Add new type class
if (type !== 'default') {
this.element.classList.add(`card-${type}`);
}
return this;
}
/**
* Enable or disable interactive state
* @param {boolean} interactive - Whether card is interactive
* @param {Function} onClick - Optional click handler
*/
setInteractive(interactive, onClick = null) {
this.config.interactive = interactive;
if (onClick) {
this.config.onClick = onClick;
}
this.element.classList.toggle('card-interactive', interactive);
if (interactive) {
this.element.setAttribute('tabindex', '0');
this.element.setAttribute('role', 'button');
this._attachEventListeners();
} else {
this.element.removeAttribute('tabindex');
this.element.removeAttribute('role');
}
return this;
}
/**
* Enable or disable elevation shadow
* @param {boolean} elevated - Whether card has elevation
*/
setElevated(elevated) {
this.config.elevated = elevated;
this.element.classList.toggle('card-elevated', elevated);
return this;
}
/**
* Add CSS class to card
* @param {string} className - CSS class to add
*/
addClass(className) {
this.element.classList.add(className);
return this;
}
/**
* Remove CSS class from card
* @param {string} className - CSS class to remove
*/
removeClass(className) {
this.element.classList.remove(className);
return this;
}
/**
* Toggle CSS class on card
* @param {string} className - CSS class to toggle
* @param {boolean} force - Force add/remove
*/
toggleClass(className, force) {
this.element.classList.toggle(className, force);
return this;
}
/**
* Show the card with optional animation
* @param {string} animation - Animation type (fade, slide, scale)
*/
show(animation = null) {
this.element.style.display = '';
if (animation) {
this.element.classList.add(`card-animate-${animation}`);
setTimeout(() => {
this.element.classList.remove(`card-animate-${animation}`);
}, 300);
}
return this;
}
/**
* Hide the card with optional animation
* @param {string} animation - Animation type (fade, slide, scale)
*/
hide(animation = null) {
if (animation) {
this.element.classList.add(`card-animate-${animation}-out`);
setTimeout(() => {
this.element.style.display = 'none';
this.element.classList.remove(`card-animate-${animation}-out`);
}, 300);
} else {
this.element.style.display = 'none';
}
return this;
}
/**
* Get the DOM element
* @returns {HTMLElement} - The card element
*/
getElement() {
return this.element;
}
/**
* Get card header element
* @returns {HTMLElement|null} - The header element
*/
getHeader() {
return this.headerElement;
}
/**
* Get card body element
* @returns {HTMLElement} - The body element
*/
getBody() {
return this.bodyElement;
}
/**
* Get card footer element
* @returns {HTMLElement|null} - The footer element
*/
getFooter() {
return this.footerElement;
}
/**
* Append card to a container
* @param {HTMLElement} container - Container to append to
*/
appendTo(container) {
if (container && container.appendChild) {
container.appendChild(this.element);
}
return this;
}
/**
* Remove card from DOM
*/
remove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
return this;
}
/**
* Destroy the card and clean up
*/
destroy() {
this.remove();
this.element = null;
this.headerElement = null;
this.bodyElement = null;
this.footerElement = null;
this.config = null;
}
// Static factory methods
/**
* Create an exercise card
* @param {string} title - Exercise title
* @param {string} content - Exercise content
* @param {Object} options - Additional options
* @returns {Card} - Card instance
*/
static exercise(title, content, options = {}) {
return new Card({
title,
content,
type: 'exercise',
elevated: true,
...options
});
}
/**
* Create a question card
* @param {string} question - Question text
* @param {Object} options - Additional options
* @returns {Card} - Card instance
*/
static question(question, options = {}) {
return new Card({
content: question,
type: 'question',
elevated: true,
...options
});
}
/**
* Create a result card
* @param {string} result - Result content
* @param {boolean} success - Whether result is positive
* @param {Object} options - Additional options
* @returns {Card} - Card instance
*/
static result(result, success = true, options = {}) {
return new Card({
content: result,
type: success ? 'success' : 'danger',
elevated: true,
...options
});
}
/**
* Create an info card
* @param {string} title - Info title
* @param {string} content - Info content
* @param {Object} options - Additional options
* @returns {Card} - Card instance
*/
static info(title, content, options = {}) {
return new Card({
title,
content,
type: 'info',
...options
});
}
}
export default Card;

363
src/components/ComponentRegistry.js Normal file
View File

@ -0,0 +1,363 @@
/**
* ComponentRegistry - Central registry for UI components
* Manages component registration, creation, and lifecycle
*/
class ComponentRegistry {
constructor() {
this.components = new Map();
this.instances = new WeakMap();
this._initialized = false;
Object.seal(this);
}
/**
* Initialize the component registry
*/
async init() {
if (this._initialized) return;
console.log('🎨 Initializing Component Registry...');
// Auto-register core components
await this._registerCoreComponents();
this._initialized = true;
console.log('✅ Component Registry initialized');
}
/**
* Register core UI components
* @private
*/
async _registerCoreComponents() {
try {
// Import and register Button component
const { default: Button } = await import('./Button.js');
this.register('Button', Button, {
category: 'input',
description: 'Interactive button with loading states and icons'
});
// Import and register ProgressBar component
const { default: ProgressBar } = await import('./ProgressBar.js');
this.register('ProgressBar', ProgressBar, {
category: 'feedback',
description: 'Progress indicator with animation and themes'
});
// Import and register Card component
const { default: Card } = await import('./Card.js');
this.register('Card', Card, {
category: 'layout',
description: 'Versatile card container for content sections'
});
// Import and register Panel component
const { default: Panel } = await import('./Panel.js');
this.register('Panel', Panel, {
category: 'layout',
description: 'Collapsible content panel with themes'
});
console.log(`✅ Registered ${this.components.size} core components`);
} catch (error) {
console.error('❌ Failed to register core components:', error);
throw error;
}
}
/**
* Register a component class
* @param {string} name - Component name
* @param {Class} componentClass - Component constructor
* @param {Object} metadata - Component metadata
*/
register(name, componentClass, metadata = {}) {
if (!name || typeof name !== 'string') {
throw new Error('Component name must be a non-empty string');
}
if (!componentClass || typeof componentClass !== 'function') {
throw new Error('Component class must be a constructor function');
}
if (this.components.has(name)) {
console.warn(`⚠️ Component '${name}' already registered. Overriding...`);
}
this.components.set(name, {
class: componentClass,
metadata: {
name,
category: metadata.category || 'general',
description: metadata.description || 'No description provided',
version: metadata.version || '1.0.0',
...metadata
},
created: 0,
active: 0
});
console.log(`📝 Registered component: ${name} (${metadata.category})`);
}
/**
* Create a component instance
* @param {string} name - Component name
* @param {Object} options - Component options
* @param {HTMLElement} container - Optional container to append to
* @returns {Object} Component instance
*/
create(name, options = {}, container = null) {
if (!this.components.has(name)) {
throw new Error(`Component '${name}' is not registered`);
}
const componentInfo = this.components.get(name);
const ComponentClass = componentInfo.class;
try {
// Create instance
const instance = new ComponentClass(options);
// Track instance
this.instances.set(instance, {
name,
created: Date.now(),
options: { ...options }
});
// Update stats
componentInfo.created++;
componentInfo.active++;
// Auto-append if container provided
if (container && instance.appendTo) {
instance.appendTo(container);
}
console.log(`🎨 Created ${name} component`);
return instance;
} catch (error) {
console.error(`❌ Failed to create ${name} component:`, error);
throw error;
}
}
/**
* Destroy a component instance
* @param {Object} instance - Component instance
*/
destroy(instance) {
if (!instance) return;
const instanceInfo = this.instances.get(instance);
if (!instanceInfo) {
console.warn('⚠️ Component instance not tracked by registry');
return;
}
try {
// Call instance destroy method if available
if (instance.destroy && typeof instance.destroy === 'function') {
instance.destroy();
}
// Update stats
const componentInfo = this.components.get(instanceInfo.name);
if (componentInfo) {
componentInfo.active = Math.max(0, componentInfo.active - 1);
}
// Remove from tracking
this.instances.delete(instance);
console.log(`🗑️ Destroyed ${instanceInfo.name} component`);
} catch (error) {
console.error('❌ Error destroying component:', error);
}
}
/**
* Get registered component names
* @param {string} category - Optional category filter
* @returns {Array<string>} Component names
*/
getComponentNames(category = null) {
const names = Array.from(this.components.keys());
if (category) {
return names.filter(name => {
const component = this.components.get(name);
return component.metadata.category === category;
});
}
return names;
}
/**
* Get component metadata
* @param {string} name - Component name
* @returns {Object} Component metadata
*/
getMetadata(name) {
if (!this.components.has(name)) {
return null;
}
return { ...this.components.get(name).metadata };
}
/**
* Get component statistics
* @param {string} name - Optional component name
* @returns {Object} Statistics
*/
getStats(name = null) {
if (name) {
const component = this.components.get(name);
if (!component) return null;
return {
name,
created: component.created,
active: component.active,
metadata: component.metadata
};
}
// Return overall stats
const stats = {
totalRegistered: this.components.size,
totalCreated: 0,
totalActive: 0,
byCategory: {},
components: []
};
this.components.forEach((component, name) => {
stats.totalCreated += component.created;
stats.totalActive += component.active;
const category = component.metadata.category;
if (!stats.byCategory[category]) {
stats.byCategory[category] = {
registered: 0,
created: 0,
active: 0
};
}
stats.byCategory[category].registered++;
stats.byCategory[category].created += component.created;
stats.byCategory[category].active += component.active;
stats.components.push({
name,
category,
created: component.created,
active: component.active
});
});
return stats;
}
/**
* Check if component exists
* @param {string} name - Component name
* @returns {boolean} Whether component is registered
*/
has(name) {
return this.components.has(name);
}
/**
* List all registered components with details
* @returns {Array<Object>} Component information
*/
list() {
return Array.from(this.components.entries()).map(([name, info]) => ({
name,
category: info.metadata.category,
description: info.metadata.description,
version: info.metadata.version,
created: info.created,
active: info.active
}));
}
/**
* Get component creation helpers
* @returns {Object} Helper methods for each component
*/
getHelpers() {
const helpers = {};
this.components.forEach((info, name) => {
// Create helper method for each component
helpers[name.toLowerCase()] = (options = {}, container = null) => {
return this.create(name, options, container);
};
// Create factory methods if component has static methods
const ComponentClass = info.class;
if (ComponentClass.primary) {
helpers[`${name.toLowerCase()}Primary`] = (...args) => {
return ComponentClass.primary(...args);
};
}
if (ComponentClass.secondary) {
helpers[`${name.toLowerCase()}Secondary`] = (...args) => {
return ComponentClass.secondary(...args);
};
}
if (ComponentClass.success) {
helpers[`${name.toLowerCase()}Success`] = (...args) => {
return ComponentClass.success(...args);
};
}
});
return helpers;
}
/**
* Clean up inactive components
*/
cleanup() {
console.log('🧹 Cleaning up component registry...');
let cleanedCount = 0;
this.components.forEach((info, name) => {
if (info.active === 0 && info.created > 0) {
// Component has been created but no active instances
console.log(`🧹 Component '${name}' has no active instances`);
cleanedCount++;
}
});
console.log(`✅ Component cleanup complete (${cleanedCount} components reviewed)`);
}
/**
* Get registry status
* @returns {Object} Registry status
*/
getStatus() {
return {
initialized: this._initialized,
components: this.components.size,
stats: this.getStats()
};
}
}
// Create singleton instance
const componentRegistry = new ComponentRegistry();
export default componentRegistry;

614
src/components/Panel.js Normal file
View File

@ -0,0 +1,614 @@
/**
* Panel Component - Reusable panel container for content sections
* Extracted from DRS module patterns (explanation panels, hint panels, content sections)
*/
class Panel {
constructor(options = {}) {
// Default configuration
this.config = {
title: options.title || null,
content: options.content || '',
type: options.type || 'default', // default, info, success, warning, danger, hint, explanation
collapsible: options.collapsible || false,
collapsed: options.collapsed || false,
closable: options.closable || false,
onCollapse: options.onCollapse || null,
onExpand: options.onExpand || null,
onClose: options.onClose || null,
className: options.className || '',
id: options.id || null,
...options
};
this.element = null;
this.headerElement = null;
this.titleElement = null;
this.bodyElement = null;
this.toggleButton = null;
this.closeButton = null;
this._createPanel();
Object.seal(this);
}
/**
* Create the panel element
* @private
*/
_createPanel() {
this.element = document.createElement('div');
this.element.className = this._getPanelClasses();
if (this.config.id) {
this.element.id = this.config.id;
}
// Create panel structure
this.element.innerHTML = this._getPanelHTML();
// Get references to elements
this.headerElement = this.element.querySelector('.panel-header');
this.titleElement = this.element.querySelector('.panel-title');
this.bodyElement = this.element.querySelector('.panel-body');
this.toggleButton = this.element.querySelector('.panel-toggle');
this.closeButton = this.element.querySelector('.panel-close');
this._attachEventListeners();
this._updateState();
this._setupARIA();
}
/**
* Get CSS classes for the panel
* @returns {string} - Space-separated CSS classes
* @private
*/
_getPanelClasses() {
const classes = ['panel'];
// Type classes
if (this.config.type !== 'default') {
classes.push(`panel-${this.config.type}`);
}
// State classes
if (this.config.collapsible) {
classes.push('panel-collapsible');
}
if (this.config.collapsed) {
classes.push('panel-collapsed');
}
// Custom classes
if (this.config.className) {
classes.push(this.config.className);
}
return classes.join(' ');
}
/**
* Get panel HTML structure
* @returns {string} - HTML string
* @private
*/
_getPanelHTML() {
const hasHeader = this.config.title || this.config.collapsible || this.config.closable;
return `
${hasHeader ? `
<div class="panel-header">
${this.config.title ? `<h4 class="panel-title">${this.config.title}</h4>` : ''}
<div class="panel-controls">
${this.config.collapsible ? '<button class="panel-toggle" aria-label="Toggle panel">▼</button>' : ''}
${this.config.closable ? '<button class="panel-close" aria-label="Close panel">✕</button>' : ''}
</div>
</div>
` : ''}
<div class="panel-body">
${this.config.content}
</div>
`;
}
/**
* Attach event listeners
* @private
*/
_attachEventListeners() {
if (this.toggleButton) {
this.toggleButton.addEventListener('click', () => {
this.toggle();
});
}
if (this.closeButton) {
this.closeButton.addEventListener('click', () => {
this.close();
});
}
// Allow clicking header to toggle if collapsible
if (this.config.collapsible && this.headerElement) {
this.headerElement.style.cursor = 'pointer';
this.headerElement.addEventListener('click', (event) => {
// Don't toggle if clicking on buttons
if (!event.target.matches('.panel-toggle, .panel-close')) {
this.toggle();
}
});
}
}
/**
* Update panel state
* @private
*/
_updateState() {
if (this.config.collapsed) {
this.bodyElement.style.display = 'none';
if (this.toggleButton) {
this.toggleButton.textContent = '▶';
this.toggleButton.setAttribute('aria-expanded', 'false');
}
} else {
this.bodyElement.style.display = '';
if (this.toggleButton) {
this.toggleButton.textContent = '▼';
this.toggleButton.setAttribute('aria-expanded', 'true');
}
}
}
/**
* Setup ARIA attributes for accessibility
* @private
*/
_setupARIA() {
if (this.config.collapsible) {
this.element.setAttribute('aria-expanded', this.config.collapsed ? 'false' : 'true');
if (this.bodyElement && this.toggleButton) {
const bodyId = this.bodyElement.id || `panel-body-${Date.now()}`;
this.bodyElement.id = bodyId;
this.toggleButton.setAttribute('aria-controls', bodyId);
}
}
}
// Public API
/**
* Set panel title
* @param {string} title - New title
*/
setTitle(title) {
this.config.title = title;
if (title) {
if (!this.titleElement) {
// Create header structure if needed
if (!this.headerElement) {
const headerHTML = `
<div class="panel-header">
<h4 class="panel-title">${title}</h4>
<div class="panel-controls">
${this.config.collapsible ? '<button class="panel-toggle" aria-label="Toggle panel">▼</button>' : ''}
${this.config.closable ? '<button class="panel-close" aria-label="Close panel">✕</button>' : ''}
</div>
</div>
`;
this.element.insertAdjacentHTML('afterbegin', headerHTML);
this.headerElement = this.element.querySelector('.panel-header');
this.titleElement = this.element.querySelector('.panel-title');
this.toggleButton = this.element.querySelector('.panel-toggle');
this.closeButton = this.element.querySelector('.panel-close');
this._attachEventListeners();
} else {
// Just add title to existing header
const titleHTML = `<h4 class="panel-title">${title}</h4>`;
this.headerElement.insertAdjacentHTML('afterbegin', titleHTML);
this.titleElement = this.element.querySelector('.panel-title');
}
} else {
this.titleElement.textContent = title;
}
} else if (this.titleElement) {
this.titleElement.remove();
this.titleElement = null;
}
return this;
}
/**
* Set panel content
* @param {string|HTMLElement} content - New content
*/
setContent(content) {
this.config.content = content;
if (this.bodyElement) {
if (typeof content === 'string') {
this.bodyElement.innerHTML = content;
} else if (content instanceof HTMLElement) {
this.bodyElement.innerHTML = '';
this.bodyElement.appendChild(content);
}
}
return this;
}
/**
* Append content to panel body
* @param {string|HTMLElement} content - Content to append
*/
appendContent(content) {
if (this.bodyElement) {
if (typeof content === 'string') {
this.bodyElement.insertAdjacentHTML('beforeend', content);
} else if (content instanceof HTMLElement) {
this.bodyElement.appendChild(content);
}
}
return this;
}
/**
* Set panel type/theme
* @param {string} type - Panel type (default, info, success, warning, danger, hint, explanation)
*/
setType(type) {
// Remove old type class
this.element.className = this.element.className.replace(/panel-\w+/g, '');
this.config.type = type;
// Add new type class
if (type !== 'default') {
this.element.classList.add(`panel-${type}`);
}
return this;
}
/**
* Expand the panel (if collapsible)
* @param {boolean} animate - Whether to animate the expansion
*/
expand(animate = true) {
if (!this.config.collapsible || !this.config.collapsed) return this;
this.config.collapsed = false;
this.element.classList.remove('panel-collapsed');
if (animate) {
this.bodyElement.style.transition = 'max-height 0.3s ease, opacity 0.3s ease';
this.bodyElement.style.maxHeight = '0';
this.bodyElement.style.opacity = '0';
this.bodyElement.style.display = '';
requestAnimationFrame(() => {
this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';
this.bodyElement.style.opacity = '1';
setTimeout(() => {
this.bodyElement.style.transition = '';
this.bodyElement.style.maxHeight = '';
}, 300);
});
} else {
this.bodyElement.style.display = '';
}
this._updateState();
if (this.config.onExpand) {
this.config.onExpand(this);
}
return this;
}
/**
* Collapse the panel (if collapsible)
* @param {boolean} animate - Whether to animate the collapse
*/
collapse(animate = true) {
if (!this.config.collapsible || this.config.collapsed) return this;
this.config.collapsed = true;
this.element.classList.add('panel-collapsed');
if (animate) {
this.bodyElement.style.transition = 'max-height 0.3s ease, opacity 0.3s ease';
this.bodyElement.style.maxHeight = this.bodyElement.scrollHeight + 'px';
this.bodyElement.style.opacity = '1';
requestAnimationFrame(() => {
this.bodyElement.style.maxHeight = '0';
this.bodyElement.style.opacity = '0';
setTimeout(() => {
this.bodyElement.style.display = 'none';
this.bodyElement.style.transition = '';
this.bodyElement.style.maxHeight = '';
this.bodyElement.style.opacity = '';
}, 300);
});
} else {
this.bodyElement.style.display = 'none';
}
this._updateState();
if (this.config.onCollapse) {
this.config.onCollapse(this);
}
return this;
}
/**
* Toggle panel collapsed state
* @param {boolean} animate - Whether to animate the toggle
*/
toggle(animate = true) {
if (this.config.collapsed) {
this.expand(animate);
} else {
this.collapse(animate);
}
return this;
}
/**
* Close/remove the panel
* @param {boolean} animate - Whether to animate the close
*/
close(animate = true) {
if (this.config.onClose) {
// Allow onClose to prevent closing by returning false
if (this.config.onClose(this) === false) {
return this;
}
}
if (animate) {
this.element.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
this.element.style.opacity = '0';
this.element.style.transform = 'translateY(-10px)';
setTimeout(() => {
this.remove();
}, 300);
} else {
this.remove();
}
return this;
}
/**
* Enable or disable collapsible functionality
* @param {boolean} collapsible - Whether panel can be collapsed
*/
setCollapsible(collapsible) {
this.config.collapsible = collapsible;
this.element.classList.toggle('panel-collapsible', collapsible);
if (collapsible && !this.toggleButton) {
// Add toggle button
if (!this.headerElement) {
// Create header first
const headerHTML = `
<div class="panel-header">
${this.config.title ? `<h4 class="panel-title">${this.config.title}</h4>` : ''}
<div class="panel-controls">
<button class="panel-toggle" aria-label="Toggle panel">▼</button>
</div>
</div>
`;
this.element.insertAdjacentHTML('afterbegin', headerHTML);
this.headerElement = this.element.querySelector('.panel-header');
} else {
// Add to existing controls
let controlsDiv = this.headerElement.querySelector('.panel-controls');
if (!controlsDiv) {
controlsDiv = document.createElement('div');
controlsDiv.className = 'panel-controls';
this.headerElement.appendChild(controlsDiv);
}
controlsDiv.insertAdjacentHTML('afterbegin', '<button class="panel-toggle" aria-label="Toggle panel">▼</button>');
}
this.toggleButton = this.element.querySelector('.panel-toggle');
this._attachEventListeners();
this._setupARIA();
} else if (!collapsible && this.toggleButton) {
this.toggleButton.remove();
this.toggleButton = null;
}
return this;
}
/**
* Show the panel
*/
show() {
this.element.style.display = '';
return this;
}
/**
* Hide the panel
*/
hide() {
this.element.style.display = 'none';
return this;
}
/**
* Add CSS class to panel
* @param {string} className - CSS class to add
*/
addClass(className) {
this.element.classList.add(className);
return this;
}
/**
* Remove CSS class from panel
* @param {string} className - CSS class to remove
*/
removeClass(className) {
this.element.classList.remove(className);
return this;
}
/**
* Get the DOM element
* @returns {HTMLElement} - The panel element
*/
getElement() {
return this.element;
}
/**
* Get panel header element
* @returns {HTMLElement|null} - The header element
*/
getHeader() {
return this.headerElement;
}
/**
* Get panel body element
* @returns {HTMLElement} - The body element
*/
getBody() {
return this.bodyElement;
}
/**
* Append panel to a container
* @param {HTMLElement} container - Container to append to
*/
appendTo(container) {
if (container && container.appendChild) {
container.appendChild(this.element);
}
return this;
}
/**
* Remove panel from DOM
*/
remove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
return this;
}
/**
* Destroy the panel and clean up
*/
destroy() {
this.remove();
this.element = null;
this.headerElement = null;
this.titleElement = null;
this.bodyElement = null;
this.toggleButton = null;
this.closeButton = null;
this.config = null;
}
// Static factory methods
/**
* Create an info panel
* @param {string} title - Panel title
* @param {string} content - Panel content
* @param {Object} options - Additional options
* @returns {Panel} - Panel instance
*/
static info(title, content, options = {}) {
return new Panel({
title,
content,
type: 'info',
...options
});
}
/**
* Create a hint panel (collapsible by default)
* @param {string} content - Hint content
* @param {Object} options - Additional options
* @returns {Panel} - Panel instance
*/
static hint(content, options = {}) {
return new Panel({
title: 'Hint',
content,
type: 'hint',
collapsible: true,
collapsed: true,
...options
});
}
/**
* Create an explanation panel
* @param {string} title - Explanation title
* @param {string} content - Explanation content
* @param {Object} options - Additional options
* @returns {Panel} - Panel instance
*/
static explanation(title, content, options = {}) {
return new Panel({
title,
content,
type: 'explanation',
...options
});
}
/**
* Create a warning panel
* @param {string} message - Warning message
* @param {Object} options - Additional options
* @returns {Panel} - Panel instance
*/
static warning(message, options = {}) {
return new Panel({
content: message,
type: 'warning',
...options
});
}
/**
* Create a success panel
* @param {string} message - Success message
* @param {Object} options - Additional options
* @returns {Panel} - Panel instance
*/
static success(message, options = {}) {
return new Panel({
content: message,
type: 'success',
...options
});
}
}
export default Panel;

467
src/components/ProgressBar.js Normal file
View File

@ -0,0 +1,467 @@
/**
* ProgressBar Component - Reusable progress indicator
* Extracted from DRS module patterns (question progress, loading, etc.)
*/
class ProgressBar {
constructor(options = {}) {
// Default configuration
this.config = {
value: options.value || 0, // 0-100
max: options.max || 100,
min: options.min || 0,
animated: options.animated !== false, // true by default
striped: options.striped || false,
showLabel: options.showLabel !== false, // true by default
label: options.label || null, // custom label, defaults to percentage
size: options.size || 'normal', // sm, normal, lg
color: options.color || 'primary', // primary, success, warning, danger, info
className: options.className || '',
id: options.id || null,
...options
};
this.element = null;
this.progressFill = null;
this.progressLabel = null;
this._createProgressBar();
Object.seal(this);
}
/**
* Create the progress bar element
* @private
*/
_createProgressBar() {
this.element = document.createElement('div');
this.element.className = this._getProgressClasses();
if (this.config.id) {
this.element.id = this.config.id;
}
// Create progress structure
this.element.innerHTML = this._getProgressHTML();
// Get references to inner elements
this.progressFill = this.element.querySelector('.progress-fill');
this.progressLabel = this.element.querySelector('.progress-label');
this._updateProgress();
this._setupARIA();
}
/**
* Get CSS classes for the progress bar
* @returns {string} - Space-separated CSS classes
* @private
*/
_getProgressClasses() {
const classes = ['progress-bar'];
// Size classes
if (this.config.size !== 'normal') {
classes.push(`progress-bar-${this.config.size}`);
}
// Animation classes
if (this.config.animated) {
classes.push('progress-bar-animated');
}
if (this.config.striped) {
classes.push('progress-bar-striped');
}
// Custom classes
if (this.config.className) {
classes.push(this.config.className);
}
return classes.join(' ');
}
/**
* Get progress bar HTML structure
* @returns {string} - HTML string
* @private
*/
_getProgressHTML() {
return `
<div class="progress-track">
<div class="progress-fill progress-fill-${this.config.color}"></div>
</div>
${this.config.showLabel ? '<div class="progress-label"></div>' : ''}
`;
}
/**
* Update progress value and display
* @private
*/
_updateProgress() {
const percentage = this._calculatePercentage();
// Update fill width
if (this.progressFill) {
this.progressFill.style.width = `${percentage}%`;
}
// Update label
if (this.progressLabel && this.config.showLabel) {
this.progressLabel.textContent = this._getDisplayLabel();
}
// Update ARIA
this._updateARIA();
}
/**
* Calculate percentage value
* @returns {number} - Percentage (0-100)
* @private
*/
_calculatePercentage() {
const { value, min, max } = this.config;
const clampedValue = Math.max(min, Math.min(max, value));
return ((clampedValue - min) / (max - min)) * 100;
}
/**
* Get display label text
* @returns {string} - Label text
* @private
*/
_getDisplayLabel() {
if (this.config.label !== null) {
return this.config.label;
}
return `${Math.round(this._calculatePercentage())}%`;
}
/**
* Setup ARIA attributes for accessibility
* @private
*/
_setupARIA() {
this.element.setAttribute('role', 'progressbar');
this._updateARIA();
}
/**
* Update ARIA attributes
* @private
*/
_updateARIA() {
this.element.setAttribute('aria-valuenow', this.config.value);
this.element.setAttribute('aria-valuemin', this.config.min);
this.element.setAttribute('aria-valuemax', this.config.max);
if (this.config.label) {
this.element.setAttribute('aria-label', this.config.label);
} else {
this.element.setAttribute('aria-label', `${Math.round(this._calculatePercentage())}% complete`);
}
}
// Public API
/**
* Set progress value
* @param {number} value - New progress value
* @param {boolean} animate - Whether to animate the change
*/
setValue(value, animate = true) {
this.config.value = value;
if (animate && this.config.animated) {
this._animateProgress();
} else {
this._updateProgress();
}
return this;
}
/**
* Get current progress value
* @returns {number} - Current value
*/
getValue() {
return this.config.value;
}
/**
* Set progress to a percentage
* @param {number} percentage - Percentage (0-100)
* @param {boolean} animate - Whether to animate
*/
setPercentage(percentage, animate = true) {
const value = this.config.min + ((percentage / 100) * (this.config.max - this.config.min));
return this.setValue(value, animate);
}
/**
* Get current percentage
* @returns {number} - Percentage (0-100)
*/
getPercentage() {
return this._calculatePercentage();
}
/**
* Set custom label
* @param {string|null} label - Label text or null for percentage
*/
setLabel(label) {
this.config.label = label;
this._updateProgress();
return this;
}
/**
* Show or hide the label
* @param {boolean} show - Whether to show label
*/
showLabel(show = true) {
this.config.showLabel = show;
if (show && !this.progressLabel) {
// Add label if it doesn't exist
const labelElement = document.createElement('div');
labelElement.className = 'progress-label';
this.element.appendChild(labelElement);
this.progressLabel = labelElement;
} else if (!show && this.progressLabel) {
// Hide label
this.progressLabel.style.display = 'none';
} else if (show && this.progressLabel) {
// Show existing label
this.progressLabel.style.display = '';
}
this._updateProgress();
return this;
}
/**
* Set progress bar color
* @param {string} color - Color theme (primary, success, warning, danger, info)
*/
setColor(color) {
if (this.progressFill) {
// Remove old color class
this.progressFill.className = this.progressFill.className
.replace(/progress-fill-\w+/g, '');
// Add new color class
this.progressFill.classList.add(`progress-fill-${color}`);
}
this.config.color = color;
return this;
}
/**
* Enable or disable animation
* @param {boolean} animated - Whether to animate
*/
setAnimated(animated) {
this.config.animated = animated;
this.element.classList.toggle('progress-bar-animated', animated);
return this;
}
/**
* Enable or disable striped pattern
* @param {boolean} striped - Whether to show stripes
*/
setStriped(striped) {
this.config.striped = striped;
this.element.classList.toggle('progress-bar-striped', striped);
return this;
}
/**
* Animate progress change smoothly
* @private
*/
_animateProgress() {
if (!this.progressFill) return;
const targetPercentage = this._calculatePercentage();
const currentWidth = parseFloat(this.progressFill.style.width) || 0;
// Use CSS transition for smooth animation
this.progressFill.style.transition = 'width 0.5s ease';
this.progressFill.style.width = `${targetPercentage}%`;
// Update label after animation
setTimeout(() => {
if (this.progressLabel && this.config.showLabel) {
this.progressLabel.textContent = this._getDisplayLabel();
}
this._updateARIA();
}, 500);
}
/**
* Increment progress by a certain amount
* @param {number} amount - Amount to increment
* @param {boolean} animate - Whether to animate
*/
increment(amount = 1, animate = true) {
return this.setValue(this.config.value + amount, animate);
}
/**
* Decrement progress by a certain amount
* @param {number} amount - Amount to decrement
* @param {boolean} animate - Whether to animate
*/
decrement(amount = 1, animate = true) {
return this.setValue(this.config.value - amount, animate);
}
/**
* Reset progress to minimum value
* @param {boolean} animate - Whether to animate
*/
reset(animate = true) {
return this.setValue(this.config.min, animate);
}
/**
* Set progress to maximum value
* @param {boolean} animate - Whether to animate
*/
complete(animate = true) {
return this.setValue(this.config.max, animate);
}
/**
* Check if progress is complete
* @returns {boolean} - Whether progress is at maximum
*/
isComplete() {
return this.config.value >= this.config.max;
}
/**
* Show the progress bar
*/
show() {
this.element.style.display = '';
return this;
}
/**
* Hide the progress bar
*/
hide() {
this.element.style.display = 'none';
return this;
}
/**
* Get the DOM element
* @returns {HTMLElement} - The progress bar element
*/
getElement() {
return this.element;
}
/**
* Append progress bar to a container
* @param {HTMLElement} container - Container to append to
*/
appendTo(container) {
if (container && container.appendChild) {
container.appendChild(this.element);
}
return this;
}
/**
* Remove progress bar from DOM
*/
remove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
return this;
}
/**
* Destroy the progress bar and clean up
*/
destroy() {
this.remove();
this.element = null;
this.progressFill = null;
this.progressLabel = null;
this.config = null;
}
// Static factory methods
/**
* Create a primary progress bar
* @param {number} value - Initial value
* @param {Object} options - Additional options
* @returns {ProgressBar} - ProgressBar instance
*/
static primary(value = 0, options = {}) {
return new ProgressBar({
value,
color: 'primary',
...options
});
}
/**
* Create a success progress bar
* @param {number} value - Initial value
* @param {Object} options - Additional options
* @returns {ProgressBar} - ProgressBar instance
*/
static success(value = 0, options = {}) {
return new ProgressBar({
value,
color: 'success',
...options
});
}
/**
* Create a warning progress bar
* @param {number} value - Initial value
* @param {Object} options - Additional options
* @returns {ProgressBar} - ProgressBar instance
*/
static warning(value = 0, options = {}) {
return new ProgressBar({
value,
color: 'warning',
...options
});
}
/**
* Create a loading progress bar with indeterminate animation
* @param {Object} options - Additional options
* @returns {ProgressBar} - ProgressBar instance
*/
static loading(options = {}) {
return new ProgressBar({
value: 50,
animated: true,
striped: true,
showLabel: false,
className: 'progress-bar-indeterminate',
...options
});
}
}
export default ProgressBar;

851
src/components/SettingsDebug.js Normal file
View File

@ -0,0 +1,851 @@
import Module from '../core/Module.js';
class SettingsDebug extends Module {
constructor(name, dependencies, config) {
super(name, ['eventBus', 'router']);
if (!dependencies.eventBus || !dependencies.router) {
throw new Error('SettingsDebug requires EventBus and Router dependencies');
}
this._eventBus = dependencies.eventBus;
this._router = dependencies.router;
this._config = config || {};
// Internal state
this._container = null;
this._debugMessages = [];
this._availableVoices = [];
this._ttsSettings = {
rate: 0.8,
volume: 1.0,
selectedVoice: null
};
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
this._loadTTSSettings();
this._injectCSS();
this._setupEventListeners();
this._exposePublicAPI();
this._setInitialized();
}
async destroy() {
this._validateNotDestroyed();
if (this._container) {
this._container.innerHTML = '';
}
this._removeInjectedCSS();
this._eventBus.off('settings:show', this._handleShowSettings.bind(this), this.name);
this._setDestroyed();
}
// Public API
show(container) {
this._validateInitialized();
this._container = container;
this._render();
this._loadVoices();
this._updateBrowserInfo();
this._addDebugMessage('Settings/Debug panel opened', 'info');
}
hide() {
this._validateInitialized();
if (this._container) {
this._container.innerHTML = '';
this._container = null;
}
}
// Private methods
_setupEventListeners() {
this._eventBus.on('settings:show', this._handleShowSettings.bind(this), this.name);
this._eventBus.on('router:navigate', this._handleNavigation.bind(this), this.name);
this._eventBus.on('navigation:settings', this._handleNavigationSettings.bind(this), this.name);
}
_handleShowSettings(event) {
if (event.data && event.data.container) {
this.show(event.data.container);
}
}
_handleNavigation(event) {
if (event.data && event.data.path !== '/settings') {
this.hide();
}
}
_handleNavigationSettings(event) {
// Find the main container or create one
let container = document.getElementById('main-content');
if (!container) {
container = document.querySelector('main') || document.body;
}
this.show(container);
}
_loadTTSSettings() {
try {
const saved = localStorage.getItem('tts-settings');
if (saved) {
this._ttsSettings = { ...this._ttsSettings, ...JSON.parse(saved) };
}
} catch (e) {
this._addDebugMessage(`Failed to load TTS settings: ${e.message}`, 'warning');
}
}
_saveTTSSettings() {
try {
localStorage.setItem('tts-settings', JSON.stringify(this._ttsSettings));
this._addDebugMessage('TTS settings saved', 'success');
} catch (e) {
this._addDebugMessage(`Failed to save TTS settings: ${e.message}`, 'error');
}
}
_injectCSS() {
if (document.getElementById('settings-debug-styles')) return;
const styleSheet = document.createElement('style');
styleSheet.id = 'settings-debug-styles';
styleSheet.textContent = `
.settings-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 30px;
}
.settings-section {
background: var(--card-background, #fff);
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color, #e5e7eb);
}
.settings-section h3 {
font-size: 1.4em;
margin-bottom: 20px;
color: var(--text-primary, #111827);
display: flex;
align-items: center;
gap: 8px;
}
.setting-group {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.setting-group:last-child {
border-bottom: none;
margin-bottom: 0;
}
.setting-group label {
font-weight: 500;
color: var(--text-primary, #111827);
min-width: 140px;
}
.setting-group input[type="range"] {
flex: 1;
margin: 0 15px;
accent-color: var(--primary-color, #3b82f6);
}
.setting-group select {
min-width: 200px;
padding: 8px 12px;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 6px;
font-size: 14px;
background: white;
}
.setting-group span {
min-width: 40px;
text-align: center;
font-weight: 600;
color: var(--primary-color, #3b82f6);
}
.debug-info {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #e9ecef;
}
.info-item:last-child {
border-bottom: none;
}
.info-item .label {
font-weight: 500;
color: var(--text-secondary, #6b7280);
}
.info-item .value {
font-weight: 600;
color: var(--text-primary, #111827);
}
.info-item .value.small {
font-size: 0.85em;
max-width: 400px;
word-break: break-all;
}
.debug-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.debug-btn {
padding: 12px 16px;
border: none;
border-radius: 8px;
background: var(--primary-color, #3b82f6);
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.debug-btn:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.debug-btn:active {
transform: translateY(0);
}
.debug-output {
background: #1a1a1a;
border-radius: 8px;
padding: 15px;
color: #e0e0e0;
}
.debug-output h4 {
color: #ffffff;
margin-bottom: 10px;
font-size: 1.1em;
}
.debug-log {
min-height: 120px;
max-height: 300px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
background: #000000;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.debug-log:empty::before {
content: "No debug output yet. Click test buttons above.";
color: #888;
font-style: italic;
}
.clear-btn {
padding: 6px 12px;
border: 1px solid #555;
border-radius: 4px;
background: #333;
color: #fff;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-btn:hover {
background: #444;
border-color: #666;
}
.voice-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
max-height: 300px;
overflow-y: auto;
}
.voice-item {
background: #f8f9fa;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 8px;
padding: 12px;
transition: all 0.3s ease;
cursor: pointer;
}
.voice-item:hover {
background: #e9ecef;
border-color: var(--primary-color, #3b82f6);
}
.voice-item.selected {
background: var(--primary-light, #dbeafe);
border-color: var(--primary-color, #3b82f6);
}
.voice-name {
font-weight: 600;
color: var(--text-primary, #111827);
margin-bottom: 4px;
}
.voice-lang {
font-size: 0.9em;
color: var(--text-secondary, #6b7280);
margin-bottom: 4px;
}
.voice-type {
font-size: 0.8em;
color: var(--accent-color, #f59e0b);
font-weight: 500;
}
.debug-log .success { color: #4ade80; }
.debug-log .error { color: #f87171; }
.debug-log .warning { color: #fbbf24; }
.debug-log .info { color: #60a5fa; }
@media (max-width: 768px) {
.settings-container {
padding: 15px;
gap: 20px;
}
.setting-group {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.setting-group input[type="range"] {
width: 100%;
margin: 10px 0;
}
.debug-controls {
grid-template-columns: 1fr;
}
.voice-list {
grid-template-columns: 1fr;
}
}
`;
document.head.appendChild(styleSheet);
}
_removeInjectedCSS() {
const styleSheet = document.getElementById('settings-debug-styles');
if (styleSheet) {
styleSheet.remove();
}
}
_render() {
if (!this._container) return;
this._container.innerHTML = `
<div class="settings-container">
<!-- System Information -->
<div class="settings-section">
<h3>🔧 System Information</h3>
<div class="debug-info">
<div class="info-item">
<span class="label">Application Status:</span>
<span class="value" id="app-status">Running</span>
</div>
<div class="info-item">
<span class="label">Modules Loaded:</span>
<span class="value" id="modules-count">0</span>
</div>
<div class="info-item">
<span class="label">EventBus Status:</span>
<span class="value" id="eventbus-status">Active</span>
</div>
<div class="info-item">
<span class="label">Current Route:</span>
<span class="value" id="current-route">/settings</span>
</div>
<div class="info-item">
<span class="label">Browser Support:</span>
<span class="value" id="browser-support">Checking...</span>
</div>
</div>
</div>
<!-- TTS Settings -->
<div class="settings-section">
<h3>🔊 Text-to-Speech Settings</h3>
<div class="setting-group">
<label>Speech Rate:</label>
<input type="range" id="tts-rate" min="0.1" max="2" step="0.1" value="${this._ttsSettings.rate}">
<span id="tts-rate-value">${this._ttsSettings.rate}</span>
</div>
<div class="setting-group">
<label>Volume:</label>
<input type="range" id="tts-volume" min="0" max="1" step="0.1" value="${this._ttsSettings.volume}">
<span id="tts-volume-value">${this._ttsSettings.volume}</span>
</div>
<div class="setting-group">
<label>Voice:</label>
<select id="tts-voice">
<option value="">Auto (System Default)</option>
</select>
</div>
</div>
<!-- Voice Information -->
<div class="settings-section">
<h3>🎤 Voice Information</h3>
<div class="debug-info">
<div class="info-item">
<span class="label">Total Voices:</span>
<span class="value" id="voice-count">0</span>
</div>
<div class="info-item">
<span class="label">English Voices:</span>
<span class="value" id="english-voice-count">0</span>
</div>
</div>
<div class="voice-list" id="voice-list"></div>
</div>
<!-- Debug Controls -->
<div class="settings-section">
<h3>🧪 Debug Controls</h3>
<div class="debug-controls">
<button class="debug-btn" onclick="window.settingsDebug.testBasicTTS()">
🔊 Test Basic TTS
</button>
<button class="debug-btn" onclick="window.settingsDebug.testGameWords()">
📝 Test Game Words
</button>
<button class="debug-btn" onclick="window.settingsDebug.refreshVoices()">
🔄 Refresh Voices
</button>
<button class="debug-btn" onclick="window.settingsDebug.testSystem()">
⚙️ Test System
</button>
</div>
</div>
<!-- Debug Output -->
<div class="settings-section">
<div class="debug-output">
<h4>Debug Log</h4>
<div class="debug-log" id="debug-log"></div>
<button class="clear-btn" onclick="window.settingsDebug.clearDebugLog()">Clear Log</button>
</div>
</div>
<!-- Browser Information -->
<div class="settings-section">
<h3>🌐 Browser Information</h3>
<div class="debug-info">
<div class="info-item">
<span class="label">User Agent:</span>
<span class="value small" id="user-agent"></span>
</div>
<div class="info-item">
<span class="label">Platform:</span>
<span class="value" id="platform"></span>
</div>
<div class="info-item">
<span class="label">Language:</span>
<span class="value" id="browser-language"></span>
</div>
</div>
</div>
</div>
`;
this._setupControlListeners();
this._updateSystemInfo();
}
_setupControlListeners() {
// TTS Rate slider
const rateSlider = document.getElementById('tts-rate');
if (rateSlider) {
rateSlider.addEventListener('input', (e) => {
this._ttsSettings.rate = parseFloat(e.target.value);
document.getElementById('tts-rate-value').textContent = this._ttsSettings.rate;
this._saveTTSSettings();
});
}
// Volume slider
const volumeSlider = document.getElementById('tts-volume');
if (volumeSlider) {
volumeSlider.addEventListener('input', (e) => {
this._ttsSettings.volume = parseFloat(e.target.value);
document.getElementById('tts-volume-value').textContent = this._ttsSettings.volume;
this._saveTTSSettings();
});
}
// Voice selection
const voiceSelect = document.getElementById('tts-voice');
if (voiceSelect) {
voiceSelect.addEventListener('change', (e) => {
this._ttsSettings.selectedVoice = e.target.value;
this._saveTTSSettings();
});
}
}
_updateSystemInfo() {
// Get application instance from global
if (window.app) {
const status = window.app.getStatus();
const moduleLoader = window.app.getCore()?.moduleLoader;
if (status) {
document.getElementById('app-status').textContent = status.status;
}
if (moduleLoader) {
const moduleStatus = moduleLoader.getStatus();
document.getElementById('modules-count').textContent = moduleStatus?.loaded?.length || 0;
}
}
// Current route
document.getElementById('current-route').textContent = window.location.pathname || '/';
// EventBus status
const eventBusStatus = this._eventBus ? 'Active' : 'Inactive';
document.getElementById('eventbus-status').textContent = eventBusStatus;
}
_updateBrowserInfo() {
const elements = {
'user-agent': navigator.userAgent,
'platform': navigator.platform,
'browser-language': navigator.language
};
Object.entries(elements).forEach(([id, value]) => {
const element = document.getElementById(id);
if (element) {
element.textContent = value;
}
});
this._checkBrowserSupport();
}
_checkBrowserSupport() {
const checks = [
{ name: 'speechSynthesis', available: 'speechSynthesis' in window },
{ name: 'SpeechSynthesisUtterance', available: 'SpeechSynthesisUtterance' in window },
{ name: 'getVoices', available: speechSynthesis && typeof speechSynthesis.getVoices === 'function' },
{ name: 'speak', available: speechSynthesis && typeof speechSynthesis.speak === 'function' }
];
const support = checks.every(check => check.available);
const supportElement = document.getElementById('browser-support');
if (supportElement) {
supportElement.textContent = support ? '✅ Full Support' : '❌ Limited Support';
supportElement.style.color = support ? '#22C55E' : '#EF4444';
}
this._addDebugMessage(`Browser TTS Support: ${support ? 'Full' : 'Limited'}`, support ? 'success' : 'warning');
return support;
}
_loadVoices() {
const loadVoicesImpl = () => {
this._availableVoices = speechSynthesis.getVoices();
this._updateVoiceInfo();
this._populateVoiceSelect();
this._displayVoiceList();
};
loadVoicesImpl();
setTimeout(loadVoicesImpl, 100);
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = loadVoicesImpl;
}
}
_updateVoiceInfo() {
const voiceCountElement = document.getElementById('voice-count');
const englishVoiceCountElement = document.getElementById('english-voice-count');
if (voiceCountElement) {
voiceCountElement.textContent = this._availableVoices.length;
}
const englishVoices = this._availableVoices.filter(voice => voice.lang.startsWith('en'));
if (englishVoiceCountElement) {
englishVoiceCountElement.textContent = englishVoices.length;
}
}
_populateVoiceSelect() {
const voiceSelect = document.getElementById('tts-voice');
if (!voiceSelect) return;
voiceSelect.innerHTML = '<option value="">Auto (System Default)</option>';
const englishVoices = this._availableVoices.filter(voice => voice.lang.startsWith('en'));
englishVoices.forEach(voice => {
const option = document.createElement('option');
option.value = voice.name;
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.name === this._ttsSettings.selectedVoice) {
option.selected = true;
}
voiceSelect.appendChild(option);
});
}
_displayVoiceList() {
const voiceListElement = document.getElementById('voice-list');
if (!voiceListElement) return;
if (this._availableVoices.length === 0) {
voiceListElement.innerHTML = '<div style="text-align: center; color: #666;">No voices available</div>';
return;
}
voiceListElement.innerHTML = '';
this._availableVoices.forEach(voice => {
const voiceItem = document.createElement('div');
voiceItem.className = 'voice-item';
voiceItem.innerHTML = `
<div class="voice-name">${voice.name}</div>
<div class="voice-lang">${voice.lang}</div>
<div class="voice-type">${voice.localService ? 'Local' : 'Remote'}</div>
`;
voiceItem.addEventListener('click', () => {
this._testVoice(voice);
document.querySelectorAll('.voice-item').forEach(item => item.classList.remove('selected'));
voiceItem.classList.add('selected');
});
voiceListElement.appendChild(voiceItem);
});
}
_testVoice(voice) {
try {
const utterance = new SpeechSynthesisUtterance('Hello, this is a voice test');
utterance.voice = voice;
utterance.rate = this._ttsSettings.rate;
utterance.volume = this._ttsSettings.volume;
utterance.onstart = () => {
this._addDebugMessage(`Testing voice: ${voice.name}`, 'info');
};
utterance.onerror = (event) => {
this._addDebugMessage(`Voice test error: ${event.error}`, 'error');
};
speechSynthesis.speak(utterance);
} catch (error) {
this._addDebugMessage(`Voice test failed: ${error.message}`, 'error');
}
}
_addDebugMessage(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
const logEntry = `[${timestamp}] ${message}`;
this._debugMessages.push({ message: logEntry, type });
this._updateDebugDisplay();
console.log(`[Settings] ${logEntry}`);
}
_updateDebugDisplay() {
const debugLogElement = document.getElementById('debug-log');
if (!debugLogElement) return;
const lastEntries = this._debugMessages.slice(-50);
debugLogElement.innerHTML = lastEntries
.map(entry => `<span class="${entry.type}">${entry.message}</span>`)
.join('\n');
debugLogElement.scrollTop = debugLogElement.scrollHeight;
}
// Public test methods (exposed via window.settingsDebug)
testBasicTTS() {
this._addDebugMessage('Testing basic TTS...', 'info');
this._speak('Hello world, this is a basic test')
.then(() => this._addDebugMessage('✅ Basic TTS test completed', 'success'))
.catch(error => this._addDebugMessage(`❌ Basic TTS test failed: ${error.message}`, 'error'));
}
testGameWords() {
this._addDebugMessage('Testing game vocabulary words...', 'info');
const words = ['apple', 'cat', 'house', 'car', 'tree', 'book', 'sun', 'dog'];
let index = 0;
const speakNext = () => {
if (index >= words.length) {
this._addDebugMessage('✅ Game words test completed', 'success');
return;
}
const word = words[index++];
this._speak(word)
.then(() => {
this._addDebugMessage(`✅ Spoke: ${word}`, 'info');
setTimeout(speakNext, 500);
})
.catch(error => {
this._addDebugMessage(`❌ Failed to speak ${word}: ${error.message}`, 'error');
setTimeout(speakNext, 500);
});
};
speakNext();
}
refreshVoices() {
this._addDebugMessage('Refreshing voice list...', 'info');
this._loadVoices();
this._addDebugMessage('✅ Voice list refreshed', 'success');
}
testSystem() {
this._addDebugMessage('Testing system components...', 'info');
// Test EventBus
if (this._eventBus) {
this._addDebugMessage('✅ EventBus: Active', 'success');
} else {
this._addDebugMessage('❌ EventBus: Not found', 'error');
}
// Test Router
if (this._router) {
this._addDebugMessage('✅ Router: Active', 'success');
} else {
this._addDebugMessage('❌ Router: Not found', 'error');
}
// Test Application
if (window.app) {
this._addDebugMessage('✅ Application: Running', 'success');
} else {
this._addDebugMessage('❌ Application: Not found', 'error');
}
this._addDebugMessage('System test completed', 'info');
this._updateSystemInfo();
}
clearDebugLog() {
this._debugMessages = [];
this._updateDebugDisplay();
this._addDebugMessage('Debug log cleared', 'info');
}
_exposePublicAPI() {
// Expose API for debug buttons to use
window.settingsDebug = {
testBasicTTS: () => this.testBasicTTS(),
testGameWords: () => this.testGameWords(),
refreshVoices: () => this.refreshVoices(),
testSystem: () => this.testSystem(),
clearDebugLog: () => this.clearDebugLog()
};
}
_speak(text, options = {}) {
return new Promise((resolve, reject) => {
try {
if (!('speechSynthesis' in window)) {
reject(new Error('Speech synthesis not supported'));
return;
}
const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = options.rate || this._ttsSettings.rate;
utterance.volume = options.volume || this._ttsSettings.volume;
utterance.lang = options.lang || 'en-US';
if (this._ttsSettings.selectedVoice) {
const selectedVoice = this._availableVoices.find(
voice => voice.name === this._ttsSettings.selectedVoice
);
if (selectedVoice) {
utterance.voice = selectedVoice;
}
}
utterance.onend = () => resolve();
utterance.onerror = (event) => reject(new Error(event.error));
speechSynthesis.speak(utterance);
} catch (error) {
reject(error);
}
});
}
}
export default SettingsDebug;

2226
src/core/ContentLoader.js Normal file
View File

File diff suppressed because it is too large Load Diff

313
src/core/GameLoader.js Normal file
View File

@ -0,0 +1,313 @@
import Module from './Module.js';
/**
* GameLoader - Discovers and manages game modules
* Handles dynamic loading, compatibility scoring, and game lifecycle
*/
class GameLoader extends Module {
constructor(name, dependencies, config = {}) {
super(name, ['eventBus']);
// Validate dependencies
if (!dependencies.eventBus) {
throw new Error('GameLoader requires EventBus dependency');
}
this._eventBus = dependencies.eventBus;
this._config = config;
// Game management
this._games = new Map(); // gameId -> game info
this._gameInstances = new Map(); // instanceId -> game instance
this._currentContent = null;
// Game discovery paths
this._gamePaths = [
'../games/FlashcardLearning.js',
'../games/StoryReader.js',
'../games/LetterDiscovery.js',
'../games/QuizGame.js',
'../games/AdventureReader.js',
'../games/WizardSpellCaster.js',
'../games/WordStorm.js',
'../games/WhackAMole.js',
'../games/WordDiscovery.js',
'../games/GrammarDiscovery.js',
'../games/FillTheBlank.js',
'../games/StoryBuilder.js',
'../games/RiverRun.js',
'../games/ChineseStudy.js',
'../games/WhackAMoleHard.js',
'../games/MarioEducational.js'
// All current games with Module architecture
];
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
// Set up event listeners
this._eventBus.on('content:loaded', this._handleContentUpdate.bind(this), this.name);
this._eventBus.on('game:launch-request', this._handleLaunchRequest.bind(this), this.name);
this._eventBus.on('game:exit-request', this._handleExitRequest.bind(this), this.name);
// Discover available games
await this._discoverGames();
this._setInitialized();
}
async destroy() {
this._validateNotDestroyed();
// Destroy all active game instances
for (const [instanceId, gameInstance] of this._gameInstances) {
try {
await gameInstance.destroy();
} catch (error) {
console.warn(`Error destroying game instance ${instanceId}:`, error);
}
}
this._gameInstances.clear();
this._games.clear();
this._setDestroyed();
}
/**
* Get all discovered games with compatibility scores
* @returns {Array} Array of game info objects
*/
getAvailableGames() {
this._validateInitialized();
return Array.from(this._games.values());
}
/**
* Get games compatible with current content
* @param {number} minScore - Minimum compatibility score (0-1)
* @returns {Array} Array of compatible games sorted by score
*/
getCompatibleGames(minScore = 0.3) {
this._validateInitialized();
return this.getAvailableGames()
.filter(game => game.compatibility.score >= minScore)
.sort((a, b) => b.compatibility.score - a.compatibility.score);
}
/**
* Launch a game instance
* @param {string} gameId - ID of the game to launch
* @param {Object} options - Launch options
* @returns {Promise<string>} Instance ID
*/
async launchGame(gameId, options = {}) {
this._validateInitialized();
const gameInfo = this._games.get(gameId);
if (!gameInfo) {
throw new Error(`Game not found: ${gameId}`);
}
// Check compatibility
if (gameInfo.compatibility.score < 0.1) {
throw new Error(`Game ${gameId} is not compatible with current content`);
}
try {
// Create unique instance ID
const instanceId = `${gameId}-${Date.now()}`;
// Prepare game dependencies
const gameDependencies = {
eventBus: this._eventBus,
content: this._currentContent,
...options.dependencies
};
// Register the game instance as a module with EventBus
this._eventBus.registerModule({ name: instanceId });
// Create game instance
const gameInstance = new gameInfo.GameClass(instanceId, gameDependencies, {
container: options.container,
...options.config
});
// Initialize the game
await gameInstance.init();
// Track the instance
this._gameInstances.set(instanceId, gameInstance);
// Emit game launched event
this._eventBus.emit('game:launched', {
gameId,
instanceId,
compatibility: gameInfo.compatibility
}, this.name);
return instanceId;
} catch (error) {
console.error(`Error launching game ${gameId}:`, error);
throw error;
}
}
/**
* Exit a game instance
* @param {string} instanceId - Instance ID to exit
*/
async exitGame(instanceId) {
this._validateInitialized();
const gameInstance = this._gameInstances.get(instanceId);
if (!gameInstance) {
console.warn(`Game instance not found: ${instanceId}`);
return;
}
try {
await gameInstance.destroy();
this._gameInstances.delete(instanceId);
// Unregister the game instance from EventBus
this._eventBus.unregisterModule(instanceId);
this._eventBus.emit('game:exited', { instanceId }, this.name);
} catch (error) {
console.error(`Error exiting game ${instanceId}:`, error);
}
}
// Private methods
async _discoverGames() {
console.log('🎮 Discovering available games...');
for (const gamePath of this._gamePaths) {
try {
// Dynamically import the game module (resolve relative to current module)
const gameModule = await import(gamePath);
const GameClass = gameModule.default;
if (!GameClass) {
console.warn(`No default export found in ${gamePath}`);
continue;
}
// Get game metadata
const metadata = GameClass.getMetadata?.() || {
name: GameClass.name,
description: 'No description available',
difficulty: 'unknown'
};
// Calculate compatibility score
const compatibility = this._calculateCompatibility(GameClass);
// Store game info
const gameInfo = {
id: GameClass.name.toLowerCase().replace(/game$/, ''),
GameClass,
metadata,
compatibility,
path: gamePath
};
this._games.set(gameInfo.id, gameInfo);
console.log(`✅ Discovered game: ${metadata.name} (compatibility: ${compatibility.score.toFixed(2)})`);
} catch (error) {
console.warn(`Failed to load game from ${gamePath}:`, error.message);
}
}
console.log(`🎮 Game discovery complete: ${this._games.size} games found`);
}
_calculateCompatibility(GameClass) {
if (!this._currentContent) {
return { score: 0, reason: 'No content loaded' };
}
// Use game's own compatibility function if available
if (typeof GameClass.getCompatibilityScore === 'function') {
const result = GameClass.getCompatibilityScore(this._currentContent);
// Normalize different return formats
if (typeof result === 'number') {
// Format 2: Direct integer (0-100) -> Convert to decimal object
return {
score: result / 100,
reason: `Compatibility score: ${result}%`,
requirements: ['content']
};
} else if (result && typeof result === 'object' && typeof result.score === 'number') {
// Format 1: Object with decimal score (0-1) -> Use as-is
return result;
} else {
// Invalid format -> Default to 0
return { score: 0, reason: 'Invalid compatibility format' };
}
}
// Default compatibility calculation
const vocab = this._currentContent.vocabulary || {};
const vocabCount = Object.keys(vocab).length;
if (vocabCount < 5) {
return { score: 0, reason: 'Insufficient vocabulary (need at least 5 words)' };
}
// Basic scoring based on vocabulary count
const score = Math.min(vocabCount / 20, 1); // Full score at 20+ words
return {
score,
reason: `${vocabCount} vocabulary words available`,
requirements: ['vocabulary'],
minWords: 5,
optimalWords: 20
};
}
_handleContentUpdate(event) {
console.log('🔄 GameLoader: Content updated, recalculating compatibility scores');
this._currentContent = event.data.content;
// Recalculate compatibility scores for all games
for (const [gameId, gameInfo] of this._games) {
const oldScore = gameInfo.compatibility?.score || 0;
gameInfo.compatibility = this._calculateCompatibility(gameInfo.GameClass);
const newScore = gameInfo.compatibility?.score || 0;
console.log(`🎯 ${gameId}: ${oldScore.toFixed(2)} → ${newScore.toFixed(2)}`);
}
this._eventBus.emit('games:compatibility-updated', {
gamesCount: this._games.size,
compatibleCount: this.getCompatibleGames().length
}, this.name);
console.log('✅ Compatibility scores updated');
}
_handleLaunchRequest(event) {
const { gameId, options } = event.data;
this.launchGame(gameId, options).catch(error => {
this._eventBus.emit('game:launch-error', { gameId, error: error.message }, this.name);
});
}
_handleExitRequest(event) {
const { instanceId } = event.data;
this.exitGame(instanceId);
}
}
export default GameLoader;

704
src/core/IntelligentSequencer.js Normal file
View File

@ -0,0 +1,704 @@
/**
* IntelligentSequencer - Smart exercise sequencing with performance tracking
* Creates intelligent, non-repetitive exercise proposals based on user performance
*/
import Module from './Module.js';
class IntelligentSequencer extends Module {
constructor(name, dependencies, config = {}) {
super(name, ['eventBus']);
if (!dependencies.eventBus) {
throw new Error('IntelligentSequencer requires EventBus dependency');
}
this._eventBus = dependencies.eventBus;
// Performance tracking
this._performanceHistory = new Map(); // type -> performance data
this._exerciseHistory = []; // chronological exercise history
this._sessionStats = {
startTime: null,
exerciseCount: 0,
totalTime: 0,
averageAccuracy: 0,
currentStreak: 0
};
// Algorithm configuration
this._config = {
maxHistorySize: config.maxHistorySize || 50,
repetitionAvoidanceWindow: config.repetitionAvoidanceWindow || 5,
difficultyAdaptationThreshold: config.difficultyAdaptationThreshold || 0.8,
varietyWeight: config.varietyWeight || 0.3,
performanceWeight: config.performanceWeight || 0.4,
freshnessWeight: config.freshnessWeight || 0.3,
minSessionLength: config.minSessionLength || 3,
maxSessionLength: config.maxSessionLength || 15,
...config
};
// Available exercise types and difficulties
this._exerciseTypes = ['text', 'reading', 'audio', 'grammar'];
this._difficulties = ['easy', 'medium', 'hard'];
// Current session state
this._currentSession = null;
this._isGuiding = false;
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
// Listen for exercise completion events
this._eventBus.on('drs:completed', this._handleExerciseCompleted.bind(this), this.name);
this._eventBus.on('drs:step-completed', this._handleStepCompleted.bind(this), this.name);
// Load saved performance data if available
this._loadPerformanceData();
this._setInitialized();
console.log('🧠 IntelligentSequencer initialized with smart algorithm');
}
async destroy() {
this._validateNotDestroyed();
// Save performance data before destruction
this._savePerformanceData();
this._setDestroyed();
}
/**
* Start intelligent guided session
*/
startGuidedSession(options = {}) {
this._validateInitialized();
const session = {
id: `session_${Date.now()}`,
startTime: Date.now(),
bookId: options.bookId || 'sbs',
chapterId: options.chapterId || 'level-1-2',
targetLength: Math.min(
Math.max(options.targetLength || 8, this._config.minSessionLength),
this._config.maxSessionLength
),
completed: 0,
exercises: [],
currentExercise: null
};
this._currentSession = session;
this._isGuiding = true;
console.log('🚀 Starting guided session:', session.id);
// Emit session start event
this._eventBus.emit('sequencer:session-started', {
sessionId: session.id,
targetLength: session.targetLength
}, this.name);
return session;
}
/**
* Get next intelligent exercise recommendation
*/
async getNextExercise() {
this._validateInitialized();
if (!this._isGuiding || !this._currentSession) {
return null;
}
const session = this._currentSession;
// Check if session is complete
if (session.completed >= session.targetLength) {
this._completeSession();
return null;
}
try {
// Calculate scores for each exercise type/difficulty combination
const candidates = await this._generateCandidates();
if (candidates.length === 0) {
console.warn('⚠️ No available exercise candidates found', {
sessionProgress: `${session.completed}/${session.targetLength}`,
exerciseTypes: this._exerciseTypes,
bookId: session.bookId,
chapterId: session.chapterId
});
this._completeSession();
return null;
}
const scoredCandidates = candidates.map(candidate => ({
...candidate,
score: this._calculateExerciseScore(candidate)
}));
// Sort by score (higher is better)
scoredCandidates.sort((a, b) => b.score - a.score);
// Select the best candidate with some randomness for variety
const topCandidates = scoredCandidates.slice(0, Math.min(3, scoredCandidates.length));
const selectedCandidate = topCandidates[Math.floor(Math.random() * topCandidates.length)];
// Create exercise recommendation
const exercise = {
type: selectedCandidate.type,
difficulty: selectedCandidate.difficulty,
bookId: session.bookId,
chapterId: session.chapterId,
sessionPosition: session.completed + 1,
totalInSession: session.targetLength,
reasoning: selectedCandidate.reasoning || 'Intelligent selection based on performance and variety'
};
session.currentExercise = exercise;
console.log('🎯 Next exercise recommendation:', {
type: exercise.type,
difficulty: exercise.difficulty,
position: `${exercise.sessionPosition}/${exercise.totalInSession}`,
score: selectedCandidate.score.toFixed(2),
reasoning: exercise.reasoning,
availableCandidates: candidates.length
});
return exercise;
} catch (error) {
console.error('❌ Error generating next exercise:', error);
return null;
}
}
/**
* Record exercise completion and update performance
*/
recordExerciseCompletion(exerciseData, performanceData) {
this._validateInitialized();
const completionRecord = {
timestamp: Date.now(),
type: exerciseData.type,
difficulty: exerciseData.difficulty,
bookId: exerciseData.bookId,
chapterId: exerciseData.chapterId,
performance: {
timeSpent: performanceData.timeSpent || 0,
accuracy: performanceData.accuracy || 0,
hintsUsed: performanceData.hintsUsed || 0,
attempts: performanceData.attempts || 1,
completed: performanceData.completed !== false
}
};
// Update exercise history
this._exerciseHistory.push(completionRecord);
if (this._exerciseHistory.length > this._config.maxHistorySize) {
this._exerciseHistory.shift();
}
// Update performance tracking
this._updatePerformanceTracking(completionRecord);
// Update current session
if (this._currentSession && this._isGuiding) {
this._currentSession.exercises.push(completionRecord);
this._currentSession.completed++;
}
console.log('📊 Exercise recorded:', {
type: completionRecord.type,
difficulty: completionRecord.difficulty,
accuracy: completionRecord.performance.accuracy,
timeSpent: Math.round(completionRecord.performance.timeSpent / 1000) + 's'
});
}
/**
* Get performance insights and recommendations
*/
getPerformanceInsights() {
this._validateInitialized();
const insights = {
overallStats: this._calculateOverallStats(),
typePerformance: this._getTypePerformance(),
difficultyProgress: this._getDifficultyProgress(),
recommendations: this._generateRecommendations(),
recentTrends: this._getRecentTrends()
};
return insights;
}
/**
* Check if currently in guided session
*/
isGuiding() {
return this._isGuiding && this._currentSession !== null;
}
/**
* Stop current guided session
*/
stopGuidedSession() {
if (!this._isGuiding || !this._currentSession) {
return;
}
this._completeSession();
}
// Private methods
async _generateCandidates() {
const candidates = [];
// Check resource availability for current session
const session = this._currentSession;
if (!session) return candidates;
const { bookId, chapterId } = session;
for (const type of this._exerciseTypes) {
for (const difficulty of this._difficulties) {
// Check if this type/difficulty combination has available content
const hasContent = await this._checkContentAvailability(type, bookId, chapterId);
if (hasContent) {
candidates.push({
type,
difficulty,
reasoning: `${type} exercise at ${difficulty} level using real content from ${chapterId}`
});
} else {
console.log(`⚠️ Skipping ${type}/${difficulty} - no content available for ${chapterId}`);
}
}
}
console.log('📊 Generated candidates:', {
total: candidates.length,
types: candidates.map(c => `${c.type}/${c.difficulty}`).join(', ')
});
return candidates;
}
/**
* Check if content is available for a specific exercise type
*/
async _checkContentAvailability(exerciseType, bookId, chapterId) {
try {
const contentPath = `/content/chapters/${chapterId || bookId}.json`;
const response = await fetch(contentPath);
if (!response.ok) {
console.warn(`❌ Content not available: ${contentPath}`);
return false;
}
const content = await response.json();
// Check based on exercise type requirements
switch (exerciseType) {
case 'text':
case 'audio':
// Text and audio need vocabulary
return content.vocabulary && Object.keys(content.vocabulary).length > 3;
case 'image':
// For now, disable image exercises as we don't have real images
console.log('⚠️ Image exercises disabled - no image resources available');
return false;
case 'reading':
// Reading needs predefined exercises or content with questions
return this._hasReadingContent(content);
case 'grammar':
// Grammar needs varied word types
if (!content.vocabulary) return false;
const vocab = Object.entries(content.vocabulary);
return vocab.length > 5; // Need enough variety
default:
return false;
}
} catch (error) {
console.warn(`❌ Error checking content availability:`, error);
return false;
}
}
_hasReadingContent(content) {
// Check if there are predefined reading exercises in JSON
if (content.exercises) {
for (const [key, exercise] of Object.entries(content.exercises)) {
if (key.includes('reading') || key.includes('comprehension') ||
exercise.type === 'reading' || exercise.type === 'comprehension') {
return true;
}
// Check if exercise has passages/texts/stories with questions
if ((exercise.passages && exercise.passages.some(p => p.questions)) ||
(exercise.texts && exercise.texts.some(t => t.questions)) ||
(exercise.stories && exercise.stories.some(s => s.questions))) {
return true;
}
}
}
// Check if stories have questions
if (content.stories && content.stories.some(story => story.questions && story.questions.length > 0)) {
return true;
}
// Check if texts have questions
if (content.texts && content.texts.some(text => text.questions && text.questions.length > 0)) {
return true;
}
// Check if dialogs have questions
if (content.dialogs) {
const dialogsWithQuestions = Object.values(content.dialogs).some(dialog =>
dialog.questions && dialog.questions.length > 0
);
if (dialogsWithQuestions) {
return true;
}
}
// No reading content with questions found
console.log(`⚠️ No reading content with questions found for this chapter`);
return false;
}
_calculateExerciseScore(candidate) {
// Calculate variety score (avoid recent repetition)
const varietyScore = this._calculateVarietyScore(candidate);
// Calculate performance-based score (adaptive difficulty)
const performanceScore = this._calculatePerformanceScore(candidate);
// Calculate freshness score (prefer less practiced combinations)
const freshnessScore = this._calculateFreshnessScore(candidate);
// Weighted combination
const totalScore = (
varietyScore * this._config.varietyWeight +
performanceScore * this._config.performanceWeight +
freshnessScore * this._config.freshnessWeight
);
return totalScore;
}
_calculateVarietyScore(candidate) {
// Check recent exercises for repetition
const recentWindow = this._exerciseHistory.slice(-this._config.repetitionAvoidanceWindow);
const recentTypes = recentWindow.map(ex => ex.type);
const recentDifficulties = recentWindow.map(ex => ex.difficulty);
const recentCombos = recentWindow.map(ex => `${ex.type}_${ex.difficulty}`);
let varietyScore = 1.0;
// Penalize if type was used recently
const typeFreq = recentTypes.filter(t => t === candidate.type).length;
varietyScore -= (typeFreq * 0.2);
// Penalize if difficulty was used recently
const difficultyFreq = recentDifficulties.filter(d => d === candidate.difficulty).length;
varietyScore -= (difficultyFreq * 0.1);
// Heavy penalty if exact combination was used very recently
const comboKey = `${candidate.type}_${candidate.difficulty}`;
const comboFreq = recentCombos.filter(c => c === comboKey).length;
varietyScore -= (comboFreq * 0.4);
return Math.max(varietyScore, 0);
}
_calculatePerformanceScore(candidate) {
const typePerf = this._performanceHistory.get(candidate.type);
if (!typePerf || typePerf.attempts === 0) {
return 0.5; // Neutral score for untested areas
}
const avgAccuracy = typePerf.totalAccuracy / typePerf.attempts;
const avgTime = typePerf.totalTime / typePerf.attempts;
// Adapt difficulty based on performance
let difficultyFit = 0.5;
if (avgAccuracy > this._config.difficultyAdaptationThreshold) {
// Good performance, prefer harder exercises
if (candidate.difficulty === 'hard') difficultyFit = 0.9;
else if (candidate.difficulty === 'medium') difficultyFit = 0.6;
else difficultyFit = 0.3;
} else if (avgAccuracy < 0.6) {
// Poor performance, prefer easier exercises
if (candidate.difficulty === 'easy') difficultyFit = 0.9;
else if (candidate.difficulty === 'medium') difficultyFit = 0.6;
else difficultyFit = 0.3;
} else {
// Moderate performance, prefer medium difficulty
if (candidate.difficulty === 'medium') difficultyFit = 0.9;
else difficultyFit = 0.7;
}
return difficultyFit;
}
_calculateFreshnessScore(candidate) {
const comboKey = `${candidate.type}_${candidate.difficulty}`;
// Count how many times this combination has been practiced
const comboCount = this._exerciseHistory.filter(ex =>
ex.type === candidate.type && ex.difficulty === candidate.difficulty
).length;
// Prefer less practiced combinations
return Math.max(1.0 - (comboCount * 0.1), 0.1);
}
_updatePerformanceTracking(record) {
const type = record.type;
if (!this._performanceHistory.has(type)) {
this._performanceHistory.set(type, {
attempts: 0,
totalAccuracy: 0,
totalTime: 0,
lastPracticed: 0,
bestAccuracy: 0,
averageTime: 0
});
}
const typeData = this._performanceHistory.get(type);
typeData.attempts++;
typeData.totalAccuracy += record.performance.accuracy;
typeData.totalTime += record.performance.timeSpent;
typeData.lastPracticed = record.timestamp;
typeData.bestAccuracy = Math.max(typeData.bestAccuracy, record.performance.accuracy);
typeData.averageTime = typeData.totalTime / typeData.attempts;
}
_calculateOverallStats() {
if (this._exerciseHistory.length === 0) {
return {
totalExercises: 0,
averageAccuracy: 0,
totalTime: 0,
completionRate: 0
};
}
const total = this._exerciseHistory.length;
const totalAccuracy = this._exerciseHistory.reduce((sum, ex) => sum + ex.performance.accuracy, 0);
const totalTime = this._exerciseHistory.reduce((sum, ex) => sum + ex.performance.timeSpent, 0);
const completed = this._exerciseHistory.filter(ex => ex.performance.completed).length;
return {
totalExercises: total,
averageAccuracy: totalAccuracy / total,
totalTime,
completionRate: completed / total
};
}
_getTypePerformance() {
const typePerf = {};
for (const [type, data] of this._performanceHistory.entries()) {
typePerf[type] = {
averageAccuracy: data.totalAccuracy / data.attempts,
averageTime: data.averageTime,
attempts: data.attempts,
bestAccuracy: data.bestAccuracy,
lastPracticed: data.lastPracticed
};
}
return typePerf;
}
_getDifficultyProgress() {
const difficultyStats = {
easy: { attempts: 0, accuracy: 0 },
medium: { attempts: 0, accuracy: 0 },
hard: { attempts: 0, accuracy: 0 }
};
for (const exercise of this._exerciseHistory) {
const diff = exercise.difficulty;
if (difficultyStats[diff]) {
difficultyStats[diff].attempts++;
difficultyStats[diff].accuracy += exercise.performance.accuracy;
}
}
// Calculate averages
for (const diff of Object.keys(difficultyStats)) {
const stats = difficultyStats[diff];
if (stats.attempts > 0) {
stats.averageAccuracy = stats.accuracy / stats.attempts;
}
}
return difficultyStats;
}
_generateRecommendations() {
const recommendations = [];
const typePerf = this._getTypePerformance();
// Identify weak areas
for (const [type, perf] of Object.entries(typePerf)) {
if (perf.averageAccuracy < 0.7 && perf.attempts >= 2) {
recommendations.push({
type: 'improvement',
message: `Consider practicing more ${type} exercises to improve accuracy`,
priority: 'medium',
targetType: type
});
}
}
// Suggest variety
const recentTypes = this._exerciseHistory.slice(-10).map(ex => ex.type);
const typeDistribution = {};
for (const type of recentTypes) {
typeDistribution[type] = (typeDistribution[type] || 0) + 1;
}
const overusedType = Object.entries(typeDistribution).find(([_, count]) => count > 5);
if (overusedType) {
recommendations.push({
type: 'variety',
message: `Try mixing in other exercise types - you've done a lot of ${overusedType[0]} recently`,
priority: 'low'
});
}
return recommendations;
}
_getRecentTrends() {
if (this._exerciseHistory.length < 5) {
return { trend: 'insufficient_data' };
}
const recent = this._exerciseHistory.slice(-5);
const accuracies = recent.map(ex => ex.performance.accuracy);
// Simple trend calculation
const firstHalf = accuracies.slice(0, Math.floor(accuracies.length / 2));
const secondHalf = accuracies.slice(Math.floor(accuracies.length / 2));
const firstAvg = firstHalf.reduce((a, b) => a + b, 0) / firstHalf.length;
const secondAvg = secondHalf.reduce((a, b) => a + b, 0) / secondHalf.length;
let trend = 'stable';
if (secondAvg > firstAvg + 0.1) trend = 'improving';
else if (secondAvg < firstAvg - 0.1) trend = 'declining';
return {
trend,
recentAccuracy: secondAvg,
change: secondAvg - firstAvg
};
}
_completeSession() {
if (!this._currentSession) return;
const session = this._currentSession;
const sessionTime = Date.now() - session.startTime;
console.log('🎉 Guided session completed:', {
exercises: session.completed,
duration: Math.round(sessionTime / 1000) + 's',
sessionId: session.id
});
// Emit session completion
this._eventBus.emit('sequencer:session-completed', {
sessionId: session.id,
exercisesCompleted: session.completed,
duration: sessionTime,
exercises: session.exercises
}, this.name);
this._currentSession = null;
this._isGuiding = false;
}
_handleExerciseCompleted(event) {
if (!this.isGuiding()) return;
const data = event.data;
this.recordExerciseCompletion(
{
type: data.exerciseType || 'text',
difficulty: data.difficulty || 'medium',
bookId: data.bookId,
chapterId: data.chapterId
},
{
timeSpent: data.stats?.timeSpent || 0,
accuracy: data.stats?.accuracy || 0.8,
hintsUsed: data.stats?.hintsUsed || 0,
completed: true
}
);
}
_handleStepCompleted(event) {
// Could track individual step performance here
console.log('📊 Step completed in guided session:', event.data);
}
_loadPerformanceData() {
try {
const saved = localStorage.getItem('intelligentSequencer_performance');
if (saved) {
const data = JSON.parse(saved);
this._performanceHistory = new Map(data.performanceHistory || []);
this._exerciseHistory = data.exerciseHistory || [];
console.log('📚 Loaded performance history:', this._exerciseHistory.length, 'exercises');
}
} catch (error) {
console.warn('⚠️ Failed to load performance data:', error);
}
}
_savePerformanceData() {
try {
const data = {
performanceHistory: Array.from(this._performanceHistory.entries()),
exerciseHistory: this._exerciseHistory
};
localStorage.setItem('intelligentSequencer_performance', JSON.stringify(data));
} catch (error) {
console.warn('⚠️ Failed to save performance data:', error);
}
}
}
export default IntelligentSequencer;

3
src/core/Module.js
View File

@ -24,8 +24,7 @@ class Module {
destroyed: false
});
// Seal the module to prevent external modification
Object.seal(this);
// Note: Object.seal(this) is called by child classes after they define their properties
}
// Public getters (read-only)

3
src/core/ModuleLoader.js
View File

@ -98,13 +98,12 @@ class ModuleLoader {
throw new Error(`Module ${name} must be loaded before initialization`);
}
if (moduleInfo.initialized) {
if (moduleInfo.initialized || moduleInfo.instance.isInitialized) {
return moduleInfo.instance;
}
try {
await moduleInfo.instance.init();
moduleInfo.instance._setInitialized();
moduleInfo.initialized = true;
this._initializationOrder.push(name);

16
src/core/Router.js
View File

@ -21,26 +21,22 @@ class Router extends Module {
this._maxHistorySize = config.maxHistorySize || 100;
this._defaultRoute = config.defaultRoute || '/';
// Bind methods to prevent context loss
this._handlePopState = this._handlePopState.bind(this);
Object.seal(this);
// TODO: Re-add Object.seal(this) after debugging
}
async init() {
this._validateNotDestroyed();
// Set up browser navigation handling
window.addEventListener('popstate', this._handlePopState);
if (typeof window !== 'undefined') {
window.addEventListener('popstate', this._handlePopState.bind(this));
}
// Set up route change listener
this._eventBus.on('router:navigate', (event) => {
this.navigate(event.data.path, event.data.state);
}, this.name);
// Handle initial route
this._handleCurrentRoute();
this._setInitialized();
}
@ -48,7 +44,9 @@ class Router extends Module {
this._validateNotDestroyed();
// Clean up event listeners
window.removeEventListener('popstate', this._handlePopState);
if (typeof window !== 'undefined') {
window.removeEventListener('popstate', this._handlePopState.bind(this));
}
// Clear routes and history
this._routes.clear();

1966
src/games/AdventureReader.js Normal file
View File

File diff suppressed because it is too large Load Diff

1089
src/games/chinese-study.js → src/games/ChineseStudy.js
View File

File diff suppressed because it is too large Load Diff

900
src/games/FillTheBlank.js Normal file
View File

@ -0,0 +1,900 @@
import Module from '../core/Module.js';
class FillTheBlank extends Module {
constructor(name, dependencies, config = {}) {
super(name, ['eventBus']);
if (!dependencies.eventBus || !dependencies.content) {
throw new Error('FillTheBlank requires eventBus and content dependencies');
}
this._eventBus = dependencies.eventBus;
this._content = dependencies.content;
this._config = {
container: null,
difficulty: 'medium',
maxSentences: 20,
...config
};
this._score = 0;
this._errors = 0;
this._currentSentenceIndex = 0;
this._isRunning = false;
this._vocabulary = [];
this._sentences = [];
this._currentSentence = null;
this._blanks = [];
this._userAnswers = [];
this._gameContainer = null;
Object.seal(this);
}
static getMetadata() {
return {
id: 'fill-the-blank',
name: 'Fill the Blank',
description: 'Complete sentences by filling in missing words',
version: '2.0.0',
author: 'Class Generator',
category: 'vocabulary',
tags: ['vocabulary', 'sentences', 'completion', 'learning'],
difficulty: {
min: 1,
max: 4,
default: 2
},
estimatedDuration: 10,
requiredContent: ['vocabulary', 'sentences']
};
}
static getCompatibilityScore(content) {
if (!content) {
return 0;
}
let score = 0;
const hasVocabulary = content.vocabulary && (
typeof content.vocabulary === 'object' ||
Array.isArray(content.vocabulary)
);
const hasSentences = content.sentences ||
content.story?.chapters ||
content.fillInBlanks;
if (hasVocabulary) score += 40;
if (hasSentences) score += 40;
if (content.vocabulary && typeof content.vocabulary === 'object') {
const vocabCount = Object.keys(content.vocabulary).length;
if (vocabCount >= 10) score += 10;
if (vocabCount >= 20) score += 5;
}
if (content.sentences && Array.isArray(content.sentences)) {
const sentenceCount = content.sentences.length;
if (sentenceCount >= 5) score += 5;
if (sentenceCount >= 10) score += 5;
}
return Math.min(score, 100);
}
async init() {
this._validateNotDestroyed();
// Validate container
if (!this._config.container) {
throw new Error('Game container is required');
}
this._eventBus.on('game:start', this._handleGameStart.bind(this), this.name);
this._eventBus.on('game:stop', this._handleGameStop.bind(this), this.name);
this._eventBus.on('navigation:change', this._handleNavigationChange.bind(this), this.name);
this._injectCSS();
// Start game immediately
try {
this._gameContainer = this._config.container;
const content = this._content;
if (!content) {
throw new Error('No content available');
}
this._extractVocabulary(content);
this._extractSentences(content);
if (this._vocabulary.length === 0) {
throw new Error('No vocabulary found for Fill the Blank');
}
if (this._sentences.length === 0) {
throw new Error('No sentences found for Fill the Blank');
}
this._createGameBoard();
this._setupEventListeners();
this._loadNextSentence();
// Emit game ready event
this._eventBus.emit('game:ready', {
gameId: 'fill-the-blank',
instanceId: this.name,
vocabulary: this._vocabulary.length,
sentences: this._sentences.length
}, this.name);
} catch (error) {
console.error('Error starting Fill the Blank:', error);
this._showInitError(error.message);
}
this._setInitialized();
}
async destroy() {
this._validateNotDestroyed();
this._cleanup();
this._removeCSS();
this._eventBus.off('game:start', this.name);
this._eventBus.off('game:stop', this.name);
this._eventBus.off('navigation:change', this.name);
this._setDestroyed();
}
_handleGameStart(event) {
this._validateInitialized();
if (event.gameId === 'fill-the-blank') {
this._startGame();
}
}
_handleGameStop(event) {
this._validateInitialized();
if (event.gameId === 'fill-the-blank') {
this._stopGame();
}
}
_handleNavigationChange(event) {
this._validateInitialized();
if (event.from === '/games/fill-the-blank') {
this._cleanup();
}
}
async _startGame() {
try {
this._gameContainer = document.getElementById('game-content');
if (!this._gameContainer) {
throw new Error('Game container not found');
}
const content = await this._content.getCurrentContent();
if (!content) {
throw new Error('No content available');
}
this._extractVocabulary(content);
this._extractSentences(content);
if (this._vocabulary.length === 0) {
throw new Error('No vocabulary found for Fill the Blank');
}
if (this._sentences.length === 0) {
throw new Error('No sentences found for Fill the Blank');
}
this._createGameBoard();
this._setupEventListeners();
this._loadNextSentence();
} catch (error) {
console.error('Error starting Fill the Blank:', error);
this._showInitError(error.message);
}
}
_stopGame() {
this._cleanup();
}
_cleanup() {
this._isRunning = false;
if (this._gameContainer) {
this._gameContainer.innerHTML = '';
}
}
_showInitError(message) {
this._gameContainer.innerHTML = `
<div class="game-error">
<h3>❌ Loading Error</h3>
<p>${message}</p>
<p>The game requires vocabulary and sentences in compatible format.</p>
<button onclick="window.app.getCore().router.navigate('/games')" class="back-btn">← Back to Games</button>
</div>
`;
}
_extractVocabulary(content) {
this._vocabulary = [];
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
this._vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
if (typeof data === 'object' && data.translation) {
return {
original: word,
translation: data.translation.split('；')[0],
fullTranslation: data.translation,
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
} else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
this._vocabulary = this._vocabulary.filter(word =>
word &&
typeof word.original === 'string' &&
typeof word.translation === 'string' &&
word.original.trim() !== '' &&
word.translation.trim() !== ''
);
if (this._vocabulary.length === 0) {
this._vocabulary = [
{ original: 'hello', translation: 'bonjour', category: 'greetings' },
{ original: 'goodbye', translation: 'au revoir', category: 'greetings' },
{ original: 'thank you', translation: 'merci', category: 'greetings' },
{ original: 'cat', translation: 'chat', category: 'animals' },
{ original: 'dog', translation: 'chien', category: 'animals' },
{ original: 'house', translation: 'maison', category: 'objects' },
{ original: 'school', translation: 'école', category: 'places' },
{ original: 'book', translation: 'livre', category: 'objects' }
];
}
console.log(`Fill the Blank: ${this._vocabulary.length} words loaded`);
}
_extractSentences(content) {
this._sentences = [];
if (content.story?.chapters) {
content.story.chapters.forEach(chapter => {
if (chapter.sentences) {
chapter.sentences.forEach(sentence => {
if (sentence.original && sentence.translation) {
this._sentences.push({
original: sentence.original,
translation: sentence.translation,
source: 'story'
});
}
});
}
});
}
const directSentences = content.sentences;
if (directSentences && Array.isArray(directSentences)) {
directSentences.forEach(sentence => {
if (sentence.english && sentence.chinese) {
this._sentences.push({
original: sentence.english,
translation: sentence.chinese,
source: 'sentences'
});
} else if (sentence.original && sentence.translation) {
this._sentences.push({
original: sentence.original,
translation: sentence.translation,
source: 'sentences'
});
}
});
}
this._sentences = this._sentences.filter(sentence =>
sentence.original &&
sentence.original.split(' ').length >= 3 &&
sentence.original.trim().length > 0
);
this._sentences = this._shuffleArray(this._sentences);
if (this._sentences.length === 0) {
this._sentences = this._createFallbackSentences();
}
this._sentences = this._sentences.slice(0, this._config.maxSentences);
console.log(`Fill the Blank: ${this._sentences.length} sentences loaded`);
}
_createFallbackSentences() {
const fallback = [];
this._vocabulary.slice(0, 10).forEach(vocab => {
fallback.push({
original: `This is a ${vocab.original}.`,
translation: `这是一个 ${vocab.translation}。`,
source: 'fallback'
});
});
return fallback;
}
_createGameBoard() {
this._gameContainer.innerHTML = `
<div class="fill-blank-wrapper">
<div class="game-info">
<div class="game-stats">
<div class="stat-item">
<span class="stat-value" id="current-question">${this._currentSentenceIndex + 1}</span>
<span class="stat-label">/ ${this._sentences.length}</span>
</div>
<div class="stat-item">
<span class="stat-value" id="errors-count">${this._errors}</span>
<span class="stat-label">Errors</span>
</div>
<div class="stat-item">
<span class="stat-value" id="score-display">${this._score}</span>
<span class="stat-label">Score</span>
</div>
</div>
</div>
<div class="translation-hint" id="translation-hint">
<!-- Translation will appear here -->
</div>
<div class="sentence-container" id="sentence-container">
<!-- Sentence with blanks will appear here -->
</div>
<div class="input-area" id="input-area">
<!-- Inputs will appear here -->
</div>
<div class="game-controls">
<button class="control-btn secondary" id="hint-btn">💡 Hint</button>
<button class="control-btn primary" id="check-btn">✓ Check</button>
<button class="control-btn secondary" id="skip-btn">→ Next</button>
</div>
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Complete the sentence by filling in the blanks!
</div>
</div>
</div>
`;
}
_setupEventListeners() {
document.getElementById('check-btn').addEventListener('click', () => this._checkAnswer());
document.getElementById('hint-btn').addEventListener('click', () => this._showHint());
document.getElementById('skip-btn').addEventListener('click', () => this._skipSentence());
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && this._isRunning) {
this._checkAnswer();
}
});
}
_loadNextSentence() {
if (this._currentSentenceIndex >= this._sentences.length) {
this._currentSentenceIndex = 0;
this._sentences = this._shuffleArray(this._sentences);
this._showFeedback(`🎉 All sentences completed! Starting over with a new order.`, 'success');
setTimeout(() => {
this._loadNextSentence();
}, 1500);
return;
}
this._isRunning = true;
this._currentSentence = this._sentences[this._currentSentenceIndex];
this._createBlanks();
this._displaySentence();
this._updateUI();
}
_createBlanks() {
const words = this._currentSentence.original.split(' ');
this._blanks = [];
const numBlanks = Math.random() < 0.5 ? 1 : 2;
const blankIndices = new Set();
const vocabularyWords = [];
const otherWords = [];
words.forEach((word, index) => {
const cleanWord = word.replace(/[.,!?;:"'()[\]{}\-–—]/g, '').toLowerCase();
const isVocabularyWord = this._vocabulary.some(vocab =>
vocab.original.toLowerCase() === cleanWord
);
if (isVocabularyWord) {
vocabularyWords.push({ word, index, priority: 'vocabulary' });
} else {
otherWords.push({ word, index, priority: 'other', length: cleanWord.length });
}
});
const selectedWords = [];
const shuffledVocab = this._shuffleArray(vocabularyWords);
for (let i = 0; i < Math.min(numBlanks, shuffledVocab.length); i++) {
selectedWords.push(shuffledVocab[i]);
}
if (selectedWords.length < numBlanks) {
const sortedOthers = otherWords.sort((a, b) => b.length - a.length);
const needed = numBlanks - selectedWords.length;
for (let i = 0; i < Math.min(needed, sortedOthers.length); i++) {
selectedWords.push(sortedOthers[i]);
}
}
selectedWords.forEach(item => blankIndices.add(item.index));
words.forEach((word, index) => {
if (blankIndices.has(index)) {
this._blanks.push({
index: index,
word: word.replace(/[.,!?;:]$/, ''),
punctuation: word.match(/[.,!?;:]$/) ? word.match(/[.,!?;:]$/)[0] : '',
userAnswer: ''
});
}
});
}
_displaySentence() {
const words = this._currentSentence.original.split(' ');
let sentenceHTML = '';
let blankCounter = 0;
words.forEach((word, index) => {
const blank = this._blanks.find(b => b.index === index);
if (blank) {
sentenceHTML += `<span class="blank-wrapper">
<input type="text" class="blank-input"
id="blank-${blankCounter}"
placeholder="___"
maxlength="${blank.word.length + 2}">
${blank.punctuation}
</span> `;
blankCounter++;
} else {
sentenceHTML += `<span class="word">${word}</span> `;
}
});
document.getElementById('sentence-container').innerHTML = sentenceHTML;
const translation = this._currentSentence.translation || '';
document.getElementById('translation-hint').innerHTML = translation ?
`<em>💭 ${translation}</em>` : '';
const firstInput = document.getElementById('blank-0');
if (firstInput) {
setTimeout(() => firstInput.focus(), 100);
}
}
_checkAnswer() {
if (!this._isRunning) return;
let allCorrect = true;
let correctCount = 0;
this._blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = blank.word.toLowerCase();
blank.userAnswer = input.value.trim();
if (userAnswer === correctAnswer) {
input.classList.remove('incorrect');
input.classList.add('correct');
correctCount++;
} else {
input.classList.remove('correct');
input.classList.add('incorrect');
allCorrect = false;
}
});
if (allCorrect) {
this._score += 10 * this._blanks.length;
this._showFeedback(`🎉 Perfect! +${10 * this._blanks.length} points`, 'success');
setTimeout(() => {
this._currentSentenceIndex++;
this._loadNextSentence();
}, 1500);
} else {
this._errors++;
if (correctCount > 0) {
this._score += 5 * correctCount;
this._showFeedback(`✨ ${correctCount}/${this._blanks.length} correct! +${5 * correctCount} points. Try again.`, 'partial');
} else {
this._showFeedback(`❌ Try again! (${this._errors} errors)`, 'error');
}
}
this._updateUI();
this._eventBus.emit('game:score-update', {
gameId: 'fill-the-blank',
score: this._score,
module: this.name
});
}
_showHint() {
this._blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
if (!input.value.trim()) {
input.value = blank.word[0];
input.focus();
}
});
this._showFeedback('💡 First letter added!', 'info');
}
_skipSentence() {
this._blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
input.value = blank.word;
input.classList.add('revealed');
});
this._showFeedback('📖 Answers revealed! Next sentence...', 'info');
setTimeout(() => {
this._currentSentenceIndex++;
this._loadNextSentence();
}, 2000);
}
_showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
_updateUI() {
document.getElementById('current-question').textContent = this._currentSentenceIndex + 1;
document.getElementById('errors-count').textContent = this._errors;
document.getElementById('score-display').textContent = this._score;
}
_shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
_injectCSS() {
const cssId = 'fill-the-blank-styles';
if (document.getElementById(cssId)) return;
const style = document.createElement('style');
style.id = cssId;
style.textContent = `
.fill-blank-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.game-info {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.game-stats {
display: flex;
justify-content: space-around;
align-items: center;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 2em;
font-weight: bold;
display: block;
color: #fff;
}
.stat-label {
font-size: 0.9em;
opacity: 0.8;
color: #e0e0e0;
}
.translation-hint {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1.1em;
color: #f0f0f0;
}
.sentence-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
margin-bottom: 25px;
font-size: 1.4em;
line-height: 1.8;
text-align: center;
color: #2c3e50;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.word {
display: inline;
color: #2c3e50;
font-weight: 500;
}
.blank-wrapper {
display: inline;
position: relative;
}
.blank-input {
background: white;
border: 2px solid #ddd;
border-radius: 8px;
padding: 8px 12px;
font-size: 1em;
text-align: center;
min-width: 80px;
max-width: 150px;
transition: all 0.3s ease;
color: #2c3e50;
font-weight: bold;
}
.blank-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
transform: scale(1.05);
}
.blank-input.correct {
border-color: #27ae60;
background: linear-gradient(135deg, #d5f4e6, #a3e6c7);
color: #1e8e3e;
}
.blank-input.incorrect {
border-color: #e74c3c;
background: linear-gradient(135deg, #ffeaea, #ffcdcd);
color: #c0392b;
animation: shake 0.5s ease-in-out;
}
.blank-input.revealed {
border-color: #f39c12;
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
color: #d35400;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.game-controls {
display: flex;
justify-content: center;
gap: 15px;
margin: 25px 0;
}
.control-btn {
padding: 12px 25px;
border: none;
border-radius: 25px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
}
.control-btn.primary {
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}
.control-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}
.control-btn.secondary {
background: rgba(255, 255, 255, 0.9);
color: #667eea;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.control-btn.secondary:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}
.feedback-area {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.instruction {
font-size: 1.1em;
font-weight: 500;
color: #f0f0f0;
}
.instruction.success {
color: #2ecc71;
font-weight: bold;
animation: pulse 0.6s ease-in-out;
}
.instruction.error {
color: #e74c3c;
font-weight: bold;
animation: pulse 0.6s ease-in-out;
}
.instruction.partial {
color: #f39c12;
font-weight: bold;
}
.instruction.info {
color: #3498db;
font-weight: bold;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.game-error {
background: rgba(231, 76, 60, 0.1);
border: 2px solid #e74c3c;
border-radius: 15px;
padding: 30px;
text-align: center;
color: white;
backdrop-filter: blur(10px);
}
.game-error h3 {
color: #e74c3c;
margin-bottom: 15px;
}
.back-btn {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
border: none;
padding: 12px 25px;
border-radius: 25px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.back-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
}
@media (max-width: 768px) {
.fill-blank-wrapper {
padding: 15px;
}
.game-stats {
flex-direction: column;
gap: 15px;
}
.sentence-container {
font-size: 1.2em;
padding: 20px;
}
.blank-input {
min-width: 60px;
font-size: 0.9em;
}
.game-controls {
flex-direction: column;
align-items: center;
}
.control-btn {
width: 100%;
max-width: 200px;
}
}
`;
document.head.appendChild(style);
}
_removeCSS() {
const cssElement = document.getElementById('fill-the-blank-styles');
if (cssElement) {
cssElement.remove();
}
}
}
export default FillTheBlank;

1978
src/games/FlashcardLearning.js Normal file
View File

File diff suppressed because it is too large Load Diff

1864
src/games/GrammarDiscovery.js Normal file
View File

File diff suppressed because it is too large Load Diff

1205
src/games/LetterDiscovery.js Normal file
View File

File diff suppressed because it is too large Load Diff

3902
src/games/MarioEducational.js Normal file
View File

File diff suppressed because it is too large Load Diff

1058
src/games/QuizGame.js Normal file
View File

File diff suppressed because it is too large Load Diff

1428
src/games/RiverRun.js Normal file
View File

File diff suppressed because it is too large Load Diff

1264
src/games/StoryBuilder.js Normal file
View File

File diff suppressed because it is too large Load Diff

1168
src/games/StoryReader.js Normal file
View File

File diff suppressed because it is too large Load Diff

1254
src/games/WhackAMole.js Normal file
View File

File diff suppressed because it is too large Load Diff

1484
src/games/WhackAMoleHard.js Normal file
View File

File diff suppressed because it is too large Load Diff

1669
src/games/wizard-spell-caster.js → src/games/WizardSpellCaster.js
View File

File diff suppressed because it is too large Load Diff

914
src/games/WordDiscovery.js Normal file
View File

@ -0,0 +1,914 @@
import Module from '../core/Module.js';
class WordDiscovery extends Module {
constructor(name, dependencies, config = {}) {
super(name, ['eventBus']);
if (!dependencies.eventBus || !dependencies.content) {
throw new Error('WordDiscovery requires eventBus and content dependencies');
}
this._eventBus = dependencies.eventBus;
this._content = dependencies.content;
this._config = {
container: null,
difficulty: 'medium',
practiceCount: 10,
timerDuration: 30,
...config
};
this._currentPhase = 'discovery';
this._discoveredWords = [];
this._practiceWords = [];
this._currentWordIndex = 0;
this._currentPracticeLevel = 0;
this._practiceCorrect = 0;
this._practiceTotal = 0;
this._timer = null;
this._timeLeft = 0;
this._gameContainer = null;
this._audioElements = new Map();
this._imageCache = new Map();
this._practiceOptions = [];
this._correctAnswer = null;
this._currentQuestion = null;
Object.seal(this);
}
static getMetadata() {
return {
id: 'word-discovery',
name: 'Word Discovery',
description: 'Discover and practice vocabulary with adaptive difficulty',
version: '2.0.0',
author: 'Class Generator',
category: 'vocabulary',
tags: ['vocabulary', 'learning', 'discovery', 'practice'],
difficulty: {
min: 1,
max: 4,
default: 2
},
estimatedDuration: 15,
requiredContent: ['vocabulary']
};
}
static getCompatibilityScore(content) {
if (!content || (!Array.isArray(content.vocabulary) && !content.vocabulary)) {
return 0;
}
// Handle both array and object vocabulary formats
let vocabCount;
if (Array.isArray(content.vocabulary)) {
vocabCount = content.vocabulary.length;
} else if (content.vocabulary && typeof content.vocabulary === 'object') {
vocabCount = Object.keys(content.vocabulary).length;
} else {
return 0;
}
let score = 50;
if (vocabCount >= 10) score += 20;
if (vocabCount >= 20) score += 15;
if (vocabCount >= 50) score += 10;
// Check for bonus features depending on format
let hasImages, hasAudio, hasTranslations;
if (Array.isArray(content.vocabulary)) {
hasImages = content.vocabulary.some(word => word.image);
hasAudio = content.vocabulary.some(word => word.audio);
hasTranslations = content.vocabulary.some(word => word.translation);
} else {
// Object format (SBS style)
const vocabEntries = Object.values(content.vocabulary);
hasImages = vocabEntries.some(entry => entry.image);
hasAudio = vocabEntries.some(entry => entry.audio);
hasTranslations = vocabEntries.some(entry => entry.user_language || entry.translation);
}
if (hasImages) score += 5;
if (hasAudio) score += 5;
if (hasTranslations) score += 5;
return Math.min(score, 100);
}
async init() {
this._validateNotDestroyed();
// Validate container
if (!this._config.container) {
throw new Error('Game container is required');
}
this._eventBus.on('game:start', this._handleGameStart.bind(this), this.name);
this._eventBus.on('game:stop', this._handleGameStop.bind(this), this.name);
this._eventBus.on('navigation:change', this._handleNavigationChange.bind(this), this.name);
this._injectCSS();
// Start game immediately
try {
this._gameContainer = this._config.container;
const content = this._content;
if (!content || !content.vocabulary || Object.keys(content.vocabulary).length === 0) {
throw new Error('No vocabulary content available');
}
this._practiceWords = Object.entries(content.vocabulary).map(([word, data]) => ({
word: word,
translation: typeof data === 'string' ? data :
data.user_language || data.translation || 'unknown',
pronunciation: data.pronunciation,
type: data.type || 'general',
audio: data.audio,
image: data.image,
definition: data.definition,
example: data.example
}));
this._discoveredWords = [];
this._currentWordIndex = 0;
this._currentPhase = 'discovery';
await this._preloadAssets();
this._renderDiscoveryPhase();
// Emit game ready event
this._eventBus.emit('game:ready', {
gameId: 'word-discovery',
instanceId: this.name,
vocabulary: this._practiceWords.length
}, this.name);
} catch (error) {
this._showError(error.message);
throw error;
}
this._setInitialized();
}
async destroy() {
this._validateNotDestroyed();
this._cleanup();
this._removeCSS();
this._eventBus.off('game:start', this.name);
this._eventBus.off('game:stop', this.name);
this._eventBus.off('navigation:change', this.name);
this._setDestroyed();
}
_handleGameStart(event) {
this._validateInitialized();
if (event.gameId === 'word-discovery') {
this._startGame();
}
}
_handleGameStop(event) {
this._validateInitialized();
if (event.gameId === 'word-discovery') {
this._stopGame();
}
}
_handleNavigationChange(event) {
this._validateInitialized();
if (event.from === '/games/word-discovery') {
this._cleanup();
}
}
async _startGame() {
try {
this._gameContainer = document.getElementById('game-content');
if (!this._gameContainer) {
throw new Error('Game container not found');
}
const content = window.contentLoader ? window.contentLoader.getContent(window.currentChapterId) : await this._content.getCurrentContent();
if (!content || !content.vocabulary || content.vocabulary.length === 0) {
throw new Error('No vocabulary content available');
}
this._practiceWords = [...content.vocabulary];
this._discoveredWords = [];
this._currentWordIndex = 0;
this._currentPhase = 'discovery';
await this._preloadAssets();
this._renderDiscoveryPhase();
} catch (error) {
console.error('Error starting Word Discovery:', error);
this._eventBus.emit('game:error', {
gameId: 'word-discovery',
error: error.message,
module: this.name
});
}
}
_stopGame() {
this._cleanup();
}
_cleanup() {
if (this._timer) {
clearInterval(this._timer);
this._timer = null;
}
this._audioElements.forEach(audio => {
audio.pause();
audio.src = '';
});
this._audioElements.clear();
if (this._gameContainer) {
this._gameContainer.innerHTML = '';
}
}
async _preloadAssets() {
for (const word of this._practiceWords) {
if (word.audio) {
try {
const audio = new Audio();
audio.preload = 'auto';
audio.src = word.audio;
this._audioElements.set(word.word, audio);
} catch (error) {
console.warn(`Failed to preload audio for ${word.word}:`, error);
}
}
if (word.image) {
try {
const img = new Image();
img.src = word.image;
await new Promise((resolve, reject) => {
img.onload = resolve;
img.onerror = reject;
setTimeout(reject, 5000);
});
this._imageCache.set(word.word, word.image);
} catch (error) {
console.warn(`Failed to preload image for ${word.word}:`, error);
}
}
}
}
_renderDiscoveryPhase() {
const word = this._practiceWords[this._currentWordIndex];
if (!word) {
this._startPracticePhase();
return;
}
this._gameContainer.innerHTML = `
<div class="word-discovery-container">
<div class="discovery-header">
<h2>Word Discovery</h2>
<div class="progress-bar">
<div class="progress-fill" style="width: ${(this._currentWordIndex / this._practiceWords.length) * 100}%"></div>
</div>
<p>Progress: ${this._currentWordIndex + 1} / ${this._practiceWords.length}</p>
</div>
<div class="word-card discovery-card">
${word.image ? `<div class="word-image">
<img src="${word.image}" alt="${word.word}" onerror="this.style.display='none'">
</div>` : ''}
<div class="word-content">
<h3 class="word-text">${word.word}</h3>
${word.translation ? `<p class="word-translation">${word.translation}</p>` : ''}
${word.definition ? `<p class="word-definition">${word.definition}</p>` : ''}
${word.example ? `<p class="word-example">"${word.example}"</p>` : ''}
</div>
<div class="word-controls">
${word.audio ? `<button class="audio-btn" onclick="window.wordDiscovery._playAudio('${word.word}')">
🔊 Listen
</button>` : ''}
<button class="next-btn" onclick="window.wordDiscovery._nextWord()">
Next Word
</button>
</div>
</div>
<div class="discovery-controls">
<button class="practice-btn" onclick="window.wordDiscovery._startPracticePhase()">
Start Practice
</button>
</div>
</div>
`;
window.wordDiscovery = this;
}
_nextWord() {
const currentWord = this._practiceWords[this._currentWordIndex];
if (currentWord && !this._discoveredWords.find(w => w.word === currentWord.word)) {
this._discoveredWords.push(currentWord);
}
this._currentWordIndex++;
this._renderDiscoveryPhase();
}
_playAudio(word) {
const audio = this._audioElements.get(word);
if (audio) {
audio.currentTime = 0;
audio.play().catch(error => {
console.warn(`Failed to play audio for ${word}:`, error);
});
}
}
_startPracticePhase() {
if (this._discoveredWords.length === 0) {
this._discoveredWords = [...this._practiceWords];
}
this._currentPhase = 'practice';
this._currentPracticeLevel = 0;
this._practiceCorrect = 0;
this._practiceTotal = 0;
this._renderPracticeLevel();
}
_renderPracticeLevel() {
const levels = ['Easy', 'Medium', 'Hard', 'Expert'];
const levelConfig = {
0: { time: 45, options: 2, type: 'translation' },
1: { time: 30, options: 3, type: 'mixed' },
2: { time: 20, options: 4, type: 'definition' },
3: { time: 15, options: 4, type: 'context' }
};
const config = levelConfig[this._currentPracticeLevel];
const levelName = levels[this._currentPracticeLevel];
this._gameContainer.innerHTML = `
<div class="word-discovery-container">
<div class="practice-header">
<h2>Practice Phase - ${levelName}</h2>
<div class="practice-stats">
<span>Correct: ${this._practiceCorrect}</span>
<span>Total: ${this._practiceTotal}</span>
<span>Accuracy: ${this._practiceTotal > 0 ? Math.round((this._practiceCorrect / this._practiceTotal) * 100) : 0}%</span>
</div>
<div class="timer">Time: <span id="timer-display">${config.time}</span></div>
</div>
<div class="practice-question" id="practice-question">
Loading question...
</div>
<div class="practice-controls">
<button class="back-btn" onclick="window.wordDiscovery._backToDiscovery()">
Back to Discovery
</button>
<button class="next-level-btn" onclick="window.wordDiscovery._nextLevel()"
style="display: ${this._currentPracticeLevel < 3 ? 'inline-block' : 'none'}">
Next Level
</button>
</div>
</div>
`;
this._timeLeft = config.time;
this._startTimer();
this._generateQuestion(config);
}
_startTimer() {
const timerDisplay = document.getElementById('timer-display');
if (!timerDisplay) return;
this._timer = setInterval(() => {
this._timeLeft--;
timerDisplay.textContent = this._timeLeft;
if (this._timeLeft <= 0) {
clearInterval(this._timer);
this._handleTimeUp();
}
}, 1000);
}
_handleTimeUp() {
this._practiceTotal++;
this._showResult(false, 'Time up!');
setTimeout(() => {
this._generateQuestion();
}, 1500);
}
_generateQuestion(config = null) {
if (!config) {
const levelConfig = {
0: { time: 45, options: 2, type: 'translation' },
1: { time: 30, options: 3, type: 'mixed' },
2: { time: 20, options: 4, type: 'definition' },
3: { time: 15, options: 4, type: 'context' }
};
config = levelConfig[this._currentPracticeLevel];
}
const questionContainer = document.getElementById('practice-question');
if (!questionContainer) return;
const availableWords = this._discoveredWords.filter(w => w);
if (availableWords.length === 0) return;
const correctWord = availableWords[Math.floor(Math.random() * availableWords.length)];
this._correctAnswer = correctWord;
const wrongWords = availableWords
.filter(w => w.word !== correctWord.word)
.sort(() => Math.random() - 0.5)
.slice(0, config.options - 1);
this._practiceOptions = [correctWord, ...wrongWords]
.sort(() => Math.random() - 0.5);
this._renderQuestion(config.type, correctWord);
}
_renderQuestion(type, correctWord) {
const questionContainer = document.getElementById('practice-question');
let questionHTML = '';
switch (type) {
case 'translation':
questionHTML = this._renderTranslationQuestion(correctWord);
break;
case 'definition':
questionHTML = this._renderDefinitionQuestion(correctWord);
break;
case 'context':
questionHTML = this._renderContextQuestion(correctWord);
break;
case 'mixed':
const types = ['translation', 'definition'];
const randomType = types[Math.floor(Math.random() * types.length)];
questionHTML = this._renderQuestion(randomType, correctWord);
return;
}
questionContainer.innerHTML = questionHTML;
}
_renderTranslationQuestion(correctWord) {
return `
<div class="question-content">
<h3>What does this word mean?</h3>
<div class="question-word">
${correctWord.word}
${correctWord.audio ? `<button class="audio-btn-small" onclick="window.wordDiscovery._playAudio('${correctWord.word}')">🔊</button>` : ''}
</div>
<div class="options-grid">
${this._practiceOptions.map(option => `
<button class="option-btn" onclick="window.wordDiscovery._selectAnswer('${option.word}')">
${option.translation || option.definition || option.word}
</button>
`).join('')}
</div>
</div>
`;
}
_renderDefinitionQuestion(correctWord) {
return `
<div class="question-content">
<h3>Which word matches this definition?</h3>
<div class="question-definition">
${correctWord.definition || correctWord.translation}
</div>
<div class="options-grid">
${this._practiceOptions.map(option => `
<button class="option-btn" onclick="window.wordDiscovery._selectAnswer('${option.word}')">
${option.word}
</button>
`).join('')}
</div>
</div>
`;
}
_renderContextQuestion(correctWord) {
return `
<div class="question-content">
<h3>Complete the sentence:</h3>
<div class="question-context">
${correctWord.example ? correctWord.example.replace(correctWord.word, '_____') : `The _____ is very important.`}
</div>
<div class="options-grid">
${this._practiceOptions.map(option => `
<button class="option-btn" onclick="window.wordDiscovery._selectAnswer('${option.word}')">
${option.word}
</button>
`).join('')}
</div>
</div>
`;
}
_selectAnswer(selectedWord) {
this._practiceTotal++;
const isCorrect = selectedWord === this._correctAnswer.word;
if (isCorrect) {
this._practiceCorrect++;
}
this._showResult(isCorrect, isCorrect ? 'Correct!' : `Wrong! The answer was: ${this._correctAnswer.word}`);
setTimeout(() => {
this._generateQuestion();
}, 1500);
}
_showResult(isCorrect, message) {
if (this._timer) {
clearInterval(this._timer);
this._timer = null;
}
const questionContainer = document.getElementById('practice-question');
if (!questionContainer) return;
questionContainer.innerHTML = `
<div class="result-display ${isCorrect ? 'correct' : 'incorrect'}">
<h3>${message}</h3>
${!isCorrect && this._correctAnswer.translation ? `<p>Translation: ${this._correctAnswer.translation}</p>` : ''}
</div>
`;
this._updateStats();
}
_updateStats() {
const statsElements = document.querySelectorAll('.practice-stats span');
if (statsElements.length >= 3) {
statsElements[0].textContent = `Correct: ${this._practiceCorrect}`;
statsElements[1].textContent = `Total: ${this._practiceTotal}`;
statsElements[2].textContent = `Accuracy: ${this._practiceTotal > 0 ? Math.round((this._practiceCorrect / this._practiceTotal) * 100) : 0}%`;
}
}
_nextLevel() {
if (this._currentPracticeLevel < 3) {
this._currentPracticeLevel++;
this._renderPracticeLevel();
}
}
_backToDiscovery() {
this._currentPhase = 'discovery';
this._currentWordIndex = 0;
this._renderDiscoveryPhase();
}
_injectCSS() {
const cssId = 'word-discovery-styles';
if (document.getElementById(cssId)) return;
const style = document.createElement('style');
style.id = cssId;
style.textContent = `
.word-discovery-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.discovery-header, .practice-header {
text-align: center;
margin-bottom: 30px;
}
.discovery-header h2, .practice-header h2 {
color: #2c3e50;
margin-bottom: 15px;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: #ecf0f1;
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3498db, #2980b9);
transition: width 0.3s ease;
}
.word-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 30px;
margin: 20px 0;
text-align: center;
border: 2px solid #e74c3c;
}
.word-image img {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
margin-bottom: 20px;
}
.word-text {
font-size: 2.5em;
color: #2c3e50;
margin: 15px 0;
font-weight: bold;
}
.word-translation {
font-size: 1.4em;
color: #e74c3c;
margin: 10px 0;
font-weight: 600;
}
.word-definition {
font-size: 1.1em;
color: #7f8c8d;
margin: 10px 0;
font-style: italic;
}
.word-example {
font-size: 1em;
color: #95a5a6;
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
border-radius: 6px;
}
.word-controls, .discovery-controls, .practice-controls {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.audio-btn, .next-btn, .practice-btn, .back-btn, .next-level-btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.audio-btn {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}
.audio-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}
.next-btn, .next-level-btn {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}
.next-btn:hover, .next-level-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}
.practice-btn {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
font-size: 1.3em;
padding: 15px 30px;
}
.practice-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
.back-btn {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}
.back-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(149, 165, 166, 0.4);
}
.practice-stats {
display: flex;
gap: 20px;
justify-content: center;
margin: 15px 0;
font-size: 1.1em;
font-weight: 600;
}
.practice-stats span {
color: #2c3e50;
}
.timer {
font-size: 1.3em;
font-weight: bold;
color: #e74c3c;
margin: 10px 0;
}
.question-content {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
.question-content h3 {
color: #2c3e50;
margin-bottom: 20px;
text-align: center;
}
.question-word {
font-size: 2em;
font-weight: bold;
color: #e74c3c;
text-align: center;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.question-definition, .question-context {
font-size: 1.3em;
color: #2c3e50;
text-align: center;
margin: 20px 0;
padding: 15px;
background-color: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #3498db;
}
.audio-btn-small {
padding: 8px 12px;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9em;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 25px;
}
.option-btn {
padding: 15px 20px;
background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
border: 2px solid #95a5a6;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
color: #2c3e50;
transition: all 0.3s ease;
}
.option-btn:hover {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.result-display {
text-align: center;
padding: 30px;
border-radius: 12px;
margin: 20px 0;
}
.result-display.correct {
background: linear-gradient(135deg, #2ecc71, #27ae60);
color: white;
}
.result-display.incorrect {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
.result-display h3 {
margin: 0 0 10px 0;
font-size: 1.5em;
}
.result-display p {
margin: 10px 0 0 0;
font-size: 1.1em;
opacity: 0.9;
}
@media (max-width: 768px) {
.word-discovery-container {
padding: 10px;
}
.word-text {
font-size: 2em;
}
.word-controls, .discovery-controls, .practice-controls {
flex-direction: column;
align-items: center;
}
.practice-stats {
flex-direction: column;
gap: 10px;
}
.options-grid {
grid-template-columns: 1fr;
}
.question-word {
font-size: 1.5em;
}
}
`;
document.head.appendChild(style);
}
_showError(message) {
if (this._gameContainer) {
this._gameContainer.innerHTML = `
<div class="game-error">
<div class="error-icon">❌</div>
<h3>Word Discovery Error</h3>
<p>${message}</p>
<button class="btn btn-primary" onclick="history.back()">Go Back</button>
</div>
`;
}
}
_removeCSS() {
const cssElement = document.getElementById('word-discovery-styles');
if (cssElement) {
cssElement.remove();
}
if (window.wordDiscovery === this) {
delete window.wordDiscovery;
}
}
}
export default WordDiscovery;

1253
src/games/WordStorm.js Normal file
View File

File diff suppressed because it is too large Load Diff

1287
src/games/adventure-reader.js
View File

File diff suppressed because it is too large Load Diff

569
src/games/fill-the-blank.js
View File

@ -1,569 +0,0 @@
// === MODULE FILL THE BLANK ===
class FillTheBlankGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.score = 0;
this.errors = 0;
this.currentSentenceIndex = 0;
this.isRunning = false;
// Game data
this.vocabulary = this.extractVocabulary(this.content);
this.sentences = this.extractRealSentences();
this.currentSentence = null;
this.blanks = [];
this.userAnswers = [];
this.init();
}
init() {
// Check that we have vocabulary
if (!this.vocabulary || this.vocabulary.length === 0) {
logSh('No vocabulary available for Fill the Blank', 'ERROR');
this.showInitError();
return;
}
this.createGameBoard();
this.setupEventListeners();
// The game will start when start() is called
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Loading Error</h3>
<p>This content does not contain vocabulary compatible with Fill the Blank.</p>
<p>The game requires words with their translations in ultra-modular format.</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back to Games</button>
</div>
`;
}
extractVocabulary(content) {
let vocabulary = [];
logSh('🔍 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Priority 1: Use raw module content (ultra-modular format)
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Priority 2: Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
logSh(`✨ ${vocabulary.length} words extracted from ultra-modular vocabulary`, 'INFO');
}
// No other formats supported - ultra-modular only
else {
logSh('⚠️ Content format not supported - ultra-modular format required', 'WARN');
}
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Validation and cleanup for ultra-modular format
vocabulary = vocabulary.filter(word =>
word &&
typeof word.original === 'string' &&
typeof word.translation === 'string' &&
word.original.trim() !== '' &&
word.translation.trim() !== ''
);
if (vocabulary.length === 0) {
logSh('❌ No valid vocabulary found', 'ERROR');
// Demo vocabulary as last resort
vocabulary = [
{ original: 'hello', translation: 'bonjour', category: 'greetings' },
{ original: 'goodbye', translation: 'au revoir', category: 'greetings' },
{ original: 'thank you', translation: 'merci', category: 'greetings' },
{ original: 'cat', translation: 'chat', category: 'animals' },
{ original: 'dog', translation: 'chien', category: 'animals' },
{ original: 'house', translation: 'maison', category: 'objects' },
{ original: 'school', translation: 'école', category: 'places' },
{ original: 'book', translation: 'livre', category: 'objects' }
];
logSh('🚨 Using demo vocabulary', 'WARN');
}
logSh(`✅ Fill the Blank: ${vocabulary.length} words finalized`, 'INFO');
return vocabulary;
}
extractRealSentences() {
let sentences = [];
logSh('🔍 Extracting real sentences from content...', 'INFO');
// Priority 1: Extract from story chapters
if (this.content.story?.chapters) {
this.content.story.chapters.forEach(chapter => {
if (chapter.sentences) {
chapter.sentences.forEach(sentence => {
if (sentence.original && sentence.translation) {
sentences.push({
original: sentence.original,
translation: sentence.translation,
source: 'story'
});
}
});
}
});
}
// Priority 2: Extract from rawContent story
if (this.content.rawContent?.story?.chapters) {
this.content.rawContent.story.chapters.forEach(chapter => {
if (chapter.sentences) {
chapter.sentences.forEach(sentence => {
if (sentence.original && sentence.translation) {
sentences.push({
original: sentence.original,
translation: sentence.translation,
source: 'rawContent.story'
});
}
});
}
});
}
// Priority 3: Extract from sentences array
const directSentences = this.content.sentences || this.content.rawContent?.sentences;
if (directSentences && Array.isArray(directSentences)) {
directSentences.forEach(sentence => {
if (sentence.english && sentence.chinese) {
sentences.push({
original: sentence.english,
translation: sentence.chinese,
source: 'sentences'
});
} else if (sentence.original && sentence.translation) {
sentences.push({
original: sentence.original,
translation: sentence.translation,
source: 'sentences'
});
}
});
}
// Filter sentences that are suitable for fill-the-blank (min 3 words)
sentences = sentences.filter(sentence =>
sentence.original &&
sentence.original.split(' ').length >= 3 &&
sentence.original.trim().length > 0
);
// Shuffle and limit
sentences = this.shuffleArray(sentences);
logSh(`📝 Extracted ${sentences.length} real sentences for fill-the-blank`, 'INFO');
if (sentences.length === 0) {
logSh('❌ No suitable sentences found for fill-the-blank', 'ERROR');
return this.createFallbackSentences();
}
return sentences.slice(0, 20); // Limit to 20 sentences max
}
createFallbackSentences() {
// Simple fallback using vocabulary words in basic sentences
const fallback = [];
this.vocabulary.slice(0, 10).forEach(vocab => {
fallback.push({
original: `This is a ${vocab.original}.`,
translation: `这是一个 ${vocab.translation}。`,
source: 'fallback'
});
});
return fallback;
}
createGameBoard() {
this.container.innerHTML = `
<div class="fill-blank-wrapper">
<!-- Game Info -->
<div class="game-info">
<div class="game-stats">
<div class="stat-item">
<span class="stat-value" id="current-question">${this.currentSentenceIndex + 1}</span>
<span class="stat-label">/ ${this.sentences.length}</span>
</div>
<div class="stat-item">
<span class="stat-value" id="errors-count">${this.errors}</span>
<span class="stat-label">Errors</span>
</div>
<div class="stat-item">
<span class="stat-value" id="score-display">${this.score}</span>
<span class="stat-label">Score</span>
</div>
</div>
</div>
<!-- Translation hint -->
<div class="translation-hint" id="translation-hint">
<!-- Translation will appear here -->
</div>
<!-- Sentence with blanks -->
<div class="sentence-container" id="sentence-container">
<!-- Sentence with blanks will appear here -->
</div>
<!-- Input area -->
<div class="input-area" id="input-area">
<!-- Inputs will appear here -->
</div>
<!-- Controls -->
<div class="game-controls">
<button class="control-btn secondary" id="hint-btn">💡 Hint</button>
<button class="control-btn primary" id="check-btn">✓ Check</button>
<button class="control-btn secondary" id="skip-btn">→ Next</button>
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Complete the sentence by filling in the blanks!
</div>
</div>
</div>
`;
}
setupEventListeners() {
document.getElementById('check-btn').addEventListener('click', () => this.checkAnswer());
document.getElementById('hint-btn').addEventListener('click', () => this.showHint());
document.getElementById('skip-btn').addEventListener('click', () => this.skipSentence());
// Enter key to check answer
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && this.isRunning) {
this.checkAnswer();
}
});
}
start() {
logSh('🎮 Fill the Blank: Starting game', 'INFO');
this.loadNextSentence();
}
restart() {
logSh('🔄 Fill the Blank: Restarting game', 'INFO');
this.reset();
this.start();
}
reset() {
this.score = 0;
this.errors = 0;
this.currentSentenceIndex = 0;
this.isRunning = false;
this.currentSentence = null;
this.blanks = [];
this.userAnswers = [];
this.onScoreUpdate(0);
}
loadNextSentence() {
// If we've finished all sentences, restart from the beginning
if (this.currentSentenceIndex >= this.sentences.length) {
this.currentSentenceIndex = 0;
this.sentences = this.shuffleArray(this.sentences); // Shuffle again
this.showFeedback(`🎉 All sentences completed! Starting over with a new order.`, 'success');
setTimeout(() => {
this.loadNextSentence();
}, 1500);
return;
}
this.isRunning = true;
this.currentSentence = this.sentences[this.currentSentenceIndex];
this.createBlanks();
this.displaySentence();
this.updateUI();
}
createBlanks() {
const words = this.currentSentence.original.split(' ');
this.blanks = [];
// Create 1-2 blanks randomly (readable sentences)
const numBlanks = Math.random() < 0.5 ? 1 : 2;
const blankIndices = new Set();
// PRIORITY 1: Words from vocabulary (educational value)
const vocabularyWords = [];
const otherWords = [];
words.forEach((word, index) => {
const cleanWord = word.replace(/[.,!?;:"'()[\]{}\-–—]/g, '').toLowerCase();
const isVocabularyWord = this.vocabulary.some(vocab =>
vocab.original.toLowerCase() === cleanWord
);
if (isVocabularyWord) {
vocabularyWords.push({ word, index, priority: 'vocabulary' });
} else {
otherWords.push({ word, index, priority: 'other', length: cleanWord.length });
}
});
// Select blanks: vocabulary first, then longest words
const selectedWords = [];
// Take vocabulary words first (shuffled)
const shuffledVocab = this.shuffleArray(vocabularyWords);
for (let i = 0; i < Math.min(numBlanks, shuffledVocab.length); i++) {
selectedWords.push(shuffledVocab[i]);
}
// If need more blanks, take longest other words
if (selectedWords.length < numBlanks) {
const sortedOthers = otherWords.sort((a, b) => b.length - a.length);
const needed = numBlanks - selectedWords.length;
for (let i = 0; i < Math.min(needed, sortedOthers.length); i++) {
selectedWords.push(sortedOthers[i]);
}
}
// Add selected indices to blanks
selectedWords.forEach(item => blankIndices.add(item.index));
// Create blank structure
words.forEach((word, index) => {
if (blankIndices.has(index)) {
this.blanks.push({
index: index,
word: word.replace(/[.,!?;:]$/, ''), // Remove punctuation
punctuation: word.match(/[.,!?;:]$/) ? word.match(/[.,!?;:]$/)[0] : '',
userAnswer: ''
});
}
});
}
displaySentence() {
const words = this.currentSentence.original.split(' ');
let sentenceHTML = '';
let blankCounter = 0;
words.forEach((word, index) => {
const blank = this.blanks.find(b => b.index === index);
if (blank) {
sentenceHTML += `<span class="blank-wrapper">
<input type="text" class="blank-input"
id="blank-${blankCounter}"
placeholder="___"
maxlength="${blank.word.length + 2}">
${blank.punctuation}
</span> `;
blankCounter++;
} else {
sentenceHTML += `<span class="word">${word}</span> `;
}
});
document.getElementById('sentence-container').innerHTML = sentenceHTML;
// Display translation if available
const translation = this.currentSentence.translation || '';
document.getElementById('translation-hint').innerHTML = translation ?
`<em>💭 ${translation}</em>` : '';
// Focus on first input
const firstInput = document.getElementById('blank-0');
if (firstInput) {
setTimeout(() => firstInput.focus(), 100);
}
}
checkAnswer() {
if (!this.isRunning) return;
let allCorrect = true;
let correctCount = 0;
// Check each blank
this.blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = blank.word.toLowerCase();
blank.userAnswer = input.value.trim();
if (userAnswer === correctAnswer) {
input.classList.remove('incorrect');
input.classList.add('correct');
correctCount++;
} else {
input.classList.remove('correct');
input.classList.add('incorrect');
allCorrect = false;
}
});
if (allCorrect) {
// All answers are correct
this.score += 10 * this.blanks.length;
this.showFeedback(`🎉 Perfect! +${10 * this.blanks.length} points`, 'success');
setTimeout(() => {
this.currentSentenceIndex++;
this.loadNextSentence();
}, 1500);
} else {
// Some errors
this.errors++;
if (correctCount > 0) {
this.score += 5 * correctCount;
this.showFeedback(`✨ ${correctCount}/${this.blanks.length} correct! +${5 * correctCount} points. Try again.`, 'partial');
} else {
this.showFeedback(`❌ Try again! (${this.errors} errors)`, 'error');
}
}
this.updateUI();
this.onScoreUpdate(this.score);
}
showHint() {
// Show first letter of each empty blank
this.blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
if (!input.value.trim()) {
input.value = blank.word[0];
input.focus();
}
});
this.showFeedback('💡 First letter added!', 'info');
}
skipSentence() {
// Reveal correct answers
this.blanks.forEach((blank, index) => {
const input = document.getElementById(`blank-${index}`);
input.value = blank.word;
input.classList.add('revealed');
});
this.showFeedback('📖 Answers revealed! Next sentence...', 'info');
setTimeout(() => {
this.currentSentenceIndex++;
this.loadNextSentence();
}, 2000);
}
// endGame method removed - game continues indefinitely
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
updateUI() {
document.getElementById('current-question').textContent = this.currentSentenceIndex + 1;
document.getElementById('errors-count').textContent = this.errors;
document.getElementById('score-display').textContent = this.score;
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
destroy() {
this.isRunning = false;
this.container.innerHTML = '';
}
}
// Module registration
window.GameModules = window.GameModules || {};
window.GameModules.FillTheBlank = FillTheBlankGame;

1185
src/games/grammar-discovery.js
View File

File diff suppressed because it is too large Load Diff

781
src/games/letter-discovery.js
View File

@ -1,781 +0,0 @@
// === LETTER DISCOVERY GAME ===
// Discover letters first, then explore words that start with each letter
class LetterDiscovery {
constructor({ container, content, onScoreUpdate, onGameEnd }) {
this.container = container;
this.content = content;
this.onScoreUpdate = onScoreUpdate;
this.onGameEnd = onGameEnd;
// Game state
this.currentPhase = 'letter-discovery'; // letter-discovery, word-exploration, practice
this.currentLetterIndex = 0;
this.discoveredLetters = [];
this.currentLetter = null;
this.currentWordIndex = 0;
this.discoveredWords = [];
this.score = 0;
this.lives = 3;
// Content processing
this.letters = [];
this.letterWords = {}; // Map letter -> words starting with that letter
// Practice system
this.practiceLevel = 1;
this.practiceRound = 0;
this.maxPracticeRounds = 8;
this.practiceCorrectAnswers = 0;
this.practiceErrors = 0;
this.currentPracticeItems = [];
this.injectCSS();
this.extractContent();
this.init();
}
injectCSS() {
if (document.getElementById('letter-discovery-styles')) return;
const styleSheet = document.createElement('style');
styleSheet.id = 'letter-discovery-styles';
styleSheet.textContent = `
.letter-discovery-wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
position: relative;
overflow-y: auto;
}
.letter-discovery-hud {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.1);
padding: 15px 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.hud-group {
display: flex;
align-items: center;
gap: 15px;
}
.hud-item {
color: white;
font-weight: bold;
font-size: 1.1em;
}
.phase-indicator {
background: rgba(255,255,255,0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9em;
color: white;
backdrop-filter: blur(5px);
}
.letter-discovery-main {
background: rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
backdrop-filter: blur(10px);
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.game-content {
width: 100%;
max-width: 900px;
text-align: center;
}
/* Letter Display Styles */
.letter-card {
background: rgba(255,255,255,0.95);
border-radius: 25px;
padding: 60px 40px;
margin: 30px auto;
max-width: 400px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
transform: scale(0.8);
animation: letterAppear 0.8s ease-out forwards;
}
@keyframes letterAppear {
to { transform: scale(1); }
}
.letter-display {
font-size: 8em;
font-weight: bold;
color: #667eea;
margin-bottom: 20px;
text-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-family: 'Arial Black', Arial, sans-serif;
}
.letter-info {
font-size: 1.5em;
color: #333;
margin-bottom: 15px;
}
.letter-pronunciation {
font-size: 1.2em;
color: #666;
font-style: italic;
margin-bottom: 25px;
}
.letter-controls {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
/* Word Exploration Styles */
.word-exploration-header {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
backdrop-filter: blur(5px);
}
.exploring-letter {
font-size: 3em;
color: white;
margin-bottom: 10px;
font-weight: bold;
}
.word-progress {
color: rgba(255,255,255,0.8);
font-size: 1.1em;
}
.word-card {
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 40px 30px;
margin: 25px auto;
max-width: 500px;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
transform: translateY(20px);
animation: wordSlideIn 0.6s ease-out forwards;
}
@keyframes wordSlideIn {
to { transform: translateY(0); }
}
.word-text {
font-size: 2.5em;
color: #667eea;
margin-bottom: 15px;
font-weight: bold;
}
.word-translation {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
}
.word-pronunciation {
font-size: 1.1em;
color: #666;
font-style: italic;
margin-bottom: 10px;
}
.word-type {
font-size: 0.9em;
color: #667eea;
background: rgba(102, 126, 234, 0.1);
padding: 4px 12px;
border-radius: 15px;
display: inline-block;
margin-bottom: 15px;
font-weight: 500;
}
.word-example {
font-size: 1em;
color: #555;
font-style: italic;
padding: 10px 15px;
background: rgba(0, 0, 0, 0.05);
border-left: 3px solid #667eea;
border-radius: 0 8px 8px 0;
margin-bottom: 15px;
}
/* Practice Challenge Styles */
.practice-challenge {
text-align: center;
margin-bottom: 30px;
}
.challenge-text {
font-size: 1.8em;
color: white;
margin-bottom: 25px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.practice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
max-width: 800px;
margin: 0 auto;
}
.practice-option {
background: rgba(255,255,255,0.9);
border: none;
border-radius: 15px;
padding: 20px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
font-weight: 500;
}
.practice-option:hover {
background: rgba(255,255,255,1);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.practice-option.correct {
background: #4CAF50;
color: white;
animation: correctPulse 0.6s ease;
}
.practice-option.incorrect {
background: #F44336;
color: white;
animation: incorrectShake 0.6s ease;
}
@keyframes correctPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes incorrectShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.practice-stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
color: white;
font-size: 1.1em;
}
.stat-item {
text-align: center;
padding: 10px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
backdrop-filter: blur(5px);
}
/* Control Buttons */
.discovery-btn {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 10px;
}
.discovery-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.discovery-btn:active {
transform: translateY(0);
}
.audio-btn {
background: none;
border: none;
font-size: 2em;
cursor: pointer;
color: #667eea;
margin-left: 15px;
transition: all 0.3s ease;
}
.audio-btn:hover {
transform: scale(1.2);
color: #764ba2;
}
/* Completion Message */
.completion-message {
text-align: center;
padding: 40px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
color: white;
}
.completion-title {
font-size: 2.5em;
margin-bottom: 20px;
color: #00ff88;
text-shadow: 0 2px 10px rgba(0,255,136,0.3);
}
.completion-stats {
font-size: 1.3em;
margin-bottom: 30px;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.letter-discovery-wrapper {
padding: 15px;
}
.letter-display {
font-size: 6em;
}
.word-text {
font-size: 2em;
}
.challenge-text {
font-size: 1.5em;
}
.practice-grid {
grid-template-columns: 1fr;
}
}
`;
document.head.appendChild(styleSheet);
}
extractContent() {
logSh('🔍 Letter Discovery - Extracting content...', 'INFO');
// Check for letters in content or rawContent
const letters = this.content.letters || this.content.rawContent?.letters;
if (letters && Object.keys(letters).length > 0) {
this.letters = Object.keys(letters).sort();
this.letterWords = letters;
logSh(`📝 Found ${this.letters.length} letters with words`, 'INFO');
} else {
this.showNoLettersMessage();
return;
}
logSh(`🎯 Letter Discovery ready: ${this.letters.length} letters`, 'INFO');
}
showNoLettersMessage() {
this.container.innerHTML = `
<div class="game-error">
<div class="error-content">
<h2>🔤 Letter Discovery</h2>
<p>❌ No letter structure found in this content.</p>
<p>This game requires content with a predefined letters system.</p>
<p>Try with content that includes letter-based learning material.</p>
<button class="back-btn" onclick="AppNavigation.navigateTo('games')">← Back to Games</button>
</div>
</div>
`;
}
init() {
this.container.innerHTML = `
<div class="letter-discovery-wrapper">
<div class="letter-discovery-hud">
<div class="hud-group">
<div class="hud-item">Score: <span id="score-display">${this.score}</span></div>
<div class="hud-item">Lives: <span id="lives-display">${this.lives}</span></div>
</div>
<div class="phase-indicator" id="phase-indicator">Letter Discovery</div>
<div class="hud-group">
<div class="hud-item">Progress: <span id="progress-display">0/${this.letters.length}</span></div>
</div>
</div>
<div class="letter-discovery-main">
<div class="game-content" id="game-content">
<!-- Dynamic content here -->
</div>
</div>
</div>
`;
this.updateHUD();
}
start() {
this.showLetterCard();
}
updateHUD() {
const scoreDisplay = document.getElementById('score-display');
const livesDisplay = document.getElementById('lives-display');
const progressDisplay = document.getElementById('progress-display');
const phaseIndicator = document.getElementById('phase-indicator');
if (scoreDisplay) scoreDisplay.textContent = this.score;
if (livesDisplay) livesDisplay.textContent = this.lives;
if (this.currentPhase === 'letter-discovery') {
if (progressDisplay) progressDisplay.textContent = `${this.currentLetterIndex}/${this.letters.length}`;
if (phaseIndicator) phaseIndicator.textContent = 'Letter Discovery';
} else if (this.currentPhase === 'word-exploration') {
if (progressDisplay) progressDisplay.textContent = `${this.currentWordIndex}/${this.letterWords[this.currentLetter].length}`;
if (phaseIndicator) phaseIndicator.textContent = `Exploring Letter "${this.currentLetter}"`;
} else if (this.currentPhase === 'practice') {
if (progressDisplay) progressDisplay.textContent = `Round ${this.practiceRound + 1}/${this.maxPracticeRounds}`;
if (phaseIndicator) phaseIndicator.textContent = `Practice - Level ${this.practiceLevel}`;
}
}
showLetterCard() {
if (this.currentLetterIndex >= this.letters.length) {
this.showCompletion();
return;
}
const letter = this.letters[this.currentLetterIndex];
const gameContent = document.getElementById('game-content');
gameContent.innerHTML = `
<div class="letter-card">
<div class="letter-display">${letter}</div>
<div class="letter-info">Letter "${letter}"</div>
<div class="letter-pronunciation">${this.getLetterPronunciation(letter)}</div>
<div class="letter-controls">
<button class="discovery-btn" onclick="window.currentLetterGame.discoverLetter()">
🔍 Discover Letter
</button>
<button class="audio-btn" onclick="window.currentLetterGame.playLetterSound('${letter}')">
🔊
</button>
</div>
</div>
`;
// Store reference for button callbacks
window.currentLetterGame = this;
// Auto-play letter sound
setTimeout(() => this.playLetterSound(letter), 500);
}
getLetterPronunciation(letter) {
// Basic letter pronunciation guide
const pronunciations = {
'A': 'ay', 'B': 'bee', 'C': 'see', 'D': 'dee', 'E': 'ee',
'F': 'ef', 'G': 'gee', 'H': 'aych', 'I': 'eye', 'J': 'jay',
'K': 'kay', 'L': 'el', 'M': 'em', 'N': 'en', 'O': 'oh',
'P': 'pee', 'Q': 'cue', 'R': 'ar', 'S': 'ess', 'T': 'tee',
'U': 'you', 'V': 'vee', 'W': 'double-you', 'X': 'ex', 'Y': 'why', 'Z': 'zee'
};
return pronunciations[letter] || letter.toLowerCase();
}
playLetterSound(letter) {
if (window.SettingsManager && window.SettingsManager.speak) {
const speed = 0.8; // Slower for letters
window.SettingsManager.speak(letter, {
lang: this.content.language || 'en-US',
rate: speed
}).catch(error => {
console.warn('🔊 TTS failed for letter:', error);
});
}
}
discoverLetter() {
const letter = this.letters[this.currentLetterIndex];
this.discoveredLetters.push(letter);
this.score += 10;
this.onScoreUpdate(this.score);
// Start word exploration for this letter
this.currentLetter = letter;
this.currentPhase = 'word-exploration';
this.currentWordIndex = 0;
this.updateHUD();
this.showWordExploration();
}
showWordExploration() {
const words = this.letterWords[this.currentLetter];
if (!words || this.currentWordIndex >= words.length) {
// Finished exploring words for this letter
this.currentPhase = 'letter-discovery';
this.currentLetterIndex++;
this.updateHUD();
this.showLetterCard();
return;
}
const word = words[this.currentWordIndex];
const gameContent = document.getElementById('game-content');
gameContent.innerHTML = `
<div class="word-exploration-header">
<div class="exploring-letter">Letter "${this.currentLetter}"</div>
<div class="word-progress">Word ${this.currentWordIndex + 1} of ${words.length}</div>
</div>
<div class="word-card">
<div class="word-text">${word.word}</div>
<div class="word-translation">${word.translation}</div>
${word.pronunciation ? `<div class="word-pronunciation">[${word.pronunciation}]</div>` : ''}
${word.type ? `<div class="word-type">${word.type}</div>` : ''}
${word.example ? `<div class="word-example">"${word.example}"</div>` : ''}
<div class="letter-controls">
<button class="discovery-btn" onclick="window.currentLetterGame.nextWord()">
➡️ Next Word
</button>
<button class="audio-btn" onclick="window.currentLetterGame.playWordSound('${word.word}')">
🔊
</button>
</div>
</div>
`;
// Add word to discovered list
this.discoveredWords.push(word);
// Auto-play word sound
setTimeout(() => this.playWordSound(word.word), 500);
}
playWordSound(word) {
if (window.SettingsManager && window.SettingsManager.speak) {
const speed = 0.9;
window.SettingsManager.speak(word, {
lang: this.content.language || 'en-US',
rate: speed
}).catch(error => {
console.warn('🔊 TTS failed for word:', error);
});
}
}
nextWord() {
this.currentWordIndex++;
this.score += 5;
this.onScoreUpdate(this.score);
this.updateHUD();
this.showWordExploration();
}
showCompletion() {
const gameContent = document.getElementById('game-content');
const totalWords = Object.values(this.letterWords).reduce((sum, words) => sum + words.length, 0);
gameContent.innerHTML = `
<div class="completion-message">
<div class="completion-title">🎉 All Letters Discovered!</div>
<div class="completion-stats">
Letters Discovered: ${this.discoveredLetters.length}<br>
Words Learned: ${this.discoveredWords.length}<br>
Final Score: ${this.score}
</div>
<div class="letter-controls">
<button class="discovery-btn" onclick="window.currentLetterGame.startPractice()">
🎮 Start Practice
</button>
<button class="discovery-btn" onclick="window.currentLetterGame.restart()">
🔄 Play Again
</button>
</div>
</div>
`;
}
startPractice() {
this.currentPhase = 'practice';
this.practiceLevel = 1;
this.practiceRound = 0;
this.practiceCorrectAnswers = 0;
this.practiceErrors = 0;
// Create mixed practice from all discovered words
this.currentPracticeItems = this.shuffleArray([...this.discoveredWords]);
this.updateHUD();
this.showPracticeChallenge();
}
showPracticeChallenge() {
if (this.practiceRound >= this.maxPracticeRounds) {
this.endPractice();
return;
}
const currentItem = this.currentPracticeItems[this.practiceRound % this.currentPracticeItems.length];
const gameContent = document.getElementById('game-content');
// Generate options (correct + 3 random)
const allWords = this.discoveredWords.filter(w => w.word !== currentItem.word);
const randomOptions = this.shuffleArray([...allWords]).slice(0, 3);
const options = this.shuffleArray([currentItem, ...randomOptions]);
gameContent.innerHTML = `
<div class="practice-challenge">
<div class="challenge-text">What does "${currentItem.word}" mean?</div>
<div class="practice-grid">
${options.map((option, index) => `
<button class="practice-option" onclick="window.currentLetterGame.selectPracticeAnswer(${index}, '${option.word}')">
${option.translation}
</button>
`).join('')}
</div>
<div class="practice-stats">
<div class="stat-item">Correct: ${this.practiceCorrectAnswers}</div>
<div class="stat-item">Errors: ${this.practiceErrors}</div>
<div class="stat-item">Round: ${this.practiceRound + 1}/${this.maxPracticeRounds}</div>
</div>
</div>
`;
// Store correct answer for checking
this.currentCorrectAnswer = currentItem.word;
// Auto-play word
setTimeout(() => this.playWordSound(currentItem.word), 500);
}
selectPracticeAnswer(selectedIndex, selectedWord) {
const buttons = document.querySelectorAll('.practice-option');
const isCorrect = selectedWord === this.currentCorrectAnswer;
if (isCorrect) {
buttons[selectedIndex].classList.add('correct');
this.practiceCorrectAnswers++;
this.score += 10;
this.onScoreUpdate(this.score);
} else {
buttons[selectedIndex].classList.add('incorrect');
this.practiceErrors++;
// Show correct answer
buttons.forEach((btn, index) => {
if (btn.textContent.trim() === this.discoveredWords.find(w => w.word === this.currentCorrectAnswer)?.translation) {
btn.classList.add('correct');
}
});
}
setTimeout(() => {
this.practiceRound++;
this.updateHUD();
this.showPracticeChallenge();
}, 1500);
}
endPractice() {
const accuracy = Math.round((this.practiceCorrectAnswers / this.maxPracticeRounds) * 100);
const gameContent = document.getElementById('game-content');
gameContent.innerHTML = `
<div class="completion-message">
<div class="completion-title">🏆 Practice Complete!</div>
<div class="completion-stats">
Accuracy: ${accuracy}%<br>
Correct Answers: ${this.practiceCorrectAnswers}/${this.maxPracticeRounds}<br>
Final Score: ${this.score}
</div>
<div class="letter-controls">
<button class="discovery-btn" onclick="window.currentLetterGame.restart()">
🔄 Play Again
</button>
</div>
</div>
`;
// End game
setTimeout(() => {
this.onGameEnd(this.score);
}, 3000);
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
restart() {
this.currentPhase = 'letter-discovery';
this.currentLetterIndex = 0;
this.discoveredLetters = [];
this.currentLetter = null;
this.currentWordIndex = 0;
this.discoveredWords = [];
this.score = 0;
this.lives = 3;
this.practiceLevel = 1;
this.practiceRound = 0;
this.practiceCorrectAnswers = 0;
this.practiceErrors = 0;
this.currentPracticeItems = [];
this.updateHUD();
this.start();
}
destroy() {
// Cleanup
if (window.currentLetterGame === this) {
delete window.currentLetterGame;
}
const styleSheet = document.getElementById('letter-discovery-styles');
if (styleSheet) {
styleSheet.remove();
}
}
}
// Register the game module
window.GameModules = window.GameModules || {};
window.GameModules.LetterDiscovery = LetterDiscovery;

495
src/games/memory-match.js
View File

@ -1,495 +0,0 @@
// === MODULE MEMORY MATCH ===
class MemoryMatchGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.cards = [];
this.flippedCards = [];
this.matchedPairs = 0;
this.totalPairs = 8; // 4x4 grid = 16 cards = 8 pairs
this.moves = 0;
this.score = 0;
this.isFlipping = false;
// Extract vocabulary
this.vocabulary = this.extractVocabulary(this.content);
this.init();
}
init() {
// Check if we have enough vocabulary
if (!this.vocabulary || this.vocabulary.length < this.totalPairs) {
logSh('Not enough vocabulary for Memory Match', 'ERROR');
this.showInitError();
return;
}
this.createGameInterface();
this.generateCards();
this.setupEventListeners();
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Error loading</h3>
<p>This content doesn't have enough vocabulary for Memory Match.</p>
<p>The game needs at least ${this.totalPairs} vocabulary pairs.</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back</button>
</div>
`;
}
extractVocabulary(content) {
let vocabulary = [];
logSh('📝 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Use raw module content if available
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
logSh(`✨ ${vocabulary.length} words extracted from ultra-modular vocabulary`, 'INFO');
}
// No other formats supported - ultra-modular only
else {
logSh('⚠️ Content format not supported - ultra-modular format required', 'WARN');
}
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Filter and validate vocabulary for ultra-modular format
vocabulary = vocabulary.filter(item =>
item &&
typeof item.original === 'string' &&
typeof item.translation === 'string' &&
item.original.trim() !== '' &&
item.translation.trim() !== ''
);
if (vocabulary.length === 0) {
logSh('❌ No valid vocabulary found', 'ERROR');
// Demo vocabulary as fallback
vocabulary = [
{ original: "cat", translation: "chat" },
{ original: "dog", translation: "chien" },
{ original: "house", translation: "maison" },
{ original: "car", translation: "voiture" },
{ original: "book", translation: "livre" },
{ original: "water", translation: "eau" },
{ original: "food", translation: "nourriture" },
{ original: "friend", translation: "ami" }
];
logSh('🚨 Using demo vocabulary', 'WARN');
}
logSh(`✅ Memory Match: ${vocabulary.length} vocabulary items finalized`, 'INFO');
return vocabulary;
}
createGameInterface() {
this.container.innerHTML = `
<div class="memory-match-wrapper">
<!-- Game Stats -->
<div class="game-stats">
<div class="stat-item">
<span class="stat-label">Moves:</span>
<span id="moves-counter">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Pairs:</span>
<span id="pairs-counter">0 / ${this.totalPairs}</span>
</div>
<div class="stat-item">
<span class="stat-label">Score:</span>
<span id="score-counter">0</span>
</div>
</div>
<!-- Game Grid -->
<div class="memory-grid" id="memory-grid">
<!-- Cards will be generated here -->
</div>
<!-- Game Controls -->
<div class="game-controls">
<button class="control-btn secondary" id="restart-btn">🔄 Restart</button>
<button class="control-btn secondary" id="hint-btn">💡 Hint</button>
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Click cards to flip them and find matching pairs!
</div>
</div>
</div>
`;
}
generateCards() {
// Select random vocabulary pairs
const selectedVocab = this.vocabulary
.sort(() => Math.random() - 0.5)
.slice(0, this.totalPairs);
// Create card pairs
this.cards = [];
selectedVocab.forEach((item, index) => {
// English card
this.cards.push({
id: `en_${index}`,
content: item.original,
type: 'english',
pairId: index,
isFlipped: false,
isMatched: false
});
// French card
this.cards.push({
id: `fr_${index}`,
content: item.translation,
type: 'french',
pairId: index,
isFlipped: false,
isMatched: false
});
});
// Shuffle cards
this.cards.sort(() => Math.random() - 0.5);
// Render cards
this.renderCards();
}
renderCards() {
const grid = document.getElementById('memory-grid');
grid.innerHTML = '';
this.cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'memory-card';
cardElement.dataset.cardIndex = index;
cardElement.innerHTML = `
<div class="card-inner">
<div class="card-front">
<span class="card-icon">🎯</span>
</div>
<div class="card-back">
<span class="card-content">${card.content}</span>
</div>
</div>
`;
cardElement.addEventListener('click', () => this.flipCard(index));
grid.appendChild(cardElement);
});
}
setupEventListeners() {
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
document.getElementById('hint-btn').addEventListener('click', () => this.showHint());
}
flipCard(cardIndex) {
if (this.isFlipping) return;
const card = this.cards[cardIndex];
if (card.isFlipped || card.isMatched) return;
// Flip the card
card.isFlipped = true;
this.updateCardDisplay(cardIndex);
this.flippedCards.push(cardIndex);
if (this.flippedCards.length === 2) {
this.moves++;
this.updateStats();
this.checkMatch();
}
}
updateCardDisplay(cardIndex) {
const cardElement = document.querySelector(`[data-card-index="${cardIndex}"]`);
const card = this.cards[cardIndex];
if (card.isFlipped || card.isMatched) {
cardElement.classList.add('flipped');
} else {
cardElement.classList.remove('flipped');
}
if (card.isMatched) {
cardElement.classList.add('matched');
}
}
checkMatch() {
this.isFlipping = true;
setTimeout(() => {
const [firstIndex, secondIndex] = this.flippedCards;
const firstCard = this.cards[firstIndex];
const secondCard = this.cards[secondIndex];
if (firstCard.pairId === secondCard.pairId) {
// Match found!
firstCard.isMatched = true;
secondCard.isMatched = true;
this.updateCardDisplay(firstIndex);
this.updateCardDisplay(secondIndex);
this.matchedPairs++;
this.score += 100;
this.showFeedback('Great match! 🎉', 'success');
// Trigger success animation
this.triggerSuccessAnimation(firstIndex, secondIndex);
if (this.matchedPairs === this.totalPairs) {
setTimeout(() => this.gameComplete(), 800);
}
} else {
// No match, flip back and apply penalty
firstCard.isFlipped = false;
secondCard.isFlipped = false;
this.updateCardDisplay(firstIndex);
this.updateCardDisplay(secondIndex);
// Apply penalty but don't go below 0
this.score = Math.max(0, this.score - 10);
this.showFeedback('Try again! (-10 points)', 'warning');
}
this.flippedCards = [];
this.isFlipping = false;
this.updateStats();
}, 1000);
}
showHint() {
if (this.flippedCards.length > 0) {
this.showFeedback('Finish your current move first!', 'warning');
return;
}
// Find first unmatched pair
const unmatchedCards = this.cards.filter(card => !card.isMatched);
if (unmatchedCards.length === 0) return;
// Group by pairId
const pairs = {};
unmatchedCards.forEach((card, index) => {
const actualIndex = this.cards.indexOf(card);
if (!pairs[card.pairId]) {
pairs[card.pairId] = [];
}
pairs[card.pairId].push(actualIndex);
});
// Find first complete pair
const completePair = Object.values(pairs).find(pair => pair.length === 2);
if (completePair) {
// Briefly show the pair
completePair.forEach(cardIndex => {
const cardElement = document.querySelector(`[data-card-index="${cardIndex}"]`);
cardElement.classList.add('hint');
});
setTimeout(() => {
completePair.forEach(cardIndex => {
const cardElement = document.querySelector(`[data-card-index="${cardIndex}"]`);
cardElement.classList.remove('hint');
});
}, 2000);
this.showFeedback('Hint shown for 2 seconds!', 'info');
}
}
updateStats() {
document.getElementById('moves-counter').textContent = this.moves;
document.getElementById('pairs-counter').textContent = `${this.matchedPairs} / ${this.totalPairs}`;
document.getElementById('score-counter').textContent = this.score;
this.onScoreUpdate(this.score);
}
gameComplete() {
// Calculate bonus based on moves
const perfectMoves = this.totalPairs;
if (this.moves <= perfectMoves + 5) {
this.score += 200; // Efficiency bonus
}
this.updateStats();
this.showFeedback('🎉 Congratulations! All pairs found!', 'success');
setTimeout(() => {
this.onGameEnd(this.score);
}, 2000);
}
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
start() {
logSh('🧠 Memory Match: Starting', 'INFO');
this.showFeedback('Find matching English-French pairs!', 'info');
}
restart() {
logSh('🔄 Memory Match: Restarting', 'INFO');
this.reset();
this.start();
}
reset() {
this.flippedCards = [];
this.matchedPairs = 0;
this.moves = 0;
this.score = 0;
this.isFlipping = false;
this.generateCards();
this.updateStats();
}
triggerSuccessAnimation(cardIndex1, cardIndex2) {
// Get card elements
const card1 = document.querySelector(`[data-card-index="${cardIndex1}"]`);
const card2 = document.querySelector(`[data-card-index="${cardIndex2}"]`);
if (!card1 || !card2) return;
// Add success animation class
card1.classList.add('success-animation');
card2.classList.add('success-animation');
// Create sparkle particles for both cards
this.createSparkleParticles(card1);
this.createSparkleParticles(card2);
// Remove animation class after animation completes
setTimeout(() => {
card1.classList.remove('success-animation');
card2.classList.remove('success-animation');
}, 800);
}
createSparkleParticles(cardElement) {
const rect = cardElement.getBoundingClientRect();
// Create 4 sparkle particles around the card
for (let i = 1; i <= 4; i++) {
const particle = document.createElement('div');
particle.className = `success-particle particle-${i}`;
// Position relative to card
particle.style.position = 'fixed';
particle.style.left = (rect.left + rect.width / 2) + 'px';
particle.style.top = (rect.top + rect.height / 2) + 'px';
particle.style.pointerEvents = 'none';
particle.style.zIndex = '1000';
document.body.appendChild(particle);
// Remove particle after animation
setTimeout(() => {
if (particle.parentNode) {
particle.parentNode.removeChild(particle);
}
}, 1200);
}
}
destroy() {
this.container.innerHTML = '';
}
}
// Module registration
window.GameModules = window.GameModules || {};
window.GameModules.MemoryMatch = MemoryMatchGame;

529
src/games/quiz-game.js
View File

@ -1,529 +0,0 @@
// === MODULE QUIZ GAME ===
class QuizGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.vocabulary = [];
this.currentQuestion = 0;
this.totalQuestions = 10;
this.score = 0;
this.correctAnswers = 0;
this.currentQuestionData = null;
this.hasAnswered = false;
this.quizDirection = 'original_to_translation'; // 'original_to_translation' or 'translation_to_original'
// Extract vocabulary and additional words from texts/stories
this.vocabulary = this.extractVocabulary(this.content);
this.allWords = this.extractAllWords(this.content);
this.init();
}
init() {
// Check if we have enough vocabulary
if (!this.vocabulary || this.vocabulary.length < 6) {
logSh('Not enough vocabulary for Quiz Game', 'ERROR');
this.showInitError();
return;
}
// Adjust total questions based on available vocabulary
this.totalQuestions = Math.min(this.totalQuestions, this.vocabulary.length);
this.createGameInterface();
this.generateQuestion();
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Error loading</h3>
<p>This content doesn't have enough vocabulary for Quiz Game.</p>
<p>The game needs at least 6 vocabulary items.</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back to Games</button>
</div>
`;
}
extractVocabulary(content) {
let vocabulary = [];
logSh('🔍 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Priority 1: Use raw module content (simple format)
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Priority 2: Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
logSh(`✨ ${vocabulary.length} words extracted from ultra-modular vocabulary`, 'INFO');
}
// No other formats supported - ultra-modular only
else {
logSh('⚠️ Content format not supported - ultra-modular format required', 'WARN');
}
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Validation and cleanup for ultra-modular format
vocabulary = vocabulary.filter(word =>
word &&
typeof word.original === 'string' &&
typeof word.translation === 'string' &&
word.original.trim() !== '' &&
word.translation.trim() !== ''
);
if (vocabulary.length === 0) {
logSh('❌ No valid vocabulary found', 'ERROR');
// Demo vocabulary as last resort
vocabulary = [
{ original: 'hello', translation: 'bonjour', category: 'greetings' },
{ original: 'goodbye', translation: 'au revoir', category: 'greetings' },
{ original: 'thank you', translation: 'merci', category: 'greetings' },
{ original: 'cat', translation: 'chat', category: 'animals' },
{ original: 'dog', translation: 'chien', category: 'animals' },
{ original: 'house', translation: 'maison', category: 'objects' },
{ original: 'car', translation: 'voiture', category: 'objects' },
{ original: 'book', translation: 'livre', category: 'objects' }
];
logSh('🚨 Using demo vocabulary', 'WARN');
}
// Shuffle vocabulary for random questions
vocabulary = this.shuffleArray(vocabulary);
logSh(`✅ Quiz Game: ${vocabulary.length} vocabulary words finalized`, 'INFO');
return vocabulary;
}
extractAllWords(content) {
let allWords = [];
// Add vocabulary words first
allWords = [...this.vocabulary];
// Extract from stories/texts
if (content.rawContent?.story?.chapters) {
content.rawContent.story.chapters.forEach(chapter => {
if (chapter.sentences) {
chapter.sentences.forEach(sentence => {
if (sentence.words && Array.isArray(sentence.words)) {
sentence.words.forEach(wordObj => {
if (wordObj.word && wordObj.translation) {
allWords.push({
original: wordObj.word,
translation: wordObj.translation,
type: wordObj.type || 'word',
pronunciation: wordObj.pronunciation
});
}
});
}
});
}
});
}
// Extract from additional stories (like WTA1B1)
if (content.rawContent?.additionalStories) {
content.rawContent.additionalStories.forEach(story => {
if (story.chapters) {
story.chapters.forEach(chapter => {
if (chapter.sentences) {
chapter.sentences.forEach(sentence => {
if (sentence.words && Array.isArray(sentence.words)) {
sentence.words.forEach(wordObj => {
if (wordObj.word && wordObj.translation) {
allWords.push({
original: wordObj.word,
translation: wordObj.translation,
type: wordObj.type || 'word',
pronunciation: wordObj.pronunciation
});
}
});
}
});
}
});
}
});
}
// Remove duplicates based on original word
const uniqueWords = [];
const seenWords = new Set();
allWords.forEach(word => {
const key = word.original.toLowerCase();
if (!seenWords.has(key)) {
seenWords.add(key);
uniqueWords.push(word);
}
});
logSh(`📚 Extracted ${uniqueWords.length} total words for quiz options`, 'INFO');
return uniqueWords;
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
createGameInterface() {
this.container.innerHTML = `
<div class="quiz-game-wrapper">
<!-- Top Controls - Restart button moved to top left -->
<div class="quiz-top-controls">
<button class="control-btn secondary restart-top" id="restart-btn">🔄 Restart</button>
</div>
<!-- Progress Bar -->
<div class="quiz-progress">
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="progress-text">
<span id="question-counter">1 / ${this.totalQuestions}</span>
<span id="score-display">Score: 0</span>
</div>
</div>
<!-- Question Area -->
<div class="question-area">
<div class="question-text" id="question-text">
Loading question...
</div>
</div>
<!-- Options Area -->
<div class="options-area" id="options-area">
<!-- Options will be generated here -->
</div>
<!-- Controls -->
<div class="quiz-controls">
<button class="control-btn primary" id="next-btn" style="display: none;">Next Question →</button>
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Choose the correct translation!
</div>
</div>
</div>
`;
// Add CSS for top controls
const style = document.createElement('style');
style.textContent = `
.quiz-top-controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}
.restart-top {
background: rgba(255, 255, 255, 0.9) !important;
border: 2px solid #ccc !important;
color: #666 !important;
font-size: 12px !important;
padding: 8px 12px !important;
border-radius: 6px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.restart-top:hover {
background: rgba(255, 255, 255, 1) !important;
border-color: #999 !important;
color: #333 !important;
}
`;
document.head.appendChild(style);
this.setupEventListeners();
}
setupEventListeners() {
document.getElementById('next-btn').addEventListener('click', () => this.nextQuestion());
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
}
generateQuestion() {
if (this.currentQuestion >= this.totalQuestions) {
this.gameComplete();
return;
}
this.hasAnswered = false;
// Get current vocabulary item
const correctAnswer = this.vocabulary[this.currentQuestion];
// Randomly choose quiz direction
this.quizDirection = Math.random() < 0.5 ? 'original_to_translation' : 'translation_to_original';
let questionText, correctAnswerText, sourceForWrongAnswers;
if (this.quizDirection === 'original_to_translation') {
questionText = correctAnswer.original;
correctAnswerText = correctAnswer.translation;
sourceForWrongAnswers = 'translation';
} else {
questionText = correctAnswer.translation;
correctAnswerText = correctAnswer.original;
sourceForWrongAnswers = 'original';
}
// Generate 5 wrong answers from allWords (which includes story words)
const availableWords = this.allWords.length >= 6 ? this.allWords : this.vocabulary;
const wrongAnswers = availableWords
.filter(item => item !== correctAnswer)
.sort(() => Math.random() - 0.5)
.slice(0, 5)
.map(item => sourceForWrongAnswers === 'translation' ? item.translation : item.original);
// Combine and shuffle all options (1 correct + 5 wrong = 6 total)
const allOptions = [correctAnswerText, ...wrongAnswers].sort(() => Math.random() - 0.5);
this.currentQuestionData = {
question: questionText,
correctAnswer: correctAnswerText,
options: allOptions,
direction: this.quizDirection
};
this.renderQuestion();
this.updateProgress();
}
renderQuestion() {
const { question, options } = this.currentQuestionData;
// Update question text with direction indicator
const direction = this.currentQuestionData.direction;
const directionText = direction === 'original_to_translation' ?
'What is the translation of' : 'What is the original word for';
document.getElementById('question-text').innerHTML = `
${directionText} "<strong>${question}</strong>"?
`;
// Clear and generate options
const optionsArea = document.getElementById('options-area');
optionsArea.innerHTML = '';
options.forEach((option, index) => {
const optionButton = document.createElement('button');
optionButton.className = 'quiz-option';
optionButton.textContent = option;
optionButton.addEventListener('click', () => this.selectAnswer(option, optionButton));
optionsArea.appendChild(optionButton);
});
// Hide next button
document.getElementById('next-btn').style.display = 'none';
}
selectAnswer(selectedAnswer, buttonElement) {
if (this.hasAnswered) return;
this.hasAnswered = true;
const isCorrect = selectedAnswer === this.currentQuestionData.correctAnswer;
// Disable all option buttons and show results
const allOptions = document.querySelectorAll('.quiz-option');
allOptions.forEach(btn => {
btn.disabled = true;
if (btn.textContent === this.currentQuestionData.correctAnswer) {
btn.classList.add('correct');
} else if (btn === buttonElement && !isCorrect) {
btn.classList.add('wrong');
} else if (btn !== buttonElement && btn.textContent !== this.currentQuestionData.correctAnswer) {
btn.classList.add('disabled');
}
});
// Update score and feedback
if (isCorrect) {
this.correctAnswers++;
this.score += 10;
this.showFeedback('✅ Correct! Well done!', 'success');
} else {
this.score = Math.max(0, this.score - 5);
this.showFeedback(`❌ Wrong! Correct answer: "${this.currentQuestionData.correctAnswer}"`, 'error');
}
this.updateScore();
// Show next button or finish
if (this.currentQuestion < this.totalQuestions - 1) {
document.getElementById('next-btn').style.display = 'block';
} else {
setTimeout(() => this.gameComplete(), 250);
}
}
nextQuestion() {
this.currentQuestion++;
this.generateQuestion();
}
updateProgress() {
const progressFill = document.getElementById('progress-fill');
const progressPercent = ((this.currentQuestion + 1) / this.totalQuestions) * 100;
progressFill.style.width = `${progressPercent}%`;
document.getElementById('question-counter').textContent =
`${this.currentQuestion + 1} / ${this.totalQuestions}`;
}
updateScore() {
document.getElementById('score-display').textContent = `Score: ${this.score}`;
this.onScoreUpdate(this.score);
}
gameComplete() {
const accuracy = Math.round((this.correctAnswers / this.totalQuestions) * 100);
// Bonus for high accuracy
if (accuracy >= 90) {
this.score += 50; // Excellence bonus
} else if (accuracy >= 70) {
this.score += 20; // Good performance bonus
}
this.updateScore();
this.showFeedback(
`🎉 Quiz completed! ${this.correctAnswers}/${this.totalQuestions} correct (${accuracy}%)`,
'success'
);
setTimeout(() => {
this.onGameEnd(this.score);
}, 3000);
}
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
start() {
logSh('❓ Quiz Game: Starting', 'INFO');
this.showFeedback('Choose the correct translation for each word!', 'info');
}
restart() {
logSh('🔄 Quiz Game: Restarting', 'INFO');
this.reset();
this.start();
}
reset() {
this.currentQuestion = 0;
this.score = 0;
this.correctAnswers = 0;
this.hasAnswered = false;
this.currentQuestionData = null;
// Re-shuffle vocabulary
this.vocabulary = this.shuffleArray(this.vocabulary);
this.generateQuestion();
this.updateScore();
}
destroy() {
this.container.innerHTML = '';
}
}
// Module registration
window.GameModules = window.GameModules || {};
window.GameModules.QuizGame = QuizGame;

1001
src/games/river-run.js
View File

File diff suppressed because it is too large Load Diff

979
src/games/story-builder.js
View File

@ -1,979 +0,0 @@
// === STORY BUILDER GAME - STORY CONSTRUCTOR ===
class StoryBuilderGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.contentEngine = options.contentEngine;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.score = 0;
this.currentStory = [];
this.availableElements = [];
this.storyTarget = null;
this.gameMode = 'vocabulary'; // 'vocabulary', 'sequence', 'dialogue', 'scenario'
// Extract vocabulary using ultra-modular format
this.vocabulary = this.extractVocabulary(this.content);
this.wordsByType = this.groupVocabularyByType(this.vocabulary);
// Configuration
this.maxElements = 6;
this.timeLimit = 180; // 3 minutes
this.timeLeft = this.timeLimit;
this.isRunning = false;
// Timers
this.gameTimer = null;
this.init();
}
init() {
// Check if we have enough vocabulary
if (!this.vocabulary || this.vocabulary.length < 6) {
logSh('Not enough vocabulary for Story Builder', 'ERROR');
this.showInitError();
return;
}
this.createGameBoard();
this.setupEventListeners();
this.loadStoryContent();
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Error loading</h3>
<p>This content doesn't have enough vocabulary for Story Builder.</p>
<p>The game needs at least 6 vocabulary words with types (noun, verb, adjective, etc.).</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back</button>
</div>
`;
}
createGameBoard() {
this.container.innerHTML = `
<div class="story-builder-wrapper">
<!-- Mode Selection -->
<div class="mode-selector">
<button class="mode-btn active" data-mode="vocabulary">
📚 Vocabulary Story
</button>
<button class="mode-btn" data-mode="sequence">
📝 Sequence
</button>
<button class="mode-btn" data-mode="dialogue">
💬 Dialogue
</button>
<button class="mode-btn" data-mode="scenario">
🎭 Scenario
</button>
</div>
<!-- Game Info -->
<div class="game-info">
<div class="story-objective" id="story-objective">
<h3>Objective:</h3>
<p id="objective-text">Choose a mode and let's start!</p>
</div>
<div class="game-stats">
<div class="stat-item">
<span class="stat-value" id="time-left">${this.timeLeft}</span>
<span class="stat-label">Time</span>
</div>
<div class="stat-item">
<span class="stat-value" id="story-progress">0/${this.maxElements}</span>
<span class="stat-label">Progress</span>
</div>
</div>
</div>
<!-- Story Construction Area -->
<div class="story-construction">
<div class="story-target" id="story-target">
<!-- Story to build -->
</div>
<div class="drop-zone" id="drop-zone">
<div class="drop-hint">Drag elements here to build your story</div>
</div>
</div>
<!-- Available Elements -->
<div class="elements-bank" id="elements-bank">
<!-- Available elements -->
</div>
<!-- Game Controls -->
<div class="game-controls">
<button class="control-btn" id="start-btn">🎮 Start</button>
<button class="control-btn" id="check-btn" disabled>✅ Check</button>
<button class="control-btn" id="hint-btn" disabled>💡 Hint</button>
<button class="control-btn" id="restart-btn">🔄 Restart</button>
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Select a mode to start building stories!
</div>
</div>
</div>
`;
}
setupEventListeners() {
// Mode selection
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
if (this.isRunning) return;
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.gameMode = btn.dataset.mode;
this.loadStoryContent();
});
});
// Game controls
document.getElementById('start-btn').addEventListener('click', () => this.start());
document.getElementById('check-btn').addEventListener('click', () => this.checkStory());
document.getElementById('hint-btn').addEventListener('click', () => this.showHint());
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
// Drag and Drop setup
this.setupDragAndDrop();
}
loadStoryContent() {
logSh('🎮 Loading story content for mode:', this.gameMode, 'INFO');
switch (this.gameMode) {
case 'vocabulary':
this.setupVocabularyMode();
break;
case 'sequence':
this.setupSequenceMode();
break;
case 'dialogue':
this.setupDialogueMode();
break;
case 'scenario':
this.setupScenarioMode();
break;
default:
this.setupVocabularyMode();
}
}
extractVocabulary(content) {
let vocabulary = [];
logSh('📝 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Use raw module content if available
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// No legacy fallback - ultra-modular only
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// No legacy fallback - ultra-modular only
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Filter out invalid entries
vocabulary = vocabulary.filter(item =>
item &&
typeof item.original === 'string' &&
typeof item.translation === 'string' &&
item.original.trim() !== '' &&
item.translation.trim() !== ''
);
logSh(`📊 Finalized ${vocabulary.length} vocabulary items`, 'INFO');
return vocabulary;
}
groupVocabularyByType(vocabulary) {
const grouped = {};
vocabulary.forEach(word => {
const type = word.type || 'general';
if (!grouped[type]) {
grouped[type] = [];
}
grouped[type].push(word);
});
logSh('📊 Words grouped by type:', Object.keys(grouped).map(type => `${type}: ${grouped[type].length}`).join(', '), 'INFO');
return grouped;
}
setupVocabularyMode() {
if (Object.keys(this.wordsByType).length === 0) {
this.setupFallbackContent();
return;
}
// Create a story template using different word types
this.storyTarget = this.createStoryTemplate();
this.availableElements = this.selectWordsForStory();
document.getElementById('objective-text').textContent =
'Build a coherent story using these words! Use different types: nouns, verbs, adjectives...';
}
createStoryTemplate() {
const types = Object.keys(this.wordsByType);
// Common story templates based on available word types
const templates = [
{ pattern: ['noun', 'verb', 'adjective', 'noun'], name: 'Simple Story' },
{ pattern: ['adjective', 'noun', 'verb', 'noun'], name: 'Descriptive Story' },
{ pattern: ['noun', 'verb', 'adjective', 'noun', 'verb'], name: 'Action Story' },
{ pattern: ['article', 'adjective', 'noun', 'verb', 'adverb'], name: 'Rich Story' }
];
// Find the best template based on available word types
const availableTemplate = templates.find(template =>
template.pattern.every(type =>
types.includes(type) && this.wordsByType[type].length > 0
)
);
if (availableTemplate) {
return {
template: availableTemplate,
requiredTypes: availableTemplate.pattern
};
}
// Fallback: use available types
return {
template: { pattern: types.slice(0, 4), name: 'Custom Story' },
requiredTypes: types.slice(0, 4)
};
}
selectWordsForStory() {
const words = [];
if (this.storyTarget && this.storyTarget.requiredTypes) {
// Select words for each required type
this.storyTarget.requiredTypes.forEach(type => {
if (this.wordsByType[type] && this.wordsByType[type].length > 0) {
// Add 2-3 words of each type for choice
const typeWords = this.shuffleArray([...this.wordsByType[type]]).slice(0, 3);
words.push(...typeWords);
}
});
}
// Add some random extra words for distraction
const allTypes = Object.keys(this.wordsByType);
allTypes.forEach(type => {
if (this.wordsByType[type] && this.wordsByType[type].length > 0) {
const extraWords = this.shuffleArray([...this.wordsByType[type]]).slice(0, 1);
words.push(...extraWords);
}
});
// Remove duplicates and shuffle
const uniqueWords = words.filter((word, index, self) =>
self.findIndex(w => w.original === word.original) === index
);
return this.shuffleArray(uniqueWords).slice(0, this.maxElements);
}
setupSequenceMode() {
// Use vocabulary to create a logical sequence
const actionWords = this.wordsByType.verb || [];
const objectWords = this.wordsByType.noun || [];
if (actionWords.length >= 2 && objectWords.length >= 2) {
this.storyTarget = {
type: 'sequence',
steps: [
{ order: 1, text: `First: ${actionWords[0].original}`, word: actionWords[0] },
{ order: 2, text: `Then: ${actionWords[1].original}`, word: actionWords[1] },
{ order: 3, text: `With: ${objectWords[0].original}`, word: objectWords[0] },
{ order: 4, text: `Finally: ${objectWords[1].original}`, word: objectWords[1] }
]
};
this.availableElements = this.shuffleArray([...this.storyTarget.steps]);
document.getElementById('objective-text').textContent =
'Put these actions in logical order!';
} else {
this.setupVocabularyMode(); // Fallback
}
}
setupDialogueMode() {
// Create a simple dialogue using available vocabulary
const greetings = this.wordsByType.greeting || [];
const nouns = this.wordsByType.noun || [];
const verbs = this.wordsByType.verb || [];
if (greetings.length >= 1 && (nouns.length >= 2 || verbs.length >= 2)) {
const dialogue = [
{ speaker: 'A', text: greetings[0].original, word: greetings[0] },
{ speaker: 'B', text: greetings[0].translation, word: greetings[0] }
];
if (verbs.length >= 1) {
dialogue.push({ speaker: 'A', text: verbs[0].original, word: verbs[0] });
}
if (nouns.length >= 1) {
dialogue.push({ speaker: 'B', text: nouns[0].original, word: nouns[0] });
}
this.storyTarget = { type: 'dialogue', conversation: dialogue };
this.availableElements = this.shuffleArray([...dialogue]);
document.getElementById('objective-text').textContent =
'Reconstruct this dialogue in the right order!';
} else {
this.setupVocabularyMode(); // Fallback
}
}
setupScenarioMode() {
// Create a scenario using mixed vocabulary types
const allWords = Object.values(this.wordsByType).flat();
if (allWords.length >= 4) {
const scenario = {
context: 'Daily Life',
elements: this.shuffleArray(allWords).slice(0, 6)
};
this.storyTarget = { type: 'scenario', scenario };
this.availableElements = [...scenario.elements];
document.getElementById('objective-text').textContent =
`Create a story about: "${scenario.context}" using these words!`;
} else {
this.setupVocabularyMode(); // Fallback
}
}
setupFallbackContent() {
// Use any available vocabulary
if (this.vocabulary.length >= 4) {
this.availableElements = this.shuffleArray([...this.vocabulary]).slice(0, 6);
this.gameMode = 'vocabulary';
document.getElementById('objective-text').textContent =
'Build a story with these words!';
} else {
document.getElementById('objective-text').textContent =
'Not enough vocabulary available. Please select different content.';
}
}
start() {
if (this.isRunning || this.availableElements.length === 0) return;
this.isRunning = true;
this.score = 0;
this.currentStory = [];
this.timeLeft = this.timeLimit;
this.renderElements();
this.startTimer();
this.updateUI();
document.getElementById('start-btn').disabled = true;
document.getElementById('check-btn').disabled = false;
document.getElementById('hint-btn').disabled = false;
this.showFeedback('Drag the elements in order to build your story!', 'info');
}
renderElements() {
const elementsBank = document.getElementById('elements-bank');
elementsBank.innerHTML = '<h4>Available elements:</h4>';
this.availableElements.forEach((element, index) => {
const elementDiv = this.createElement(element, index);
elementsBank.appendChild(elementDiv);
});
}
createElement(element, index) {
const div = document.createElement('div');
div.className = 'story-element';
div.draggable = true;
div.dataset.index = index;
// Ultra-modular format display
if (element.original && element.translation) {
// Vocabulary word with type
div.innerHTML = `
<div class="element-content">
<div class="original">${element.original}</div>
<div class="translation">${element.translation}</div>
${element.type ? `<div class="word-type">${element.type}</div>` : ''}
</div>
`;
} else if (element.text || element.original) {
// Dialogue or sequence element
div.innerHTML = `
<div class="element-content">
<div class="original">${element.text || element.original}</div>
${element.translation ? `<div class="translation">${element.translation}</div>` : ''}
${element.speaker ? `<div class="speaker">${element.speaker}:</div>` : ''}
</div>
`;
} else if (element.word) {
// Element containing a word object
div.innerHTML = `
<div class="element-content">
<div class="original">${element.word.original}</div>
<div class="translation">${element.word.translation}</div>
${element.word.type ? `<div class="word-type">${element.word.type}</div>` : ''}
</div>
`;
} else if (typeof element === 'string') {
// Simple text
div.innerHTML = `<div class="element-content">${element}</div>`;
}
// Add type-based styling
if (element.type) {
div.classList.add(`type-${element.type}`);
}
return div;
}
setupDragAndDrop() {
let draggedElement = null;
document.addEventListener('dragstart', (e) => {
if (e.target.classList.contains('story-element')) {
draggedElement = e.target;
e.target.style.opacity = '0.5';
}
});
document.addEventListener('dragend', (e) => {
if (e.target.classList.contains('story-element')) {
e.target.style.opacity = '1';
draggedElement = null;
}
});
const dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
if (draggedElement && this.isRunning) {
this.addToStory(draggedElement);
}
});
}
addToStory(elementDiv) {
const index = parseInt(elementDiv.dataset.index);
const element = this.availableElements[index];
// Add to the story
this.currentStory.push({ element, originalIndex: index });
// Create element in construction zone
const storyElement = elementDiv.cloneNode(true);
storyElement.classList.add('in-story');
storyElement.draggable = false;
// Ajouter bouton de suppression
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-element';
removeBtn.innerHTML = '×';
removeBtn.onclick = () => this.removeFromStory(storyElement, element);
storyElement.appendChild(removeBtn);
document.getElementById('drop-zone').appendChild(storyElement);
// Masquer l'élément original
elementDiv.style.display = 'none';
this.updateProgress();
}
removeFromStory(storyElement, element) {
// Remove from story
this.currentStory = this.currentStory.filter(item => item.element !== element);
// Supprimer visuellement
storyElement.remove();
// Réafficher l'élément original
const originalElement = document.querySelector(`[data-index="${this.availableElements.indexOf(element)}"]`);
if (originalElement) {
originalElement.style.display = 'block';
}
this.updateProgress();
}
checkStory() {
if (this.currentStory.length === 0) {
this.showFeedback('Add at least one element to your story!', 'error');
return;
}
const isCorrect = this.validateStory();
if (isCorrect) {
this.score += this.currentStory.length * 10;
this.showFeedback('Bravo! Perfect story! 🎉', 'success');
this.onScoreUpdate(this.score);
setTimeout(() => {
this.nextChallenge();
}, 2000);
} else {
this.score = Math.max(0, this.score - 5);
this.showFeedback('Almost! Check the order of your story 🤔', 'warning');
this.onScoreUpdate(this.score);
}
}
validateStory() {
switch (this.gameMode) {
case 'vocabulary':
return this.validateVocabularyStory();
case 'sequence':
return this.validateSequence();
case 'dialogue':
return this.validateDialogue();
case 'scenario':
return this.validateScenario();
default:
return true; // Free mode
}
}
validateVocabularyStory() {
if (this.currentStory.length < 3) return false;
// Check for variety in word types
const typesUsed = new Set();
this.currentStory.forEach(item => {
const element = item.element;
if (element.type) {
typesUsed.add(element.type);
}
});
// Require at least 2 different word types for a good story
return typesUsed.size >= 2;
}
validateSequence() {
if (!this.storyTarget?.steps) return true;
const expectedOrder = this.storyTarget.steps.sort((a, b) => a.order - b.order);
if (this.currentStory.length !== expectedOrder.length) return false;
return this.currentStory.every((item, index) => {
const expected = expectedOrder[index];
return item.element.order === expected.order;
});
}
validateDialogue() {
// Flexible dialogue validation (logical order of replies)
return this.currentStory.length >= 2;
}
validateScenario() {
// Flexible scenario validation (contextual coherence)
return this.currentStory.length >= 3;
}
showHint() {
switch (this.gameMode) {
case 'vocabulary':
const typesAvailable = Object.keys(this.wordsByType);
this.showFeedback(`Tip: Try using different word types: ${typesAvailable.join(', ')}`, 'info');
break;
case 'sequence':
if (this.storyTarget?.steps) {
const nextStep = this.storyTarget.steps.find(step =>
!this.currentStory.some(item => item.element.order === step.order)
);
if (nextStep) {
this.showFeedback(`Next step: "${nextStep.text}"`, 'info');
}
}
break;
case 'dialogue':
this.showFeedback('Think about the natural order of a conversation!', 'info');
break;
case 'scenario':
this.showFeedback('Create a coherent story in this context!', 'info');
break;
default:
this.showFeedback('Tip: Think about the logical order of events!', 'info');
}
}
nextChallenge() {
// Load a new challenge
this.loadStoryContent();
this.currentStory = [];
document.getElementById('drop-zone').innerHTML = '<div class="drop-hint">Drag elements here to build your story</div>';
this.renderElements();
this.updateProgress();
}
startTimer() {
this.gameTimer = setInterval(() => {
this.timeLeft--;
this.updateUI();
if (this.timeLeft <= 0) {
this.endGame();
}
}, 1000);
}
endGame() {
this.isRunning = false;
if (this.gameTimer) {
clearInterval(this.gameTimer);
this.gameTimer = null;
}
document.getElementById('start-btn').disabled = false;
document.getElementById('check-btn').disabled = true;
document.getElementById('hint-btn').disabled = true;
this.onGameEnd(this.score);
}
restart() {
this.endGame();
this.score = 0;
this.currentStory = [];
this.timeLeft = this.timeLimit;
this.onScoreUpdate(0);
document.getElementById('drop-zone').innerHTML = '<div class="drop-hint">Drag elements here to build your story</div>';
this.loadStoryContent();
this.updateUI();
}
updateProgress() {
document.getElementById('story-progress').textContent =
`${this.currentStory.length}/${this.maxElements}`;
}
updateUI() {
document.getElementById('time-left').textContent = this.timeLeft;
}
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
destroy() {
this.endGame();
this.container.innerHTML = '';
}
}
// CSS pour Story Builder
const storyBuilderStyles = `
<style>
.story-builder-wrapper {
max-width: 900px;
margin: 0 auto;
}
.story-construction {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
margin: 20px 0;
}
.story-target {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
border-left: 4px solid var(--primary-color);
}
.drop-zone {
min-height: 120px;
border: 3px dashed #ddd;
border-radius: 12px;
padding: 20px;
text-align: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.drop-zone.drag-over {
border-color: var(--primary-color);
background: rgba(59, 130, 246, 0.1);
}
.drop-hint {
color: #6b7280;
font-style: italic;
}
.elements-bank {
background: white;
border-radius: 12px;
padding: 20px;
margin: 20px 0;
border: 2px solid #e5e7eb;
}
.elements-bank h4 {
margin-bottom: 15px;
color: var(--primary-color);
}
.story-element {
display: inline-block;
background: white;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 12px;
margin: 8px;
cursor: grab;
transition: all 0.3s ease;
position: relative;
min-width: 150px;
}
.story-element:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.story-element:active {
cursor: grabbing;
}
.story-element.in-story {
background: var(--secondary-color);
color: white;
border-color: var(--secondary-color);
cursor: default;
margin: 5px;
}
.element-content {
text-align: center;
}
.element-icon {
font-size: 1.5rem;
display: block;
margin-bottom: 5px;
}
.original {
font-weight: 600;
margin-bottom: 4px;
}
.translation {
font-size: 0.9rem;
color: #6b7280;
}
.word-type {
font-size: 0.8rem;
color: #9ca3af;
font-style: italic;
margin-top: 2px;
}
.speaker {
font-size: 0.8rem;
color: #ef4444;
font-weight: bold;
margin-bottom: 2px;
}
.story-element.in-story .translation {
color: rgba(255,255,255,0.8);
}
.story-element.in-story .word-type {
color: rgba(255,255,255,0.6);
}
/* Type-based styling */
.story-element.type-noun {
border-left: 4px solid #3b82f6;
}
.story-element.type-verb {
border-left: 4px solid #10b981;
}
.story-element.type-adjective {
border-left: 4px solid #f59e0b;
}
.story-element.type-adverb {
border-left: 4px solid #8b5cf6;
}
.story-element.type-greeting {
border-left: 4px solid #ef4444;
}
.remove-element {
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
background: var(--error-color);
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.story-objective {
background: linear-gradient(135deg, #f0f9ff, #dbeafe);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
border-left: 4px solid var(--primary-color);
}
.story-objective h3 {
color: var(--primary-color);
margin-bottom: 8px;
}
@media (max-width: 768px) {
.story-element {
min-width: 120px;
padding: 8px;
margin: 5px;
}
.drop-zone {
min-height: 100px;
padding: 15px;
}
.elements-bank {
padding: 15px;
}
}
</style>
`;
// Ajouter les styles
document.head.insertAdjacentHTML('beforeend', storyBuilderStyles);
// Enregistrement du module
window.GameModules = window.GameModules || {};
window.GameModules.StoryBuilder = StoryBuilderGame;

1366
src/games/story-reader.js
View File

File diff suppressed because it is too large Load Diff

703
src/games/whack-a-mole-hard.js
View File

@ -1,703 +0,0 @@
// === MODULE WHACK-A-MOLE HARD ===
class WhackAMoleHardGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.score = 0;
this.errors = 0;
this.maxErrors = 3;
this.gameTime = 60; // 60 seconds
this.timeLeft = this.gameTime;
this.isRunning = false;
this.gameMode = 'translation'; // 'translation', 'image', 'sound'
this.showPronunciation = false; // Track pronunciation display state
// Mole configuration
this.holes = [];
this.activeMoles = [];
this.moleAppearTime = 3000; // 3 seconds display time (longer)
this.spawnRate = 2000; // New wave every 2 seconds
this.molesPerWave = 3; // 3 moles per wave
// Timers
this.gameTimer = null;
this.spawnTimer = null;
// Vocabulary for this game - adapted for the new system
this.vocabulary = this.extractVocabulary(this.content);
this.currentWords = [];
this.targetWord = null;
// Target word guarantee system
this.spawnsSinceTarget = 0;
this.maxSpawnsWithoutTarget = 10; // Target word must appear in the next 10 moles (1/10 chance)
this.init();
}
init() {
// Check that we have vocabulary
if (!this.vocabulary || this.vocabulary.length === 0) {
logSh('No vocabulary available for Whack-a-Mole', 'ERROR');
this.showInitError();
return;
}
this.createGameBoard();
this.createGameUI();
this.setupEventListeners();
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Loading Error</h3>
<p>This content does not contain vocabulary compatible with Whack-a-Mole.</p>
<p>The game requires words with their translations.</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back</button>
</div>
`;
}
createGameBoard() {
this.container.innerHTML = `
<div class="whack-game-wrapper">
<!-- Mode Selection -->
<div class="mode-selector">
<button class="mode-btn active" data-mode="translation">
🔤 Translation
</button>
<button class="mode-btn" data-mode="image">
🖼️ Image (soon)
</button>
<button class="mode-btn" data-mode="sound">
🔊 Sound (soon)
</button>
</div>
<!-- Game Info -->
<div class="game-info">
<div class="game-stats">
<div class="stat-item">
<span class="stat-value" id="time-left">${this.timeLeft}</span>
<span class="stat-label">Time</span>
</div>
<div class="stat-item">
<span class="stat-value" id="errors-count">${this.errors}</span>
<span class="stat-label">Errors</span>
</div>
<div class="stat-item">
<span class="stat-value" id="target-word">---</span>
<span class="stat-label">Find</span>
</div>
</div>
<div class="game-controls">
<button class="control-btn" id="pronunciation-btn" title="Toggle pronunciation">🔊 Pronunciation</button>
<button class="control-btn" id="start-btn">🎮 Start</button>
<button class="control-btn" id="pause-btn" disabled>⏸️ Pause</button>
<button class="control-btn" id="restart-btn">🔄 Restart</button>
</div>
</div>
<!-- Game Board -->
<div class="whack-game-board hard-mode" id="game-board">
<!-- Holes will be generated here (5x3 = 15 holes) -->
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Select a mode and click Start!
</div>
</div>
</div>
`;
this.createHoles();
}
createHoles() {
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
for (let i = 0; i < 15; i++) { // 5x3 = 15 holes
const hole = document.createElement('div');
hole.className = 'whack-hole';
hole.dataset.holeId = i;
hole.innerHTML = `
<div class="whack-mole" data-hole="${i}">
<div class="pronunciation" style="display: none; font-size: 0.8em; color: #2563eb; font-style: italic; margin-bottom: 5px; font-weight: 500;"></div>
<div class="word"></div>
</div>
`;
gameBoard.appendChild(hole);
this.holes.push({
element: hole,
mole: hole.querySelector('.whack-mole'),
wordElement: hole.querySelector('.word'),
pronunciationElement: hole.querySelector('.pronunciation'),
isActive: false,
word: null,
timer: null
});
}
}
createGameUI() {
// UI elements are already created in createGameBoard
}
setupEventListeners() {
// Mode selection
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
if (this.isRunning) return;
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.gameMode = btn.dataset.mode;
if (this.gameMode !== 'translation') {
this.showFeedback('This mode will be available soon!', 'info');
// Return to translation mode
document.querySelector('.mode-btn[data-mode="translation"]').classList.add('active');
btn.classList.remove('active');
this.gameMode = 'translation';
}
});
});
// Game controls
document.getElementById('pronunciation-btn').addEventListener('click', () => this.togglePronunciation());
document.getElementById('start-btn').addEventListener('click', () => this.start());
document.getElementById('pause-btn').addEventListener('click', () => this.pause());
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
// Mole clicks
this.holes.forEach((hole, index) => {
hole.mole.addEventListener('click', () => this.hitMole(index));
});
}
start() {
if (this.isRunning) return;
this.isRunning = true;
this.score = 0;
this.errors = 0;
this.timeLeft = this.gameTime;
this.updateUI();
this.setNewTarget();
this.startTimers();
document.getElementById('start-btn').disabled = true;
document.getElementById('pause-btn').disabled = false;
this.showFeedback(`Find the word: "${this.targetWord.translation}"`, 'info');
// Show loaded content info
const contentName = this.content.name || 'Content';
logSh(`🎮 Whack-a-Mole started with: ${contentName} (${this.vocabulary.length} words, 'INFO');`);
}
pause() {
if (!this.isRunning) return;
this.isRunning = false;
this.stopTimers();
this.hideAllMoles();
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
this.showFeedback('Game paused', 'info');
}
restart() {
this.stopWithoutEnd(); // Stop without triggering game end
this.resetGame();
setTimeout(() => this.start(), 100);
}
togglePronunciation() {
this.showPronunciation = !this.showPronunciation;
const btn = document.getElementById('pronunciation-btn');
if (this.showPronunciation) {
btn.textContent = '🔊 Pronunciation ON';
btn.classList.add('active');
} else {
btn.textContent = '🔊 Pronunciation OFF';
btn.classList.remove('active');
}
// Update currently visible moles
this.updateMoleDisplay();
}
updateMoleDisplay() {
// Update pronunciation display for all active moles
this.holes.forEach(hole => {
if (hole.isActive && hole.word) {
if (this.showPronunciation && hole.word.pronunciation) {
hole.pronunciationElement.textContent = hole.word.pronunciation;
hole.pronunciationElement.style.display = 'block';
} else {
hole.pronunciationElement.style.display = 'none';
}
}
});
}
stop() {
this.stopWithoutEnd();
this.onGameEnd(this.score); // Trigger game end only here
}
stopWithoutEnd() {
this.isRunning = false;
this.stopTimers();
this.hideAllMoles();
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
}
resetGame() {
// Ensure everything is completely stopped
this.stopWithoutEnd();
// Reset all state variables
this.score = 0;
this.errors = 0;
this.timeLeft = this.gameTime;
this.isRunning = false;
this.targetWord = null;
this.activeMoles = [];
this.spawnsSinceTarget = 0; // Reset guarantee counter
// Ensure all timers are properly stopped
this.stopTimers();
// Reset UI
this.updateUI();
this.onScoreUpdate(0);
// Clear feedback
document.getElementById('target-word').textContent = '---';
this.showFeedback('Select a mode and click Start!', 'info');
// Reset buttons
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
// Clear all holes with verification
this.holes.forEach(hole => {
if (hole.timer) {
clearTimeout(hole.timer);
hole.timer = null;
}
hole.isActive = false;
hole.word = null;
if (hole.wordElement) {
hole.wordElement.textContent = '';
}
if (hole.pronunciationElement) {
hole.pronunciationElement.textContent = '';
hole.pronunciationElement.style.display = 'none';
}
if (hole.mole) {
hole.mole.classList.remove('active', 'hit');
}
});
logSh('🔄 Game completely reset', 'INFO');
}
startTimers() {
// Main game timer
this.gameTimer = setInterval(() => {
this.timeLeft--;
this.updateUI();
if (this.timeLeft <= 0 && this.isRunning) {
this.stop();
}
}, 1000);
// Mole spawn timer
this.spawnTimer = setInterval(() => {
if (this.isRunning) {
this.spawnMole();
}
}, this.spawnRate);
// First immediate mole
setTimeout(() => this.spawnMole(), 500);
}
stopTimers() {
if (this.gameTimer) {
clearInterval(this.gameTimer);
this.gameTimer = null;
}
if (this.spawnTimer) {
clearInterval(this.spawnTimer);
this.spawnTimer = null;
}
}
spawnMole() {
// Hard mode: Spawn 3 moles at once
this.spawnMultipleMoles();
}
spawnMultipleMoles() {
// Find all free holes
const availableHoles = this.holes.filter(hole => !hole.isActive);
// Spawn up to 3 moles (or fewer if not enough free holes)
const molesToSpawn = Math.min(this.molesPerWave, availableHoles.length);
if (molesToSpawn === 0) return;
// Shuffle available holes
const shuffledHoles = this.shuffleArray(availableHoles);
// Spawn the moles
for (let i = 0; i < molesToSpawn; i++) {
const hole = shuffledHoles[i];
const holeIndex = this.holes.indexOf(hole);
// Choose a word according to guarantee strategy
const word = this.getWordWithTargetGuarantee();
// Activate the mole with a small delay for visual effect
setTimeout(() => {
if (this.isRunning && !hole.isActive) {
this.activateMole(holeIndex, word);
}
}, i * 200); // 200ms delay between each mole
}
}
getWordWithTargetGuarantee() {
// Increment spawn counter since last target word
this.spawnsSinceTarget++;
// If we've reached the limit, force the target word
if (this.spawnsSinceTarget >= this.maxSpawnsWithoutTarget) {
logSh(`🎯 Forced target word spawn after ${this.spawnsSinceTarget} attempts`, 'INFO');
this.spawnsSinceTarget = 0;
return this.targetWord;
}
// Otherwise, 10% chance for target word (1/10 instead of 1/2)
if (Math.random() < 0.1) {
logSh('🎯 Natural target word spawn (1/10)', 'INFO');
this.spawnsSinceTarget = 0;
return this.targetWord;
} else {
return this.getRandomWord();
}
}
activateMole(holeIndex, word) {
const hole = this.holes[holeIndex];
if (hole.isActive) return;
hole.isActive = true;
hole.word = word;
hole.wordElement.textContent = word.original;
// Show pronunciation if enabled and available
if (this.showPronunciation && word.pronunciation) {
hole.pronunciationElement.textContent = word.pronunciation;
hole.pronunciationElement.style.display = 'block';
} else {
hole.pronunciationElement.style.display = 'none';
}
hole.mole.classList.add('active');
// Add to active moles list
this.activeMoles.push(holeIndex);
// Timer to make the mole disappear
hole.timer = setTimeout(() => {
this.deactivateMole(holeIndex);
}, this.moleAppearTime);
}
deactivateMole(holeIndex) {
const hole = this.holes[holeIndex];
if (!hole.isActive) return;
hole.isActive = false;
hole.word = null;
hole.wordElement.textContent = '';
hole.pronunciationElement.textContent = '';
hole.pronunciationElement.style.display = 'none';
hole.mole.classList.remove('active');
if (hole.timer) {
clearTimeout(hole.timer);
hole.timer = null;
}
// Remove from active moles list
const activeIndex = this.activeMoles.indexOf(holeIndex);
if (activeIndex > -1) {
this.activeMoles.splice(activeIndex, 1);
}
}
hitMole(holeIndex) {
if (!this.isRunning) return;
const hole = this.holes[holeIndex];
if (!hole.isActive || !hole.word) return;
const isCorrect = hole.word.translation === this.targetWord.translation;
if (isCorrect) {
// Correct answer
this.score += 10;
this.deactivateMole(holeIndex);
this.setNewTarget();
this.showScorePopup(holeIndex, '+10', true);
this.showFeedback(`Well done! Now find: "${this.targetWord.translation}"`, 'success');
// Success animation
hole.mole.classList.add('hit');
setTimeout(() => hole.mole.classList.remove('hit'), 500);
} else {
// Wrong answer
this.errors++;
this.score = Math.max(0, this.score - 2);
this.showScorePopup(holeIndex, '-2', false);
this.showFeedback(`Oops! "${hole.word.translation}" ≠ "${this.targetWord.translation}"`, 'error');
}
this.updateUI();
this.onScoreUpdate(this.score);
// Check game end by errors
if (this.errors >= this.maxErrors) {
this.showFeedback('Too many errors! Game over.', 'error');
setTimeout(() => {
if (this.isRunning) { // Check if game is still running
this.stop();
}
}, 1500);
}
}
setNewTarget() {
// Choose a new target word
const availableWords = this.vocabulary.filter(word =>
!this.activeMoles.some(moleIndex =>
this.holes[moleIndex].word &&
this.holes[moleIndex].word.original === word.original
)
);
if (availableWords.length > 0) {
this.targetWord = availableWords[Math.floor(Math.random() * availableWords.length)];
} else {
this.targetWord = this.vocabulary[Math.floor(Math.random() * this.vocabulary.length)];
}
// Reset counter for new target word
this.spawnsSinceTarget = 0;
logSh(`🎯 New target word: ${this.targetWord.original} -> ${this.targetWord.translation}`, 'INFO');
document.getElementById('target-word').textContent = this.targetWord.translation;
}
getRandomWord() {
return this.vocabulary[Math.floor(Math.random() * this.vocabulary.length)];
}
hideAllMoles() {
this.holes.forEach((hole, index) => {
if (hole.isActive) {
this.deactivateMole(index);
}
});
this.activeMoles = [];
}
showScorePopup(holeIndex, scoreText, isPositive) {
const hole = this.holes[holeIndex];
const popup = document.createElement('div');
popup.className = `score-popup ${isPositive ? 'correct-answer' : 'wrong-answer'}`;
popup.textContent = scoreText;
const rect = hole.element.getBoundingClientRect();
popup.style.left = rect.left + rect.width / 2 + 'px';
popup.style.top = rect.top + 'px';
document.body.appendChild(popup);
setTimeout(() => {
if (popup.parentNode) {
popup.parentNode.removeChild(popup);
}
}, 1000);
}
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
updateUI() {
document.getElementById('time-left').textContent = this.timeLeft;
document.getElementById('errors-count').textContent = this.errors;
}
extractVocabulary(content) {
let vocabulary = [];
logSh('🔍 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Priority 1: Use raw module content (simple format)
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Priority 2: Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format ONLY
if (typeof data === 'object' && data.user_language) {
return {
original: word, // Clé = original_language
translation: data.user_language.split('；')[0], // First translation
fullTranslation: data.user_language, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
logSh(`✨ ${vocabulary.length} words extracted from ultra-modular vocabulary`, 'INFO');
}
// No other formats supported - ultra-modular only
else {
logSh('⚠️ Content format not supported - ultra-modular format required', 'WARN');
}
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Validation and cleanup for ultra-modular format
vocabulary = vocabulary.filter(word =>
word &&
typeof word.original === 'string' &&
typeof word.translation === 'string' &&
word.original.trim() !== '' &&
word.translation.trim() !== ''
);
if (vocabulary.length === 0) {
logSh('❌ No valid vocabulary found', 'ERROR');
// Demo vocabulary as last resort
vocabulary = [
{ original: 'hello', translation: 'bonjour', category: 'greetings' },
{ original: 'goodbye', translation: 'au revoir', category: 'greetings' },
{ original: 'thank you', translation: 'merci', category: 'greetings' },
{ original: 'cat', translation: 'chat', category: 'animals' },
{ original: 'dog', translation: 'chien', category: 'animals' }
];
logSh('🚨 Using demo vocabulary', 'WARN');
}
logSh(`✅ Whack-a-Mole: ${vocabulary.length} vocabulary words finalized`, 'INFO');
return this.shuffleArray(vocabulary);
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
destroy() {
this.stop();
this.container.innerHTML = '';
}
}
// Module registration
window.GameModules = window.GameModules || {};
window.GameModules.WhackAMoleHard = WhackAMoleHardGame;

685
src/games/whack-a-mole.js
View File

@ -1,685 +0,0 @@
// === MODULE WHACK-A-MOLE ===
class WhackAMoleGame {
constructor(options) {
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Game state
this.score = 0;
this.errors = 0;
this.maxErrors = 3;
this.gameTime = 60; // 60 secondes
this.timeLeft = this.gameTime;
this.isRunning = false;
this.gameMode = 'translation'; // 'translation', 'image', 'sound'
this.showPronunciation = false; // Track pronunciation display state
// Mole configuration
this.holes = [];
this.activeMoles = [];
this.moleAppearTime = 2000; // 2 seconds display time
this.spawnRate = 1500; // New mole every 1.5 seconds
// Timers
this.gameTimer = null;
this.spawnTimer = null;
// Vocabulary for this game - adapted for the new system
this.vocabulary = this.extractVocabulary(this.content);
this.currentWords = [];
this.targetWord = null;
// Target word guarantee system
this.spawnsSinceTarget = 0;
this.maxSpawnsWithoutTarget = 3; // Target word must appear in the next 3 moles
this.init();
}
init() {
// Check that we have vocabulary
if (!this.vocabulary || this.vocabulary.length === 0) {
logSh('No vocabulary available for Whack-a-Mole', 'ERROR');
this.showInitError();
return;
}
this.createGameBoard();
this.createGameUI();
this.setupEventListeners();
}
showInitError() {
this.container.innerHTML = `
<div class="game-error">
<h3>❌ Loading Error</h3>
<p>This content does not contain vocabulary compatible with Whack-a-Mole.</p>
<p>The game requires words with their translations.</p>
<button onclick="AppNavigation.navigateTo('games')" class="back-btn">← Back</button>
</div>
`;
}
createGameBoard() {
this.container.innerHTML = `
<div class="whack-game-wrapper">
<!-- Mode Selection -->
<div class="mode-selector">
<button class="mode-btn active" data-mode="translation">
🔤 Translation
</button>
<button class="mode-btn" data-mode="image">
🖼️ Image (soon)
</button>
<button class="mode-btn" data-mode="sound">
🔊 Sound (soon)
</button>
</div>
<!-- Game Info -->
<div class="game-info">
<div class="game-stats">
<div class="stat-item">
<span class="stat-value" id="time-left">${this.timeLeft}</span>
<span class="stat-label">Time</span>
</div>
<div class="stat-item">
<span class="stat-value" id="errors-count">${this.errors}</span>
<span class="stat-label">Errors</span>
</div>
<div class="stat-item">
<span class="stat-value" id="target-word">---</span>
<span class="stat-label">Find</span>
</div>
</div>
<div class="game-controls">
<button class="control-btn" id="pronunciation-btn" title="Toggle pronunciation">🔊 Pronunciation</button>
<button class="control-btn" id="start-btn">🎮 Start</button>
<button class="control-btn" id="pause-btn" disabled>⏸️ Pause</button>
<button class="control-btn" id="restart-btn">🔄 Restart</button>
</div>
</div>
<!-- Game Board -->
<div class="whack-game-board" id="game-board">
<!-- Holes will be generated here -->
</div>
<!-- Feedback Area -->
<div class="feedback-area" id="feedback-area">
<div class="instruction">
Select a mode and click Start!
</div>
</div>
</div>
`;
this.createHoles();
}
createHoles() {
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
for (let i = 0; i < 9; i++) {
const hole = document.createElement('div');
hole.className = 'whack-hole';
hole.dataset.holeId = i;
hole.innerHTML = `
<div class="whack-mole" data-hole="${i}">
<div class="pronunciation" style="display: none; font-size: 0.8em; color: #2563eb; font-style: italic; margin-bottom: 5px; font-weight: 500;"></div>
<div class="word"></div>
</div>
`;
gameBoard.appendChild(hole);
this.holes.push({
element: hole,
mole: hole.querySelector('.whack-mole'),
wordElement: hole.querySelector('.word'),
pronunciationElement: hole.querySelector('.pronunciation'),
isActive: false,
word: null,
timer: null
});
}
}
createGameUI() {
// UI elements are already created in createGameBoard
}
setupEventListeners() {
// Mode selection
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
if (this.isRunning) return;
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
this.gameMode = btn.dataset.mode;
if (this.gameMode !== 'translation') {
this.showFeedback('This mode will be available soon!', 'info');
// Return to translation mode
document.querySelector('.mode-btn[data-mode="translation"]').classList.add('active');
btn.classList.remove('active');
this.gameMode = 'translation';
}
});
});
// Game controls
document.getElementById('pronunciation-btn').addEventListener('click', () => this.togglePronunciation());
document.getElementById('start-btn').addEventListener('click', () => this.start());
document.getElementById('pause-btn').addEventListener('click', () => this.pause());
document.getElementById('restart-btn').addEventListener('click', () => this.restart());
// Mole clicks
this.holes.forEach((hole, index) => {
hole.mole.addEventListener('click', () => this.hitMole(index));
});
}
start() {
if (this.isRunning) return;
this.isRunning = true;
this.score = 0;
this.errors = 0;
this.timeLeft = this.gameTime;
this.updateUI();
this.setNewTarget();
this.startTimers();
document.getElementById('start-btn').disabled = true;
document.getElementById('pause-btn').disabled = false;
this.showFeedback(`Find the word: "${this.targetWord.translation}"`, 'info');
// Show loaded content info
const contentName = this.content.name || 'Content';
logSh(`🎮 Whack-a-Mole started with: ${contentName} (${this.vocabulary.length} words, 'INFO');`);
}
pause() {
if (!this.isRunning) return;
this.isRunning = false;
this.stopTimers();
this.hideAllMoles();
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
this.showFeedback('Game paused', 'info');
}
restart() {
this.stopWithoutEnd(); // Stop without triggering game end
this.resetGame();
setTimeout(() => this.start(), 100);
}
togglePronunciation() {
this.showPronunciation = !this.showPronunciation;
const btn = document.getElementById('pronunciation-btn');
if (this.showPronunciation) {
btn.textContent = '🔊 Pronunciation ON';
btn.classList.add('active');
} else {
btn.textContent = '🔊 Pronunciation OFF';
btn.classList.remove('active');
}
// Update currently visible moles
this.updateMoleDisplay();
}
updateMoleDisplay() {
// Update pronunciation display for all active moles
this.holes.forEach(hole => {
if (hole.isActive && hole.word) {
if (this.showPronunciation && hole.word.pronunciation) {
hole.pronunciationElement.textContent = hole.word.pronunciation;
hole.pronunciationElement.style.display = 'block';
} else {
hole.pronunciationElement.style.display = 'none';
}
}
});
}
stop() {
this.stopWithoutEnd();
this.onGameEnd(this.score); // Trigger game end only here
}
stopWithoutEnd() {
this.isRunning = false;
this.stopTimers();
this.hideAllMoles();
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
}
resetGame() {
// Ensure everything is completely stopped
this.stopWithoutEnd();
// Reset all state variables
this.score = 0;
this.errors = 0;
this.timeLeft = this.gameTime;
this.isRunning = false;
this.targetWord = null;
this.activeMoles = [];
this.spawnsSinceTarget = 0; // Reset guarantee counter
// Ensure all timers are properly stopped
this.stopTimers();
// Reset UI
this.updateUI();
this.onScoreUpdate(0);
// Clear feedback
document.getElementById('target-word').textContent = '---';
this.showFeedback('Select a mode and click Start!', 'info');
// Reset buttons
document.getElementById('start-btn').disabled = false;
document.getElementById('pause-btn').disabled = true;
// Clear all holes with verification
this.holes.forEach(hole => {
if (hole.timer) {
clearTimeout(hole.timer);
hole.timer = null;
}
hole.isActive = false;
hole.word = null;
if (hole.wordElement) {
hole.wordElement.textContent = '';
}
if (hole.pronunciationElement) {
hole.pronunciationElement.textContent = '';
hole.pronunciationElement.style.display = 'none';
}
if (hole.mole) {
hole.mole.classList.remove('active', 'hit');
}
});
logSh('🔄 Game completely reset', 'INFO');
}
startTimers() {
// Main game timer
this.gameTimer = setInterval(() => {
this.timeLeft--;
this.updateUI();
if (this.timeLeft <= 0 && this.isRunning) {
this.stop();
}
}, 1000);
// Mole spawn timer
this.spawnTimer = setInterval(() => {
if (this.isRunning) {
this.spawnMole();
}
}, this.spawnRate);
// First immediate mole
setTimeout(() => this.spawnMole(), 500);
}
stopTimers() {
if (this.gameTimer) {
clearInterval(this.gameTimer);
this.gameTimer = null;
}
if (this.spawnTimer) {
clearInterval(this.spawnTimer);
this.spawnTimer = null;
}
}
spawnMole() {
// Find a free hole
const availableHoles = this.holes.filter(hole => !hole.isActive);
if (availableHoles.length === 0) return;
const randomHole = availableHoles[Math.floor(Math.random() * availableHoles.length)];
const holeIndex = this.holes.indexOf(randomHole);
// Choose a word according to guarantee strategy
const word = this.getWordWithTargetGuarantee();
// Activate the mole
this.activateMole(holeIndex, word);
}
getWordWithTargetGuarantee() {
// Increment spawn counter since last target word
this.spawnsSinceTarget++;
// If we've reached the limit, force the target word
if (this.spawnsSinceTarget >= this.maxSpawnsWithoutTarget) {
logSh(`🎯 Forced target word spawn after ${this.spawnsSinceTarget} attempts`, 'INFO');
this.spawnsSinceTarget = 0;
return this.targetWord;
}
// Otherwise, 50% chance for target word, 50% random word
if (Math.random() < 0.5) {
logSh('🎯 Natural target word spawn', 'INFO');
this.spawnsSinceTarget = 0;
return this.targetWord;
} else {
return this.getRandomWord();
}
}
activateMole(holeIndex, word) {
const hole = this.holes[holeIndex];
if (hole.isActive) return;
hole.isActive = true;
hole.word = word;
hole.wordElement.textContent = word.original;
// Show pronunciation if enabled and available
if (this.showPronunciation && word.pronunciation) {
hole.pronunciationElement.textContent = word.pronunciation;
hole.pronunciationElement.style.display = 'block';
} else {
hole.pronunciationElement.style.display = 'none';
}
hole.mole.classList.add('active');
// Add to active moles list
this.activeMoles.push(holeIndex);
// Timer to make the mole disappear
hole.timer = setTimeout(() => {
this.deactivateMole(holeIndex);
}, this.moleAppearTime);
}
deactivateMole(holeIndex) {
const hole = this.holes[holeIndex];
if (!hole.isActive) return;
hole.isActive = false;
hole.word = null;
hole.wordElement.textContent = '';
hole.pronunciationElement.textContent = '';
hole.pronunciationElement.style.display = 'none';
hole.mole.classList.remove('active');
if (hole.timer) {
clearTimeout(hole.timer);
hole.timer = null;
}
// Remove from active moles list
const activeIndex = this.activeMoles.indexOf(holeIndex);
if (activeIndex > -1) {
this.activeMoles.splice(activeIndex, 1);
}
}
hitMole(holeIndex) {
if (!this.isRunning) return;
const hole = this.holes[holeIndex];
if (!hole.isActive || !hole.word) return;
const isCorrect = hole.word.translation === this.targetWord.translation;
if (isCorrect) {
// Correct answer
this.score += 10;
this.deactivateMole(holeIndex);
this.setNewTarget();
this.showScorePopup(holeIndex, '+10', true);
this.showFeedback(`Well done! Now find: "${this.targetWord.translation}"`, 'success');
// Success animation
hole.mole.classList.add('hit');
setTimeout(() => hole.mole.classList.remove('hit'), 500);
} else {
// Wrong answer
this.errors++;
this.score = Math.max(0, this.score - 2);
this.showScorePopup(holeIndex, '-2', false);
this.showFeedback(`Oops! "${hole.word.translation}" ≠ "${this.targetWord.translation}"`, 'error');
}
this.updateUI();
this.onScoreUpdate(this.score);
// Check game end by errors
if (this.errors >= this.maxErrors) {
this.showFeedback('Too many errors! Game over.', 'error');
setTimeout(() => {
if (this.isRunning) { // Check if game is still running
this.stop();
}
}, 1500);
}
}
setNewTarget() {
// Choose a new target word
const availableWords = this.vocabulary.filter(word =>
!this.activeMoles.some(moleIndex =>
this.holes[moleIndex].word &&
this.holes[moleIndex].word.original === word.original
)
);
if (availableWords.length > 0) {
this.targetWord = availableWords[Math.floor(Math.random() * availableWords.length)];
} else {
this.targetWord = this.vocabulary[Math.floor(Math.random() * this.vocabulary.length)];
}
// Reset counter for new target word
this.spawnsSinceTarget = 0;
logSh(`🎯 New target word: ${this.targetWord.original} -> ${this.targetWord.translation}`, 'INFO');
document.getElementById('target-word').textContent = this.targetWord.translation;
}
getRandomWord() {
return this.vocabulary[Math.floor(Math.random() * this.vocabulary.length)];
}
hideAllMoles() {
this.holes.forEach((hole, index) => {
if (hole.isActive) {
this.deactivateMole(index);
}
});
this.activeMoles = [];
}
showScorePopup(holeIndex, scoreText, isPositive) {
const hole = this.holes[holeIndex];
const popup = document.createElement('div');
popup.className = `score-popup ${isPositive ? 'correct-answer' : 'wrong-answer'}`;
popup.textContent = scoreText;
const rect = hole.element.getBoundingClientRect();
popup.style.left = rect.left + rect.width / 2 + 'px';
popup.style.top = rect.top + 'px';
document.body.appendChild(popup);
setTimeout(() => {
if (popup.parentNode) {
popup.parentNode.removeChild(popup);
}
}, 1000);
}
showFeedback(message, type = 'info') {
const feedbackArea = document.getElementById('feedback-area');
feedbackArea.innerHTML = `<div class="instruction ${type}">${message}</div>`;
}
updateUI() {
document.getElementById('time-left').textContent = this.timeLeft;
document.getElementById('errors-count').textContent = this.errors;
}
extractVocabulary(content) {
let vocabulary = [];
logSh('🔍 Extracting vocabulary from:', content?.name || 'content', 'INFO');
// Priority 1: Use raw module content (simple format)
if (content.rawContent) {
logSh('📦 Using raw module content', 'INFO');
return this.extractVocabularyFromRaw(content.rawContent);
}
// Priority 2: Ultra-modular format (vocabulary object) - ONLY format supported
if (content.vocabulary && typeof content.vocabulary === 'object' && !Array.isArray(content.vocabulary)) {
logSh('✨ Ultra-modular format detected (vocabulary object)', 'INFO');
vocabulary = Object.entries(content.vocabulary).map(([word, data]) => {
// Support ultra-modular format and new centralized vocabulary format
if (typeof data === 'object' && (data.user_language || data.translation)) {
const translationText = data.user_language || data.translation;
return {
original: word, // Clé = original_language
translation: translationText.split('；')[0], // First translation
fullTranslation: translationText, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
}
// No other formats supported - ultra-modular only
return this.finalizeVocabulary(vocabulary);
}
extractVocabularyFromRaw(rawContent) {
logSh('🔧 Extracting from raw content:', rawContent.name || 'Module', 'INFO');
let vocabulary = [];
// Ultra-modular format (vocabulary object) - ONLY format supported
if (rawContent.vocabulary && typeof rawContent.vocabulary === 'object' && !Array.isArray(rawContent.vocabulary)) {
vocabulary = Object.entries(rawContent.vocabulary).map(([word, data]) => {
// Support ultra-modular format and new centralized vocabulary format
if (typeof data === 'object' && (data.user_language || data.translation)) {
const translationText = data.user_language || data.translation;
return {
original: word, // Clé = original_language
translation: translationText.split('；')[0], // First translation
fullTranslation: translationText, // Complete translation
type: data.type || 'general',
audio: data.audio,
image: data.image,
examples: data.examples,
pronunciation: data.pronunciation,
category: data.type || 'general'
};
}
// Legacy fallback - simple string (temporary, will be removed)
else if (typeof data === 'string') {
return {
original: word,
translation: data.split('；')[0],
fullTranslation: data,
type: 'general',
category: 'general'
};
}
return null;
}).filter(Boolean);
logSh(`✨ ${vocabulary.length} words extracted from ultra-modular vocabulary`, 'INFO');
}
// No other formats supported - ultra-modular only
else {
logSh('⚠️ Content format not supported - ultra-modular format required', 'WARN');
}
return this.finalizeVocabulary(vocabulary);
}
finalizeVocabulary(vocabulary) {
// Validation and cleanup for ultra-modular format
vocabulary = vocabulary.filter(word =>
word &&
typeof word.original === 'string' &&
typeof word.translation === 'string' &&
word.original.trim() !== '' &&
word.translation.trim() !== ''
);
if (vocabulary.length === 0) {
logSh('❌ No valid vocabulary found', 'ERROR');
// Demo vocabulary as last resort
vocabulary = [
{ original: 'hello', translation: 'bonjour', category: 'greetings' },
{ original: 'goodbye', translation: 'au revoir', category: 'greetings' },
{ original: 'thank you', translation: 'merci', category: 'greetings' },
{ original: 'cat', translation: 'chat', category: 'animals' },
{ original: 'dog', translation: 'chien', category: 'animals' }
];
logSh('🚨 Using demo vocabulary', 'WARN');
}
logSh(`✅ Whack-a-Mole: ${vocabulary.length} vocabulary words finalized`, 'INFO');
return this.shuffleArray(vocabulary);
}
shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
destroy() {
this.stop();
this.container.innerHTML = '';
}
}
// Module registration
window.GameModules = window.GameModules || {};
window.GameModules.WhackAMole = WhackAMoleGame;

1046
src/games/word-discovery.js
View File

File diff suppressed because it is too large Load Diff

656
src/games/word-storm.js
View File

@ -1,656 +0,0 @@
// === WORD STORM GAME ===
// Game where words fall from the sky like meteorites!
class WordStormGame {
constructor(options) {
logSh('Word Storm constructor called', 'DEBUG');
this.container = options.container;
this.content = options.content;
this.onScoreUpdate = options.onScoreUpdate || (() => {});
this.onGameEnd = options.onGameEnd || (() => {});
// Inject game-specific CSS
this.injectCSS();
logSh('Options processed, initializing game state...', 'DEBUG');
// Game state
this.score = 0;
this.level = 1;
this.lives = 3;
this.combo = 0;
this.isGamePaused = false;
this.isGameOver = false;
// Game mechanics
this.fallingWords = [];
this.gameInterval = null;
this.spawnInterval = null;
this.currentWordIndex = 0;
// Game settings
this.fallSpeed = 8000; // ms to fall from top to bottom (very slow)
this.spawnRate = 4000; // ms between spawns (not frequent)
this.wordLifetime = 15000; // ms before word disappears (long time)
logSh('Game state initialized, extracting vocabulary...', 'DEBUG');
// Content extraction
try {
this.vocabulary = this.extractVocabulary(this.content);
this.shuffledVocab = [...this.vocabulary];
this.shuffleArray(this.shuffledVocab);
logSh(`Word Storm initialized with ${this.vocabulary.length} words`, 'INFO');
} catch (error) {
logSh(`Error extracting vocabulary: ${error.message}`, 'ERROR');
throw error;
}
logSh('Calling init()...', 'DEBUG');
this.init();
}
injectCSS() {
// Avoid injecting CSS multiple times
if (document.getElementById('word-storm-styles')) return;
const styleSheet = document.createElement('style');
styleSheet.id = 'word-storm-styles';
styleSheet.textContent = `
.falling-word {
position: absolute;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
border-radius: 25px;
font-size: 2rem;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.4);
cursor: default;
user-select: none;
transform: translateX(-50%);
animation: wordGlow 2s ease-in-out infinite;
}
.falling-word.exploding {
animation: explode 0.8s ease-out forwards;
}
.falling-word.wrong-shake {
animation: wrongShake 0.6s ease-in-out forwards;
}
.answer-panel.wrong-flash {
animation: wrongFlash 0.5s ease-in-out;
}
@keyframes wordGlow {
0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.4); }
50% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(102, 126, 234, 0.6); }
}
@keyframes explode {
0% {
transform: translateX(-50%) scale(1) rotate(0deg);
opacity: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.4);
}
25% {
transform: translateX(-50%) scale(1.3) rotate(5deg);
opacity: 0.9;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.8);
}
50% {
transform: translateX(-50%) scale(1.5) rotate(-3deg);
opacity: 0.7;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 12px 35px rgba(245, 158, 11, 0.6), 0 0 60px rgba(245, 158, 11, 0.9);
}
75% {
transform: translateX(-50%) scale(0.8) rotate(2deg);
opacity: 0.4;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
100% {
transform: translateX(-50%) scale(0.1) rotate(0deg);
opacity: 0;
}
}
@keyframes wrongShake {
0%, 100% {
transform: translateX(-50%) scale(1);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-60%) scale(0.95);
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6), 0 0 25px rgba(239, 68, 68, 0.8);
}
20%, 40%, 60%, 80% {
transform: translateX(-40%) scale(0.95);
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6), 0 0 25px rgba(239, 68, 68, 0.8);
}
}
@keyframes wrongFlash {
0%, 100% {
background: transparent;
box-shadow: none;
}
50% {
background: rgba(239, 68, 68, 0.4);
box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 20px rgba(239, 68, 68, 0.3);
}
}
@keyframes screenShake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-3px) translateY(1px); }
20% { transform: translateX(3px) translateY(-1px); }
30% { transform: translateX(-2px) translateY(2px); }
40% { transform: translateX(2px) translateY(-2px); }
50% { transform: translateX(-1px) translateY(1px); }
60% { transform: translateX(1px) translateY(-1px); }
70% { transform: translateX(-2px) translateY(0px); }
80% { transform: translateX(2px) translateY(1px); }
90% { transform: translateX(-1px) translateY(-1px); }
}
@keyframes pointsFloat {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
30% {
transform: translateY(-20px) scale(1.3);
opacity: 1;
}
100% {
transform: translateY(-80px) scale(0.5);
opacity: 0;
}
}
@media (max-width: 768px) {
.falling-word {
padding: 18px 25px;
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.falling-word {
font-size: 1.5rem;
padding: 15px 20px;
}
}
`;
document.head.appendChild(styleSheet);
logSh('Word Storm CSS injected', 'DEBUG');
}
extractVocabulary(content) {
let vocabulary = [];
logSh(`Word Storm extracting vocabulary from content`, 'DEBUG');
// Support Dragon's Pearl and other formats
if (content.vocabulary && typeof content.vocabulary === 'object') {
vocabulary = Object.entries(content.vocabulary).map(([original, vocabData]) => {
if (typeof vocabData === 'string') {
return {
original: original,
translation: vocabData
};
} else if (typeof vocabData === 'object') {
return {
original: original,
translation: vocabData.user_language || vocabData.translation || 'No translation',
pronunciation: vocabData.pronunciation
};
}
return null;
}).filter(item => item !== null);
logSh(`Extracted ${vocabulary.length} words from content.vocabulary`, 'DEBUG');
}
// Support rawContent format
if (content.rawContent && content.rawContent.vocabulary) {
const rawVocab = Object.entries(content.rawContent.vocabulary).map(([original, vocabData]) => {
if (typeof vocabData === 'string') {
return { original: original, translation: vocabData };
} else if (typeof vocabData === 'object') {
return {
original: original,
translation: vocabData.user_language || vocabData.translation,
pronunciation: vocabData.pronunciation
};
}
return null;
}).filter(item => item !== null);
vocabulary = vocabulary.concat(rawVocab);
logSh(`Added ${rawVocab.length} words from rawContent.vocabulary, total: ${vocabulary.length}`, 'DEBUG');
}
// Limit to 50 words max for performance
return vocabulary.slice(0, 50);
}
init() {
if (this.vocabulary.length === 0) {
this.showNoVocabularyMessage();
return;
}
this.container.innerHTML = `
<div class="game-wrapper compact">
<div class="game-hud">
<div class="hud-left">
<div class="score">Score: <span id="score">0</span></div>
<div class="level">Level: <span id="level">1</span></div>
</div>
<div class="hud-center">
<div class="lives">Lives: <span id="lives">3</span></div>
<div class="combo">Combo: <span id="combo">0</span></div>
</div>
<div class="hud-right">
<button class="pause-btn" id="pause-btn">⏸️ Pause</button>
</div>
</div>
<div class="game-area" id="game-area" style="position: relative; height: 80vh; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); overflow: hidden;">
</div>
<div class="answer-panel" id="answer-panel">
<div class="answer-buttons" id="answer-buttons">
<!-- Dynamic answer buttons -->
</div>
</div>
</div>
`;
this.setupEventListeners();
this.generateAnswerOptions();
}
setupEventListeners() {
const pauseBtn = document.getElementById('pause-btn');
if (pauseBtn) {
pauseBtn.addEventListener('click', () => this.togglePause());
}
// Answer button clicks
document.addEventListener('click', (e) => {
if (e.target.classList.contains('answer-btn')) {
const answer = e.target.textContent;
this.checkAnswer(answer);
}
});
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key >= '1' && e.key <= '4') {
const btnIndex = parseInt(e.key) - 1;
const buttons = document.querySelectorAll('.answer-btn');
if (buttons[btnIndex]) {
buttons[btnIndex].click();
}
}
});
}
start() {
logSh('Word Storm game started', 'INFO');
this.startSpawning();
}
startSpawning() {
this.spawnInterval = setInterval(() => {
if (!this.isGamePaused && !this.isGameOver) {
this.spawnFallingWord();
}
}, this.spawnRate);
}
spawnFallingWord() {
if (this.vocabulary.length === 0) return;
const word = this.vocabulary[this.currentWordIndex % this.vocabulary.length];
this.currentWordIndex++;
const gameArea = document.getElementById('game-area');
const wordElement = document.createElement('div');
wordElement.className = 'falling-word';
wordElement.textContent = word.original;
wordElement.style.left = Math.random() * 80 + 10 + '%';
wordElement.style.top = '-60px';
gameArea.appendChild(wordElement);
this.fallingWords.push({
element: wordElement,
word: word,
startTime: Date.now()
});
// Generate new answer options when word spawns
this.generateAnswerOptions();
// Animate falling
this.animateFalling(wordElement);
// Remove after lifetime
setTimeout(() => {
if (wordElement.parentNode) {
this.missWord(wordElement);
}
}, this.wordLifetime);
}
animateFalling(wordElement) {
wordElement.style.transition = `top ${this.fallSpeed}ms linear`;
setTimeout(() => {
wordElement.style.top = '100vh';
}, 50);
}
generateAnswerOptions() {
if (this.vocabulary.length === 0) return;
const buttons = [];
const correctWord = this.fallingWords.length > 0 ?
this.fallingWords[this.fallingWords.length - 1].word :
this.vocabulary[0];
// Add correct answer
buttons.push(correctWord.translation);
// Add 3 random incorrect answers
while (buttons.length < 4) {
const randomWord = this.vocabulary[Math.floor(Math.random() * this.vocabulary.length)];
if (!buttons.includes(randomWord.translation)) {
buttons.push(randomWord.translation);
}
}
// Shuffle buttons
this.shuffleArray(buttons);
// Update answer panel
const answerButtons = document.getElementById('answer-buttons');
if (answerButtons) {
answerButtons.innerHTML = buttons.map(answer =>
`<button class="answer-btn">${answer}</button>`
).join('');
}
}
checkAnswer(selectedAnswer) {
const activeFallingWords = this.fallingWords.filter(fw => fw.element.parentNode);
for (let i = 0; i < activeFallingWords.length; i++) {
const fallingWord = activeFallingWords[i];
if (fallingWord.word.translation === selectedAnswer) {
this.correctAnswer(fallingWord);
return;
}
}
// Wrong answer
this.wrongAnswer();
}
correctAnswer(fallingWord) {
// Remove from game with epic explosion
if (fallingWord.element.parentNode) {
fallingWord.element.classList.add('exploding');
// Add screen shake effect
const gameArea = document.getElementById('game-area');
if (gameArea) {
gameArea.style.animation = 'none';
gameArea.offsetHeight; // Force reflow
gameArea.style.animation = 'screenShake 0.3s ease-in-out';
setTimeout(() => {
gameArea.style.animation = '';
}, 300);
}
setTimeout(() => {
if (fallingWord.element.parentNode) {
fallingWord.element.remove();
}
}, 800);
}
// Remove from tracking
this.fallingWords = this.fallingWords.filter(fw => fw !== fallingWord);
// Update score
this.combo++;
const points = 10 + (this.combo * 2);
this.score += points;
this.onScoreUpdate(this.score);
// Update display with animation
document.getElementById('score').textContent = this.score;
document.getElementById('combo').textContent = this.combo;
// Add points popup animation
this.showPointsPopup(points, fallingWord.element);
// Vibration feedback (if supported)
if (navigator.vibrate) {
navigator.vibrate([50, 30, 50]);
}
// Level up check
if (this.score > 0 && this.score % 100 === 0) {
this.levelUp();
}
}
wrongAnswer() {
this.combo = 0;
document.getElementById('combo').textContent = this.combo;
// Enhanced wrong answer animation
const answerPanel = document.getElementById('answer-panel');
if (answerPanel) {
answerPanel.classList.add('wrong-flash');
setTimeout(() => {
answerPanel.classList.remove('wrong-flash');
}, 500);
}
// Shake all falling words to show disappointment
this.fallingWords.forEach(fw => {
if (fw.element.parentNode && !fw.element.classList.contains('exploding')) {
fw.element.classList.add('wrong-shake');
setTimeout(() => {
fw.element.classList.remove('wrong-shake');
}, 600);
}
});
// Screen flash red
const gameArea = document.getElementById('game-area');
if (gameArea) {
const overlay = document.createElement('div');
overlay.style.cssText = `
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(239, 68, 68, 0.3);
pointer-events: none;
animation: wrongFlash 0.4s ease-in-out;
z-index: 100;
`;
gameArea.appendChild(overlay);
setTimeout(() => {
if (overlay.parentNode) overlay.remove();
}, 400);
}
// Wrong answer vibration (stronger/longer)
if (navigator.vibrate) {
navigator.vibrate([200, 100, 200, 100, 200]);
}
}
showPointsPopup(points, wordElement) {
const popup = document.createElement('div');
popup.textContent = `+${points}`;
popup.style.cssText = `
position: absolute;
left: ${wordElement.style.left};
top: ${wordElement.offsetTop}px;
font-size: 2rem;
font-weight: bold;
color: #10b981;
pointer-events: none;
z-index: 1000;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: pointsFloat 1.5s ease-out forwards;
`;
const gameArea = document.getElementById('game-area');
if (gameArea) {
gameArea.appendChild(popup);
setTimeout(() => {
if (popup.parentNode) popup.remove();
}, 1500);
}
}
missWord(wordElement) {
// Remove word
if (wordElement.parentNode) {
wordElement.remove();
}
// Remove from tracking
this.fallingWords = this.fallingWords.filter(fw => fw.element !== wordElement);
// Lose life
this.lives--;
this.combo = 0;
document.getElementById('lives').textContent = this.lives;
document.getElementById('combo').textContent = this.combo;
if (this.lives <= 0) {
this.gameOver();
}
}
levelUp() {
this.level++;
document.getElementById('level').textContent = this.level;
// Increase difficulty
this.fallSpeed = Math.max(1000, this.fallSpeed * 0.9);
this.spawnRate = Math.max(800, this.spawnRate * 0.95);
// Restart intervals with new timing
if (this.spawnInterval) {
clearInterval(this.spawnInterval);
this.startSpawning();
}
// Show level up message
const gameArea = document.getElementById('game-area');
const levelUpMsg = document.createElement('div');
levelUpMsg.innerHTML = `
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 10px;
text-align: center; z-index: 1000;">
<h2>⚡ LEVEL UP! ⚡</h2>
<p>Level ${this.level}</p>
</div>
`;
gameArea.appendChild(levelUpMsg);
setTimeout(() => {
if (levelUpMsg.parentNode) {
levelUpMsg.remove();
}
}, 2000);
}
togglePause() {
this.isGamePaused = !this.isGamePaused;
const pauseBtn = document.getElementById('pause-btn');
if (pauseBtn) {
pauseBtn.textContent = this.isGamePaused ? '▶️ Resume' : '⏸️ Pause';
}
}
gameOver() {
this.isGameOver = true;
// Clear intervals
if (this.spawnInterval) {
clearInterval(this.spawnInterval);
}
// Clear falling words
this.fallingWords.forEach(fw => {
if (fw.element.parentNode) {
fw.element.remove();
}
});
this.onGameEnd(this.score);
}
showNoVocabularyMessage() {
this.container.innerHTML = `
<div class="game-error">
<div class="error-content">
<h2>🌪️ Word Storm</h2>
<p>❌ No vocabulary found in this content.</p>
<p>This game requires content with vocabulary words.</p>
<button class="back-btn" onclick="AppNavigation.navigateTo('games')">← Back to Games</button>
</div>
</div>
`;
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
destroy() {
if (this.spawnInterval) {
clearInterval(this.spawnInterval);
}
// Remove CSS
const styleSheet = document.getElementById('word-storm-styles');
if (styleSheet) {
styleSheet.remove();
}
logSh('Word Storm destroyed', 'INFO');
}
}
// Export to global namespace
window.GameModules = window.GameModules || {};
window.GameModules.WordStorm = WordStormGame;

35
src/styles/base.css
View File

@ -18,7 +18,8 @@ html {
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: #2d3748;
background-color: #f7fafc;
background: linear-gradient(180deg, #4299e1 0%, #3182ce 50%, #2b77cb 100%);
min-height: 100vh;
overflow-x: hidden;
}
@ -30,36 +31,50 @@ body {
}
.app-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 0.4rem 0;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(37, 99, 235, 0.15);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
padding: 0 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 0;
}
.app-title {
font-size: 1.5rem;
font-weight: 700;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.app-main {
flex: 1;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
width: 100%;
margin: 1rem auto;
padding: 1rem;
width: calc(100% - 2rem);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
transform: translateZ(0);
}
/* Loading Screen */

548
src/styles/components-ui.css Normal file
View File

@ -0,0 +1,548 @@
/**
* Component UI Styles - Unified styling for extracted DRS components
* Button, ProgressBar, Card, Panel components with consistent theming
*/
/* =============================================================================
BUTTON COMPONENT STYLES
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
white-space: nowrap;
outline: none;
position: relative;
overflow: hidden;
}
.btn:focus {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Button sizes */
.btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.btn-lg {
padding: 14px 20px;
font-size: 16px;
}
/* Button types */
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
transform: translateY(-1px);
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
border: 1px solid #d1d5db;
}
.btn-secondary:hover:not(:disabled) {
background: #e5e7eb;
border-color: #9ca3af;
}
.btn-outline {
background: transparent;
color: #667eea;
border: 2px solid #667eea;
}
.btn-outline:hover:not(:disabled) {
background: #667eea;
color: white;
}
.btn-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}
.btn-success:hover:not(:disabled) {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
transform: translateY(-1px);
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
.btn-danger:hover:not(:disabled) {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
transform: translateY(-1px);
}
/* Button content */
.btn-icon {
display: inline-flex;
align-items: center;
font-size: 16px;
}
.btn-text {
display: inline-flex;
align-items: center;
}
.btn-spinner {
display: inline-flex;
align-items: center;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* =============================================================================
PROGRESS BAR COMPONENT STYLES
============================================================================= */
.progress-bar {
width: 100%;
background: #f3f4f6;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.progress-bar-sm {
height: 4px;
}
.progress-bar:not(.progress-bar-sm):not(.progress-bar-lg) {
height: 8px;
}
.progress-bar-lg {
height: 12px;
}
.progress-track {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
border-radius: inherit;
transition: width 0.5s ease;
position: relative;
}
.progress-fill-primary {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.progress-fill-success {
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}
.progress-fill-warning {
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
.progress-fill-danger {
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}
.progress-fill-info {
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}
.progress-bar-animated .progress-fill {
animation: progress-shimmer 2s ease-in-out infinite;
}
.progress-bar-striped .progress-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
background-size: 16px 16px;
animation: progress-stripes 1s linear infinite;
}
.progress-label {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
text-align: center;
}
.progress-bar-indeterminate .progress-fill {
width: 30% !important;
animation: progress-indeterminate 2s ease-in-out infinite;
}
@keyframes progress-shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
@keyframes progress-stripes {
from { background-position: 0 0; }
to { background-position: 16px 0; }
}
@keyframes progress-indeterminate {
0% { transform: translateX(-100%); }
50% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
/* =============================================================================
CARD COMPONENT STYLES
============================================================================= */
.card {
background: white;
border-radius: 12px;
border: 1px solid #e5e7eb;
overflow: hidden;
transition: all 0.2s ease;
}
.card-elevated {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.card-interactive {
cursor: pointer;
}
.card-interactive:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.card-interactive:active {
transform: translateY(0);
}
/* Card sizes */
.card-sm {
border-radius: 8px;
}
.card-lg {
border-radius: 16px;
}
/* Card types */
.card-exercise {
border-left: 4px solid #667eea;
}
.card-question {
border-left: 4px solid #3b82f6;
background: linear-gradient(to right, #eff6ff, #ffffff);
}
.card-result {
border-left: 4px solid #10b981;
}
.card-info {
border-left: 4px solid #06b6d4;
background: linear-gradient(to right, #ecfeff, #ffffff);
}
.card-warning {
border-left: 4px solid #f59e0b;
background: linear-gradient(to right, #fffbeb, #ffffff);
}
.card-success {
border-left: 4px solid #10b981;
background: linear-gradient(to right, #ecfdf5, #ffffff);
}
.card-danger {
border-left: 4px solid #ef4444;
background: linear-gradient(to right, #fef2f2, #ffffff);
}
.card-header {
padding: 16px 20px 12px 20px;
border-bottom: 1px solid #f3f4f6;
}
.card-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #111827;
}
.card-body {
padding: 16px 20px;
color: #374151;
line-height: 1.6;
}
.card-footer {
padding: 12px 20px 16px 20px;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
font-size: 14px;
color: #6b7280;
}
/* Card animations */
.card-animate-fade {
animation: card-fade-in 0.3s ease;
}
.card-animate-slide {
animation: card-slide-in 0.3s ease;
}
.card-animate-scale {
animation: card-scale-in 0.3s ease;
}
@keyframes card-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes card-slide-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes card-scale-in {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* =============================================================================
PANEL COMPONENT STYLES
============================================================================= */
.panel {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
}
.panel-collapsible .panel-header {
cursor: pointer;
user-select: none;
}
.panel-collapsed .panel-body {
display: none;
}
/* Panel types */
.panel-info {
border-left: 4px solid #3b82f6;
background: linear-gradient(to right, #eff6ff, #ffffff);
}
.panel-success {
border-left: 4px solid #10b981;
background: linear-gradient(to right, #ecfdf5, #ffffff);
}
.panel-warning {
border-left: 4px solid #f59e0b;
background: linear-gradient(to right, #fffbeb, #ffffff);
}
.panel-danger {
border-left: 4px solid #ef4444;
background: linear-gradient(to right, #fef2f2, #ffffff);
}
.panel-hint {
border-left: 4px solid #8b5cf6;
background: linear-gradient(to right, #f5f3ff, #ffffff);
}
.panel-explanation {
border-left: 4px solid #06b6d4;
background: linear-gradient(to right, #ecfeff, #ffffff);
}
.panel-header {
display: flex;
justify-content: between;
align-items: center;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px solid #f3f4f6;
}
.panel-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #111827;
flex: 1;
}
.panel-controls {
display: flex;
gap: 8px;
margin-left: auto;
}
.panel-toggle,
.panel-close {
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
color: #6b7280;
transition: all 0.2s ease;
}
.panel-toggle:hover,
.panel-close:hover {
background: rgba(0, 0, 0, 0.05);
color: #374151;
}
.panel-body {
padding: 16px;
color: #374151;
line-height: 1.6;
}
/* =============================================================================
RESPONSIVE DESIGN
============================================================================= */
@media (max-width: 768px) {
.btn {
padding: 12px 16px;
font-size: 16px;
}
.btn-sm {
padding: 8px 12px;
font-size: 14px;
}
.card-header,
.card-body,
.card-footer {
padding-left: 16px;
padding-right: 16px;
}
.panel-header,
.panel-body {
padding-left: 12px;
padding-right: 12px;
}
}
/* =============================================================================
UTILITY CLASSES
============================================================================= */
.component-hidden {
display: none !important;
}
.component-invisible {
opacity: 0;
pointer-events: none;
}
.component-disabled {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
/* Focus management for accessibility */
.component-focus-visible:focus {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.card,
.panel {
border-width: 2px;
}
.btn {
border: 2px solid currentColor;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.btn,
.card,
.panel,
.progress-fill,
.btn-spinner {
transition: none !important;
animation: none !important;
}
}

2658
src/styles/components.css
View File

File diff suppressed because it is too large Load Diff

526
src/testing/TestFramework.js Normal file
View File

@ -0,0 +1,526 @@
/**
* TestFramework - Lightweight testing framework for the modular architecture
* Tests core architecture and modules with detailed reporting
*/
class TestFramework {
constructor() {
this.tests = [];
this.results = [];
this.suites = new Map();
this.currentSuite = null;
this.totalTests = 0;
this.passedTests = 0;
this.failedTests = 0;
this.startTime = null;
this.endTime = null;
// Test states
this.STATES = {
PENDING: 'pending',
RUNNING: 'running',
PASSED: 'passed',
FAILED: 'failed',
SKIPPED: 'skipped'
};
}
/**
* Create a test suite
* @param {string} suiteName - Name of the test suite
* @param {Function} callback - Function containing tests
*/
describe(suiteName, callback) {
console.log(`📝 Setting up test suite: ${suiteName}`);
const suite = {
name: suiteName,
tests: [],
beforeEach: null,
afterEach: null,
beforeAll: null,
afterAll: null,
results: {
total: 0,
passed: 0,
failed: 0,
skipped: 0
}
};
this.suites.set(suiteName, suite);
this.currentSuite = suite;
// Execute the callback to register tests
if (callback && typeof callback === 'function') {
callback.call(this);
}
this.currentSuite = null;
return suite;
}
/**
* Register a test
* @param {string} testName - Name of the test
* @param {Function} testFunction - Test function to execute
*/
it(testName, testFunction) {
if (!this.currentSuite) {
throw new Error('Test must be inside a describe block');
}
const test = {
id: `${this.currentSuite.name}::${testName}`,
name: testName,
suite: this.currentSuite.name,
fn: testFunction,
state: this.STATES.PENDING,
error: null,
duration: 0,
timestamp: null
};
this.currentSuite.tests.push(test);
this.tests.push(test);
return test;
}
/**
* Setup function to run before each test in current suite
* @param {Function} fn - Setup function
*/
beforeEach(fn) {
if (!this.currentSuite) {
throw new Error('beforeEach must be inside a describe block');
}
this.currentSuite.beforeEach = fn;
}
/**
* Teardown function to run after each test in current suite
* @param {Function} fn - Teardown function
*/
afterEach(fn) {
if (!this.currentSuite) {
throw new Error('afterEach must be inside a describe block');
}
this.currentSuite.afterEach = fn;
}
/**
* Setup function to run before all tests in current suite
* @param {Function} fn - Setup function
*/
beforeAll(fn) {
if (!this.currentSuite) {
throw new Error('beforeAll must be inside a describe block');
}
this.currentSuite.beforeAll = fn;
}
/**
* Teardown function to run after all tests in current suite
* @param {Function} fn - Teardown function
*/
afterAll(fn) {
if (!this.currentSuite) {
throw new Error('afterAll must be inside a describe block');
}
this.currentSuite.afterAll = fn;
}
/**
* Run all registered tests
* @returns {Promise<Object>} - Test results summary
*/
async runAll() {
console.log('🚀 Starting Test Framework execution...');
this.startTime = Date.now();
// Reset counters
this.totalTests = this.tests.length;
this.passedTests = 0;
this.failedTests = 0;
this.results = [];
// Run each suite
for (const [suiteName, suite] of this.suites) {
await this._runSuite(suite);
}
this.endTime = Date.now();
const duration = this.endTime - this.startTime;
const summary = {
total: this.totalTests,
passed: this.passedTests,
failed: this.failedTests,
skipped: this.totalTests - this.passedTests - this.failedTests,
duration: duration,
suites: Array.from(this.suites.values()).map(suite => ({
name: suite.name,
results: suite.results
})),
details: this.results
};
this._printSummary(summary);
return summary;
}
/**
* Run a specific test suite
* @param {Object} suite - Test suite to run
* @private
*/
async _runSuite(suite) {
console.log(`\n📦 Running suite: ${suite.name}`);
try {
// Run beforeAll if exists
if (suite.beforeAll) {
await suite.beforeAll();
}
// Run each test in the suite
for (const test of suite.tests) {
await this._runTest(test, suite);
}
// Run afterAll if exists
if (suite.afterAll) {
await suite.afterAll();
}
} catch (error) {
console.error(`❌ Suite ${suite.name} setup/teardown failed:`, error);
}
}
/**
* Run a single test
* @param {Object} test - Test to run
* @param {Object} suite - Suite containing the test
* @private
*/
async _runTest(test, suite) {
const startTime = Date.now();
test.state = this.STATES.RUNNING;
test.timestamp = new Date().toISOString();
try {
// Run beforeEach if exists
if (suite.beforeEach) {
await suite.beforeEach();
}
// Run the actual test
await test.fn(this._createAssertions());
// Test passed
test.state = this.STATES.PASSED;
test.duration = Date.now() - startTime;
this.passedTests++;
suite.results.passed++;
console.log(` ✅ ${test.name} (${test.duration}ms)`);
// Run afterEach if exists
if (suite.afterEach) {
await suite.afterEach();
}
} catch (error) {
// Test failed
test.state = this.STATES.FAILED;
test.error = {
message: error.message,
stack: error.stack,
name: error.name
};
test.duration = Date.now() - startTime;
this.failedTests++;
suite.results.failed++;
console.error(` ❌ ${test.name} (${test.duration}ms)`);
console.error(` Error: ${error.message}`);
// Run afterEach even if test failed
try {
if (suite.afterEach) {
await suite.afterEach();
}
} catch (teardownError) {
console.error(` Teardown error: ${teardownError.message}`);
}
}
suite.results.total++;
this.results.push({
id: test.id,
name: test.name,
suite: test.suite,
state: test.state,
duration: test.duration,
error: test.error,
timestamp: test.timestamp
});
}
/**
* Create assertion helpers for tests
* @returns {Object} - Assertion methods
* @private
*/
_createAssertions() {
return {
/**
* Assert that a condition is true
* @param {boolean} condition - Condition to test
* @param {string} message - Error message if assertion fails
*/
assertTrue: (condition, message = 'Expected condition to be true') => {
if (!condition) {
throw new AssertionError(message);
}
},
/**
* Assert that a condition is false
* @param {boolean} condition - Condition to test
* @param {string} message - Error message if assertion fails
*/
assertFalse: (condition, message = 'Expected condition to be false') => {
if (condition) {
throw new AssertionError(message);
}
},
/**
* Assert that two values are equal
* @param {*} actual - Actual value
* @param {*} expected - Expected value
* @param {string} message - Error message if assertion fails
*/
assertEqual: (actual, expected, message = `Expected ${actual} to equal ${expected}`) => {
if (actual !== expected) {
throw new AssertionError(message);
}
},
/**
* Assert that two values are not equal
* @param {*} actual - Actual value
* @param {*} notExpected - Value that should not match
* @param {string} message - Error message if assertion fails
*/
assertNotEqual: (actual, notExpected, message = `Expected ${actual} not to equal ${notExpected}`) => {
if (actual === notExpected) {
throw new AssertionError(message);
}
},
/**
* Assert that a value is null
* @param {*} value - Value to test
* @param {string} message - Error message if assertion fails
*/
assertNull: (value, message = 'Expected value to be null') => {
if (value !== null) {
throw new AssertionError(message);
}
},
/**
* Assert that a value is not null
* @param {*} value - Value to test
* @param {string} message - Error message if assertion fails
*/
assertNotNull: (value, message = 'Expected value not to be null') => {
if (value === null) {
throw new AssertionError(message);
}
},
/**
* Assert that a value is undefined
* @param {*} value - Value to test
* @param {string} message - Error message if assertion fails
*/
assertUndefined: (value, message = 'Expected value to be undefined') => {
if (value !== undefined) {
throw new AssertionError(message);
}
},
/**
* Assert that a value is defined
* @param {*} value - Value to test
* @param {string} message - Error message if assertion fails
*/
assertDefined: (value, message = 'Expected value to be defined') => {
if (value === undefined) {
throw new AssertionError(message);
}
},
/**
* Assert that a function throws an error
* @param {Function} fn - Function that should throw
* @param {string} expectedError - Expected error message (optional)
* @param {string} message - Error message if assertion fails
*/
assertThrows: (fn, expectedError = null, message = 'Expected function to throw an error') => {
let threwError = false;
let actualError = null;
try {
fn();
} catch (error) {
threwError = true;
actualError = error;
}
if (!threwError) {
throw new AssertionError(message);
}
if (expectedError && actualError.message !== expectedError) {
throw new AssertionError(`Expected error "${expectedError}" but got "${actualError.message}"`);
}
},
/**
* Assert that a function does not throw an error
* @param {Function} fn - Function that should not throw
* @param {string} message - Error message if assertion fails
*/
assertDoesNotThrow: (fn, message = 'Expected function not to throw an error') => {
try {
fn();
} catch (error) {
throw new AssertionError(`${message}. Got: ${error.message}`);
}
},
/**
* Assert that an object has a property
* @param {Object} obj - Object to check
* @param {string} property - Property name
* @param {string} message - Error message if assertion fails
*/
assertHasProperty: (obj, property, message = `Expected object to have property "${property}"`) => {
if (!(property in obj)) {
throw new AssertionError(message);
}
},
/**
* Assert that a value is an instance of a specific type
* @param {*} value - Value to check
* @param {Function} type - Constructor function
* @param {string} message - Error message if assertion fails
*/
assertInstanceOf: (value, type, message = `Expected value to be instance of ${type.name}`) => {
if (!(value instanceof type)) {
throw new AssertionError(message);
}
},
/**
* Assert that an array contains a specific value
* @param {Array} array - Array to search
* @param {*} value - Value to find
* @param {string} message - Error message if assertion fails
*/
assertContains: (array, value, message = `Expected array to contain ${value}`) => {
if (!Array.isArray(array) || !array.includes(value)) {
throw new AssertionError(message);
}
}
};
}
/**
* Print test summary
* @param {Object} summary - Test results summary
* @private
*/
_printSummary(summary) {
console.log('\n' + '='.repeat(60));
console.log('📊 TEST SUMMARY');
console.log('='.repeat(60));
const passRate = summary.total > 0 ? Math.round((summary.passed / summary.total) * 100) : 0;
const status = summary.failed === 0 ? '✅ ALL TESTS PASSED' : '❌ SOME TESTS FAILED';
console.log(`${status}`);
console.log(`Total Tests: ${summary.total}`);
console.log(`Passed: ${summary.passed} (${passRate}%)`);
console.log(`Failed: ${summary.failed}`);
console.log(`Skipped: ${summary.skipped}`);
console.log(`Duration: ${summary.duration}ms`);
// Suite breakdown
console.log('\n📦 SUITE BREAKDOWN:');
summary.suites.forEach(suite => {
const suitePassRate = suite.results.total > 0 ?
Math.round((suite.results.passed / suite.results.total) * 100) : 0;
console.log(` ${suite.name}: ${suite.results.passed}/${suite.results.total} (${suitePassRate}%)`);
});
// Failed tests details
if (summary.failed > 0) {
console.log('\n❌ FAILED TESTS:');
this.results
.filter(result => result.state === this.STATES.FAILED)
.forEach(result => {
console.log(` ${result.suite}::${result.name}`);
console.log(` Error: ${result.error.message}`);
});
}
console.log('='.repeat(60));
}
/**
* Get test results as JSON
* @returns {Object} - Complete test results
*/
getResults() {
return {
summary: {
total: this.totalTests,
passed: this.passedTests,
failed: this.failedTests,
skipped: this.totalTests - this.passedTests - this.failedTests,
duration: this.endTime - this.startTime
},
suites: Array.from(this.suites.entries()).map(([name, suite]) => ({
name,
results: suite.results,
tests: suite.tests.map(test => ({
name: test.name,
state: test.state,
duration: test.duration,
error: test.error
}))
})),
results: this.results
};
}
}
/**
* Custom assertion error
*/
class AssertionError extends Error {
constructor(message) {
super(message);
this.name = 'AssertionError';
}
}
// Export for use in tests
export { TestFramework, AssertionError };

489
src/testing/TestRunner.js Normal file
View File

@ -0,0 +1,489 @@
/**
* TestRunner - Main test execution engine
* Runs all test suites and generates comprehensive reports
*/
class TestRunner {
constructor() {
this.testSuites = [];
this.results = [];
this.overallResults = {
totalSuites: 0,
passedSuites: 0,
failedSuites: 0,
totalTests: 0,
passedTests: 0,
failedTests: 0,
skippedTests: 0,
duration: 0,
startTime: null,
endTime: null
};
}
/**
* Register a test suite
* @param {string} name - Name of the test suite
* @param {Object} testFramework - TestFramework instance with tests
*/
registerSuite(name, testFramework) {
this.testSuites.push({
name,
framework: testFramework
});
}
/**
* Run all registered test suites
* @returns {Promise<Object>} - Complete test results
*/
async runAllTests() {
console.log('🚀 Starting Test Runner...');
console.log('='.repeat(80));
this.overallResults.startTime = Date.now();
this.overallResults.totalSuites = this.testSuites.length;
for (const suite of this.testSuites) {
console.log(`\n🏃‍♂️ Running test suite: ${suite.name}`);
console.log('-'.repeat(60));
try {
const result = await suite.framework.runAll();
this.results.push({
suiteName: suite.name,
success: result.failed === 0,
result: result
});
if (result.failed === 0) {
this.overallResults.passedSuites++;
console.log(`✅ Suite "${suite.name}" PASSED`);
} else {
this.overallResults.failedSuites++;
console.log(`❌ Suite "${suite.name}" FAILED`);
}
// Aggregate test counts
this.overallResults.totalTests += result.total;
this.overallResults.passedTests += result.passed;
this.overallResults.failedTests += result.failed;
this.overallResults.skippedTests += result.skipped;
} catch (error) {
console.error(`💥 Suite "${suite.name}" crashed:`, error);
this.overallResults.failedSuites++;
this.results.push({
suiteName: suite.name,
success: false,
error: {
message: error.message,
stack: error.stack
}
});
}
}
this.overallResults.endTime = Date.now();
this.overallResults.duration = this.overallResults.endTime - this.overallResults.startTime;
this._printOverallSummary();
return this.getCompleteResults();
}
/**
* Run tests with HTML report generation
* @param {HTMLElement} container - Container to render results (optional)
* @returns {Promise<Object>} - Complete test results
*/
async runTestsWithReport(container = null) {
const results = await this.runAllTests();
if (container) {
this._renderHTMLReport(container, results);
}
return results;
}
/**
* Get complete test results
* @returns {Object} - All test results and metadata
*/
getCompleteResults() {
return {
overall: this.overallResults,
suites: this.results,
summary: {
success: this.overallResults.failedSuites === 0 && this.overallResults.failedTests === 0,
passRate: this.overallResults.totalTests > 0
? Math.round((this.overallResults.passedTests / this.overallResults.totalTests) * 100)
: 0,
message: this._getOverallMessage()
}
};
}
/**
* Print overall test summary
* @private
*/
_printOverallSummary() {
console.log('\n' + '='.repeat(80));
console.log('🏆 OVERALL TEST RESULTS');
console.log('='.repeat(80));
const passRate = this.overallResults.totalTests > 0
? Math.round((this.overallResults.passedTests / this.overallResults.totalTests) * 100)
: 0;
const overallSuccess = this.overallResults.failedSuites === 0 && this.overallResults.failedTests === 0;
const statusIcon = overallSuccess ? '✅' : '❌';
const statusText = overallSuccess ? 'ALL TESTS PASSED' : 'SOME TESTS FAILED';
console.log(`${statusIcon} ${statusText}`);
console.log(`\n📊 SUITE SUMMARY:`);
console.log(` Total Suites: ${this.overallResults.totalSuites}`);
console.log(` Passed Suites: ${this.overallResults.passedSuites}`);
console.log(` Failed Suites: ${this.overallResults.failedSuites}`);
console.log(`\n🧪 TEST SUMMARY:`);
console.log(` Total Tests: ${this.overallResults.totalTests}`);
console.log(` Passed: ${this.overallResults.passedTests} (${passRate}%)`);
console.log(` Failed: ${this.overallResults.failedTests}`);
console.log(` Skipped: ${this.overallResults.skippedTests}`);
console.log(` Duration: ${this.overallResults.duration}ms`);
// Suite breakdown
console.log(`\n📦 DETAILED BREAKDOWN:`);
this.results.forEach(result => {
const icon = result.success ? '✅' : '❌';
if (result.result) {
console.log(` ${icon} ${result.suiteName}: ${result.result.passed}/${result.result.total} tests`);
} else {
console.log(` ${icon} ${result.suiteName}: CRASHED`);
}
});
// Performance analysis
const avgTestTime = this.overallResults.totalTests > 0
? Math.round(this.overallResults.duration / this.overallResults.totalTests)
: 0;
console.log(`\n⚡ PERFORMANCE:`);
console.log(` Average per test: ${avgTestTime}ms`);
console.log(` Total execution: ${this.overallResults.duration}ms`);
// Architecture quality assessment
console.log(`\n🏗️ ARCHITECTURE QUALITY:`);
this._assessArchitectureQuality();
console.log('='.repeat(80));
}
/**
* Assess architecture quality based on test results
* @private
*/
_assessArchitectureQuality() {
const coreArchTests = this.results.find(r => r.suiteName.includes('CoreArchitecture'));
const drsTests = this.results.find(r => r.suiteName.includes('DRS'));
if (coreArchTests && coreArchTests.success) {
console.log(' ✅ Core Architecture: SOLID');
} else if (coreArchTests && !coreArchTests.success) {
console.log(' ❌ Core Architecture: NEEDS ATTENTION');
} else {
console.log(' ⚠️ Core Architecture: NOT TESTED');
}
if (drsTests && drsTests.success) {
console.log(' ✅ DRS Modules: WELL INTEGRATED');
} else if (drsTests && !drsTests.success) {
console.log(' ❌ DRS Modules: INTEGRATION ISSUES');
} else {
console.log(' ⚠️ DRS Modules: NOT TESTED');
}
// Performance assessment
if (this.overallResults.duration < 5000) { // Under 5 seconds
console.log(' ✅ Performance: EXCELLENT');
} else if (this.overallResults.duration < 15000) { // Under 15 seconds
console.log(' ⚠️ Performance: ACCEPTABLE');
} else {
console.log(' ❌ Performance: SLOW - NEEDS OPTIMIZATION');
}
// Coverage assessment
const passRate = this.overallResults.totalTests > 0
? (this.overallResults.passedTests / this.overallResults.totalTests)
: 0;
if (passRate >= 0.95) {
console.log(' ✅ Test Coverage: EXCELLENT');
} else if (passRate >= 0.8) {
console.log(' ⚠️ Test Coverage: GOOD');
} else {
console.log(' ❌ Test Coverage: INSUFFICIENT');
}
}
/**
* Get overall result message
* @returns {string} - Summary message
* @private
*/
_getOverallMessage() {
if (this.overallResults.failedSuites === 0 && this.overallResults.failedTests === 0) {
return '🎉 All tests passed! Architecture is solid and modules are working correctly.';
} else if (this.overallResults.failedTests > 0 && this.overallResults.passedTests > this.overallResults.failedTests) {
return '⚠️ Most tests passed, but some issues need attention.';
} else {
return '❌ Significant test failures detected. Architecture or implementation needs review.';
}
}
/**
* Render HTML report in container
* @param {HTMLElement} container - Container element
* @param {Object} results - Test results
* @private
*/
_renderHTMLReport(container, results) {
const passRate = results.overall.passedTests > 0
? Math.round((results.overall.passedTests / results.overall.totalTests) * 100)
: 0;
const html = `
<div class="test-report">
<div class="report-header">
<h1>🧪 Test Report</h1>
<div class="overall-status ${results.summary.success ? 'success' : 'failure'}">
${results.summary.success ? '✅' : '❌'} ${results.summary.message}
</div>
</div>
<div class="summary-cards">
<div class="summary-card">
<h3>📊 Overall</h3>
<div class="metric">${results.overall.totalTests} Tests</div>
<div class="sub-metric">${passRate}% Pass Rate</div>
</div>
<div class="summary-card">
<h3>✅ Passed</h3>
<div class="metric">${results.overall.passedTests}</div>
<div class="sub-metric">${results.overall.passedSuites} Suites</div>
</div>
<div class="summary-card">
<h3>❌ Failed</h3>
<div class="metric">${results.overall.failedTests}</div>
<div class="sub-metric">${results.overall.failedSuites} Suites</div>
</div>
<div class="summary-card">
<h3>⚡ Duration</h3>
<div class="metric">${results.overall.duration}ms</div>
<div class="sub-metric">${Math.round(results.overall.duration / results.overall.totalTests)}ms avg</div>
</div>
</div>
<div class="suites-breakdown">
<h2>📦 Test Suites</h2>
${results.suites.map(suite => `
<div class="suite-card ${suite.success ? 'success' : 'failure'}">
<div class="suite-header">
<h3>${suite.success ? '✅' : '❌'} ${suite.suiteName}</h3>
${suite.result ? `<span class="suite-stats">${suite.result.passed}/${suite.result.total} tests</span>` : '<span class="suite-error">CRASHED</span>'}
</div>
${suite.error ? `<div class="error-details">Error: ${suite.error.message}</div>` : ''}
${suite.result && suite.result.failed > 0 ? `
<div class="failed-tests">
<strong>Failed Tests:</strong>
${suite.result.details.filter(d => d.state === 'failed').map(d =>
`<div class="failed-test">${d.name}: ${d.error?.message || 'Unknown error'}</div>`
).join('')}
</div>
` : ''}
</div>
`).join('')}
</div>
</div>
`;
container.innerHTML = html;
this._addReportStyles();
}
/**
* Add CSS styles for HTML report
* @private
*/
_addReportStyles() {
if (document.getElementById('test-report-styles')) return;
const styles = document.createElement('style');
styles.id = 'test-report-styles';
styles.textContent = `
.test-report {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.report-header {
text-align: center;
margin-bottom: 30px;
}
.overall-status {
font-size: 1.2em;
font-weight: 600;
padding: 15px 30px;
border-radius: 8px;
margin-top: 15px;
}
.overall-status.success {
background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
color: #2e7d32;
border: 2px solid #4caf50;
}
.overall-status.failure {
background: linear-gradient(135deg, #ffebee, #ffcdd2);
color: #c62828;
border: 2px solid #f44336;
}
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.summary-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
border-left: 4px solid #667eea;
}
.summary-card h3 {
margin: 0 0 15px 0;
color: #333;
font-size: 1.1em;
}
.metric {
font-size: 2.5em;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.sub-metric {
color: #666;
font-size: 0.9em;
}
.suites-breakdown {
margin-top: 40px;
}
.suites-breakdown h2 {
margin-bottom: 20px;
color: #333;
}
.suite-card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.suite-card.success {
border-left: 4px solid #4caf50;
}
.suite-card.failure {
border-left: 4px solid #f44336;
}
.suite-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.suite-header h3 {
margin: 0;
color: #333;
}
.suite-stats {
background: #f5f5f5;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9em;
color: #666;
}
.suite-error {
background: #ffcdd2;
color: #c62828;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9em;
}
.error-details {
background: #fff3e0;
border: 1px solid #ffb74d;
border-radius: 4px;
padding: 10px;
margin-top: 10px;
color: #e65100;
font-size: 0.9em;
}
.failed-tests {
margin-top: 15px;
padding: 15px;
background: #ffebee;
border-radius: 4px;
}
.failed-test {
margin: 5px 0;
padding: 5px;
background: white;
border-radius: 3px;
font-family: monospace;
font-size: 0.85em;
color: #c62828;
}
@media (max-width: 768px) {
.summary-cards {
grid-template-columns: 1fr;
}
.suite-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
`;
document.head.appendChild(styles);
}
}
export default TestRunner;

246
src/testing/runTests.js Normal file
View File

@ -0,0 +1,246 @@
/**
* runTests.js - Main test execution entry point
* Runs all test suites and provides comprehensive reporting
*/
import TestRunner from './TestRunner.js';
import { CoreArchitectureTests } from './tests/CoreArchitectureTests.js';
import { DRSModuleTests } from './tests/DRSModuleTests.js';
/**
* Main test execution function
* @param {HTMLElement} reportContainer - Optional container for HTML report
* @returns {Promise<Object>} - Complete test results
*/
async function runAllTests(reportContainer = null) {
console.log('🧪 Class Generator 2.0 - Test Suite');
console.log('Testing architecture and DRS modules...\n');
// Create test runner
const testRunner = new TestRunner();
// Register all test suites
testRunner.registerSuite('Core Architecture Tests', CoreArchitectureTests);
testRunner.registerSuite('DRS Module Tests', DRSModuleTests);
// Run tests with optional HTML report
const results = await testRunner.runTestsWithReport(reportContainer);
// Additional validation and recommendations
await generateRecommendations(results);
return results;
}
/**
* Generate recommendations based on test results
* @param {Object} results - Test results
*/
async function generateRecommendations(results) {
console.log('\n🎯 RECOMMENDATIONS:');
console.log('-'.repeat(50));
const issues = [];
const improvements = [];
// Analyze results
if (results.overall.failedTests > 0) {
issues.push('❌ Failed tests need immediate attention');
}
if (results.overall.duration > 10000) {
issues.push('⚠️ Test execution is slow - consider optimization');
}
const passRate = results.overall.totalTests > 0
? (results.overall.passedTests / results.overall.totalTests)
: 0;
if (passRate < 0.8) {
issues.push('❌ Test pass rate below 80% - architecture may need review');
}
// Check specific areas
const coreTests = results.suites.find(s => s.suiteName.includes('Core'));
const drsTests = results.suites.find(s => s.suiteName.includes('DRS'));
if (coreTests && !coreTests.success) {
issues.push('🏗️ Core architecture has issues - this is critical');
improvements.push('Review Module.js, EventBus.js, and ModuleLoader.js implementation');
}
if (drsTests && !drsTests.success) {
issues.push('🎮 DRS modules have issues - affects user experience');
improvements.push('Review exercise module implementations and interfaces');
}
// Print issues
if (issues.length > 0) {
console.log('🚨 ISSUES DETECTED:');
issues.forEach(issue => console.log(` ${issue}`));
} else {
console.log('✅ No major issues detected!');
}
// Print improvements
if (improvements.length > 0) {
console.log('\n💡 SUGGESTED IMPROVEMENTS:');
improvements.forEach(improvement => console.log(` • ${improvement}`));
}
// Next steps based on results
console.log('\n🚀 NEXT STEPS:');
if (results.summary.success) {
console.log(' ✅ All tests pass - ready for PHASE 2.2 (Component Extraction)');
console.log(' • Extract UI components from DRS modules');
console.log(' • Create reusable component library');
console.log(' • Implement component registration system');
} else if (passRate >= 0.7) {
console.log(' ⚠️ Address failing tests before proceeding to next phase');
console.log(' • Fix critical architecture issues first');
console.log(' • Re-run tests after fixes');
console.log(' • Consider test-driven development for remaining work');
} else {
console.log(' ❌ Major issues detected - extensive review needed');
console.log(' • Focus on core architecture stability');
console.log(' • Review module contracts and dependencies');
console.log(' • Consider architectural refactoring if needed');
}
// Performance recommendations
if (results.overall.duration > 5000) {
console.log('\n⚡ PERFORMANCE OPTIMIZATION:');
console.log(' • Consider lazy loading of modules');
console.log(' • Review EventBus efficiency');
console.log(' • Optimize module initialization sequences');
}
console.log('-'.repeat(50));
}
/**
* Run tests in browser environment
* Creates a test page with results
*/
function runTestsInBrowser() {
// Create test page container
document.body.innerHTML = `
<div id="test-page">
<header>
<h1>🧪 Class Generator 2.0 - Test Results</h1>
<p>Comprehensive testing of architecture and modules</p>
</header>
<div id="test-progress">
<div class="progress-indicator">
<div class="spinner"></div>
<span>Running tests...</span>
</div>
</div>
<div id="test-results" style="display: none;"></div>
</div>
`;
// Add basic styles
const styles = document.createElement('style');
styles.textContent = `
body {
margin: 0;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
#test-page {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
color: white;
margin-bottom: 40px;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.progress-indicator {
text-align: center;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#test-results {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
`;
document.head.appendChild(styles);
// Run tests
const progressDiv = document.getElementById('test-progress');
const resultsDiv = document.getElementById('test-results');
setTimeout(async () => {
try {
await runAllTests(resultsDiv);
progressDiv.style.display = 'none';
resultsDiv.style.display = 'block';
} catch (error) {
progressDiv.innerHTML = `
<div class="progress-indicator" style="background: #ffebee; border: 2px solid #f44336;">
<h3 style="color: #c62828;">❌ Test execution failed</h3>
<p style="color: #666;">Error: ${error.message}</p>
<pre style="text-align: left; background: #f5f5f5; padding: 15px; border-radius: 4px; font-size: 0.85em;">${error.stack}</pre>
</div>
`;
}
}, 100);
}
/**
* Auto-run tests if in browser
*/
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
// Browser environment - create test page
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', runTestsInBrowser);
} else {
runTestsInBrowser();
}
} else {
// Node.js environment - just export the function
console.log('Test runner loaded - use runAllTests() to execute');
}
// Export for both Node.js and browser environments
export { runAllTests, generateRecommendations };
// Also make available globally in browser
if (typeof window !== 'undefined') {
window.runAllTests = runAllTests;
}

400
src/testing/tests/CoreArchitectureTests.js Normal file
View File

@ -0,0 +1,400 @@
/**
* CoreArchitectureTests - Tests for core architecture components
* Validates Module.js, EventBus.js, ModuleLoader.js, Router.js, Application.js
*/
import { TestFramework } from '../TestFramework.js';
// We'll dynamically import core modules to avoid dependency issues
let Module, EventBus, ModuleLoader, Router, Application;
const testFramework = new TestFramework();
// Test Module.js - Abstract base class
testFramework.describe('Module.js - Abstract Base Class', function() {
this.beforeAll(async () => {
try {
Module = (await import('../../core/Module.js')).default;
} catch (error) {
console.warn('Could not import Module.js, using mock for tests');
Module = class MockModule {
constructor(name, dependencies) {
if (this.constructor === Module) {
throw new Error('Module is abstract and cannot be instantiated directly');
}
this.name = name;
this.dependencies = dependencies || [];
this._initialized = false;
this._destroyed = false;
}
_validateNotDestroyed() {
if (this._destroyed) throw new Error('Module has been destroyed');
}
_setInitialized() { this._initialized = true; }
_setDestroyed() { this._destroyed = true; }
async init() { throw new Error('init() must be implemented by subclass'); }
async destroy() { throw new Error('destroy() must be implemented by subclass'); }
};
}
});
this.it('should not allow direct instantiation of abstract Module class', (assert) => {
assert.assertThrows(
() => new Module('test', []),
'Module is abstract and cannot be instantiated directly',
'Module class should be abstract'
);
});
this.it('should allow subclass instantiation with proper parameters', (assert) => {
class TestModule extends Module {
constructor(name, dependencies) {
super(name, dependencies);
Object.seal(this);
}
async init() { this._setInitialized(); }
async destroy() { this._setDestroyed(); }
}
const testModule = new TestModule('testModule', ['eventBus']);
assert.assertEqual(testModule.name, 'testModule');
assert.assertContains(testModule.dependencies, 'eventBus');
assert.assertFalse(testModule._initialized);
assert.assertFalse(testModule._destroyed);
});
this.it('should enforce abstract method implementation', (assert) => {
class IncompleteModule extends Module {
constructor(name, dependencies) {
super(name, dependencies);
}
// Missing init() and destroy() implementations
}
const incompleteModule = new IncompleteModule('incomplete', []);
assert.assertThrows(
() => incompleteModule.init(),
'Module incomplete: init() method must be implemented'
);
assert.assertThrows(
() => incompleteModule.destroy(),
'Module incomplete: destroy() method must be implemented'
);
});
this.it('should handle module lifecycle correctly', async (assert) => {
class LifecycleModule extends Module {
constructor(name, dependencies) {
super(name, dependencies);
Object.seal(this);
}
async init() {
this._validateNotDestroyed();
this._setInitialized();
}
async destroy() {
this._validateNotDestroyed();
this._setDestroyed();
}
}
const module = new LifecycleModule('lifecycle', []);
// Initially not initialized or destroyed
assert.assertFalse(module._initialized);
assert.assertFalse(module._destroyed);
// After init
await module.init();
assert.assertTrue(module._initialized);
assert.assertFalse(module._destroyed);
// After destroy
await module.destroy();
assert.assertTrue(module._destroyed);
// Should not allow operations after destroy
assert.assertThrows(
() => module.init(),
'Module has been destroyed'
);
});
this.it('should prevent modification after sealing', (assert) => {
class SealedModule extends Module {
constructor(name, dependencies) {
super(name, dependencies);
Object.seal(this);
}
async init() { this._setInitialized(); }
async destroy() { this._setDestroyed(); }
}
const module = new SealedModule('sealed', []);
// Try to add new properties (should fail silently in non-strict mode)
module.newProperty = 'should not work';
assert.assertUndefined(module.newProperty, 'Sealed object should not accept new properties');
});
});
// Test EventBus.js - Event communication system
testFramework.describe('EventBus.js - Event Communication System', function() {
this.beforeAll(async () => {
try {
EventBus = (await import('../../core/EventBus.js')).default;
} catch (error) {
console.warn('Could not import EventBus.js, using mock for tests');
EventBus = class MockEventBus {
constructor() {
this.events = new Map();
this.registeredModules = new Set();
this.eventHistory = [];
}
registerModule(moduleName) {
this.registeredModules.add(moduleName);
}
on(eventName, callback, moduleName) {
if (!this.registeredModules.has(moduleName)) {
throw new Error('EventBus requires module registration before use');
}
if (!this.events.has(eventName)) {
this.events.set(eventName, []);
}
this.events.get(eventName).push({ callback, moduleName });
}
emit(eventName, data, senderModule) {
const event = { eventName, data, senderModule, timestamp: Date.now() };
this.eventHistory.push(event);
if (this.events.has(eventName)) {
this.events.get(eventName).forEach(({ callback }) => {
try { callback(event); } catch (error) { console.error(error); }
});
}
}
off(eventName, callback, moduleName) {
if (this.events.has(eventName)) {
const listeners = this.events.get(eventName);
this.events.set(eventName, listeners.filter(
listener => !(listener.callback === callback && listener.moduleName === moduleName)
));
}
}
getEventHistory() { return this.eventHistory; }
};
}
});
this.it('should require module registration before event usage', (assert) => {
const eventBus = new EventBus();
assert.assertThrows(
() => eventBus.on('test:event', () => {}, 'unregisteredModule'),
'Module unregisteredModule is not registered with EventBus'
);
});
this.it('should allow event registration and emission after module registration', (assert) => {
const eventBus = new EventBus();
let eventReceived = false;
let eventData = null;
// Register module
const testModule = { name: 'testModule' };
eventBus.registerModule(testModule);
// Register event listener
eventBus.on('test:event', (event) => {
eventReceived = true;
eventData = event.data;
}, 'testModule');
// Emit event
eventBus.emit('test:event', { message: 'hello' }, 'testModule');
assert.assertTrue(eventReceived, 'Event should have been received');
assert.assertEqual(eventData.message, 'hello', 'Event data should be correct');
});
this.it('should maintain event history', (assert) => {
const eventBus = new EventBus();
const historyModule = { name: 'historyModule' };
eventBus.registerModule(historyModule);
eventBus.emit('history:test1', { id: 1 }, 'historyModule');
eventBus.emit('history:test2', { id: 2 }, 'historyModule');
const history = eventBus.getEventHistory();
assert.assertEqual(history.length, 2, 'Should have 2 events in history');
assert.assertEqual(history[0].eventName, 'history:test1');
assert.assertEqual(history[1].eventName, 'history:test2');
});
this.it('should allow event listener removal', (assert) => {
const eventBus = new EventBus();
let callCount = 0;
const removalModule = { name: 'removalModule' };
eventBus.registerModule(removalModule);
const listener = () => { callCount++; };
eventBus.on('removal:test', listener, 'removalModule');
// Emit once
eventBus.emit('removal:test', {}, 'removalModule');
assert.assertEqual(callCount, 1, 'Should have been called once');
// Remove listener and emit again
eventBus.off('removal:test', listener, 'removalModule');
eventBus.emit('removal:test', {}, 'removalModule');
assert.assertEqual(callCount, 1, 'Should still be 1 after removal');
});
this.it('should handle errors in event callbacks gracefully', (assert) => {
const eventBus = new EventBus();
let goodListenerCalled = false;
const errorModule = { name: 'errorModule' };
eventBus.registerModule(errorModule);
// Add a listener that throws
eventBus.on('error:test', () => {
throw new Error('Test error');
}, 'errorModule');
// Add a good listener
eventBus.on('error:test', () => {
goodListenerCalled = true;
}, 'errorModule');
// This should not throw, even with error in first listener
assert.assertDoesNotThrow(
() => eventBus.emit('error:test', {}, 'errorModule'),
'EventBus should handle listener errors gracefully'
);
assert.assertTrue(goodListenerCalled, 'Good listener should still be called');
});
});
// Test Module Isolation
testFramework.describe('Module Isolation and Architecture Integrity', function() {
this.it('should enforce zero direct dependencies between modules', (assert) => {
// This test validates that modules can only communicate via EventBus
class ModuleA extends (Module || class {}) {
constructor() {
super('moduleA', ['eventBus']);
this.eventBus = null;
this.receivedMessages = [];
Object.seal(this);
}
setEventBus(eventBus) {
this.eventBus = eventBus;
const moduleA = { name: 'moduleA' };
this.eventBus.registerModule(moduleA);
this.eventBus.on('moduleB:message', (event) => {
this.receivedMessages.push(event.data);
}, 'moduleA');
}
async init() { this._setInitialized && this._setInitialized(); }
async destroy() { this._setDestroyed && this._setDestroyed(); }
sendMessage(message) {
this.eventBus.emit('moduleA:message', { message }, 'moduleA');
}
}
class ModuleB extends (Module || class {}) {
constructor() {
super('moduleB', ['eventBus']);
this.eventBus = null;
this.receivedMessages = [];
Object.seal(this);
}
setEventBus(eventBus) {
this.eventBus = eventBus;
const moduleB = { name: 'moduleB' };
this.eventBus.registerModule(moduleB);
this.eventBus.on('moduleA:message', (event) => {
this.receivedMessages.push(event.data);
// Respond back
this.eventBus.emit('moduleB:message', { response: 'received' }, 'moduleB');
}, 'moduleB');
}
async init() { this._setInitialized && this._setInitialized(); }
async destroy() { this._setDestroyed && this._setDestroyed(); }
}
const eventBus = new EventBus();
const moduleA = new ModuleA();
const moduleB = new ModuleB();
moduleA.setEventBus(eventBus);
moduleB.setEventBus(eventBus);
// ModuleA sends message to ModuleB via EventBus
moduleA.sendMessage('hello');
assert.assertEqual(moduleB.receivedMessages.length, 1, 'ModuleB should receive message via EventBus');
assert.assertEqual(moduleA.receivedMessages.length, 1, 'ModuleA should receive response via EventBus');
assert.assertEqual(moduleB.receivedMessages[0].message, 'hello');
assert.assertEqual(moduleA.receivedMessages[0].response, 'received');
});
this.it('should prevent external modification of module internals', (assert) => {
class ProtectedModule extends (Module || class {}) {
constructor() {
super('protected', []);
// Private data should be truly private (WeakMap would be ideal)
this._privateData = { secret: 'hidden' };
Object.seal(this);
}
async init() { this._setInitialized && this._setInitialized(); }
async destroy() { this._setDestroyed && this._setDestroyed(); }
getPublicData() {
return { name: this.name };
}
}
const module = new ProtectedModule();
// Should not be able to add new properties
module.newProperty = 'should not work';
assert.assertUndefined(module.newProperty, 'Should not be able to add properties to sealed module');
// Should not be able to modify existing properties (in strict mode)
const originalName = module.name;
module.name = 'modified';
// In some environments this might work due to non-strict mode, but architecture should prevent it
// Should be able to call public methods
const publicData = module.getPublicData();
assert.assertDefined(publicData.name, 'Public method should work');
});
});
export { testFramework as CoreArchitectureTests };

457
src/testing/tests/DRSModuleTests.js Normal file
View File

@ -0,0 +1,457 @@
/**
* DRSModuleTests - Tests for DRS exercise modules
* Validates TextModule, AudioModule, ImageModule, GrammarModule
*/
import { TestFramework } from '../TestFramework.js';
// Mock dependencies for DRS modules
const mockOrchestrator = {
sessionId: 'test-session',
bookId: 'test-book',
chapterId: 'test-chapter',
_eventBus: {
emit: (event, data, sender) => {
console.log(`Event emitted: ${event}`, data);
}
}
};
const mockLLMValidator = {
testConnectivity: async () => ({ success: true, provider: 'openai' }),
iaEngine: {
validateEducationalContent: async (prompt, options) => {
// Mock AI response
return '[answer]yes [explanation]This is a mock validation response for testing purposes.';
}
}
};
const mockPrerequisiteEngine = {
canUnlock: (type, content) => ({ canUnlock: true, reason: 'test' }),
markWordMastered: (word, metadata) => console.log(`Word mastered: ${word}`, metadata),
markPhraseMastered: (phrase, metadata) => console.log(`Phrase mastered: ${phrase}`, metadata),
markGrammarMastered: (rule, metadata) => console.log(`Grammar mastered: ${rule}`, metadata)
};
const mockContextMemory = {
recordInteraction: (interaction) => console.log('Interaction recorded:', interaction)
};
const testFramework = new TestFramework();
// Test ExerciseModuleInterface
testFramework.describe('ExerciseModuleInterface - Contract Validation', function() {
let ExerciseModuleInterface;
this.beforeAll(async () => {
try {
ExerciseModuleInterface = (await import('../../DRS/interfaces/ExerciseModuleInterface.js')).default;
} catch (error) {
console.warn('Could not import ExerciseModuleInterface, using mock');
ExerciseModuleInterface = class MockExerciseModuleInterface {
canRun() { throw new Error('ExerciseModuleInterface.canRun() must be implemented by subclass'); }
async present() { throw new Error('ExerciseModuleInterface.present() must be implemented by subclass'); }
async validate() { throw new Error('ExerciseModuleInterface.validate() must be implemented by subclass'); }
getProgress() { throw new Error('ExerciseModuleInterface.getProgress() must be implemented by subclass'); }
cleanup() { throw new Error('ExerciseModuleInterface.cleanup() must be implemented by subclass'); }
getMetadata() { throw new Error('ExerciseModuleInterface.getMetadata() must be implemented by subclass'); }
};
}
});
this.it('should enforce implementation of all required methods', (assert) => {
const interface_ = new ExerciseModuleInterface();
// All methods should throw errors when not implemented
assert.assertThrows(
() => interface_.canRun([], {}),
'ExerciseModuleInterface.canRun() must be implemented by subclass'
);
assert.assertThrows(
() => interface_.present(null, {}),
'ExerciseModuleInterface.present() must be implemented by subclass'
);
assert.assertThrows(
() => interface_.validate('', {}),
'ExerciseModuleInterface.validate() must be implemented by subclass'
);
assert.assertThrows(
() => interface_.getProgress(),
'ExerciseModuleInterface.getProgress() must be implemented by subclass'
);
assert.assertThrows(
() => interface_.cleanup(),
'ExerciseModuleInterface.cleanup() must be implemented by subclass'
);
assert.assertThrows(
() => interface_.getMetadata(),
'ExerciseModuleInterface.getMetadata() must be implemented by subclass'
);
});
});
// Test TextModule
testFramework.describe('TextModule - Reading Comprehension', function() {
let TextModule;
let textModule;
this.beforeAll(async () => {
try {
TextModule = (await import('../../DRS/exercise-modules/TextModule.js')).default;
} catch (error) {
console.warn('Could not import TextModule, skipping tests');
TextModule = null;
}
});
this.beforeEach(() => {
if (TextModule) {
textModule = new TextModule(mockOrchestrator, mockLLMValidator, mockPrerequisiteEngine, mockContextMemory);
}
});
this.afterEach(() => {
if (textModule) {
try {
textModule.cleanup();
} catch (error) {
// Ignore cleanup errors in tests
}
}
});
this.it('should initialize with correct dependencies', (assert) => {
if (!TextModule) {
console.log('Skipping TextModule test - module not available');
return;
}
assert.assertDefined(textModule.orchestrator, 'Should have orchestrator dependency');
assert.assertDefined(textModule.llmValidator, 'Should have llmValidator dependency');
assert.assertDefined(textModule.prerequisiteEngine, 'Should have prerequisiteEngine dependency');
assert.assertDefined(textModule.contextMemory, 'Should have contextMemory dependency');
assert.assertFalse(textModule.initialized, 'Should not be initialized initially');
});
this.it('should reject initialization without required dependencies', (assert) => {
if (!TextModule) return;
assert.assertThrows(
() => new TextModule(null, mockLLMValidator, mockPrerequisiteEngine, mockContextMemory),
'TextModule requires all service dependencies'
);
assert.assertThrows(
() => new TextModule(mockOrchestrator, null, mockPrerequisiteEngine, mockContextMemory),
'TextModule requires all service dependencies'
);
});
this.it('should initialize correctly', async (assert) => {
if (!TextModule) return;
await textModule.init();
assert.assertTrue(textModule.initialized, 'Should be initialized after init()');
});
this.it('should implement all required interface methods', (assert) => {
if (!TextModule) return;
// Check that methods exist and don't throw "not implemented" errors
assert.assertDefined(textModule.canRun, 'Should have canRun method');
assert.assertDefined(textModule.present, 'Should have present method');
assert.assertDefined(textModule.validate, 'Should have validate method');
assert.assertDefined(textModule.getProgress, 'Should have getProgress method');
assert.assertDefined(textModule.cleanup, 'Should have cleanup method');
assert.assertDefined(textModule.getMetadata, 'Should have getMetadata method');
});
this.it('should return correct metadata', (assert) => {
if (!TextModule) return;
const metadata = textModule.getMetadata();
assert.assertEqual(metadata.name, 'TextModule');
assert.assertEqual(metadata.type, 'text');
assert.assertDefined(metadata.version);
assert.assertDefined(metadata.description);
assert.assertTrue(Array.isArray(metadata.capabilities));
assert.assertContains(metadata.capabilities, 'text_comprehension');
});
this.it('should handle canRun logic correctly', (assert) => {
if (!TextModule) return;
// Test with empty content
const emptyContent = { texts: [] };
assert.assertFalse(textModule.canRun([], emptyContent), 'Should return false for empty texts');
// Test with available content
const validContent = {
texts: [
{ id: 'text1', title: 'Test Text', content: 'Sample content' }
]
};
assert.assertTrue(textModule.canRun([], validContent), 'Should return true for available texts');
});
this.it('should validate user input correctly', async (assert) => {
if (!TextModule) return;
await textModule.init();
// Set up mock exercise data
textModule.currentText = { title: 'Test', content: 'Test content' };
textModule.currentQuestion = { question: 'Test question?', keywords: ['test'] };
textModule.questionIndex = 0;
textModule.questions = [textModule.currentQuestion];
const result = await textModule.validate('This is a test answer', {});
assert.assertDefined(result.score, 'Should return a score');
assert.assertDefined(result.correct, 'Should return correct status');
assert.assertDefined(result.feedback, 'Should return feedback');
assert.assertTrue(typeof result.score === 'number', 'Score should be a number');
assert.assertTrue(typeof result.correct === 'boolean', 'Correct should be boolean');
});
this.it('should track progress correctly', (assert) => {
if (!TextModule) return;
textModule.questions = [
{ question: 'Q1' },
{ question: 'Q2' },
{ question: 'Q3' }
];
textModule.questionResults = [
{ correct: true, score: 90 },
{ correct: false, score: 60 }
];
const progress = textModule.getProgress();
assert.assertEqual(progress.type, 'text');
assert.assertEqual(progress.totalQuestions, 3);
assert.assertEqual(progress.completedQuestions, 2);
assert.assertEqual(progress.correctAnswers, 1);
assert.assertEqual(progress.progressPercentage, 67); // 2/3 * 100, rounded
assert.assertEqual(progress.comprehensionRate, 50); // 1/2 * 100
});
});
// Test AudioModule
testFramework.describe('AudioModule - Listening Exercises', function() {
let AudioModule;
let audioModule;
this.beforeAll(async () => {
try {
AudioModule = (await import('../../DRS/exercise-modules/AudioModule.js')).default;
} catch (error) {
console.warn('Could not import AudioModule, skipping tests');
AudioModule = null;
}
});
this.beforeEach(() => {
if (AudioModule) {
audioModule = new AudioModule(mockOrchestrator, mockLLMValidator, mockPrerequisiteEngine, mockContextMemory);
}
});
this.afterEach(() => {
if (audioModule) {
try {
audioModule.cleanup();
} catch (error) {
// Ignore cleanup errors
}
}
});
this.it('should initialize correctly and track playback', async (assert) => {
if (!AudioModule) return;
await audioModule.init();
assert.assertEqual(audioModule.playCount, 0, 'Should start with 0 playbacks');
assert.assertFalse(audioModule.initialized === false, 'Should be initialized');
});
this.it('should handle audio-specific validation with playback penalties', async (assert) => {
if (!AudioModule) return;
await audioModule.init();
// Set up mock data
audioModule.currentAudio = { title: 'Test Audio', duration: 30 };
audioModule.currentQuestion = { question: 'What did you hear?', keywords: ['audio'] };
audioModule.playCount = 6; // Exceeds maxPlaybacks (5)
audioModule.questionIndex = 0;
audioModule.questions = [audioModule.currentQuestion];
const result = await audioModule.validate('I heard test audio', {});
// Should apply penalty for excessive playbacks
assert.assertTrue(result.feedback.includes('excessive playbacks') || result.score < 90,
'Should apply penalty for too many playbacks');
});
this.it('should return audio-specific progress data', (assert) => {
if (!AudioModule) return;
audioModule.currentAudio = { title: 'Test Audio' };
audioModule.playCount = 3;
audioModule.questions = [{ question: 'Q1' }];
audioModule.questionResults = [{ correct: true, score: 85 }];
const progress = audioModule.getProgress();
assert.assertEqual(progress.type, 'audio');
assert.assertEqual(progress.playbackCount, 3);
assert.assertDefined(progress.audioTitle);
});
});
// Test ImageModule
testFramework.describe('ImageModule - Visual Comprehension', function() {
let ImageModule;
let imageModule;
this.beforeAll(async () => {
try {
ImageModule = (await import('../../DRS/exercise-modules/ImageModule.js')).default;
} catch (error) {
console.warn('Could not import ImageModule, skipping tests');
ImageModule = null;
}
});
this.beforeEach(() => {
if (ImageModule) {
imageModule = new ImageModule(mockOrchestrator, mockLLMValidator, mockPrerequisiteEngine, mockContextMemory);
}
});
this.afterEach(() => {
if (imageModule) {
try {
imageModule.cleanup();
} catch (error) {
// Ignore cleanup errors
}
}
});
this.it('should initialize and track viewing time', async (assert) => {
if (!ImageModule) return;
await imageModule.init();
assert.assertEqual(imageModule.viewingTime, 0, 'Should start with 0 viewing time');
assert.assertNull(imageModule.startViewTime, 'Should start with null view timer');
});
this.it('should handle image-specific metadata', (assert) => {
if (!ImageModule) return;
const metadata = imageModule.getMetadata();
assert.assertEqual(metadata.name, 'ImageModule');
assert.assertEqual(metadata.type, 'image');
assert.assertContains(metadata.capabilities, 'image_comprehension');
assert.assertContains(metadata.capabilities, 'visual_analysis');
assert.assertTrue(metadata.aiRequired, 'Image module should require AI for vision analysis');
});
this.it('should track observation time in progress', (assert) => {
if (!ImageModule) return;
imageModule.viewingTime = 15; // 15 seconds
imageModule.currentImage = { title: 'Test Image' };
const progress = imageModule.getProgress();
assert.assertEqual(progress.type, 'image');
assert.assertEqual(progress.observationTime, 15);
});
});
// Test GrammarModule
testFramework.describe('GrammarModule - Grammar Exercises', function() {
let GrammarModule;
let grammarModule;
this.beforeAll(async () => {
try {
GrammarModule = (await import('../../DRS/exercise-modules/GrammarModule.js')).default;
} catch (error) {
console.warn('Could not import GrammarModule, skipping tests');
GrammarModule = null;
}
});
this.beforeEach(() => {
if (GrammarModule) {
grammarModule = new GrammarModule(mockOrchestrator, mockLLMValidator, mockPrerequisiteEngine, mockContextMemory);
}
});
this.afterEach(() => {
if (grammarModule) {
try {
grammarModule.cleanup();
} catch (error) {
// Ignore cleanup errors
}
}
});
this.it('should handle different exercise types', (assert) => {
if (!GrammarModule) return;
const exerciseTypes = grammarModule.exerciseTypes;
assert.assertDefined(exerciseTypes.fill_blank, 'Should support fill in the blank');
assert.assertDefined(exerciseTypes.correction, 'Should support error correction');
assert.assertDefined(exerciseTypes.transformation, 'Should support sentence transformation');
assert.assertDefined(exerciseTypes.multiple_choice, 'Should support multiple choice');
assert.assertDefined(exerciseTypes.conjugation, 'Should support verb conjugation');
assert.assertDefined(exerciseTypes.construction, 'Should support sentence construction');
});
this.it('should track attempts and hints', (assert) => {
if (!GrammarModule) return;
grammarModule.attempts = 2;
grammarModule.hintUsed = true;
const progress = grammarModule.getProgress();
assert.assertEqual(progress.currentAttempts, 2);
assert.assertTrue(progress.hintUsed);
});
this.it('should have strict grammar validation settings', (assert) => {
if (!GrammarModule) return;
const config = grammarModule.config;
assert.assertEqual(config.temperature, 0.1, 'Should use low temperature for grammar accuracy');
assert.assertTrue(config.maxAttempts > 0, 'Should allow multiple attempts');
assert.assertTrue(config.showHints, 'Should support hints');
});
});
export { testFramework as DRSModuleTests };

411
src/utils/ContentLoader.js Normal file
View File

@ -0,0 +1,411 @@
/**
* ContentLoader - Système de chargement et analyse de contenu JSON
* Génère des rapports de contenu et des statistiques
*/
class ContentLoader {
constructor() {
this._cache = new Map();
this._contentReports = new Map();
this._booksCache = new Map();
this._booksLoaded = false;
}
/**
* Charge et analyse un fichier JSON de contenu
* @param {string} bookId - ID du livre
* @returns {Promise<Object>} - Contenu chargé avec rapport
*/
async loadContent(bookId) {
// Vérifier le cache
if (this._cache.has(bookId)) {
return this._cache.get(bookId);
}
try {
const response = await fetch(`/content/chapters/${bookId}.json`);
if (!response.ok) {
throw new Error(`Failed to load content for ${bookId}: ${response.status}`);
}
const contentData = await response.json();
// Générer le rapport de contenu
const contentReport = this._generateContentReport(contentData);
const processedContent = {
...contentData,
_meta: {
loadedAt: new Date().toISOString(),
report: contentReport
}
};
// Mettre en cache
this._cache.set(bookId, processedContent);
this._contentReports.set(bookId, contentReport);
console.log(`📊 Content loaded for ${bookId}:`, contentReport);
return processedContent;
} catch (error) {
console.error(`❌ Error loading content for ${bookId}:`, error);
throw error;
}
}
/**
* Génère un rapport détaillé du contenu
* @param {Object} contentData - Données JSON du contenu
* @returns {Object} - Rapport de contenu
*/
_generateContentReport(contentData) {
const report = {
totalWords: 0,
wordTypes: {},
languages: new Set(),
difficulty: contentData.difficulty || 'unknown',
categories: {},
statistics: {},
metadata: contentData.metadata || {},
contentStructure: contentData.content_structure || {},
learningPaths: contentData.learning_paths || {},
assessment: contentData.assessment || {}
};
// Analyser le vocabulaire
if (contentData.vocabulary) {
const vocabulary = contentData.vocabulary;
report.totalWords = Object.keys(vocabulary).length;
// Analyser par type de mot
Object.entries(vocabulary).forEach(([word, data]) => {
const type = data.type || 'unknown';
report.wordTypes[type] = (report.wordTypes[type] || 0) + 1;
// Détecter les langues
if (data.user_language) {
// Détecter si c'est du chinois, français, etc.
if (/[\u4e00-\u9fff]/.test(data.user_language)) {
report.languages.add('Chinese');
} else if (/[àâäçéèêëïîôùûüÿ]/.test(data.user_language)) {
report.languages.add('French');
} else {
report.languages.add('English');
}
}
// Utiliser les sections structurées si disponibles
if (contentData.content_structure && contentData.content_structure.vocabulary_sections) {
const section = this._findWordSection(word, contentData.content_structure.vocabulary_sections);
if (section) {
report.categories[section.title] = (report.categories[section.title] || 0) + 1;
}
} else {
// Fallback sur l'ancien système de catégorisation
const category = this._categorizeWord(word, data);
report.categories[category] = (report.categories[category] || 0) + 1;
}
});
}
// Convertir Set en Array pour JSON
report.languages = Array.from(report.languages);
// Statistiques finales avec les nouvelles métadonnées
report.statistics = {
mostCommonType: this._getMostCommon(report.wordTypes),
mostCommonCategory: this._getMostCommon(report.categories),
averageWordLength: this._calculateAverageWordLength(contentData.vocabulary),
complexityScore: this._calculateComplexityScore(report),
estimatedHours: contentData.metadata?.estimated_hours || 0,
totalSections: contentData.content_structure?.vocabulary_sections?.length || 0,
totalSentences: contentData.sentences?.length || 0,
learningPathsCount: Object.keys(contentData.learning_paths || {}).length
};
return report;
}
/**
* Trouve la section d'un mot dans la structure de contenu
* @param {string} word - Le mot à chercher
* @param {Array} sections - Les sections de vocabulaire
* @returns {Object|null} - Section trouvée ou null
*/
_findWordSection(word, sections) {
for (const section of sections) {
if (section.words && section.words.includes(word)) {
return section;
}
}
return null;
}
/**
* Catégorise un mot selon son contexte
* @param {string} word - Le mot à catégoriser
* @param {Object} data - Données du mot
* @returns {string} - Catégorie
*/
_categorizeWord(word, data) {
const lowerWord = word.toLowerCase();
const translation = (data.user_language || '').toLowerCase();
// Catégories basées sur des mots-clés
if (lowerWord.includes('house') || lowerWord.includes('room') || lowerWord.includes('building') ||
translation.includes('房') || translation.includes('室') || lowerWord.includes('home')) {
return 'Housing & Home';
}
if (lowerWord.includes('food') || lowerWord.includes('eat') || lowerWord.includes('cook') ||
translation.includes('食') || translation.includes('饭') || lowerWord.includes('restaurant')) {
return 'Food & Dining';
}
if (lowerWord.includes('work') || lowerWord.includes('job') || lowerWord.includes('office') ||
translation.includes('工作') || translation.includes('职')) {
return 'Work & Career';
}
if (lowerWord.includes('family') || lowerWord.includes('mother') || lowerWord.includes('father') ||
translation.includes('家') || translation.includes('妈') || translation.includes('爸')) {
return 'Family & Relationships';
}
if (lowerWord.includes('time') || lowerWord.includes('day') || lowerWord.includes('year') ||
translation.includes('时间') || translation.includes('天') || translation.includes('年')) {
return 'Time & Calendar';
}
if (data.type === 'adjective') return 'Descriptive Words';
if (data.type === 'verb') return 'Actions & Verbs';
if (data.type === 'noun') return 'Objects & Things';
return 'General Vocabulary';
}
/**
* Trouve l'élément le plus commun dans un objet
* @param {Object} obj - Objet avec des compteurs
* @returns {string} - Clé la plus fréquente
*/
_getMostCommon(obj) {
return Object.entries(obj).reduce((a, b) => obj[a] > obj[b] ? a : b, Object.keys(obj)[0]);
}
/**
* Calcule la longueur moyenne des mots
* @param {Object} vocabulary - Vocabulaire
* @returns {number} - Longueur moyenne
*/
_calculateAverageWordLength(vocabulary) {
if (!vocabulary) return 0;
const words = Object.keys(vocabulary);
const totalLength = words.reduce((sum, word) => sum + word.length, 0);
return Math.round((totalLength / words.length) * 100) / 100;
}
/**
* Calcule un score de complexité
* @param {Object} report - Rapport de contenu
* @returns {number} - Score de 1 à 10
*/
_calculateComplexityScore(report) {
let score = 5; // Base
// Plus de mots = plus complexe
if (report.totalWords > 100) score += 1;
if (report.totalWords > 200) score += 1;
// Diversité des types de mots
const typeCount = Object.keys(report.wordTypes).length;
if (typeCount > 5) score += 1;
// Longueur moyenne des mots
if (report.statistics?.averageWordLength > 7) score += 1;
// Difficulté déclarée
if (report.difficulty === 'advanced') score += 2;
if (report.difficulty === 'intermediate') score += 1;
return Math.min(10, Math.max(1, score));
}
/**
* Génère un tooltip HTML pour un chapitre
* @param {string} bookId - ID du livre
* @returns {string} - HTML du tooltip
*/
generateTooltipHTML(bookId) {
const report = this._contentReports.get(bookId);
if (!report) return '<div class="tooltip-content">Loading content info...</div>';
const topCategories = Object.entries(report.categories)
.sort(([,a], [,b]) => b - a)
.slice(0, 3)
.map(([cat, count]) => `${cat}: ${count} words`)
.join('<br>');
// Informations sur les métadonnées si disponibles
const metadata = report.metadata || {};
const statistics = report.statistics || {};
const metadataSection = metadata.estimated_hours ? `
<div class="tooltip-section">
<div class="section-header">📋 Learning Info:</div>
<div class="section-content">
⏱️ Est. Time: ${metadata.estimated_hours}h<br>
📖 Sections: ${statistics.totalSections || 0}<br>
💬 Sentences: ${statistics.totalSentences || 0}<br>
🎯 Paths: ${statistics.learningPathsCount || 0}
</div>
</div>
` : '';
const learningObjectives = metadata.learning_objectives ? `
<div class="tooltip-section">
<div class="section-header">🎯 Objectives:</div>
<div class="section-content">
${metadata.learning_objectives.slice(0, 2).map(obj => `• ${obj}`).join('<br>')}
${metadata.learning_objectives.length > 2 ? `<br>+${metadata.learning_objectives.length - 2} more...` : ''}
</div>
</div>
` : '';
return `
<div class="tooltip-content">
<div class="tooltip-header">
<strong>📚 ${metadata.source || 'Content Overview'}</strong>
${metadata.version ? `<span class="version">v${metadata.version}</span>` : ''}
</div>
<div class="tooltip-stats">
<div class="stat-item">
<span class="stat-label">📊 Total Words:</span>
<span class="stat-value">${report.totalWords}</span>
</div>
<div class="stat-item">
<span class="stat-label">🏷️ Word Types:</span>
<span class="stat-value">${Object.keys(report.wordTypes).length}</span>
</div>
<div class="stat-item">
<span class="stat-label">🌐 Languages:</span>
<span class="stat-value">${report.languages.join(', ')}</span>
</div>
<div class="stat-item">
<span class="stat-label">⭐ Complexity:</span>
<span class="stat-value">${statistics.complexityScore}/10</span>
</div>
<div class="stat-item">
<span class="stat-label">📝 Level:</span>
<span class="stat-value">${metadata.target_level || report.difficulty}</span>
</div>
</div>
${metadataSection}
<div class="tooltip-categories">
<div class="categories-header">Top Categories:</div>
<div class="categories-list">${topCategories}</div>
</div>
${learningObjectives}
${metadata.content_tags ? `
<div class="tooltip-tags">
${metadata.content_tags.map(tag => `<span class="tag">#${tag}</span>`).join(' ')}
</div>
` : ''}
</div>
`;
}
/**
* Récupère le rapport d'un contenu
* @param {string} bookId - ID du livre
* @returns {Object|null} - Rapport ou null
*/
getContentReport(bookId) {
return this._contentReports.get(bookId) || null;
}
/**
* Obtient le contenu chargé pour un livre (depuis le cache)
* @param {string} bookId - ID du livre
* @returns {Object|null} - Contenu chargé ou null si pas en cache
*/
getContent(bookId) {
return this._cache.get(bookId) || null;
}
/**
* Charge tous les livres disponibles
* @returns {Promise<Array>} - Liste des livres
*/
async loadBooks() {
if (this._booksLoaded) {
return Array.from(this._booksCache.values());
}
try {
// Pour l'instant, on va récupérer la liste des livres via le serveur
// Plus tard on pourra implémenter une découverte automatique
const booksToLoad = ['sbs']; // Liste des IDs de livres à charger
for (const bookId of booksToLoad) {
try {
const response = await fetch(`/content/books/${bookId}.json`);
if (response.ok) {
const bookData = await response.json();
this._booksCache.set(bookId, bookData);
}
} catch (error) {
console.warn(`Could not load book ${bookId}:`, error);
}
}
this._booksLoaded = true;
console.log(`📚 Loaded ${this._booksCache.size} books into cache`);
return Array.from(this._booksCache.values());
} catch (error) {
console.error('Error loading books:', error);
return [];
}
}
/**
* Obtient tous les livres (depuis le cache)
* @returns {Array} - Liste des livres ou tableau vide
*/
getBooks() {
return Array.from(this._booksCache.values());
}
/**
* Obtient un livre spécifique
* @param {string} bookId - ID du livre
* @returns {Object|null} - Données du livre ou null
*/
getBook(bookId) {
return this._booksCache.get(bookId) || null;
}
/**
* Obtient les chapitres d'un livre
* @param {string} bookId - ID du livre
* @returns {Array} - Liste des chapitres
*/
getBookChapters(bookId) {
const book = this._booksCache.get(bookId);
return book ? book.chapters || [] : [];
}
/**
* Vide le cache
*/
clearCache() {
this._cache.clear();
this._contentReports.clear();
this._booksCache.clear();
this._booksLoaded = false;
}
}
export default ContentLoader;

43
start-portable.bat Normal file
View File

@ -0,0 +1,43 @@
@echo off
title Class Generator - Development Server
echo.
echo 🚀 Starting Class Generator Development Server...
echo.
:: Check if Node.js is installed
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ Node.js is not installed or not in PATH
echo Please install Node.js from https://nodejs.org/
pause
exit /b 1
)
:: Kill any existing servers first
echo 🧹 Cleaning up existing servers...
taskkill /f /im node.exe >nul 2>&1
taskkill /F /IM caddy.exe >nul 2>&1
:: Start the server
echo ✅ Node.js found
echo 🔄 Starting server on port 8080...
echo 📡 Server will be available at: http://localhost:8080
echo 🌐 ES6 modules support: ✅
echo 🔗 CORS enabled: ✅
echo 🔌 API endpoints: ✅
echo ⏳ Waiting for system initialization...
echo.
timeout /t 3 /nobreak >nul
:: Start browser
start msedge "http://localhost:8080"
:: Start Node.js server
node server.js
:: If we get here, the server stopped
echo.
echo 👋 Server stopped
pause

8
start.bat
View File

@ -14,11 +14,17 @@ if %errorlevel% neq 0 (
exit /b 1
)
:: Kill any existing servers first
echo 🧹 Cleaning up existing servers...
taskkill /f /im node.exe >nul 2>&1
:: Start the server
echo ✅ Node.js found
echo 🔄 Starting server...
echo 🔄 Starting server on port 8080...
echo ⏳ Waiting for system initialization...
echo.
timeout /t 3 /nobreak >nul
node server.js
:: If we get here, the server stopped

31
test-api.bat Normal file
View File

@ -0,0 +1,31 @@
@echo off
echo 🧪 Testing API endpoints...
echo.
echo 📚 Testing /api/books:
curl -s http://localhost:8080/api/books | findstr "id"
if %errorlevel% equ 0 (
echo ✅ API /api/books works!
) else (
echo ❌ API /api/books failed!
)
echo.
echo 📄 Testing JSON file access:
curl -s http://localhost:8080/src/chapters/sbs.json | findstr "name"
if %errorlevel% equ 0 (
echo ✅ JSON file access works!
) else (
echo ❌ JSON file access failed!
)
echo.
echo 🏠 Testing homepage:
curl -s http://localhost:8080/ | findstr "currentBookId"
if %errorlevel% equ 0 (
echo ✅ Dynamic frontend loaded!
) else (
echo ❌ Frontend issue!
)
pause

341
test-settings.html Normal file
View File

@ -0,0 +1,341 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings/Debug Test - Class Generator 2.0</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.header {
text-align: center;
background: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.header h1 {
margin: 0 0 10px 0;
color: #1f2937;
}
.header p {
margin: 0;
color: #6b7280;
}
.controls {
background: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.controls h3 {
margin-top: 0;
}
.control-group {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 15px;
}
.btn {
background: #3b82f6;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.btn:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.btn:active {
transform: translateY(0);
}
.btn.secondary {
background: #10b981;
}
.btn.secondary:hover {
background: #059669;
}
.btn.danger {
background: #ef4444;
}
.btn.danger:hover {
background: #dc2626;
}
#main-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
min-height: 400px;
}
.status {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.status-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid #e9ecef;
}
.status-item:last-child {
border-bottom: none;
}
.status-label {
font-weight: 500;
color: #495057;
}
.status-value {
color: #28a745;
font-weight: 600;
}
.status-value.error {
color: #dc3545;
}
.status-value.warning {
color: #ffc107;
}
.footer {
text-align: center;
margin-top: 30px;
color: white;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<h1>🔧 Settings/Debug Test Page</h1>
<p>Class Generator 2.0 - Ultra-Modular System</p>
</div>
<div class="controls">
<h3>🎛️ Test Controls</h3>
<div class="control-group">
<button class="btn" onclick="navigateToSettings()">
🔧 Navigate to Settings
</button>
<button class="btn secondary" onclick="testDirectShow()">
📱 Show Settings Direct
</button>
<button class="btn" onclick="testSystemStatus()">
⚙️ Test System Status
</button>
</div>
<div class="control-group">
<button class="btn" onclick="testEventBus()">
📡 Test EventBus
</button>
<button class="btn secondary" onclick="testModuleLoader()">
📦 Test ModuleLoader
</button>
<button class="btn danger" onclick="clearAll()">
🗑️ Clear All
</button>
</div>
</div>
<div class="status" id="status-panel">
<h3>📊 System Status</h3>
<div class="status-item">
<span class="status-label">Application:</span>
<span class="status-value" id="app-status">Loading...</span>
</div>
<div class="status-item">
<span class="status-label">Settings Module:</span>
<span class="status-value" id="settings-module-status">Not Loaded</span>
</div>
<div class="status-item">
<span class="status-label">Router:</span>
<span class="status-value" id="router-status">Not Ready</span>
</div>
<div class="status-item">
<span class="status-label">Current Route:</span>
<span class="status-value" id="current-route">None</span>
</div>
</div>
<!-- Main content container where Settings will render -->
<div id="main-content"></div>
<div class="footer">
<p>Open browser console (F12) to see detailed logs</p>
</div>
<!-- Load the modular system -->
<script type="module">
import app from './src/Application.js';
// Global access for debugging
window.app = app;
// Test functions
window.navigateToSettings = function() {
try {
console.log('🔧 Navigating to settings...');
const router = app.getCore()?.router;
if (router) {
router.navigate('/settings');
updateStatus();
} else {
console.error('❌ Router not available');
}
} catch (error) {
console.error('❌ Navigation error:', error);
}
};
window.testDirectShow = function() {
try {
console.log('📱 Testing direct settings show...');
const settingsModule = app.getModule('settingsDebug');
const container = document.getElementById('main-content');
if (settingsModule && container) {
settingsModule.show(container);
updateStatus();
} else {
console.error('❌ Settings module or container not available');
}
} catch (error) {
console.error('❌ Direct show error:', error);
}
};
window.testSystemStatus = function() {
console.log('⚙️ Testing system status...');
const status = app.getStatus();
console.table(status);
updateStatus();
};
window.testEventBus = function() {
try {
console.log('📡 Testing EventBus...');
const eventBus = app.getCore()?.eventBus;
if (eventBus) {
eventBus.emit('test:event', { message: 'Hello from test!' }, 'TestPage');
console.log('✅ EventBus test completed');
} else {
console.error('❌ EventBus not available');
}
updateStatus();
} catch (error) {
console.error('❌ EventBus test error:', error);
}
};
window.testModuleLoader = function() {
try {
console.log('📦 Testing ModuleLoader...');
const moduleLoader = app.getCore()?.moduleLoader;
if (moduleLoader) {
const status = moduleLoader.getStatus();
console.log('Loaded modules:', status.loaded);
console.log('Failed modules:', status.failed);
} else {
console.error('❌ ModuleLoader not available');
}
updateStatus();
} catch (error) {
console.error('❌ ModuleLoader test error:', error);
}
};
window.clearAll = function() {
console.log('🗑️ Clearing all...');
document.getElementById('main-content').innerHTML = '';
updateStatus();
};
// Update status display
function updateStatus() {
try {
const status = app.getStatus();
// Application status
document.getElementById('app-status').textContent =
status.isRunning ? 'Running ✅' : 'Stopped ❌';
// Settings module status
const settingsModule = app.getModule('settingsDebug');
document.getElementById('settings-module-status').textContent =
settingsModule ? 'Loaded ✅' : 'Not Loaded ❌';
// Router status
const router = app.getCore()?.router;
document.getElementById('router-status').textContent =
router ? 'Ready ✅' : 'Not Ready ❌';
// Current route
const currentRoute = router?.getCurrentRoute();
document.getElementById('current-route').textContent =
currentRoute?.path || window.location.pathname || 'None';
} catch (error) {
console.error('❌ Status update error:', error);
}
}
// Set up periodic status updates
setInterval(updateStatus, 2000);
// Initial status update when app is ready
app.getCore().eventBus.on('app:ready', () => {
console.log('🚀 Application ready! Running initial status update...');
setTimeout(updateStatus, 500);
}, 'TestPage');
// Listen for route changes
app.getCore().eventBus.on('router:route-changed', (event) => {
console.log('🛣️ Route changed:', event.data);
updateStatus();
}, 'TestPage');
// Initial update
setTimeout(updateStatus, 1000);
console.log('🧪 Test page loaded successfully!');
console.log('Available functions: navigateToSettings(), testDirectShow(), testSystemStatus()');
</script>
</body>
</html>

652
tests.html Normal file
View File

@ -0,0 +1,652 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧪 Class Generator 2.0 - Test Suite</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧪</text></svg>">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 40px;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.2em;
opacity: 0.9;
}
.test-controls {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
}
.test-controls h2 {
margin-bottom: 20px;
color: #333;
}
.control-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover:not(:disabled) {
background: #5a6268;
}
.btn-outline {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
}
.btn-outline:hover:not(:disabled) {
background: #667eea;
color: white;
}
.test-status {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
background: #f8f9fa;
border: 2px solid #e9ecef;
}
.test-status.running {
background: #e3f2fd;
border-color: #2196f3;
color: #1976d2;
}
.test-status.success {
background: #e8f5e8;
border-color: #4caf50;
color: #2e7d32;
}
.test-status.failure {
background: #ffebee;
border-color: #f44336;
color: #c62828;
}
.progress-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #1976d2;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.test-results {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
display: none;
}
.test-results.visible {
display: block;
}
.info-panel {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
border-left: 4px solid #ff9800;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.info-panel h3 {
margin-bottom: 15px;
color: #e65100;
}
.info-panel ul {
padding-left: 20px;
color: #bf360c;
}
.info-panel li {
margin-bottom: 8px;
}
.architecture-status {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.status-card {
background: white;
border-radius: 8px;
padding: 20px;
text-align: center;
border-left: 4px solid #ddd;
}
.status-card.tested {
border-left-color: #4caf50;
}
.status-card.not-tested {
border-left-color: #ff9800;
}
.status-card.failed {
border-left-color: #f44336;
}
.footer {
text-align: center;
color: white;
margin-top: 40px;
opacity: 0.8;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.header h1 {
font-size: 2em;
}
.control-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>🧪 Class Generator 2.0</h1>
<p>Comprehensive Test Suite - Architecture & Modules Validation</p>
</header>
<div class="test-controls">
<h2>Test Execution</h2>
<div class="control-buttons">
<button id="runAllTests" class="btn btn-primary">
<span>🚀</span>
Run All Tests
</button>
<button id="runCoreTests" class="btn btn-outline">
<span>🏗️</span>
Core Architecture Only
</button>
<button id="runDRSTests" class="btn btn-outline">
<span>🎮</span>
DRS Modules Only
</button>
<button id="clearResults" class="btn btn-secondary">
<span>🗑️</span>
Clear Results
</button>
</div>
<div id="testStatus" class="test-status" style="display: none;">
<div class="progress-indicator">
<div class="spinner"></div>
<span>Initializing test environment...</span>
</div>
</div>
<div class="info-panel">
<h3>📋 What This Tests</h3>
<ul>
<li><strong>Core Architecture:</strong> Module.js, EventBus.js, ModuleLoader.js validation</li>
<li><strong>DRS Modules:</strong> TextModule, AudioModule, ImageModule, GrammarModule functionality</li>
<li><strong>Integration:</strong> Module contracts, dependency injection, event communication</li>
<li><strong>Performance:</strong> Loading times, memory management, execution efficiency</li>
<li><strong>Quality:</strong> Code architecture adherence and best practices</li>
</ul>
</div>
</div>
<div id="testResults" class="test-results">
<!-- Test results will be populated here -->
</div>
<div class="architecture-status">
<div class="status-card not-tested">
<h3>🏗️ Core Architecture</h3>
<p>Module system integrity and event communication validation</p>
<div id="coreStatus">Not Tested</div>
</div>
<div class="status-card not-tested">
<h3>🎮 DRS Modules</h3>
<p>Exercise modules functionality and interface compliance</p>
<div id="drsStatus">Not Tested</div>
</div>
<div class="status-card not-tested">
<h3>⚡ Performance</h3>
<p>Execution speed and memory efficiency metrics</p>
<div id="perfStatus">Not Tested</div>
</div>
<div class="status-card not-tested">
<h3>🔄 Integration</h3>
<p>Cross-module communication and dependency management</p>
<div id="intStatus">Not Tested</div>
</div>
</div>
<footer class="footer">
<p>Class Generator 2.0 - Ultra-Modular Educational Platform</p>
<p>Built with Vanilla JavaScript, ES6 Modules, and Strict Architecture Patterns</p>
</footer>
</div>
<script type="module">
import { runAllTests } from './src/testing/runTests.js';
// Test execution state
let currentTestRun = null;
// DOM elements
const runAllBtn = document.getElementById('runAllTests');
const runCoreBtn = document.getElementById('runCoreTests');
const runDRSBtn = document.getElementById('runDRSTests');
const clearBtn = document.getElementById('clearResults');
const testStatus = document.getElementById('testStatus');
const testResults = document.getElementById('testResults');
// Status cards
const coreStatus = document.getElementById('coreStatus');
const drsStatus = document.getElementById('drsStatus');
const perfStatus = document.getElementById('perfStatus');
const intStatus = document.getElementById('intStatus');
// Button event handlers
runAllBtn.addEventListener('click', () => executeTests('all'));
runCoreBtn.addEventListener('click', () => executeTests('core'));
runDRSBtn.addEventListener('click', () => executeTests('drs'));
clearBtn.addEventListener('click', clearResults);
/**
* Execute tests with progress tracking
*/
async function executeTests(testType = 'all') {
if (currentTestRun) {
alert('Tests are already running. Please wait for completion.');
return;
}
// Show progress
showTestProgress('Initializing test environment...');
// Disable buttons
setButtonsDisabled(true);
try {
currentTestRun = true;
// Update progress
updateTestProgress('Loading test modules...');
// Run tests
const results = await runAllTests(testResults);
// Update status cards
updateStatusCards(results);
// Show results
showTestResults(results);
// Update progress
updateTestProgress(
results.summary.success
? '✅ All tests completed successfully!'
: '⚠️ Tests completed with some failures',
results.summary.success ? 'success' : 'failure'
);
} catch (error) {
console.error('Test execution failed:', error);
updateTestProgress(`❌ Test execution failed: ${error.message}`, 'failure');
// Show error in results
testResults.innerHTML = `
<div class="error-report">
<h2>❌ Test Execution Error</h2>
<div class="error-details">
<p><strong>Error:</strong> ${error.message}</p>
<pre>${error.stack}</pre>
</div>
<div class="error-actions">
<button onclick="location.reload()" class="btn btn-primary">🔄 Reload Page</button>
<button onclick="window.open('browser-console', '_blank')" class="btn btn-outline">🔍 Open Browser Console</button>
</div>
</div>
`;
testResults.classList.add('visible');
} finally {
currentTestRun = null;
setButtonsDisabled(false);
}
}
/**
* Show test progress indicator
*/
function showTestProgress(message, status = 'running') {
testStatus.style.display = 'block';
testStatus.className = `test-status ${status}`;
if (status === 'running') {
testStatus.innerHTML = `
<div class="progress-indicator">
<div class="spinner"></div>
<span>${message}</span>
</div>
`;
} else {
testStatus.innerHTML = `
<div class="progress-indicator">
<span>${message}</span>
</div>
`;
}
}
/**
* Update test progress message
*/
function updateTestProgress(message, status = 'running') {
if (status === 'running') {
testStatus.querySelector('span').textContent = message;
} else {
showTestProgress(message, status);
}
}
/**
* Show test results
*/
function showTestResults(results) {
testResults.classList.add('visible');
// Results are already rendered by the test framework
// Just ensure visibility and add any additional info
const summaryDiv = document.createElement('div');
summaryDiv.className = 'execution-summary';
summaryDiv.innerHTML = `
<div class="summary-header">
<h2>📊 Execution Summary</h2>
<p>Completed at ${new Date().toLocaleString()}</p>
</div>
<div class="quick-stats">
<div class="stat">
<strong>${results.overall.totalTests}</strong> Total Tests
</div>
<div class="stat">
<strong>${results.overall.duration}ms</strong> Total Duration
</div>
<div class="stat">
<strong>${Math.round((results.overall.passedTests / results.overall.totalTests) * 100)}%</strong> Pass Rate
</div>
</div>
`;
testResults.insertBefore(summaryDiv, testResults.firstChild);
}
/**
* Update status cards based on test results
*/
function updateStatusCards(results) {
const coreTests = results.suites.find(s => s.suiteName.includes('Core'));
const drsTests = results.suites.find(s => s.suiteName.includes('DRS'));
// Core Architecture Status
if (coreTests) {
const coreCard = coreStatus.parentElement;
if (coreTests.success) {
coreCard.className = 'status-card tested';
coreStatus.innerHTML = '✅ All Tests Passed';
} else {
coreCard.className = 'status-card failed';
coreStatus.innerHTML = '❌ Issues Detected';
}
}
// DRS Modules Status
if (drsTests) {
const drsCard = drsStatus.parentElement;
if (drsTests.success) {
drsCard.className = 'status-card tested';
drsStatus.innerHTML = '✅ All Tests Passed';
} else {
drsCard.className = 'status-card failed';
drsStatus.innerHTML = '❌ Issues Detected';
}
}
// Performance Status
const perfCard = perfStatus.parentElement;
if (results.overall.duration < 5000) {
perfCard.className = 'status-card tested';
perfStatus.innerHTML = '✅ Excellent Performance';
} else if (results.overall.duration < 15000) {
perfCard.className = 'status-card tested';
perfStatus.innerHTML = '⚠️ Acceptable Performance';
} else {
perfCard.className = 'status-card failed';
perfStatus.innerHTML = '❌ Poor Performance';
}
// Integration Status (based on overall results)
const intCard = intStatus.parentElement;
if (results.summary.success) {
intCard.className = 'status-card tested';
intStatus.innerHTML = '✅ Well Integrated';
} else {
intCard.className = 'status-card failed';
intStatus.innerHTML = '❌ Integration Issues';
}
}
/**
* Clear test results
*/
function clearResults() {
testResults.classList.remove('visible');
testResults.innerHTML = '';
testStatus.style.display = 'none';
// Reset status cards
document.querySelectorAll('.status-card').forEach(card => {
card.className = 'status-card not-tested';
});
coreStatus.textContent = 'Not Tested';
drsStatus.textContent = 'Not Tested';
perfStatus.textContent = 'Not Tested';
intStatus.textContent = 'Not Tested';
}
/**
* Enable/disable control buttons
*/
function setButtonsDisabled(disabled) {
runAllBtn.disabled = disabled;
runCoreBtn.disabled = disabled;
runDRSBtn.disabled = disabled;
clearBtn.disabled = disabled;
}
// Add execution summary styles
const additionalStyles = document.createElement('style');
additionalStyles.textContent = `
.execution-summary {
background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
border: 2px solid #4caf50;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.summary-header {
text-align: center;
margin-bottom: 15px;
}
.summary-header h2 {
margin-bottom: 5px;
color: #2e7d32;
}
.quick-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 15px;
}
.stat {
text-align: center;
}
.stat strong {
display: block;
font-size: 1.5em;
color: #1b5e20;
}
.error-report {
background: #ffebee;
border: 2px solid #f44336;
border-radius: 8px;
padding: 30px;
text-align: center;
}
.error-report h2 {
color: #c62828;
margin-bottom: 20px;
}
.error-details {
background: white;
border-radius: 4px;
padding: 20px;
margin: 20px 0;
text-align: left;
}
.error-details pre {
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
font-size: 0.85em;
max-height: 200px;
overflow-y: auto;
}
.error-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
`;
document.head.appendChild(additionalStyles);
// Show welcome message
console.log('🧪 Class Generator 2.0 Test Suite loaded');
console.log('Click "Run All Tests" to validate the architecture and modules');
</script>
</body>
</html>