Update index.html

index.html

@@ -351,6 +351,18 @@
         </div>
     </div>
     
+    <!-- 單字刪除確認 Modal -->
+    <div id="confirm-delete-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">
+            <h3 class="text-2xl font-bold mb-4 text-gray-800">確認刪除</h3>
+            <p class="text-gray-600 mb-6">您確定要刪除單字 "<span id="word-to-delete" class="font-bold"></span>" 嗎？此操作無法復原。</p>
+            <div class="flex justify-end gap-4 mt-6">
+                <button type="button" id="cancel-delete-btn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">取消</button>
+                <button type="button" id="confirm-delete-btn" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">確認刪除</button>
+            </div>
+        </div>
+    </div>
+
     <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>
@@ -444,6 +456,11 @@
             const confirmClearModal = document.getElementById('confirm-clear-modal');
             const cancelClearBtn = document.getElementById('cancel-clear-btn');
             const confirmClearBtn = document.getElementById('confirm-clear-btn');
+            const confirmDeleteModal = document.getElementById('confirm-delete-modal');
+            const wordToDeleteSpan = document.getElementById('word-to-delete');
+            const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
+            const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
+
 
             // 應用程式狀態
             let words = [];
@@ -455,6 +472,7 @@
             let completionStatus = {};
             let bookTitle = '';
             let lessonTitle = '';
+            let indexToDelete = -1;
             const MANAGE_PASSWORD = 'Ghjh';
             let highScore = 0;
             let currentScore = 0;
@@ -528,13 +546,9 @@
                     editChineseInput.value = words[index].chinese;
                     editWordModal.classList.remove('hidden');
                 } else if (button.classList.contains('delete-btn')) {
-                    const itemElement = button.closest('.list-item');
-                    itemElement.classList.add('removing');
-                    setTimeout(() => {
-                        words.splice(index, 1);
-                        saveWordsToStorage();
-                        renderWordList();
-                    }, 300);
+                    indexToDelete = index;
+                    wordToDeleteSpan.textContent = words[index].english;
+                    confirmDeleteModal.classList.remove('hidden');
                 }
             });
 
@@ -680,7 +694,7 @@
 
                 quizContainer.classList.remove('hidden');
                 reviewNavContainer.classList.toggle('hidden', !isReview);
-                progressBarContainer.classList.toggle('hidden', !isQuiz);
+                progressBarContainer.classList.toggle('hidden', isReview || isSpeed);
                 speedHud.classList.toggle('hidden', !isSpeed);
                 hudPlaceholder.classList.toggle('hidden', isSpeed);
                 
@@ -721,54 +735,113 @@
             };
 
             const checkAnswer = () => {
-                 const userAnswer = answerInput.value.trim();
-                 if (!userAnswer) return;
-                if (currentMode === 'speed' && timeLeft <= 0) return;
+                const userAnswer = answerInput.value.trim();
+                if (!userAnswer) return;
+
                 const isSpeed = currentMode === 'speed';
-                const card = isSpeed ? currentSpeedCard : quizQueue[0];
+                const isReview = currentMode === 'review';
+                
+                if (isSpeed && timeLeft <= 0) return;
+
+                const card = isReview ? wordsForCurrentMode[currentCardIndex] : (isSpeed ? currentSpeedCard : quizQueue[0]);
                 if (!card) return;
+
                 const wordIndex = words.findIndex(w => w.english === card.english && w.chinese === card.chinese);
+                
                 let correctAnswer;
-                const questionType = isSpeed ? currentSpeedQuestionType : (currentMode === 'hard' ? 'zh-en' : currentMode);
-                switch (questionType) {
-                    case 'zh-en': case 'listen': correctAnswer = card.english.split('(')[0].trim(); break;
-                    case 'en-zh': correctAnswer = card.chinese.split('(')[0].trim(); break;
+                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':
+                    case 'review':
+                        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 !== '');
+                } else {
+                    isCorrect = userAnswer.trim().toLowerCase() === correctAnswer.trim().toLowerCase();
                 }
