Update index.html

index.html

@@ -135,8 +135,17 @@
         }
         
         /* 觸摸手寫板時的視覺回饋類別 */
-        .canvas-active {
+        .canvas-container {
+            border: 2px dashed #cbd5e1;
+            border-radius: 0.75rem;
+            overflow: hidden;
+            transition: all 0.2s;
+        }
+        .canvas-container.active-canvas {
             border-color: #6366f1 !important; /* Indigo-500 */
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+        }
+        .canvas-active-interaction {
             background-color: #f0fdf4 !important; /* Green-50 */
         }
 
@@ -416,7 +425,8 @@
                 
                 <div id="handwriting-container" class="hidden flex-col gap-2">
                     <!-- 使用 wrapper 包裹 canvas，並強制設定固定高度，防止高度塌陷 -->
-                    <div id="canvas-wrapper" class="relative w-full h-[250px]">
+                    <!-- [修改] 改為 flex 容器以容納多個畫布 -->
+                    <div id="canvas-wrapper" class="relative w-full min-h-[250px] flex flex-wrap gap-2 justify-center items-center">
                         <!-- Canvas 將會由 JS 動態生成插入 -->
                     </div>
                     
@@ -663,12 +673,12 @@
         // [第四步] JavaScript 邏輯 (Script)
         let effectiveVersion = 'pc'; // 預設為 PC 版
         
-        // [修改] 移除第三方庫物件，改用原生變數
+        // [修改] 移除單一畫布變數，改用陣列管理多個畫布實例
         let isDrawing = false;
-        let currentStrokes = []; // 存放所有筆畫: [ [[x], [y], [t]], [[x], [y], [t]], ... ]
-        let currentStroke = {x: [], y: [], t: []}; // 暫存當前筆畫
-        let canvasCtx = null;
-        
+        // hwInstances 存放物件: { id, element, ctx, strokes: [], history: [] }
+        let hwInstances = []; 
+        let activeHwIndex = 0; // 當前選取的畫布索引
+
         // [新增] TrOCR 相關變數
         let ocrPipeline = null; // 存放載入好的模型
         let isModelLoading = false;
@@ -851,6 +861,8 @@
             let currentSpeedQuestionType = '';
             let quizStartTime = 0;
             let parsedWordsFromAI = [];
+            // 用來存放多重手寫板的結構，例如 ['cheer', '...', 'on']
+            let currentHandwritingStructure = []; 
 
 
             const modeDetails = {
@@ -870,121 +882,207 @@
                 }, 3000);
             }
 
