Update index.html

index.html

@@ -412,11 +412,7 @@
             </div>
         </div>
 
-        <!-- 舊的提示功能區塊 (保留但預設隱藏，新版已整合到下方) -->
-        <div id="hint-section" class="w-full max-w-md mt-4 text-center hidden">
-            <!-- 已整合到下方 -->
-             <p id="hint-display" class="mt-2 text-gray-600 font-semibold h-6"></p>
-        </div>
+        <!-- [修正] 移除舊的隱藏提示區塊，將 hint-display 移至下方 quiz-container 內 -->
         
         <!-- [第三步] 插入手寫板介面 (取代舊的 input form) -->
         <div id="quiz-container" class="w-full max-w-md mt-4">
@@ -451,9 +447,13 @@
 
                 <button id="submit-answer-btn" class="w-full bg-indigo-500 text-white p-4 rounded-xl text-xl font-bold hover:bg-indigo-600 transition-colors">提交答案</button>
                 
-                <button id="hint-btn" class="w-full bg-yellow-500 text-white p-3 rounded-xl text-lg font-bold hover:bg-yellow-600 transition-colors hidden">顯示提示</button>
+                <div class="flex flex-col items-center gap-2">
+                    <button id="hint-btn" class="w-full bg-yellow-500 text-white p-3 rounded-xl text-lg font-bold hover:bg-yellow-600 transition-colors hidden">顯示提示</button>
+                    <!-- [修正] hint-display 移到這裡，確保它在可見區域 -->
+                    <p id="hint-display" class="text-gray-600 font-semibold min-h-[1.5rem]"></p>
+                </div>
             </div>
-            <div id="feedback-display" class="text-center mt-3 h-6 font-semibold"></div>
+            <div id="feedback-display" class="text-center mt-1 h-6 font-semibold"></div>
         </div>
 
         <!-- 答錯確認區塊 (間隔重複模式使用) -->
@@ -897,7 +897,7 @@
                     if (part === '...') {
                         // 插入省略號文字
                         const ellipsis = document.createElement('div');
-                        ellipsis.className = 'text-3xl font-bold text-gray-400 mx-1 select-none';
+                        ellipsis.className = 'text-3xl font-bold text-gray-400 mx-1 select-none w-full text-center py-2'; // [修改] 加寬與置中
                         ellipsis.textContent = '...';
                         wrapper.appendChild(ellipsis);
                         // 省略號不佔用 hwInstances 索引
@@ -905,16 +905,11 @@
                         // 建立 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 {
-                            // [修改] 調整最小寬度為 220px，以容納較長的單字
-                            container.style.flex = '1 1 220px'; // Flex grow, shrink, basis
-                            container.style.minWidth = '220px';
-                        }
+                        
+                        // [修改] 強制設定寬度為 100%，讓多個畫布垂直堆疊，保持最大書寫空間
+                        container.style.width = '100%'; 
                         container.style.height = '250px';
+                        container.style.marginBottom = '10px'; // 畫布之間增加一點間距
                         
                         // 建立 Canvas
                         const canvas = document.createElement('canvas');
@@ -1101,18 +1096,32 @@
                 };
             }
 
-            // [修改] 清空當前畫布
-            function clearCanvas() {
-                const inst = hwInstances[activeHwIndex];
-                if(!inst || !inst.ctx) return;
-                
-                inst.ctx.fillStyle = '#ffffff';
-                inst.ctx.fillRect(0, 0, inst.element.width, inst.element.height);
-                
-                inst.strokes = [];
-                // 如果只有一個畫布，也清空輸入框，多個畫布時不清空輸入框以免誤刪
-                if (hwInstances.length === 1) {
+            // [修改] 清空畫布 (支援清除全部)
+            function clearCanvas(forceClearAll = false) {
+                // 如果是按鈕點擊事件 (Event) 或者 forceClearAll 為 true，則清除所有
+                const shouldClearAll = (forceClearAll === true) || (forceClearAll instanceof Event);
+
+                if (shouldClearAll) {
+                    hwInstances.forEach(inst => {
+                        if (inst.ctx) {
+                            inst.ctx.fillStyle = '#ffffff';
+                            inst.ctx.fillRect(0, 0, inst.element.width, inst.element.height);
+                            inst.strokes = [];
+                        }
+                    });
                     answerInput.value = '';
+                } else {
+                    // 只清除當前 (保留給特定邏輯使用)
+                    const inst = hwInstances[activeHwIndex];
+                    if(!inst || !inst.ctx) return;
+                    
+                    inst.ctx.fillStyle = '#ffffff';
+                    inst.ctx.fillRect(0, 0, inst.element.width, inst.element.height);
+                    inst.strokes = [];
+                    
+                    if (hwInstances.length === 1) {
+                        answerInput.value = '';
+                    }
                 }
                 candidateBar.innerHTML = '';
                 candidateBar.classList.add('hidden');
@@ -1797,8 +1806,8 @@
                     feedbackDisplay.classList.add('text-green-600');
                     triggerConfetti();
                     
-                    // [修正] 使用新的清空函式
-                    clearCanvas();
+                    // [修正] 答對時清除所有畫布 (傳入 true)
+                    clearCanvas(true);
 
                     if (!flashcardContainer.classList.contains('flipped')) {
                         flashcardContainer.classList.add('flipped');
@@ -1900,7 +1909,7 @@
                 const reinsertIndex = Math.min(quizQueue.length, 3);
                 quizQueue.splice(reinsertIndex, 0, wrongCard);
                 // [修正] 清空手寫板
-                clearCanvas();
+                clearCanvas(true);
                 displayCard();
             });
 
@@ -1934,11 +1943,6 @@
                     endSpeedChallenge();
                 }
             };
-            
-            // ... (rest of the code remains the same)
-            // 為了節省篇幅，後續程式碼保持不變
-            // 包括 speakWord, initializeApp 等
-            // ...
 
             const endSpeedChallenge = () => {
                 clearInterval(timerInterval);