Update index.html

index.html

@@ -151,6 +151,7 @@
             
             <!-- 教師工具 -->
             <div id="teacher-tools" class="mt-8 pt-4 border-t flex justify-end items-center gap-3">
+                 <button id="grade-report-btn" class="text-white font-semibold py-2 px-5 rounded-full transition-transform hover:scale-105 bg-blue-500 hover:bg-blue-600 text-sm">📊 成績報告</button>
                  <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>
@@ -289,6 +290,12 @@
             </button>
         </div>
 
+        <!-- 測驗完成提示訊息 -->
+        <div id="quiz-completion-message" class="hidden w-full max-w-md mt-4 flex flex-col items-center text-center p-6 bg-white rounded-2xl shadow-lg">
+            <h2 class="text-3xl font-bold text-green-600">測驗完成！</h2>
+            <p class="mt-4 text-lg text-gray-700">成績已記錄，即將返回主選單...</p>
+        </div>
+
         <!-- 複習模式導覽 -->
         <div id="review-nav-container" class="flex items-center justify-between w-full max-w-md mt-10 space-x-4">
             <button id="prev-btn" class="nav-btn">
@@ -371,12 +378,46 @@
         </div>
     </div>
 
+    <!-- 成績報告 Modal -->
+    <div id="grade-report-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-4xl">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-3xl font-bold text-gray-800">成績報告</h3>
+                <button type="button" id="close-report-modal-btn" class="p-2 rounded-full hover:bg-gray-200 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            <div id="report-content" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <!-- Report for zh-en -->
+                <div class="p-4 bg-teal-50 rounded-lg border border-teal-200">
+                    <h4 class="text-xl font-bold text-teal-800 mb-4">中翻英測驗</h4>
+                    <div id="report-zh-en" class="space-y-3 text-left text-gray-700 max-h-80 overflow-y-auto pr-2">
+                        <!-- Content will be generated by JS -->
+                    </div>
+                </div>
+                <!-- Report for en-zh -->
+                <div class="p-4 bg-amber-50 rounded-lg border border-amber-200">
+                    <h4 class="text-xl font-bold text-amber-800 mb-4">英翻中測驗</h4>
+                    <div id="report-en-zh" class="space-y-3 text-left text-gray-700 max-h-80 overflow-y-auto pr-2">
+                        <!-- Content will be generated by JS -->
+                    </div>
+                </div>
+                <!-- Report for listen -->
+                <div class="p-4 bg-rose-50 rounded-lg border border-rose-200">
+                    <h4 class="text-xl font-bold text-rose-800 mb-4">聽力測驗</h4>
+                    <div id="report-listen" class="space-y-3 text-left text-gray-700 max-h-80 overflow-y-auto pr-2">
+                        <!-- Content will be generated by JS -->
+                    </div>
+                </div>
+            </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">
             <h3 class="text-2xl font-bold mb-4 text-gray-800">確認操作</h3>
-            <p class="text-gray-600 mb-6">您確定要清除所有單字嗎？此操作無法復原。</p>
+            <p class="text-gray-600 mb-6">您確定要清除所有單字和成績紀錄嗎？此操作無法復原。</p>
             <div class="flex justify-end gap-4 mt-6">
                 <button type="button" id="cancel-clear-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-clear-btn" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">確認清除</button>
@@ -418,6 +459,7 @@
             const teacherTools = document.getElementById('teacher-tools');
             const manageWordsBtn = document.getElementById('manage-words-btn');
             const shareGameBtn = document.getElementById('share-game-btn');
+            const gradeReportBtn = document.getElementById('grade-report-btn');
             const randomQuestionsCheckbox = document.getElementById('random-questions-checkbox');
             const randomQuestionsCountInput = document.getElementById('random-questions-count');
             
@@ -459,6 +501,7 @@
             const hintSection = document.getElementById('hint-section');
             const hintBtn = document.getElementById('hint-btn');
             const hintDisplay = document.getElementById('hint-display');
+            const quizCompletionMessage = document.getElementById('quiz-completion-message');
             
             // 複習模式導覽
             const reviewNavContainer = document.getElementById('review-nav-container');
@@ -475,7 +518,7 @@
             const finalScore = document.getElementById('final-score');
             const newHighscoreMsg = document.getElementById('new-highscore-msg');
             const playAgainBtn = document.getElementById('play-again-btn');
-
+            
             // Modals
             const passwordModal = document.getElementById('password-modal');
             const passwordForm = document.getElementById('password-form');
