Upload 9 files

src/views/InstructorView.js

@@ -657,218 +657,218 @@ export function setupInstructorEvents() {
                 }
             });
         }
-    });
 
-    // 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);
-            }
-        }
-    };
 
-    // 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) {
+        // Global helper for remove (hacky but works for simple onclick)
+        window.removeInst = async (email) => {
+            if (confirm(`確定移除 ${email}?`)) {
                 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);
-                    } 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
-                    }
+                    await removeInstructor(email);
+                    navInstBtn.click(); // Reload
                 } catch (e) {
-                    console.error("Permission Check Failed:", e);
-                    authErrorMsg.textContent = "權限檢查失敗: " + e.message;
-                    authErrorMsg.classList.remove('hidden');
+                    alert(e.message);
                 }
-            } else {
-                authModal.classList.remove('hidden');
             }
-        });
-    });
+        };
 
-    // Define Kick Function globally (robust against auth flow)
-    window.confirmKick = async (userId, nickname) => {
-        if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
+        // 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 {
-                const { removeUser } = await import("../services/classroom.js");
-                await removeUser(userId);
-                // UI will update automatically via subscribeToRoom
-            } catch (e) {
-                console.error("Kick failed:", e);
-                alert("移除失敗");
+                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);
+                        } 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
+                        }
+                    } 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("移除失敗");
+                }
             }
