diff --git a/app/results/creative/page.tsx b/app/results/creative/page.tsx index f7a4b8f..8b647e2 100644 --- a/app/results/creative/page.tsx +++ b/app/results/creative/page.tsx @@ -191,13 +191,16 @@ export default function CreativeResultsPage() { - {/* Detailed Feedback */} + {/* Detailed Feedback Chart */} - 詳細反饋 + + + 創意能力分析圖表 + -
+

創意能力評估

@@ -211,21 +214,138 @@ export default function CreativeResultsPage() {

-
- {categoryResults.map((category) => ( -
-

{category.name}

-
- - {category.score}% -
-

- {category.score >= 80 && "表現優秀，繼續保持"} - {category.score >= 60 && category.score < 80 && "表現良好，有提升空間"} - {category.score < 60 && "需要重點提升"} -

+ {/* Radar Chart */} +
+

能力維度雷達圖

+
+
+ {/* Radar Chart Background */} + + {/* Grid circles */} + + + + + + {/* 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 ( + + ) + })} + + {/* 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 ( + + {/* Data point */} + + {/* Label - positioned closer to the chart */} + + {category.name} + + {/* Score label - positioned above the data point */} + + {category.score}% + + + ) + })} + + {/* Area fill */} + { + 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" + /> +
- ))} +
+ + {/* Legend */} +
+
+ {categoryResults.map((category) => ( +
+
+ {category.name} +
+ ))} +
+
diff --git a/package.json b/package.json index b6589a1..f229f7f 100644 --- a/package.json +++ b/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", diff --git a/scripts/test-creative-chart.js b/scripts/test-creative-chart.js new file mode 100644 index 0000000..803e7cb --- /dev/null +++ b/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✅ 圖表功能測試完成')