@@ -497,6 +540,11 @@
             const copyFeedback = document.getElementById('copy-feedback');
             const closeShareModalBtn = document.getElementById('close-share-modal-btn');
             const qrcodeContainer = document.getElementById('qrcode-container');
+            const gradeReportModal = document.getElementById('grade-report-modal');
+            const closeReportModalBtn = document.getElementById('close-report-modal-btn');
+            const reportZhEn = document.getElementById('report-zh-en');
+            const reportEnZh = document.getElementById('report-en-zh');
+            const reportListen = document.getElementById('report-listen');
             const confirmClearModal = document.getElementById('confirm-clear-modal');
             const cancelClearBtn = document.getElementById('cancel-clear-btn');
             const confirmClearBtn = document.getElementById('confirm-clear-btn');
@@ -514,6 +562,7 @@
             let words = [];
             let quizQueue = [];
             let wordsForCurrentMode = [];
+            let gradeReports = {};
             let quizIncorrectCount = 0;
             let currentCardIndex = 0; 
             let currentMode = '';
@@ -528,6 +577,7 @@
             let timeLeft = 60;
             let currentSpeedCard = null;
             let currentSpeedQuestionType = '';
+            let quizStartTime = 0;
 
             const modeDetails = {
                 'review': { title: '複習模式' }, 'zh-en': { title: '中翻英測驗' },
@@ -565,7 +615,6 @@
             // --- 單字管理功能 ---
             const renderWordList = () => {
                 wordListContainer.innerHTML = '';
-                // 移除字母排序，直接按照陣列順序渲染
                 words.forEach((word, index) => {
                     const item = document.createElement('div');
                     item.className = 'list-item p-3 bg-gray-100 rounded-lg flex items-center justify-between';
@@ -683,6 +732,8 @@
                     }
 
                     flashcardContainer.style.cursor = 'default';
+                    flashcardContainer.classList.remove('hidden');
+                    quizCompletionMessage.classList.add('hidden');
                     [speakBtn, speakSlowBtn].forEach(btn => btn.classList.add('hidden'));
                     feedbackDisplay.textContent = '';
                     answerInput.value = '';
@@ -752,7 +803,6 @@
                 
                 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();
@@ -771,21 +821,19 @@
                 progressBarContainer.classList.toggle('hidden', isReview || isSpeed);
                 speedHud.classList.toggle('hidden', !isSpeed);
                 hudPlaceholder.classList.toggle('hidden', isSpeed);
+                quizCompletionMessage.classList.add('hidden');
                 
                 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);
                 } else {
                     wordPool = [...words];
                 }
 
-                // 2. Then, determine the final word set for the mode.
                 if (mode === 'review') {
-                    // For review mode, ALWAYS use the full pool, ignoring random settings.
                     wordsForCurrentMode = wordPool;
                 } else if (randomQuestionsCheckbox.checked) {
                     const randomCount = parseInt(randomQuestionsCountInput.value, 10);
@@ -796,7 +844,6 @@
                         return;
                     }
                 } else {
-                    // For other modes without random, use the entire pool.
                     wordsForCurrentMode = wordPool;
                 }
 
@@ -817,6 +864,10 @@
                     quizQueue = shuffleArray([...wordsForCurrentMode]);
                 }
 
+                if (isQuiz) {
+                    quizStartTime = Date.now();
+                }
+
                 quizIncorrectCount = 0;
                 updateHintButtonVisibility();
                 
@@ -840,22 +891,14 @@
 
                 const wordIndex = words.findIndex(w => w.english === card.english && w.chinese === card.chinese);
                 
-                let correctAnswer;
-                let answerLang;
+                let correctAnswer, answerLang;
                 
                 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';
