Update index.html

index.html

@@ -96,12 +96,20 @@
                     <p id="highscore-display" class="text-lg font-bold text-amber-500">0</p>
                 </div>
             </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 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>
             
             <!-- 主要功能 -->
@@ -134,7 +142,7 @@
             </div>
             
             <!-- 教師工具 -->
-            <div class="mt-8 pt-4 border-t flex justify-end items-center gap-3">
+            <div id="teacher-tools" 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>
@@ -327,18 +335,34 @@
     <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="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>
+            <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>
             </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">
@@ -363,6 +387,9 @@
         </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>
@@ -376,10 +403,14 @@
             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');
@@ -449,6 +480,9 @@
             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');
@@ -461,6 +495,10 @@
             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 = [];
@@ -706,15 +744,32 @@
                 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) {
-                    wordsForCurrentMode = words.slice(start - 1, end);
+                    wordPool = words.slice(start - 1, end);
                 } else {
-                    wordsForCurrentMode = [...words];
+                    wordPool = [...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;
                 }
 
@@ -753,75 +808,32 @@
 
                 const wordIndex = words.findIndex(w => w.english === card.english && w.chinese === card.chinese);
                 
-                // --- Start: New, separated logic for Review Mode ---
+                let correctAnswer;
+                let answerLang;
+                
                 if (isReview) {
                     const isFlipped = flashcardContainer.classList.contains('flipped');
-                    let correctAnswer, answerLang;
-
-                    if(isFlipped) { // Chinese side is showing, user should type English
+                    if(isFlipped) { // Chinese side showing, user should type English
                         correctAnswer = card.english.split('(')[0].trim();
                         answerLang = 'en';
-                    } else { // English side is showing, user should type Chinese
+                    } else { // English side showing, user should type Chinese
                         correctAnswer = card.chinese.split('(')[0].trim();
                         answerLang = 'zh';
                     }
-
-                    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');
+                } 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;
                     }
-                    
-                    // 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;
@@ -834,13 +846,17 @@
                 }
                 
                 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();
-                    flashcardContainer.classList.add('flipped');
+                    
+                    if (!flashcardContainer.classList.contains('flipped')) {
+                        flashcardContainer.classList.add('flipped');
+                    }
                     
                     if (wordIndex !== -1) words[wordIndex].proficiency = (words[wordIndex].proficiency || 0) + 1;
 
@@ -848,7 +864,7 @@
                         currentScore++;
                         scoreDisplay.textContent = `得分: ${currentScore}`;
                         setTimeout(startSpeedCard, 500);
-                    } else {
+                    } else if (!isReview) {
                         quizQueue.shift();
                         
                         setTimeout(() => {
@@ -866,7 +882,13 @@
                             }
                         }, 1500);
                     }
-                } else { // Incorrect answer for quiz modes
+                    
+                    if (isReview) {
+                        answerInput.disabled = false;
+                        submitBtn.disabled = false;
+                    }
+                } else { // Incorrect answer
+                    wrongSound.play();
                     quizIncorrectCount++; 
                     updateHintButtonVisibility();
                     answerInput.classList.add('shake');
@@ -880,6 +902,13 @@
                         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;
@@ -1065,14 +1094,21 @@
                     alert('冊次和課次不能為空！');
                 }
             });
-
+            
             shareGameBtn.addEventListener('click', () => {
-                try {
+                shareResultContainer.classList.add('hidden');
+                shareLinkInput.value = '';
+                copyFeedback.textContent = '';
+                shareModal.classList.remove('hidden');
+            });
+
+            generateLinkBtn.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);
@@ -1080,10 +1116,16 @@
                     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();
-                    copyFeedback.textContent = '';
-                    shareModal.classList.remove('hidden');
+                    shareResultContainer.classList.remove('hidden');
 
                 } catch (error) {
                     console.error("產生分享連結時發生錯誤:", error);
@@ -1091,6 +1133,7 @@
                 }
             });
 
+
             copyLinkBtn.addEventListener('click', () => {
                 shareLinkInput.select();
                 shareLinkInput.setSelectionRange(0, 99999); // 兼容移動設備
@@ -1152,6 +1195,26 @@
                 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);
 
 
             // --- 應用程式初始化 ---
@@ -1203,8 +1266,21 @@
 
                 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);
@@ -1213,6 +1289,7 @@
                 startRangeInput.max = words.length;
                 endRangeInput.max = words.length;
                 endRangeInput.placeholder = `到 ${words.length}`;
+                updateRandomCountMax();
                 showView('menu');
             };
             initializeApp();