Update index.html

index.html

@@ -96,20 +96,12 @@
                     <p id="highscore-display" class="text-lg font-bold text-amber-500">0</p>
                 </div>
             </div>
-            <!-- 單字範圍與隨機出題選擇 -->
-            <div id="settings-container" class="my-4 p-4 bg-gray-100 rounded-2xl space-y-3">
-                <div class="flex items-center justify-center gap-4">
-                    <label for="start-range" class="font-semibold text-gray-700">單字範圍:</label>
-                    <input type="number" id="start-range" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center" placeholder="從">
-                    <span class="font-semibold text-gray-700">-</span>
-                    <input type="number" id="end-range" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center" placeholder="到">
-                </div>
-                <div class="flex items-center justify-center gap-4">
-                    <input type="checkbox" id="random-questions-checkbox" class="h-5 w-5 rounded text-indigo-600 focus:ring-indigo-500 border-gray-300">
-                    <label for="random-questions-checkbox" class="font-semibold text-gray-700">隨機出題:</label>
-                    <input type="number" id="random-questions-count" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center disabled:bg-gray-200 disabled:cursor-not-allowed" placeholder="題數" disabled>
-                    <span class="font-semibold text-gray-700">題</span>
-                </div>
+            <!-- 單字範圍選擇 -->
+            <div class="my-4 p-4 bg-gray-100 rounded-2xl flex items-center justify-center gap-4">
+                <label for="start-range" class="font-semibold text-gray-700">單字範圍:</label>
+                <input type="number" id="start-range" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center" placeholder="從">
+                <span class="font-semibold text-gray-700">-</span>
+                <input type="number" id="end-range" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center" placeholder="到">
             </div>
             
             <!-- 主要功能 -->
@@ -142,7 +134,7 @@
             </div>
             
             <!-- 教師工具 -->
-            <div id="teacher-tools" class="mt-8 pt-4 border-t flex justify-end items-center gap-3">
+            <div class="mt-8 pt-4 border-t flex justify-end items-center gap-3">
                  <button id="share-game-btn" class="text-white font-semibold py-2 px-5 rounded-full transition-transform hover:scale-105 bg-violet-500 hover:bg-violet-600 text-sm">🔗 分享</button>
                  <button id="manage-words-btn" class="text-white font-semibold py-2 px-5 rounded-full transition-transform hover:scale-105 bg-gray-500 hover:bg-gray-600 text-sm">⚙️ 管理</button>
             </div>
@@ -335,34 +327,18 @@
     <div id="share-modal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-50 p-4">
         <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-lg">
             <h3 class="text-2xl font-bold mb-4 text-gray-800">分享遊戲連結</h3>
-            <p class="text-gray-600 mb-6">請選擇分享選項，然後產生連結。</p>
-            <div class="my-4">
-                <label class="flex items-center text-lg">
-                    <input type="checkbox" id="lock-settings-checkbox" class="h-5 w-5 rounded text-indigo-600 focus:ring-indigo-500 border-gray-300">
-                    <span class="ml-3 text-gray-700">禁止學生變更設定 (鎖定範圍與題數)</span>
-                </label>
-            </div>
-
-            <button id="generate-link-btn" class="w-full mb-4 bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 transition-colors">
-                產生分享連結
-            </button>
-
-            <div id="share-result-container" class="hidden">
-                <p class="text-sm text-gray-500 mb-2">連結已產生：</p>
-                <div class="flex items-center gap-2">
-                    <input id="share-link-input" type="text" readonly class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100">
-                    <button id="copy-link-btn" class="px-6 py-3 bg-violet-600 text-white rounded-lg hover:bg-violet-700 shrink-0">複製</button>
-                </div>
-                <p id="copy-feedback" class="text-green-600 text-sm h-5 mt-2 text-center font-semibold"></p>
+            <p class="text-gray-600 mb-6">將此連結傳送給學生，他們將使用您目前的單字列表和範圍設定。</p>
+            <div class="flex items-center gap-2">
+                <input id="share-link-input" type="text" readonly class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100">
+                <button id="copy-link-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shrink-0">複製</button>
             </div>
-            
+            <p id="copy-feedback" class="text-green-600 text-sm h-5 mt-2 text-center font-semibold"></p>
             <div class="flex justify-end mt-4">
                 <button type="button" id="close-share-modal-btn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">關閉</button>
             </div>
         </div>
     </div>
 
-
     <!-- 清除確認 Modal -->
     <div id="confirm-clear-modal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-50 p-4">
         <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-sm">
@@ -387,9 +363,6 @@
         </div>
     </div>
 