-        }
-    };
+        };
 
 
-    // Snapshot Logic
-    snapshotBtn.addEventListener('click', async () => {
-        if (isSnapshotting || typeof htmlToImage === 'undefined') {
-            if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
-            return;
-        }
-        isSnapshotting = true;
-
-        const overlay = document.getElementById('snapshot-overlay');
-        const countEl = document.getElementById('countdown-number');
-        const container = document.getElementById('group-photo-container');
-        const modal = document.getElementById('group-photo-modal');
-
-        // Close button hide
-        const closeBtn = modal.querySelector('button');
-        if (closeBtn) closeBtn.style.opacity = '0';
-        snapshotBtn.style.opacity = '0';
-
-        overlay.classList.remove('hidden');
-        overlay.classList.add('flex');
-
-        // Countdown Sequence
-        const runCountdown = (num) => new Promise(resolve => {
-            countEl.textContent = num;
-            countEl.style.transform = 'scale(1.5)';
-            countEl.style.opacity = '1';
-
-            // Animation reset
-            requestAnimationFrame(() => {
-                countEl.style.transition = 'all 0.5s ease-out';
-                countEl.style.transform = 'scale(1)';
-                countEl.style.opacity = '0.5';
-                setTimeout(resolve, 1000);
+        // Snapshot Logic
+        snapshotBtn.addEventListener('click', async () => {
+            if (isSnapshotting || typeof htmlToImage === 'undefined') {
+                if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
+                return;
+            }
+            isSnapshotting = true;
+
+            const overlay = document.getElementById('snapshot-overlay');
+            const countEl = document.getElementById('countdown-number');
+            const container = document.getElementById('group-photo-container');
+            const modal = document.getElementById('group-photo-modal');
+
+            // Close button hide
+            const closeBtn = modal.querySelector('button');
+            if (closeBtn) closeBtn.style.opacity = '0';
+            snapshotBtn.style.opacity = '0';
+
+            overlay.classList.remove('hidden');
+            overlay.classList.add('flex');
+
+            // Countdown Sequence
+            const runCountdown = (num) => new Promise(resolve => {
+                countEl.textContent = num;
+                countEl.style.transform = 'scale(1.5)';
+                countEl.style.opacity = '1';
+
+                // Animation reset
+                requestAnimationFrame(() => {
+                    countEl.style.transition = 'all 0.5s ease-out';
+                    countEl.style.transform = 'scale(1)';
+                    countEl.style.opacity = '0.5';
+                    setTimeout(resolve, 1000);
+                });
             });
-        });
 
-        await runCountdown(3);
-        await runCountdown(2);
-        await runCountdown(1);
-
-        // Action!
-        countEl.textContent = '';
-        overlay.classList.add('hidden');
-
-        // 1. Emojis Explosion
-        const emojis = ['🤘', '✌️', '👍', '🫶', '😎', '🔥'];
-        const cards = container.querySelectorAll('.group\\/card');
-
-        cards.forEach(card => {
-            // Find the monster image container
-            const imgContainer = card.querySelector('.monster-img-container');
-            if (!imgContainer) return;
-
-            // Random Emoji
-            const emoji = emojis[Math.floor(Math.random() * emojis.length)];
-            const emojiEl = document.createElement('div');
-            emojiEl.textContent = emoji;
-            // Position: Top-Right of the *Image*, slightly overlapping
-            emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
-            emojiEl.style.animationDuration = '0.6s';
-            imgContainer.appendChild(emojiEl);
-
-            // Remove after 3s
-            setTimeout(() => emojiEl.remove(), 3000);
-        });
+            await runCountdown(3);
+            await runCountdown(2);
+            await runCountdown(1);
+
+            // Action!
+            countEl.textContent = '';
+            overlay.classList.add('hidden');
+
+            // 1. Emojis Explosion
+            const emojis = ['🤘', '✌️', '👍', '🫶', '😎', '🔥'];
+            const cards = container.querySelectorAll('.group\\/card');
+
+            cards.forEach(card => {
+                // Find the monster image container
+                const imgContainer = card.querySelector('.monster-img-container');
+                if (!imgContainer) return;
+
+                // Random Emoji
+                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
+                const emojiEl = document.createElement('div');
+                emojiEl.textContent = emoji;
+                // Position: Top-Right of the *Image*, slightly overlapping
+                emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
+                emojiEl.style.animationDuration = '0.6s';
+                imgContainer.appendChild(emojiEl);
+
+                // Remove after 3s
+                setTimeout(() => emojiEl.remove(), 3000);
+            });
 
-        // 2. Capture using html-to-image
-        setTimeout(async () => {
-            try {
-                // Flash Effect
-                const flash = document.createElement('div');
-                flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
-                document.body.appendChild(flash);
-                setTimeout(() => flash.style.opacity = '0', 50);
-                setTimeout(() => flash.remove(), 300);
-
-                // Use htmlToImage.toPng
-                const dataUrl = await htmlToImage.toPng(container, {
-                    backgroundColor: '#111827',
-                    pixelRatio: 2,
-                    cacheBust: true,
-                });
+            // 2. Capture using html-to-image
+            setTimeout(async () => {
+                try {
+                    // Flash Effect
+                    const flash = document.createElement('div');
+                    flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
+                    document.body.appendChild(flash);
+                    setTimeout(() => flash.style.opacity = '0', 50);
+                    setTimeout(() => flash.remove(), 300);
+
+                    // Use htmlToImage.toPng
+                    const dataUrl = await htmlToImage.toPng(container, {
+                        backgroundColor: '#111827',
+                        pixelRatio: 2,
+                        cacheBust: true,
+                    });
 
-                // Download
-                const link = document.createElement('a');
-                const dateStr = new Date().toISOString().slice(0, 10);
-                link.download = `VIBE_Class_Photo_${dateStr}.png`;
-                link.href = dataUrl;
-                link.click();
+                    // Download
+                    const link = document.createElement('a');
+                    const dateStr = new Date().toISOString().slice(0, 10);
+                    link.download = `VIBE_Class_Photo_${dateStr}.png`;
+                    link.href = dataUrl;
+                    link.click();
 
-            } catch (e) {
-                console.error("Snapshot failed:", e);
-                alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
-            } finally {
-                // Restore UI
-                if (closeBtn) closeBtn.style.opacity = '1';
-                snapshotBtn.style.opacity = '1';
-                isSnapshotting = false;
-            }
-        }, 600); // Slight delay for emojis to appear
-    });
+                } catch (e) {
+                    console.error("Snapshot failed:", e);
+                    alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
+                } finally {
+                    // Restore UI
+                    if (closeBtn) closeBtn.style.opacity = '1';
+                    snapshotBtn.style.opacity = '1';
+                    isSnapshotting = false;
+                }
+            }, 600); // Slight delay for emojis to appear
+        });
 
-    // Group Photo Logic
-    groupPhotoBtn.addEventListener('click', () => {
-        const modal = document.getElementById('group-photo-modal');
-        const container = document.getElementById('group-photo-container');
-        const dateEl = document.getElementById('photo-date');
+        // Group Photo Logic
+        groupPhotoBtn.addEventListener('click', () => {
+            const modal = document.getElementById('group-photo-modal');
+            const container = document.getElementById('group-photo-container');
+            const dateEl = document.getElementById('photo-date');
 
-        // Update Date
-        const now = new Date();
-        dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} `;
+            // Update Date
+            const now = new Date();
+            dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} `;
 
-        // Get saved name
-        const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
+            // Get saved name
+            const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
 
-        container.innerHTML = '';
+            container.innerHTML = '';
 
-        // 1. Container for Relative Positioning with Custom Background
-        const relativeContainer = document.createElement('div');
-        relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl border border-gray-700/30 shadow-2xl flex items-center justify-center bg-cover bg-center';
-        relativeContainer.style.backgroundImage = "url('assets/photobg.png')";
-        container.appendChild(relativeContainer);
+            // 1. Container for Relative Positioning with Custom Background
+            const relativeContainer = document.createElement('div');
+            relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl border border-gray-700/30 shadow-2xl flex items-center justify-center bg-cover bg-center';
+            relativeContainer.style.backgroundImage = "url('assets/photobg.png')";
+            container.appendChild(relativeContainer);
 
-        // Watermark (Bottom Right, High Z-Index, Gradient Text, Dark Backdrop)
-        const watermark = document.createElement('div');
-        watermark.className = 'absolute bottom-2 right-2 md:bottom-4 md:right-4 z-[60] bg-black/70 backdrop-blur-sm rounded-lg px-4 py-2 pointer-events-none select-none border border-white/10 shadow-lg';
+            // Watermark (Bottom Right, High Z-Index, Gradient Text, Dark Backdrop)
+            const watermark = document.createElement('div');
+            watermark.className = 'absolute bottom-2 right-2 md:bottom-4 md:right-4 z-[60] bg-black/70 backdrop-blur-sm rounded-lg px-4 py-2 pointer-events-none select-none border border-white/10 shadow-lg';
 
-        const d = new Date();
-        const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
+            const d = new Date();
+            const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
 
-        watermark.innerHTML = `
+            watermark.innerHTML = `
             <span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider">
                 ${dateStr} VibeCoding 怪獸成長營
             </span>
             `;
-        relativeContainer.appendChild(watermark);
+            relativeContainer.appendChild(watermark);
 
-        // 2. Instructor Section (Absolute Center)
-        const instructorSection = document.createElement('div');
-        instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
-        instructorSection.innerHTML = `
+            // 2. Instructor Section (Absolute Center)
+            const instructorSection = document.createElement('div');
+            instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
+            instructorSection.innerHTML = `
             <div class="relative">
                 <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full animate-pulse"></div>
                 <!--Pixel Art Avatar-->
@@ -887,98 +887,98 @@ export function setupInstructorEvents() {
                     </div>
             </div>
             `;
-        relativeContainer.appendChild(instructorSection);
-
-        // Save name on change
-        setTimeout(() => {
-            const input = document.getElementById('instructor-name-input');
-            if (input) {
-                input.addEventListener('input', (e) => {
-                    localStorage.setItem('vibecoding_instructor_name', e.target.value);
-                });
-            }
-        }, 100);
-
-        // 3. Students Scatter
-        if (currentStudents.length > 0) {
-            // Randomize array to prevent fixed order bias
-            const students = [...currentStudents].sort(() => Math.random() - 0.5);
-            const total = students.length;
-
-            // --- Dynamic Sizing Logic ---
-            let sizeClass = 'w-20 h-20 md:w-24 md:h-24'; // Default (Size 100%)
-            let scaleFactor = 1.0;
-
-            if (total >= 40) {
-                sizeClass = 'w-12 h-12 md:w-14 md:h-14'; // Size 60%
-                scaleFactor = 0.6;
-            } else if (total >= 20) {
-                sizeClass = 'w-16 h-16 md:w-20 md:h-20'; // Size 80%
-                scaleFactor = 0.8;
-            }
+            relativeContainer.appendChild(instructorSection);
+
+            // Save name on change
+            setTimeout(() => {
+                const input = document.getElementById('instructor-name-input');
+                if (input) {
+                    input.addEventListener('input', (e) => {
+                        localStorage.setItem('vibecoding_instructor_name', e.target.value);
+                    });
+                }
+            }, 100);
+
+            // 3. Students Scatter
+            if (currentStudents.length > 0) {
+                // Randomize array to prevent fixed order bias
+                const students = [...currentStudents].sort(() => Math.random() - 0.5);
+                const total = students.length;
+
+                // --- Dynamic Sizing Logic ---
+                let sizeClass = 'w-20 h-20 md:w-24 md:h-24'; // Default (Size 100%)
+                let scaleFactor = 1.0;
+
+                if (total >= 40) {
+                    sizeClass = 'w-12 h-12 md:w-14 md:h-14'; // Size 60%
+                    scaleFactor = 0.6;
+                } else if (total >= 20) {
+                    sizeClass = 'w-16 h-16 md:w-20 md:h-20'; // Size 80%
+                    scaleFactor = 0.8;
+                }
 
-            students.forEach((s, index) => {
-                const progressMap = s.progress || {};
-                const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
-                const totalCompleted = Object.values(progressMap).filter(p => p.status === 'completed').length;
-
-                // FIXED: Prioritize stored ID if valid (same as StudentView logic)
-                let monster;
-                if (s.monster_id && s.monster_id !== 'Egg' && s.monster_id !== 'Unknown') {
-                    const stored = MONSTER_DEFS?.find(m => m.id === s.monster_id);
-                    if (stored) {
-                        monster = stored;
+                students.forEach((s, index) => {
+                    const progressMap = s.progress || {};
+                    const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
+                    const totalCompleted = Object.values(progressMap).filter(p => p.status === 'completed').length;
+
+                    // FIXED: Prioritize stored ID if valid (same as StudentView logic)
+                    let monster;
+                    if (s.monster_id && s.monster_id !== 'Egg' && s.monster_id !== 'Unknown') {
+                        const stored = MONSTER_DEFS?.find(m => m.id === s.monster_id);
+                        if (stored) {
+                            monster = stored;
+                        } else {
+                            // Fallback if ID invalid
+                            monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
+                        }
                     } else {
-                        // Fallback if ID invalid
                         monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
                     }
-                } else {
-                    monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
-                }
 
-                // --- FIXED: Even Arc Distribution (Safe Zone: 135 deg to 405 deg) ---
-                // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
-                const minR = 220;
-                // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
+                    // --- FIXED: Even Arc Distribution (Safe Zone: 135 deg to 405 deg) ---
+                    // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
+                    const minR = 220;
+                    // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
 
-                // Safe Arc Range: Starts at 135 deg (Bottom Left) -> Goes CW -> Ends at 405 deg (45 deg, Bottom Right)
-                // Total Span = 270 degrees
-                // If many students, use double ring
+                    // Safe Arc Range: Starts at 135 deg (Bottom Left) -> Goes CW -> Ends at 405 deg (45 deg, Bottom Right)
+                    // Total Span = 270 degrees
+                    // If many students, use double ring
 
-                const safeStartAngle = 135 * (Math.PI / 180);
-                const safeSpan = 270 * (Math.PI / 180);
+                    const safeStartAngle = 135 * (Math.PI / 180);
+                    const safeSpan = 270 * (Math.PI / 180);
 
-                // Distribute evenly
-                // If only 1 student, put at top (270 deg / 4.71 rad)
-                let finalAngle;
+                    // Distribute evenly
+                    // If only 1 student, put at top (270 deg / 4.71 rad)
+                    let finalAngle;
 
-                if (total === 1) {
-                    finalAngle = 270 * (Math.PI / 180);
-                } else {
-                    const step = safeSpan / (total - 1);
-                    finalAngle = safeStartAngle + (step * index);
-                }
+                    if (total === 1) {
+                        finalAngle = 270 * (Math.PI / 180);
+                    } else {
+                        const step = safeSpan / (total - 1);
+                        finalAngle = safeStartAngle + (step * index);
+                    }
 
-                // Radius: Fixed base + slight variation for "natural" look (but not overlap causing)
-                // Double ring logic if crowded
-                let radius = minR + (index % 2) * 40; // Zigzag radius (220, 260, 220...) to minimize overlap
+                    // Radius: Fixed base + slight variation for "natural" look (but not overlap causing)
+                    // Double ring logic if crowded
+                    let radius = minR + (index % 2) * 40; // Zigzag radius (220, 260, 220...) to minimize overlap
 
-                // Reduce zigzag if few students
-                if (total < 10) radius = minR + (index % 2) * 20;
+                    // Reduce zigzag if few students
+                    if (total < 10) radius = minR + (index % 2) * 20;
 
-                const xOff = Math.cos(finalAngle) * radius;
-                const yOff = Math.sin(finalAngle) * radius * 0.8;
+                    const xOff = Math.cos(finalAngle) * radius;
+                    const yOff = Math.sin(finalAngle) * radius * 0.8;
 
-                const card = document.createElement('div');
-                card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500 cursor-move';
+                    const card = document.createElement('div');
+                    card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500 cursor-move';
 
-                card.style.left = `calc(50% + ${xOff}px)`;
-                card.style.top = `calc(50% + ${yOff}px)`;
-                card.style.transform = 'translate(-50%, -50%)';
+                    card.style.left = `calc(50% + ${xOff}px)`;
+                    card.style.top = `calc(50% + ${yOff}px)`;
+                    card.style.transform = 'translate(-50%, -50%)';
 
-                const floatDelay = Math.random() * 2;
+                    const floatDelay = Math.random() * 2;
 
-                card.innerHTML = `
+                    card.innerHTML = `
             <!--Top Info: Monster Stats-->
             <div class="mb-1 text-center bg-gray-900/60 backdrop-blur-sm rounded-lg px-2 py-1 border border-gray-600/30 group-hover/card:bg-gray-800 group-hover/card:border-cyan-500/50 transition-all opacity-80 group-hover/card:opacity-100 transform translate-y-2 group-hover/card:translate-y-0 duration-300">
                 <div class="text-[10px] text-gray-300 mb-0.5 whitespace-nowrap">${monster.name.split(' ')[1] || monster.name}</div>
@@ -1003,77 +1003,77 @@ export function setupInstructorEvents() {
                 <div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
             </div>
             `;
-                relativeContainer.appendChild(card);
+                    relativeContainer.appendChild(card);
 
-                // Enable Drag & Drop
-                setupDraggable(card, relativeContainer);
-            });
-        }
+                    // Enable Drag & Drop
+                    setupDraggable(card, relativeContainer);
+                });
+            }
 
-        modal.classList.remove('hidden');
-    });
-
-    // 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;
-
-            // 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();
-
-            // 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;
-
-            // Set explicit pixel values replacing calc()
-            el.style.left = `${centerX}px`;
-            el.style.top = `${centerY}px`;
-
-            initialLeft = centerX;
-            initialTop = centerY;
+            modal.classList.remove('hidden');
         });
 
-        window.addEventListener('mousemove', (e) => {
-            if (!isDragging) return;
-            e.preventDefault();
+        // Helper: Drag & Drop Logic
+        function setupDraggable(el, container) {
+            let isDragging = false;
+            let startX, startY, initialLeft, initialTop;
 
-            const dx = e.clientX - startX;
-            const dy = e.clientY - startY;
+            el.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                startX = e.clientX;
+                startY = e.clientY;
 
-            el.style.left = `${initialLeft + dx}px`;
-            el.style.top = `${initialTop + dy}px`;
-        });
+                // Disable transition during drag for responsiveness
+                el.style.transition = 'none';
+                el.style.zIndex = 100; // Bring to front
 
-        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)
-            }
-        });
-    }
+                // 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.
+
+                // 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`;
+
+                initialLeft = centerX;
+                initialTop = centerY;
+            });
+
+            window.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                e.preventDefault();
+
+                const dx = e.clientX - startX;
+                const dy = e.clientY - startY;
+
+                el.style.left = `${initialLeft + dx}px`;
+                el.style.top = `${initialTop + dy}px`;
+            });
 
-    // Add float animation style if not exists
-    if (!document.getElementById('anim-float')) {
-        const style = document.createElement('style');
-        style.id = 'anim-float';
-        style.innerHTML = `
+            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 = `
             @keyframes float {
 
                 0 %, 100 % { transform: translateY(0) scale(1); }
@@ -1081,233 +1081,233 @@ export function setupInstructorEvents() {
 }
 }
             `;
-        document.head.appendChild(style);
-    }
-
-    // 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();
+            document.head.appendChild(style);
         }
-    });
 
-    // Check Previous Session (Handled by onAuthStateChanged now)
-    // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
-    //     authModal.classList.add('hidden');
-    // }
+        // Gallery Logic
+        document.getElementById('btn-open-gallery').addEventListener('click', () => {
+            window.open('monster_preview.html', '_blank');
+        });
 
-    // Check Active Room State
-    const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');
-    if (activeRoom === 'true' && savedRoomCode) {
-        enterRoom(savedRoomCode);
-    }
+        // 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();
+            }
+        });
 
-    // Module-level variable to track subscription (Moved to top)
+        // Check Previous Session (Handled by onAuthStateChanged now)
+        // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
+        //     authModal.classList.add('hidden');
+        // }
 
-    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_instructor_room', roomCode);
-        sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
+        // Check Active Room State
+        const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');
+        if (activeRoom === 'true' && savedRoomCode) {
+            enterRoom(savedRoomCode);
+        }
 
-        // Unsubscribe previous if any
-        if (roomUnsubscribe) roomUnsubscribe();
+        // Module-level variable to track subscription (Moved to top)
 
-        // Subscribe to updates
-        roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
-            currentStudents = students;
-            renderTransposedHeatmap(students);
-        });
-    }
+        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_instructor_room', roomCode);
+            sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
 
-    // Leave Room Logic
-    document.getElementById('leave-room-btn').addEventListener('click', () => {
-        if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
-            // Unsubscribe
-            if (roomUnsubscribe) {
-                roomUnsubscribe();
-                roomUnsubscribe = null;
-            }
+            // Unsubscribe previous if any
+            if (roomUnsubscribe) roomUnsubscribe();
 
-            // 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
+            // Subscribe to updates
+            roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
+                currentStudents = students;
+                renderTransposedHeatmap(students);
+            });
+        }
 
-            // 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>';
+        // Leave Room Logic
+        document.getElementById('leave-room-btn').addEventListener('click', () => {
+            if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
+                // Unsubscribe
+                if (roomUnsubscribe) {
+                    roomUnsubscribe();
+                    roomUnsubscribe = null;
+                }
 
-            // State Clear
-            sessionStorage.removeItem('vibecoding_instructor_in_room');
-            localStorage.removeItem('vibecoding_instructor_room');
-        }
-    });
+                // 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
 
-    // Modal Events
-    window.showBroadcastModal = (userId, challengeId) => {
-        const modal = document.getElementById('broadcast-modal');
-        const content = document.getElementById('broadcast-content');
+                // 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>';
 
-        // Find Data
-        const student = currentStudents.find(s => s.id === userId);
-        if (!student) return alert('找不到學員資料');
+                // State Clear
+                sessionStorage.removeItem('vibecoding_instructor_in_room');
+                localStorage.removeItem('vibecoding_instructor_room');
+            }
+        });
 
-        const p = student.progress ? student.progress[challengeId] : null;
-        if (!p) return alert('找不到該作品資料');
+        // Modal Events
+        window.showBroadcastModal = (userId, challengeId) => {
+            const modal = document.getElementById('broadcast-modal');
+            const content = document.getElementById('broadcast-content');
 
-        const challenge = cachedChallenges.find(c => c.id === challengeId);
-        const title = challenge ? challenge.title : '未知題目';
+            // Find Data
+            const student = currentStudents.find(s => s.id === userId);
+            if (!student) return alert('找不到學員資料');
 
-        // 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 || '(無內容)';
+            const p = student.progress ? student.progress[challengeId] : null;
+            if (!p) return alert('找不到該作品資料');
 
-        // Store IDs for Actions (Reject/BroadcastAll)
-        modal.dataset.userId = userId;
-        modal.dataset.challengeId = challengeId;
+            const challenge = cachedChallenges.find(c => c.id === challengeId);
+            const title = challenge ? challenge.title : '未知題目';
 
-        // Show
-        modal.classList.remove('hidden');
-        setTimeout(() => {
-            content.classList.remove('scale-95', 'opacity-0');
-            content.classList.add('opacity-100', 'scale-100');
-        }, 10);
-    };
+            // 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 || '(無內容)';
 
-    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);
-    };
+            // Store IDs for Actions (Reject/BroadcastAll)
+            modal.dataset.userId = userId;
+            modal.dataset.challengeId = challengeId;
 
-    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 = prompt;
-        document.getElementById('stage-author').textContent = author;
-    };
+            // Show
+            modal.classList.remove('hidden');
+            setTimeout(() => {
+                content.classList.remove('scale-95', 'opacity-0');
+                content.classList.add('opacity-100', 'scale-100');
+            }, 10);
+        };
 
-    window.closeStage = () => {
-        document.getElementById('stage-view').classList.add('hidden');
-        document.getElementById('broadcast-content').classList.remove('hidden');
-    };
+        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);
+        };
 
-    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);
-    });
+        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 = prompt;
+            document.getElementById('stage-author').textContent = author;
+        };
 
-    // Reject Logic
-    document.getElementById('btn-reject-task').addEventListener('click', async () => {
-        if (!confirm('確定要退回此題目讓學員重做嗎？')) return;
+        window.closeStage = () => {
+            document.getElementById('stage-view').classList.add('hidden');
+            document.getElementById('broadcast-content').classList.remove('hidden');
+        };
 
-        // 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_instructor_room');
+        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);
+        });
 
-        if (userId && challengeId && roomCode) {
-            try {
-                await resetProgress(userId, roomCode, challengeId);
-                // Close modal
-                window.closeBroadcast();
-            } catch (e) {
-                console.error(e);
-                alert('退回失敗');
+        // 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_instructor_room');
+
+            if (userId && challengeId && roomCode) {
+                try {
+                    await resetProgress(userId, roomCode, challengeId);
+                    // Close modal
+                    window.closeBroadcast();
+                } catch (e) {
+                    console.error(e);
+                    alert('退回失敗');
+                }
             }
-        }
-    });
-    // 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() : ''
-                        };
-                    });
-            }
-        } 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() : ''
+            // 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() : ''
+                            });
+                        }
+                    }
+                });
+            }
 
-        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 -->
@@ -1328,167 +1328,167 @@ export function setupInstructorEvents() {
                 </div>
             </div>
             `;
-            container.appendChild(card);
-        });
-    };
+                container.appendChild(card);
+            });
+        };
 
-    // Helper Actions
-    window.confirmReset = async (userId, challengeId, title) => {
-        if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
-            const roomCode = localStorage.getItem('vibecoding_instructor_room');
-            if (userId && challengeId && roomCode) {
-                try {
-                    const { resetProgress } = await import("../services/classroom.js");
-                    await resetProgress(userId, roomCode, challengeId);
-                    // Refresh current list if open? (It will stay open but might not update immediately if realtime check isn't hooked to modal content. But subscriptions update `currentStudents`. We might need to refresh list)
-                    // For now, simple alert or auto-close
-                    alert("已退回");
-                    // close modal to refresh data context
-                    document.getElementById('prompt-list-modal').classList.add('hidden');
-                } catch (e) {
-                    console.error(e);
-                    alert("退回失敗");
+        // Helper Actions
+        window.confirmReset = async (userId, challengeId, title) => {
+            if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
+                const roomCode = localStorage.getItem('vibecoding_instructor_room');
+                if (userId && challengeId && roomCode) {
+                    try {
+                        const { resetProgress } = await import("../services/classroom.js");
+                        await resetProgress(userId, roomCode, challengeId);
+                        // Refresh current list if open? (It will stay open but might not update immediately if realtime check isn't hooked to modal content. But subscriptions update `currentStudents`. We might need to refresh list)
+                        // For now, simple alert or auto-close
+                        alert("已退回");
+                        // close modal to refresh data context
+                        document.getElementById('prompt-list-modal').classList.add('hidden');
+                    } catch (e) {
+                        console.error(e);
+                        alert("退回失敗");
+                    }
                 }
             }
-        }
-    };
+        };
 
-    window.broadcastPrompt = (userId, challengeId) => {
-        window.showBroadcastModal(userId, challengeId);
-    };
+        window.broadcastPrompt = (userId, challengeId) => {
+            window.showBroadcastModal(userId, challengeId);
+        };
 
-    // Selection Logic
-    let selectedPrompts = []; // Stores IDs
+        // Selection Logic
+        let selectedPrompts = []; // Stores IDs
 
-    window.handlePromptSelection = (checkbox) => {
-        const id = checkbox.dataset.id;
+        window.handlePromptSelection = (checkbox) => {
+            const id = checkbox.dataset.id;
 
-        if (checkbox.checked) {
-            if (selectedPrompts.length >= 3) {
-                checkbox.checked = false;
-                alert('最多只能選擇 3 個提示詞進行比較');
-                return;
+            if (checkbox.checked) {
+                if (selectedPrompts.length >= 3) {
+                    checkbox.checked = false;
+                    alert('最多只能選擇 3 個提示詞進行比較');
+                    return;
+                }
+                selectedPrompts.push(id);
+            } else {
+                selectedPrompts = selectedPrompts.filter(pid => pid !== id);
             }
-            selectedPrompts.push(id);
-        } else {
-            selectedPrompts = selectedPrompts.filter(pid => pid !== id);
-        }
-        updateCompareButton();
-    };
+            updateCompareButton();
+        };
 
-    function updateCompareButton() {
-        const btn = document.getElementById('btn-compare-prompts');
-        if (!btn) return;
+        function updateCompareButton() {
+            const btn = document.getElementById('btn-compare-prompts');
+            if (!btn) return;
 
-        const count = selectedPrompts.length;
-        const span = btn.querySelector('span');
-        if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
+            const count = selectedPrompts.length;
+            const span = btn.querySelector('span');
+            if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
 
-        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');
+            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() : ''
-                    });
-                }
-            });
+        // 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);
 
-            const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
-            openComparisonView(dataToCompare, isAnon);
-        });
-    }
+                        dataToCompare.push({
+                            title: challenge ? challenge.title : '未知',
+                            author: student.nickname,
+                            prompt: p.prompt,
+                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleTimeString() : ''
+                        });
+                    }
+                });
 
