Upload 41 files

spring.html

@@ -108,10 +108,18 @@
                 
                 <div class="progress-container">
                     <div class="progress-text">進度：<span id="progress-count">0</span>/6</div>
-                    <div class="progress-bar">
+                    <div class="progress-bar" id="progress-bar">
                         <div id="progress-fill"></div>
                     </div>
                 </div>
+                
+                <div class="score-container">
+                    <div id="score-display">分數：0/0</div>
+                </div>
+                
+                <div class="next-question-container">
+                    <button id="next-question" class="action-btn" style="display: none;">下一題</button>
+                </div>
             </div>
             
             <div class="completion-message" id="completion-section" style="display: none;">
@@ -120,6 +128,11 @@
                 <p>你已獲得「直覺感知」的能力！</p>
                 <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p>
                 
+                <div class="score-summary">
+                    <div id="final-score">最終分數：0/0</div>
+                    <div id="stars-display">☆☆☆</div>
+                </div>
+                
                 <div class="navigation-buttons">
                     <button id="back-to-map" class="nav-btn">返回王國地圖</button>
                     <button id="next-trial" class="nav-btn">前往下一試煉</button>

spring.js

@@ -1,8 +1,6 @@
 document.addEventListener('DOMContentLoaded', function() {
     // 檢查是否有玩家資料
     const currentPlayerId = localStorage.getItem('currentPlayerId');
-    const playerName = localStorage.getItem('currentPlayerName');
-    const playerProfession = localStorage.getItem('currentPlayerProfession');
     
     // 如果沒有玩家資料，重定向到首頁
     if (!currentPlayerId) {
@@ -20,16 +18,16 @@ document.addEventListener('DOMContentLoaded', function() {
     const optionsContainer = document.getElementById('options-container');
     const nextQuestionBtn = document.getElementById('next-question');
     const backToMapBtn = document.getElementById('back-to-map');
-    const progressBar = document.getElementById('progress-bar');
-    const progressText = document.getElementById('progress-text');
+    const progressCount = document.getElementById('progress-count');
+    const progressFill = document.getElementById('progress-fill');
     const scoreDisplay = document.getElementById('score-display');
-    const finalScoreDisplay = document.getElementById('final-score');
+    const finalScore = document.getElementById('final-score');
     const starsDisplay = document.getElementById('stars-display');
     
     // 遊戲狀態
     let currentQuestionIndex = 0;
     let score = 0;
-    let totalQuestions = 10;
+    let totalQuestions = 6; // 改為6題
     let questions = [];
     let startTime = Date.now();
     
@@ -86,7 +84,9 @@ document.addEventListener('DOMContentLoaded', function() {
         updateProgress();
         
         // 隱藏下一題按鈕
-        nextQuestionBtn.style.display = 'none';
+        if (nextQuestionBtn) {
+            nextQuestionBtn.style.display = 'none';
+        }
     }
     
     // 選擇答案
@@ -102,8 +102,12 @@ document.addEventListener('DOMContentLoaded', function() {
         allButtons.forEach(btn => {
             if (parseInt(btn.textContent) === question.correctAnswer) {
                 btn.classList.add('correct');
+                btn.style.backgroundColor = '#4CAF50';
+                btn.style.color = 'white';
             } else if (btn === buttonElement && !isCorrect) {
                 btn.classList.add('incorrect');
+                btn.style.backgroundColor = '#f44336';
+                btn.style.color = 'white';
             }
         });
         
@@ -122,21 +126,27 @@ document.addEventListener('DOMContentLoaded', function() {
         updateScore();
         
         // 顯示下一題按鈕
-        setTimeout(() => {
+        if (nextQuestionBtn) {
             nextQuestionBtn.style.display = 'block';
-        }, 1000);
+        }
     }
     
     // 更新進度
     function updateProgress() {
         const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;
-        progressBar.style.width = progress + '%';
-        progressText.textContent = `第 ${currentQuestionIndex + 1} 題 / 共 ${totalQuestions} 題`;
+        if (progressFill) {
+            progressFill.style.width = progress + '%';
+        }
+        if (progressCount) {
+            progressCount.textContent = currentQuestionIndex + 1;
+        }
     }
     
     // 更新分數
     function updateScore() {
-        scoreDisplay.textContent = `分數：${score}/${currentQuestionIndex + 1}`;
+        if (scoreDisplay) {
+            scoreDisplay.textContent = `分數：${score}/${currentQuestionIndex + 1}`;
+        }
     }
     
     // 下一題
@@ -150,8 +160,8 @@ document.addEventListener('DOMContentLoaded', function() {
         const endTime = Date.now();
         const completionTime = Math.round((endTime - startTime) / 1000);
         
-        quizSection.style.display = 'none';
-        completionSection.style.display = 'block';
+        if (quizSection) quizSection.style.display = 'none';
+        if (completionSection) completionSection.style.display = 'block';
         
         // 計算星級
         const percentage = (score / totalQuestions) * 100;
@@ -161,18 +171,22 @@ document.addEventListener('DOMContentLoaded', function() {
         else if (percentage >= 50) stars = 1;
         
         // 顯示最終分數和星級
-        finalScoreDisplay.textContent = `最終分數：${score}/${totalQuestions} (${percentage.toFixed(1)}%)`;
+        if (finalScore) {
+            finalScore.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>';
+        if (starsDisplay) {
+            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;
         }
-        starsDisplay.innerHTML = starsHTML;
         
         // 保存進度
         saveProgress(stars, score, completionTime);
@@ -226,8 +240,8 @@ document.addEventListener('DOMContentLoaded', function() {
     if (startChallengeBtn) {
         startChallengeBtn.addEventListener('click', function() {
             console.log('開始平方之泉挑戰');
-            storySection.style.display = 'none';
-            quizSection.style.display = 'block';
+            if (storySection) storySection.style.display = 'none';
+            if (quizSection) quizSection.style.display = 'block';
             
             // 生成題目並開始
             generateQuestions();
@@ -251,8 +265,8 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // 初始化顯示
-    storySection.style.display = 'block';
-    quizSection.style.display = 'none';
-    completionSection.style.display = 'none';
+    if (storySection) storySection.style.display = 'block';
+    if (quizSection) quizSection.style.display = 'none';
+    if (completionSection) completionSection.style.display = 'none';
 });