-    <audio id="correct-sound" src="correct.mp3" preload="auto"></audio>
-    <audio id="wrong-sound" src="wrong.mp3" preload="auto"></audio>
-
     <footer class="fixed bottom-4 right-4 text-xs text-gray-500 text-right z-50">
         <p>遊戲設計者：新竹縣精華國中藍星宇</p>
         <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">萬物皆數</a></p>
@@ -403,14 +376,10 @@
             const learningMode = document.getElementById('learning-mode');
             const modeSelectionSection = document.getElementById('mode-selection-section');
             const highscoreDisplay = document.getElementById('highscore-display');
-            const settingsContainer = document.getElementById('settings-container');
             const startRangeInput = document.getElementById('start-range');
             const endRangeInput = document.getElementById('end-range');
-            const teacherTools = document.getElementById('teacher-tools');
             const manageWordsBtn = document.getElementById('manage-words-btn');
             const shareGameBtn = document.getElementById('share-game-btn');
-            const randomQuestionsCheckbox = document.getElementById('random-questions-checkbox');
-            const randomQuestionsCountInput = document.getElementById('random-questions-count');
             
             // 單字管理介面
             const wordManagementView = document.getElementById('word-management-view');
@@ -480,9 +449,6 @@
             const saveEditBtn = document.getElementById('save-edit-btn');
             const cancelEditBtn = document.getElementById('cancel-edit-btn');
             const shareModal = document.getElementById('share-modal');
-            const lockSettingsCheckbox = document.getElementById('lock-settings-checkbox');
-            const generateLinkBtn = document.getElementById('generate-link-btn');
-            const shareResultContainer = document.getElementById('share-result-container');
             const shareLinkInput = document.getElementById('share-link-input');
             const copyLinkBtn = document.getElementById('copy-link-btn');
             const copyFeedback = document.getElementById('copy-feedback');
@@ -495,10 +461,6 @@
             const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
             const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
 
-            // 音效元素
-            const correctSound = document.getElementById('correct-sound');
-            const wrongSound = document.getElementById('wrong-sound');
-
 
             // 應用程式狀態
             let words = [];
@@ -744,32 +706,15 @@
                 const start = parseInt(startRangeInput.value, 10);
                 const end = parseInt(endRangeInput.value, 10);
                 
-                let wordPool;
-                // 1. First, determine the pool of words based on the range.
+                // 學習時，使用新增順序
                 if (!isNaN(start) && !isNaN(end) && start > 0 && end >= start && end <= words.length) {
-                    wordPool = words.slice(start - 1, end);
+                    wordsForCurrentMode = words.slice(start - 1, end);
                 } else {
-                    wordPool = [...words];
+                    wordsForCurrentMode = [...words];
                 }
 
-                // 2. Then, check if random selection is enabled.
-                if (randomQuestionsCheckbox.checked) {
-                    const randomCount = parseInt(randomQuestionsCountInput.value, 10);
-                    if (!isNaN(randomCount) && randomCount > 0 && randomCount <= wordPool.length) {
-                        // Shuffle the pool and take the specified number of words.
-                        wordsForCurrentMode = shuffleArray([...wordPool]).slice(0, randomCount);
-                    } else {
-                        alert('請輸入有效的隨機題數。題數不能為零或超過所選範圍的單字總數。');
-                        return;
-                    }
-                } else {
-                    // If not random, use the entire pool.
-                    wordsForCurrentMode = wordPool;
-                }
-
-
                 if (wordsForCurrentMode.length === 0) {
-                    alert("選定的範圍內沒有單字，請重新選擇或新增。");
+                    alert("選定的範圍內沒有單字，請重新���擇。");
                     return;
                 }
 
@@ -808,32 +753,75 @@
 
                 const wordIndex = words.findIndex(w => w.english === card.english && w.chinese === card.chinese);
                 