-    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;
-            }
-        });
-    };
+                const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
+                openComparisonView(dataToCompare, isAnon);
+            });
+        }
 
-    window.openComparisonView = (items, initialAnonymous = false) => {
-        const modal = document.getElementById('comparison-modal');
-        const grid = document.getElementById('comparison-grid');
+        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;
+                }
+            });
+        };
 
-        // Apply Anonymous State
-        isAnonymous = initialAnonymous;
-        const anonBtn = document.getElementById('btn-anonymous-toggle');
+        window.openComparisonView = (items, initialAnonymous = false) => {
+            const modal = document.getElementById('comparison-modal');
+            const grid = document.getElementById('comparison-grid');
 
-        // 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');
-            }
-        }
+            // Apply Anonymous State
+            isAnonymous = initialAnonymous;
+            const anonBtn = document.getElementById('btn-anonymous-toggle');
 
-        // 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.
+            // 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');
+                }
             }
 
-            col.innerHTML = `
+            // 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 = `
             <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>
@@ -1498,200 +1498,200 @@ export function setupInstructorEvents() {
                 ${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);
-            }
-        });
-
-        document.getElementById('prompt-list-modal').classList.add('hidden');
-        modal.classList.remove('hidden');
-
-        // Init Canvas (Phase 3)
-        setTimeout(setupCanvas, 100);
-    };
+                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);
+                }
+            });
 