-            // [修改] 核心重寫：初始化手寫板功能 (使用原生 Canvas API)
-            function initHandwritingBoard() {
+            // [修改] 核心重寫：初始化多重手寫板功能
+            function initMultiHandwritingBoard(structure) {
                 const wrapper = document.getElementById('canvas-wrapper');
                 if (!wrapper) return;
+                
+                // 重置狀態
+                wrapper.innerHTML = ''; 
+                hwInstances = [];
+                activeHwIndex = 0;
+
+                // 根據傳入的結構 (例如 ['cheer', '...', 'on'] 或 ['come', 'true']) 建立手寫板
+                structure.forEach((part, index) => {
+                    if (part === '...') {
+                        // 插入省略號文字
+                        const ellipsis = document.createElement('div');
+                        ellipsis.className = 'text-3xl font-bold text-gray-400 mx-1 select-none';
+                        ellipsis.textContent = '...';
+                        wrapper.appendChild(ellipsis);
+                        // 省略號不佔用 hwInstances 索引
+                    } else {
+                        // 建立 Canvas 容器
+                        const container = document.createElement('div');
+                        container.className = 'canvas-container relative';
+                        // 根據字數調整寬度，如果只有一個字就全寬，多個字則均分但有最小寬度
+                        const wordCount = structure.filter(s => s !== '...').length;
+                        if (wordCount === 1) {
+                            container.style.width = '100%';
+                        } else {
+                            container.style.flex = '1 1 140px'; // Flex grow, shrink, basis
+                            container.style.minWidth = '140px';
+                        }
+                        container.style.height = '250px';
+                        
+                        // 建立 Canvas
+                        const canvas = document.createElement('canvas');
+                        canvas.dataset.index = hwInstances.length; // 暫存索引
+                        canvas.style.width = '100%';
+                        canvas.style.height = '100%';
+                        canvas.style.cursor = 'crosshair';
+                        canvas.style.touchAction = 'none';
+                        container.appendChild(canvas);
+                        wrapper.appendChild(container);
+
+                        // 等待 DOM 渲染後設定 Canvas 實際��析度
+                        // 使用 requestAnimationFrame 確保樣式套用後再讀取尺寸
+                        requestAnimationFrame(() => {
+                            const rect = container.getBoundingClientRect();
+                            canvas.width = rect.width;
+                            canvas.height = 250; // 固定高度
+                            
+                            const ctx = canvas.getContext('2d', { willReadFrequently: true });
+                            // 填滿白色背景
+                            ctx.fillStyle = '#ffffff';
+                            ctx.fillRect(0, 0, canvas.width, canvas.height);
+                            ctx.lineWidth = 10;
+                            ctx.lineCap = 'round';
+                            ctx.lineJoin = 'round';
+                            ctx.strokeStyle = '#000000';
+
+                            // 存入實例陣列
+                            // 注意：由於 requestAnimationFrame 是非同步，這裡直接 push 可能會順序錯亂
+                            // 但在這個簡單情境下，通常還好。嚴謹做法是預先建立物件佔位。
+                            // 這裡我們直接修改已存在的物件引用 (稍微複雜，簡單點做)
+                            // 修正：同步建立物件，非同步設定 Context
+                            // 但為了簡化，我們在建立 element 時就同步 push 到 array
+                        });
 
-                // 1. 確保 wrapper 可見且有寬度
-                const rect = wrapper.getBoundingClientRect();
-                if (rect.width < 50) {
-                    console.log('Canvas container too small, retrying in 100ms...');
-                    setTimeout(initHandwritingBoard, 100); 
-                    return; 
-                }
+                        // 同步建立資料結構
+                        const instance = {
+                            id: hwInstances.length,
+                            element: canvas,
+                            container: container,
+                            ctx: null, // 稍後初始化
+                            strokes: [],
+                            currentStroke: {x:[], y:[], t:[]} // 暫存筆畫
+                        };
+                        hwInstances.push(instance);
+                        
+                        // 延遲初始化 Context (確保 width 正確)
+                        setTimeout(() => {
+                            const rect = container.getBoundingClientRect();
+                            if (rect.width > 0) {
+                                canvas.width = rect.width;
+                                canvas.height = 250;
+                                const ctx = canvas.getContext('2d', { willReadFrequently: true });
+                                ctx.fillStyle = '#ffffff';
+                                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                                ctx.lineWidth = 10;
+                                ctx.lineCap = 'round';
+                                ctx.lineJoin = 'round';
+                                ctx.strokeStyle = '#000000';
+                                instance.ctx = ctx;
+                                
+                                // 預設第一個畫布為啟用狀態
+                                if (instance.id === 0) setActiveCanvas(0);
+                            }
+                        }, 50);
 
-                // 2. 清空並建立原生 Canvas
-                wrapper.innerHTML = ''; 
-                const canvas = document.createElement('canvas');
-                canvas.id = 'handwriting-canvas';
-                canvas.style.width = '100%';
-                canvas.style.height = '250px';
-                canvas.style.backgroundColor = '#ffffff'; 
-                canvas.style.border = '2px dashed #cbd5e1';
-                canvas.style.borderRadius = '0.75rem';
-                canvas.style.cursor = 'crosshair';
-                canvas.style.touchAction = 'none'; // 防止觸控時捲動
-                canvas.style.display = 'block';
-                
-                // 設定 HTML 屬性的寬高 (解析度)，必須與 CSS 顯示大小匹配
-                canvas.width = rect.width; 
-                canvas.height = 250; 
-                
-                wrapper.appendChild(canvas);
+                        // 綁定事件
+                        bindCanvasEvents(canvas, instance.id);
+                    }
+                });
 
-                // 3. 設定 Context
-                canvasCtx = canvas.getContext('2d', { willReadFrequently: true }); // [優化] 加入讀取優化提示
-                
-                // [修改] 為了 TrOCR 模型，強制將畫布背景填滿白色像素 (透明背景會導致辨識失敗)
-                canvasCtx.fillStyle = '#ffffff';
-                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+                console.log('Multi-Handwriting board initialized with parts:', structure);
+            }
 
-                canvasCtx.lineWidth = 10; // [修改] 增加線條寬度以利 OCR 辨識
-                canvasCtx.lineCap = 'round';
-                canvasCtx.lineJoin = 'round';
-                canvasCtx.strokeStyle = '#000000';
+            // 設定當前活躍的 Canvas
+            function setActiveCanvas(index) {
+                if (index < 0 || index >= hwInstances.length) return;
+                activeHwIndex = index;
+                
+                // 更新視覺效果
+                hwInstances.forEach(inst => {
+                    if (inst.id === index) {
+                        inst.container.classList.add('active-canvas');
+                    } else {
+                        inst.container.classList.remove('active-canvas');
+                    }
+                });
+            }
 
-                // 4. 重置筆跡資料
-                currentStrokes = [];
-                isDrawing = false;
+            // 綁定單一 Canvas 的事件
+            function bindCanvasEvents(canvas, index) {
+                const start = (e) => {
+                    if (e.type === 'touchstart') e.preventDefault();
+                    setActiveCanvas(index);
+                    startStroke(e, index);
+                };
+                const move = (e) => {
+                    if (e.type === 'touchmove') e.preventDefault();
+                    moveStroke(e, index);
+                };
+                const end = (e) => {
+                    endStroke(e, index);
+                };
 
-                // 5. 綁定事件監聽器
-                // 滑鼠
-                canvas.addEventListener('mousedown', startStroke);
-                canvas.addEventListener('mousemove', moveStroke);
-                canvas.addEventListener('mouseup', endStroke);
-                canvas.addEventListener('mouseleave', endStroke);
-                // 觸控
-                canvas.addEventListener('touchstart', startStroke, {passive: false});
-                canvas.addEventListener('touchmove', moveStroke, {passive: false});
-                canvas.addEventListener('touchend', endStroke);
-
-                console.log('Native Handwriting board initialized with width:', rect.width);
+                canvas.addEventListener('mousedown', start);
+                canvas.addEventListener('mousemove', move);
+                canvas.addEventListener('mouseup', end);
+                canvas.addEventListener('mouseleave', end);
+                
+                canvas.addEventListener('touchstart', start, {passive: false});
+                canvas.addEventListener('touchmove', move, {passive: false});
+                canvas.addEventListener('touchend', end);
+                
+                // 點擊容器也能啟用
+                canvas.parentElement.addEventListener('click', () => setActiveCanvas(index));
             }
 
-            // [新增] 筆畫開始
-            function startStroke(e) {
-                if (e.type === 'touchstart') e.preventDefault(); // 防止滾動
+            // [修改] 筆畫開始
+            function startStroke(e, index) {
                 isDrawing = true;
-                const pos = getPos(e);
-                
-                // 初始化新的一筆：[x陣列, y陣列, t陣列]
-                // 這裡我們先用物件暫存，endStroke 時再轉成陣列推入 currentStrokes
-                currentStroke = { x: [pos.x], y: [pos.y], t: [Date.now()] };
+                const inst = hwInstances[index];
+                if (!inst || !inst.ctx) return;
+
+                const pos = getPos(e, inst.element);
+                inst.currentStroke = { x: [pos.x], y: [pos.y], t: [Date.now()] };
                 
-                canvasCtx.beginPath();
-                canvasCtx.moveTo(pos.x, pos.y);
+                inst.ctx.beginPath();
+                inst.ctx.moveTo(pos.x, pos.y);
                 
-                // 視覺回饋
-                document.getElementById('handwriting-canvas').classList.add('canvas-active');
+                inst.container.classList.add('canvas-active-interaction');
             }
 
-            // [新增] 筆畫移動
-            function moveStroke(e) {
+            // [修改] 筆畫移動
+            function moveStroke(e, index) {
                 if (!isDrawing) return;
-                if (e.type === 'touchmove') e.preventDefault(); // 防止滾動
-                
-                const pos = getPos(e);
-                currentStroke.x.push(pos.x);
-                currentStroke.y.push(pos.y);
-                currentStroke.t.push(Date.now());
+                const inst = hwInstances[index];
+                if (!inst || !inst.ctx) return;
 
-                canvasCtx.lineTo(pos.x, pos.y);
-                canvasCtx.stroke();
+                const pos = getPos(e, inst.element);
+                inst.currentStroke.x.push(pos.x);
+                inst.currentStroke.y.push(pos.y);
+                inst.currentStroke.t.push(Date.now());
+
+                inst.ctx.lineTo(pos.x, pos.y);
+                inst.ctx.stroke();
             }
 
-            // [新增] 筆畫結束
-            function endStroke(e) {
+            // [修改] 筆畫結束
+            function endStroke(e, index) {
                 if (!isDrawing) return;
                 isDrawing = false;
-                canvasCtx.closePath();
+                const inst = hwInstances[index];
+                if (!inst || !inst.ctx) return;
+
+                inst.ctx.closePath();
                 
-                // 將暫存的筆畫轉為 Google API 格式並存入總筆跡
-                // Google 格式: [ [x1, x2...], [y1, y2...], [t1, t2...] ]
-                if (currentStroke.x.length > 0) {
-                    currentStrokes.push([
-                        currentStroke.x,
-                        currentStroke.y,
-                        currentStroke.t
+                if (inst.currentStroke.x.length > 0) {
+                    inst.strokes.push([
+                        inst.currentStroke.x,
+                        inst.currentStroke.y,
+                        inst.currentStroke.t
                     ]);
                 }
                 
-                document.getElementById('handwriting-canvas').classList.remove('canvas-active');
+                inst.container.classList.remove('canvas-active-interaction');
             }
 
-            // [新增] 取得座標 (相對於 Canvas)
-            function getPos(e) {
-                const canvas = document.getElementById('handwriting-canvas');
+            // [修改] 取得座標 (需傳入特定 canvas 元素)
+            function getPos(e, canvas) {
                 const rect = canvas.getBoundingClientRect();
                 let clientX, clientY;
                 
@@ -1002,50 +1100,50 @@
                 };
             }
 
-            // [新增] 清空畫布與資料
+            // [修改] 清空當前畫布
             function clearCanvas() {
-                const canvas = document.getElementById('handwriting-canvas');
-                if(!canvas || !canvasCtx) return;
+                const inst = hwInstances[activeHwIndex];
+                if(!inst || !inst.ctx) return;
                 
-                // [修改] 使用 fillRect 填滿白色，取代 clearRect (避免透明背景)
-                canvasCtx.fillStyle = '#ffffff';
-                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+                inst.ctx.fillStyle = '#ffffff';
+                inst.ctx.fillRect(0, 0, inst.element.width, inst.element.height);
                 
-                currentStrokes = [];
-                answerInput.value = '';
+                inst.strokes = [];
+                // 如果只有一個畫布，也清空輸入框，多個畫布時不清空輸入框以免誤刪
+                if (hwInstances.length === 1) {
+                    answerInput.value = '';
+                }
                 candidateBar.innerHTML = '';
                 candidateBar.classList.add('hidden');
             }
 
-            // [新增] 復原上一筆
+            // [修改] 復原當前畫布上一筆
             function undoStroke() {
-                if (currentStrokes.length === 0) return;
-                currentStrokes.pop();
-                redrawCanvas();
+                const inst = hwInstances[activeHwIndex];
+                if (!inst || inst.strokes.length === 0) return;
+                inst.strokes.pop();
+                redrawCanvas(inst);
             }
 
-            // [新增] 重繪畫布 (用於 Undo)
-            function redrawCanvas() {
-                const canvas = document.getElementById('handwriting-canvas');
-                if(!canvas || !canvasCtx) return;
+            // [修改] 重繪特定畫布
+            function redrawCanvas(inst) {
+                if(!inst || !inst.ctx) return;
                 
-                // [修改] 重繪前先填滿白色背景
-                canvasCtx.fillStyle = '#ffffff';
-                canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+                inst.ctx.fillStyle = '#ffffff';
+                inst.ctx.fillRect(0, 0, inst.element.width, inst.element.height);
                 
-                canvasCtx.beginPath();
-                currentStrokes.forEach(stroke => {
-                    // stroke is [[x...], [y...], [t...]]
+                inst.ctx.beginPath();
+                inst.strokes.forEach(stroke => {
                     const xs = stroke[0];
                     const ys = stroke[1];
                     if (xs.length > 0) {
-                        canvasCtx.moveTo(xs[0], ys[0]);
+                        inst.ctx.moveTo(xs[0], ys[0]);
                         for (let i = 1; i < xs.length; i++) {
-                            canvasCtx.lineTo(xs[i], ys[i]);
+                            inst.ctx.lineTo(xs[i], ys[i]);
                         }
                     }
                 });
-                canvasCtx.stroke();
+                inst.ctx.stroke();
             }
 
             // [新增] 載入 TrOCR AI 模型 (使用 dynamic import)
@@ -1086,8 +1184,9 @@
 
             // [修正] 辨識手寫 (改用 TrOCR)
             async function recognizeHandwriting() {
-                // 1. 檢查是否有筆跡
-                if (currentStrokes.length === 0) {
+                // 檢查是否有任何筆跡
+                const hasStrokes = hwInstances.some(inst => inst.strokes.length > 0);
+                if (!hasStrokes) {
                     showToast("請先手寫內容！");
                     return;
                 }
@@ -1102,26 +1201,50 @@
                 hwRecognizeBtn.textContent = "AI 辨識中...";
 
                 try {
-                    const canvas = document.getElementById('handwriting-canvas');
-                    // 將 Canvas 轉為 Data URL
-                    const imageData = canvas.toDataURL("image/png");
+                    let finalParts = [];
+                    let hwIndex = 0;
+
+                    // 依據 currentHandwritingStructure 組裝答案
+                    // 結構範例: ['cheer', '...', 'on']
+                    // hwInstances 對應: [Canvas1(cheer), Canvas2(on)]
+                    
+                    // 為了平行處理提升速度，先建立所有的 Promise
+                    const recognitionPromises = hwInstances.map(async (inst) => {
+                        if (inst.strokes.length === 0) return ""; // 空畫布回傳空字串
+                        const imageData = inst.element.toDataURL("image/png");
+                        const output = await ocrPipeline(imageData);
+                        let text = output[0]?.generated_text?.trim() || "";
+                        return text.replace(/\.$/, ''); // 移除句點
+                    });
 
-                    // 呼叫 pipeline 進行辨識
-                    const output = await ocrPipeline(imageData);
-                    // 輸出格式通常是 [{ generated_text: "hello" }]
+                    // 等待所有畫布辨識完成
+                    const recognizedTexts = await Promise.all(recognitionPromises);
+
+                    // 依照結構組裝
+                    let recIndex = 0;
+                    currentHandwritingStructure.forEach(part => {
+                        if (part === '...') {
+                            finalParts.push('...');
+                        } else {
+                            // 取出對應的辨識結果
+                            let text = recognizedTexts[recIndex] || "";
+                            if (text) finalParts.push(text);
+                            recIndex++;
+                        }
+                    });
+
+                    // 組合最終字串 (如果是單字就是單字，片語中間加空白，省略符號兩邊加空白)
+                    // 這裡的邏輯：把 finalParts 用空白連接即可，因為結構已經決定了順序
+                    // 例如: ['recognized_cheer', '...', 'recognized_on'] -> "recognized_cheer ... recognized_on"
+                    // 例如: ['come', 'true'] -> "come true"
                     
-                    const text = output[0]?.generated_text?.trim();
+                    const cleanedText = finalParts.join(' ');
                     
-                    if (text) {
-                        // TrOCR 可能會回傳句點，如果是單字練習可以移除
-                        const cleanedText = text.replace(/\.$/, '');
-                        
+                    if (cleanedText.trim()) {
                         answerInput.value = cleanedText;
                         answerInput.classList.add('border-green-500', 'bg-green-50');
                         setTimeout(() => answerInput.classList.remove('border-green-500', 'bg-green-50'), 500);
                         showToast("辨識結果：" + cleanedText);
-                        
-                        // 也可以把原文當作候選字 (TrOCR 通常只回傳最可能的結果，不像 API 有多個候選)
                         showCandidates([cleanedText]); 
                     } else {
                         showToast("未能辨識出文字");
@@ -1160,25 +1283,51 @@
 
 
             // [新增] 更新輸入介面 (控制手寫板顯示與輸入法)
-            function updateInputInterface(expectedLang) {
+            // 參數 targetAnswer: 正確答案字串，用來判斷是否需要多重畫布
+            function updateInputInterface(targetLanguage, targetAnswer = "") {
                 const hwContainer = document.getElementById('handwriting-container');
                 
                 // [修改] 為了方便在 PC 上除錯，暫時移除了 effectiveVersion === 'mobile' 的檢查
                 // 現在只要是輸入英文模式 (expectedLang === 'en')，都會顯示手寫板
-                const shouldUseHandwriting = (expectedLang === 'en');
+                const shouldUseHandwriting = (targetLanguage === 'en');
 
                 if (shouldUseHandwriting) {
                     // --- 啟用手寫模式 ---
-                    // 1. 顯示
                     hwContainer.classList.remove('hidden');
                     hwContainer.classList.add('flex');
                     
+                    // 分析目標單字結構
+                    // 1. 移除詞性標記 (v.) 等
+                    let cleanAnswer = targetAnswer.replace(/\(.*\)/g, '').trim();
+                    
+                    // 2. 判斷結構
+                    let structure = [];
+                    if (cleanAnswer.includes('...')) {
+                        // 分離式片語: cheer ... on -> ['cheer', '...', 'on']
+                        // 使用正則分割，但保留分隔符
+                        // 簡單做法：先拆分
+                        const parts = cleanAnswer.split('...');
+                        parts.forEach((p, i) => {
+                            if (p.trim()) structure.push(p.trim());
+                            if (i < parts.length - 1) structure.push('...');
+                        });
+                    } else if (cleanAnswer.includes(' ')) {
+                        // 一般片語: come true -> ['come', 'true']
+                        structure = cleanAnswer.split(/\s+/).filter(s => s);
+                    } else {
+                        // 單字: apple -> ['apple']
+                        structure = [cleanAnswer];
+                    }
+
+                    // 如果 structure 是空的 (例如意外狀況)，預設一個
+                    if (structure.length === 0) structure = ['word'];
+                    
+                    currentHandwritingStructure = structure;
+
                     // 2. 初始化 (延遲以確保 flex 渲染完成)
-                    // [關鍵] 延遲時間設為 400ms，配合 CSS transition
-                    setTimeout(() => initHandwritingBoard(), 400);
+                    setTimeout(() => initMultiHandwritingBoard(structure), 400);
                     
                     // 3. 觸發模型預載 (Lazy Load)
-                    // 當使用者切換到英文輸入模式時，就開始在背景下載模型
                     if (!ocrPipeline && !isModelLoading) {
                         initOCR();
                     }
@@ -1187,11 +1336,7 @@
                     answerInput.readOnly = true; 
                     answerInput.placeholder = "請在下方手寫英文...";
                     answerInput.classList.add('handwriting-mode');
-                    
-                    // 5. 嘗試讓輸入框失去焦點，避免鍵盤彈出
-                    if (document.activeElement === answerInput) {
-                        answerInput.blur();
-                    }
+                    if (document.activeElement === answerInput) answerInput.blur();
 
                 } else {
                     // --- 啟用鍵盤模式 (PC 或 輸入中文) ---
@@ -1199,11 +1344,11 @@
                     hwContainer.classList.remove('flex');
                     
                     answerInput.readOnly = false;
-                    answerInput.placeholder = (expectedLang === 'zh') ? "輸入中文答案 (按 Enter 提交)" : "輸入英文答案 (按 Enter 提交)";
+                    answerInput.placeholder = (targetLanguage === 'zh') ? "輸入中文答案 (按 Enter 提交)" : "輸入英文答案 (按 Enter 提交)";
                     answerInput.classList.remove('handwriting-mode');
                 }
                 
-                console.log(`輸入模式: ${shouldUseHandwriting ? '手寫 (Handwriting)' : '鍵盤 (Keyboard)'}, 語言: ${expectedLang}`);
+                console.log(`輸入模式: ${shouldUseHandwriting ? '手寫' : '鍵盤'}, 結構:`, currentHandwritingStructure);
             }
 
             // --- 視圖管理 ---
@@ -1398,6 +1543,8 @@
                     
                     let frontText, backText;
                     let targetLanguage = 'en'; // 預設輸入英文
+                    // [新增] 紀錄正確答案以便生成手寫板結構
+                    let targetAnswerForHandwriting = ''; 
 
                     if (isSpeed) {
                          // 極速挑戰
@@ -1406,6 +1553,7 @@
                                 frontText = card.chinese; 
                                 backText = card.english; 
                                 targetLanguage = 'en';
+                                targetAnswerForHandwriting = card.english;
                                 break;
                             case 'en-zh': 
                                 frontText = card.english; 
@@ -1419,6 +1567,7 @@
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden')); 
                                 speakWord(card); 
                                 targetLanguage = 'en';
+                                targetAnswerForHandwriting = card.english;
                                 break;
                         }
                     } else {
@@ -1433,10 +1582,13 @@
                                 // 複習模式下：沒翻面(看英文)=輸入中文，翻面(看中文)=輸入英文
                                 const isFlipped = flashcardContainer.classList.contains('flipped');
                                 targetLanguage = isFlipped ? 'en' : 'zh';
+                                // 複習模式翻面輸入英文時，目標答案是英文
+                                if (targetLanguage === 'en') targetAnswerForHandwriting = card.english;
                                 break;
                             case 'zh-en': case 'hard':
                                 frontText = card.chinese; backText = card.english; 
                                 targetLanguage = 'en';
+                                targetAnswerForHandwriting = card.english;
                                 break;
                             case 'en-zh':
                                 frontText = card.english; backText = card.chinese;
@@ -1448,6 +1600,7 @@
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden'));
                                 speakWord(card); 
                                 targetLanguage = 'en';
+                                targetAnswerForHandwriting = card.english;
                                 break;
                             case 'sentence-cloze':
                                 clozeQuestionContainer.classList.remove('hidden');
@@ -1457,12 +1610,13 @@
                                 toggleTranslationBtn.textContent = '顯示翻譯';
                                 backText = card.sentence.answer || card.english;
                                 targetLanguage = 'en';
+                                targetAnswerForHandwriting = card.sentence.answer;
                                 break;
                         }
                     }
                     
-                    // [新增] 根據目標語言決定是否顯示手寫板
-                    updateInputInterface(targetLanguage);
+                    // [新增] 傳入目標答案以判斷手寫板數量
+                    updateInputInterface(targetLanguage, targetAnswerForHandwriting);
 
                     if (frontText) {
                         frontDisplay.classList.remove('hidden');
@@ -1768,6 +1922,11 @@
                     endSpeedChallenge();
                 }
             };
+            
+            // ... (rest of the code remains the same)
+            // 為了節省篇幅，後續程式碼保持不變
+            // 包括 speakWord, initializeApp 等
+            // ...
 
             const endSpeedChallenge = () => {
                 clearInterval(timerInterval);
@@ -2215,7 +2374,16 @@
                     
                     // [智慧輸入切換] 複習模式下：翻面後看到中文->要輸入英文
                     const targetLanguage = isFlipped ? 'en' : 'zh';
-                    updateInputInterface(targetLanguage);
+                    // 複習模式下，翻到英文面輸入中文，翻到中文面輸入英文
+                    // 這裡的邏輯是: 沒翻面(看英文)->輸入中文(zh), 翻面(看中文)->輸入英文(en)
+                    // 所以 targetLanguage 已經是正確的目標語言
+                    // 但我們需要知道正確答案是什麼，才能判斷手寫板結構
+                    let targetAnswer = '';
+                    if (targetLanguage === 'en') {
+                        targetAnswer = wordsForCurrentMode[currentCardIndex].english;
+                    }
+                    
+                    updateInputInterface(targetLanguage, targetAnswer);
                     
                     feedbackDisplay.textContent = '';
                     setTimeout(() => answerInput.focus(), 100);
@@ -2579,6 +2747,19 @@
                     } else {
                         // 【修改】使用新的預設單字，展示文法感知功能
                         const defaultWords = [
+                            { 
+                                english: 'cheer ... on', 
+                                chinese: '為...加油', 
+                                sentence: { 
+                                    en: 'We ___ the team ___.', 
+                                    zh: '我們為這支隊伍加油。',
+                                    answer: 'cheered ... on' 
+                                } 
+                            },
+                            { 
+                                english: 'come true', 
+                                chinese: '成真'
+                             },
                             { 
                                 english: 'watch (v.)', 
                                 chinese: '觀看', 
@@ -2588,21 +2769,8 @@
                                     answer: 'watches' 
                                 } 
                             },
-                            { 
-                                english: 'jog (v.)', 
-                                chinese: '慢跑',
-                                sentence: {
-                                    en: 'She is ___ in the park now.',
-                                    zh: '她現在正在公園慢跑。',
-                                    answer: 'jogging'
-                                }
-                             },
                             { english: 'study (v.)', chinese: '研讀' },
                             { english: 'last (adj.)', chinese: '前一個的' },
-                            { english: 'death (n.)', chinese: '死亡' },
-                            { english: 'a few (adj.)', chinese: '一些' },
-                            { english: 'ago (adv.)', chinese: '以前' },
-                            { english: 'parents (n.)', chinese: '父母親' },
                         ];
                         words = defaultWords.map(word => ({ ...word, proficiency: 0, incorrectCount: 0 }));
                         saveWordsToStorage();