Update index.html

index.html

@@ -615,27 +615,25 @@
             // --- 學習模式核心邏輯 ---
             const displayCard = () => {
                 if (wordsForCurrentMode.length === 0 && quizQueue.length === 0) return;
-                
-                const isReview = currentMode === 'review';
-                const isSpeed = currentMode === 'speed';
 
-                let card;
-                if (isReview) {
-                    card = wordsForCurrentMode[currentCardIndex];
-                } else if (isSpeed) {
-                    card = currentSpeedCard;
-                } else {
-                    if (quizQueue.length === 0) return;
-                    card = quizQueue[0];
-                }
+                const updateCardContent = () => {
+                    const isReview = currentMode === 'review';
+                    const isSpeed = currentMode === 'speed';
 
-                flashcardContainer.classList.remove('flipped');
-                
-                if (!isReview && !isSpeed) {
-                    setProgress(wordsForCurrentMode.length - quizQueue.length, wordsForCurrentMode.length);
-                }
+                    let card;
+                    if (isReview) {
+                        card = wordsForCurrentMode[currentCardIndex];
+                    } else if (isSpeed) {
+                        card = currentSpeedCard;
+                    } else {
+                        if (quizQueue.length === 0) return;
+                        card = quizQueue[0];
+                    }
+                    
+                    if (!isReview && !isSpeed) {
+                        setProgress(wordsForCurrentMode.length - quizQueue.length, wordsForCurrentMode.length);
+                    }
 
-                const setContent = () => {
                     flashcardContainer.style.cursor = 'default';
                     [speakBtn, speakSlowBtn].forEach(btn => btn.classList.add('hidden'));
                     feedbackDisplay.textContent = '';
@@ -665,6 +663,7 @@
                                 progressDisplay.textContent = `第 ${currentCardIndex + 1}/${wordsForCurrentMode.length} 張`;
                                 prevBtn.disabled = currentCardIndex === 0;
                                 nextBtn.disabled = currentCardIndex === wordsForCurrentMode.length - 1;
+                                answerInput.placeholder = "請輸入中文答案...";
                                 break;
                             case 'zh-en': case 'hard':
                                 frontText = card.chinese; backText = card.english; break;
@@ -682,7 +681,13 @@
                     setTimeout(() => answerInput.focus(), 100);
                 };
                 
-                setContent();
+                if (flashcardContainer.classList.contains('flipped')) {
+                    flashcardContainer.classList.remove('flipped');
+                    // Wait for the flip animation (0.6s) to mostly complete before changing content
+                    setTimeout(updateCardContent, 600); 
+                } else {
+                    updateCardContent();
+                }
             };
 
             const setupLearningView = (mode) => {
@@ -750,21 +755,30 @@
                 
                 let correctAnswer;
                 let answerLang;
-                let effectiveMode = currentMode;
-                if (isSpeed) effectiveMode = currentSpeedQuestionType;
-                if (currentMode === 'hard') effectiveMode = 'zh-en';
-
-                switch (effectiveMode) {
-                    case 'zh-en':
-                    case 'listen':
+                
+                if (isReview) {
+                    const isFlipped = flashcardContainer.classList.contains('flipped');
+                    if(isFlipped) { // Chinese side showing, user should type English
                         correctAnswer = card.english.split('(')[0].trim();
                         answerLang = 'en';
-                        break;
-                    case 'en-zh':
-                    case 'review':
+                    } else { // English side showing, user should type Chinese
                         correctAnswer = card.chinese.split('(')[0].trim();
                         answerLang = 'zh';
-                        break;
+                    }
+                } 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;
@@ -774,8 +788,6 @@
                 } 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();
                 }
                 
                 if (isCorrect) {
@@ -785,7 +797,10 @@
                     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;
 
@@ -793,18 +808,11 @@
                         currentScore++;
                         scoreDisplay.textContent = `得分: ${currentScore}`;
                         setTimeout(startSpeedCard, 500);
-                    } else {
-                        if (!isReview) quizQueue.shift();
+                    } else if (!isReview) {
+                        quizQueue.shift();
                         
                         setTimeout(() => {
-                            if (isReview) {
-                                if (currentCardIndex < wordsForCurrentMode.length - 1) {
-                                    currentCardIndex++;
-                                    displayCard();
-                                } else {
-                                    feedbackDisplay.textContent = '恭喜你，全部複習完了！';
-                                }
-                            } else if (quizQueue.length > 0) {
+                            if (quizQueue.length > 0) {
                                 displayCard();
                             } else {
                                 feedbackDisplay.textContent = '恭喜你，全部完成了！';
@@ -818,6 +826,11 @@
                             }
                         }, 1500);
                     }
+                    // For review mode, do nothing to auto-advance. Let user click next.
+                    if (isReview) {
+                        answerInput.disabled = false;
+                        submitBtn.disabled = false;
+                    }
                 } else { // Incorrect answer
                     quizIncorrectCount++; 
                     updateHintButtonVisibility();
@@ -835,7 +848,9 @@
                     } else if (isReview) {
                         feedbackDisplay.textContent = '答錯了！';
                         feedbackDisplay.classList.add('text-red-500');
-                        flashcardContainer.classList.add('flipped');
+                        if (!flashcardContainer.classList.contains('flipped')) {
+                           flashcardContainer.classList.add('flipped');
+                        }
                         setTimeout(() => { answerInput.classList.remove('shake'); }, 820);
                     } else { // Other quiz modes
                         answerInput.disabled = true;
@@ -953,7 +968,18 @@
                 btn.addEventListener('click', () => setupLearningView(btn.dataset.mode));
             });
             backToMenuBtn.addEventListener('click', () => { clearInterval(timerInterval); showView('menu'); });
-            flashcardContainer.addEventListener('click', () => { if (currentMode === 'review') flashcardContainer.classList.toggle('flipped'); });
+            
+            flashcardContainer.addEventListener('click', () => {
+                if (currentMode === 'review') {
+                    flashcardContainer.classList.toggle('flipped');
+                    const isFlipped = flashcardContainer.classList.contains('flipped');
+                    answerInput.placeholder = isFlipped ? "請輸入英文答案..." : "請輸入中文答案...";
+                    answerInput.value = '';
+                    feedbackDisplay.textContent = '';
+                    setTimeout(() => answerInput.focus(), 100);
+                }
+            });
+
             prevBtn.addEventListener('click', () => { if (currentCardIndex > 0) { currentCardIndex--; displayCard(); }});
             nextBtn.addEventListener('click', () => { if (currentCardIndex < wordsForCurrentMode.length - 1) { currentCardIndex++; displayCard(); }});
             quizForm.addEventListener('submit', (e) => { e.preventDefault(); checkAnswer(); });