Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on Jun 10, 2025

Commit

78bf12a

verified ·

1 Parent(s): 938bb2b

Upload 40 files

Browse files

Files changed (4) hide show

.gitattributes +1 -0
Theme.mp3 +3 -0
index.html +2 -3
tower.js +228 -205

.gitattributes CHANGED Viewed

@@ -42,3 +42,4 @@ valley.jpg filter=lfs diff=lfs merge=lfs -text
 valley.mp3 filter=lfs diff=lfs merge=lfs -text
 tower.jpg filter=lfs diff=lfs merge=lfs -text
 tower.mp3 filter=lfs diff=lfs merge=lfs -text

 valley.mp3 filter=lfs diff=lfs merge=lfs -text
 tower.jpg filter=lfs diff=lfs merge=lfs -text
 tower.mp3 filter=lfs diff=lfs merge=lfs -text
+Theme.mp3 filter=lfs diff=lfs merge=lfs -text

Theme.mp3 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:91fe1ace3e637b39f05c9d5067b91c78d06d4a62217416dffd2998e75633304f
+size 2676118

index.html CHANGED Viewed

@@ -9,7 +9,7 @@
 <body class="home-page">
     <!-- 音效元素 -->
     <audio id="bgm" loop>
-        <source src="bgm.mp3" type="audio/mpeg">
     </audio>
     <div class="game-container">
@@ -24,8 +24,7 @@
         <!-- 音樂來源註記 -->
         <div class="music-credit">
-            <p>背景音樂：샛별 - Level Up</p>
-            <p>推廣：J&B無版權音樂庫 <a href="https://bit.ly/2YfWIhw" target="_blank">https://bit.ly/2YfWIhw</a></p>
             <button id="toggle-bgm" class="small-btn">音樂開/關</button>
         </div>
     </div>

 <body class="home-page">
     <!-- 音效元素 -->
     <audio id="bgm" loop>
+        <source src="Theme.mp3" type="audio/mpeg">
     </audio>
     <div class="game-container">
         <!-- 音樂來源註記 -->
         <div class="music-credit">
+            <p>背景音樂：由Suno智做</p>
             <button id="toggle-bgm" class="small-btn">音樂開/關</button>
         </div>
     </div>

tower.js CHANGED Viewed

