優化手機板、創意題呈現結果

app/results/creative/page.tsx

@@ -44,11 +44,36 @@ export default function CreativeResultsPage() {
   }
 
   const getCreativityLevel = (score: number) => {
-    if (score >= 85) return { level: "極具創意", color: "bg-purple-500", description: "擁有卓越的創新思維和想像力" }
+    if (score >= 90) return { 
-    if (score >= 75) return { level: "很有創意", color: "bg-blue-500", description: "具備較強的創造性思維能力" }
+      level: "創意巔峰者", 
-    if (score >= 65) return { level: "有一定創意", color: "bg-green-500", description: "具有一定的創新潛力" }
+      color: "bg-purple-600", 
-    if (score >= 50) return { level: "創意一般", color: "bg-yellow-500", description: "創造性思維有待提升" }
+      description: "創意力近乎無窮，你是團隊裡的靈感源泉，總能帶來突破性的想法。",
-    return { level: "缺乏創意", color: "bg-red-500", description: "需要培養創新思維能力" }
+      suggestion: "你不只創造靈感，更能影響他人。如果能結合執行力，你將成為真正的創新領袖。"
+    }
+    if (score >= 75) return { 
+      level: "創意引領者", 
+      color: "bg-blue-500", 
+      description: "你是靈感的推動者！總是能在團體中主動拋出新想法，激發別人跟進。",
+      suggestion: "持續累積學習，讓你的靈感不僅是點子，而能帶動真正的行動。"
+    }
+    if (score >= 55) return { 
+      level: "創意實踐者", 
+      color: "bg-green-500", 
+      description: "靈感已經隨手可得，在團體中也常被認為是「有創意的人」。",
+      suggestion: "再給自己一點勇氣，不要害怕挑戰慣例，你的創意將更有力量。"
+    }
+    if (score >= 35) return { 
+      level: "創意開拓者", 
+      color: "bg-yellow-500", 
+      description: "你其實有自己的想法，但有時習慣跟隨大多數人的步伐。",
+      suggestion: "試著勇敢說出腦中天馬行空的念頭，你會發現，這些點子或許就是團隊需要的突破口。"
+    }
+    return { 
+      level: "創意萌芽者", 
+      color: "bg-red-500", 
+      description: "還在創意旅程的起點。雖然暫時表現平淡，但這正是無限潛力的開端！",
+      suggestion: "觀察生活小事，或閱讀不同領域的內容，讓靈感一點一滴積累。"
+    }
   }
 
   const creativityLevel = getCreativityLevel(results.score)