-    window.closeComparison = () => {
-        document.getElementById('comparison-modal').classList.add('hidden');
-        clearCanvas();
-    };
+            document.getElementById('prompt-list-modal').classList.add('hidden');
+            modal.classList.remove('hidden');
 
-    // --- 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;
+            // Init Canvas (Phase 3)
+            setTimeout(setupCanvas, 100);
         };
-        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();
-
-            // Re-apply settings (state might change)
-            ctx.globalCompositeOperation = currentMode;
-            ctx.strokeStyle = currentPenColor;
-            ctx.lineWidth = currentLineWidth;
 
-            const { x, y } = getPos(e);
-            ctx.moveTo(x, y);
+        window.closeComparison = () => {
+            document.getElementById('comparison-modal').classList.add('hidden');
+            clearCanvas();
         };
 
-        const move = (e) => {
-            if (!isDrawing) return;
-            const { x, y } = getPos(e);
-            ctx.lineTo(x, y);
-            ctx.stroke();
-        };
+        // --- 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`;
+            });
 
-        const end = () => {
-            isDrawing = false;
+            // 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(); };
         };
 
-        canvas.onmousedown = start;
-        canvas.onmousemove = move;
-        canvas.onmouseup = end;
-        canvas.onmouseleave = end;
+        function getPos(e) {
+            const rect = canvas.getBoundingClientRect();
+            return {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top
+            };
+        }
 
