Upload 9 files

src/views/InstructorView.js

@@ -720,133 +720,136 @@ export function setupInstructorEvents() {
 
             modal.classList.remove('hidden');
         });
+    }
 
-        // Add New Instructor
-        const addInstBtn = document.getElementById('btn-add-inst');
-        if (addInstBtn) {
-            addInstBtn.addEventListener('click', async () => {
-                const email = document.getElementById('new-inst-email').value.trim();
-                const name = document.getElementById('new-inst-name').value.trim();
+    // Add New Instructor
+    const addInstBtn = document.getElementById('btn-add-inst');
+    if (addInstBtn) {
+        addInstBtn.addEventListener('click', async () => {
+            const email = document.getElementById('new-inst-email').value.trim();
+            const name = document.getElementById('new-inst-name').value.trim();
 
-                if (!email || !name) return alert("請輸入完整資料");
+            if (!email || !name) return alert("請輸入完整資料");
 
-                const perms = [];
-                if (document.getElementById('perm-room').checked) perms.push('create_room');
-                if (document.getElementById('perm-q').checked) perms.push('add_question');
-                if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
+            const perms = [];
+            if (document.getElementById('perm-room').checked) perms.push('create_room');
+            if (document.getElementById('perm-q').checked) perms.push('add_question');
+            if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
 
-                try {
-                    await addInstructor(email, name, perms);
-                    alert("新增成功");
-                    navInstBtn.click(); // Reload list
-                    document.getElementById('new-inst-email').value = '';
-                    document.getElementById('new-inst-name').value = '';
-                } catch (e) {
-                    alert("新增失敗: " + e.message);
-                }
-            });
-        }
-
-
-        // Global helper for remove (hacky but works for simple onclick)
-        window.removeInst = async (email) => {
-            if (confirm(`確定移除 ${email}?`)) {
-                try {
-                    await removeInstructor(email);
-                    navInstBtn.click(); // Reload
-                } catch (e) {
-                    alert(e.message);
-                }
+            try {
+                await addInstructor(email, name, perms);
+                alert("新增成功");
+                navInstBtn.click(); // Reload list
+                document.getElementById('new-inst-email').value = '';
+                document.getElementById('new-inst-name').value = '';
+            } catch (e) {
+                alert("新增失敗: " + e.message);
             }
-        };
+        });
+    }
+
 
-        // Auto Check Auth (Persistence)
-        // We rely on Firebase Auth state observer instead of session storage for security?
-        // Or we can just check if user is already signed in.
-        import("../services/firebase.js").then(async ({ auth }) => {
-            // Handle Redirect Result first
+    // Global helper for remove (hacky but works for simple onclick)
+    window.removeInst = async (email) => {
+        if (confirm(`確定移除 ${email}?`)) {
             try {
-                console.log("Initializing Auth Check...");
-                const { handleRedirectResult } = await import("../services/auth.js");
-                const redirectUser = await handleRedirectResult();
-                if (redirectUser) console.log("Redirect User Found:", redirectUser.email);
-            } catch (e) { console.warn("Redirect check failed", e); }
-
-            auth.onAuthStateChanged(async (user) => {
-                console.log("Auth State Changed to:", user ? user.email : "Logged Out");
-                if (user) {
-                    try {
-                        console.log("Checking permissions for:", user.email);
-                        const instructorData = await checkInstructorPermission(user);
-                        console.log("Permission Result:", instructorData);
-
-                        if (instructorData) {
-                            console.log("Hiding Modal and Setting Permissions...");
-                            authModal.classList.add('hidden');
-                            checkPermissions(instructorData);
-
-                            // Auto-Restore Room View if exists
-                            const savedRoomCode = localStorage.getItem('vibecoding_room_code');
-                            if (savedRoomCode) {
-                                console.log("Restoring Room Session:", savedRoomCode);
-                                const roomInfo = document.getElementById('room-info');
-                                const displayRoomCode = document.getElementById('display-room-code');
-                                const createContainer = document.getElementById('create-room-container');
-                                const dashboardContent = document.getElementById('dashboard-content');
-
-                                // Restore UI
-                                createContainer.classList.add('hidden');
-                                roomInfo.classList.remove('hidden');
-                                dashboardContent.classList.remove('hidden');
-                                displayRoomCode.textContent = savedRoomCode;
-
-                                // Re-subscribe locally using the existing updateDashboard logic if available, 
-                                // or we need to redefine the callback here. 
-                                // Since updateDashboard is inside createBtn scope, we can't mistakenly access it if it's not global.
-                                // Wait, updateDashboard IS inside createBtn scope. That's a problem. 
-                                // We need to move updateDashboard out or duplicate the logic here.
-                                // Duplicating logic for robustness:
-                                subscribeToRoom(savedRoomCode, (data) => {
-                                    const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
-                                    currentStudents = users;
-                                    renderTransposedHeatmap(users);
-                                });
-                            }
+                await removeInstructor(email);
+                navInstBtn.click(); // Reload
+            } catch (e) {
+                alert(e.message);
+            }
+        }
+    };
 
-                        } else {
-                            console.warn("User logged in but not an instructor.");
-                            // Show unauthorized message
-                            authErrorMsg.textContent = "此帳號無講師權限";
-                            authErrorMsg.classList.remove('hidden');
-                            authModal.classList.remove('hidden'); // Ensure modal stays up
+    // Auto Check Auth (Persistence)
+    // We rely on Firebase Auth state observer instead of session storage for security?
+    // Or we can just check if user is already signed in.
+    import("../services/firebase.js").then(async ({ auth }) => {
+        // Handle Redirect Result first
+        try {
+            console.log("Initializing Auth Check...");
+            const { handleRedirectResult } = await import("../services/auth.js");
+            const redirectUser = await handleRedirectResult();
+            if (redirectUser) console.log("Redirect User Found:", redirectUser.email);
+        } catch (e) { console.warn("Redirect check failed", e); }
+
+        auth.onAuthStateChanged(async (user) => {
+            console.log("Auth State Changed to:", user ? user.email : "Logged Out");
+            if (user) {
+                try {
+                    console.log("Checking permissions for:", user.email);
+                    const instructorData = await checkInstructorPermission(user);
+                    console.log("Permission Result:", instructorData);
+
+                    if (instructorData) {
+                        console.log("Hiding Modal and Setting Permissions...");
+                        authModal.classList.add('hidden');
+                        checkPermissions(instructorData);
+
+                        // Auto-Restore Room View if exists
+                        const savedRoomCode = localStorage.getItem('vibecoding_room_code');
+                        if (savedRoomCode) {
+                            console.log("Restoring Room Session:", savedRoomCode);
+                            const roomInfo = document.getElementById('room-info');
+                            const displayRoomCode = document.getElementById('display-room-code');
+                            const createContainer = document.getElementById('create-room-container');
+                            const dashboardContent = document.getElementById('dashboard-content');
+
+                            // Restore UI
+                            createContainer.classList.add('hidden');
+                            roomInfo.classList.remove('hidden');
+                            dashboardContent.classList.remove('hidden');
+                            displayRoomCode.textContent = savedRoomCode;
+
+                            // Re-subscribe locally using the existing updateDashboard logic if available, 
+                            // or we need to redefine the callback here. 
+                            // Since updateDashboard is inside createBtn scope, we can't mistakenly access it if it's not global.
+                            // Wait, updateDashboard IS inside createBtn scope. That's a problem. 
+                            // We need to move updateDashboard out or duplicate the logic here.
+                            // Duplicating logic for robustness:
+                            subscribeToRoom(savedRoomCode, (data) => {
+                                const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
+                                currentStudents = users;
+                                renderTransposedHeatmap(users);
+                            });
                         }
-                    } catch (e) {
-                        console.error("Permission Check Failed:", e);
-                        authErrorMsg.textContent = "權限檢查失敗: " + e.message;
+
+                    } else {
+                        console.warn("User logged in but not an instructor.");
+                        // Show unauthorized message
+                        authErrorMsg.textContent = "此帳號無講師權限";
                         authErrorMsg.classList.remove('hidden');
+                        authModal.classList.remove('hidden'); // Ensure modal stays up
                     }
-                } else {
-                    authModal.classList.remove('hidden');
+                } catch (e) {
+                    console.error("Permission Check Failed:", e);
+                    authErrorMsg.textContent = "權限檢查失敗: " + e.message;
+                    authErrorMsg.classList.remove('hidden');
                 }
-            });
+            } else {
+                authModal.classList.remove('hidden');
+            }
         });
+    });
 
-        // Define Kick Function globally (robust against auth flow)
-        window.confirmKick = async (userId, nickname) => {
-            if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
-                try {
-                    const { removeUser } = await import("../services/classroom.js");
-                    await removeUser(userId);
-                    // UI will update automatically via subscribeToRoom
-                } catch (e) {
-                    console.error("Kick failed:", e);
-                    alert("移除失敗");
-                }
+    // Define Kick Function globally (robust against auth flow)
+    window.confirmKick = async (userId, nickname) => {
+        if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
+            try {
+                const { removeUser } = await import("../services/classroom.js");
+                await removeUser(userId);
+                // UI will update automatically via subscribeToRoom
+            } catch (e) {
+                console.error("Kick failed:", e);
+                alert("移除失敗");
             }
-        };
+        }
+    };
 
 
-        // Snapshot Logic
+    // Snapshot Logic
+    // Snapshot Logic
+    if (snapshotBtn) {
         snapshotBtn.addEventListener('click', async () => {
             if (isSnapshotting || typeof htmlToImage === 'undefined') {
                 if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
@@ -947,8 +950,10 @@ export function setupInstructorEvents() {
                 }
             }, 600); // Slight delay for emojis to appear
         });
+    }
 
-        // Group Photo Logic
+    // Group Photo Logic
+    if (groupPhotoBtn) {
         groupPhotoBtn.addEventListener('click', () => {
             const modal = document.getElementById('group-photo-modal');
             const container = document.getElementById('group-photo-container');
@@ -1130,68 +1135,69 @@ export function setupInstructorEvents() {
 
             modal.classList.remove('hidden');
         });
+    }
 
-        // Helper: Drag & Drop Logic
-        function setupDraggable(el, container) {
-            let isDragging = false;
-            let startX, startY, initialLeft, initialTop;
+    // Helper: Drag & Drop Logic
+    function setupDraggable(el, container) {
+        let isDragging = false;
+        let startX, startY, initialLeft, initialTop;
 
-            el.addEventListener('mousedown', (e) => {
-                isDragging = true;
-                startX = e.clientX;
-                startY = e.clientY;
+        el.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            startX = e.clientX;
+            startY = e.clientY;
 
-                // Disable transition during drag for responsiveness
-                el.style.transition = 'none';
-                el.style.zIndex = 100; // Bring to front
+            // Disable transition during drag for responsiveness
+            el.style.transition = 'none';
+            el.style.zIndex = 100; // Bring to front
 
-                // Convert current computed position to fixed pixels if relying on calc
-                const rect = el.getBoundingClientRect();
-                const containerRect = container.getBoundingClientRect();
+            // Convert current computed position to fixed pixels if relying on calc
+            const rect = el.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
 
-                // Calculate position relative to container
-                // The current transform is translate(-50%, -50%). 
-                // We want to set left/top such that the center remains under the mouse offset, 
-                // but for simplicity, let's just use current offsetLeft/Top if possible, 
-                // OR robustly recalculate from rects.
+            // Calculate position relative to container
+            // The current transform is translate(-50%, -50%). 
+            // We want to set left/top such that the center remains under the mouse offset, 
+            // but for simplicity, let's just use current offsetLeft/Top if possible, 
+            // OR robustly recalculate from rects.
 
-                // Current center point relative to container:
-                const centerX = rect.left - containerRect.left + rect.width / 2;
-                const centerY = rect.top - containerRect.top + rect.height / 2;
+            // Current center point relative to container:
+            const centerX = rect.left - containerRect.left + rect.width / 2;
+            const centerY = rect.top - containerRect.top + rect.height / 2;
 
-                // Set explicit pixel values replacing calc()
-                el.style.left = `${centerX}px`;
-                el.style.top = `${centerY}px`;
+            // Set explicit pixel values replacing calc()
+            el.style.left = `${centerX}px`;
+            el.style.top = `${centerY}px`;
 
-                initialLeft = centerX;
-                initialTop = centerY;
-            });
+            initialLeft = centerX;
+            initialTop = centerY;
+        });
 
-            window.addEventListener('mousemove', (e) => {
-                if (!isDragging) return;
-                e.preventDefault();
+        window.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            e.preventDefault();
 
-                const dx = e.clientX - startX;
-                const dy = e.clientY - startY;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
 
-                el.style.left = `${initialLeft + dx}px`;
-                el.style.top = `${initialTop + dy}px`;
-            });
+            el.style.left = `${initialLeft + dx}px`;
+            el.style.top = `${initialTop + dy}px`;
+        });
 
-            window.addEventListener('mouseup', () => {
-                if (isDragging) {
-                    isDragging = false;
-                    el.style.transition = ''; // Re-enable hover effects
-                    el.style.zIndex = ''; // Restore z-index rule (or let hover take over)
-                }
-            });
-        }
+        window.addEventListener('mouseup', () => {
+            if (isDragging) {
+                isDragging = false;
+                el.style.transition = ''; // Re-enable hover effects
+                el.style.zIndex = ''; // Restore z-index rule (or let hover take over)
+            }
+        });
+    }
 
