Update index.html

index.html

@@ -798,112 +798,113 @@
 
             // [新增] 初始化手寫板功能 (修復無反應問題)
             function initHandwritingBoard() {
-                if (handwritingCanvasObj) return; // 避免重複初始化
-
                 // 建立 handwriting.js 實例 (參數: canvas元素, 筆畫粗細)
                 const canvasEl = document.getElementById('handwriting-canvas');
+                
                 // 確保 canvas 寬度正確 (解決有些手機上寬度不對的問題)
                 const rect = canvasEl.parentElement.getBoundingClientRect();
+                
+                // [關鍵修復]：如果寬度是 0 (表示元素隱藏中)，則不進行初始化，避免狀態錯誤
+                if (rect.width === 0) return;
+
+                // 設定 canvas 屬性寬高 (這是繪圖解析度)
                 canvasEl.width = rect.width || 300; 
-                canvasEl.height = 250; // 明確設置高度，避免座標對應錯誤
+                canvasEl.height = 250; 
 
-                // [重要修復] 強制註冊 passive: false 的事件監聽器
-                // 這是為了解決在 iOS Safari / 新版 Chrome 上，手指滑動會觸發頁面捲動而非畫線的問題
-                // 雖然 CSS 設了 touch-action: none，但在某些舊版 library 實作上仍需此修正
+                // [重要修復] 強制註冊 passive: false 的事件監聽器，防止畫面捲動
                 const preventDefaultTouch = (e) => {
                     if (e.cancelable) e.preventDefault();
                 };
                 canvasEl.addEventListener('touchstart', preventDefaultTouch, { passive: false });
                 canvasEl.addEventListener('touchmove', preventDefaultTouch, { passive: false });
                 
-                handwritingCanvasObj = new handwriting.Canvas(canvasEl, 3);
-                
-                // 設定辨識後的回呼函式
-                handwritingCanvasObj.setCallBack(function(data, err) {
-                    if (err) {
-                        console.error(err);
-                        alert("辨識失敗，請檢查網路連線"); // handwriting.js 需要連網
-                        return;
-                    }
-                    // data 是候選字陣列，取第一個
-                    if (data && data.length > 0) {
-                        const result = data[0];
-                        answerInput.value = result; // 填入答案框
-                        
-                        // 視覺回饋
-                        answerInput.classList.add('border-green-500', 'bg-green-50');
-                        setTimeout(() => answerInput.classList.remove('border-green-500', 'bg-green-50'), 500);
-                    }
-                });
+                // 如果物件已經存在，不需要重新 new，但需要確保屬性設定正確
+                if (!handwritingCanvasObj) {
+                    handwritingCanvasObj = new handwriting.Canvas(canvasEl, 3);
+                    
+                    // 設定辨識後的回呼函式
+                    handwritingCanvasObj.setCallBack(function(data, err) {
+                        if (err) {
+                            console.error(err);
+                            alert("辨識失敗，請檢查網路連線"); // handwriting.js 需要連網
+                            return;
+                        }
+                        // data 是候選字陣列，取第一個
+                        if (data && data.length > 0) {
+                            const result = data[0];
+                            answerInput.value = result; // 填入答案框
+                            
+                            // 視覺回饋
+                            answerInput.classList.add('border-green-500', 'bg-green-50');
+                            setTimeout(() => answerInput.classList.remove('border-green-500', 'bg-green-50'), 500);
+                        }
+                    });
 
-                // 設定筆畫樣式
+                    // 綁定按鈕事件 (只需綁定一次)
+                    document.getElementById('hw-clear-btn').addEventListener('click', () => {
+                        handwritingCanvasObj.erase();
+                        answerInput.value = '';
+                        answerInput.focus(); // 保持焦點
+                    });
+                    
+                    document.getElementById('hw-undo-btn').addEventListener('click', () => {
+                        handwritingCanvasObj.undo();
+                    });
+
+                    document.getElementById('hw-recognize-btn').addEventListener('click', () => {
+                        handwritingCanvasObj.recognize();
+                    });
+                }
+                
+                // [關鍵] 每次 resize 或是重啟時，都要重新設定筆畫樣式，以免因為 canvas 重設寬高而遺失
                 handwritingCanvasObj.setLineWidth(5);
                 handwritingCanvasObj.setPenColor("#333");
-                
-                // 讓 undo/redo 功能生效
                 handwritingCanvasObj.setOptions({
                     language: "en",
                     numOfReturn: 1
                 });
-
-                // 綁定按鈕事件
-                document.getElementById('hw-clear-btn').addEventListener('click', () => {
-                    handwritingCanvasObj.erase();
-                    answerInput.value = '';
-                    answerInput.focus(); // 保持焦點
-                });
-                
-                document.getElementById('hw-undo-btn').addEventListener('click', () => {
-                    handwritingCanvasObj.undo();
-                });
-
-                document.getElementById('hw-recognize-btn').addEventListener('click', () => {
-                    handwritingCanvasObj.recognize();
-                });
             }
 
