Upload 41 files

spring.js

@@ -1,11 +1,11 @@
-document.addEventListener(\'DOMContentLoaded\', function() {
+document.addEventListener('DOMContentLoaded', function() {
     // 檢查是否有玩家資料
     const currentPlayerId = localStorage.getItem('currentPlayerId');
-    const playerName = localStorage.getItem('playerName');
-    const playerProfession = localStorage.getItem('playerProfession');
+    const playerName = localStorage.getItem('currentPlayerName');
+    const playerProfession = localStorage.getItem('currentPlayerProfession');
     
     // 如果沒有玩家資料，重定向到首頁
-    if (!currentPlayerId || !playerName || !playerProfession) {
+    if (!currentPlayerId) {
         alert('請先登入遊戲！');
         window.location.href = 'index.html';
         return;
@@ -18,515 +18,241 @@ document.addEventListener(\'DOMContentLoaded\', function() {
     const startChallengeBtn = document.getElementById('start-challenge');
     const questionText = document.getElementById('question-text');
     const optionsContainer = document.getElementById('options-container');
-    const resultFeedback = document.getElementById('result-feedback');
-    const progressCount = document.getElementById('progress-count');
-    const progressFill = document.getElementById('progress-fill');
+    const nextQuestionBtn = document.getElementById('next-question');
     const backToMapBtn = document.getElementById('back-to-map');
-    const nextTrialBtn = document.getElementById('next-trial');
-    const bgmAudio = document.getElementById('bgm');
-    const correctSound = document.getElementById('correct-sound');
-    const wrongSound = document.getElementById('wrong-sound');
-    const toggleBgmBtn = document.getElementById('toggle-bgm');
-    
-    // 音樂控制
-    let isBgmPlaying = false;
-    
-    // 播放背景音樂
-    function playBgm() {
-        bgmAudio.volume = 0.3; // 設置音量
-        bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
-        isBgmPlaying = true;
-    }
-    
-    // 嘗試自動播放背景音樂（大多數瀏覽器會阻止）
-    playBgm();
-    
-    // 音樂開關按鈕
-    toggleBgmBtn.addEventListener('click', function() {
-        if (isBgmPlaying) {
-            bgmAudio.pause();
-            isBgmPlaying = false;
-            toggleBgmBtn.textContent = '音樂開';
-        } else {
-            bgmAudio.play();
-            isBgmPlaying = true;
-            toggleBgmBtn.textContent = '音樂關';
-        }
-    });
-    
-    // 問題集
-    const questions = [
-        {
-            question: "Q1. 8 的平方是多少？",
-            options: ["(A) 56", "(B) 64", "(C) 72", "(D) 81"],
-            correctIndex: 1
-        },
-        {
-            question: "Q2. 哪個數的平方是 121？",
-            options: ["(A) 10", "(B) 11", "(C) 12", "(D) 13"],
-            correctIndex: 1
-        },
-        {
-            question: "Q3. 5 的平方是多少？",
-            options: ["(A) 20", "(B) 30", "(C) 25", "(D) 35"],
-            correctIndex: 2
-        },
-        {
-            question: "Q4. 哪個數的平方是 36？",
-            options: ["(A) 6", "(B) 7", "(C) 5", "(D) 8"],
-            correctIndex: 0
-        },
-        {
-            question: "Q5. 12 的平方是多少？",
-            options: ["(A) 124", "(B) 132", "(C) 144", "(D) 154"],
-            correctIndex: 2
-        },
-        {
-            question: "Q6. 哪個數的平方是 49？",
-            options: ["(A) 6", "(B) 8", "(C) 7", "(D) 9"],
-            correctIndex: 2
-        }
-    ];
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+    const scoreDisplay = document.getElementById('score-display');
+    const finalScoreDisplay = document.getElementById('final-score');
+    const starsDisplay = document.getElementById('stars-display');
     
+    // 遊戲狀態
     let currentQuestionIndex = 0;
-    let correctAnswers = 0;
-    let correctStreak = 0;
-    let maxCorrectStreak = 0;
-    let startTime = null;
-    let questionStartTime = null;
-    let fastestQuestionTime = 999;
-    let errors = 0;    // 開始考驗按鈕點擊事件
-     startChallengeBtn.addEventListener(\'click\', function() {
-        console.log(\'開始考驗按鈕被點擊\');
-        storySection.style.display = \'none\';
-        quizSection.style.display = \'block\';
-        startTime = new Date();
-        questionStartTime = new Date();
-        showQuestion(currentQuestionIndex);
-    });tion(currentQuestionIndex);
-    });
+    let score = 0;
+    let totalQuestions = 10;
+    let questions = [];
+    let startTime = Date.now();
     
-    // 預先載入成就系統
-    function loadAchievementSystem() {
-        console.log('預先載入成就系統');
-        if (!window.achievementSystem) {
-            const script = document.createElement('script');
-            script.src = 'achievements.js';
-            script.onload = function() {
-                console.log('成就系統腳本載入完成');
-            };
-            document.head.appendChild(script);
+    // 生成平方題目
+    function generateQuestions() {
+        questions = [];
+        for (let i = 0; i < totalQuestions; i++) {
+            const base = Math.floor(Math.random() * 10) + 1; // 1-10
+            const answer = base * base;
             
-            // 確保成就系統容器存在
-            if (!document.getElementById('toast-container')) {
-                const toastContainer = document.createElement('div');
-                toastContainer.className = 'toast-container';
-                toastContainer.id = 'toast-container';
-                document.body.appendChild(toastContainer);
+            // 生成錯誤選項
+            const wrongAnswers = [];
+            while (wrongAnswers.length < 3) {
+                const wrong = answer + Math.floor(Math.random() * 20) - 10;
+                if (wrong !== answer && wrong > 0 && !wrongAnswers.includes(wrong)) {
+                    wrongAnswers.push(wrong);
+                }
             }
+            
+            // 隨機排列選項
+            const options = [answer, ...wrongAnswers].sort(() => Math.random() - 0.5);
+            
+            questions.push({
+                question: `${base}² = ?`,
+                options: options,
+                correctAnswer: answer
+            });
         }
     }
     
-    // 顯示問題
-    function showQuestion(index) {
-        const question = questions[index];
+    // 顯示當前題目
+    function showQuestion() {
+        if (currentQuestionIndex >= questions.length) {
+            showCompletion();
+            return;
+        }
+        
+        const question = questions[currentQuestionIndex];
         questionText.textContent = question.question;
         
         // 清空選項容器
         optionsContainer.innerHTML = '';
         
-        // 添加選項
-        question.options.forEach((option, i) => {
+        // 創建選項按鈕
+        question.options.forEach((option, index) => {
             const button = document.createElement('button');
-            button.className = 'option-btn';
             button.textContent = option;
-            button.dataset.index = i;
-            
-            button.addEventListener('click', function() {
-                checkAnswer(i);
-            });
-            
+            button.className = 'option-btn';
+            button.addEventListener('click', () => selectAnswer(option, button));
             optionsContainer.appendChild(button);
         });
         
-        // 清空結果反饋
-        resultFeedback.textContent = '';
+        // 更新進度
+        updateProgress();
         
-        // 記錄問題開始時間
-        questionStartTime = new Date();
+        // 隱藏下一題按鈕
+        nextQuestionBtn.style.display = 'none';
     }
     
-    // 檢查答案
-    function checkAnswer(selectedIndex) {
-        const correctIndex = questions[currentQuestionIndex].correctIndex;
-        const optionButtons = document.querySelectorAll('.option-btn');
-        
-        // 計算回答時間
-        const now = new Date();
-        const questionTime = (now - questionStartTime) / 1000; // 轉換為秒
-        
-        // 更新最快回答時間
-        if (questionTime < fastestQuestionTime) {
-            fastestQuestionTime = questionTime;
-        }
+    // 選擇答案
+    function selectAnswer(selectedAnswer, buttonElement) {
+        const question = questions[currentQuestionIndex];
+        const isCorrect = selectedAnswer === question.correctAnswer;
         
         // 禁用所有選項按鈕
-        optionButtons.forEach(button => {
-            button.classList.add('disabled');
-            button.disabled = true;
+        const allButtons = optionsContainer.querySelectorAll('.option-btn');
+        allButtons.forEach(btn => btn.disabled = true);
+        
+        // 標記正確和錯誤答案
+        allButtons.forEach(btn => {
+            if (parseInt(btn.textContent) === question.correctAnswer) {
+                btn.classList.add('correct');
+            } else if (btn === buttonElement && !isCorrect) {
+                btn.classList.add('incorrect');
+            }
         });
         
-        // 標記正確和錯誤的選項
-        optionButtons[correctIndex].classList.add('correct');
-        
-        if (selectedIndex !== correctIndex) {
-            optionButtons[selectedIndex].classList.add('incorrect');
-            resultFeedback.textContent = '答錯了，再接再厲！';
-            // 播放錯誤音效
-            wrongSound.currentTime = 0;
-            wrongSound.play().catch(e => console.log('音效播放失敗:', e));
-            // 重置連續正確計數
-            correctStreak = 0;
-            // 增加錯誤計數
-            errors++;
-        } else {
-            correctAnswers++;
-            resultFeedback.textContent = '答對了，太棒了！';
+        if (isCorrect) {
+            score++;
             // 播放正確音效
-            correctSound.currentTime = 0;
-            correctSound.play().catch(e => console.log('音效播放失敗:', e));
-            // 增加連續正確計數
-            correctStreak++;
-            // 更新最大連續正確計數
-            if (correctStreak > maxCorrectStreak) {
-                maxCorrectStreak = correctStreak;
-            }
+            const correctAudio = new Audio('bingo.mp3');
+            correctAudio.play().catch(e => console.log('音效播放失敗:', e));
+        } else {
+            // 播放錯誤音效
+            const wrongAudio = new Audio('wrong.mp3');
+            wrongAudio.play().catch(e => console.log('音效播放失敗:', e));
         }
         
-        // 更新進度
-        progressCount.textContent = correctAnswers;
-        progressFill.style.width = (correctAnswers / questions.length * 100) + '%';
+        // 更新分數顯示
+        updateScore();
         
-        // 延遲後進入下一題或完成
+        // 顯示下一題按鈕
         setTimeout(() => {
-            currentQuestionIndex++;
-            
-            if (currentQuestionIndex < questions.length) {
-                showQuestion(currentQuestionIndex);
-            } else {
-                // 完成所有問題
-                quizSection.style.display = 'none';
-                
-                // 檢查是否至少答對4題
-                if (correctAnswers >= 4) {
-                    completionSection.style.display = 'block';
-                    // 更新遊戲進度
-                    updateGameProgress();
-                } else {
-                    // 未達到通過標準，顯示重試訊息
-                    alert(`你只答對了${correctAnswers}題，需要至少答對4題才能通過試煉。請重新挑戰！`);
-                    // 重置問題
-                    currentQuestionIndex = 0;
-                    correctAnswers = 0;
-                    correctStreak = 0;
-                    errors = 0;
-                    progressCount.textContent = '0';
-                    progressFill.style.width = '0%';
-                    // 返回故事部分
-                    storySection.style.display = 'block';
-                }
-            }
-        }, 2000);
+            nextQuestionBtn.style.display = 'block';
+        }, 1000);
     }
     
-    // 更新遊戲進度
-    function updateGameProgress() {
-        console.log('更新遊戲進度');
-        const gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {};
-        
-        if (!gameProgress.completedTrials) {
-            gameProgress.completedTrials = {};
-        }
-        
-        // 計算當前得分和星數
-        const currentScore = (correctAnswers / questions.length) * 100;
-        let currentStars = 0;
-        if (correctAnswers >= 6) currentStars = 3;
-        else if (correctAnswers >= 5) currentStars = 2;
-        else if (correctAnswers >= 4) currentStars = 1;
-        
-        // 計算完成時間
-        const endTime = new Date();
-        const trialTime = (endTime - startTime) / 1000; // 轉換為秒
-        
-        // 檢查是否已有平方之泉的紀錄
-        const existingTrial = gameProgress.completedTrials["平方之泉"];
-        const isFirstCompletion = !existingTrial || !existingTrial.completed;
-        const isFirstThreeStars = currentStars === 3 && (!existingTrial || !existingTrial.stars || existingTrial.stars < 3);
-        const isPerfect = errors === 0;
-        
-        console.log(`試煉結果: 答對${correctAnswers}題，星數${currentStars}，錯誤${errors}次，時間${trialTime}秒`);
-        console.log(`是否首次完成: ${isFirstCompletion}, 是否首次3星: ${isFirstThreeStars}, 是否完美: ${isPerfect}`);
-        
-        // 如果沒有紀錄或當前星數更高，則更新
-        if (!existingTrial || !existingTrial.stars || currentStars > existingTrial.stars) {
-            gameProgress.completedTrials["平方之泉"] = {
-                completed: true,
-                score: currentScore,
-                stars: currentStars,
-                challengesCompleted: Array(questions.length).fill(false).map((_, i) => i < correctAnswers),
-                noErrors: isPerfect,
-                completionTime: trialTime
-            };
-        }
-        
-        gameProgress.currentLocation = "平方之泉";
-        gameProgress.lastSaved = new Date().toISOString();
-        
-        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
-        
-        // 檢查成就
-        checkAchievements(gameProgress, currentStars, trialTime, isPerfect);
+    // 更新進度
+    function updateProgress() {
+        const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;
+        progressBar.style.width = progress + '%';
+        progressText.textContent = `第 ${currentQuestionIndex + 1} 題 / 共 ${totalQuestions} 題`;
     }
     
-    // 檢查成就
-    function checkAchievements(gameProgress, currentStars, trialTime, isPerfect) {
-        console.log('檢查成就');
-                // 構建遊戲狀態
-        const gameState = {
-            // 基本信息
-            loginCount: parseInt(localStorage.getItem(\'loginCount\') || \'1\'),
-            prologueCompleted: localStorage.getItem(\'prologueCompleted\') === \'true\'),
-            
-            // 試煉相關
-            visitedTrials: [\'平方之泉\'],
-            completedTrials: {
-                "平方之泉": {
-                    completed: true,
-                    score: currentScore,
-                    stars: currentStars,
-                    challengesCompleted: Array(questions.length).fill(false).map((_, i) => i < correctAnswers),
-                    noErrors: isPerfect,
-                    completionTime: trialTime
-                }
-            },
-            
-            // 其他統計
-            maxCorrectStreak: maxCorrectStreak,
-            fastestTrialTime: trialTime,
-            fastestQuestionTime: fastestQuestionTime,
-            retriesAfterFailure: parseInt(localStorage.getItem(\'retriesAfterFailure\') || \'0\'),
-            lastTrialCompletionTime: new Date(),
-            lastTrialStartTime: startTime,
-            
-            // 特殊條件
-            allThreeStarsSameDay: false,
-            firstAttemptAllThreeStars: isFirstThreeStars,
-            musicEnabledAllTrials: isBgmPlaying,
-            musicDisabledAllTrials: !isBgmPlaying,
-            
-            // 額外資訊
-            totalStars: currentStars,
-            currentTrialTime: trialTime,
-            currentTrialErrors: errors,
-            currentTrialCombo: maxCorrectStreak
-        };    // 檢查其他試煉的完成情況
-        if (gameProgress.completedTrials && gameProgress.completedTrials["變換山谷"]?.completed) {
-            gameState.visitedTrials.push('變換山谷');
-            gameState.completedTrials["變換山谷"] = {
-                completed: true,
-                stars: gameProgress.completedTrials["變換山谷"].stars || 0,
-                noErrors: gameProgress.completedTrials["變換山谷"].noErrors || false
-            };
-        }
-        
-        if (gameProgress.completedTrials && gameProgress.completedTrials["展開之塔"]?.completed) {
-            gameState.visitedTrials.push('展開之塔');
-            gameState.completedTrials["展開之塔"] = {
-                completed: true,
-                stars: gameProgress.completedTrials["展開之塔"].stars || 0,
-                noErrors: gameProgress.completedTrials["展開之塔"].noErrors || false
-            };
-        }
-        
-        // 確保成就系統已載入
-        ensureAchievementSystemLoaded(function() {
-            console.log('成就系統已載入，開始檢查成就');
-            
-            // 使用全域函數檢查所有成就
-            if (window.checkAllAchievements) {
-                console.log('使用全域函數檢查所有成就');
-                window.checkAllAchievements(gameState);
-            } 
-            // 使用成就系統實例檢查所有成就
-            else if (window.achievementSystem) {
-                console.log('使用成就系統實例檢查所有成就');
-                window.achievementSystem.checkAllAchievements(gameState);
-            } 
-            // 直接解鎖特定成就
-            else {
-                console.log('成就系統未載入，直接解鎖特定成就');
-                directUnlockAchievements(gameState);
-            }
-        });
+    // 更新分數
+    function updateScore() {
+        scoreDisplay.textContent = `分數：${score}/${currentQuestionIndex + 1}`;
     }
     
-    // 確保成就系統已載入
-    function ensureAchievementSystemLoaded(callback) {
-        console.log('確保成就系統已載入');
-        
-        // 如果成就系統已載入，直接執行回調
-        if (window.achievementSystem) {
-            console.log('成就系統已載入，直接執行回調');
-            callback();
-            return;
-        }
-        
-        console.log('成就系統尚未載入，重新載入並等待');
-        
-        // 如果成就系統尚未載入，重新載入並等待
-        const script = document.createElement('script');
-        script.src = 'achievements.js';
-        script.onload = function() {
-            console.log('成就系統腳本載入完成，執行回調');
-            callback();
-        };
-        document.head.appendChild(script);
+    // 下一題
+    function nextQuestion() {
+        currentQuestionIndex++;
+        showQuestion();
     }
     
-    // 直接解鎖特定成就
-    function directUnlockAchievements(gameState) {
-        console.log('直接解鎖特定成就');
-        
-        // 首次完成平方之泉試煉
-        if (gameState.completedTrials["平方之泉"].completed) {
-            unlockAchievement('trial_1', '泉水初體驗', '首次完成平方之泉試煉', 'trial');
-        }
-        
-        // 在平方之泉獲得3星
-        if (gameState.completedTrials["平方之泉"].stars === 3) {
-            unlockAchievement('trial_2', '泉水專家', '在平方之泉獲得3星', 'trial');
-        }
-        
-        // 在平方之泉中不犯任何錯誤
-        if (gameState.completedTrials["平方之泉"].noErrors) {
-            unlockAchievement('trial_3', '泉水完美主義者', '在平方之泉中不犯任何錯誤', 'trial');
-        }
-        
-        // 連續答對10題
-        if (gameState.maxCorrectStreak >= 10) {
-            unlockAchievement('trial_10', '連擊大師', '連續答對10題', 'trial');
-        }
-        
-        // 連續答對20題
-        if (gameState.maxCorrectStreak >= 20) {
-            unlockAchievement('trial_11', '超級連擊', '連續答對20題', 'trial');
+    // 顯示完成畫面
+    function showCompletion() {
+        const endTime = Date.now();
+        const completionTime = Math.round((endTime - startTime) / 1000);
+        
+        quizSection.style.display = 'none';
+        completionSection.style.display = 'block';
+        
+        // 計算星級
+        const percentage = (score / totalQuestions) * 100;
+        let stars = 0;
+        if (percentage >= 90) stars = 3;
+        else if (percentage >= 70) stars = 2;
+        else if (percentage >= 50) stars = 1;
+        
+        // 顯示最終分數和星級
+        finalScoreDisplay.textContent = `最終分數：${score}/${totalQuestions} (${percentage.toFixed(1)}%)`;
+        
+        // 顯示星星
+        let starsHTML = '';
+        for (let i = 0; i < 3; i++) {
+            if (i < stars) {
+                starsHTML += '<span class="star filled">★</span>';
+            } else {
+                starsHTML += '<span class="star">☆</span>';
+            }
         }
+        starsDisplay.innerHTML = starsHTML;
         
-        // 在30秒內完成一個試煉
-        if (gameState.fastestTrialTime <= 30) {
-            unlockAchievement('trial_12', '速度之王', '在30秒內完成一個試煉', 'trial');
-        }
+        // 保存進度
+        saveProgress(stars, score, completionTime);
         
-        // 在5秒內答對一題
-        if (gameState.fastestQuestionTime <= 5) {
-            unlockAchievement('trial_13', '閃電思考', '在5秒內答對一題', 'trial');
+        // 檢查成就
+        if (window.achievementSystem) {
+            const gameState = {
+                currentTrial: 'spring',
+                totalStars: stars,
+                completedTrials: {
+                    spring: {
+                        score: score,
+                        stars: stars,
+                        challengesCompleted: 1,
+                        noErrors: score === totalQuestions,
+                        completionTime: completionTime,
+                        firstAttemptAllThreeStars: stars === 3
+                    }
+                }
+            };
+            window.achievementSystem.checkAllAchievements(gameState);
         }
     }
     
-    // 手動解鎖成就並顯示通知
-    function unlockAchievement(id, title, description, type) {
-        console.log(`手動解鎖成就: ${id} - ${title}`);
+    // 保存進度
+    function saveProgress(stars, score, completionTime) {
+        const currentPlayerId = localStorage.getItem('currentPlayerId');
+        if (!currentPlayerId) return;
         
-        // 檢查成就是否已解鎖
-        const savedProgress = localStorage.getItem('userAchievements');
-        const userAchievements = savedProgress ? JSON.parse(savedProgress) : {};
+        // 獲取現有進度
+        let gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {};
         
-        // 如果成就已經解鎖，不做任何事
-        if (userAchievements[id]?.unlocked) {
-            console.log(`成就 "${title}" 已經解鎖過了`);
-            return;
+        // 更新平方之泉進度
+        if (!gameProgress.spring || gameProgress.spring.stars < stars) {
+            gameProgress.spring = {
+                completed: true,
+                stars: stars,
+                score: score,
+                completionTime: completionTime,
+                completedAt: new Date().toISOString()
+            };
         }
         
-        // 設定成就為已解鎖
-        const now = new Date();
-        const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
-        
-        userAchievements[id] = {
-            unlocked: true,
-            unlockedAt: formattedDate
-        };
-        
-        // 儲存使用者成就進度
-        localStorage.setItem('userAchievements', JSON.stringify(userAchievements));
-        
-        // 顯示成就解鎖通知
-        showAchievementToast(title, description, type);
+        // 保存進度
+        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
         
-        console.log(`成就 "${title}" 已解鎖!`);
+        console.log('平方之泉進度已保存:', gameProgress.spring);
     }
     
-    // 顯示成就解鎖通知
-    function showAchievementToast(title, description, type) {
-        console.log(`顯示成就解鎖通知: ${title}`);
-        
-        const toastContainer = document.getElementById('toast-container') || createToastContainer();
-        
-        // 創建通知元素
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        
-        // 設定成就圖示 (使用emoji)
-        let icon = '🏆';
-        switch (type) {
-            case 'journey':
-                icon = '🧭';
-                break;
-            case 'trial':
-                icon = '⚔️';
-                break;
-            case 'secret':
-                icon = '🔮';
-                break;
-        }
-        
-        // 通知內容
-        toast.innerHTML = `
-            <div class="toast-icon">${icon}</div>
-            <div class="toast-content">
-                <div class="toast-title">成就解鎖！</div>
-                <div>【${title}】：${description}</div>
-            </div>
-        `;
-        
-        // 添加到通知容器
-        toastContainer.appendChild(toast);
-        
-        // 等待動畫完成後移除通知
-        setTimeout(() => {
-            toast.remove();
-        }, 5000);
+    // 開始挑戰按鈕事件
+    if (startChallengeBtn) {
+        startChallengeBtn.addEventListener('click', function() {
+            console.log('開始平方之泉挑戰');
+            storySection.style.display = 'none';
+            quizSection.style.display = 'block';
+            
+            // 生成題目並開始
+            generateQuestions();
+            currentQuestionIndex = 0;
+            score = 0;
+            startTime = Date.now();
+            showQuestion();
+        });
     }
     
-    // 創建通知容器
-    function createToastContainer() {
-        console.log('創建通知容器');
-        
-        const toastContainer = document.createElement('div');
-        toastContainer.className = 'toast-container';
-        toastContainer.id = 'toast-container';
-        document.body.appendChild(toastContainer);
-        return toastContainer;
+    // 下一題按鈕事件
+    if (nextQuestionBtn) {
+        nextQuestionBtn.addEventListener('click', nextQuestion);
     }
     
-    // 返回王國地圖按鈕點擊事件
-    backToMapBtn.addEventListener('click', function() {
-        window.location.href = 'kingdom_map.html';
-    });
+    // 返回地圖按鈕事件
+    if (backToMapBtn) {
+        backToMapBtn.addEventListener('click', function() {
+            window.location.href = 'kingdom_map.html';
+        });
+    }
     
-    // 前往下一試煉按鈕點擊事件
-    nextTrialBtn.addEventListener('click', function() {
-        // 直接導向變換山谷
-        window.location.href = 'valley.html';
-    });
+    // 初始化顯示
+    storySection.style.display = 'block';
+    quizSection.style.display = 'none';
+    completionSection.style.display = 'none';
 });
+