-                let correctAnswer;
-                let answerLang;
-                
+                // --- Start: New, separated logic for Review Mode ---
                 if (isReview) {
                     const isFlipped = flashcardContainer.classList.contains('flipped');
-                    if(isFlipped) { // Chinese side showing, user should type English
+                    let correctAnswer, answerLang;
+
+                    if(isFlipped) { // Chinese side is showing, user should type English
                         correctAnswer = card.english.split('(')[0].trim();
                         answerLang = 'en';
-                    } else { // English side showing, user should type Chinese
+                    } else { // English side is showing, user should type Chinese
                         correctAnswer = card.chinese.split('(')[0].trim();
                         answerLang = 'zh';
                     }
-                } else {
-                    let effectiveMode = currentMode;
-                    if (isSpeed) effectiveMode = currentSpeedQuestionType;
-                    if (currentMode === 'hard') effectiveMode = 'zh-en';
-                    switch (effectiveMode) {
-                        case 'zh-en': case 'listen':
-                            correctAnswer = card.english.split('(')[0].trim();
-                            answerLang = 'en';
-                            break;
-                        case 'en-zh':
-                            correctAnswer = card.chinese.split('(')[0].trim();
-                            answerLang = 'zh';
-                            break;
+
+                    let isCorrect;
+                    if (answerLang === 'en') {
+                        const normalize = (str) => str.toLowerCase().replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, "").trim();
+                        isCorrect = normalize(userAnswer) === normalize(correctAnswer);
+                    } else if (answerLang === 'zh') {
+                        const possibleAnswers = correctAnswer.split(/[;；]/).map(a => a.trim()); 
+                        isCorrect = possibleAnswers.some(ans => userAnswer.trim().includes(ans) && ans !== '');
+                    }
+
+                    if (isCorrect) {
+                        feedbackDisplay.textContent = '答對了！';
+                        feedbackDisplay.classList.remove('text-red-500');
+                        feedbackDisplay.classList.add('text-green-600');
+                        triggerConfetti();
+                    } else {
+                        feedbackDisplay.textContent = '答錯了！';
+                        feedbackDisplay.classList.add('text-red-500');
+                        answerInput.classList.add('shake');
+                        setTimeout(() => { answerInput.classList.remove('shake'); }, 820);
                     }
+                    
+                    // Flip the card to show the answer, regardless of correctness
+                    if (isFlipped) {
+                        flashcardContainer.classList.remove('flipped');
+                    } else {
+                        flashcardContainer.classList.add('flipped');
+                    }
+                    
+                    // Update placeholder for the new card face and clear input
+                    setTimeout(() => {
+                        const currentlyFlipped = flashcardContainer.classList.contains('flipped');
+                        answerInput.placeholder = currentlyFlipped ? "請輸入英文答案..." : "請輸入中文答案...";
+                        answerInput.value = '';
+                        answerInput.focus();
+                    }, 600); // Wait for flip to finish
+                    
+                    return; // End execution for review mode
+                }
+                // --- End: Logic for Review Mode ---
+
+                // --- Logic for all other quiz modes ---
+                let correctAnswer;
+                let answerLang;
+                let effectiveMode = currentMode;
+                if (isSpeed) effectiveMode = currentSpeedQuestionType;
+                if (currentMode === 'hard') effectiveMode = 'zh-en';
+
+                switch (effectiveMode) {
+                    case 'zh-en': case 'listen':
+                        correctAnswer = card.english.split('(')[0].trim();
+                        answerLang = 'en';
+                        break;
+                    case 'en-zh':
+                        correctAnswer = card.chinese.split('(')[0].trim();
+                        answerLang = 'zh';
+                        break;
                 }
 
                 let isCorrect;
@@ -846,17 +834,13 @@
                 }
                 
                 if (isCorrect) {
-                    correctSound.play();
                     answerInput.disabled = true;
                     submitBtn.disabled = true;
                     feedbackDisplay.textContent = '答對了！';
                     feedbackDisplay.classList.remove('text-red-500');
                     feedbackDisplay.classList.add('text-green-600');
                     triggerConfetti();
-                    
-                    if (!flashcardContainer.classList.contains('flipped')) {
-                        flashcardContainer.classList.add('flipped');
-                    }
+                    flashcardContainer.classList.add('flipped');
                     
                     if (wordIndex !== -1) words[wordIndex].proficiency = (words[wordIndex].proficiency || 0) + 1;
 
@@ -864,7 +848,7 @@
                         currentScore++;
                         scoreDisplay.textContent = `得分: ${currentScore}`;
                         setTimeout(startSpeedCard, 500);
-                    } else if (!isReview) {
+                    } else {
                         quizQueue.shift();
                         
                         setTimeout(() => {
@@ -882,13 +866,7 @@
                             }
                         }, 1500);
                     }
-                    
-                    if (isReview) {
-                        answerInput.disabled = false;
-                        submitBtn.disabled = false;
-                    }
-                } else { // Incorrect answer
-                    wrongSound.play();
+                } else { // Incorrect answer for quiz modes
                     quizIncorrectCount++; 
                     updateHintButtonVisibility();
                     answerInput.classList.add('shake');
@@ -902,13 +880,6 @@
                         feedbackDisplay.textContent = '答錯了，再試一次！';
                         feedbackDisplay.classList.add('text-red-500');
                         setTimeout(() => { answerInput.classList.remove('shake'); feedbackDisplay.textContent = ''; }, 1000);
-                    } else if (isReview) {
-                        feedbackDisplay.textContent = '答錯了！';
-                        feedbackDisplay.classList.add('text-red-500');
-                        if (!flashcardContainer.classList.contains('flipped')) {
-                           flashcardContainer.classList.add('flipped');
-                        }
-                        setTimeout(() => { answerInput.classList.remove('shake'); }, 820);
                     } else { // Other quiz modes
                         answerInput.disabled = true;
                         submitBtn.disabled = true;
@@ -1041,7 +1012,7 @@
             nextBtn.addEventListener('click', () => { if (currentCardIndex < wordsForCurrentMode.length - 1) { currentCardIndex++; displayCard(); }});
             quizForm.addEventListener('submit', (e) => { e.preventDefault(); checkAnswer(); });
             speakBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.75); });