-                    } else { // English side showing, user should type Chinese
-                        correctAnswer = card.chinese.split('(')[0].trim();
-                        answerLang = 'zh';
-                    }
+                    correctAnswer = isFlipped ? card.english.split('(')[0].trim() : card.chinese.split('(')[0].trim();
+                    answerLang = isFlipped ? 'en' : 'zh';
                 } else {
-                    let effectiveMode = currentMode;
-                    if (isSpeed) effectiveMode = currentSpeedQuestionType;
-                    if (currentMode === 'hard') effectiveMode = 'zh-en';
+                    let effectiveMode = isSpeed ? currentSpeedQuestionType : (currentMode === 'hard' ? 'zh-en' : currentMode);
                     switch (effectiveMode) {
                         case 'zh-en': case 'listen':
                             correctAnswer = card.english.split('(')[0].trim();
@@ -903,19 +946,36 @@
                             if (quizQueue.length > 0) {
                                 displayCard();
                             } else {
-                                feedbackDisplay.textContent = '恭喜你，全部完成了！';
+                                // 測驗完成
+                                const elapsedTime = Math.round((Date.now() - quizStartTime) / 1000);
+                                const reportData = {
+                                    total: wordsForCurrentMode.length,
+                                    mistakes: quizIncorrectCount,
+                                    time: elapsedTime,
+                                    date: new Date().toISOString(),
+                                    status: 'completed'
+                                };
+                                
+                                const history = gradeReports[currentMode] || [];
+                                history.push(reportData);
+                                gradeReports[currentMode] = history;
+                                localStorage.setItem('gradeReports', JSON.stringify(gradeReports));
+
+                                quizStartTime = 0; // Reset timer
+
                                 if (currentMode !== 'hard') {
                                     completionStatus[currentMode] = true;
                                     localStorage.setItem('completionStatus', JSON.stringify(completionStatus));
                                     updateCompletionUI();
                                 }
-                                answerInput.disabled = true;
-                                submitBtn.disabled = true;
+                                
+                                [flashcardContainer, quizContainer, progressBarContainer, hintSection].forEach(el => el.classList.add('hidden'));
+                                quizCompletionMessage.classList.remove('hidden');
+
+                                setTimeout(() => showView('menu'), 3000);
                             }
                         }, 1500);
-                    }
-                    
-                    if (isReview) {
+                    } else { // Review mode
                         answerInput.disabled = false;
                         submitBtn.disabled = false;
                     }
@@ -955,9 +1015,8 @@
 
 
             const updateHintButtonVisibility = () => {
-                const isQuiz = currentMode !== 'review' && currentMode !== 'speed';
-                const shouldShow = isQuiz && quizIncorrectCount >= 2;
-                hintSection.classList.toggle('hidden', !shouldShow);
+                const isQuiz = !['review', 'speed'].includes(currentMode);
+                hintSection.classList.toggle('hidden', !(isQuiz && quizIncorrectCount >= 2));
             };
             
             confirmWrongBtn.addEventListener('click', () => {
@@ -1052,6 +1111,42 @@
                 });
             };
 
