修正完整的管理者查看詳細功能
This commit is contained in:
@@ -55,6 +55,7 @@ interface Question {
|
|||||||
userAnswer?: string | number
|
userAnswer?: string | number
|
||||||
isCorrect?: boolean
|
isCorrect?: boolean
|
||||||
score?: number
|
score?: number
|
||||||
|
category?: 'innovation' | 'imagination' | 'flexibility' | 'originality'
|
||||||
created_at: string
|
created_at: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -394,82 +395,94 @@ function AdminResultDetailContent() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Score Overview */}
|
{/* Logic Test Overview */}
|
||||||
<Card className="text-center">
|
{result.type === 'logic' && (
|
||||||
<CardHeader>
|
<Card className="text-center mb-6">
|
||||||
<div
|
<CardHeader>
|
||||||
className={`w-24 h-24 ${scoreLevel.color} rounded-full flex items-center justify-center mx-auto mb-4`}
|
<div
|
||||||
>
|
className={`w-24 h-24 ${scoreLevel.color} rounded-full flex items-center justify-center mx-auto mb-4`}
|
||||||
<span className="text-3xl font-bold text-white">{result.score}</span>
|
>
|
||||||
</div>
|
<span className="text-3xl font-bold text-white">{result.score}</span>
|
||||||
<CardTitle className="text-3xl mb-2">測試完成！</CardTitle>
|
</div>
|
||||||
<div className="flex items-center justify-center gap-2 mb-4">
|
<CardTitle className="text-3xl mb-2">邏輯測試完成！</CardTitle>
|
||||||
<Badge variant="secondary" className="text-lg px-4 py-1">
|
<div className="flex items-center justify-center gap-2 mb-4">
|
||||||
{scoreLevel.level}
|
<Badge variant="secondary" className="text-lg px-4 py-1">
|
||||||
</Badge>
|
{scoreLevel.level}
|
||||||
</div>
|
</Badge>
|
||||||
<p className="text-lg text-muted-foreground mb-3">{scoreLevel.description}</p>
|
</div>
|
||||||
<div className="bg-muted/50 rounded-lg p-4 text-sm">
|
<p className="text-lg text-muted-foreground mb-3">{scoreLevel.description}</p>
|
||||||
<p className="text-muted-foreground">
|
<div className="bg-muted/50 rounded-lg p-4 text-sm">
|
||||||
<span className="font-medium">👉 建議：</span>
|
<p className="text-muted-foreground">
|
||||||
{scoreLevel.suggestion}
|
<span className="font-medium">👉 建議：</span>
|
||||||
</p>
|
{scoreLevel.suggestion}
|
||||||
</div>
|
</p>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
<CardContent>
|
||||||
{result.type === 'creative' ? (
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||||
<>
|
<div className="text-center">
|
||||||
<div className="text-center">
|
<div className="text-2xl font-bold text-green-600 mb-1">{correctAnswers}</div>
|
||||||
<div className="text-2xl font-bold text-green-600 mb-1">{displayTotalScore}</div>
|
<div className="text-xs 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">{totalQuestions}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">總題數</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-accent mb-1">
|
||||||
|
{totalQuestions > 0 ? Math.round((correctAnswers / totalQuestions) * 100) : 0}%
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center">
|
<div className="text-xs text-muted-foreground">正確率</div>
|
||||||
<div className="text-2xl font-bold text-primary mb-1">{displayMaxScore}</div>
|
</div>
|
||||||
<div className="text-xs text-muted-foreground">滿分</div>
|
</div>
|
||||||
</div>
|
<Progress value={result.score} className="h-3 mb-4" />
|
||||||
<div className="text-center">
|
</CardContent>
|
||||||
<div className="text-2xl font-bold text-accent mb-1">
|
</Card>
|
||||||
{displayScorePercentage}%
|
)}
|
||||||
</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">{correctAnswers}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">答對題數</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-primary mb-1">{totalQuestions}</div>
|
|
||||||
<div className="text-xs text-muted-foreground">總題數</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-2xl font-bold text-accent mb-1">
|
|
||||||
{totalQuestions > 0 ? Math.round((correctAnswers / totalQuestions) * 100) : 0}%
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-muted-foreground">正確率</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Progress value={result.score} className="h-3 mb-4" />
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Combined Test Analysis */}
|
{/* Creative Test Overview */}
|
||||||
{result.type === 'combined' && result.details && (
|
{result.type === 'creative' && (
|
||||||
<CombinedAnalysis
|
<Card className="text-center mb-6">
|
||||||
overallScore={result.score}
|
<CardHeader>
|
||||||
logicScore={result.details.logicScore}
|
<div
|
||||||
creativityScore={result.details.creativeScore}
|
className={`w-24 h-24 ${scoreLevel.color} rounded-full flex items-center justify-center mx-auto mb-4`}
|
||||||
balanceScore={result.details.abilityBalance}
|
>
|
||||||
level={getScoreLevel(result.score, result.type).level}
|
<span className="text-3xl font-bold text-white">{result.score}</span>
|
||||||
description={getScoreLevel(result.score, result.type).description}
|
</div>
|
||||||
logicBreakdown={result.details.breakdown}
|
<CardTitle className="text-3xl mb-2">創意測試完成！</CardTitle>
|
||||||
creativityBreakdown={result.details.breakdown}
|
<div className="flex items-center justify-center gap-2 mb-4">
|
||||||
/>
|
<Badge variant="secondary" className="text-lg px-4 py-1">
|
||||||
|
{scoreLevel.level}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<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-3 gap-4 mb-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-green-600 mb-1">{displayTotalScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">總得分</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-primary mb-1">{displayMaxScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">滿分</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold text-accent mb-1">
|
||||||
|
{displayScorePercentage}%
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">得分率</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Progress value={result.score} className="h-3 mb-4" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Creative Analysis for Creative Tests */}
|
{/* Creative Analysis for Creative Tests */}
|
||||||
@@ -483,6 +496,31 @@ function AdminResultDetailContent() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Combined Test Analysis */}
|
||||||
|
{result.type === 'combined' && result.details && (
|
||||||
|
<CombinedAnalysis
|
||||||
|
overallScore={result.score}
|
||||||
|
logicScore={result.details.logicScore || 0}
|
||||||
|
creativityScore={result.details.creativeScore || 0}
|
||||||
|
balanceScore={result.details.abilityBalance || 0}
|
||||||
|
level={getScoreLevel(result.score, result.type).level}
|
||||||
|
description={getScoreLevel(result.score, result.type).description}
|
||||||
|
logicBreakdown={result.details.breakdown}
|
||||||
|
creativityBreakdown={result.details.breakdown}
|
||||||
|
// 個別測試結果的詳細資料
|
||||||
|
logicCorrectAnswers={logicQuestions.filter(q => q.isCorrect).length}
|
||||||
|
logicTotalQuestions={logicQuestions.length}
|
||||||
|
logicLevel={getScoreLevel(result.details.logicScore || 0, 'logic').level}
|
||||||
|
logicDescription={getScoreLevel(result.details.logicScore || 0, 'logic').description}
|
||||||
|
logicSuggestion={getScoreLevel(result.details.logicScore || 0, 'logic').suggestion}
|
||||||
|
creativityTotalScore={creativeQuestions.reduce((sum, q) => sum + (q.score || 0), 0)}
|
||||||
|
creativityMaxScore={creativeQuestions.length * 5}
|
||||||
|
creativityLevel={getScoreLevel(result.details.creativeScore || 0, 'creative').level}
|
||||||
|
creativityDescription={getScoreLevel(result.details.creativeScore || 0, 'creative').description}
|
||||||
|
creativitySuggestion={getScoreLevel(result.details.creativeScore || 0, 'creative').suggestion}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Detailed Results */}
|
{/* Detailed Results */}
|
||||||
{questions.length > 0 && (
|
{questions.length > 0 && (
|
||||||
<Card>
|
<Card>
|
||||||
@@ -571,7 +609,7 @@ function AdminResultDetailContent() {
|
|||||||
</h3>
|
</h3>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{creativeQuestions.map((question, index) => {
|
{creativeQuestions.map((question, index) => {
|
||||||
const dimensionInfo = getDimensionInfo(question.category)
|
const dimensionInfo = getDimensionInfo(question.category || 'innovation')
|
||||||
return (
|
return (
|
||||||
<div key={question.id} className={`border rounded-lg p-3 sm:p-4 ${dimensionInfo.borderColor} bg-opacity-30`} style={{ backgroundColor: `${dimensionInfo.color.replace('bg-', '')}10` }}>
|
<div key={question.id} className={`border rounded-lg p-3 sm:p-4 ${dimensionInfo.borderColor} bg-opacity-30`} style={{ backgroundColor: `${dimensionInfo.color.replace('bg-', '')}10` }}>
|
||||||
<div className="flex items-start justify-between mb-2 sm:mb-3">
|
<div className="flex items-start justify-between mb-2 sm:mb-3">
|
||||||
|
|||||||
@@ -14,6 +14,17 @@ interface CombinedAnalysisProps {
|
|||||||
description: string
|
description: string
|
||||||
logicBreakdown?: any
|
logicBreakdown?: any
|
||||||
creativityBreakdown?: any
|
creativityBreakdown?: any
|
||||||
|
// 個別測試結果的詳細資料
|
||||||
|
logicCorrectAnswers?: number
|
||||||
|
logicTotalQuestions?: number
|
||||||
|
logicLevel?: string
|
||||||
|
logicDescription?: string
|
||||||
|
logicSuggestion?: string
|
||||||
|
creativityTotalScore?: number
|
||||||
|
creativityMaxScore?: number
|
||||||
|
creativityLevel?: string
|
||||||
|
creativityDescription?: string
|
||||||
|
creativitySuggestion?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CombinedAnalysis({
|
export function CombinedAnalysis({
|
||||||
@@ -24,7 +35,18 @@ export function CombinedAnalysis({
|
|||||||
level,
|
level,
|
||||||
description,
|
description,
|
||||||
logicBreakdown,
|
logicBreakdown,
|
||||||
creativityBreakdown
|
creativityBreakdown,
|
||||||
|
// 個別測試結果的詳細資料
|
||||||
|
logicCorrectAnswers,
|
||||||
|
logicTotalQuestions,
|
||||||
|
logicLevel,
|
||||||
|
logicDescription,
|
||||||
|
logicSuggestion,
|
||||||
|
creativityTotalScore,
|
||||||
|
creativityMaxScore,
|
||||||
|
creativityLevel,
|
||||||
|
creativityDescription,
|
||||||
|
creativitySuggestion
|
||||||
}: CombinedAnalysisProps) {
|
}: CombinedAnalysisProps) {
|
||||||
|
|
||||||
// 獲取等級顏色
|
// 獲取等級顏色
|
||||||
@@ -111,6 +133,119 @@ export function CombinedAnalysis({
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* 個別測試結果 */}
|
||||||
|
{(logicCorrectAnswers !== undefined || creativityTotalScore !== undefined) && (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* 邏輯思維測試 */}
|
||||||
|
{logicCorrectAnswers !== undefined && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Brain className="w-5 h-5 text-blue-600" />
|
||||||
|
邏輯思維測試
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 分數顯示 */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">得分</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Progress value={logicScore} className="w-24 h-2" />
|
||||||
|
<span className="text-2xl font-bold text-red-600">{logicScore}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 統計數據 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-green-600">{logicCorrectAnswers}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">答對題數</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-blue-600">{logicTotalQuestions}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">總題數</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 等級和描述 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-purple-500"></div>
|
||||||
|
<span className="font-medium text-sm">{logicLevel}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
{logicDescription}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
|
||||||
|
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">建議：</span>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">{logicSuggestion}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 創意能力測試 */}
|
||||||
|
{creativityTotalScore !== undefined && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Lightbulb className="w-5 h-5 text-orange-600" />
|
||||||
|
創意能力測試
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 分數顯示 */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">得分</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Progress value={creativityScore} className="w-24 h-2" />
|
||||||
|
<span className="text-2xl font-bold text-orange-600">{creativityScore}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 統計數據 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-green-600">{creativityTotalScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">原始得分</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-blue-600">{creativityMaxScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">滿分</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 等級和描述 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-3 h-3 rounded-full bg-purple-500"></div>
|
||||||
|
<span className="font-medium text-sm">{creativityLevel}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
{creativityDescription}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
|
||||||
|
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">建議：</span>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">{creativitySuggestion}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 能力分析 */}
|
{/* 能力分析 */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@@ -127,7 +262,7 @@ export function CombinedAnalysis({
|
|||||||
<Brain className="w-6 h-6 text-blue-600" />
|
<Brain className="w-6 h-6 text-blue-600" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-medium text-sm mb-2">邏輯思維</h3>
|
<h3 className="font-medium text-sm mb-2">邏輯思維</h3>
|
||||||
<div className="text-2xl font-bold text-red-600 mb-1">{logicScore}分</div>
|
<div className="text-3xl font-bold text-red-600 mb-1">{logicScore}</div>
|
||||||
<div className={`text-xs ${logicStatus.color} mb-2`}>{logicStatus.text}</div>
|
<div className={`text-xs ${logicStatus.color} mb-2`}>{logicStatus.text}</div>
|
||||||
<Progress value={logicScore} className="h-2" />
|
<Progress value={logicScore} className="h-2" />
|
||||||
</div>
|
</div>
|
||||||
@@ -138,7 +273,7 @@ export function CombinedAnalysis({
|
|||||||
<Lightbulb className="w-6 h-6 text-orange-600" />
|
<Lightbulb className="w-6 h-6 text-orange-600" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-medium text-sm mb-2">創意能力</h3>
|
<h3 className="font-medium text-sm mb-2">創意能力</h3>
|
||||||
<div className="text-2xl font-bold text-orange-600 mb-1">{creativityScore}分</div>
|
<div className="text-3xl font-bold text-orange-600 mb-1">{creativityScore}</div>
|
||||||
<div className={`text-xs ${creativityStatus.color} mb-2`}>{creativityStatus.text}</div>
|
<div className={`text-xs ${creativityStatus.color} mb-2`}>{creativityStatus.text}</div>
|
||||||
<Progress value={creativityScore} className="h-2" />
|
<Progress value={creativityScore} className="h-2" />
|
||||||
</div>
|
</div>
|
||||||
@@ -149,7 +284,7 @@ export function CombinedAnalysis({
|
|||||||
<Target className="w-6 h-6 text-green-600" />
|
<Target className="w-6 h-6 text-green-600" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-medium text-sm mb-2">能力平衡</h3>
|
<h3 className="font-medium text-sm mb-2">能力平衡</h3>
|
||||||
<div className="text-2xl font-bold text-orange-600 mb-1">{balanceScore}分</div>
|
<div className="text-3xl font-bold text-orange-600 mb-1">{balanceScore}</div>
|
||||||
<div className={`text-xs ${balanceStatus.color} mb-2`}>{balanceStatus.text}</div>
|
<div className={`text-xs ${balanceStatus.color} mb-2`}>{balanceStatus.text}</div>
|
||||||
<Progress value={balanceScore} className="h-2" />
|
<Progress value={balanceScore} className="h-2" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
163
components/individual-test-results.tsx
Normal file
163
components/individual-test-results.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { Progress } from "@/components/ui/progress"
|
||||||
|
import { Brain, Lightbulb, CheckCircle, Star } from "lucide-react"
|
||||||
|
|
||||||
|
interface IndividualTestResultsProps {
|
||||||
|
logicScore: number
|
||||||
|
logicCorrectAnswers: number
|
||||||
|
logicTotalQuestions: number
|
||||||
|
logicLevel: string
|
||||||
|
logicDescription: string
|
||||||
|
logicSuggestion: string
|
||||||
|
creativityScore: number
|
||||||
|
creativityTotalScore: number
|
||||||
|
creativityMaxScore: number
|
||||||
|
creativityLevel: string
|
||||||
|
creativityDescription: string
|
||||||
|
creativitySuggestion: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IndividualTestResults({
|
||||||
|
logicScore,
|
||||||
|
logicCorrectAnswers,
|
||||||
|
logicTotalQuestions,
|
||||||
|
logicLevel,
|
||||||
|
logicDescription,
|
||||||
|
logicSuggestion,
|
||||||
|
creativityScore,
|
||||||
|
creativityTotalScore,
|
||||||
|
creativityMaxScore,
|
||||||
|
creativityLevel,
|
||||||
|
creativityDescription,
|
||||||
|
creativitySuggestion
|
||||||
|
}: IndividualTestResultsProps) {
|
||||||
|
|
||||||
|
// 獲取邏輯測試等級顏色
|
||||||
|
const getLogicLevelColor = (score: number) => {
|
||||||
|
if (score >= 90) return "bg-purple-600"
|
||||||
|
if (score >= 80) return "bg-green-500"
|
||||||
|
if (score >= 60) return "bg-blue-500"
|
||||||
|
if (score >= 30) return "bg-yellow-500"
|
||||||
|
return "bg-red-500"
|
||||||
|
}
|
||||||
|
|
||||||
|
// 獲取創意測試等級顏色
|
||||||
|
const getCreativityLevelColor = (score: number) => {
|
||||||
|
if (score >= 90) return "bg-purple-600"
|
||||||
|
if (score >= 75) return "bg-blue-500"
|
||||||
|
if (score >= 55) return "bg-green-500"
|
||||||
|
if (score >= 35) return "bg-yellow-500"
|
||||||
|
return "bg-red-500"
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* 邏輯思維測試 */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Brain className="w-5 h-5 text-blue-600" />
|
||||||
|
邏輯思維測試
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 分數顯示 */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">得分</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Progress value={logicScore} className="w-24 h-2" />
|
||||||
|
<span className="text-2xl font-bold text-red-600">{logicScore}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 統計數據 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-green-600">{logicCorrectAnswers}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">答對題數</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-blue-600">{logicTotalQuestions}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">總題數</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 等級和描述 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-3 h-3 rounded-full ${getLogicLevelColor(logicScore)}`}></div>
|
||||||
|
<span className="font-medium text-sm">{logicLevel}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
{logicDescription}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
|
||||||
|
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">建議：</span>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">{logicSuggestion}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 創意能力測試 */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Lightbulb className="w-5 h-5 text-orange-600" />
|
||||||
|
創意能力測試
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 分數顯示 */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">得分</span>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Progress value={creativityScore} className="w-24 h-2" />
|
||||||
|
<span className="text-2xl font-bold text-orange-600">{creativityScore}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 統計數據 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-green-600">{creativityTotalScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">原始得分</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/50 rounded-lg p-3 text-center">
|
||||||
|
<div className="text-lg font-bold text-blue-600">{creativityMaxScore}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">滿分</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 等級和描述 */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-3 h-3 rounded-full ${getCreativityLevelColor(creativityScore)}`}></div>
|
||||||
|
<span className="font-medium text-sm">{creativityLevel}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
||||||
|
{creativityDescription}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-start gap-2 p-3 bg-muted/30 rounded-lg">
|
||||||
|
<Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">建議：</span>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">{creativitySuggestion}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user