-        // Add float animation style if not exists
-        if (!document.getElementById('anim-float')) {
-            const style = document.createElement('style');
-            style.id = 'anim-float';
-            style.innerHTML = `
+    // Add float animation style if not exists
+    if (!document.getElementById('anim-float')) {
+        const style = document.createElement('style');
+        style.id = 'anim-float';
+        style.innerHTML = `
             @keyframes float {
 
                 0 %, 100 % { transform: translateY(0) scale(1); }
@@ -1199,234 +1205,234 @@ export function setupInstructorEvents() {
 }
 }
             `;
-            document.head.appendChild(style);
-        }
-
-        // Gallery Logic
-        document.getElementById('btn-open-gallery').addEventListener('click', () => {
-            window.open('monster_preview.html', '_blank');
-        });
+        document.head.appendChild(style);
+    }
 
-        // Logout Logic
-        document.getElementById('logout-btn').addEventListener('click', async () => {
-            if (confirm('確定要登出講師模式嗎？ (將會回到首頁)')) {
-                await signOutUser();
-                sessionStorage.removeItem('vibecoding_instructor_in_room');
-                sessionStorage.removeItem('vibecoding_admin_referer');
-                window.location.hash = '';
-                window.location.reload();
-            }
-        });
+    // Gallery Logic
+    document.getElementById('btn-open-gallery').addEventListener('click', () => {
+        window.open('monster_preview.html', '_blank');
+    });
+
+    // Logout Logic
+    document.getElementById('logout-btn').addEventListener('click', async () => {
+        if (confirm('確定要登出講師模式嗎？ (將會回到首頁)')) {
+            await signOutUser();
+            sessionStorage.removeItem('vibecoding_instructor_in_room');
+            sessionStorage.removeItem('vibecoding_admin_referer');
+            window.location.hash = '';
+            window.location.reload();
+        }
+    });
 
-        // Check Previous Session (Handled by onAuthStateChanged now)
-        // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
-        //     authModal.classList.add('hidden');
-        // }
+    // Check Previous Session (Handled by onAuthStateChanged now)
+    // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
+    //     authModal.classList.add('hidden');
+    // }
 
-        // Check Active Room State
-        const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');
-        if (activeRoom === 'true' && savedRoomCode) {
-            enterRoom(savedRoomCode);
-        }
+    // Check Active Room State
+    const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');
+    if (activeRoom === 'true' && savedRoomCode) {
+        enterRoom(savedRoomCode);
+    }
 
-        // Module-level variable to track subscription (Moved to top)
+    // Module-level variable to track subscription (Moved to top)
 
-        function enterRoom(roomCode) {
-            createContainer.classList.add('hidden');
-            roomInfo.classList.remove('hidden');
-            dashboardContent.classList.remove('hidden');
-            document.getElementById('group-photo-btn').classList.remove('hidden'); // Show photo button
-            displayRoomCode.textContent = roomCode;
-            localStorage.setItem('vibecoding_room_code', roomCode);
-            sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
+    function enterRoom(roomCode) {
+        createContainer.classList.add('hidden');
+        roomInfo.classList.remove('hidden');
+        dashboardContent.classList.remove('hidden');
+        document.getElementById('group-photo-btn').classList.remove('hidden'); // Show photo button
+        displayRoomCode.textContent = roomCode;
+        localStorage.setItem('vibecoding_room_code', roomCode);
+        sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
 
-            // Unsubscribe previous if any
-            if (roomUnsubscribe) roomUnsubscribe();
+        // Unsubscribe previous if any
+        if (roomUnsubscribe) roomUnsubscribe();
 
-            // Subscribe to updates
-            roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
-                currentStudents = students;
-                renderTransposedHeatmap(students);
-            });
-        }
+        // Subscribe to updates
+        roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
+            currentStudents = students;
+            renderTransposedHeatmap(students);
+        });
+    }
 
-        // Leave Room Logic
-        document.getElementById('leave-room-btn').addEventListener('click', () => {
-            if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
-                // Unsubscribe
-                if (roomUnsubscribe) {
-                    roomUnsubscribe();
-                    roomUnsubscribe = null;
-                }
+    // Leave Room Logic
+    document.getElementById('leave-room-btn').addEventListener('click', () => {
+        if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
+            // Unsubscribe
+            if (roomUnsubscribe) {
+                roomUnsubscribe();
+                roomUnsubscribe = null;
+            }
 
-                // UI Reset
-                createContainer.classList.remove('hidden');
-                roomInfo.classList.add('hidden');
-                dashboardContent.classList.add('hidden');
-                document.getElementById('group-photo-btn').classList.add('hidden'); // Hide photo button
+            // UI Reset
+            createContainer.classList.remove('hidden');
+            roomInfo.classList.add('hidden');
+            dashboardContent.classList.add('hidden');
+            document.getElementById('group-photo-btn').classList.add('hidden'); // Hide photo button
 
-                // Clear Data Display
-                document.getElementById('heatmap-body').innerHTML = '<tr><td colspan="100" class="text-center py-10 text-gray-500">等待資料載入...</td></tr>';
-                document.getElementById('heatmap-header').innerHTML = '<th class="p-3 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[150px]">學員 / 關卡</th>';
+            // Clear Data Display
+            document.getElementById('heatmap-body').innerHTML = '<tr><td colspan="100" class="text-center py-10 text-gray-500">等待資料載入...</td></tr>';
+            document.getElementById('heatmap-header').innerHTML = '<th class="p-3 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[150px]">學員 / 關卡</th>';
 
-                // State Clear
-                sessionStorage.removeItem('vibecoding_instructor_in_room');
-                localStorage.removeItem('vibecoding_room_code');
-            }
-        });
+            // State Clear
+            sessionStorage.removeItem('vibecoding_instructor_in_room');
+            localStorage.removeItem('vibecoding_room_code');
+        }
+    });
 
-        // Modal Events
-        window.showBroadcastModal = (userId, challengeId) => {
-            const modal = document.getElementById('broadcast-modal');
-            const content = document.getElementById('broadcast-content');
+    // Modal Events
+    window.showBroadcastModal = (userId, challengeId) => {
+        const modal = document.getElementById('broadcast-modal');
+        const content = document.getElementById('broadcast-content');
 
-            // Find Data
-            const student = currentStudents.find(s => s.id === userId);
-            if (!student) return alert('找不到學員資料');
+        // Find Data
+        const student = currentStudents.find(s => s.id === userId);
+        if (!student) return alert('找不到學員資料');
 
-            const p = student.progress ? student.progress[challengeId] : null;
-            if (!p) return alert('找不到該作品資料');
+        const p = student.progress ? student.progress[challengeId] : null;
+        if (!p) return alert('找不到該作品資料');
 
-            const challenge = cachedChallenges.find(c => c.id === challengeId);
-            const title = challenge ? challenge.title : '未知題目';
+        const challenge = cachedChallenges.find(c => c.id === challengeId);
+        const title = challenge ? challenge.title : '未知題目';
 
-            // Populate UI
-            document.getElementById('broadcast-avatar').textContent = student.nickname[0] || '?';
-            document.getElementById('broadcast-author').textContent = student.nickname;
-            document.getElementById('broadcast-challenge').textContent = title;
-            document.getElementById('broadcast-prompt').textContent = p.prompt || '(無內容)';
+        // Populate UI
+        document.getElementById('broadcast-avatar').textContent = student.nickname[0] || '?';
+        document.getElementById('broadcast-author').textContent = student.nickname;
+        document.getElementById('broadcast-challenge').textContent = title;
+        document.getElementById('broadcast-prompt').textContent = p.prompt || '(無內容)';
 
-            // Store IDs for Actions (Reject/BroadcastAll)
-            modal.dataset.userId = userId;
-            modal.dataset.challengeId = challengeId;
+        // Store IDs for Actions (Reject/BroadcastAll)
+        modal.dataset.userId = userId;
+        modal.dataset.challengeId = challengeId;
 
-            // Show
-            modal.classList.remove('hidden');
-            setTimeout(() => {
-                content.classList.remove('scale-95', 'opacity-0');
-                content.classList.add('opacity-100', 'scale-100');
-            }, 10);
-        };
+        // Show
+        modal.classList.remove('hidden');
+        setTimeout(() => {
+            content.classList.remove('scale-95', 'opacity-0');
+            content.classList.add('opacity-100', 'scale-100');
+        }, 10);
+    };
 
-        window.closeBroadcast = () => {
-            const modal = document.getElementById('broadcast-modal');
-            const content = document.getElementById('broadcast-content');
-            content.classList.remove('opacity-100', 'scale-100');
-            content.classList.add('scale-95', 'opacity-0');
-            setTimeout(() => modal.classList.add('hidden'), 300);
-        };
+    window.closeBroadcast = () => {
+        const modal = document.getElementById('broadcast-modal');
+        const content = document.getElementById('broadcast-content');
+        content.classList.remove('opacity-100', 'scale-100');
+        content.classList.add('scale-95', 'opacity-0');
+        setTimeout(() => modal.classList.add('hidden'), 300);
+    };
 
-        window.openStage = (prompt, author) => {
-            document.getElementById('broadcast-content').classList.add('hidden');
-            const stage = document.getElementById('stage-view');
-            stage.classList.remove('hidden');
-            document.getElementById('stage-prompt').textContent = cleanText(prompt || '');
-            document.getElementById('stage-author').textContent = author;
-        };
+    window.openStage = (prompt, author) => {
+        document.getElementById('broadcast-content').classList.add('hidden');
+        const stage = document.getElementById('stage-view');
+        stage.classList.remove('hidden');
+        document.getElementById('stage-prompt').textContent = cleanText(prompt || '');
+        document.getElementById('stage-author').textContent = author;
+    };
 
-        window.closeStage = () => {
-            document.getElementById('stage-view').classList.add('hidden');
-            document.getElementById('broadcast-content').classList.remove('hidden');
-        };
+    window.closeStage = () => {
+        document.getElementById('stage-view').classList.add('hidden');
+        document.getElementById('broadcast-content').classList.remove('hidden');
+    };
 
-        document.getElementById('btn-show-stage').addEventListener('click', () => {
-            const prompt = document.getElementById('broadcast-prompt').textContent;
-            const author = document.getElementById('broadcast-author').textContent;
-            window.openStage(prompt, author);
-        });
+    document.getElementById('btn-show-stage').addEventListener('click', () => {
+        const prompt = document.getElementById('broadcast-prompt').textContent;
+        const author = document.getElementById('broadcast-author').textContent;
+        window.openStage(prompt, author);
+    });
 
-        // Reject Logic
-        document.getElementById('btn-reject-task').addEventListener('click', async () => {
-            if (!confirm('確定要退回此題目讓學員重做嗎？')) return;
+    // Reject Logic
+    document.getElementById('btn-reject-task').addEventListener('click', async () => {
+        if (!confirm('確定要退回此題目讓學員重做嗎？')) return;
 
-            // We need student ID (userId) and Challenge ID.
-            // Currently showBroadcastModal only receives nickname, title, prompt.
-            // We need to attach data-userid and data-challengeid to the modal.
-            const modal = document.getElementById('broadcast-modal');
-            const userId = modal.dataset.userId;
-            const challengeId = modal.dataset.challengeId;
-            const roomCode = localStorage.getItem('vibecoding_room_code');
+        // We need student ID (userId) and Challenge ID.
+        // Currently showBroadcastModal only receives nickname, title, prompt.
+        // We need to attach data-userid and data-challengeid to the modal.
+        const modal = document.getElementById('broadcast-modal');
+        const userId = modal.dataset.userId;
+        const challengeId = modal.dataset.challengeId;
+        const roomCode = localStorage.getItem('vibecoding_room_code');
 
-            if (userId && challengeId && roomCode) {
-                try {
-                    await resetProgress(userId, roomCode, challengeId);
-                    alert('已成功退回，學員可重新作答');
-                    // Close modal
-                    window.closeBroadcast();
-                } catch (e) {
-                    console.error('退回失敗:', e);
-                    alert('退回失敗: ' + e.message);
-                }
+        if (userId && challengeId && roomCode) {
+            try {
+                await resetProgress(userId, roomCode, challengeId);
+                alert('已成功退回，學員可重新作答');
+                // Close modal
+                window.closeBroadcast();
+            } catch (e) {
+                console.error('退回失敗:', e);
+                alert('退回失敗: ' + e.message);
             }
-        });
-        // Prompt Viewer Logic
-        window.openPromptList = (type, id, title) => {
-            const modal = document.getElementById('prompt-list-modal');
-            const container = document.getElementById('prompt-list-container');
-            const titleEl = document.getElementById('prompt-list-title');
+        }
+    });
+    // Prompt Viewer Logic
+    window.openPromptList = (type, id, title) => {
+        const modal = document.getElementById('prompt-list-modal');
+        const container = document.getElementById('prompt-list-container');
+        const titleEl = document.getElementById('prompt-list-title');
 
-            titleEl.textContent = type === 'student' ? `${title} 的所有提示詞` : `題目：${title} 的所有作品`;
+        titleEl.textContent = type === 'student' ? `${title} 的所有提示詞` : `題目：${title} 的所有作品`;
 
-            // Reset Anonymous Toggle in List View
-            const anonCheck = document.getElementById('list-anonymous-toggle');
-            if (anonCheck) anonCheck.checked = false;
+        // Reset Anonymous Toggle in List View
+        const anonCheck = document.getElementById('list-anonymous-toggle');
+        if (anonCheck) anonCheck.checked = false;
 
-            container.innerHTML = '';
-            modal.classList.remove('hidden');
+        container.innerHTML = '';
+        modal.classList.remove('hidden');
 
-            // Collect Prompts
-            let prompts = [];
-            // Fix: Reset selection when opening new list to prevent cross-contamination
-            selectedPrompts = [];
-            updateCompareButton();
-
-            if (type === 'student') {
-                const student = currentStudents.find(s => s.id === id);
-                if (student && student.progress) {
-                    prompts = Object.entries(student.progress)
-                        .filter(([_, p]) => p.status === 'completed' && p.prompt)
-                        .map(([challengeId, p]) => {
-                            const challenge = cachedChallenges.find(c => c.id === challengeId);
-                            return {
-                                id: `${student.id}_${challengeId}`,
-                                title: challenge ? challenge.title : '未知題目',
-                                prompt: p.prompt,
-                                author: student.nickname,
-                                studentId: student.id,
-                                challengeId: challengeId,
-                                time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
-                            };
+        // Collect Prompts
+        let prompts = [];
+        // Fix: Reset selection when opening new list to prevent cross-contamination
+        selectedPrompts = [];
+        updateCompareButton();
+
+        if (type === 'student') {
+            const student = currentStudents.find(s => s.id === id);
+            if (student && student.progress) {
+                prompts = Object.entries(student.progress)
+                    .filter(([_, p]) => p.status === 'completed' && p.prompt)
+                    .map(([challengeId, p]) => {
+                        const challenge = cachedChallenges.find(c => c.id === challengeId);
+                        return {
+                            id: `${student.id}_${challengeId}`,
+                            title: challenge ? challenge.title : '未知題目',
+                            prompt: p.prompt,
+                            author: student.nickname,
+                            studentId: student.id,
+                            challengeId: challengeId,
+                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
+                        };
+                    });
+            }
+        } else if (type === 'challenge') {
+            currentStudents.forEach(student => {
+                if (student.progress && student.progress[id]) {
+                    const p = student.progress[id];
+                    if (p.status === 'completed' && p.prompt) {
+                        prompts.push({
+                            id: `${student.id}_${id}`,
+                            title: student.nickname, // When viewing challenge, title is student name
+                            prompt: p.prompt,
+                            author: student.nickname,
+                            studentId: student.id,
+                            challengeId: id,
+                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
                         });
-                }
-            } else if (type === 'challenge') {
-                currentStudents.forEach(student => {
-                    if (student.progress && student.progress[id]) {
-                        const p = student.progress[id];
-                        if (p.status === 'completed' && p.prompt) {
-                            prompts.push({
-                                id: `${student.id}_${id}`,
-                                title: student.nickname, // When viewing challenge, title is student name
-                                prompt: p.prompt,
-                                author: student.nickname,
-                                studentId: student.id,
-                                challengeId: id,
-                                time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
-                            });
-                        }
                     }
-                });
-            }
+                }
+            });
+        }
 
-            if (prompts.length === 0) {
-                container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-10">無資料</div>';
-                return;
-            }
+        if (prompts.length === 0) {
+            container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-10">無資料</div>';
+            return;
+        }
 
-            prompts.forEach(p => {
-                const card = document.createElement('div');
-                // Reduced height (h-64 -> h-48) and padding, but larger text inside
-                card.className = 'bg-gray-800 rounded-xl p-3 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-48 group';
-                card.innerHTML = `
+        prompts.forEach(p => {
+            const card = document.createElement('div');
+            // Reduced height (h-64 -> h-48) and padding, but larger text inside
+            card.className = 'bg-gray-800 rounded-xl p-3 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-48 group';
+            card.innerHTML = `
             <div class="flex justify-between items-start mb-1.5">
                 <h3 class="font-bold text-white text-base truncate w-3/4" title="${p.title}">${p.title}</h3>
                 <!-- Checkbox -->
@@ -1447,186 +1453,186 @@ export function setupInstructorEvents() {
                 </div>
             </div>
             `;
-                container.appendChild(card);
-            });
-        };
-
-        // Helper Actions
-        window.confirmReset = async (userId, challengeId, title) => {
-            console.log('🔵 confirmReset called');
-            console.log('  userId:', userId);
-            console.log('  challengeId:', challengeId);
-            console.log('  title:', title);
-            console.log('  typeof resetProgress:', typeof resetProgress);
-
-            if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
-                console.log('✅ User confirmed reset');
-                const roomCode = localStorage.getItem('vibecoding_room_code');
-                console.log('  roomCode:', roomCode);
-
-                if (userId && challengeId && roomCode) {
-                    console.log('✅ All parameters valid, calling resetProgress...');
-                    try {
-                        // Use already imported resetProgress function
-                        await resetProgress(userId, roomCode, challengeId);
-                        console.log('✅ resetProgress completed successfully');
-                        alert("已退回");
-                        // close modal to refresh data context
-                        document.getElementById('prompt-list-modal').classList.add('hidden');
-                        console.log('✅ Modal closed');
-                    } catch (e) {
-                        console.error("❌ 退回失敗:", e);
-                        console.error("Error stack:", e.stack);
-                        alert("退回失敗: " + e.message);
-                    }
-                } else {
-                    console.error('❌ Missing required parameters:');
-                    console.error('  userId:', userId, '(valid:', !!userId, ')');
-                    console.error('  challengeId:', challengeId, '(valid:', !!challengeId, ')');
-                    console.error('  roomCode:', roomCode, '(valid:', !!roomCode, ')');
-                    alert('缺少必要參數，無法執行退回操作');
-                }
-            } else {
-                console.log('❌ User cancelled reset');
-            }
-        };
-
-        window.broadcastPrompt = (userId, challengeId) => {
-            window.showBroadcastModal(userId, challengeId);
-        };
+            container.appendChild(card);
+        });
+    };
 