-        // 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(); };
-    };
+        // 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');
 
-    function getPos(e) {
-        const rect = canvas.getBoundingClientRect();
-        return {
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top
+            if (tool === 'eraser') {
+                currentMode = 'destination-out';
+            } else {
+                currentMode = 'source-over';
+                currentPenColor = color;
+            }
+            updateCursorStyle();
         };
-    }
-
-    // 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';
-        } else {
-            currentMode = 'source-over';
-            currentPenColor = color;
-        }
-        updateCursorStyle();
-    };
+        // Size Handler
+        window.setPenSize = (size, btn) => {
+            currentLineWidth = size;
+            updateSizeBtnUI();
+            updateCursorStyle();
+        };
 
-    // Size Handler
-    window.setPenSize = (size, btn) => {
-        currentLineWidth = size;
-        updateSizeBtnUI();
-        updateCursorStyle();
-    };
+        function updateCursorStyle() {
+            const cursor = document.getElementById('tool-cursor');
+            if (!cursor) return;
 
-    function updateCursorStyle() {
-        const cursor = document.getElementById('tool-cursor');
-        if (!cursor) return;
+            // Size
+            cursor.style.width = `${currentLineWidth}px`;
+            cursor.style.height = `${currentLineWidth}px`;
 
-        // 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)';
+            }
+        }
 
-        // 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 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');
+                }
+            });
         }
-    }
 
-    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');
+        window.clearCanvas = () => {
+            if (canvas && ctx) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
             }
-        });
+        };
     }
 
-    window.clearCanvas = () => {
-        if (canvas && ctx) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-        }
-    };
-}
+    /**
+     * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+     */
+    function renderTransposedHeatmap(students) {
+        const thead = document.getElementById('heatmap-header');
+        const tbody = document.getElementById('heatmap-body');
 
-/**
- * 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;
-    }
+        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 = `
+        // 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>
@@ -1700,8 +1700,8 @@ function renderTransposedHeatmap(students) {
             </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">
@@ -1720,59 +1720,59 @@ function renderTransposedHeatmap(students) {
         </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">
@@ -1789,38 +1789,38 @@ function renderTransposedHeatmap(students) {
                 ${rowCells}
             </tr>
             `;
-    }).join('');
-}
+        }).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;
 
-// 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
-    document.getElementById('broadcast-prompt').textContent = p.prompt || p.code || ''; // robust fallback
-
-    // 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);
-};
+        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
+        document.getElementById('broadcast-prompt').textContent = p.prompt || p.code || ''; // robust fallback
+
+        // 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);
+    };