Spaces:

Lashtw
/

math-kingdom-game

Running

App Files Files Community

Lashtw commited on Jun 3, 2025

Commit

ccfe2bd

verified ·

1 Parent(s): 4408257

Upload 26 files

Browse files

Files changed (8) hide show

.gitattributes +2 -0
kingdom_map.html +1 -1
tower.html +527 -0
tower.jpg +3 -0
tower.js +489 -0
tower.mp3 +3 -0
valley.html +5 -2
valley.js +19 -3

.gitattributes CHANGED Viewed

@@ -40,3 +40,5 @@ bgm.mp3 filter=lfs diff=lfs merge=lfs -text
 spring.mp3 filter=lfs diff=lfs merge=lfs -text
 valley.jpg filter=lfs diff=lfs merge=lfs -text
 valley.mp3 filter=lfs diff=lfs merge=lfs -text

 spring.mp3 filter=lfs diff=lfs merge=lfs -text
 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

kingdom_map.html CHANGED Viewed

@@ -233,7 +233,7 @@
                 <!-- 展開之塔 -->
                 <div class="location-item locked" id="tower-location">
                     <div class="location-image-container">
-                        <img src="palace.jpg" alt="展開之塔" class="location-image">
                     </div>
                     <div class="location-content">
                         <h2 class="location-name">展開之塔</h2>

                 <!-- 展開之塔 -->
                 <div class="location-item locked" id="tower-location">
                     <div class="location-image-container">
+                        <img src="tower.jpg" alt="展開之塔" class="location-image">
                     </div>
                     <div class="location-content">
                         <h2 class="location-name">展開之塔</h2>