-            speakSlowBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.35); });
+            speakSlowBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.2); });
             hintBtn.addEventListener('click', () => {
                 const card = currentMode === 'speed' ? currentSpeedCard : quizQueue[0];
                 if (!card) return;
@@ -1094,21 +1065,14 @@
                     alert('冊次和課次不能為空！');
                 }
             });
-            
-            shareGameBtn.addEventListener('click', () => {
-                shareResultContainer.classList.add('hidden');
-                shareLinkInput.value = '';
-                copyFeedback.textContent = '';
-                shareModal.classList.remove('hidden');
-            });
 
-            generateLinkBtn.addEventListener('click', () => {
-                 try {
+            shareGameBtn.addEventListener('click', () => {
+                try {
                     const wordsString = JSON.stringify(words);
+                    // 處理 UTF-8 字元以避免 btoa 錯誤
                     const base64Words = btoa(unescape(encodeURIComponent(wordsString))); 
                     const start = startRangeInput.value || '';
                     const end = endRangeInput.value || '';
-                    const isLocked = lockSettingsCheckbox.checked;
                     
                     const baseUrl = window.location.href.split('?')[0];
                     const url = new URL(baseUrl);
@@ -1116,16 +1080,10 @@
                     url.searchParams.set('data', base64Words);
                     if (start) url.searchParams.set('start', start);
                     if (end) url.searchParams.set('end', end);
-                    if (isLocked) {
-                        url.searchParams.set('lock', 'true');
-                        if(randomQuestionsCheckbox.checked) {
-                            const randomCount = randomQuestionsCountInput.value;
-                            if(randomCount) url.searchParams.set('random', randomCount);
-                        }
-                    }
 
                     shareLinkInput.value = url.toString();
-                    shareResultContainer.classList.remove('hidden');
+                    copyFeedback.textContent = '';
+                    shareModal.classList.remove('hidden');
 
                 } catch (error) {
                     console.error("產生分享連結時發生錯誤:", error);
@@ -1133,7 +1091,6 @@
                 }
             });
 
-
             copyLinkBtn.addEventListener('click', () => {
                 shareLinkInput.select();
                 shareLinkInput.setSelectionRange(0, 99999); // 兼容移動設備
@@ -1195,26 +1152,6 @@
                 confirmDeleteModal.classList.add('hidden');
                 indexToDelete = -1;
             });
-            
-            randomQuestionsCheckbox.addEventListener('change', () => {
-                randomQuestionsCountInput.disabled = !randomQuestionsCheckbox.checked;
-                if (!randomQuestionsCheckbox.checked) {
-                    randomQuestionsCountInput.value = '';
-                } else {
-                    randomQuestionsCountInput.focus();
-                }
-            });
-
-            const updateRandomCountMax = () => {
-                const start = parseInt(startRangeInput.value, 10) || 1;
-                const end = parseInt(endRangeInput.value, 10) || words.length;
-                if (end >= start) {
-                    const rangeSize = end - start + 1;
-                    randomQuestionsCountInput.max = rangeSize;
-                }
-            };
-            startRangeInput.addEventListener('input', updateRandomCountMax);
-            endRangeInput.addEventListener('input', updateRandomCountMax);
 
 
             // --- 應用程式初始化 ---
@@ -1266,21 +1203,8 @@
 
                 const sharedStart = urlParams.get('start');
                 const sharedEnd = urlParams.get('end');
-                const sharedRandom = urlParams.get('random');
-                const isLocked = urlParams.get('lock') === 'true';
-
                 if (sharedStart) startRangeInput.value = sharedStart;
                 if (sharedEnd) endRangeInput.value = sharedEnd;
-                if (sharedRandom) {
-                    randomQuestionsCheckbox.checked = true;
-                    randomQuestionsCountInput.value = sharedRandom;
-                    randomQuestionsCountInput.disabled = false;
-                }
-                
-                if (isLocked) {
-                    settingsContainer.classList.add('opacity-50', 'pointer-events-none');
-                    teacherTools.classList.add('hidden');
-                }
                 
                 if (urlParams.has('data')) {
                     history.replaceState(null, '', window.location.pathname);
@@ -1289,7 +1213,6 @@
                 startRangeInput.max = words.length;
                 endRangeInput.max = words.length;
                 endRangeInput.placeholder = `到 ${words.length}`;
-                updateRandomCountMax();
                 showView('menu');
             };
             initializeApp();