Upload 10 files

src/views/AdminView.js

@@ -52,6 +52,10 @@ export function renderAdminView() {
                         <label class="block text-gray-400 mb-1">連結 (GeminiCanvas Link/Code)</label>
                         <input type="text" id="edit-link" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
                     </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">參考答案 (Reference Answer)</label>
+                        <textarea id="edit-reference" rows="4" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white placeholder-gray-500" placeholder="提示詞沒有標準答案，只要能有效修正程式，就是好的提示詞，此答案僅供參考..."></textarea>
+                    </div>
                     <div>
                         <label class="block text-gray-400 mb-1">排序 (Order)</label>
                         <input type="number" id="edit-order" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" value="1">
@@ -107,6 +111,7 @@ export function setupAdminEvents() {
             level: document.getElementById('edit-level').value,
             description: document.getElementById('edit-desc').value,
             link: document.getElementById('edit-link').value,
+            reference: document.getElementById('edit-reference').value,
             order: parseInt(document.getElementById('edit-order').value) || 0
         };
 
@@ -203,10 +208,10 @@ window.openModal = function (challenge = null, defaultLevel = 'beginner') {
     // Reset or Fill
     document.getElementById('edit-id').value = challenge ? challenge.id : '';
     document.getElementById('edit-title').value = challenge ? challenge.title : '';
-    // Use challenge level if editing, otherwise use defaultLevel passed from section button
     document.getElementById('edit-level').value = challenge ? challenge.level : defaultLevel;
     document.getElementById('edit-desc').value = challenge ? challenge.description : '';
     document.getElementById('edit-link').value = challenge ? challenge.link : '';
+    document.getElementById('edit-reference').value = challenge ? (challenge.reference || '') : '';
     document.getElementById('edit-order').value = challenge ? challenge.order : '1';
 
     title.textContent = challenge ? '編輯題目' : '新增題目';

src/views/StudentView.js

@@ -477,6 +477,17 @@ export function setupStudentEvents() {
                 app.innerHTML = await renderStudentView();
             }
 
+            // 檢查是否已完成該層級所有題目
+            const levelTasks = levelGroups[level] || [];
+            const completedCount = levelTasks.filter(t => newProgress[t.id]?.status === 'completed').length;
+            if (completedCount === levelTasks.length && levelTasks.length > 0) {
+                setTimeout(() => {
+                    if (confirm(`恭喜！您已完成${levelNames[level]}所有關卡！是否要與參考答案進行核對？`)) {
+                        window.showReferenceComparison(level, levelTasks, newProgress);
+                    }
+                }, 500);
+            }
+
         } catch (error) {
             console.error(error);
             btn.textContent = originalText;
@@ -584,6 +595,95 @@ window.closePeerModal = () => {
     document.getElementById('peer-modal').classList.add('hidden');
 };
 
+function renderReferenceModal(level, tasks, progress) {
+    const levelNames = {
+        beginner: "初級 (Beginner)",
+        intermediate: "中級 (Intermediate)",
+        advanced: "高級 (Advanced)"
+    };
+    
+    let listHtml = tasks.map(c => {
+        const p = progress[c.id] || {};
+        const refAnswer = c.reference || '尚無參考答案\n(No reference answer provided)';
+        return `
+            <div class="bg-gray-800 rounded-xl p-6 border border-gray-600 shadow-md transform transition-all hover:-translate-y-1 hover:shadow-cyan-900/50">
+                <h4 class="text-xl text-cyan-400 font-bold mb-4 drop-shadow-md pb-2 border-b border-gray-700">${c.title}</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="flex flex-col">
+                        <div class="text-sm font-bold text-gray-400 mb-2 uppercase tracking-wide flex items-center">
+                            <svg class="w-4 h-4 mr-1 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                            您的提示詞 (Your Prompt)：
+                        </div>
+                        <div class="flex-1 bg-black/60 border border-gray-600 p-4 rounded-lg font-mono text-gray-200 text-sm whitespace-pre-wrap leading-relaxed shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)] overflow-x-auto">${p.submission_prompt || '<span class="text-gray-600 italic">未提交 (Not Submitted)</span>'}</div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="text-sm font-bold text-green-400 mb-2 uppercase tracking-wide flex items-center">
+                            <svg class="w-4 h-4 mr-1 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            參考答案 (Reference Answer)：
+                        </div>
+                        <div class="flex-1 bg-green-900/10 border border-green-700/50 p-4 rounded-lg font-mono text-green-300 text-sm whitespace-pre-wrap leading-relaxed shadow-[inset_0_2px_10px_rgba(34,197,94,0.1)] overflow-x-auto">${refAnswer}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+
+    return `
+        <div id="reference-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur-md flex items-center justify-center z-[100] p-4 transition-all duration-300">
+            <div class="bg-gray-800 rounded-2xl w-full max-w-5xl max-h-[90vh] flex flex-col border border-gray-700 shadow-[0_0_50px_rgba(6,182,212,0.15)] overflow-hidden scale-100 origin-center animate-fade-in-up">
+                <div class="bg-gradient-to-r from-blue-900 to-cyan-900 p-6 flex justify-between items-center border-b border-cyan-800">
+                    <div>
+                        <h3 class="text-2xl font-black text-white flex items-center space-x-3 drop-shadow-md">
+                            <span class="text-3xl filter drop-shadow-[0_0_5px_rgba(34,211,238,0.8)]">✨</span>
+                            <span>${levelNames[level]} - 參考答案核對</span>
+                        </h3>
+                    </div>
+                    <button onclick="window.closeReferenceModal()" class="text-cyan-200 hover:text-white bg-cyan-900/50 hover:bg-cyan-800 p-2 rounded-full transition-all">
+                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
+                
+                <div class="p-6 flex-1 overflow-y-auto space-y-6 bg-gray-900 custom-scrollbar shadow-inner">
+                    ${listHtml}
+                </div>
+                
+                <div class="bg-gray-800 p-5 border-t border-gray-700 text-center">
+                    <p class="text-yellow-400 text-sm md:text-base font-bold flex flex-col md:flex-row items-center justify-center md:space-x-2">
+                        <span class="text-xl mb-1 md:mb-0">💡</span>
+                        <span>提示詞沒有標準答案，只要能有效修正程式，就是好的提示詞，此答案僅供參考。</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <style>
+            @keyframes fade-in-up {
+                0% { opacity: 0; transform: translateY(20px) scale(0.95); }
+                100% { opacity: 1; transform: translateY(0) scale(1); }
+            }
+            .animate-fade-in-up {
+                animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+            }
+        </style>
+    `;
+}
+
+window.showReferenceComparison = (level, tasks, progress) => {
+    const existing = document.getElementById('reference-modal');
+    if (existing) existing.remove();
+    
+    const div = document.createElement('div');
+    div.innerHTML = renderReferenceModal(level, tasks, progress);
+    
+    // Cleanup any existing event listeners before adding new modal to prevent issues
+    document.body.appendChild(div);
+};
+
+window.closeReferenceModal = () => {
+    const el = document.getElementById('reference-modal');
+    // Wrap removal in transition logic if needed, simple remove for now
+    if (el) el.parentElement.remove();
+};
+
 // Helper to render a level group (Accordion)
 function renderLevelGroup(level, tasks, userProgress, levelNames) {
     const detailsId = `details-group-${level}`;