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

app/results/logic/page.tsx

@@ -161,23 +161,29 @@ export default function LogicResultsPage() {
                   {scoreLevel.level}
                 </Badge>
               </div>
-              <p className="text-lg text-muted-foreground">{scoreLevel.description}</p>
+              <p className="text-lg text-muted-foreground mb-3">{scoreLevel.description}</p>
+              <div className="bg-muted/50 rounded-lg p-4 text-sm">
+                <p className="text-muted-foreground">
+                  <span className="font-medium">👉 建議：</span>
+                  {scoreLevel.suggestion}
+                </p>
+              </div>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+              <div className="grid grid-cols-3 gap-4 mb-6">
                 <div className="text-center">
                   <div className="text-2xl font-bold text-green-600 mb-1">{results.correctAnswers}</div>
-                  <div className="text-sm text-muted-foreground">答對題數</div>
+                  <div className="text-xs text-muted-foreground">答對題數</div>
                 </div>
                 <div className="text-center">
                   <div className="text-2xl font-bold text-primary mb-1">{results.totalQuestions}</div>
-                  <div className="text-sm text-muted-foreground">總題數</div>
+                  <div className="text-xs text-muted-foreground">總題數</div>
                 </div>
                 <div className="text-center">
                   <div className="text-2xl font-bold text-accent mb-1">
                     {Math.round((results.correctAnswers / results.totalQuestions) * 100)}%
                   </div>
-                  <div className="text-sm text-muted-foreground">正確率</div>
+                  <div className="text-xs text-muted-foreground">正確率</div>
                 </div>
               </div>
               <Progress value={results.score} className="h-3 mb-4" />
@@ -211,36 +217,36 @@ export default function LogicResultsPage() {
                   const userOptionText = userAnswer ? getOptionText(userAnswer) : "未作答"
 
                   return (
-                    <div key={question.id} className="border rounded-lg p-4">
+                    <div key={question.id} className="border rounded-lg p-3 sm:p-4">
                       <div className="flex items-start gap-3 mb-3">
                         <div className="flex-shrink-0 mt-1">
                           {isCorrect ? (
-                            <CheckCircle className="w-5 h-5 text-green-500" />
+                            <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
                           ) : (
-                            <XCircle className="w-5 h-5 text-red-500" />
+                            <XCircle className="w-4 h-4 sm:w-5 sm:h-5 text-red-500" />
                           )}
                         </div>
-                        <div className="flex-1">
-                          <h3 className="font-medium mb-2 text-balance">
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-medium mb-2 text-sm sm:text-base text-balance">
                             第{index + 1}題：{question.question}
                           </h3>
-                          <div className="space-y-2 text-sm">
-                            <div className="flex items-center gap-2">
-                              <span className="text-muted-foreground">你的答案：</span>
-                              <Badge variant={isCorrect ? "default" : "destructive"}>
+                          <div className="space-y-2 text-xs sm:text-sm">
+                            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+                              <span className="text-muted-foreground text-xs">你的答案：</span>
+                              <Badge variant={isCorrect ? "default" : "destructive"} className="text-xs w-fit">
                                 {userAnswer ? `${userAnswer}. ${userOptionText}` : "未作答"}
                               </Badge>
                             </div>
                             {!isCorrect && (
-                              <div className="flex items-center gap-2">
-                                <span className="text-muted-foreground">正確答案：</span>
-                                <Badge variant="outline" className="border-green-500 text-green-700">
+                              <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
+                                <span className="text-muted-foreground text-xs">正確答案：</span>
+                                <Badge variant="outline" className="border-green-500 text-green-700 text-xs w-fit">
                                   {question.correct_answer}. {correctOptionText}
                                 </Badge>
                               </div>
                             )}
                             {question.explanation && (
-                              <div className="mt-2 p-3 bg-muted/50 rounded text-sm">
+                              <div className="mt-2 p-2 sm:p-3 bg-muted/50 rounded text-xs sm:text-sm">
                                 <strong>解析：</strong>
                                 {question.explanation}
                               </div>
@@ -256,20 +262,20 @@ export default function LogicResultsPage() {
           </Card>
 
           {/* Actions */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
+            <Button asChild size="lg" className="w-full sm:w-auto">
               <Link href="/">
                 <Home className="w-4 h-4 mr-2" />
-                <span className="hidden sm:inline">返回首頁</span>
+                <span>返回首頁</span>
               </Link>
             </Button>
-            <Button asChild variant="outline" size="lg">
+            <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
               <Link href="/tests/logic">
                 <RotateCcw className="w-4 h-4 mr-2" />
                 重新測試
               </Link>
             </Button>
-            <Button asChild variant="outline" size="lg">
+            <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
               <Link href="/tests/creative">開始創意測試</Link>
             </Button>
           </div>

package.json

@@ -11,6 +11,8 @@
     "test-login": "node scripts/test-login.js",
     "check-passwords": "node scripts/check-passwords.js",
     "check-logic-questions": "node scripts/check-logic-questions.js",
+    "test-score-levels": "node scripts/test-score-levels.js",
+    "test-responsive-design": "node scripts/test-responsive-design.js",
     "update-logic-table": "node scripts/update-logic-table.js",
     "seed-db": "npx tsx lib/database/seed.ts",
     "seed-logic-questions": "npx tsx lib/database/seed-logic-questions.ts",

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✅ 評分系統測試完成')