Upload 10 files

src/views/StudentView.js

@@ -684,6 +684,17 @@ window.closeReferenceModal = () => {
     if (el) el.parentElement.remove();
 };
 
+window.openReferenceModalForLevel = async (level) => {
+    const userId = localStorage.getItem('vibecoding_user_id');
+    const { getUserProgress } = await import("../services/classroom.js");
+    let progress = {};
+    if (userId) {
+        progress = await getUserProgress(userId);
+    }
+    const tasks = cachedChallenges.filter(c => c.level === level);
+    window.showReferenceComparison(level, tasks, progress);
+};
+
 // Helper to render a level group (Accordion)
 function renderLevelGroup(level, tasks, userProgress, levelNames) {
     const detailsId = `details-group-${level}`;
@@ -707,7 +718,15 @@ function renderLevelGroup(level, tasks, userProgress, levelNames) {
                         <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>' : ''}
+                        ${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>
+                            <button onclick="event.preventDefault(); event.stopPropagation(); window.openReferenceModalForLevel('${level}')" class="ml-2 text-xs bg-cyan-900/50 hover:bg-cyan-800 text-cyan-300 border border-cyan-500/50 px-2 py-0.5 rounded-full transition-colors flex flex-row items-center justify-center space-x-1 shadow-sm font-bold relative group">
+                                <span class="bg-cyan-400/20 rounded-full p-0.5 group-hover:bg-cyan-400/50 transition-colors">
+                                    <svg class="w-3 h-3 group-hover:scale-110 transition-transform text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+                                </span>
+                                <span>按此看參考答案</span>
+                            </button>
+                        ` : ''}
                     </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>