184 lines
9.0 KiB
TypeScript
184 lines
9.0 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { useNavigate } from '@tanstack/react-router'
|
|
import { cn } from '@/lib/utils'
|
|
import { useTestStore } from '@/store/test-store'
|
|
import { useRequireAuth } from '@/hooks/use-require-auth'
|
|
import { useAuthStore } from '@/store/auth-store'
|
|
import { saveTestResult } from '@/lib/progress-service'
|
|
import { useAwardActivity } from '@/hooks/use-gamification'
|
|
import { XP_REWARDS } from '@/lib/gamification-service'
|
|
|
|
const ANSWER_LABELS = ['A', 'B', 'C', 'D']
|
|
|
|
function formatTime(s: number) {
|
|
const m = Math.floor(s / 60)
|
|
const sec = s % 60
|
|
if (m === 0) return `${sec}s`
|
|
return `${m}m ${sec}s`
|
|
}
|
|
|
|
export function TestResult() {
|
|
const navigate = useNavigate()
|
|
const { testId, testName, parts, answers, timeUsed, reset } = useTestStore()
|
|
const { isAuthenticated, isLoading } = useRequireAuth()
|
|
const user = useAuthStore((s) => s.user)
|
|
const savedRef = useRef(false)
|
|
const { mutate: awardActivity } = useAwardActivity()
|
|
|
|
// Flatten all questions across parts
|
|
const allQuestions = parts.flatMap(p => p.questions)
|
|
|
|
useEffect(() => {
|
|
if (isLoading) return
|
|
if (!isAuthenticated) navigate({ to: '/toeic' })
|
|
}, [isLoading, isAuthenticated, navigate])
|
|
|
|
useEffect(() => {
|
|
if (!user || savedRef.current || allQuestions.length === 0) return
|
|
savedRef.current = true
|
|
const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
|
|
awardActivity({ xp: XP_REWARDS.test })
|
|
saveTestResult(user.id, {
|
|
testId,
|
|
selectedParts: parts.map(p => p.partNumber),
|
|
score: correct,
|
|
total: allQuestions.length,
|
|
timeUsed,
|
|
answers: allQuestions.map(q => ({
|
|
questionId: q.id,
|
|
selected: answers[q.id] ?? null,
|
|
correct: answers[q.id] === q.correctAnswer,
|
|
})),
|
|
})
|
|
}, [user, allQuestions.length])
|
|
|
|
if (allQuestions.length === 0) {
|
|
return (
|
|
<div className="px-6 py-8 max-w-6xl mx-auto text-center">
|
|
<p className="text-slate-500 mb-4">Không có dữ liệu bài thi.</p>
|
|
<button onClick={() => navigate({ to: '/toeic' })}
|
|
className="bg-blue-600 text-white px-6 py-2.5 rounded-xl font-semibold text-sm hover:bg-blue-700 transition-colors">
|
|
Chọn đề thi
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
|
|
const wrong = allQuestions.filter(q => answers[q.id] !== null && answers[q.id] !== undefined && answers[q.id] !== q.correctAnswer).length
|
|
const skipped = allQuestions.filter(q => answers[q.id] === null || answers[q.id] === undefined).length
|
|
const total = allQuestions.length
|
|
const percent = total > 0 ? Math.round((correct / total) * 100) : 0
|
|
const circumference = 2 * Math.PI * 52
|
|
const offset = circumference - (percent / 100) * circumference
|
|
|
|
return (
|
|
<div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
|
|
{/* Score header */}
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-200 mb-5">
|
|
<div className="flex flex-col lg:flex-row items-center gap-6">
|
|
<div className="flex-shrink-0 relative w-32 h-32">
|
|
<svg className="w-full h-full -rotate-90" viewBox="0 0 120 120">
|
|
<circle cx="60" cy="60" r="52" fill="none" stroke="#e2e8f0" strokeWidth="8" />
|
|
<circle cx="60" cy="60" r="52" fill="none"
|
|
stroke={percent >= 70 ? '#16a34a' : percent >= 50 ? '#2563eb' : '#dc2626'}
|
|
strokeWidth="8" strokeLinecap="round"
|
|
strokeDasharray={circumference} strokeDashoffset={offset}
|
|
className="transition-all duration-700" />
|
|
</svg>
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className="text-3xl font-extrabold text-slate-800">{correct}/{total}</span>
|
|
<span className="text-xs text-slate-400 font-medium">điểm</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 text-center lg:text-left">
|
|
<div className="text-2xl font-extrabold text-slate-800 mb-1">
|
|
{percent >= 80 ? 'Xuất sắc!' : percent >= 60 ? 'Hoàn thành!' : 'Cố gắng hơn nhé!'}
|
|
</div>
|
|
<div className="text-sm text-slate-400 mb-4">{testName}</div>
|
|
<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
|
|
{[
|
|
{ label: 'Đúng', value: correct, cls: 'bg-green-50 border-green-100 text-green-600' },
|
|
{ label: 'Sai', value: wrong, cls: 'bg-red-50 border-red-100 text-red-600' },
|
|
{ label: 'Bỏ qua', value: skipped, cls: 'bg-slate-50 border-slate-200 text-slate-500' },
|
|
{ label: 'Thời gian', value: formatTime(timeUsed), cls: 'bg-blue-50 border-blue-100 text-blue-600' },
|
|
].map(({ label, value, cls }) => (
|
|
<div key={label} className={cn('border rounded-xl px-4 py-2 text-center', cls)}>
|
|
<div className="text-xl font-extrabold">{value}</div>
|
|
<div className="text-xs text-slate-400">{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex lg:flex-col gap-3 flex-shrink-0">
|
|
<button onClick={() => navigate({ to: '/toeic/session' })}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>Làm lại
|
|
</button>
|
|
<button onClick={() => { reset(); navigate({ to: '/toeic' }) }}
|
|
className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors">
|
|
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>Về trang chủ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Answer review grouped by part */}
|
|
{parts.map(part => (
|
|
<div key={part.partNumber} className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
|
|
<h2 className="text-base font-bold text-slate-800 mb-4">Part {part.partNumber} — {part.partName}</h2>
|
|
<div className="space-y-4">
|
|
{part.questions.map((q, i) => {
|
|
const userAnswer = answers[q.id] ?? null
|
|
const isCorrect = userAnswer === q.correctAnswer
|
|
const isSkipped = userAnswer === null || userAnswer === undefined
|
|
return (
|
|
<div key={q.id} className={cn(
|
|
'rounded-xl border p-4',
|
|
isCorrect ? 'border-green-100 bg-green-50/50' : isSkipped ? 'border-slate-100 bg-slate-50/50' : 'border-red-100 bg-red-50/50',
|
|
)}>
|
|
<div className="flex items-start gap-3">
|
|
<span className={cn(
|
|
'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5',
|
|
isCorrect ? 'bg-green-600 text-white' : isSkipped ? 'bg-slate-400 text-white' : 'bg-red-600 text-white',
|
|
)}>{i + 1}</span>
|
|
<div className="flex-1 min-w-0">
|
|
{q.text && <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>}
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|
{q.options.map((opt, j) => (
|
|
<span key={j} className={cn(
|
|
'text-xs px-2.5 py-1 rounded-lg font-medium',
|
|
j === q.correctAnswer ? 'bg-green-100 text-green-700 border border-green-200'
|
|
: j === userAnswer && !isCorrect ? 'bg-red-100 text-red-700 border border-red-200 line-through'
|
|
: 'bg-slate-100 text-slate-500',
|
|
)}>
|
|
{ANSWER_LABELS[j]}. {opt}
|
|
</span>
|
|
))}
|
|
</div>
|
|
{q.explanation && (
|
|
<p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
|
|
<span className="font-semibold text-slate-600">Giải thích: </span>{q.explanation}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<span className="flex-shrink-0">
|
|
{isCorrect
|
|
? <span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
|
|
: isSkipped
|
|
? <span className="material-symbols-outlined text-slate-400" style={{ fontSize: 20 }}>remove_circle</span>
|
|
: <span className="material-symbols-outlined text-red-500" style={{ fontSize: 20 }}>cancel</span>}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|