From 475006e91201163c76bbf2aaf4ee71d1674942f7 Mon Sep 17 00:00:00 2001
From: StillHammer <alexistrouve.pro@gmail.com>
Date: Fri, 19 Sep 2025 14:39:08 +0800
Subject: [PATCH] Add Word Discovery game with auto-play TTS and Settings
 system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New Word Discovery game with image support and practice phases
- Auto-play TTS on word appearance with speed control (0.7x-1.1x)
- Complete Settings page with TTS controls and debug interface
- Language standardization with BCP 47 codes (en-US, zh-CN, fr-FR)
- Media fallback handling for missing images and audio
- Settings Manager with voice selection and debug tools

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 css/settings.css                        |  314 +++++++
 index.html                              |  102 ++-
 js/content/chinese-long-story.js        |    1 +
 js/content/example-minimal.js           |   59 ++
 js/content/example-with-images.js       |   81 ++
 js/content/sbs-level-7-8-new.js         |    1 +
 js/content/story-prototype-optimized.js |    1 +
 js/content/test-compatibility.js        |    1 +
 js/content/test-minimal.js              |    1 +
 js/content/test-rich.js                 |    1 +
 js/core/content-scanner.js              |    1 +
 js/core/game-loader.js                  |    3 +-
 js/core/navigation.js                   |   25 +
 js/core/settings-manager.js             |  397 +++++++++
 js/games/word-discovery.js              | 1049 +++++++++++++++++++++++
 15 files changed, 2033 insertions(+), 4 deletions(-)
 create mode 100644 css/settings.css
 create mode 100644 js/content/example-minimal.js
 create mode 100644 js/content/example-with-images.js
 create mode 100644 js/core/settings-manager.js
 create mode 100644 js/games/word-discovery.js

