修正手機板面、邏輯題給予回饋

scripts/test-responsive-design.js

@@ -0,0 +1,47 @@
+// 測試響應式設計的 CSS 類別
+const responsiveClasses = {
+  // 統計數據區域
+  statsGrid: "grid grid-cols-3 gap-4 mb-6",
+  statsText: "text-xs text-muted-foreground",
+  
+  // 詳細結果區域
+  questionCard: "border rounded-lg p-3 sm:p-4",
+  questionIcon: "w-4 h-4 sm:w-5 sm:h-5",
+  questionTitle: "text-sm sm:text-base",
+  questionContent: "text-xs sm:text-sm",
+  answerRow: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2",
+  badge: "text-xs w-fit",
+  explanation: "p-2 sm:p-3 text-xs sm:text-sm",
+  
+  // 按鈕區域
+  buttonContainer: "flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center",
+  button: "w-full sm:w-auto"
+}
+
+console.log('📱 響應式設計測試')
+console.log('=' .repeat(50))
+
+console.log('\n📊 統計數據區域:')
+console.log(`網格佈局: ${responsiveClasses.statsGrid}`)
+console.log(`標籤文字: ${responsiveClasses.statsText}`)
+
+console.log('\n📋 詳細結果區域:')
+console.log(`題目卡片: ${responsiveClasses.questionCard}`)
+console.log(`圖示大小: ${responsiveClasses.questionIcon}`)
+console.log(`題目標題: ${responsiveClasses.questionTitle}`)
+console.log(`內容文字: ${responsiveClasses.questionContent}`)
+console.log(`答案行: ${responsiveClasses.answerRow}`)
+console.log(`徽章: ${responsiveClasses.badge}`)
+console.log(`解析: ${responsiveClasses.explanation}`)
+
+console.log('\n🔘 按鈕區域:')
+console.log(`按鈕容器: ${responsiveClasses.buttonContainer}`)
+console.log(`按鈕樣式: ${responsiveClasses.button}`)
+
+console.log('\n✅ 響應式設計配置完成')
+console.log('\n📱 手機版特點:')
+console.log('- 統計數據始終 3 欄並排顯示')
+console.log('- 文字大小在手機上較小，桌面版較大')
+console.log('- 答案選項在手機上垂直排列，桌面版水平排列')
+console.log('- 按鈕在手機上全寬顯示，桌面版自動寬度')
+console.log('- 內邊距在手機上較小，桌面版較大')

scripts/test-score-levels.js

@@ -0,0 +1,49 @@
+// 測試新的評分系統
+const testScores = [0, 15, 25, 40, 55, 65, 75, 85, 95, 100]
+
+function getScoreLevel(score) {
+  if (score === 100) return { 
+    level: "邏輯巔峰者", 
+    color: "bg-purple-600", 
+    description: "近乎完美的邏輯典範！你像一台「推理引擎」，嚴謹又高效，幾乎不受陷阱干擾。",
+    suggestion: "多和他人分享你的思考路徑，能幫助團隊整體邏輯力提升。"
+  }
+  if (score >= 80) return { 
+    level: "邏輯大師", 
+    color: "bg-green-500", 
+    description: "你的思維如同精密儀器，能快速抓住題目關鍵，並做出有效推理。常常是團隊中「冷靜的分析者」。",
+    suggestion: "挑戰更高層次的難題，讓你的邏輯力更加精進。"
+  }
+  if (score >= 60) return { 
+    level: "邏輯高手", 
+    color: "bg-blue-500", 
+    description: "邏輯清晰穩定，大部分情境都能正確判斷。偶爾會因粗心錯過陷阱。",
+    suggestion: "在思維縝密之餘，更加留心細節，就能把錯誤率降到最低。"
+  }
+  if (score >= 30) return { 
+    level: "邏輯學徒", 
+    color: "bg-yellow-500", 
+    description: "已經抓到一些邏輯規律，能解決中等難度的問題。遇到複雜情境時，仍可能卡關。",
+    suggestion: "嘗試將問題拆解成小步驟，就像組裝樂高，每一塊拼好，答案就自然浮現。"
+  }
+  return { 
+    level: "邏輯探險新手", 
+    color: "bg-red-500", 
+    description: "還在邏輯森林的入口徘徊。思考時可能忽略細節，或被陷阱誤導。",
+    suggestion: "多練習經典邏輯題，像是在拼拼圖般，慢慢建立清晰的分析步驟。"
+  }
+}
+
+console.log('🧪 測試新的評分系統')
+console.log('=' .repeat(80))
+
+testScores.forEach(score => {
+  const level = getScoreLevel(score)
+  console.log(`\n📊 分數: ${score}`)
+  console.log(`🏆 等級: ${level.level}`)
+  console.log(`📝 描述: ${level.description}`)
+  console.log(`💡 建議: ${level.suggestion}`)
+  console.log('-'.repeat(60))
+})
+
+console.log('\n✅ 評分系統測試完成')