-            // [新增] 應用版本設定 (控制手寫板顯示)
-            function applyVersionSettings() {
+            // [新增] 更新輸入介面 (控制手寫板顯示與輸入法)
+            // expectedLang: 'en' (預期輸入英文) 或 'zh' (預期輸入中文)
+            function updateInputInterface(expectedLang) {
                 const hwContainer = document.getElementById('handwriting-container');
                 
-                // 如果手寫容器還沒生成(避免報錯)，先跳過
-                if (!hwContainer) return;
+                // 只有在行動裝置 且 預期輸入英文時，才開啟手寫板
+                const shouldUseHandwriting = (effectiveVersion === 'mobile' && expectedLang === 'en');
 
-                if (effectiveVersion === 'mobile') {
-                    // --- 行動版模式 (手寫) ---
-                    console.log("切換為手寫模式");
-                    
-                    // 1. 顯示手寫板
+                if (shouldUseHandwriting) {
+                    // --- 行動版 + 輸入英文 (開啟手寫) ---
+                    // 1. 顯示手寫板容器
                     hwContainer.classList.remove('hidden');
                     hwContainer.classList.add('flex');
                     
-                    // 2. 初始化手寫板 (如果還沒建立，且元素可見時才初始化以取得正確寬度)
-                    // 使用 setTimeout 確保 display:flex 生效後才抓得到寬度
-                    setTimeout(() => initHandwritingBoard(), 100);
+                    // 2. 初始化手寫板 (使用 setTimeout 確保 flex 佈局生效後有正確寬度)
+                    setTimeout(() => initHandwritingBoard(), 50);
                     
-                    // 3. 鎖定輸入框
+                    // 3. 鎖定輸入框 (變成顯示結果用)
                     answerInput.readOnly = true; 
-                    answerInput.placeholder = "請在下方手寫板書寫...";
-                    answerInput.classList.add('handwriting-mode'); // 套用我們剛寫的 CSS
+                    answerInput.placeholder = "請在下方手寫英文...";
+                    answerInput.classList.add('handwriting-mode');
                     
-                    // 4. 移除之前可能加上的原生輸入法設定
+                    // 4. 嘗試移除原生輸入法干擾
                     if (window.google && window.google.ime) {
                         window.google.ime.setOptions({ ime: 'none', trigger: null });
                     }
 
                 } else {
-                    // --- PC 版模式 (打字) ---
-                    console.log("切換為打字模式");
-                    
+                    // --- PC 版 或 行動版輸入中文 (關閉手寫，用鍵盤) ---
                     // 1. 隱藏手寫板
                     hwContainer.classList.add('hidden');
                     hwContainer.classList.remove('flex');
                     
                     // 2. 恢復輸入框
                     answerInput.readOnly = false;
-                    answerInput.placeholder = "輸入你的答案 (按 Enter 提交)";
+                    answerInput.placeholder = (expectedLang === 'zh') ? "輸入中文答案 (按 Enter 提交)" : "輸入英文答案 (按 Enter 提交)";
                     answerInput.classList.remove('handwriting-mode');
                 }
+                
+                console.log(`輸入模式: ${shouldUseHandwriting ? '手寫 (Handwriting)' : '鍵盤 (Keyboard)'}, 語言: ${expectedLang}`);
             }
 
             // --- 視圖管理 ---
@@ -1096,31 +1097,29 @@
                     frontDisplay.classList.add('hidden');
                     clozeQuestionContainer.classList.add('hidden');
                     
-                    // [新增] 每次顯示卡片時，呼叫設定確保介面正確
-                    applyVersionSettings();
-
                     let frontText, backText;
-                    
+                    let targetLanguage = 'en'; // 預設輸入英文
+
                     if (isSpeed) {
-                         // 極速挑戰暫不支援克漏字
+                         // 極速挑戰
                          switch (currentSpeedQuestionType) {
                             case 'zh-en': 
                                 frontText = card.chinese; 
                                 backText = card.english; 
-                                answerInput.placeholder = effectiveVersion === 'mobile' ? "請在下方手寫板書寫..." : "請輸入英文答案...";
+                                targetLanguage = 'en';
                                 break;
                             case 'en-zh': 
                                 frontText = card.english; 
                                 backText = card.chinese; 
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden')); 
-                                answerInput.placeholder = "請輸入中文答案...";
+                                targetLanguage = 'zh';
                                 break;
                             case 'listen': 
                                 frontText = '請聽發音'; 
                                 backText = card.english; 
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden')); 
                                 speakWord(card); 
-                                answerInput.placeholder = effectiveVersion === 'mobile' ? "請在下方手寫板書寫..." : "請輸入英文答案...";
+                                targetLanguage = 'en';
                                 break;
                         }
                     } else {
@@ -1132,22 +1131,24 @@
                                 progressDisplay.textContent = `第 ${currentCardIndex + 1}/${wordsForCurrentMode.length} 張`;
                                 prevBtn.disabled = currentCardIndex === 0;
                                 nextBtn.disabled = currentCardIndex === wordsForCurrentMode.length - 1;
-                                answerInput.placeholder = "請輸入中文答案...";
+                                // 複習模式下：沒翻面(看英文)=輸入中文，翻面(看中文)=輸入英文
+                                const isFlipped = flashcardContainer.classList.contains('flipped');
+                                targetLanguage = isFlipped ? 'en' : 'zh';
                                 break;
                             case 'zh-en': case 'hard':
                                 frontText = card.chinese; backText = card.english; 
-                                answerInput.placeholder = effectiveVersion === 'mobile' ? "請在下方手寫板書寫..." : "請輸入英文答案...";
+                                targetLanguage = 'en';
                                 break;
                             case 'en-zh':
                                 frontText = card.english; backText = card.chinese;
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden')); 
-                                answerInput.placeholder = "請輸入中文答案...";
+                                targetLanguage = 'zh';
                                 break;
                             case 'listen':
                                 frontText = '請聽發音'; backText = card.english;
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden'));
                                 speakWord(card); 
-                                answerInput.placeholder = effectiveVersion === 'mobile' ? "請在下方手寫板書寫..." : "請輸入英文答案...";
+                                targetLanguage = 'en';
                                 break;
                             case 'sentence-cloze':
                                 clozeQuestionContainer.classList.remove('hidden');
@@ -1155,11 +1156,15 @@
                                 sentenceZhDisplay.textContent = `(${card.sentence.zh})`;
                                 sentenceZhDisplay.classList.add('hidden');
                                 toggleTranslationBtn.textContent = '顯示翻譯';
-                                backText = card.sentence.answer || card.english; // 【修改】背面顯示正確答案
-                                answerInput.placeholder = effectiveVersion === 'mobile' ? "請填入空格中的單字..." : "請填入空格中的單字...";
+                                backText = card.sentence.answer || card.english;
+                                targetLanguage = 'en';
                                 break;
                         }
                     }
+                    
+                    // [新增] 根據目標語言決定是否顯示手寫板
+                    updateInputInterface(targetLanguage);
+
                     if (frontText) {
                         frontDisplay.classList.remove('hidden');
                         frontDisplay.textContent = frontText;
@@ -1911,8 +1916,11 @@
                 if (currentMode === 'review') {
                     flashcardContainer.classList.toggle('flipped');
                     const isFlipped = flashcardContainer.classList.contains('flipped');
-                    answerInput.placeholder = isFlipped ? "請輸入英文答案..." : "請輸入中文答案...";
-                    answerInput.value = '';
+                    
+                    // [智慧輸入切換] 複習模式下：翻面後看到中文->要輸入英文
+                    const targetLanguage = isFlipped ? 'en' : 'zh';
+                    updateInputInterface(targetLanguage);
+                    
                     feedbackDisplay.textContent = '';
                     setTimeout(() => answerInput.focus(), 100);
                 }
@@ -1974,7 +1982,7 @@
                     passwordModal.classList.add('hidden');
                     renderWordList();
                     // 在進入管理畫面時也更新一下設定狀態
-                    applyVersionSettings();
+                    updateInputInterface('pc'); // 管理介面不需要手寫
                     showView('manage');
                 } else {
                     passwordError.textContent = '密碼錯誤！';