diff --git a/css/settings.css b/css/settings.css
new file mode 100644
index 0000000..da92327
--- /dev/null
+++ b/css/settings.css
@@ -0,0 +1,314 @@
+/* === SETTINGS PAGE STYLES === */
+
+.settings-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.settings-section {
+    background: var(--card-background);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+}
+
+.settings-section h3 {
+    font-size: 1.4em;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* === SETTING GROUPS === */
+.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);
+    min-width: 140px;
+}
+
+.setting-group input[type="range"] {
+    flex: 1;
+    margin: 0 15px;
+    accent-color: var(--primary-color);
+}
+
+.setting-group select {
+    min-width: 200px;
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 14px;
+    background: white;
+}
+
+.setting-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+/* === DEBUG INFO === */
+.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);
+}
+
+.info-item .value {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.info-item .value.small {
+    font-size: 0.85em;
+    max-width: 400px;
+    word-break: break-all;
+}
+
+/* === DEBUG CONTROLS === */
+.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);
+    color: white;
+    font-weight: 500;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.debug-btn:hover {
+    background: #2563eb;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+}
+
+.debug-btn:active {
+    transform: translateY(0);
+}
+
+/* === DEBUG OUTPUT === */
+.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: var(--transition);
+}
+
+.clear-btn:hover {
+    background: #444;
+    border-color: #666;
+}
+
+/* === VOICE LIST === */
+.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);
+    border-radius: 8px;
+    padding: 12px;
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+.voice-item:hover {
+    background: #e9ecef;
+    border-color: var(--primary-color);
+}
+
+.voice-item.selected {
+    background: var(--primary-light);
+    border-color: var(--primary-color);
+}
+
+.voice-name {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.voice-lang {
+    font-size: 0.9em;
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+}
+
+.voice-type {
+    font-size: 0.8em;
+    color: var(--accent-color);
+    font-weight: 500;
+}
+
+/* === BROWSER INFO === */
+.browser-info .info-item {
+    align-items: flex-start;
+}
+
+.browser-info .value {
+    text-align: right;
+    max-width: 60%;
+}
+
+/* === LOG COLORS === */
+.debug-log .success {
+    color: #4ade80;
+}
+
+.debug-log .error {
+    color: #f87171;
+}
+
+.debug-log .warning {
+    color: #fbbf24;
+}
+
+.debug-log .info {
+    color: #60a5fa;
+}
+
+.debug-log .timestamp {
+    color: #9ca3af;
+    font-size: 0.9em;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 768px) {
+    .settings-container {
+        padding: 15px;
+        gap: 20px;
+    }
+
+    .settings-section {
+        padding: 20px;
+    }
+
+    .setting-group {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .setting-group label {
+        min-width: auto;
+    }
+
+    .setting-group input[type="range"] {
+        width: 100%;
+        margin: 10px 0;
+    }
+
+    .setting-group select {
+        width: 100%;
+        min-width: auto;
+    }
+
+    .debug-controls {
+        grid-template-columns: 1fr;
+    }
+
+    .info-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    .voice-list {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e4c76bd..bbaf672 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/navigation.css">
     <link rel="stylesheet" href="css/games.css">
+    <link rel="stylesheet" href="css/settings.css">
 </head>
 <body>
     <!-- Top Bar with Network Status -->
@@ -45,9 +46,9 @@
                     📊 <span>Statistics</span>
                     <small>Coming soon</small>
                 </button>
-                <button class="option-card secondary" onclick="showComingSoon()">
+                <button class="option-card secondary" onclick="navigateTo('settings')">
                     ⚙️ <span>Settings</span>
-                    <small>Coming soon</small>
+                    <small>Audio & Debug Tools</small>
                 </button>
                 <button class="option-card primary" onclick="showContentCreator()">
                     🏭 <span>Content Creator</span>
@@ -91,12 +92,106 @@
                     Score: <span id="current-score">0</span>
                 </div>
             </div>
-            
+
             <div class="game-container" id="game-container">
                 <!-- The game will be loaded here dynamically -->
             </div>
         </div>
 
+        <!-- Settings Page -->
+        <div class="page" id="settings-page">
+            <div class="page-header">
+                <button class="back-btn" onclick="goBack()">← Back</button>
+                <h2>⚙️ Settings & Debug Tools</h2>
+            </div>
+
+            <div class="settings-container">
+                <!-- Audio Settings Section -->
+                <div class="settings-section">
+                    <h3>🔊 Audio Settings</h3>
+
+                    <div class="setting-group">
+                        <label>TTS Voice Speed:</label>
+                        <input type="range" id="tts-rate" min="0.5" max="2" step="0.1" value="0.8">
+                        <span id="tts-rate-value">0.8</span>
+                    </div>
+
+                    <div class="setting-group">
+                        <label>TTS Volume:</label>
+                        <input type="range" id="tts-volume" min="0" max="1" step="0.1" value="1">
+                        <span id="tts-volume-value">1.0</span>
+                    </div>
+
+                    <div class="setting-group">
+                        <label>Preferred Voice:</label>
+                        <select id="tts-voice">
+                            <option value="">Auto (System Default)</option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- TTS Debug Section -->
+                <div class="settings-section">
+                    <h3>🔧 TTS Debug Tools</h3>
+
+                    <div class="debug-info" id="tts-status">
+                        <div class="info-item">
+                            <span class="label">Browser Support:</span>
+                            <span class="value" id="browser-support">Checking...</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">Available Voices:</span>
+                            <span class="value" id="voice-count">Loading...</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">English Voices:</span>
+                            <span class="value" id="english-voice-count">Loading...</span>
+                        </div>
+                    </div>
+
+                    <div class="debug-controls">
+                        <button class="debug-btn" onclick="testBasicTTS()">🔊 Test Basic TTS</button>
+                        <button class="debug-btn" onclick="testWithCallbacks()">📞 Test with Callbacks</button>
+                        <button class="debug-btn" onclick="testGameWords()">🎮 Test Game Words</button>
+                        <button class="debug-btn" onclick="refreshVoices()">🔄 Refresh Voices</button>
+                    </div>
+
+                    <div class="debug-output" id="debug-output">
+                        <h4>Debug Output:</h4>
+                        <div class="debug-log" id="debug-log"></div>
+                        <button class="clear-btn" onclick="clearDebugLog()">Clear Log</button>
+                    </div>
+                </div>
+
+                <!-- Voice List Section -->
+                <div class="settings-section">
+                    <h3>🎤 Available Voices</h3>
+                    <div class="voice-list" id="voice-list">
+                        Loading voices...
+                    </div>
+                </div>
+
+                <!-- Browser Info Section -->
+                <div class="settings-section">
+                    <h3>🌐 Browser Information</h3>
+                    <div class="browser-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>
+        </div>
+
     </main>
 
     <!-- Modal Coming Soon -->
@@ -126,6 +221,7 @@
     <script src="js/core/json-content-loader.js"></script>
     <script src="js/core/content-game-compatibility.js"></script>
     <script src="js/tools/content-creator.js"></script>
+    <script src="js/core/settings-manager.js"></script>
     <script src="js/core/navigation.js"></script>
     <script src="js/core/game-loader.js"></script>
     <script>
diff --git a/js/content/chinese-long-story.js b/js/content/chinese-long-story.js
index eeb1ac4..496b276 100644
--- a/js/content/chinese-long-story.js
+++ b/js/content/chinese-long-story.js
@@ -7,6 +7,7 @@ window.ContentModules.ChineseLongStory = {
     name: "The Dragon's Pearl - 龙珠传说",
     description: "Long story with translation and pronunciation",
     difficulty: "intermediate",
+    language: "zh-CN",
     totalWords: 1200,
 
     vocabulary: {
diff --git a/js/content/example-minimal.js b/js/content/example-minimal.js
new file mode 100644
index 0000000..4ccd663
--- /dev/null
+++ b/js/content/example-minimal.js
@@ -0,0 +1,59 @@
+// Example content module with minimal data (no images, some missing pronunciation)
+window.ContentModules = window.ContentModules || {};
+window.ContentModules.ExampleMinimal = {
+    name: "Minimal Vocabulary Test",
+    description: "Test content with missing images and audio",
+    difficulty: "easy",
+    language: "en-US",
+
+    // Vocabulary with mixed availability of features
+    vocabulary: {
+        "hello": {
+            translation: "bonjour",
+            pronunciation: "həˈloʊ",
+            type: "greeting"
+            // No image
+        },
+        "goodbye": {
+            translation: "au revoir",
+            type: "greeting"
+            // No image, no pronunciation
+        },
+        "water": {
+            translation: "eau",
+            pronunciation: "ˈwɔːtər",
+            type: "noun"
+            // No image
+        },
+        "food": {
+            translation: "nourriture",
+            type: "noun"
+            // No image, no pronunciation
+        },
+        "happy": {
+            translation: "heureux",
+            pronunciation: "ˈhæpi",
+            type: "adjective"
+            // No image
+        },
+        "sad": {
+            translation: "triste",
+            type: "adjective"
+            // No image, no pronunciation
+        }
+    },
+
+    // Backward compatibility for other games
+    sentences: [
+        {
+            english: "Hello, how are you?",
+            chinese: "Bonjour, comment allez-vous?",
+            prononciation: "həˈloʊ haʊ ɑr ju"
+        },
+        {
+            english: "I need some water",
+            chinese: "J'ai besoin d'eau",
+            prononciation: "aɪ nid sʌm ˈwɔːtər"
+        }
+    ]
+};
\ No newline at end of file
diff --git a/js/content/example-with-images.js b/js/content/example-with-images.js
new file mode 100644
index 0000000..dd305c2
--- /dev/null
+++ b/js/content/example-with-images.js
@@ -0,0 +1,81 @@
+// Example content module with image support for Word Discovery game
+window.ContentModules = window.ContentModules || {};
+window.ContentModules.ExampleWithImages = {
+    name: "Basic Vocabulary with Images",
+    description: "Simple English words with visual support for beginners",
+    difficulty: "easy",
+    language: "en-US",
+
+    // Vocabulary with image support
+    vocabulary: {
+        "apple": {
+            translation: "pomme",
+            pronunciation: "æpəl",
+            type: "noun",
+            image: "assets/images/vocabulary/apple.png",
+            audioFile: "assets/audio/vocabulary/apple.mp3"
+        },
+        "cat": {
+            translation: "chat",
+            pronunciation: "kæt",
+            type: "noun",
+            image: "assets/images/vocabulary/cat.png",
+            audioFile: "assets/audio/vocabulary/cat_broken.mp3" // Broken path to test fallback
+        },
+        "house": {
+            translation: "maison",
+            pronunciation: "haʊs",
+            type: "noun",
+            image: "assets/images/vocabulary/house.png"
+        },
+        "car": {
+            translation: "voiture",
+            pronunciation: "kɑr",
+            type: "noun",
+            image: "assets/images/vocabulary/car.png"
+        },
+        "tree": {
+            translation: "arbre",
+            pronunciation: "tri",
+            type: "noun",
+            image: "assets/images/vocabulary/tree.png"
+        },
+        "book": {
+            translation: "livre",
+            pronunciation: "bʊk",
+            type: "noun",
+            image: "assets/images/vocabulary/book.png"
+        },
+        "sun": {
+            translation: "soleil",
+            pronunciation: "sʌn",
+            type: "noun",
+            image: "assets/images/vocabulary/sun.png"
+        },
+        "dog": {
+            translation: "chien",
+            pronunciation: "dɔg",
+            type: "noun",
+            image: "assets/images/vocabulary/dog.png"
+        }
+    },
+
+    // Backward compatibility for other games
+    sentences: [
+        {
+            english: "The apple is red",
+            chinese: "La pomme est rouge",
+            prononciation: "ðə æpəl ɪz red"
+        },
+        {
+            english: "The cat is sleeping",
+            chinese: "Le chat dort",
+            prononciation: "ðə kæt ɪz slipɪŋ"
+        },
+        {
+            english: "I live in a house",
+            chinese: "J'habite dans une maison",
+            prononciation: "aɪ lɪv ɪn ə haʊs"
+        }
+    ]
+};
\ No newline at end of file
diff --git a/js/content/sbs-level-7-8-new.js b/js/content/sbs-level-7-8-new.js
index fcdd2af..57619de 100644
--- a/js/content/sbs-level-7-8-new.js
+++ b/js/content/sbs-level-7-8-new.js
@@ -6,6 +6,7 @@ window.ContentModules.SBSLevel78New = {
     name: "SBS Level 7-8 New",
     description: "Side by Side Level 7-8 vocabulary with language-agnostic format",
     difficulty: "intermediate",
+    language: "en-US",
 
     vocabulary: {
         // Housing and Places
diff --git a/js/content/story-prototype-optimized.js b/js/content/story-prototype-optimized.js
index 9b6d734..145c6a4 100644
--- a/js/content/story-prototype-optimized.js
+++ b/js/content/story-prototype-optimized.js
@@ -7,6 +7,7 @@ window.ContentModules.StoryPrototypeOptimized = {
     name: "The Magical Library (Optimized)",
     description: "Adventure story with centralized vocabulary system",
     difficulty: "intermediate",
+    language: "en-US",
 
     // Centralized vocabulary - defined once, used everywhere
     vocabulary: {
diff --git a/js/content/test-compatibility.js b/js/content/test-compatibility.js
index 5669616..763ccc6 100644
--- a/js/content/test-compatibility.js
+++ b/js/content/test-compatibility.js
@@ -8,6 +8,7 @@ window.ContentModules.TestMinimalContent = {
     name: "Test Minimal (2 mots)",
     description: "Contenu minimal pour tester la compatibilité",
     difficulty: "easy",
+    language: "en-US",
 
     vocabulary: {
         "hello": "bonjour",
diff --git a/js/content/test-minimal.js b/js/content/test-minimal.js
index a0c3524..c40e19c 100644
--- a/js/content/test-minimal.js
+++ b/js/content/test-minimal.js
@@ -7,6 +7,7 @@ window.ContentModules.TestMinimal = {
     name: "Test Minimal (2 mots)",
     description: "Contenu minimal pour tester la compatibilité - seulement 2 mots",
     difficulty: "easy",
+    language: "en-US",
 
     vocabulary: {
         "hello": "bonjour",
diff --git a/js/content/test-rich.js b/js/content/test-rich.js
index a6ad723..e62e230 100644
--- a/js/content/test-rich.js
+++ b/js/content/test-rich.js
@@ -7,6 +7,7 @@ window.ContentModules.TestRich = {
     name: "Test Riche (complet)",
     description: "Contenu riche pour tester la compatibilité maximale",
     difficulty: "medium",
+    language: "en-US",
 
     vocabulary: {
         "apple": {
diff --git a/js/core/content-scanner.js b/js/core/content-scanner.js
index f9a28ca..4790f39 100644
--- a/js/core/content-scanner.js
+++ b/js/core/content-scanner.js
@@ -330,6 +330,7 @@ class ContentScanner {
             'english_exemple.json',       // Local JSON basic
             'english_exemple_fixed.json', // Local JSON modular
             'english_exemple_ultra_commented.json', // Local JSON ultra-modular
+            'example-with-images.js',     // Local JS with image support for Word Discovery
             // AJOUT: Fichiers générés par le système de conversion
             'sbs-level-7-8-GENERATED-from-js.json',
             'english-exemple-commented-GENERATED.json'
diff --git a/js/core/game-loader.js b/js/core/game-loader.js
index c66240b..2500387 100644
--- a/js/core/game-loader.js
+++ b/js/core/game-loader.js
@@ -322,7 +322,8 @@ const GameLoader = {
             'adventure-reader': 'AdventureReader',
             'chinese-study': 'ChineseStudy',
             'story-reader': 'StoryReader',
-            'word-storm': 'WordStorm'
+            'word-storm': 'WordStorm',
+            'word-discovery': 'WordDiscovery'
         };
         return names[gameType] || gameType;
     },
diff --git a/js/core/navigation.js b/js/core/navigation.js
index 751e537..ca72eb6 100644
--- a/js/core/navigation.js
+++ b/js/core/navigation.js
@@ -97,6 +97,12 @@ const AppNavigation = {
                     name: 'Word Storm',
                     icon: '🌪️',
                     description: 'Catch falling words before they hit the ground!'
+                },
+                'word-discovery': {
+                    enabled: true,
+                    name: 'Word Discovery',
+                    icon: '🔍',
+                    description: 'Learn new words with images and interactive practice!'
                 }
             },
             content: {
@@ -259,6 +265,9 @@ const AppNavigation = {
             case 'play':
                 this.showGamePage(game, content);
                 break;
+            case 'settings':
+                this.showSettingsPage();
+                break;
             default:
                 this.showHomePage();
         }
@@ -302,6 +311,22 @@ const AppNavigation = {
         this.updateBreadcrumb();
     },
 
+    showSettingsPage() {
+        logSh('⚙️ Displaying settings page', 'INFO');
+        this.hideAllPages();
+        document.getElementById('settings-page').classList.add('active');
+        this.currentPage = 'settings';
+        this.updateBreadcrumb();
+
+        // Initialize settings if SettingsManager is available
+        if (window.SettingsManager) {
+            // Ensure SettingsManager is initialized for this page
+            setTimeout(() => {
+                window.SettingsManager.init();
+            }, 100);
+        }
+    },
+
     // Display games selection page
     async showGamesPage(contentType) {
         logSh(`🎮 Displaying games selection page for content: ${contentType}`, 'INFO');
diff --git a/js/core/settings-manager.js b/js/core/settings-manager.js
new file mode 100644
index 0000000..3558cd5
--- /dev/null
+++ b/js/core/settings-manager.js
@@ -0,0 +1,397 @@
+// === SETTINGS MANAGER FOR TTS AND DEBUG ===
+
+const SettingsManager = {
+    // TTS Settings
+    ttsSettings: {
+        rate: 0.8,
+        volume: 1.0,
+        selectedVoice: null
+    },
+
+    availableVoices: [],
+    debugMessages: [],
+
+    init() {
+        this.loadSettings();
+        this.initTTSSettings();
+        this.setupEventListeners();
+        this.checkBrowserSupport();
+        this.loadVoices();
+        this.updateBrowserInfo();
+    },
+
+    // === SETTINGS PERSISTENCE ===
+    loadSettings() {
+        const saved = localStorage.getItem('tts-settings');
+        if (saved) {
+            try {
+                this.ttsSettings = { ...this.ttsSettings, ...JSON.parse(saved) };
+            } catch (e) {
+                console.warn('Failed to load TTS settings:', e);
+            }
+        }
+    },
+
+    saveSettings() {
+        localStorage.setItem('tts-settings', JSON.stringify(this.ttsSettings));
+    },
+
+    // === TTS SETTINGS INITIALIZATION ===
+    initTTSSettings() {
+        const rateSlider = document.getElementById('tts-rate');
+        const volumeSlider = document.getElementById('tts-volume');
+        const voiceSelect = document.getElementById('tts-voice');
+
+        if (rateSlider) {
+            rateSlider.value = this.ttsSettings.rate;
+            document.getElementById('tts-rate-value').textContent = this.ttsSettings.rate;
+        }
+
+        if (volumeSlider) {
+            volumeSlider.value = this.ttsSettings.volume;
+            document.getElementById('tts-volume-value').textContent = this.ttsSettings.volume;
+        }
+    },
+
+    setupEventListeners() {
+        // 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.saveSettings();
+            });
+        }
+
+        // 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.saveSettings();
+            });
+        }
+
+        // Voice selection
+        const voiceSelect = document.getElementById('tts-voice');
+        if (voiceSelect) {
+            voiceSelect.addEventListener('change', (e) => {
+                this.ttsSettings.selectedVoice = e.target.value;
+                this.saveSettings();
+            });
+        }
+    },
+
+    // === BROWSER SUPPORT CHECK ===
+    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';
+        }
+
+        return support;
+    },
+
+    // === VOICE MANAGEMENT ===
+    loadVoices() {
+        const loadVoicesImpl = () => {
+            this.availableVoices = speechSynthesis.getVoices();
+            this.updateVoiceInfo();
+            this.populateVoiceSelect();
+            this.displayVoiceList();
+        };
+
+        // Try immediately
+        loadVoicesImpl();
+
+        // Also try after a delay (some browsers load voices asynchronously)
+        setTimeout(loadVoicesImpl, 100);
+
+        // Listen for voice changes
+        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;
+
+        // Clear existing options except the first one
+        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', () => {
+                // Test this voice
+                this.testVoice(voice);
+
+                // Update selection visually
+                document.querySelectorAll('.voice-item').forEach(item => item.classList.remove('selected'));
+                voiceItem.classList.add('selected');
+            });
+
+            voiceListElement.appendChild(voiceItem);
+        });
+    },
+
+    // === TTS TESTING FUNCTIONS ===
+    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');
+        }
+    },
+
+    // === DEBUG FUNCTIONS ===
+    addDebugMessage(message, type = 'info') {
+        const timestamp = new Date().toLocaleTimeString();
+        const logEntry = `[${timestamp}] ${message}`;
+
+        this.debugMessages.push({ message: logEntry, type });
+        this.updateDebugDisplay();
+
+        // Also log to console
+        console.log(`[Settings] ${logEntry}`);
+    },
+
+    updateDebugDisplay() {
+        const debugLogElement = document.getElementById('debug-log');
+        if (!debugLogElement) return;
+
+        const lastEntries = this.debugMessages.slice(-50); // Keep last 50 entries
+        debugLogElement.innerHTML = lastEntries
+            .map(entry => `<span class="${entry.type}">${entry.message}</span>`)
+            .join('\n');
+
+        // Scroll to bottom
+        debugLogElement.scrollTop = debugLogElement.scrollHeight;
+    },
+
+    clearDebugLog() {
+        this.debugMessages = [];
+        this.updateDebugDisplay();
+    },
+
+    // === LANGUAGE DETECTION ===
+    detectContentLanguage() {
+        // Try to get language from current content in Word Discovery or other games
+        if (window.currentGameContent && window.currentGameContent.language) {
+            this.addDebugMessage(`Auto-detected language: ${window.currentGameContent.language}`, 'info');
+            return window.currentGameContent.language;
+        }
+
+        // Fallback: try to detect from navigation context
+        if (window.AppNavigation && window.AppNavigation.scannedContent) {
+            const currentContentKey = window.AppNavigation.selectedContent;
+            if (currentContentKey) {
+                const contentInfo = window.AppNavigation.scannedContent.found.find(
+                    content => content.id === currentContentKey
+                );
+                if (contentInfo && contentInfo.language) {
+                    this.addDebugMessage(`Language from navigation: ${contentInfo.language}`, 'info');
+                    return contentInfo.language;
+                }
+            }
+        }
+
+        this.addDebugMessage('No content language detected, using en-US default', 'warning');
+        return 'en-US';
+    },
+
+    // === BROWSER INFO ===
+    updateBrowserInfo() {
+        const userAgentElement = document.getElementById('user-agent');
+        const platformElement = document.getElementById('platform');
+        const languageElement = document.getElementById('browser-language');
+
+        if (userAgentElement) {
+            userAgentElement.textContent = navigator.userAgent;
+        }
+
+        if (platformElement) {
+            platformElement.textContent = navigator.platform;
+        }
+
+        if (languageElement) {
+            languageElement.textContent = navigator.language;
+        }
+    },
+
+    // === PUBLIC TTS API ===
+    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);
+
+                // Apply settings
+                utterance.rate = options.rate || this.ttsSettings.rate;
+                utterance.volume = options.volume || this.ttsSettings.volume;
+
+                // Auto-detect language from content if available
+                const autoLang = this.detectContentLanguage() || 'en-US';
+                utterance.lang = options.lang || autoLang;
+
+                // Apply selected voice if available
+                if (this.ttsSettings.selectedVoice) {
+                    const selectedVoice = this.availableVoices.find(
+                        voice => voice.name === this.ttsSettings.selectedVoice
+                    );
+                    if (selectedVoice) {
+                        utterance.voice = selectedVoice;
+                    }
+                }
+
+                utterance.onend = () => {
+                    this.addDebugMessage(`Spoke: "${text}"`, 'success');
+                    resolve();
+                };
+
+                utterance.onerror = (event) => {
+                    this.addDebugMessage(`Speech error: ${event.error}`, 'error');
+                    reject(new Error(event.error));
+                };
+
+                speechSynthesis.speak(utterance);
+            } catch (error) {
+                this.addDebugMessage(`Speech failed: ${error.message}`, 'error');
+                reject(error);
+            }
+        });
+    }
+};
+
+// === GLOBAL TTS TEST FUNCTIONS ===
+function testBasicTTS() {
+    SettingsManager.addDebugMessage('Testing basic TTS...', 'info');
+    SettingsManager.speak('Hello world, this is a basic test')
+        .then(() => SettingsManager.addDebugMessage('✅ Basic TTS test completed', 'success'))
+        .catch(error => SettingsManager.addDebugMessage(`❌ Basic TTS test failed: ${error.message}`, 'error'));
+}
+
+function testWithCallbacks() {
+    SettingsManager.addDebugMessage('Testing TTS with detailed callbacks...', 'info');
+    SettingsManager.speak('Apple, cat, house, car')
+        .then(() => SettingsManager.addDebugMessage('✅ Callback TTS test completed', 'success'))
+        .catch(error => SettingsManager.addDebugMessage(`❌ Callback TTS test failed: ${error.message}`, 'error'));
+}
+
+function testGameWords() {
+    SettingsManager.addDebugMessage('Testing game vocabulary words...', 'info');
+    const words = ['apple', 'cat', 'house', 'car', 'tree', 'book', 'sun', 'dog'];
+
+    let index = 0;
+    function speakNext() {
+        if (index >= words.length) {
+            SettingsManager.addDebugMessage('✅ Game words test completed', 'success');
+            return;
+        }
+
+        const word = words[index++];
+        SettingsManager.speak(word)
+            .then(() => {
+                SettingsManager.addDebugMessage(`✅ Spoke: ${word}`, 'info');
+                setTimeout(speakNext, 500);
+            })
+            .catch(error => {
+                SettingsManager.addDebugMessage(`❌ Failed to speak ${word}: ${error.message}`, 'error');
+                setTimeout(speakNext, 500);
+            });
+    }
+
+    speakNext();
+}
+
+function refreshVoices() {
+    SettingsManager.addDebugMessage('Refreshing voice list...', 'info');
+    SettingsManager.loadVoices();
+    SettingsManager.addDebugMessage('✅ Voice list refreshed', 'success');
+}
+
+function clearDebugLog() {
+    SettingsManager.clearDebugLog();
+}
+
+// Initialize when page loads
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => SettingsManager.init());
+} else {
+    SettingsManager.init();
+}
+
+// Export for use in games
+window.SettingsManager = SettingsManager;
\ No newline at end of file
diff --git a/js/games/word-discovery.js b/js/games/word-discovery.js
new file mode 100644
index 0000000..fcf0a54
--- /dev/null
+++ b/js/games/word-discovery.js
@@ -0,0 +1,1049 @@
+class WordDiscovery {
+    constructor({ container, content, onScoreUpdate, onGameEnd }) {
+        this.container = container;
+        this.content = content;
+        this.onScoreUpdate = onScoreUpdate;
+        this.onGameEnd = onGameEnd;
+
+        // Expose content globally for SettingsManager TTS language detection
+        window.currentGameContent = content;
+
+        this.currentWordIndex = 0;
+        this.discoveredWords = [];
+        this.currentPhase = 'discovery'; // discovery, practice
+        this.score = 0;
+        this.lives = 3;
+        this.wordsToLearn = [];
+
+        // Practice system - Global practice after all words discovered
+        this.practiceLevel = 1; // 1=Easy, 2=Medium, 3=Hard, 4=Expert
+        this.practiceRound = 0;
+        this.maxPracticeRounds = 6; // More rounds for mixed practice
+        this.practiceCorrectAnswers = 0;
+        this.practiceErrors = 0;
+        this.currentPracticeWords = []; // Mixed selection of all discovered words
+
+        this.injectCSS();
+        this.extractContent();
+        this.init();
+    }
+
+    injectCSS() {
+        if (document.getElementById('word-discovery-styles')) return;
+
+        const styleSheet = document.createElement('style');
+        styleSheet.id = 'word-discovery-styles';
+        styleSheet.textContent = `
+            .word-discovery-wrapper {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+            }
+
+            .discovery-hud {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 20px;
+                background: rgba(0,0,0,0.2);
+                backdrop-filter: blur(10px);
+            }
+
+            .discovery-progress {
+                display: flex;
+                align-items: center;
+                gap: 15px;
+            }
+
+            .progress-bar {
+                width: 200px;
+                height: 8px;
+                background: rgba(255,255,255,0.2);
+                border-radius: 4px;
+                overflow: hidden;
+            }
+
+            .progress-fill {
+                height: 100%;
+                background: linear-gradient(90deg, #00ff88, #00cc6a);
+                transition: width 0.3s ease;
+            }
+
+            .discovery-main {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: 20px;
+                position: relative;
+            }
+
+            .word-card {
+                background: white;
+                border-radius: 20px;
+                padding: 40px;
+                box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+                text-align: center;
+                max-width: 500px;
+                width: 100%;
+                color: #333;
+                transform: scale(0.9);
+                opacity: 0;
+                animation: cardAppear 0.5s ease forwards;
+            }
+
+            @keyframes cardAppear {
+                to {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+
+            .word-image {
+                width: 200px;
+                height: 200px;
+                object-fit: cover;
+                border-radius: 15px;
+                margin-bottom: 20px;
+                box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+            }
+
+            .word-text {
+                font-size: 2.5em;
+                font-weight: bold;
+                color: #2c3e50;
+                margin-bottom: 10px;
+            }
+
+            .word-pronunciation {
+                font-size: 1.2em;
+                color: #7f8c8d;
+                margin-bottom: 15px;
+                font-style: italic;
+            }
+
+            .word-translation {
+                font-size: 1.8em;
+                color: #e74c3c;
+                font-weight: 600;
+                margin-bottom: 20px;
+            }
+
+            .discovery-controls {
+                display: flex;
+                gap: 15px;
+                margin-top: 20px;
+            }
+
+            .discovery-btn {
+                padding: 12px 25px;
+                border: none;
+                border-radius: 25px;
+                font-size: 1.1em;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                min-width: 120px;
+            }
+
+            .btn-primary {
+                background: linear-gradient(45deg, #667eea, #764ba2);
+                color: white;
+            }
+
+            .btn-secondary {
+                background: linear-gradient(45deg, #f093fb, #f5576c);
+                color: white;
+            }
+
+            .btn-success {
+                background: linear-gradient(45deg, #4facfe, #00f2fe);
+                color: white;
+            }
+
+            .discovery-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+            }
+
+            .association-grid {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 30px;
+                max-width: 800px;
+                width: 100%;
+            }
+
+            .association-item {
+                background: white;
+                border-radius: 15px;
+                padding: 20px;
+                text-align: center;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                color: #333;
+                border: 3px solid transparent;
+            }
+
+            .association-item:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 15px 30px rgba(0,0,0,0.2);
+            }
+
+            .association-item.selected {
+                border-color: #667eea;
+                background: #f8f9ff;
+            }
+
+            .association-item.correct {
+                border-color: #00ff88;
+                background: #f0fff4;
+            }
+
+            .association-item.incorrect {
+                border-color: #ff4757;
+                background: #fff0f0;
+            }
+
+            .association-image {
+                width: 120px;
+                height: 120px;
+                object-fit: cover;
+                border-radius: 10px;
+                margin-bottom: 15px;
+            }
+
+            .association-text {
+                font-size: 1.4em;
+                font-weight: 600;
+            }
+
+            .phase-indicator {
+                position: absolute;
+                top: 20px;
+                left: 20px;
+                background: rgba(255,255,255,0.2);
+                padding: 8px 16px;
+                border-radius: 20px;
+                font-weight: 600;
+                backdrop-filter: blur(10px);
+            }
+
+            .practice-progress {
+                position: absolute;
+                top: 20px;
+                right: 20px;
+                background: rgba(255,255,255,0.2);
+                padding: 8px 16px;
+                border-radius: 20px;
+                font-weight: 600;
+                backdrop-filter: blur(10px);
+                font-size: 0.9em;
+            }
+
+            .difficulty-badge {
+                display: inline-block;
+                padding: 4px 12px;
+                border-radius: 15px;
+                font-size: 0.8em;
+                font-weight: bold;
+                margin-left: 10px;
+            }
+
+            .difficulty-easy { background: #4CAF50; color: white; }
+            .difficulty-medium { background: #FF9800; color: white; }
+            .difficulty-hard { background: #F44336; color: white; }
+            .difficulty-expert { background: #9C27B0; color: white; }
+
+            .practice-grid-6 {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 20px;
+                max-width: 900px;
+                width: 100%;
+            }
+
+            .practice-grid-8 {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 15px;
+                max-width: 1000px;
+                width: 100%;
+            }
+
+            .practice-challenge {
+                text-align: center;
+                margin-bottom: 30px;
+                padding: 20px;
+                background: rgba(255,255,255,0.1);
+                border-radius: 15px;
+                backdrop-filter: blur(10px);
+            }
+
+            .challenge-timer {
+                font-size: 2em;
+                font-weight: bold;
+                color: #FFD700;
+                margin-bottom: 10px;
+            }
+
+            .challenge-text {
+                font-size: 1.2em;
+                margin-bottom: 15px;
+            }
+
+            .practice-stats {
+                display: flex;
+                justify-content: space-around;
+                margin-top: 20px;
+                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);
+            }
+
+            .association-item.time-pressure {
+                animation: timePressure 0.5s ease-in-out infinite alternate;
+            }
+
+            @keyframes timePressure {
+                from { box-shadow: 0 0 10px rgba(255,215,0,0.5); }
+                to { box-shadow: 0 0 20px rgba(255,215,0,0.8); }
+            }
+
+            .audio-btn {
+                background: none;
+                border: none;
+                font-size: 2em;
+                cursor: pointer;
+                color: #667eea;
+                margin-left: 10px;
+                transition: all 0.3s ease;
+            }
+
+            .audio-btn:hover {
+                transform: scale(1.2);
+                color: #764ba2;
+            }
+
+            .completion-message {
+                text-align: center;
+                padding: 40px;
+                background: rgba(255,255,255,0.1);
+                border-radius: 20px;
+                backdrop-filter: blur(10px);
+            }
+
+            .completion-title {
+                font-size: 2.5em;
+                margin-bottom: 20px;
+                color: #00ff88;
+            }
+
+            .completion-stats {
+                font-size: 1.3em;
+                margin-bottom: 30px;
+                line-height: 1.6;
+            }
+
+            .content-warning {
+                background: rgba(255, 193, 7, 0.2);
+                border: 2px solid #FFC107;
+                border-radius: 10px;
+                padding: 15px;
+                margin: 20px 0;
+                color: #856404;
+                font-size: 0.9em;
+            }
+
+            .feature-missing {
+                opacity: 0.6;
+                position: relative;
+            }
+
+            .feature-missing::after {
+                content: '📵';
+                position: absolute;
+                top: 5px;
+                right: 5px;
+                font-size: 0.8em;
+            }
+        `;
+        document.head.appendChild(styleSheet);
+    }
+
+    extractContent() {
+        if (!this.content || !this.content.vocabulary) {
+            this.wordsToLearn = [];
+            return;
+        }
+
+        this.wordsToLearn = Object.entries(this.content.vocabulary).map(([word, data]) => ({
+            word: word,
+            translation: typeof data === 'string' ? data : data.translation,
+            pronunciation: typeof data === 'object' ? data.pronunciation : null,
+            image: typeof data === 'object' ? data.image : null,
+            type: typeof data === 'object' ? data.type : 'word'
+        })).filter(item => item.translation);
+
+        // Shuffle words for variety
+        this.wordsToLearn = this.shuffleArray([...this.wordsToLearn]);
+    }
+
+    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]];
+        }
+        return array;
+    }
+
+    init() {
+        this.container.innerHTML = `
+            <div class="word-discovery-wrapper">
+                <div class="discovery-hud">
+                    <div class="discovery-progress">
+                        <span>Progress:</span>
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: 0%"></div>
+                        </div>
+                        <span class="progress-text">0/${this.wordsToLearn.length}</span>
+                    </div>
+                    <div class="discovery-stats">
+                        <span>Score: <span class="score-display">0</span></span>
+                        <span style="margin-left: 20px;">❤️ <span class="lives-display">3</span></span>
+                    </div>
+                </div>
+                <div class="discovery-main">
+                    <div class="phase-indicator">Discovery Phase</div>
+                    <div class="game-content"></div>
+                </div>
+            </div>
+        `;
+
+        if (this.wordsToLearn.length === 0) {
+            this.showNoContent();
+            return;
+        }
+
+        this.updateHUD();
+        this.startDiscoveryPhase();
+    }
+
+    updateHUD() {
+        const progressFill = this.container.querySelector('.progress-fill');
+        const progressText = this.container.querySelector('.progress-text');
+        const scoreDisplay = this.container.querySelector('.score-display');
+        const livesDisplay = this.container.querySelector('.lives-display');
+
+        const progressPercent = (this.currentWordIndex / this.wordsToLearn.length) * 100;
+        progressFill.style.width = `${progressPercent}%`;
+        progressText.textContent = `${this.currentWordIndex}/${this.wordsToLearn.length}`;
+        scoreDisplay.textContent = this.score;
+        livesDisplay.textContent = this.lives;
+    }
+
+    startDiscoveryPhase() {
+        this.currentPhase = 'discovery';
+        this.container.querySelector('.phase-indicator').textContent = 'Discovery Phase';
+        this.showWordCard();
+    }
+
+    showWordCard() {
+        if (this.currentWordIndex >= this.wordsToLearn.length) {
+            // All words discovered - start global practice phase
+            this.startGlobalPractice();
+            return;
+        }
+
+        const word = this.wordsToLearn[this.currentWordIndex];
+        const gameContent = this.container.querySelector('.game-content');
+
+        // Check what features are missing for this word
+        const missingFeatures = [];
+        if (!word.image) missingFeatures.push('image');
+        if (!word.pronunciation) missingFeatures.push('pronunciation');
+
+        gameContent.innerHTML = `
+            <div class="word-card">
+                ${word.image ?
+                    `<img src="${word.image}" alt="${word.word}" class="word-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">` :
+                    `<div class="word-image feature-missing" style="background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #999;">📷 No Image</div>`
+                }
+                <div class="word-text">${word.word}</div>
+                ${word.pronunciation ?
+                    `<div class="word-pronunciation">/${word.pronunciation}/</div>` :
+                    `<div class="word-pronunciation feature-missing" style="color: #999; font-style: normal;">No pronunciation guide</div>`
+                }
+                <div class="word-translation">${word.translation}</div>
+                ${missingFeatures.length > 0 ?
+                    `<div class="content-warning">
+                        ⚠️ Missing: ${missingFeatures.join(', ')}. Practice questions will be adapted accordingly.
+                    </div>` : ''
+                }
+                <div class="discovery-controls">
+                    <button class="discovery-btn btn-primary ${!word.pronunciation ? 'feature-missing' : ''}" onclick="this.closest('.word-discovery-wrapper').game.hearPronunciation()">
+                        🔊 Listen ${!word.pronunciation ? '(TTS)' : ''}
+                    </button>
+                    <button class="discovery-btn btn-success" onclick="this.closest('.word-discovery-wrapper').game.markAsLearned()">
+                        Got It!
+                    </button>
+                </div>
+            </div>
+        `;
+
+        // Store game reference for button access
+        this.container.querySelector('.word-discovery-wrapper').game = this;
+
+        // Auto-play TTS when new word appears (with delay for card animation)
+        setTimeout(() => {
+            this.hearPronunciation();
+        }, 800);
+    }
+
+    async hearPronunciation(options = {}) {
+        let wordToSpeak;
+
+        if (this.currentPhase === 'practice') {
+            // In practice phase, use current practice word
+            wordToSpeak = this.currentPracticeWords[this.practiceRound % this.currentPracticeWords.length];
+        } else {
+            // In discovery phase, use current word being learned
+            wordToSpeak = this.wordsToLearn[this.currentWordIndex];
+        }
+
+        if (!wordToSpeak) return;
+
+        // Try to play audio file first if available
+        if (wordToSpeak.audioFile || wordToSpeak.pronunciation) {
+            const audioPath = wordToSpeak.audioFile;
+            if (audioPath) {
+                try {
+                    const audio = new Audio(audioPath);
+
+                    // Handle audio loading errors
+                    audio.onerror = () => {
+                        console.warn(`Audio file not found: ${audioPath}, falling back to TTS`);
+                        this.fallbackToTTS(wordToSpeak, options);
+                    };
+
+                    // Handle successful audio loading
+                    audio.oncanplaythrough = () => {
+                        // Adjust playback rate if supported
+                        if (options.rate && audio.playbackRate !== undefined) {
+                            audio.playbackRate = options.rate;
+                        }
+                        audio.play().catch(error => {
+                            console.warn('Audio playback failed:', error);
+                            this.fallbackToTTS(wordToSpeak, options);
+                        });
+                    };
+
+                    // Load the audio
+                    audio.load();
+
+                    // Timeout fallback if audio takes too long
+                    setTimeout(() => {
+                        if (audio.readyState === 0) {
+                            console.warn('Audio loading timeout, falling back to TTS');
+                            this.fallbackToTTS(wordToSpeak, options);
+                        }
+                    }, 2000);
+
+                    return; // Don't proceed to TTS if we're trying audio
+                } catch (error) {
+                    console.warn('Audio creation failed:', error);
+                }
+            }
+        }
+
+        // Fallback to TTS immediately if no audio file
+        this.fallbackToTTS(wordToSpeak, options);
+    }
+
+    fallbackToTTS(wordToSpeak, options = {}) {
+        // Use SettingsManager if available, otherwise fallback to basic TTS
+        if (window.SettingsManager) {
+            // Pass custom rate if specified
+            const ttsOptions = {};
+            if (options.rate) {
+                ttsOptions.rate = options.rate;
+            }
+
+            window.SettingsManager.speak(wordToSpeak.word, ttsOptions)
+                .catch(error => {
+                    console.warn('SettingsManager TTS failed:', error);
+                    this.basicTTS(wordToSpeak, options);
+                });
+        } else {
+            this.basicTTS(wordToSpeak, options);
+        }
+    }
+
+    basicTTS(wordToSpeak, options = {}) {
+        // Try to speak the word using Web Speech API
+        if ('speechSynthesis' in window && wordToSpeak) {
+            const utterance = new SpeechSynthesisUtterance(wordToSpeak.word);
+            utterance.lang = 'en-US';
+            utterance.rate = options.rate || 0.8;
+            speechSynthesis.speak(utterance);
+        } else {
+            // Last resort: show pronunciation text if available
+            if (wordToSpeak.pronunciation) {
+                alert(`Pronunciation: /${wordToSpeak.pronunciation}/`);
+            } else {
+                alert(`Word: ${wordToSpeak.word}`);
+            }
+        }
+    }
+
+    startPracticePhase() {
+        this.currentPhase = 'practice';
+        this.practiceLevel = 1;
+        this.practiceRound = 0;
+        this.practiceCorrectAnswers = 0;
+        this.practiceErrors = 0;
+        this.updatePhaseIndicator();
+        this.showPracticeChallenge();
+    }
+
+    updatePhaseIndicator() {
+        const phaseIndicator = this.container.querySelector('.phase-indicator');
+        const difficultyNames = ['', 'Easy', 'Medium', 'Hard', 'Expert'];
+        const difficultyClasses = ['', 'difficulty-easy', 'difficulty-medium', 'difficulty-hard', 'difficulty-expert'];
+
+        if (this.currentPhase === 'practice') {
+            phaseIndicator.innerHTML = `Mixed Practice <span class="difficulty-badge ${difficultyClasses[this.practiceLevel]}">${difficultyNames[this.practiceLevel]}</span>`;
+        } else {
+            phaseIndicator.textContent = 'Discovery Phase';
+        }
+
+        // Update or create practice progress indicator
+        let progressIndicator = this.container.querySelector('.practice-progress');
+        if (!progressIndicator) {
+            progressIndicator = document.createElement('div');
+            progressIndicator.className = 'practice-progress';
+            this.container.querySelector('.discovery-main').appendChild(progressIndicator);
+        }
+
+        if (this.currentPhase === 'practice') {
+            progressIndicator.textContent = `Round ${this.practiceRound + 1}/${this.maxPracticeRounds}`;
+        } else {
+            progressIndicator.textContent = '';
+        }
+    }
+
+    showMixedPracticeChallenge() {
+        // Get a random word from discovered words for this challenge
+        const currentWord = this.currentPracticeWords[this.practiceRound % this.currentPracticeWords.length];
+        const gameContent = this.container.querySelector('.game-content');
+
+        // Check available content features
+        const hasImages = this.discoveredWords.some(word => word.image);
+        const hasPronunciation = this.discoveredWords.some(word => word.pronunciation);
+        const hasAudioFiles = this.discoveredWords.some(word => word.audioFile);
+        const currentWordHasImage = currentWord.image;
+        const currentWordHasPronunciation = currentWord.pronunciation;
+        const currentWordHasAudio = currentWord.audioFile;
+
+        // Determine challenge based on practice level and available content
+        const challenges = {
+            1: { options: 4, time: null, question: 'translation' }, // Easy: 4 options, no timer
+            2: { options: 6, time: 15, question: 'translation' },   // Medium: 6 options, 15s timer
+            3: { options: 6, time: 10, question: hasImages ? 'mixed' : 'translation' }, // Hard: mixed if images available
+            4: { options: 8, time: 8, question: (hasAudioFiles || hasPronunciation) ? 'audio' : 'translation' } // Expert: audio if available
+        };
+
+        const challenge = challenges[this.practiceLevel];
+        const numOptions = challenge.options;
+
+        // Create options: current word + random others from ALL discovered words
+        const options = [currentWord];
+        const otherWords = this.discoveredWords.filter(word => word.word !== currentWord.word);
+        const randomOthers = this.shuffleArray([...otherWords]).slice(0, numOptions - 1);
+        options.push(...randomOthers);
+
+        // Shuffle the options
+        const shuffledOptions = this.shuffleArray([...options]);
+
+        // Determine question type - TEST FOREIGN WORD KNOWLEDGE, NOT NATIVE LANGUAGE
+        let questionText = '';
+        let showImages = true;
+        let showText = true;
+
+        if (challenge.question === 'translation') {
+            // Test: Show foreign word, find translation/image
+            questionText = `Which one means "${currentWord.word}"?`;
+        } else if (challenge.question === 'mixed') {
+            // Build available question types based on content
+            const questionTypes = [`Which one means "${currentWord.word}"?`];
+
+            // Add pronunciation question if available (text or audio)
+            if (currentWordHasPronunciation || currentWordHasAudio) {
+                questionTypes.push(`Find the word that sounds like "${currentWord.pronunciation || currentWord.word}"`);
+            }
+
+            // Add image question if current word has image AND other words have images for comparison
+            if (currentWordHasImage && hasImages) {
+                questionTypes.push(`Which image represents "${currentWord.word}"?`);
+            }
+
+            questionText = questionTypes[Math.floor(Math.random() * questionTypes.length)];
+            if (questionText.includes('image')) {
+                showText = false;
+                // Ensure we only show options that have images
+                const imageOptions = [currentWord];
+                const otherWordsWithImages = this.discoveredWords.filter(word =>
+                    word.word !== currentWord.word && word.image
+                );
+                if (otherWordsWithImages.length >= numOptions - 1) {
+                    const randomOthers = this.shuffleArray([...otherWordsWithImages]).slice(0, numOptions - 1);
+                    options.length = 1; // Reset to just current word
+                    options.push(...randomOthers);
+                }
+            }
+        } else if (challenge.question === 'audio') {
+            if (currentWordHasPronunciation || currentWordHasAudio) {
+                questionText = 'Listen and find the correct word!';
+                showImages = false;
+                // Auto-play pronunciation
+                setTimeout(() => this.hearPronunciation(), 500);
+            } else {
+                // Fallback to translation if no audio
+                questionText = `Which one means "${currentWord.word}"?`;
+            }
+        }
+
+        const gridClass = numOptions <= 4 ? 'association-grid' :
+                         numOptions <= 6 ? 'practice-grid-6' : 'practice-grid-8';
+
+        gameContent.innerHTML = `
+            <div class="practice-challenge">
+                ${challenge.time ? `<div class="challenge-timer" id="practice-timer">${challenge.time}</div>` : ''}
+                <div class="challenge-text">${questionText}</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">Level: ${this.practiceLevel}/4</div>
+                </div>
+            </div>
+            <div class="${gridClass}">
+                ${shuffledOptions.map((option, index) => `
+                    <div class="association-item${challenge.time ? ' time-pressure' : ''}" onclick="this.closest('.word-discovery-wrapper').game.selectMixedPractice(${shuffledOptions.indexOf(option)}, '${option.word}')">
+                        ${showImages && option.image ? `<img src="${option.image}" alt="${option.word}" class="association-image" onerror="this.style.display='none'">` : ''}
+                        ${showText ? `<div class="association-text">${option.translation}</div>` : ''}
+                        ${!showText && !showImages ? `<div class="association-text">?</div>` : ''}
+                    </div>
+                `).join('')}
+            </div>
+        `;
+
+        // Start timer if needed
+        if (challenge.time) {
+            this.startPracticeTimer(challenge.time);
+        }
+
+        // Auto-play TTS based on practice level with appropriate speed
+        setTimeout(() => {
+            let ttsSpeed;
+            switch (this.practiceLevel) {
+                case 1: // Easy - 0.7 speed
+                    ttsSpeed = 0.7;
+                    break;
+                case 2: // Medium - 0.9 speed
+                    ttsSpeed = 0.9;
+                    break;
+                case 3: // Hard - 1.0 speed
+                    ttsSpeed = 1.0;
+                    break;
+                case 4: // Expert - 1.1 speed (already has audio auto-play)
+                    ttsSpeed = 1.1;
+                    break;
+                default:
+                    ttsSpeed = 0.8; // Fallback
+            }
+
+            // Don't auto-play if it's an audio-only challenge (Expert mode already handles this)
+            if (challenge.question !== 'audio') {
+                this.hearPronunciation({ rate: ttsSpeed });
+            }
+        }, 1000); // Delay to let interface render
+    }
+
+    startPracticeTimer(seconds) {
+        this.practiceTimer = seconds;
+        this.practiceTimerInterval = setInterval(() => {
+            this.practiceTimer--;
+            const timerElement = document.getElementById('practice-timer');
+            if (timerElement) {
+                timerElement.textContent = this.practiceTimer;
+                if (this.practiceTimer <= 3) {
+                    timerElement.style.color = '#FF4444';
+                    timerElement.style.animation = 'pulse 0.5s infinite';
+                }
+            }
+
+            if (this.practiceTimer <= 0) {
+                this.clearPracticeTimer();
+                this.selectPractice(-1, 'TIMEOUT'); // Handle timeout
+            }
+        }, 1000);
+    }
+
+    clearPracticeTimer() {
+        if (this.practiceTimerInterval) {
+            clearInterval(this.practiceTimerInterval);
+            this.practiceTimerInterval = null;
+        }
+    }
+
+    selectMixedPractice(selectedIndex, selectedWord) {
+        this.clearPracticeTimer();
+
+        const currentWord = this.currentPracticeWords[this.practiceRound % this.currentPracticeWords.length];
+        const items = this.container.querySelectorAll('.association-item');
+
+        let isCorrect = false;
+
+        if (selectedWord === 'TIMEOUT') {
+            // Timer expired
+            this.practiceErrors++;
+            // Show correct answer
+            items.forEach((item) => {
+                const text = item.querySelector('.association-text');
+                if (text && text.textContent === currentWord.word) {
+                    item.classList.add('correct');
+                }
+            });
+        } else if (selectedWord === currentWord.word) {
+            // Correct answer
+            isCorrect = true;
+            items[selectedIndex].classList.add('correct');
+            this.practiceCorrectAnswers++;
+
+            // Score based on difficulty level
+            const scoreBonus = [0, 5, 10, 15, 25][this.practiceLevel];
+            this.score += scoreBonus;
+            this.onScoreUpdate(this.score);
+        } else {
+            // Wrong answer
+            items[selectedIndex].classList.add('incorrect');
+            this.practiceErrors++;
+
+            // Show correct answer
+            items.forEach((item) => {
+                const text = item.querySelector('.association-text');
+                if (text && text.textContent === currentWord.word) {
+                    item.classList.add('correct');
+                }
+            });
+        }
+
+        this.updateHUD();
+
+        // Continue to next practice round or advance
+        setTimeout(() => {
+            this.practiceRound++;
+
+            if (this.practiceRound >= this.maxPracticeRounds) {
+                // Check if ready for next level
+                const accuracy = this.practiceCorrectAnswers / this.maxPracticeRounds;
+
+                if (accuracy >= 0.75 && this.practiceLevel < 4) {
+                    // Advance to next difficulty level
+                    this.practiceLevel++;
+                    this.practiceRound = 0;
+                    this.practiceCorrectAnswers = 0;
+                    this.practiceErrors = 0;
+                    this.updatePhaseIndicator();
+
+                    setTimeout(() => {
+                        this.showLevelUpMessage();
+                    }, 500);
+                } else if (accuracy >= 0.5) {
+                    // Passed all practice levels - show completion
+                    this.showCompletion();
+                } else {
+                    // Failed practice - retry current level
+                    this.practiceRound = Math.max(0, this.practiceRound - 2); // Go back 2 rounds
+                    this.practiceCorrectAnswers = 0;
+                    this.practiceErrors = 0;
+                    this.lives--;
+                    if (this.lives <= 0) {
+                        this.endGame();
+                        return;
+                    }
+                }
+            } else {
+                // Continue current difficulty level with next random word
+                this.updatePhaseIndicator();
+                this.showMixedPracticeChallenge();
+            }
+        }, 1500);
+    }
+
+    showLevelUpMessage() {
+        const gameContent = this.container.querySelector('.game-content');
+        const difficultyNames = ['', 'Easy', 'Medium', 'Hard', 'Expert'];
+
+        gameContent.innerHTML = `
+            <div class="completion-message">
+                <div class="completion-title">🎉 Level Up!</div>
+                <div class="completion-stats">
+                    Advanced to ${difficultyNames[this.practiceLevel]} difficulty!<br>
+                    Keep practicing to master this word!
+                </div>
+            </div>
+        `;
+
+        setTimeout(() => {
+            this.showMixedPracticeChallenge();
+        }, 2000);
+    }
+
+    markAsLearned() {
+        this.discoveredWords.push(this.wordsToLearn[this.currentWordIndex]);
+        this.currentWordIndex++;
+        this.score += 5;
+        this.onScoreUpdate(this.score);
+        this.updateHUD();
+
+        setTimeout(() => {
+            this.startDiscoveryPhase();
+        }, 300);
+    }
+
+    startGlobalPractice() {
+        // Transition message
+        const gameContent = this.container.querySelector('.game-content');
+        gameContent.innerHTML = `
+            <div class="completion-message">
+                <div class="completion-title">🏆 Discovery Complete!</div>
+                <div class="completion-stats">
+                    You've discovered all ${this.discoveredWords.length} words!<br>
+                    Now let's practice with mixed vocabulary challenges!
+                </div>
+                <div class="discovery-controls">
+                    <button class="discovery-btn btn-primary" onclick="this.closest('.word-discovery-wrapper').game.startMixedPractice()">
+                        Start Practice
+                    </button>
+                    <button class="discovery-btn btn-secondary" onclick="this.closest('.word-discovery-wrapper').game.skipToCompletion()">
+                        Skip Practice
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    startMixedPractice() {
+        this.currentPhase = 'practice';
+        this.practiceLevel = 1;
+        this.practiceRound = 0;
+        this.practiceCorrectAnswers = 0;
+        this.practiceErrors = 0;
+
+        // Create mixed practice selection from all discovered words
+        this.currentPracticeWords = this.shuffleArray([...this.discoveredWords]);
+
+        this.updatePhaseIndicator();
+        this.showMixedPracticeChallenge();
+    }
+
+    skipToCompletion() {
+        this.showCompletion();
+    }
+
+    showCompletion() {
+        const gameContent = this.container.querySelector('.game-content');
+        const accuracy = Math.round((this.discoveredWords.length / this.wordsToLearn.length) * 100);
+        const practiceAccuracy = this.practiceRound > 0 ? Math.round((this.practiceCorrectAnswers / this.practiceRound) * 100) : 0;
+
+        gameContent.innerHTML = `
+            <div class="completion-message">
+                <div class="completion-title">🏆 Vocabulary Mastered!</div>
+                <div class="completion-stats">
+                    Words Discovered: ${this.discoveredWords.length}/${this.wordsToLearn.length}<br>
+                    Practice Accuracy: ${practiceAccuracy}%<br>
+                    Final Score: ${this.score}<br>
+                    Practice Level Reached: ${this.practiceLevel}/4
+                </div>
+                <div class="discovery-controls">
+                    <button class="discovery-btn btn-primary" onclick="this.closest('.word-discovery-wrapper').game.restart()">
+                        Learn Again
+                    </button>
+                    <button class="discovery-btn btn-secondary" onclick="this.closest('.word-discovery-wrapper').game.endGame()">
+                        Back to Games
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    showNoContent() {
+        const gameContent = this.container.querySelector('.game-content');
+        gameContent.innerHTML = `
+            <div class="completion-message">
+                <div class="completion-title">📚 No Vocabulary Found</div>
+                <div class="completion-stats">
+                    This content doesn't have vocabulary for the Word Discovery game.<br>
+                    <small>Note: Images and audio are optional but enhance the experience!</small>
+                </div>
+                <div class="discovery-controls">
+                    <button class="discovery-btn btn-secondary" onclick="this.closest('.word-discovery-wrapper').game.endGame()">
+                        Back to Games
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    start() {
+        // Game starts automatically in constructor
+    }
+
+    restart() {
+        this.currentWordIndex = 0;
+        this.discoveredWords = [];
+        this.score = 0;
+        this.lives = 3;
+        this.practiceLevel = 1;
+        this.practiceRound = 0;
+        this.practiceCorrectAnswers = 0;
+        this.practiceErrors = 0;
+        this.currentPracticeWords = [];
+        this.clearPracticeTimer();
+        this.wordsToLearn = this.shuffleArray([...this.wordsToLearn]);
+        this.updateHUD();
+        this.startDiscoveryPhase();
+    }
+
+    endGame() {
+        this.onGameEnd(this.score);
+    }
+
+    destroy() {
+        this.clearPracticeTimer();
+
+        // Clean up global content reference
+        if (window.currentGameContent === this.content) {
+            window.currentGameContent = null;
+        }
+
+        const styleSheet = document.getElementById('word-discovery-styles');
+        if (styleSheet) {
+            styleSheet.remove();
+        }
+    }
+}
+
+// Register the game module
+window.GameModules = window.GameModules || {};
+window.GameModules.WordDiscovery = WordDiscovery;
\ No newline at end of file