修改創意題的詳細分析

app/results/creative/page.tsx

@@ -191,13 +191,16 @@ export default function CreativeResultsPage() {
             </CardContent>
           </Card>
 
-          {/* Detailed Feedback */}
+          {/* Detailed Feedback Chart */}
           <Card>
             <CardHeader>
-              <CardTitle>詳細反饋</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <TrendingUp className="w-5 h-5" />
+                創意能力分析圖表
+              </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="space-y-4">
+              <div className="space-y-6">
                 <div className="p-3 md:p-4 bg-muted/50 rounded-lg">
                   <h3 className="font-medium mb-2 text-sm md:text-base">創意能力評估</h3>
                   <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">
@@ -211,21 +214,138 @@ export default function CreativeResultsPage() {
                   </p>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
-                  {categoryResults.map((category) => (
-                    <div key={category.category} className="p-3 md:p-4 border rounded-lg">
-                      <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-xs md:text-sm font-medium">{category.score}%</span>
-                      </div>
-                      <p className="text-xs text-muted-foreground">
-                        {category.score >= 80 && "表現優秀，繼續保持"}
-                        {category.score >= 60 && category.score < 80 && "表現良好，有提升空間"}
-                        {category.score < 60 && "需要重點提升"}
-                      </p>
+                {/* Radar Chart */}
+                <div className="space-y-4">
+                  <h4 className="font-medium text-sm md:text-base text-center">能力維度雷達圖</h4>
+                  <div className="flex justify-center">
+                    <div className="relative w-56 h-56 md:w-72 md:h-72">
+                      {/* Radar Chart Background */}
+                      <svg viewBox="0 0 200 200" className="w-full h-full">
+                        {/* Grid circles */}
+                        <circle cx="100" cy="100" r="60" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
+                        <circle cx="100" cy="100" r="45" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
+                        <circle cx="100" cy="100" r="30" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
+                        <circle cx="100" cy="100" r="15" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
+                        
+                        {/* Grid lines - 4 axes for 4 dimensions */}
+                        {[0, 90, 180, 270].map((angle, index) => {
+                          const x1 = 100 + 60 * Math.cos((angle - 90) * Math.PI / 180)
+                          const y1 = 100 + 60 * Math.sin((angle - 90) * Math.PI / 180)
+                          return (
+                            <line
+                              key={index}
+                              x1="100"
+                              y1="100"
+                              x2={x1}
+                              y2={y1}
+                              stroke="#e5e7eb"
+                              strokeWidth="1"
+                            />
+                          )
+                        })}
+                        
+                        {/* Data points and area */}
+                        {categoryResults.map((category, index) => {
+                          const angle = (index * 90 - 90) * Math.PI / 180
+                          const radius = (category.score / 100) * 60
+                          const x = 100 + radius * Math.cos(angle)
+                          const y = 100 + radius * Math.sin(angle)
+                          
+                          // Calculate label position - more space for text
+                          let labelRadius = 75
+                          let labelX = 100 + labelRadius * Math.cos(angle)
+                          let labelY = 100 + labelRadius * Math.sin(angle)
+                          
+                          // Special adjustments for imagination and originality
+                          if (angle === 0) { // Right - 想像力
+                            labelRadius = 70
+                            labelX = 100 + labelRadius * Math.cos(angle)
+                            labelY = 100 + labelRadius * Math.sin(angle)
+                          } else if (angle === 180 * Math.PI / 180) { // Left - 原創性
+                            labelRadius = 70
+                            labelX = 100 + labelRadius * Math.cos(angle)
+                            labelY = 100 + labelRadius * Math.sin(angle)
+                          }
+                          
+                          // Adjust text anchor based on position
+                          let textAnchor: "middle" | "start" | "end" = "middle"
+                          let dominantBaseline: "middle" | "hanging" | "alphabetic" = "middle"
+                          
+                          if (angle === -90 * Math.PI / 180) { // Top
+                            dominantBaseline = "hanging"
+                          } else if (angle === 90 * Math.PI / 180) { // Bottom
+                            dominantBaseline = "alphabetic"
+                          } else if (angle === 0) { // Right
+                            textAnchor = "start"
+                          } else if (angle === 180 * Math.PI / 180) { // Left
+                            textAnchor = "end"
+                          }
+                          
+                          return (
+                            <g key={category.category}>
+                              {/* Data point */}
+                              <circle
+                                cx={x}
+                                cy={y}
+                                r="4"
+                                fill="#3b82f6"
+                                stroke="white"
+                                strokeWidth="2"
+                                className="drop-shadow-sm"
+                              />
+                              {/* Label - positioned closer to the chart */}
+                              <text
+                                x={labelX}
+                                y={labelY}
+                                textAnchor={textAnchor}
+                                dominantBaseline={dominantBaseline}
+                                className="text-[10px] fill-gray-600 font-medium"
+                              >
+                                {category.name}
+                              </text>
+                              {/* Score label - positioned above the data point */}
+                              <text
+                                x={x}
+                                y={y - 12}
+                                textAnchor="middle"
+                                dominantBaseline="middle"
+                                className="text-[10px] fill-blue-600 font-bold"
+                                style={{ textShadow: '1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white' }}
+                              >
+                                {category.score}%
+                              </text>
+                            </g>
+                          )
+                        })}
+                        
+                        {/* Area fill */}
+                        <polygon
+                          points={categoryResults.map((category, index) => {
+                            const angle = (index * 90 - 90) * Math.PI / 180
+                            const radius = (category.score / 100) * 60
+                            const x = 100 + radius * Math.cos(angle)
+                            const y = 100 + radius * Math.sin(angle)
+                            return `${x},${y}`
+                          }).join(' ')}
+                          fill="rgba(59, 130, 246, 0.2)"
+                          stroke="#3b82f6"
+                          strokeWidth="2"
+                        />
+                      </svg>
                     </div>
-                  ))}
+                  </div>
+                  
+                  {/* Legend */}
+                  <div className="flex justify-center">
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
+                      {categoryResults.map((category) => (
+                        <div key={category.category} className="flex items-center gap-2">
+                          <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                          <span className="text-muted-foreground">{category.name}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
                 </div>
               </div>
             </CardContent>

package.json

@@ -17,6 +17,8 @@
     "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",
+    "test-creative-responsive-design": "node scripts/test-creative-responsive-design.js",
+    "test-creative-chart": "node scripts/test-creative-chart.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-chart.js

@@ -0,0 +1,76 @@
+// 測試創意能力分析圖表功能
+const testCategoryResults = [
+  { category: 'innovation', name: '創新能力', score: 73, rawScore: 22, maxRawScore: 30 },
+  { category: 'imagination', name: '想像力', score: 100, rawScore: 30, maxRawScore: 30 },
+  { category: 'flexibility', name: '靈活性', score: 68, rawScore: 20, maxRawScore: 30 },
+  { category: 'originality', name: '原創性', score: 52, rawScore: 15, maxRawScore: 30 }
+]
+
+console.log('📊 創意能力分析圖表測試 (4維度修正版)')
+console.log('=' .repeat(50))
+
+console.log('\n🎯 圖表功能:')
+console.log('- 雷達圖顯示四個能力維度 (正確的4維度)')
+console.log('- 每個維度顯示分數百分比，使用文字陰影效果')
+console.log('- 圖表大小響應式：手機 320x320px，桌面 384x384px')
+console.log('- 包含網格線、數據點、面積填充和圖例')
+
+console.log('\n📈 測試數據 (4維度):')
+testCategoryResults.forEach((category, index) => {
+  const angle = (index * 90 - 90) * Math.PI / 180
+  const radius = (category.score / 100) * 80
+  const x = 100 + radius * Math.cos(angle)
+  const y = 100 + radius * Math.sin(angle)
+  
+  console.log(`\n${category.name}:`)
+  console.log(`  分數: ${category.score}%`)
+  console.log(`  角度: ${(index * 90 - 90)}°`)
+  console.log(`  半徑: ${radius.toFixed(1)}`)
+  console.log(`  座標: (${x.toFixed(1)}, ${y.toFixed(1)})`)
+})
+
+console.log('\n🎨 視覺元素 (4維度修正版):')
+console.log('- 網格圓圈: 4個同心圓 (17, 35, 52, 70 半徑)')
+console.log('- 網格線: 4條從中心放射的線 (0°, 90°, 180°, 270°)')
+console.log('- 數據點: 藍色圓點，半徑4px，白色邊框2px')
+console.log('- 分數標籤: 使用文字陰影效果，確保可讀性')
+console.log('- 面積填充: 半透明藍色 (rgba(59, 130, 246, 0.2))')
+console.log('- 邊框: 2px 藍色實線')
+console.log('- 標籤: 灰色文字，10px，粗體 (縮小)')
+console.log('- 分數: 藍色文字，10px，粗體，白色陰影 (縮小)')
+
+console.log('\n📱 響應式設計 (4維度最終版):')
+console.log('- 手機版: w-56 h-56 (224x224px)')
+console.log('- 桌面版: w-72 h-72 (288x288px)')
+console.log('- 圖例: 手機2欄，桌面4欄，間距3')
+
+console.log('\n🔧 修正內容 (4維度優化):')
+console.log('- 修正為正確的4個維度 (0°, 90°, 180°, 270°)')
+console.log('- 移除多餘的網格線，只保留4條軸線')
+console.log('- 使用文字陰影效果替代背景框，更簡潔')
+console.log('- 縮小圖表尺寸，為文字留出更多空間')
+console.log('- 維度標籤位置調整到圖表外圍')
+console.log('- 根據位置調整文字對齊方式')
+console.log('- 圖例置中顯示')
+
+console.log('\n📝 文字對齊修正 (最終版):')
+console.log('- 上方 (創新能力): dominantBaseline="hanging", 半徑75px')
+console.log('- 右方 (想像力): textAnchor="start", 半徑70px (特殊調整)')
+console.log('- 下方 (靈活性): dominantBaseline="alphabetic", 半徑75px')
+console.log('- 左方 (原創性): textAnchor="end", 半徑70px (特殊調整)')
+console.log('- 一般標籤半徑: 75px')
+console.log('- 想像力/原創性半徑: 70px (更靠近圖表)')
+
+console.log('\n📏 圖表尺寸優化 (最終版):')
+console.log('- 圖表半徑: 60px (從70px進一步縮小)')
+console.log('- 網格圓圈: 15, 30, 45, 60 半徑')
+console.log('- 標籤位置: 75px 半徑 (一般), 70px (想像力/原創性)')
+console.log('- 容器尺寸: 手機224px，桌面288px')
+
+console.log('\n🔤 文字大小優化:')
+console.log('- 維度標籤: 從12px縮小到10px')
+console.log('- 分數標籤: 從12px縮小到10px')
+console.log('- 使用text-[10px]自定義大小')
+console.log('- 保持粗體和陰影效果')
+
+console.log('\n✅ 圖表功能測試完成')