Implement click-to-speak functionality with visual pronunciation feedback in QuizGame and FlashcardLearning. When users click on vocabulary options or answers, the system plays native language audio (e.g., Chinese) and highlights the pronunciation (pinyin) with animation. Features: - TTS uses chapter language (zh-CN, en-US, etc.) for correct pronunciation - Pronunciation text displayed under each quiz option - Click on answer triggers TTS + 2s highlight animation - Hover effects on clickable elements - Auto-detect and use matching voice from speechSynthesis API 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| assets | ||
| content | ||
| Legacy | ||
| saves | ||
| src | ||
| tests | ||
| .envTMP | ||
| .gitignore | ||
| CLAUDE.md | ||
| DRS_IMPLEMENTATION_PLAN.md | ||
| DRS.md | ||
| fix-server.bat | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| restart-clean.bat | ||
| server.js | ||
| SMART_PREVIEW_SPECS.md | ||
| start-portable.bat | ||
| start.bat | ||
| test-api.bat | ||
| test-factory.html | ||
| TEST-GUIDE.md | ||
Class Generator 2.0
Educational Games Platform with Ultra-Modular Architecture
A complete rewrite of the Class Generator system using strict modular design patterns, vanilla JavaScript, and rigorous separation of concerns.
🚀 Quick Start
Method 1: Batch File (Windows)
# Double-click or run:
start.bat
Method 2: Command Line
# Install Node.js (if not already installed)
# Then run:
node server.js
# Or using npm:
npm start
Method 3: NPM Scripts
npm run dev # Start development server
npm run serve # Same as start
Server will start on: http://localhost:3000
🏗️ Architecture Overview
Core System (Ultra-Rigid)
- Module.js - Abstract base class with sealed instances and WeakMap privates
- EventBus.js - Strict event system with validation and type safety
- ModuleLoader.js - Dependency injection with proper initialization order
- Router.js - Navigation with guards, middleware, and state management
- Application.js - Bootstrap system with auto-initialization
Key Architecture Principles
✅ Inviolable Responsibility - Each module has exactly one purpose ✅ Zero Direct Dependencies - All communication via EventBus ✅ Sealed Instances - Modules cannot be modified after creation ✅ Private State - Internal data completely inaccessible ✅ Contract Enforcement - Abstract methods must be implemented ✅ Dependency Injection - No global access, everything injected
📁 Project Structure
├── src/
│ ├── core/ # Core system modules (sealed)
│ │ ├── Module.js
│ │ ├── EventBus.js
│ │ ├── ModuleLoader.js
│ │ ├── Router.js
│ │ └── index.js
│ ├── components/ # Reusable UI components
│ ├── games/ # Game modules
│ ├── content/ # Content modules
│ ├── styles/ # Modular CSS
│ └── Application.js # Main application bootstrap
├── Legacy/ # Old system (archived)
├── index.html # Entry point
├── server.js # Development server
├── start.bat # Windows quick start
└── package.json # Node.js configuration
🔥 Features
Development Server
- ES6 Modules - Full import/export support
- CORS Enabled - For online communication
- Hot Reload Ready - Manual refresh (planned: auto-refresh)
- Proper MIME Types - All file types supported
- Security Headers - Basic security implemented
Application System
- Auto-Start - No commands needed, just open in browser
- Loading Screen - Elegant initialization feedback
- Debug Panel - F12 to toggle, shows system status
- Error Handling - Graceful error recovery
- Network Status - Real-time connectivity indicator
Module System
- Strict Validation - Errors if contracts violated
- Lifecycle Management - Proper init/destroy patterns
- Event-Driven - Loose coupling via events
- Dependency Resolution - Automatic dependency loading
🎮 Creating Game Modules
import Module from '../core/Module.js';
class MyGame extends Module {
constructor(name, dependencies, config) {
super(name, ['eventBus', 'ui']);
this._eventBus = dependencies.eventBus;
this._ui = dependencies.ui;
this._config = config;
}
async init() {
// Initialize game
this._eventBus.on('game:start', this._handleStart.bind(this), this.name);
this._setInitialized();
}
async destroy() {
// Cleanup
this._setDestroyed();
}
_handleStart(event) {
// Game logic here
}
}
export default MyGame;
🧩 Adding to Application
// In Application.js modules config:
{
name: 'myGame',
path: './games/MyGame.js',
dependencies: ['eventBus', 'ui'],
config: { difficulty: 'easy' }
}
🐛 Debugging
Debug Panel (F12)
- System status and uptime
- Loaded modules list
- Event history
- Performance metrics
Console Access
// Global app instance available in console:
window.app.getStatus() // Application status
window.app.getCore().eventBus // Access EventBus
window.app.getCore().router // Access Router
Common Issues
Module loading fails:
- Check file paths in Application.js
- Verify module extends Module base class
- Ensure all dependencies are listed
Events not working:
- Verify module is registered with EventBus
- Check event type strings match exactly
- Ensure module is initialized before emitting
🔒 Security & Rigidity
The architecture enforces several levels of protection:
- Sealed Classes -
Object.seal()prevents property addition/deletion - Frozen Prototypes -
Object.freeze()prevents method modification - WeakMap Privates - Internal state completely hidden
- Abstract Enforcement - Missing methods throw errors
- Validation Layers - Input validation at every boundary
Violation attempts will throw explicit errors with helpful messages.
🚀 Next Steps
- Create Game Modules - Implement actual games using new architecture
- Add Content System - Port content loading from Legacy system
- UI Components - Build reusable component library
- Performance - Add lazy loading and caching
- Testing - Add automated test suite
📝 Migration from Legacy
The Legacy/ folder contains the complete old system. Key differences:
-
Old: Global variables and direct coupling
-
New: Strict modules with dependency injection
-
Old: CSS modifications in global files
-
New: Component-scoped CSS injection
-
Old: Manual module registration
-
New: Automatic loading with dependency resolution
Built with strict architectural principles for maintainable, scalable educational software.