-        // Selection Logic
-        let selectedPrompts = []; // Stores IDs
+    // Helper Actions
+    window.confirmReset = async (userId, challengeId, title) => {
+        console.log('🔵 confirmReset called');
+        console.log('  userId:', userId);
+        console.log('  challengeId:', challengeId);
+        console.log('  title:', title);
+        console.log('  typeof resetProgress:', typeof resetProgress);
 
-        window.handlePromptSelection = (checkbox) => {
-            const id = checkbox.dataset.id;
+        if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
+            console.log('✅ User confirmed reset');
+            const roomCode = localStorage.getItem('vibecoding_room_code');
+            console.log('  roomCode:', roomCode);
 
-            if (checkbox.checked) {
-                if (selectedPrompts.length >= 3) {
-                    checkbox.checked = false;
-                    alert('最多只能選擇 3 個提示詞進行比較');
-                    return;
+            if (userId && challengeId && roomCode) {
+                console.log('✅ All parameters valid, calling resetProgress...');
+                try {
+                    // Use already imported resetProgress function
+                    await resetProgress(userId, roomCode, challengeId);
+                    console.log('✅ resetProgress completed successfully');
+                    alert("已退回");
+                    // close modal to refresh data context
+                    document.getElementById('prompt-list-modal').classList.add('hidden');
+                    console.log('✅ Modal closed');
+                } catch (e) {
+                    console.error("❌ 退回失敗:", e);
+                    console.error("Error stack:", e.stack);
+                    alert("退回失敗: " + e.message);
                 }
-                selectedPrompts.push(id);
             } else {
-                selectedPrompts = selectedPrompts.filter(pid => pid !== id);
+                console.error('❌ Missing required parameters:');
+                console.error('  userId:', userId, '(valid:', !!userId, ')');
+                console.error('  challengeId:', challengeId, '(valid:', !!challengeId, ')');
+                console.error('  roomCode:', roomCode, '(valid:', !!roomCode, ')');
+                alert('缺少必要參數，無法執行退回操作');
             }
-            updateCompareButton();
-        };
+        } else {
+            console.log('❌ User cancelled reset');
+        }
+    };
 
-        function updateCompareButton() {
-            const btn = document.getElementById('btn-compare-prompts');
-            if (!btn) return;
+    window.broadcastPrompt = (userId, challengeId) => {
+        window.showBroadcastModal(userId, challengeId);
+    };
 
-            const count = selectedPrompts.length;
-            const span = btn.querySelector('span');
-            if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
+    // Selection Logic
+    let selectedPrompts = []; // Stores IDs
 
-            if (count > 0) {
-                btn.disabled = false;
-                btn.classList.remove('opacity-50', 'cursor-not-allowed');
-            } else {
-                btn.disabled = true;
-                btn.classList.add('opacity-50', 'cursor-not-allowed');
+    window.handlePromptSelection = (checkbox) => {
+        const id = checkbox.dataset.id;
+
+        if (checkbox.checked) {
+            if (selectedPrompts.length >= 3) {
+                checkbox.checked = false;
+                alert('最多只能選擇 3 個提示詞進行比較');
+                return;
             }
+            selectedPrompts.push(id);
+        } else {
+            selectedPrompts = selectedPrompts.filter(pid => pid !== id);
         }
-        // Comparison Logic
-        const compareBtn = document.getElementById('btn-compare-prompts');
-        if (compareBtn) {
-            compareBtn.addEventListener('click', () => {
-                const dataToCompare = [];
-                selectedPrompts.forEach(fullId => {
-                    const lastUnderscore = fullId.lastIndexOf('_');
-                    const studentId = fullId.substring(0, lastUnderscore);
-                    const challengeId = fullId.substring(lastUnderscore + 1);
-
-                    const student = currentStudents.find(s => s.id === studentId);
-                    if (student && student.progress && student.progress[challengeId]) {
-                        const p = student.progress[challengeId];
-                        const challenge = cachedChallenges.find(c => c.id === challengeId);
+        updateCompareButton();
+    };
 
-                        dataToCompare.push({
-                            title: challenge ? challenge.title : '未知',
-                            author: student.nickname,
-                            prompt: p.prompt,
-                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleTimeString() : ''
-                        });
-                    }
-                });
+    function updateCompareButton() {
+        const btn = document.getElementById('btn-compare-prompts');
+        if (!btn) return;
 
-                const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
-                openComparisonView(dataToCompare, isAnon);
-            });
-        }
+        const count = selectedPrompts.length;
+        const span = btn.querySelector('span');
+        if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
 
-        let isAnonymous = false;
-
-        window.toggleAnonymous = (btn) => {
-            isAnonymous = !isAnonymous;
-            btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
-            btn.classList.toggle('bg-gray-700');
-            btn.classList.toggle('bg-purple-700');
-
-            // Update DOM
-            document.querySelectorAll('.comparison-author').forEach(el => {
-                if (isAnonymous) {
-                    el.dataset.original = el.textContent;
-                    el.textContent = '學員';
-                    el.classList.add('blur-sm'); // Optional Effect
-                    setTimeout(() => el.classList.remove('blur-sm'), 300);
-                } else {
-                    if (el.dataset.original) el.textContent = el.dataset.original;
+        if (count > 0) {
+            btn.disabled = false;
+            btn.classList.remove('opacity-50', 'cursor-not-allowed');
+        } else {
+            btn.disabled = true;
+            btn.classList.add('opacity-50', 'cursor-not-allowed');
+        }
+    }
+    // Comparison Logic
+    const compareBtn = document.getElementById('btn-compare-prompts');
+    if (compareBtn) {
+        compareBtn.addEventListener('click', () => {
+            const dataToCompare = [];
+            selectedPrompts.forEach(fullId => {
+                const lastUnderscore = fullId.lastIndexOf('_');
+                const studentId = fullId.substring(0, lastUnderscore);
+                const challengeId = fullId.substring(lastUnderscore + 1);
+
+                const student = currentStudents.find(s => s.id === studentId);
+                if (student && student.progress && student.progress[challengeId]) {
+                    const p = student.progress[challengeId];
+                    const challenge = cachedChallenges.find(c => c.id === challengeId);
+
+                    dataToCompare.push({
+                        title: challenge ? challenge.title : '未知',
+                        author: student.nickname,
+                        prompt: p.prompt,
+                        time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleTimeString() : ''
+                    });
                 }
             });
-        };
 
-        window.openComparisonView = (items, initialAnonymous = false) => {
-            const modal = document.getElementById('comparison-modal');
-            const grid = document.getElementById('comparison-grid');
+            const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
+            openComparisonView(dataToCompare, isAnon);
+        });
+    }
 
-            // Apply Anonymous State
-            isAnonymous = initialAnonymous;
-            const anonBtn = document.getElementById('btn-anonymous-toggle');
+    let isAnonymous = false;
+
+    window.toggleAnonymous = (btn) => {
+        isAnonymous = !isAnonymous;
+        btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
+        btn.classList.toggle('bg-gray-700');
+        btn.classList.toggle('bg-purple-700');
+
+        // Update DOM
+        document.querySelectorAll('.comparison-author').forEach(el => {
+            if (isAnonymous) {
+                el.dataset.original = el.textContent;
+                el.textContent = '學員';
+                el.classList.add('blur-sm'); // Optional Effect
+                setTimeout(() => el.classList.remove('blur-sm'), 300);
+            } else {
+                if (el.dataset.original) el.textContent = el.dataset.original;
+            }
+        });
+    };
 
-            // Update Toggle UI to match state
-            if (anonBtn) {
-                if (isAnonymous) {
-                    anonBtn.textContent = '🙈 顯示姓名';
-                    anonBtn.classList.add('bg-purple-700');
-                    anonBtn.classList.remove('bg-gray-700');
-                } else {
-                    anonBtn.textContent = '👀 隱藏姓名';
-                    anonBtn.classList.remove('bg-purple-700');
-                    anonBtn.classList.add('bg-gray-700');
-                }
+    window.openComparisonView = (items, initialAnonymous = false) => {
+        const modal = document.getElementById('comparison-modal');
+        const grid = document.getElementById('comparison-grid');
+
+        // Apply Anonymous State
+        isAnonymous = initialAnonymous;
+        const anonBtn = document.getElementById('btn-anonymous-toggle');
+
+        // Update Toggle UI to match state
+        if (anonBtn) {
+            if (isAnonymous) {
+                anonBtn.textContent = '🙈 顯示姓名';
+                anonBtn.classList.add('bg-purple-700');
+                anonBtn.classList.remove('bg-gray-700');
+            } else {
+                anonBtn.textContent = '👀 隱藏姓名';
+                anonBtn.classList.remove('bg-purple-700');
+                anonBtn.classList.add('bg-gray-700');
             }
+        }
 
-            // Setup Grid Rows (Vertical Stacking)
-            let rowClass = 'grid-rows-1';
-            if (items.length === 2) rowClass = 'grid-rows-2';
-            if (items.length === 3) rowClass = 'grid-rows-3';
-
-            grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
-            grid.innerHTML = '';
-
-            items.forEach(item => {
-                const col = document.createElement('div');
-                // Check overflow-hidden to keep it contained, use flex-row for compact header + content
-                col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
-
-                // Logic for anonymous
-                let displayAuthor = item.author;
-                let blurClass = '';
-
-                if (isAnonymous) {
-                    displayAuthor = '學員';
-                    blurClass = 'blur-sm'; // Initial blur
-                    // Auto remove blur after delay if needed, or keep it? 
-                    // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
-                    // The toggle logic uses dataset.original. We need to set it here too.
-                }
+        // Setup Grid Rows (Vertical Stacking)
+        let rowClass = 'grid-rows-1';
+        if (items.length === 2) rowClass = 'grid-rows-2';
+        if (items.length === 3) rowClass = 'grid-rows-3';
+
+        grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
+        grid.innerHTML = '';
+
+        items.forEach(item => {
+            const col = document.createElement('div');
+            // Check overflow-hidden to keep it contained, use flex-row for compact header + content
+            col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
+
+            // Logic for anonymous
+            let displayAuthor = item.author;
+            let blurClass = '';
+
+            if (isAnonymous) {
+                displayAuthor = '學員';
+                blurClass = 'blur-sm'; // Initial blur
+                // Auto remove blur after delay if needed, or keep it? 
+                // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
+                // The toggle logic uses dataset.original. We need to set it here too.
+            }
 
-                col.innerHTML = `
+            col.innerHTML = `
             <div class="w-48 flex-shrink-0 border-r border-gray-700 pr-4 mr-4 flex flex-col justify-center">
                 <h3 class="text-xl font-bold text-cyan-400 mb-1 comparison-author ${blurClass}" data-original="${item.author}">${displayAuthor}</h3>
                 <p class="text-md text-gray-400 truncate" title="${item.title}">${item.title}</p>
@@ -1635,223 +1641,223 @@ export function setupInstructorEvents() {
             <!-- Prompt Content: Larger Text (text-4xl) -->
             <div class="flex-1 overflow-y-auto font-mono text-green-300 text-3xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar text-left" style="text-align: left !important;">${cleanText(item.prompt)}</div>
             `;
-                grid.appendChild(col);
-
-                // If blurred, remove blur after animation purely for effect, or keep?
-                // User intention "Hidden Name" usually means "Replaced by generic name".
-                // The blur effect in toggle logic was transient.
-                // If we want persistent anonymity, just "學員" is enough.
-                // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
-                // We should replicate that effect if we want consistency, or just skip blur on init.
-                if (isAnonymous) {
-                    const el = col.querySelector('.comparison-author');
-                    setTimeout(() => el.classList.remove('blur-sm'), 300);
-                }
-            });
+            grid.appendChild(col);
+
+            // If blurred, remove blur after animation purely for effect, or keep?
+            // User intention "Hidden Name" usually means "Replaced by generic name".
+            // The blur effect in toggle logic was transient.
+            // If we want persistent anonymity, just "學員" is enough.
+            // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
+            // We should replicate that effect if we want consistency, or just skip blur on init.
+            if (isAnonymous) {
+                const el = col.querySelector('.comparison-author');
+                setTimeout(() => el.classList.remove('blur-sm'), 300);
+            }
+        });
 
-            document.getElementById('prompt-list-modal').classList.add('hidden');
-            modal.classList.remove('hidden');
+        document.getElementById('prompt-list-modal').classList.add('hidden');
+        modal.classList.remove('hidden');
 
-            // Init Canvas (Phase 3)
-            setTimeout(setupCanvas, 100);
-        };
+        // Init Canvas (Phase 3)
+        setTimeout(setupCanvas, 100);
+    };
+
+    window.closeComparison = () => {
+        document.getElementById('comparison-modal').classList.add('hidden');
+        clearCanvas();
+    };
 
-        window.closeComparison = () => {
-            document.getElementById('comparison-modal').classList.add('hidden');
-            clearCanvas();
+    // --- Phase 3 & 6: Annotation Tools ---
+    let canvas, ctx;
+    let isDrawing = false;
+    let currentPenColor = '#ef4444'; // Red default
+    let currentLineWidth = 3;
+    let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
+
+    window.setupCanvas = () => {
+        canvas = document.getElementById('annotation-canvas');
+        const container = document.getElementById('comparison-container');
+        if (!canvas || !container) return;
+
+        ctx = canvas.getContext('2d');
+
+        // Resize
+        const resize = () => {
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = currentLineWidth;
+            ctx.globalCompositeOperation = currentMode;
         };
+        resize();
+        window.addEventListener('resize', resize);
+
+        // Init Size UI & Cursor
+        updateSizeBtnUI();
+        updateCursorStyle();
+
+        // Cursor Logic
+        const cursor = document.getElementById('tool-cursor');
+
+        canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
+        canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
+        canvas.addEventListener('mousemove', (e) => {
+            const { x, y } = getPos(e);
+            cursor.style.left = `${x}px`;
+            cursor.style.top = `${y}px`;
+        });
 
-        // --- Phase 3 & 6: Annotation Tools ---
-        let canvas, ctx;
-        let isDrawing = false;
-        let currentPenColor = '#ef4444'; // Red default
-        let currentLineWidth = 3;
-        let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
-
-        window.setupCanvas = () => {
-            canvas = document.getElementById('annotation-canvas');
-            const container = document.getElementById('comparison-container');
-            if (!canvas || !container) return;
-
-            ctx = canvas.getContext('2d');
-
-            // Resize
-            const resize = () => {
-                canvas.width = container.clientWidth;
-                canvas.height = container.clientHeight;
-                ctx.lineCap = 'round';
-                ctx.lineJoin = 'round';
-                ctx.strokeStyle = currentPenColor;
-                ctx.lineWidth = currentLineWidth;
-                ctx.globalCompositeOperation = currentMode;
-            };
-            resize();
-            window.addEventListener('resize', resize);
-
-            // Init Size UI & Cursor
-            updateSizeBtnUI();
-            updateCursorStyle();
-
-            // Cursor Logic
-            const cursor = document.getElementById('tool-cursor');
-
-            canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
-            canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
-            canvas.addEventListener('mousemove', (e) => {
-                const { x, y } = getPos(e);
-                cursor.style.left = `${x}px`;
-                cursor.style.top = `${y}px`;
-            });
+        // Drawing Events
+        const start = (e) => {
+            isDrawing = true;
+            ctx.beginPath();
 
-            // Drawing Events
-            const start = (e) => {
-                isDrawing = true;
-                ctx.beginPath();
-
-                // Re-apply settings (state might change)
-                ctx.globalCompositeOperation = currentMode;
-                ctx.strokeStyle = currentPenColor;
-                ctx.lineWidth = currentLineWidth;
-
-                const { x, y } = getPos(e);
-                ctx.moveTo(x, y);
-            };
-
-            const move = (e) => {
-                if (!isDrawing) return;
-                const { x, y } = getPos(e);
-                ctx.lineTo(x, y);
-                ctx.stroke();
-            };
-
-            const end = () => {
-                isDrawing = false;
-            };
-
-            canvas.onmousedown = start;
-            canvas.onmousemove = move;
-            canvas.onmouseup = end;
-            canvas.onmouseleave = end;
-
-            // Touch support
-            canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
-            canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
-            canvas.ontouchend = (e) => { e.preventDefault(); end(); };
-        };
+            // Re-apply settings (state might change)
+            ctx.globalCompositeOperation = currentMode;
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = currentLineWidth;
 
-        function getPos(e) {
-            const rect = canvas.getBoundingClientRect();
-            return {
-                x: e.clientX - rect.left,
-                y: e.clientY - rect.top
-            };
-        }
+            const { x, y } = getPos(e);
+            ctx.moveTo(x, y);
+        };
 
-        // Unified Tool Handler
-        window.setPenTool = (tool, color, btn) => {
-            // UI Update
-            document.querySelectorAll('.annotation-tool').forEach(b => {
-                b.classList.remove('ring-white');
-                b.classList.add('ring-transparent');
-            });
-            btn.classList.remove('ring-transparent');
-            btn.classList.add('ring-white');
-
-            if (tool === 'eraser') {
-                currentMode = 'destination-out';
-                // Force larger eraser size (e.g., 3x current size or fixed large)
-                // We'll multiply current selected size by 4 for better UX
-                const multiplier = 4;
-                // Store original explicitly if needed, but currentLineWidth is global. 
-                // We should dynamically adjust context lineWidth during draw, or just hack it here.
-                // Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
-                // Better: Update cursor style only? No, actual draw needs it.
-                // Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
-                // Simpler: Just change it. When user clicks size button, it resets.
-                // But if user clicks Pen back? We need to restore.
-                // Let's rely on setPenTool being called with color.
-                // When "Pen" is clicked, we usually don't call setPenTool with a saved size...
-                // Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
-                // We need to change how draw() uses the width.
-                // BUT, since we don't want to touch draw() deep inside:
-                // We will hijack currentLineWidth.
-                if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
-                currentLineWidth = window.savedPenWidth * 4;
-            } else {
-                currentMode = 'source-over';
-                currentPenColor = color;
-                // Restore pen width
-                if (window.savedPenWidth) {
-                    currentLineWidth = window.savedPenWidth;
-                    window.savedPenWidth = null;
-                }
-            }
-            updateCursorStyle();
+        const move = (e) => {
+            if (!isDrawing) return;
+            const { x, y } = getPos(e);
+            ctx.lineTo(x, y);
+            ctx.stroke();
         };
 
-        // Size Handler
-        window.setPenSize = (size, btn) => {
-            currentLineWidth = size;
-            updateSizeBtnUI();
-            updateCursorStyle();
+        const end = () => {
+            isDrawing = false;
         };
 
-        function updateCursorStyle() {
-            const cursor = document.getElementById('tool-cursor');
-            if (!cursor) return;
+        canvas.onmousedown = start;
+        canvas.onmousemove = move;
+        canvas.onmouseup = end;
+        canvas.onmouseleave = end;
 
-            // Size
-            cursor.style.width = `${currentLineWidth}px`;
-            cursor.style.height = `${currentLineWidth}px`;
+        // Touch support
+        canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
+        canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
+        canvas.ontouchend = (e) => { e.preventDefault(); end(); };
+    };
 
-            // Color
-            if (currentMode === 'destination-out') {
-                // Eraser: White solid
-                cursor.style.backgroundColor = 'white';
-                cursor.style.borderColor = '#999';
-            } else {
-                // Pen: Tool color
-                cursor.style.backgroundColor = currentPenColor;
-                cursor.style.borderColor = 'rgba(255,255,255,0.8)';
+    function getPos(e) {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+
+    // Unified Tool Handler
+    window.setPenTool = (tool, color, btn) => {
+        // UI Update
+        document.querySelectorAll('.annotation-tool').forEach(b => {
+            b.classList.remove('ring-white');
+            b.classList.add('ring-transparent');
+        });
+        btn.classList.remove('ring-transparent');
+        btn.classList.add('ring-white');
+
+        if (tool === 'eraser') {
+            currentMode = 'destination-out';
+            // Force larger eraser size (e.g., 3x current size or fixed large)
+            // We'll multiply current selected size by 4 for better UX
+            const multiplier = 4;
+            // Store original explicitly if needed, but currentLineWidth is global. 
+            // We should dynamically adjust context lineWidth during draw, or just hack it here.
+            // Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
+            // Better: Update cursor style only? No, actual draw needs it.
+            // Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
+            // Simpler: Just change it. When user clicks size button, it resets.
+            // But if user clicks Pen back? We need to restore.
+            // Let's rely on setPenTool being called with color.
+            // When "Pen" is clicked, we usually don't call setPenTool with a saved size...
+            // Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
+            // We need to change how draw() uses the width.
+            // BUT, since we don't want to touch draw() deep inside:
+            // We will hijack currentLineWidth.
+            if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
+            currentLineWidth = window.savedPenWidth * 4;
+        } else {
+            currentMode = 'source-over';
+            currentPenColor = color;
+            // Restore pen width
+            if (window.savedPenWidth) {
+                currentLineWidth = window.savedPenWidth;
+                window.savedPenWidth = null;
             }
         }
+        updateCursorStyle();
+    };
 
-        function updateSizeBtnUI() {
-            document.querySelectorAll('.size-btn').forEach(b => {
-                if (parseInt(b.dataset.size) === currentLineWidth) {
-                    b.classList.add('bg-gray-600', 'text-white');
-                    b.classList.remove('text-gray-400', 'hover:bg-gray-700');
-                } else {
-                    b.classList.remove('bg-gray-600', 'text-white');
-                    b.classList.add('text-gray-400', 'hover:bg-gray-700');
-                }
-            });
+    // Size Handler
+    window.setPenSize = (size, btn) => {
+        currentLineWidth = size;
+        updateSizeBtnUI();
+        updateCursorStyle();
+    };
+
+    function updateCursorStyle() {
+        const cursor = document.getElementById('tool-cursor');
+        if (!cursor) return;
+
+        // Size
+        cursor.style.width = `${currentLineWidth}px`;
+        cursor.style.height = `${currentLineWidth}px`;
+
+        // Color
+        if (currentMode === 'destination-out') {
+            // Eraser: White solid
+            cursor.style.backgroundColor = 'white';
+            cursor.style.borderColor = '#999';
+        } else {
+            // Pen: Tool color
+            cursor.style.backgroundColor = currentPenColor;
+            cursor.style.borderColor = 'rgba(255,255,255,0.8)';
         }
+    }
 
-        window.clearCanvas = () => {
-            if (canvas && ctx) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+    function updateSizeBtnUI() {
+        document.querySelectorAll('.size-btn').forEach(b => {
+            if (parseInt(b.dataset.size) === currentLineWidth) {
+                b.classList.add('bg-gray-600', 'text-white');
+                b.classList.remove('text-gray-400', 'hover:bg-gray-700');
+            } else {
+                b.classList.remove('bg-gray-600', 'text-white');
+                b.classList.add('text-gray-400', 'hover:bg-gray-700');
             }
-        };
+        });
     }
 
-    /**
-     * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
-     */
-    function renderTransposedHeatmap(students) {
-        const thead = document.getElementById('heatmap-header');
-        const tbody = document.getElementById('heatmap-body');
-
-        if (students.length === 0) {
-            thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
-            tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
-            return;
+    window.clearCanvas = () => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
         }
+    };
+}
 
-        // 1. Render Header (Students)
-        // Sticky Top for Header Row
-        // Sticky Left for the first cell ("Challenge/Student")
-        let headerHtml = `
+/**
+ * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+ */
+function renderTransposedHeatmap(students) {
+    const thead = document.getElementById('heatmap-header');
+    const tbody = document.getElementById('heatmap-body');
+
+    if (students.length === 0) {
+        thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
+        tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
+        return;
+    }
+
+    // 1. Render Header (Students)
+    // Sticky Top for Header Row
+    // Sticky Left for the first cell ("Challenge/Student")
+    let headerHtml = `
             <th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
                 <div class="flex justify-between items-end">
                     <span class="text-sm text-gray-400">題目</span>
@@ -1860,8 +1866,8 @@ export function setupInstructorEvents() {
             </th>
             `;
 
-        students.forEach(student => {
-            headerHtml += `
+    students.forEach(student => {
+        headerHtml += `
     <th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
         <div class="flex flex-col items-center space-y-2 py-2">
             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500 shadow-sm relative">
@@ -1880,59 +1886,59 @@ export function setupInstructorEvents() {
         </div>
             </th>
     `;
-        });
-        thead.innerHTML = headerHtml;
+    });
+    thead.innerHTML = headerHtml;
 
-        // 2. Render Body (Challenges as Rows)
-        if (cachedChallenges.length === 0) {
-            tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
-            return;
-        }
+    // 2. Render Body (Challenges as Rows)
+    if (cachedChallenges.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
+        return;
+    }
 
-        tbody.innerHTML = cachedChallenges.map((c, index) => {
-            const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
-            const color = colors[c.level] || 'gray';
-
-            // Build Row Cells (One per student)
-            const rowCells = students.map(student => {
-                const p = student.progress?.[c.id];
-                let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
-                let content = '';
-                let action = '';
-
-                if (p) {
-                    if (p.status === 'completed') {
-                        statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
-                        content = '✅';
-                        // Action removed: Moved to prompt list view
-                        action = `title="完成 - 請點擊標題查看詳情"`;
-                    } else if (p.status === 'started') {
-                        // Check stuck
-                        const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
-                        const now = new Date();
-                        const diffMins = (now - startedAt) / 1000 / 60;
-
-                        if (diffMins > 5) {
-                            statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
-                            content = '🆘';
-                        } else {
-                            statusClass = 'bg-blue-600/20 border-blue-500';
-                            content = '🔵';
-                        }
+    tbody.innerHTML = cachedChallenges.map((c, index) => {
+        const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+        const color = colors[c.level] || 'gray';
+
+        // Build Row Cells (One per student)
+        const rowCells = students.map(student => {
+            const p = student.progress?.[c.id];
+            let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
+            let content = '';
+            let action = '';
+
+            if (p) {
+                if (p.status === 'completed') {
+                    statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
+                    content = '✅';
+                    // Action removed: Moved to prompt list view
+                    action = `title="完成 - 請點擊標題查看詳情"`;
+                } else if (p.status === 'started') {
+                    // Check stuck
+                    const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
+                    const now = new Date();
+                    const diffMins = (now - startedAt) / 1000 / 60;
+
+                    if (diffMins > 5) {
+                        statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
+                        content = '🆘';
+                    } else {
+                        statusClass = 'bg-blue-600/20 border-blue-500';
+                        content = '🔵';
                     }
                 }
+            }
 
-                return `
+            return `
             <td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
                 <div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
                     ${content}
                 </div>
             </td>
             `;
-            }).join('');
+        }).join('');
 
-            // Row Header (Challenge Title)
-            return `
+        // Row Header (Challenge Title)
+        return `
             <tr class="hover:bg-gray-800/50 transition-colors">
                 <td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
                     <div class="flex items-center justify-between">
@@ -1949,42 +1955,42 @@ export function setupInstructorEvents() {
                 ${rowCells}
             </tr>
             `;
-        }).join('');
-    }
-
-    // Global scope for HTML access
-    // Global scope for HTML access
-    window.showBroadcastModal = (userId, challengeId) => {
-        const student = currentStudents.find(s => s.id === userId);
-        if (!student) return;
-
-        const p = student.progress?.[challengeId];
-        if (!p) return;
-
-        const challenge = cachedChallenges.find(c => c.id === challengeId);
-        const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
-
-        const modal = document.getElementById('broadcast-modal');
-        const content = document.getElementById('broadcast-content');
-
-        document.getElementById('broadcast-avatar').textContent = student.nickname[0];
-        document.getElementById('broadcast-author').textContent = student.nickname;
-        document.getElementById('broadcast-challenge').textContent = title;
-        // content is already just text, but let's be safe
-        const rawText = p.prompt || p.code || '';
-        const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
-        document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
-        document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
-
-        // Store IDs for actions
-        modal.dataset.userId = userId;
-        modal.dataset.challengeId = challengeId;
+    }).join('');
+}
 
-        modal.classList.remove('hidden');
-        // Animation trigger
-        setTimeout(() => {
-            content.classList.remove('scale-95', 'opacity-0');
-            content.classList.add('opacity-100', 'scale-100');
-        }, 10);
-    };
+// Global scope for HTML access
+// Global scope for HTML access
+window.showBroadcastModal = (userId, challengeId) => {
+    const student = currentStudents.find(s => s.id === userId);
+    if (!student) return;
+
+    const p = student.progress?.[challengeId];
+    if (!p) return;
+
+    const challenge = cachedChallenges.find(c => c.id === challengeId);
+    const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
+
+    const modal = document.getElementById('broadcast-modal');
+    const content = document.getElementById('broadcast-content');
+
+    document.getElementById('broadcast-avatar').textContent = student.nickname[0];
+    document.getElementById('broadcast-author').textContent = student.nickname;
+    document.getElementById('broadcast-challenge').textContent = title;
+    // content is already just text, but let's be safe
+    const rawText = p.prompt || p.code || '';
+    const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
+    document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
+    document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
+
+    // Store IDs for actions
+    modal.dataset.userId = userId;
+    modal.dataset.challengeId = challengeId;
+
+    modal.classList.remove('hidden');
+    // Animation trigger
+    setTimeout(() => {
+        content.classList.remove('scale-95', 'opacity-0');
+        content.classList.add('opacity-100', 'scale-100');
+    }, 10);
+};
 }