@@ -111,23 +136,29 @@ export default function CreativeResultsPage() {
                   {creativityLevel.level}
                 </Badge>
               </div>
-              <p className="text-lg text-muted-foreground">{creativityLevel.description}</p>
+              <p className="text-lg text-muted-foreground mb-3">{creativityLevel.description}</p>
+              <div className="bg-muted/50 rounded-lg p-4 text-sm">
+                <p className="text-muted-foreground">
+                  <span className="font-medium">👉 建議：</span>
+                  {creativityLevel.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-accent mb-1">{results.totalScore}</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.maxScore}</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-green-600 mb-1">
                     {Math.round((results.totalScore / results.maxScore) * 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" />
@@ -143,15 +174,15 @@ export default function CreativeResultsPage() {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                 {categoryResults.map((category) => (
-                  <div key={category.category} className="space-y-3">
+                  <div key={category.category} className="space-y-2 md:space-y-3">
                     <div className="flex justify-between items-center">
-                      <h3 className="font-medium">{category.name}</h3>
+                      <h3 className="font-medium text-sm md:text-base">{category.name}</h3>
-                      <Badge variant="outline">{category.score}分</Badge>
+                      <Badge variant="outline" className="text-xs">{category.score}分</Badge>
                     </div>
                     <Progress value={category.score} className="h-2" />
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-xs md:text-sm text-muted-foreground">
                       {category.rawScore} / {category.maxRawScore} 分
                     </p>
                   </div>
@@ -167,9 +198,9 @@ export default function CreativeResultsPage() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
-                <div className="p-4 bg-muted/50 rounded-lg">
+                <div className="p-3 md:p-4 bg-muted/50 rounded-lg">
-                  <h3 className="font-medium mb-2">創意能力評估</h3>
+                  <h3 className="font-medium mb-2 text-sm md:text-base">創意能力評估</h3>
-                  <p className="text-sm text-muted-foreground leading-relaxed">
+                  <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">
                     基於您的測試結果，您在創意思維方面表現為「{creativityLevel.level}」水平。
                     {results.score >= 75 &&
                       "您具備出色的創新思維能力，善於從不同角度思考問題，能夠產生獨特的想法和解決方案。"}
@@ -180,13 +211,13 @@ export default function CreativeResultsPage() {
                   </p>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
                   {categoryResults.map((category) => (
-                    <div key={category.category} className="p-4 border rounded-lg">
+                    <div key={category.category} className="p-3 md:p-4 border rounded-lg">
-                      <h4 className="font-medium mb-2">{category.name}</h4>
+                      <h4 className="font-medium mb-2 text-sm md:text-base">{category.name}</h4>
                       <div className="flex items-center gap-2 mb-2">
                         <Progress value={category.score} className="flex-1 h-2" />
-                        <span className="text-sm font-medium">{category.score}%</span>
+                        <span className="text-xs md:text-sm font-medium">{category.score}%</span>
                       </div>
                       <p className="text-xs text-muted-foreground">
                         {category.score >= 80 && "表現優秀，繼續保持"}
@@ -201,20 +232,20 @@ export default function CreativeResultsPage() {
           </Card>
 
           {/* Actions */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
-            <Button asChild size="lg">
+            <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/creative">
                 <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/logic">開始邏輯測試</Link>
             </Button>
           </div>

package.json

@@ -16,6 +16,7 @@
     "test-responsive-design": "node scripts/test-responsive-design.js",
     "test-reverse-scoring": "node scripts/test-reverse-scoring.js",
     "test-creative-flow": "node scripts/test-creative-flow.js",
+    "test-creative-score-levels": "node scripts/test-creative-score-levels.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-creative-responsive-design.js

@@ -0,0 +1,55 @@
+// 測試創意測試結果頁面的響應式設計
+const responsiveClasses = {
+  // 統計數據區域
+  statsGrid: "grid grid-cols-3 gap-4 mb-6",
+  statsText: "text-xs text-muted-foreground",
+  
+  // 能力維度分析區域
+  categoryGrid: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6",
+  categoryItem: "space-y-2 md:space-y-3",
+  categoryTitle: "text-sm md:text-base",
+  categoryBadge: "text-xs",
+  categoryScore: "text-xs md:text-sm",
+  
+  // 詳細反饋區域
+  feedbackCard: "p-3 md:p-4",
+  feedbackTitle: "text-sm md:text-base",
+  feedbackText: "text-xs md:text-sm",
+  feedbackGrid: "grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4",
+  
+  // 按鈕區域
+  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(60))
+
+console.log('\n📊 統計數據區域:')
+console.log(`網格佈局: ${responsiveClasses.statsGrid}`)
+console.log(`標籤文字: ${responsiveClasses.statsText}`)
+
+console.log('\n📋 能力維度分析區域:')
+console.log(`網格佈局: ${responsiveClasses.categoryGrid}`)
+console.log(`項目間距: ${responsiveClasses.categoryItem}`)
+console.log(`標題大小: ${responsiveClasses.categoryTitle}`)
+console.log(`徽章大小: ${responsiveClasses.categoryBadge}`)
+console.log(`分數文字: ${responsiveClasses.categoryScore}`)
+
+console.log('\n💬 詳細反饋區域:')
+console.log(`卡片內邊距: ${responsiveClasses.feedbackCard}`)
+console.log(`標題大小: ${responsiveClasses.feedbackTitle}`)
+console.log(`文字大小: ${responsiveClasses.feedbackText}`)
+console.log(`網格佈局: ${responsiveClasses.feedbackGrid}`)
+
+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-creative-score-levels.js

@@ -0,0 +1,55 @@
+// 測試新的創意評分系統
+const testScores = [0, 20, 40, 50, 60, 70, 80, 85, 90, 95, 100]
+
+function getCreativityLevel(score) {
+  if (score >= 90) return { 
+    level: "創意巔峰者", 
+    color: "bg-purple-600", 
+    description: "創意力近乎無窮，你是團隊裡的靈感源泉，總能帶來突破性的想法。",
+    suggestion: "你不只創造靈感，更能影響他人。如果能結合執行力，你將成為真正的創新領袖。"
+  }
+  if (score >= 75) return { 
+    level: "創意引領者", 
+    color: "bg-blue-500", 
+    description: "你是靈感的推動者！總是能在團體中主動拋出新想法，激發別人跟進。",
+    suggestion: "持續累積學習，讓你的靈感不僅是點子，而能帶動真正的行動。"
+  }
+  if (score >= 55) return { 
+    level: "創意實踐者", 
+    color: "bg-green-500", 
+    description: "靈感已經隨手可得，在團體中也常被認為是「有創意的人」。",
+    suggestion: "再給自己一點勇氣，不要害怕挑戰慣例，你的創意將更有力量。"
+  }
+  if (score >= 35) 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 = getCreativityLevel(score)
+  console.log(`\n📊 分數: ${score}`)
+  console.log(`🏆 等級: ${level.level}`)
+  console.log(`📝 描述: ${level.description}`)
+  console.log(`💡 建議: ${level.suggestion}`)
+  console.log('-'.repeat(60))
+})
+
+console.log('\n✅ 創意評分系統測試完成')
+console.log('\n📋 評分標準:')
+console.log('- 90分以上: 創意巔峰者')
+console.log('- 75-89分: 創意引領者')
+console.log('- 55-74分: 創意實踐者')
+console.log('- 35-54分: 創意開拓者')
+console.log('- 35分以下: 創意萌芽者')