Upload 8 files

src/views/StudentView.js

@@ -369,50 +369,7 @@ export async function renderStudentView() {
 
         <div class="space-y-4">
             ${['beginner', 'intermediate', 'advanced'].map(level => {
-        const tasks = levelGroups[level] || [];
-
-        // State Preservation Logic:
-        // Check DOM for existing details element and its open attribute
-        // ID strategy: details-{level}
-        // If not found, default to open for 'beginner', closed for others.
-        // But if we are re-rendering, we want to keep current state.
-
-        const detailsId = `details-group-${level}`;
-        const existingDetails = document.getElementById(detailsId);
-        let isOpenStr = '';
-
-        if (existingDetails) {
-            if (existingDetails.hasAttribute('open')) isOpenStr = 'open';
-        } else {
-            // Initial Load defaults
-            if (level === 'beginner') isOpenStr = 'open';
-        }
-
-        // Count completed
-        const completedCount = tasks.filter(t => userProgress[t.id]?.status === 'completed').length;
-        const allClear = completedCount === tasks.length && tasks.length > 0;
-
-        return `
-                <details id="${detailsId}" class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpenStr}>
-                    <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800/80 hover:bg-gray-700 transition-colors select-none">
-                        <div class="flex items-center space-x-3">
-                            <h3 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
-                               ${levelNames[level]}
-                            </h3>
-                            ${completedCount === tasks.length && tasks.length > 0 ? '<span class="text-yellow-500 text-xs border border-yellow-500/50 px-2 py-0.5 rounded-full">ALL CLEAR</span>' : ''}
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${completedCount} / ${tasks.length}</span>
-                            <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                            </svg>
-                        </div>
-                    </summary>
-                    <div class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
-                        ${tasks.length > 0 ? tasks.map(c => renderTaskCard(c, userProgress)).join('') : '<div class="text-gray-500 text-sm italic">本區段尚無題目</div>'}
-                    </div>
-                </details>
-                `;
+        return renderLevelGroup(level, levelGroups[level] || [], userProgress, levelNames);
     }).join('')}
         </div>
         
@@ -491,28 +448,31 @@ export function setupStudentEvents() {
             btn.textContent = "✓ 已通關";
             btn.classList.add("bg-green-600");
 
-            // NEW: Partial Update Strategy directly
-            // 1. Find the container
-            // The card is the great-great-grandparent of the button (button -> div -> div -> div -> card)
-            // Or simpler: give ID to card wrapper in renderTaskCard.
-            // Let's assume renderTaskCard now adds id="card-${c.id}"
+            // Fetch latest progress to ensure correct count
+            const { getUserProgress } = await import("../services/classroom.js");
+            const newProgress = await getUserProgress(userId);
 
-            // 2. Re-render just this card
+            // Re-render the level group to update count and all-clear status
             const challenge = cachedChallenges.find(c => c.id === challengeId);
-            const newProgress = { [challengeId]: { status: 'completed', submission_prompt: prompt } };
+            const level = challenge.level;
 
-            // We need to merge with existing progress to pass to renderTaskCard? 
-            // Actually renderTaskCard takes the whole userProgress map.
-            // But for this specific card, we can just pass a map containing just this one, because renderTaskCard(c, map) only looks up map[c.id].
+            const levelGroups = {
+                beginner: cachedChallenges.filter(c => c.level === 'beginner'),
+                intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
+                advanced: cachedChallenges.filter(c => c.level === 'advanced')
+            };
+            const levelNames = {
+                beginner: "初級 (Beginner)",
+                intermediate: "中級 (Intermediate)",
+                advanced: "高級 (Advanced)"
+            };
 
-            const newCardHTML = renderTaskCard(challenge, newProgress);
+            const newGroupHTML = renderLevelGroup(level, levelGroups[level], newProgress, levelNames);
+            const detailEl = document.getElementById(`details-group-${level}`);
 
-            // 3. Replace in DOM
-            const oldCard = document.getElementById(`card-${challengeId}`);
-            if (oldCard) {
-                oldCard.outerHTML = newCardHTML;
+            if (detailEl) {
+                detailEl.outerHTML = newGroupHTML;
             } else {
-                // Fallback if ID not found (should not happen if we update renderTaskCard)
                 const app = document.querySelector('#app');
                 app.innerHTML = await renderStudentView();
             }
@@ -624,6 +584,45 @@ window.closePeerModal = () => {
     document.getElementById('peer-modal').classList.add('hidden');
 };
 
+// Helper to render a level group (Accordion)
+function renderLevelGroup(level, tasks, userProgress, levelNames) {
+    const detailsId = `details-group-${level}`;
+    const existingDetails = document.getElementById(detailsId);
+    let isOpenStr = '';
+
+    if (existingDetails) {
+        if (existingDetails.hasAttribute('open')) isOpenStr = 'open';
+    } else {
+        // Initial Load defaults
+        if (level === 'beginner') isOpenStr = 'open';
+    }
+
+    // Count completed
+    const completedCount = tasks.filter(t => userProgress[t.id]?.status === 'completed').length;
+
+    return `
+            <details id="${detailsId}" class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpenStr}>
+                <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800/80 hover:bg-gray-700 transition-colors select-none">
+                    <div class="flex items-center space-x-3">
+                        <h3 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
+                           ${levelNames[level]}
+                        </h3>
+                        ${completedCount === tasks.length && tasks.length > 0 ? '<span class="text-yellow-500 text-xs border border-yellow-500/50 px-2 py-0.5 rounded-full">ALL CLEAR</span>' : ''}
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${completedCount} / ${tasks.length}</span>
+                        <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                </summary>
+                <div class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
+                    ${tasks.length > 0 ? tasks.map(c => renderTaskCard(c, userProgress)).join('') : '<div class="text-gray-500 text-sm italic">本區段尚無題目</div>'}
+                </div>
+            </details>
+            `;
+}
+
 window.loadPeerPrompts = async (challengeId) => {
     const container = document.getElementById('peer-prompts-container');
     container.innerHTML = '<div class="text-center text-gray-400 py-10">載入中...</div>';