-                const isCorrect = userAnswer.toLowerCase() === correctAnswer.toLowerCase();
                 
                 if (isCorrect) {
-                    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 (!isSpeed && wordIndex !== -1) words[wordIndex].proficiency = (words[wordIndex].proficiency || 0) + 1;
+                    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 (wordIndex !== -1) words[wordIndex].proficiency = (words[wordIndex].proficiency || 0) + 1;
+
                     if (isSpeed) {
-                        currentScore++; scoreDisplay.textContent = `得分: ${currentScore}`;
+                        currentScore++;
+                        scoreDisplay.textContent = `得分: ${currentScore}`;
                         setTimeout(startSpeedCard, 500);
                     } else {
-                        quizQueue.shift();
+                        if (!isReview) quizQueue.shift();
+                        
                         setTimeout(() => {
-                            if (quizQueue.length > 0) displayCard();
-                            else {
+                            if (isReview) {
+                                if (currentCardIndex < wordsForCurrentMode.length - 1) {
+                                    currentCardIndex++;
+                                    displayCard();
+                                } else {
+                                    feedbackDisplay.textContent = '恭喜你，全部複習完了！';
+                                }
+                            } else if (quizQueue.length > 0) {
+                                displayCard();
+                            } else {
                                 feedbackDisplay.textContent = '恭喜你，全部完成了！';
                                 if (currentMode !== 'hard') {
-                                    completionStatus[currentMode] = true; localStorage.setItem('completionStatus', JSON.stringify(completionStatus)); updateCompletionUI();
+                                    completionStatus[currentMode] = true;
+                                    localStorage.setItem('completionStatus', JSON.stringify(completionStatus));
+                                    updateCompletionUI();
                                 }
-                                answerInput.disabled = true; submitBtn.disabled = true;
+                                answerInput.disabled = true;
+                                submitBtn.disabled = true;
                             }
                         }, 1500);
                     }
-                } else {
-                    quizIncorrectCount++; updateHintButtonVisibility();
+                } else { // Incorrect answer
+                    quizIncorrectCount++; 
+                    updateHintButtonVisibility();
                     answerInput.classList.add('shake');
-                    if (!isSpeed && wordIndex !== -1) {
-                        words[wordIndex].proficiency = 0; words[wordIndex].incorrectCount = (words[wordIndex].incorrectCount || 0) + 1;
+                    
+                    if (wordIndex !== -1) {
+                        words[wordIndex].proficiency = 0; 
+                        words[wordIndex].incorrectCount = (words[wordIndex].incorrectCount || 0) + 1;
                     }
+                    
                     if (isSpeed) {
-                        feedbackDisplay.textContent = '答錯了，再試一次！'; feedbackDisplay.classList.add('text-red-500');
+                        feedbackDisplay.textContent = '答錯了，再試一次！';
+                        feedbackDisplay.classList.add('text-red-500');
                         setTimeout(() => { answerInput.classList.remove('shake'); feedbackDisplay.textContent = ''; }, 1000);
-                    } else {
-                        answerInput.disabled = true; submitBtn.disabled = true;
-                        flashcardContainer.classList.add('flipped'); quizContainer.classList.add('hidden');
+                    } else if (isReview) {
+                        feedbackDisplay.textContent = '答錯了！';
+                        feedbackDisplay.classList.add('text-red-500');
+                        flashcardContainer.classList.add('flipped');
+                        setTimeout(() => { answerInput.classList.remove('shake'); }, 820);
+                    } else { // Other quiz modes
+                        answerInput.disabled = true;
+                        submitBtn.disabled = true;
+                        flashcardContainer.classList.add('flipped'); 
+                        quizContainer.classList.add('hidden');
                         wrongAnswerFeedback.classList.remove('hidden');
                         setTimeout(() => { answerInput.classList.remove('shake'); }, 820);
                     }
@@ -776,6 +849,7 @@
                 if (!isSpeed) saveWordsToStorage();
             };
 
+
             const updateHintButtonVisibility = () => {
                 const isQuiz = currentMode !== 'review' && currentMode !== 'speed';
                 const shouldShow = isQuiz && quizIncorrectCount >= 2;
@@ -994,6 +1068,38 @@
                 confirmClearModal.classList.add('hidden');
             });
 
+            cancelDeleteBtn.addEventListener('click', () => {
+                confirmDeleteModal.classList.add('hidden');
+                indexToDelete = -1;
+            });
+
+            confirmDeleteBtn.addEventListener('click', () => {
+                if (indexToDelete > -1) {
+                    const allDeleteButtons = wordListContainer.querySelectorAll('.delete-btn');
+                    let itemElement = null;
+                    allDeleteButtons.forEach(btn => {
+                        if(parseInt(btn.dataset.index, 10) === indexToDelete) {
+                            itemElement = btn.closest('.list-item');
+                        }
+                    });
+
+                    if (itemElement) {
+                        itemElement.classList.add('removing');
+                    }
+                    
+                    setTimeout(() => {
+                        if (indexToDelete > -1) { 
+                            words.splice(indexToDelete, 1);
+                            saveWordsToStorage();
+                            renderWordList();
+                        }
+                    }, 300);
+                }
+                confirmDeleteModal.classList.add('hidden');
+                indexToDelete = -1;
+            });
+
+
             // --- 應用程式初始化 ---
             const initializeApp = () => {
                 const urlParams = new URLSearchParams(window.location.search);