tower.html ADDED Viewed

	@@ -0,0 +1,527 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>展開之塔 - 數學魔法王國：平方之旅</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        body.tower-page {
+            background-image: url('tower.jpg');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        .tower-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 15px;
+            box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
+            border: 2px solid rgba(255, 140, 0, 0.7);
+        }
+        .tower-title {
+            color: rgba(255, 165, 0, 0.9);
+            font-size: 2rem;
+            margin-bottom: 20px;
+            text-align: center;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+        }
+        .tower-story {
+            color: white;
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+        .tower-emoji {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        .video-links {
+            background-color: rgba(60, 60, 60, 0.8);
+            border: 2px solid rgba(255, 140, 0, 0.7);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .video-links h3 {
+            color: rgba(255, 165, 0, 0.9);
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        .video-links ul {
+            color: white;
+            list-style-type: none;
+            padding: 0;
+            text-align: center;
+        }
+        .video-links li {
+            margin-bottom: 10px;
+        }
+        .video-links a {
+            color: #3498db;
+            text-decoration: none;
+            transition: all 0.3s;
+        }
+        .video-links a:hover {
+            color: #2980b9;
+            text-decoration: underline;
+        }
+        .quiz-container {
+            display: none;
+            margin-top: 20px;
+        }
+        .quiz-title {
+            color: rgba(255, 165, 0, 0.9);
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .question {
+            color: white;
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .stage-indicator {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .stage-btn {
+            background-color: rgba(60, 60, 60, 0.8);
+            border: 2px solid rgba(255, 140, 0, 0.7);
+            border-radius: 10px;
+            padding: 10px 15px;
+            color: white;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .stage-btn.active {
+            background-color: rgba(255, 140, 0, 0.8);
+            box-shadow: 0 0 15px rgba(255, 140, 0, 0.5);
+        }
+        .formula-display {
+            background-color: rgba(60, 60, 60, 0.8);
+            border: 2px solid rgba(255, 140, 0, 0.7);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+            color: white;
+            font-size: 1.2rem;
+            text-align: center;
+        }
+        .drag-drop-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 30px;
+        }
+        .formula-template {
+            background-color: rgba(80, 80, 80, 0.8);
+            border: 2px solid rgba(255, 140, 0, 0.7);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+            color: white;
+            font-size: 1.2rem;
+            text-align: center;
+            width: 100%;
+        }
+        .drop-zone {
+            display: inline-block;
+            width: 50px;
+            height: 30px;
+            background-color: rgba(100, 100, 100, 0.5);
+            border: 2px dashed rgba(255, 140, 0, 0.7);
+            border-radius: 5px;
+            margin: 0 5px;
+            vertical-align: middle;
+        }
+        .drop-zone.filled {
+            background-color: rgba(255, 140, 0, 0.3);
+            border: 2px solid rgba(255, 140, 0, 0.9);
+        }
+        .drag-items {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .drag-item {
+            background-color: rgba(255, 140, 0, 0.8);
+            border: 2px solid rgba(255, 165, 0, 0.9);
+            border-radius: 5px;
+            padding: 5px 10px;
+            color: white;
+            font-size: 1rem;
+            cursor: grab;
+            user-select: none;
+            transition: all 0.3s;
+        }
+        .drag-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
+        }
+        .drag-item.dragging {
+            opacity: 0.5;
+        }
+        .check-answer-btn {
+            background-color: rgba(255, 140, 0, 0.8);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            padding: 10px 20px;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: block;
+            margin: 0 auto;
+        }
+        .check-answer-btn:hover {
+            background-color: rgba(255, 165, 0, 0.9);
+            box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
+            transform: translateY(-3px);
+        }
+        .next-btn {
+            background-color: rgba(255, 140, 0, 0.8);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: none;
+            margin: 20px auto 0;
+        }
+        .next-btn:hover {
+            background-color: rgba(255, 165, 0, 0.9);
+            box-shadow: 0 0 15px rgba(255, 165, 0, 0.5);
+            transform: translateY(-3px);
+        }
+        .feedback-container {
+            margin-top: 20px;
+            padding: 10px;
+            border-radius: 10px;
+            text-align: center;
+            font-size: 1.1rem;
+            display: none;
+        }
+        .feedback-container.correct {
+            background-color: rgba(100, 200, 100, 0.3);
+            border: 2px solid rgba(100, 200, 100, 0.7);
+            color: #2ecc71;
+        }
+        .feedback-container.incorrect {
+            background-color: rgba(200, 100, 100, 0.3);
+            border: 2px solid rgba(200, 100, 100, 0.7);
+            color: #e74c3c;
+        }
+        .door-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .door {
+            width: 30px;
+            height: 40px;
+            background-color: rgba(150, 150, 150, 0.8);
+            border-radius: 5px 5px 0 0;
+            transition: all 0.5s;
+        }
+        .door.opened {
+            background-color: rgba(255, 140, 0, 0.8);
+            transform: scaleY(0.7);
+            opacity: 0.5;
+        }
+        .progress-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .progress-text {
+            color: white;
+            font-size: 1.1rem;
+            margin-right: 10px;
+        }
+        .result-container {
+            display: none;
+            text-align: center;
+            margin-top: 30px;
+        }
+        .result-title {
+            color: rgba(255, 165, 0, 0.9);
+            font-size: 1.8rem;
+            margin-bottom: 20px;
+        }
+        .result-message {
+            color: white;
+            font-size: 1.2rem;
+            line-height: 1.6;
+            margin-bottom: 30px;
+        }
+        .stars-result {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .star-result {
+            font-size: 2.5rem;
+            color: rgba(255, 255, 255, 0.3);
+            transition: all 0.5s;
+        }
+        .star-result.earned {
+            color: gold;
+            text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
+            animation: starPulse 2s infinite alternate;
+        }
+        @keyframes starPulse {
+            0% {
+                transform: scale(1);
+                text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+            }
+            100% {
+                transform: scale(1.15);
+                text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 180, 0, 0.5);
+            }
+        }
+        .navigation-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .nav-btn {
+            background-color: rgba(80, 80, 80, 0.8);
+            color: white;
+            border: 2px solid rgba(255, 140, 0, 0.7);
+            border-radius: 8px;
+            padding: 10px 20px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .nav-btn:hover {
+            background-color: rgba(100, 100, 100, 0.8);
+            box-shadow: 0 0 15px rgba(255, 140, 0, 0.3);
+        }
+        /* 響應式設計 */
+        @media (max-width: 768px) {
+            .tower-container {
+                padding: 15px;
+                margin: 10px;
+            }
+            .tower-title {
+                font-size: 1.8rem;
+            }
+            .navigation-buttons {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .drag-items {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body class="tower-page">
+    <!-- 音效元素 -->
+    <audio id="bgm" loop>
+        <source src="tower.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="correct-sound">
+        <source src="bingo.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="wrong-sound">
+        <source src="wrong.mp3" type="audio/mpeg">
+    </audio>
+    <div class="game-container">
+        <div class="tower-container">
+            <div class="tower-emoji">🗼</div>
+            <h1 class="tower-title">第三試煉：展開之塔</h1>
+            <div class="tower-story">
+                <p>你來到「展開之塔」，這裡的門需要你將 (a ± b)² 展開後才能解鎖。</p>
+                <p>塔的守衛問你：「你知道 (30 - 1)² 等於什麼嗎？展開這件事看起來有點難，但凡事都有其規則！」</p>
+                <p>守衛設下了六道考驗，測試你對平方展開公式的理解與應用。每答對一題，塔中的一扇門就會打開；全部答對，塔頂將賦予你「展開融合」的力量。</p>
+            </div>
+            <div class="video-links">
+                <h3>參考教學影片</h3>
+                <ul>
+                    <li><a href="https://youtu.be/f5ydFDsqPz4?si=7RecrelWpskrzuFx" target="_blank">和的平方公式</a></li>
+                    <li><a href="https://youtu.be/3M7LCwpeXwk?si=QAp4wyEG_4BAJO1M" target="_blank">差的平方公式</a></li>
+                </ul>
+            </div>
+            <button id="start-challenge" class="check-answer-btn">進入考驗</button>
+            <div id="quiz-container" class="quiz-container">
+                <div class="door-container" id="doors-progress">
+                    <div class="door" id="door-1"></div>
+                    <div class="door" id="door-2"></div>
+                    <div class="door" id="door-3"></div>
+                    <div class="door" id="door-4"></div>
+                    <div class="door" id="door-5"></div>
+                    <div class="door" id="door-6"></div>
+                </div>
+                <div class="progress-container">
+                    <div class="progress-text">進度：<span id="current-question">1</span>/6</div>
+                </div>
+                <h2 class="quiz-title" id="question-title">問題 1</h2>
+                <div class="formula-display" id="formula-display"></div>
+                <div class="stage-indicator">
+                    <button class="stage-btn active" id="stage-1-btn">第一階段：展開後</button>
+                    <button class="stage-btn" id="stage-2-btn">第二階段：合併中間項</button>
+                </div>
+                <div class="drag-drop-container">
+                    <div class="formula-template" id="formula-template">
+                        <!-- 將由JavaScript動態生成 -->
+                    </div>
+                    <div class="drag-items" id="drag-items">
+                        <!-- 將由JavaScript動態生成 -->
+                    </div>
+                </div>
+                <div class="feedback-container" id="feedback-container"></div>
+                <button id="check-answer" class="check-answer-btn">檢查答案</button>
+                <button id="next-question" class="next-btn">下一題</button>
+            </div>
+            <div id="result-container" class="result-container">
+                <h2 class="result-title" id="result-title">試煉完成！</h2>
+                <div class="result-message" id="result-message"></div>
+                <div class="stars-result">
+                    <span class="star-result" id="star-1">★</span>
+                    <span class="star-result" id="star-2">★</span>
+                    <span class="star-result" id="star-3">★</span>
+                </div>
+                <div class="navigation-buttons" id="success-buttons" style="display: none;">
+                    <button id="back-to-map" class="nav-btn">返回王國地圖</button>
+                    <button id="next-trial" class="nav-btn">完成旅程</button>
+                </div>
+                <div class="navigation-buttons" id="fail-buttons" style="display: none;">
+                    <button id="retry-challenge" class="nav-btn">重新挑戰</button>
+                </div>
+            </div>
+            <!-- 音樂來源註記 -->
+            <div class="music-credit">
+                <p>背景音樂：由Suno製作</p>
+                <button id="toggle-bgm" class="small-btn">音樂開/關</button>
+            </div>
+        </div>
+    </div>
+    <script src="tower.js"></script>
+    <!-- 音樂連續播放控制 -->
+    <script>
+        // 嘗試從localStorage獲取音樂播放狀態和時間
+        document.addEventListener('DOMContentLoaded', function() {
+            const bgmAudio = document.getElementById('bgm');
+            const toggleBgmBtn = document.getElementById('toggle-bgm');
+            // 檢查是否有保存的音樂狀態
+            const musicPlaying = localStorage.getItem('towerMusicPlaying') === 'true';
+            const musicTime = parseFloat(localStorage.getItem('towerMusicTime') || '0');
+            if (musicPlaying) {
+                // 設置音樂播放位置
+                bgmAudio.currentTime = musicTime;
+                bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
+                toggleBgmBtn.textContent = '音樂關';
+            } else {
+                toggleBgmBtn.textContent = '音樂開';
+            }
+            // 定期保存音樂播放位置
+            setInterval(function() {
+                if (!bgmAudio.paused) {
+                    localStorage.setItem('towerMusicTime', bgmAudio.currentTime.toString());
+                    localStorage.setItem('towerMusicPlaying', 'true');
+                } else {
+                    localStorage.setItem('towerMusicPlaying', 'false');
+                }
+            }, 1000);
+            // 頁面離開前保存音樂狀態
+            window.addEventListener('beforeunload', function() {
+                localStorage.setItem('towerMusicTime', bgmAudio.currentTime.toString());
+                localStorage.setItem('towerMusicPlaying', !bgmAudio.paused ? 'true' : 'false');
+            });
+        });
+    </script>
+</body>
+</html>

tower.jpg ADDED Viewed

Git LFS Details

SHA256: 33f178b835fcfb88f94bbf7503f7721a92dc32ffdab69592005515fafb7a7d73
Pointer size: 131 Bytes
Size of remote file: 679 kB

tower.js ADDED Viewed

	@@ -0,0 +1,489 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // 檢查是否有玩家資料
+    const currentPlayerId = localStorage.getItem('currentPlayerId');
+    const playerName = localStorage.getItem('playerName');
+    const playerProfession = localStorage.getItem('playerProfession');
+    // 如果沒有玩家資料，重定向到首頁
+    if (!currentPlayerId || !playerName || !playerProfession) {
+        alert('請先登入遊戲！');
+        window.location.href = 'index.html';
+        return;
+    }
+    // 獲取DOM元素
+    const startChallengeBtn = document.getElementById('start-challenge');
+    const quizContainer = document.getElementById('quiz-container');
+    const resultContainer = document.getElementById('result-container');
+    const questionTitle = document.getElementById('question-title');
+    const formulaDisplay = document.getElementById('formula-display');
+    const formulaTemplate = document.getElementById('formula-template');
+    const dragItems = document.getElementById('drag-items');
+    const stage1Btn = document.getElementById('stage-1-btn');
+    const stage2Btn = document.getElementById('stage-2-btn');
+    const checkAnswerBtn = document.getElementById('check-answer');
+    const nextQuestionBtn = document.getElementById('next-question');
+    const currentQuestionSpan = document.getElementById('current-question');
+    const feedbackContainer = document.getElementById('feedback-container');
+    const resultTitle = document.getElementById('result-title');
+    const resultMessage = document.getElementById('result-message');
+    const retryBtn = document.getElementById('retry-challenge');
+    const backToMapBtn = document.getElementById('back-to-map');
+    const nextTrialBtn = document.getElementById('next-trial');
+    const doorsProgress = document.getElementById('doors-progress').children;
+    const successButtons = document.getElementById('success-buttons');
+    const failButtons = document.getElementById('fail-buttons');
+    const bgmAudio = document.getElementById('bgm');
+    const correctSound = document.getElementById('correct-sound');
+    const wrongSound = document.getElementById('wrong-sound');
+    const toggleBgmBtn = document.getElementById('toggle-bgm');
+    const starResults = [
+        document.getElementById('star-1'),
+        document.getElementById('star-2'),
+        document.getElementById('star-3')
+    ];
+    // 音樂控制
+    let isBgmPlaying = false;
+    // 播放背景音樂
+    function playBgm() {
+        bgmAudio.volume = 0.3; // 設置音量
+        bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
+        isBgmPlaying = true;
+        toggleBgmBtn.textContent = '音樂關';
+    }
+    // 嘗試自動播放背景音樂（大多數瀏覽器會阻止）
+    playBgm();
+    // 音樂開關按鈕
+    toggleBgmBtn.addEventListener('click', function() {
+        if (isBgmPlaying) {
+            bgmAudio.pause();
+            isBgmPlaying = false;
+            toggleBgmBtn.textContent = '音樂開';
+            localStorage.setItem('towerMusicPlaying', 'false');
+        } else {
+            bgmAudio.play();
+            isBgmPlaying = true;
+            toggleBgmBtn.textContent = '音樂關';
+            localStorage.setItem('towerMusicPlaying', 'true');
+        }
+    });
+    // 問題資料
+    const questions = [
+        {
+            title: "101² = (100 + 1)²",
+            stage1: {
+                template: "100² + ___ × ___ + ___ × ___ + 1²",
+                dragItems: ["100", "99", "200", "1", "2"],
+                answers: [["1", "100"], ["1", "100"]] // 順序不限
+            },
+            stage2: {
+                template: "100² + ___ × ___ + 1²",
+                dragItems: ["100", "99", "200", "1", "2"],
+                answers: [["2", "100"]] // 順序不限
+            }
+        },
+        {
+            title: "99² = (100 - 1)²",
+            stage1: {
+                template: "100² - ___ × ___ - ___ × ___ + 1²",
+                dragItems: ["1", "2", "100", "98", "200"],
+                answers: [["1", "100"], ["1", "100"]] // 順序不限
+            },
+            stage2: {
+                template: "100² - ___ × ___ + 1²",
+                dragItems: ["1", "2", "100", "98", "200"],
+                answers: [["2", "100"]] // 順序不限
+            }
+        },
+        {
+            title: "21² = (20 + 1)²",
+            stage1: {
+                template: "20² + ___ × ___ + ___ × ___ + 1²",
+                dragItems: ["1", "20", "2", "21", "19"],
+                answers: [["1", "20"], ["1", "20"]] // 順序不限
+            },
+            stage2: {
+                template: "20² + ___ × ___ + 1²",
+                dragItems: ["1", "20", "2", "21", "19"],
+                answers: [["2", "20"]] // 順序不限
+            }
+        },
+        {
+            title: "41² = (40 + 1)²",
+            stage1: {
+                template: "40² + ___ × ___ + ___ × ___ + 1²",
+                dragItems: ["1", "2", "40", "39", "42"],
+                answers: [["1", "40"], ["1", "40"]] // 順序不限
+            },
+            stage2: {
+                template: "40² + ___ × ___ + 1²",
+                dragItems: ["1", "2", "40", "39", "42"],
+                answers: [["2", "40"]] // 順序不限
+            }
+        },
+        {
+            title: "202² = (200 + 2)²",
+            stage1: {
+                template: "200² + ___ × ___ + ___ × ___ + 2²",
+                dragItems: ["2", "3", "200", "201", "400"],
+                answers: [["2", "200"], ["2", "200"]] // 順序不限
+            },
+            stage2: {
+                template: "200² + ___ × ___ + 2²",
+                dragItems: ["2", "3", "200", "201", "400"],
+                answers: [["2", "200"]] // 順序不限
+            }
+        },
+        {
+            title: "198² = (200 - 2)²",
+            stage1: {
+                template: "200² - ___ × ___ - ___ × ___ + 2²",
+                dragItems: ["2", "200", "4", "199", "202"],
+                answers: [["2", "200"], ["2", "200"]] // 順序不限
+            },
+            stage2: {
+                template: "200² - ___ × ___ + 2²",
+                dragItems: ["2", "200", "4", "199", "202"],
+                answers: [["2", "200"]] // 順序不限
+            }
+        }
+    ];
+    // 遊戲狀態
+    let currentQuestionIndex = 0;
+    let currentStage = 1;
+    let correctAnswers = 0;
+    let userAnswers = []; // 記錄用戶答案
+    let dropZones = []; // 當前問題的所有拖放區
+    let dragItemElements = []; // 當前問題的所有拖拽項
+    // 獲取遊戲進度
+    const gameProgress = JSON.parse(localStorage.getItem(`gameProgress_${currentPlayerId}`)) || {
+        completedTrials: {
+            "平方之泉": { completed: false, score: 0, challengesCompleted: [false, false, false, false, false, false] },
+            "變換山谷": { completed: false, score: 0, challengesCompleted: [false, false, false, false, false, false] },
+            "展開之塔": { completed: false, score: 0, challengesCompleted: [false, false, false, false, false, false] }
+        },
+        currentLocation: "展開之塔",
+        lastSaved: new Date().toISOString()
+    };
+    // 開始挑戰按鈕點擊事件
+    startChallengeBtn.addEventListener('click', function() {
+        startChallengeBtn.style.display = 'none';
+        quizContainer.style.display = 'block';
+        loadQuestion(0, 1);
+    });
+    // 載入問題
+    function loadQuestion(questionIndex, stageIndex) {
+        currentQuestionIndex = questionIndex;
+        currentStage = stageIndex;
+        // 更新問題標題和進度
+        currentQuestionSpan.textContent = questionIndex + 1;
+        questionTitle.textContent = `問題 ${questionIndex + 1}`;
+        formulaDisplay.textContent = questions[questionIndex].title;
+        // 更新階段按鈕狀態
+        stage1Btn.classList.toggle('active', stageIndex === 1);
+        stage2Btn.classList.toggle('active', stageIndex === 2);
+        // 清空公式模板和拖拽項
+        formulaTemplate.innerHTML = '';
+        dragItems.innerHTML = '';
+        // 獲取當前階段的問題數據
+        const stageData = stageIndex === 1 ? questions[questionIndex].stage1 : questions[questionIndex].stage2;
+        // 創建公式模板
+        const templateParts = stageData.template.split('___');
+        for (let i = 0; i < templateParts.length; i++) {
+            // 添加文本部分
+            formulaTemplate.appendChild(document.createTextNode(templateParts[i]));
+            // 如果不是最後一部分，添加拖放區
+            if (i < templateParts.length - 1) {
+                const dropZone = document.createElement('span');
+                dropZone.className = 'drop-zone';
+                dropZone.dataset.index = i;
+                formulaTemplate.appendChild(dropZone);
+                dropZones.push(dropZone);
+                // 添加拖放事件
+                dropZone.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                });
+                dropZone.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    const draggedItemId = e.dataTransfer.getData('text/plain');
+                    const draggedItem = document.getElementById(draggedItemId);
+                    // 如果拖放區已有內容，先清空
+                    if (this.firstChild) {
+                        const oldItem = this.firstChild;
+                        oldItem.style.display = 'inline-block';
+                        dragItems.appendChild(oldItem);
+                    }
+                    // 將拖拽項放入拖放區
+                    this.appendChild(draggedItem);
+                    this.classList.add('filled');
+                });
+            }
+        }
+        // 創建拖拽項
+        stageData.dragItems.forEach((item, index) => {
+            const dragItem = document.createElement('div');
+            dragItem.className = 'drag-item';
+            dragItem.id = `drag-item-${index}`;
+            dragItem.textContent = item;
+            dragItem.draggable = true;
+            dragItem.addEventListener('dragstart', function(e) {
+                e.dataTransfer.setData('text/plain', this.id);
+                this.classList.add('dragging');
+                // 如果拖拽項在拖放區中，需要從拖放區移除
+                if (this.parentElement.classList.contains('drop-zone')) {
+                    this.parentElement.classList.remove('filled');
+                }
+            });
+            dragItem.addEventListener('dragend', function() {
+                this.classList.remove('dragging');
+            });
+            dragItems.appendChild(dragItem);
+            dragItemElements.push(dragItem);
+        });
+        // 重置反饋和下一題按鈕
+        feedbackContainer.style.display = 'none';
+        feedbackContainer.className = 'feedback-container';
+        nextQuestionBtn.style.display = 'none';
+        checkAnswerBtn.style.display = 'block';
+    }
+    // 階段按鈕點擊事件
+    stage1Btn.addEventListener('click', function() {
+        if (currentStage !== 1) {
+            loadQuestion(currentQuestionIndex, 1);
+        }
+    });
+    stage2Btn.addEventListener('click', function() {
+        if (currentStage !== 2) {
+            loadQuestion(currentQuestionIndex, 2);
+        }
+    });
+    // 檢查答案按鈕點擊事件
+    checkAnswerBtn.addEventListener('click', function() {
+        // 獲取所有填充的拖放區
+        const filledDropZones = document.querySelectorAll('.drop-zone.filled');
+        // 如果有拖放區未填充，顯示提示
+        if (filledDropZones.length < dropZones.length) {
+            alert('請填寫所有空格！');
+            return;
+        }
+        // 獲取用戶答案
+        const userAnswerValues = [];
+        filledDropZones.forEach(zone => {
+            userAnswerValues.push(zone.firstChild.textContent);
+        });
+        // 獲取正確答案
+        const stageData = currentStage === 1 ? questions[currentQuestionIndex].stage1 : questions[currentQuestionIndex].stage2;
+        const correctAnswerSets = stageData.answers;
+        // 檢查答案是否正確
+        let isCorrect = false;
+        // 檢查每一組可能的正確答案
+        for (const answerSet of correctAnswerSets) {
+            // 如果是第一階段，需要檢查兩組答案
+            if (currentStage === 1 && answerSet.length === 2 && userAnswerValues.length === 4) {
+                // 檢查第一組和第二組是否匹配
+                const firstPairCorrect =
+                    (userAnswerValues[0] === answerSet[0] && userAnswerValues[1] === answerSet[1]) ||
+                    (userAnswerValues[0] === answerSet[1] && userAnswerValues[1] === answerSet[0]);
+                const secondPairCorrect =
+                    (userAnswerValues[2] === answerSet[0] && userAnswerValues[3] === answerSet[1]) ||
+                    (userAnswerValues[2] === answerSet[1] && userAnswerValues[3] === answerSet[0]);
+                if (firstPairCorrect && secondPairCorrect) {
+                    isCorrect = true;
+                    break;
+                }
+            }
+            // 如果是第二階段，只需檢查一組答案
+            else if (currentStage === 2 && answerSet.length === 2 && userAnswerValues.length === 2) {
+                if ((userAnswerValues[0] === answerSet[0] && userAnswerValues[1] === answerSet[1]) ||
+                    (userAnswerValues[0] === answerSet[1] && userAnswerValues[1] === answerSet[0])) {
+                    isCorrect = true;
+                    break;
+                }
+            }
+        }
+        // 顯示反饋
+        feedbackContainer.style.display = 'block';
+        if (isCorrect) {
+            feedbackContainer.textContent = '答對了！';
+            feedbackContainer.classList.add('correct');
+            correctSound.play();
+            // 如果是第二階段，標記問題已完成
+            if (currentStage === 2) {
+                // 更新門的狀態
+                doorsProgress[currentQuestionIndex].classList.add('opened');
+                // 記錄答對
+                if (!userAnswers[currentQuestionIndex]) {
+                    userAnswers[currentQuestionIndex] = true;
+                    correctAnswers++;
+                }
+            }
+            // 隱藏檢查按鈕，顯示下一步按鈕
+            checkAnswerBtn.style.display = 'none';
+            nextQuestionBtn.style.display = 'block';
+        } else {
+            feedbackContainer.textContent = '答錯了，請再試一次！';
+            feedbackContainer.classList.add('incorrect');
+            wrongSound.play();
+        }
+    });
+    // 下一題按鈕點擊事件
+    nextQuestionBtn.addEventListener('click', function() {
+        // 如果當前是第一階段，進入第二階段
+        if (currentStage === 1) {
+            loadQuestion(currentQuestionIndex, 2);
+        }
+        // 如果當前是第二階段，進入下一題或完成
+        else {
+            // 清空拖放區和拖拽項
+            dropZones = [];
+            dragItemElements = [];
+            if (currentQuestionIndex < questions.length - 1) {
+                loadQuestion(currentQuestionIndex + 1, 1);
+            } else {
+                showResult();
+            }
+        }
+    });
+    // 顯示結果
+    function showResult() {
+        quizContainer.style.display = 'none';
+        resultContainer.style.display = 'block';
+        // 計算得分
+        const score = Math.round((correctAnswers / questions.length) * 100);
+        // 更新遊戲進度
+        gameProgress.completedTrials["展開之塔"].score = score;
+        gameProgress.completedTrials["展開之塔"].challengesCompleted = Array(questions.length).fill(false).map((_, i) => i < correctAnswers);
+        // 根據答對題數顯示不同結果
+        if (correctAnswers >= 4) {
+            gameProgress.completedTrials["展開之塔"].completed = true;
+            resultTitle.textContent = '試煉成功！';
+            resultMessage.innerHTML = `
+                <p>恭喜你答對了 ${correctAnswers} 題，獲得了 ${score} 分！</p>
+                <p>成功通過試煉後，守衛恭敬地說：「恭喜你，勇者，你已經掌握了平方之力的三種境界。現在，返回王宮吧，智者正等著你重新點燃王國的平方之力核心。」</p>
+            `;
+            // 顯示星星
+            updateStars(correctAnswers);
+            // 顯示成功按鈕，隱藏失敗按鈕
+            successButtons.style.display = 'flex';
+            failButtons.style.display = 'none';
+        } else {
+            gameProgress.completedTrials["展開之塔"].completed = false;
+            resultTitle.textContent = '試煉失敗';
+            resultMessage.innerHTML = `
+                <p>你只答對了 ${correctAnswers} 題，需要至少答對4題才能通過試煉。</p>
+                <p>守衛說道：「不要氣餒，再試一次吧！展開的力量需要更多練習才能掌握。」</p>
+            `;
+            // 不顯示星星
+            updateStars(0);
+            // 顯示失敗按鈕，隱藏成功按鈕
+            successButtons.style.display = 'none';
+            failButtons.style.display = 'flex';
+        }
+        // 保存遊戲進度
+        localStorage.setItem(`gameProgress_${currentPlayerId}`, JSON.stringify(gameProgress));
+    }
+    // 更新星星顯示
+    function updateStars(correctCount) {
+        // 根據答對題數顯示星星
+        // 6題全對 = 3星, 5題對 = 2星, 4題對 = 1星, 少於4題 = 0星
+        let earnedStars = 0;
+        if (correctCount >= 6) earnedStars = 3;
+        else if (correctCount >= 5) earnedStars = 2;
+        else if (correctCount >= 4) earnedStars = 1;
+        // 更新星星顯示
+        for (let i = 0; i < starResults.length; i++) {
+            if (i < earnedStars) {
+                starResults[i].classList.add('earned');
+            } else {
+                starResults[i].classList.remove('earned');
+            }
+        }
+    }
+    // 重新挑戰按鈕點擊事件
+    retryBtn.addEventListener('click', function() {
+        // 重置遊戲狀態
+        currentQuestionIndex = 0;
+        currentStage = 1;
+        correctAnswers = 0;
+        userAnswers = [];
+        dropZones = [];
+        dragItemElements = [];
+        // 重置門的狀態
+        for (let i = 0; i < doorsProgress.length; i++) {
+            doorsProgress[i].classList.remove('opened');
+        }
+        // 顯示問題
+        resultContainer.style.display = 'none';
+        quizContainer.style.display = 'block';
+        loadQuestion(0, 1);
+    });
+    // 返回地圖按鈕點擊事件
+    backToMapBtn.addEventListener('click', function() {
+        window.location.href = 'kingdom_map.html';
+    });
+    // 完成旅程按鈕點擊事件
+    nextTrialBtn.addEventListener('click', function() {
+        alert('恭喜你完成了所有試煉！你已經成為真正的數學勇者，掌握了平方之力的三種境界。');
+        window.location.href = 'kingdom_map.html';
+    });
+});

tower.mp3 ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:1f637bede5165075cceb796f1705449688be67ebda5f7316da669ff3c502bf32
+size 2513184

valley.html CHANGED Viewed

@@ -320,9 +320,12 @@
                     <span class="star-result" id="star-3">★</span>
                 </div>
-                <div class="navigation-buttons">
-                    <button id="retry-challenge" class="nav-btn">重新挑戰</button>
                     <button id="back-to-map" class="nav-btn">返回王國地圖</button>
                 </div>
             </div>

                     <span class="star-result" id="star-3">★</span>
                 </div>
+                <div class="navigation-buttons" id="success-buttons" style="display: none;">
                     <button id="back-to-map" class="nav-btn">返回王國地圖</button>
+                    <button id="next-trial" class="nav-btn">挑戰下一試煉</button>
+                </div>
+                <div class="navigation-buttons" id="fail-buttons" style="display: none;">
+                    <button id="retry-challenge" class="nav-btn">重新挑戰</button>
                 </div>
             </div>

valley.js CHANGED Viewed

@@ -216,6 +216,10 @@ document.addEventListener('DOMContentLoaded', function() {
         quizContainer.style.display = 'none';
         resultContainer.style.display = 'block';
         // 計算得分
         const score = Math.round((correctAnswers / questions.length) * 100);
@@ -235,6 +239,10 @@ document.addEventListener('DOMContentLoaded', function() {
             // 顯示星星
             updateStars(correctAnswers);
         } else {
             gameProgress.completedTrials["變換山谷"].completed = false;
@@ -246,6 +254,10 @@ document.addEventListener('DOMContentLoaded', function() {
             // 不顯示星星
             updateStars(0);
         }
         // 保存遊戲進度
@@ -288,9 +300,13 @@ document.addEventListener('DOMContentLoaded', function() {
         quizContainer.style.display = 'block';
         loadQuestion(0);
     });
-    // 返回地圖按鈕點擊事件
     backToMapBtn.addEventListener('click', function() {
         window.location.href = 'kingdom_map.html';
     });
-});

         quizContainer.style.display = 'none';
         resultContainer.style.display = 'block';
+        // 獲取成功和失敗按鈕容器
+        const successButtons = document.getElementById('success-buttons');
+        const failButtons = document.getElementById('fail-buttons');
         // 計算得分
         const score = Math.round((correctAnswers / questions.length) * 100);
             // 顯示星星
             updateStars(correctAnswers);
+            // 顯示成功按鈕，隱藏失敗按鈕
+            successButtons.style.display = 'flex';
+            failButtons.style.display = 'none';
         } else {
             gameProgress.completedTrials["變換山谷"].completed = false;
             // 不顯示星星
             updateStars(0);
+            // 顯示失敗按鈕，隱藏成功按鈕
+            successButtons.style.display = 'none';
+            failButtons.style.display = 'flex';
         }
         // 保存遊戲進度
         quizContainer.style.display = 'block';
         loadQuestion(0);
     });
+        // 返回地圖按鈕點擊事件
     backToMapBtn.addEventListener('click', function() {
         window.location.href = 'kingdom_map.html';
     });
+    // 前往下一試煉按鈕點擊事件
+    nextTrialBtn.addEventListener('click', function() {
+        // 直接導向展開之塔
+        window.location.href = 'tower.html';
+    });});