@@ -316,7 +316,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 const dropZoneSortable = new Sortable(dropZone, {
                     group: {
                         name: 'formula',
-                        pull: true,
                         put: true
                     },
                     animation: 100,
@@ -352,6 +352,11 @@ document.addEventListener('DOMContentLoaded', function() {
                         evt.from.classList.remove('filled');
                         evt.from.style.backgroundColor = 'rgba(100, 100, 100, 0.5)';
                         // 更新保存的答案
                         updateSavedAnswers();
                     }
@@ -382,6 +387,8 @@ document.addEventListener('DOMContentLoaded', function() {
             dragItem.id = `drag-item-${index}`;
             dragItem.textContent = item;
             dragItem.dataset.value = item;
             // 添加點擊事件，點擊可移除（如果在拖放區內）
             dragItem.addEventListener('click', function() {
@@ -406,8 +413,8 @@ document.addEventListener('DOMContentLoaded', function() {
         const dragItemsSortable = new Sortable(dragItemsContainer, {
             group: {
                 name: 'formula',
-                pull: 'clone', // 設置為clone模式，拖拽時複製元素
-                put: true
             },
             animation: 100,
             delay: 0,
@@ -415,20 +422,17 @@ document.addEventListener('DOMContentLoaded', function() {
             ghostClass: "drag-ghost",
             forceFallback: true,
             fallbackTolerance: 3,
-            sort: false, // 禁止在容器內排序
             filter: '.disabled', // 禁止拖拽的元素
-            onStart: function(evt) {
-                evt.item.style.opacity = '0.8';
-            },
-            onEnd: function(evt) {
-                evt.item.style.opacity = '1';
-            },
-            // 當元素被複製時
             onClone: function(evt) {
-                const clone = evt.clone;
-                // 為複製的元素添加點擊事件，點擊可移除（如果在拖放區內）
-                clone.addEventListener('click', function() {
                     const parent = this.parentElement;
                     if (parent && parent.classList.contains('drop-zone')) {
                         parent.classList.remove('filled');
@@ -446,19 +450,19 @@ document.addEventListener('DOMContentLoaded', function() {
         sortableInstances.push(dragItemsSortable);
-        // 恢復已保存的答案
-        if (savedAnswers.length > 0) {
             savedAnswers.forEach((value, index) => {
-                if (index < dropZones.length) {
                     // 找到對應值的拖拽項
-                    const dragItem = Array.from(dragItemElements).find(item => item.dataset.value === value);
-                    if (dragItem) {
-                        // 複製拖拽項
-                        const clonedItem = dragItem.cloneNode(true);
-                        clonedItem.dataset.value = value;
                         // 添加點擊事件，點擊可移除
-                        clonedItem.addEventListener('click', function() {
                             const parent = this.parentElement;
                             if (parent && parent.classList.contains('drop-zone')) {
                                 parent.classList.remove('filled');
@@ -473,7 +477,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         });
                         // 添加到拖放區
-                        dropZones[index].appendChild(clonedItem);
                         dropZones[index].classList.add('filled');
                         dropZones[index].style.backgroundColor = 'rgba(255, 140, 0, 0.3)';
                     }
@@ -482,247 +486,243 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         // 顯示檢查答案按鈕，隱藏下一題按鈕
-        checkAnswerBtn.style.display = 'block';
         nextQuestionBtn.style.display = 'none';
-        // 隱藏反饋容器
         feedbackContainer.style.display = 'none';
-        feedbackContainer.className = 'feedback-container';
     }
     // 更新保存的答案
     function updateSavedAnswers() {
         const answers = [];
-        // 獲取所有拖放區中的值
         dropZones.forEach(zone => {
-            const items = Array.from(zone.children);
             if (items.length > 0) {
-                const value = items[0].dataset.value;
-                answers.push(value);
             } else {
                 answers.push(null);
             }
         });
-        // 過濾掉null值
-        const filteredAnswers = answers.filter(answer => answer !== null);
         // 保存答案
         if (currentStage === 1) {
-            stage1Answers[currentQuestionIndex] = filteredAnswers;
         } else {
-            stage2Answers[currentQuestionIndex] = filteredAnswers;
         }
     }
-    // 檢查答案按鈕點擊事件
-    checkAnswerBtn.addEventListener('click', function() {
         // 獲取當前階段的問題數據
         const stageData = currentStage === 1 ? questions[currentQuestionIndex].stage1 : questions[currentQuestionIndex].stage2;
         // 獲取用戶答案
-        const userAnswers = currentStage === 1 ? stage1Answers[currentQuestionIndex] : stage2Answers[currentQuestionIndex];
-        // 檢查是否所有拖放區都有值
-        if (userAnswers.length < dropZones.length) {
-            feedbackContainer.textContent = '請填寫所有空格！';
-            feedbackContainer.className = 'feedback-container incorrect';
             feedbackContainer.style.display = 'block';
-            wrongSound.play();
-            return;
         }
         // 檢查答案是否正確
-        const isCorrect = checkAnswer(userAnswers, stageData.answers);
         if (isCorrect) {
-            // 答案正確
-            feedbackContainer.textContent = '答對了！';
-            feedbackContainer.className = 'feedback-container correct';
-            feedbackContainer.style.display = 'block';
-            correctSound.play();
-            // 如果是第一階段，啟用第二階段按鈕
             if (currentStage === 1) {
-                stage2Btn.disabled = false;
-                // 顯示下一題按鈕，隱藏檢查答案按鈕
-                checkAnswerBtn.style.display = 'none';
-                nextQuestionBtn.style.display = 'block';
                 nextQuestionBtn.textContent = '進入第二階段';
                 nextQuestionBtn.onclick = function() {
                     loadQuestion(currentQuestionIndex, 2);
                 };
             } else {
-                // 如果是第二階段，標記問題為已完成
-                correctAnswers++;
-                // 打開對應的門
-                if (currentQuestionIndex < doorsProgress.length) {
-                    doorsProgress[currentQuestionIndex].classList.add('opened');
-                }
-                // 如果還有下一題，顯示下一題按鈕
                 if (currentQuestionIndex < questions.length - 1) {
-                    checkAnswerBtn.style.display = 'none';
-                    nextQuestionBtn.style.display = 'block';
                     nextQuestionBtn.textContent = '下一題';
                     nextQuestionBtn.onclick = function() {
                         loadQuestion(currentQuestionIndex + 1, 1);
                     };
                 } else {
-                    // 如果是最後一題，顯示結果
-                    showResult();
                 }
             }
         } else {
-            // 答案錯誤
             wrongAttempts++;
-            wrongSound.play();
             if (currentStage === 1) {
-                // 第一階段答錯
-                if (wrongAttempts === 1) {
-                    // 第一次答錯，顯示提示圖片
-                    showHintImage();
-                    feedbackContainer.textContent = '答錯了，請參考上方提示修正答案！';
-                    feedbackContainer.className = 'feedback-container incorrect';
-                    feedbackContainer.style.display = 'block';
                 } else {
-                    // 第二次或更多次答錯，顯示正確答案
-                    showHintImage();
-                    const correctAnswerText = questions[currentQuestionIndex].stage1.correctAnswer;
-                    feedbackContainer.innerHTML = `答錯了，請參考上方提示修正答案！<br><br>正確答案應為：<br>「${correctAnswerText}」<br>請依照此答案填入，才能進入第二階段。`;
-                    feedbackContainer.className = 'feedback-container incorrect';
-                    feedbackContainer.style.display = 'block';
                 }
             } else {
-                // 第二階段答錯
-                feedbackContainer.textContent = '答錯了，請再試一次！';
-                feedbackContainer.className = 'feedback-container incorrect';
-                feedbackContainer.style.display = 'block';
             }
-        }
-    });
-    // 顯示提示圖片
-    function showHintImage() {
-        // 移除現有的提示容器
-        const existingHintContainers = document.querySelectorAll('.hint-container');
-        existingHintContainers.forEach(container => container.remove());
-        // 創建提示容器
-        const hintContainer = document.createElement('div');
-        hintContainer.className = 'hint-container';
-        hintContainer.style.marginBottom = '15px';
-        hintContainer.style.padding = '10px';
-        hintContainer.style.backgroundColor = 'rgba(60, 60, 60, 0.7)';
-        hintContainer.style.borderRadius = '8px';
-        hintContainer.style.border = '1px solid rgba(255, 140, 0, 0.5)';
-        hintContainer.style.textAlign = 'center';
-        // 創建提示圖片
-        const hintImage = document.createElement('img');
-        hintImage.src = `towerhint${currentQuestionIndex + 1}1.jpg`;
-        hintImage.style.maxWidth = '50%';
-        hintImage.style.height = 'auto';
-        hintImage.style.marginBottom = '10px';
-        hintContainer.appendChild(hintImage);
-        // 創建提示文字
-        const hintText = document.createElement('div');
-        hintText.textContent = '請仔細觀察上方提示圖，按照分配律的方式展開填入正確答案。';
-        hintText.style.color = 'white';
-        hintText.style.fontSize = '1rem';
-        hintContainer.appendChild(hintText);
-        // 插入到公式模板前面
-        formulaTemplate.parentNode.insertBefore(hintContainer, formulaTemplate);
-    }
-    // 檢查答案是否正確
-    function checkAnswer(userAnswers, correctAnswerSets) {
-        // 如果用戶答案長度不符合任何一組正確答案，直接返回false
-        const isLengthMatch = correctAnswerSets.some(set => set.length === userAnswers.length);
-        if (!isLengthMatch) return false;
-        // 檢查每組正確答案
-        for (const correctSet of correctAnswerSets) {
-            // 如果長度不同，跳過這組
-            if (correctSet.length !== userAnswers.length) continue;
-            // 複製用戶答案和正確答案，以便進行排序和比較
-            const sortedUserAnswers = [...userAnswers].sort();
-            const sortedCorrectAnswers = [...correctSet].sort();
-            // 比較排序後的答案
-            const isMatch = sortedUserAnswers.every((answer, index) => answer === sortedCorrectAnswers[index]);
-            // 如果找到匹配的答案組，返回true
-            if (isMatch) return true;
         }
-        // 如果沒有匹配的答案組，返回false
-        return false;
     }
-    // 階段按鈕點擊事件
-    stage1Btn.addEventListener('click', function() {
-        if (currentStage !== 1) {
-            loadQuestion(currentQuestionIndex, 1);
-        }
-    });
-    stage2Btn.addEventListener('click', function() {
-        // 只有在第一階段答對後才能進入第二階段
-        if (currentStage !== 2 && checkAnswer(stage1Answers[currentQuestionIndex], questions[currentQuestionIndex].stage1.answers)) {
-            loadQuestion(currentQuestionIndex, 2);
-        }
-    });
     // 顯示結果
     function showResult() {
         quizContainer.style.display = 'none';
         resultContainer.style.display = 'block';
-        // 計算得分（0-3星）
-        const score = Math.min(3, Math.max(0, Math.floor(correctAnswers / 2)));
-        // 更新結果標題和訊息
-        if (score >= 3) {
-            resultTitle.textContent = '試煉完成！';
-            resultMessage.innerHTML = `恭喜你成功通過展開之塔的考驗！<br>你已經掌握了平方展開公式的應用，獲得了「展開融合」的力量。<br>這股力量將幫助你在未來的數學旅程中更加得心應手。`;
-            // 顯示成功按鈕
-            successButtons.style.display = 'flex';
             failButtons.style.display = 'none';
         } else {
-            resultTitle.textContent = '試煉未完成';
-            resultMessage.innerHTML = `你完成了 ${correctAnswers} 道題目，但還未能完全掌握平方展開公式。<br>不要氣餒，再試一次吧！`;
-            // 顯示失敗按鈕
             successButtons.style.display = 'none';
-            failButtons.style.display = 'flex';
         }
-        // 更新星星
-        starResults.forEach((star, index) => {
-            if (index < score) {
-                star.classList.add('earned');
-            } else {
-                star.classList.remove('earned');
-            }
-        });
         // 更新遊戲進度
-        gameProgress.completedTrials["展開之塔"].completed = score >= 3;
         gameProgress.completedTrials["展開之塔"].score = score;
-        // 標記已完成的挑戰
-        for (let i = 0; i < correctAnswers && i < 6; i++) {
             gameProgress.completedTrials["展開之塔"].challengesCompleted[i] = true;
         }
@@ -730,37 +730,39 @@ document.addEventListener('DOMContentLoaded', function() {
         gameProgress.lastSaved = new Date().toISOString();
         localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
-        // 檢查成就解鎖
         if (window.achievementSystem) {
             const gameState = {
                 currentTrial: "展開之塔",
                 totalStars: score,
-                currentTrialScore: score,
-                currentTrialCompleted: score >= 3,
-                totalTrialsCompleted: Object.values(gameProgress.completedTrials).filter(trial => trial.completed).length
             };
             window.achievementSystem.checkAllAchievements(gameState);
         }
     }
-    // 重新挑戰按鈕點擊事件
     retryBtn.addEventListener('click', function() {
-        // 重置遊戲狀態
-        currentQuestionIndex = 0;
-        currentStage = 1;
         correctAnswers = 0;
-        stage1Answers = Array(questions.length).fill(null).map(() => []);
-        stage2Answers = Array(questions.length).fill(null).map(() => []);
-        // 重置門的狀態
         Array.from(doorsProgress).forEach(door => {
-            door.classList.remove('opened');
         });
-        // 顯示問題容器，隱藏結果容器
-        resultContainer.style.display = 'none';
-        quizContainer.style.display = 'block';
         // 載入第一題
         loadQuestion(0, 1);
@@ -775,4 +777,25 @@ document.addEventListener('DOMContentLoaded', function() {
     nextTrialBtn.addEventListener('click', function() {
         window.location.href = 'kingdom_map.html';
     });
 });

                 const dropZoneSortable = new Sortable(dropZone, {
                     group: {
                         name: 'formula',
+                        pull: 'clone', // 允許從答案區拖出，但會被移除
                         put: true
                     },
                     animation: 100,
                         evt.from.classList.remove('filled');
                         evt.from.style.backgroundColor = 'rgba(100, 100, 100, 0.5)';
+                        // 從答案格拖出的方塊直接移除，不回到拖拉區
+                        if (evt.item && evt.item.parentNode) {
+                            evt.item.remove();
+                        }
                         // 更新保存的答案
                         updateSavedAnswers();
                     }
             dragItem.id = `drag-item-${index}`;
             dragItem.textContent = item;
             dragItem.dataset.value = item;
+            dragItem.style.willChange = 'transform';
+            dragItem.style.touchAction = 'none';
             // 添加點擊事件，點擊可移除（如果在拖放區內）
             dragItem.addEventListener('click', function() {
         const dragItemsSortable = new Sortable(dragItemsContainer, {
             group: {
                 name: 'formula',
+                pull: 'clone', // 設置為clone模式，拖拽項不會消失
+                put: false // 不允許放回拖拽區
             },
             animation: 100,
             delay: 0,
             ghostClass: "drag-ghost",
             forceFallback: true,
             fallbackTolerance: 3,
+            sort: false, // 禁止排序
             filter: '.disabled', // 禁止拖拽的元素
             onClone: function(evt) {
+                // 克隆元素時添加相同的樣式和數據
+                evt.clone.className = evt.item.className;
+                evt.clone.dataset.value = evt.item.dataset.value;
+                evt.clone.style.willChange = 'transform';
+                evt.clone.style.touchAction = 'none';
+                // 添加點擊事件，點擊可移除（如果在拖放區內）
+                evt.clone.addEventListener('click', function() {
                     const parent = this.parentElement;
                     if (parent && parent.classList.contains('drop-zone')) {
                         parent.classList.remove('filled');
         sortableInstances.push(dragItemsSortable);
+        // 如果有已保存的答案，恢復它們
+        if (savedAnswers && savedAnswers.length > 0) {
             savedAnswers.forEach((value, index) => {
+                if (index < dropZones.length && value) {
                     // 找到對應值的拖拽項
+                    const matchingItem = Array.from(dragItemElements).find(item => item.dataset.value === value);
+                    if (matchingItem) {
+                        // 克隆拖拽項
+                        const clone = matchingItem.cloneNode(true);
+                        clone.dataset.value = value;
                         // 添加點擊事件，點擊可移除
+                        clone.addEventListener('click', function() {
                             const parent = this.parentElement;
                             if (parent && parent.classList.contains('drop-zone')) {
                                 parent.classList.remove('filled');
                         });
                         // 添加到拖放區
+                        dropZones[index].appendChild(clone);
                         dropZones[index].classList.add('filled');
                         dropZones[index].style.backgroundColor = 'rgba(255, 140, 0, 0.3)';
                     }
         }
         // 顯示檢查答案按鈕，隱藏下一題按鈕
+        checkAnswerBtn.style.display = 'inline-block';
         nextQuestionBtn.style.display = 'none';
+        // 清空反饋容器
+        feedbackContainer.innerHTML = '';
         feedbackContainer.style.display = 'none';
     }
     // 更新保存的答案
     function updateSavedAnswers() {
         const answers = [];
+        // 獲取所有拖放區的值
         dropZones.forEach(zone => {
+            const items = zone.querySelectorAll('.drag-item');
             if (items.length > 0) {
+                answers.push(items[0].dataset.value);
             } else {
                 answers.push(null);
             }
         });
         // 保存答案
         if (currentStage === 1) {
+            stage1Answers[currentQuestionIndex] = answers;
         } else {
+            stage2Answers[currentQuestionIndex] = answers;
         }
     }
+    // 檢查答案
+    function checkAnswer() {
         // 獲取當前階段的問題數據
         const stageData = currentStage === 1 ? questions[currentQuestionIndex].stage1 : questions[currentQuestionIndex].stage2;
         // 獲取用戶答案
+        const userAnswerValues = [];
+        dropZones.forEach(zone => {
+            const items = zone.querySelectorAll('.drag-item');
+            if (items.length > 0) {
+                userAnswerValues.push(items[0].dataset.value);
+            } else {
+                userAnswerValues.push(null);
+            }
+        });
+        // 檢查是否有空白答案
+        if (userAnswerValues.includes(null)) {
+            feedbackContainer.innerHTML = '<p class="error">請填寫所有空格！</p>';
             feedbackContainer.style.display = 'block';
+            return false;
         }
         // 檢查答案是否正確
+        let isCorrect = false;
+        if (currentStage === 1) {
+            // 第一階段：檢查兩組答案是否匹配
+            const group1 = [userAnswerValues[0], userAnswerValues[1]];
+            const group2 = [userAnswerValues[2], userAnswerValues[3]];
+            // 檢查每個答案組合是否匹配任何一個正確答案組合
+            isCorrect = stageData.answers.some(answer => {
+                return (
+                    (group1.includes(answer[0]) && group1.includes(answer[1])) &&
+                    (group2.includes(answer[0]) && group2.includes(answer[1]))
+                );
+            });
+        } else {
+            // 第二階段：檢查三個值是否匹配
+            isCorrect = stageData.answers.some(answer => {
+                // 第一個值必須是2
+                if (userAnswerValues[0] !== answer[0]) return false;
+                // 其他兩個值順序不限
+                const otherValues = [userAnswerValues[1], userAnswerValues[2]];
+                return (
+                    otherValues.includes(answer[1]) &&
+                    otherValues.includes(answer[2])
+                );
+            });
+        }
+        // 顯示反饋
+        feedbackContainer.innerHTML = '';
+        feedbackContainer.style.display = 'block';
         if (isCorrect) {
+            // 播放正確音效
+            correctSound.currentTime = 0;
+            correctSound.play().catch(e => console.log('播放音效失敗:', e));
+            // 顯示正確反饋
+            const correctFeedback = document.createElement('p');
+            correctFeedback.className = 'success';
+            correctFeedback.textContent = '答對了！';
+            feedbackContainer.appendChild(correctFeedback);
+            // 更新UI
+            checkAnswerBtn.style.display = 'none';
             if (currentStage === 1) {
+                // 第一階段完成，進入第二階段
                 nextQuestionBtn.textContent = '進入第二階段';
                 nextQuestionBtn.onclick = function() {
                     loadQuestion(currentQuestionIndex, 2);
                 };
             } else {
+                // 第二階段完成，進入下一題或完成挑戰
                 if (currentQuestionIndex < questions.length - 1) {
                     nextQuestionBtn.textContent = '下一題';
                     nextQuestionBtn.onclick = function() {
                         loadQuestion(currentQuestionIndex + 1, 1);
                     };
                 } else {
+                    nextQuestionBtn.textContent = '完成挑戰';
+                    nextQuestionBtn.onclick = function() {
+                        showResult();
+                    };
                 }
             }
+            nextQuestionBtn.style.display = 'inline-block';
+            // 更新進度
+            if (currentStage === 2) {
+                doorsProgress[currentQuestionIndex].classList.add('completed');
+                correctAnswers++;
+            }
+            return true;
         } else {
+            // 播放錯誤音效
+            wrongSound.currentTime = 0;
+            wrongSound.play().catch(e => console.log('播放音效失敗:', e));
+            // 增加錯誤嘗試次數
             wrongAttempts++;
+            // 第一階段特殊處理
             if (currentStage === 1) {
+                // 創建提示容器（如果不存在）
+                let hintContainer = document.querySelector('.hint-container');
+                if (!hintContainer) {
+                    hintContainer = document.createElement('div');
+                    hintContainer.className = 'hint-container';
+                    hintContainer.style.marginBottom = '15px';
+                    hintContainer.style.padding = '10px';
+                    hintContainer.style.backgroundColor = 'rgba(60, 60, 60, 0.7)';
+                    hintContainer.style.borderRadius = '8px';
+                    hintContainer.style.border = '1px solid rgba(255, 0, 0, 0.5)';
+                    hintContainer.style.textAlign = 'center';
+                    // 插入到公式模板前面
+                    formulaTemplate.parentNode.insertBefore(hintContainer, formulaTemplate);
+                }
+                // 清空提示容器
+                hintContainer.innerHTML = '';
+                // 添加提示圖片
+                const hintImage = document.createElement('img');
+                hintImage.src = `towerhint${currentQuestionIndex + 1}1.jpg`;
+                hintImage.style.maxWidth = '50%';
+                hintImage.style.display = 'block';
+                hintImage.style.margin = '0 auto 10px';
+                hintContainer.appendChild(hintImage);
+                // 添加提示文字
+                const hintText = document.createElement('p');
+                hintText.style.color = 'white';
+                hintText.style.margin = '5px 0';
+                if (wrongAttempts === 1) {
+                    // 第一次錯誤
+                    hintText.textContent = '請仔細觀察上方提示圖，按照分配律的方式展開填入正確答案。';
                 } else {
+                    // 第二次或更多次錯誤
+                    hintText.textContent = `正確答案應為：\n「${stageData.correctAnswer}」\n請依照此答案填入，才能進入第二階段。`;
                 }
+                hintContainer.appendChild(hintText);
+                // 顯示錯誤反饋
+                const errorFeedback = document.createElement('p');
+                errorFeedback.className = 'error';
+                errorFeedback.textContent = '答錯了，請參考上方提示修正答案！';
+                feedbackContainer.appendChild(errorFeedback);
             } else {
+                // 第二階段錯誤
+                const errorFeedback = document.createElement('p');
+                errorFeedback.className = 'error';
+                errorFeedback.textContent = '答錯了，請再試一次！';
+                feedbackContainer.appendChild(errorFeedback);
             }
+            return false;
         }
     }
     // 顯示結果
     function showResult() {
         quizContainer.style.display = 'none';
         resultContainer.style.display = 'block';
+        // 計算得分（滿分3星）
+        const score = Math.min(3, Math.max(1, Math.ceil(correctAnswers / questions.length * 3)));
+        // 更新星星顯示
+        for (let i = 0; i < starResults.length; i++) {
+            starResults[i].style.opacity = i < score ? '1' : '0.3';
+        }
+        // 更新結果文字
+        if (score === 3) {
+            resultTitle.textContent = '恭喜完成挑戰！';
+            resultMessage.textContent = '你已完美掌握平方展開的技巧！';
+            successButtons.style.display = 'block';
+            failButtons.style.display = 'none';
+        } else if (score === 2) {
+            resultTitle.textContent = '挑戰成功！';
+            resultMessage.textContent = '你已基本掌握平方展開的技巧，繼續加油！';
+            successButtons.style.display = 'block';
             failButtons.style.display = 'none';
         } else {
+            resultTitle.textContent = '再接再厲！';
+            resultMessage.textContent = '平方展開需要更多練習，不要氣餒！';
             successButtons.style.display = 'none';
+            failButtons.style.display = 'block';
         }
         // 更新遊戲進度
+        gameProgress.completedTrials["展開之塔"].completed = score >= 2;
         gameProgress.completedTrials["展開之塔"].score = score;
+        // 標記所有問題為已完成
+        for (let i = 0; i < questions.length; i++) {
             gameProgress.completedTrials["展開之塔"].challengesCompleted[i] = true;
         }
         gameProgress.lastSaved = new Date().toISOString();
         localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
+        // 檢查成就
         if (window.achievementSystem) {
             const gameState = {
                 currentTrial: "展開之塔",
                 totalStars: score,
+                currentTrialCompleted: true,
+                currentTrialErrors: questions.length - correctAnswers,
+                currentTrialCombo: correctAnswers
             };
             window.achievementSystem.checkAllAchievements(gameState);
         }
     }
+    // 檢查答案按鈕點擊事件
+    checkAnswerBtn.addEventListener('click', function() {
+        checkAnswer();
+    });
+    // 重試按鈕點擊事件
     retryBtn.addEventListener('click', function() {
+        resultContainer.style.display = 'none';
+        quizContainer.style.display = 'block';
         correctAnswers = 0;
+        // 重置進度指示器
         Array.from(doorsProgress).forEach(door => {
+            door.classList.remove('completed');
         });
+        // 重置答案
+        stage1Answers = Array(questions.length).fill(null).map(() => []);
+        stage2Answers = Array(questions.length).fill(null).map(() => []);
         // 載入第一題
         loadQuestion(0, 1);
     nextTrialBtn.addEventListener('click', function() {
         window.location.href = 'kingdom_map.html';
     });
+    // 階段按鈕點擊事件（僅用於顯示，不可切換）
+    stage1Btn.addEventListener('click', function() {
+        if (currentStage !== 1) {
+            // 檢查是否已完成第一階段
+            if (stage1Answers[currentQuestionIndex].length > 0) {
+                loadQuestion(currentQuestionIndex, 1);
+            }
+        }
+    });
+    stage2Btn.addEventListener('click', function() {
+        if (currentStage !== 2) {
+            // 檢查是否已完成第一階段
+            if (stage1Answers[currentQuestionIndex].length > 0) {
+                loadQuestion(currentQuestionIndex, 2);
+            } else {
+                alert('請先完成第一階段！');
+            }
+        }
+    });
 });