+            const renderGradeReport = () => {
+                const reportTargets = { 'zh-en': reportZhEn, 'en-zh': reportEnZh, 'listen': reportListen };
+                for (const mode in reportTargets) {
+                    const history = gradeReports[mode] || [];
+                    const targetDiv = reportTargets[mode];
+                    targetDiv.innerHTML = ''; // Clear previous content
+                    
+                    if (history.length === 0) {
+                        targetDiv.innerHTML = `<p class="text-gray-500 p-4 text-center">尚未有紀錄</p>`;
+                    } else {
+                        history.slice().reverse().forEach(report => {
+                            const minutes = Math.floor(report.time / 60);
+                            const seconds = report.time % 60;
+                            const isCompleted = report.status === 'completed';
+                            
+                            const reportElement = document.createElement('div');
+                            reportElement.className = 'p-3 mb-3 bg-white rounded-lg shadow-sm border';
+                            reportElement.innerHTML = `
+                                <div class="flex justify-between items-center mb-2">
+                                    <p class="text-sm font-semibold">${new Date(report.date).toLocaleString('zh-TW', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</p>
+                                    <span class="px-2 py-1 text-xs font-bold rounded-full ${isCompleted ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
+                                        ${isCompleted ? '已完成' : '未完成'}
+                                    </span>
+                                </div>
+                                <div class="text-sm space-y-1">
+                                    <p><strong>題目:</strong> ${isCompleted ? report.total : `${report.attempted || 0}/${report.total}`} 題</p>
+                                    <p><strong>答錯:</strong> <span class="font-bold text-red-500">${report.mistakes} 次</span></p>
+                                    <p><strong>時間:</strong> ${minutes} 分 ${seconds} 秒</p>
+                                </div>
+                            `;
+                            targetDiv.appendChild(reportElement);
+                        });
+                    }
+                }
+            };
+
             const generateQRCode = (text) => {
                 qrcodeContainer.innerHTML = '';
                 try {
@@ -1071,7 +1166,33 @@
             document.querySelectorAll('.mode-btn[data-mode]').forEach(btn => {
                 btn.addEventListener('click', () => setupLearningView(btn.dataset.mode));
             });
-            backToMenuBtn.addEventListener('click', () => { clearInterval(timerInterval); showView('menu'); });
+
+            backToMenuBtn.addEventListener('click', () => {
+                clearInterval(timerInterval);
+                const isQuiz = !['review', 'speed', ''].includes(currentMode);
+                if (isQuiz && quizStartTime > 0) {
+                    const attempted = wordsForCurrentMode.length - quizQueue.length;
+                     // Only save if at least one question was attempted
+                    if (attempted > 0) {
+                        const elapsedTime = Math.round((Date.now() - quizStartTime) / 1000);
+                        const reportData = {
+                            total: wordsForCurrentMode.length,
+                            attempted: attempted,
+                            mistakes: quizIncorrectCount,
+                            time: elapsedTime,
+                            date: new Date().toISOString(),
+                            status: 'abandoned'
+                        };
+                        const history = gradeReports[currentMode] || [];
+                        history.push(reportData);
+                        gradeReports[currentMode] = history;
+                        localStorage.setItem('gradeReports', JSON.stringify(gradeReports));
+                    }
+                }
+                quizStartTime = 0;
+                currentMode = '';
+                showView('menu');
+            });
             
             flashcardContainer.addEventListener('click', () => {
                 if (currentMode === 'review') {
@@ -1152,6 +1273,12 @@
                 shareModal.classList.remove('hidden');
             });
 
+            gradeReportBtn.addEventListener('click', () => {
+                renderGradeReport();
+                gradeReportModal.classList.remove('hidden');
+            });
+            closeReportModalBtn.addEventListener('click', () => gradeReportModal.classList.add('hidden'));
+
             generateLinkBtn.addEventListener('click', async () => {
                 generateLinkBtn.textContent = '產生中...';
                 generateLinkBtn.disabled = true;
@@ -1179,21 +1306,17 @@
 
                     const longUrl = url.toString();
                     
-                    // 使用TinyURL API縮短網址
                     const response = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`);
                     if (response.ok) {
                         const shortUrl = await response.text();
                         shareLinkInput.value = shortUrl;
                         generateQRCode(shortUrl);
                     } else {
-                        // 如果API失敗，則退回使用長網址
                         shareLinkInput.value = longUrl;
                         generateQRCode(longUrl);
                         copyFeedback.textContent = '縮短網址失敗，已產生原始連結。';
                     }
-
                     shareResultContainer.classList.remove('hidden');
-
                 } catch (error) {
                     console.error("產生分享連結時發生錯誤:", error);
                     alert("產生分享連結時發生錯誤，可能是網路問題或單字列表過大。");
@@ -1206,7 +1329,7 @@
 
             copyLinkBtn.addEventListener('click', () => {
                 shareLinkInput.select();
-                shareLinkInput.setSelectionRange(0, 99999); // 兼容移動設備
+                shareLinkInput.setSelectionRange(0, 99999);
                 try {
                     document.execCommand('copy');
                     copyFeedback.textContent = '已成功複製！';
@@ -1230,7 +1353,9 @@
 
             confirmClearBtn.addEventListener('click', () => {
                 words = [];
+                gradeReports = {};
                 saveWordsToStorage();
+                localStorage.removeItem('gradeReports');
                 renderWordList();
                 confirmClearModal.classList.add('hidden');
             });
@@ -1242,17 +1367,8 @@
 
             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');
-                    }
+                    const itemElement = wordListContainer.querySelector(`.list-item button[data-index="${indexToDelete}"]`)?.closest('.list-item');
+                    if (itemElement) itemElement.classList.add('removing');
                     
                     setTimeout(() => {
                         if (indexToDelete > -1) { 
@@ -1329,6 +1445,7 @@
                 lessonTitle = localStorage.getItem('flashcardsLessonTitle') || 'L1';
                 updateMainTitle();
                 
+                gradeReports = JSON.parse(localStorage.getItem('gradeReports')) || {};
                 completionStatus = JSON.parse(localStorage.getItem('completionStatus')) || {};
                 updateCompletionUI();
                 highScore = parseInt(localStorage.getItem('flashcardsHighScore') || '0', 10);
@@ -1364,7 +1481,6 @@
             };
             initializeApp();
 
-            // Append global styles
             const style = document.createElement('style');
             style.textContent = `
                 .mode-btn { color: white; font-weight: bold; padding: 1rem 1.5rem; border-radius: 1.5rem; transition: all 0.3s; transform: translateY(0); display: flex; justify-content: center; align-items: center; text-align: center; height: 100%;}