118 lines
3.9 KiB
TypeScript
118 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { Navigation } from '@/components/shared/Navigation'
|
|
import './globals.css'
|
|
import { SimpleFlipCard } from '@/components/review/simple/SimpleFlipCard'
|
|
import { VocabChoiceTest } from '@/components/review/simple/VocabChoiceTest'
|
|
import { SimpleProgress } from '@/components/review/simple/SimpleProgress'
|
|
import { SimpleResults } from '@/components/review/simple/SimpleResults'
|
|
import { SIMPLE_CARDS } from '@/lib/data/reviewSimpleData'
|
|
import { useReviewSession } from '@/hooks/review/useReviewSession'
|
|
|
|
export default function SimpleReviewPage() {
|
|
// 使用重構後的 Hook 管理線性複習狀態
|
|
const {
|
|
testItems,
|
|
score,
|
|
isComplete,
|
|
currentTestItem,
|
|
currentCard,
|
|
vocabOptions,
|
|
totalTestItems,
|
|
completedTestItems,
|
|
handleAnswer,
|
|
handleSkip,
|
|
handleRestart
|
|
} = useReviewSession()
|
|
|
|
// 顯示結果頁面
|
|
if (isComplete) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<Navigation />
|
|
<div className="py-8">
|
|
<div className="max-w-4xl mx-auto px-4">
|
|
<SimpleResults
|
|
score={score}
|
|
totalCards={SIMPLE_CARDS.length}
|
|
onRestart={handleRestart}
|
|
/>
|
|
|
|
{/* 線性測驗完成統計 */}
|
|
<div className="mt-6 bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">測驗統計</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<div className="text-2xl font-bold text-blue-600">{completedTestItems}</div>
|
|
<div className="text-sm text-gray-600">完成測驗項目</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-green-600">{SIMPLE_CARDS.length}</div>
|
|
<div className="text-sm text-gray-600">練習詞卡數</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-purple-600">
|
|
{Math.round((score.correct / score.total) * 100)}%
|
|
</div>
|
|
<div className="text-sm text-gray-600">正確率</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 主要線性測驗頁面
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<Navigation />
|
|
|
|
<div className="py-8">
|
|
<div className="max-w-4xl mx-auto px-4">
|
|
{/* 使用修改後的 SimpleProgress 組件 */}
|
|
<SimpleProgress
|
|
currentTestItem={currentTestItem}
|
|
totalTestItems={totalTestItems}
|
|
completedTestItems={completedTestItems}
|
|
score={score}
|
|
testItems={testItems}
|
|
/>
|
|
|
|
{/* 根據當前測驗項目類型渲染對應組件 */}
|
|
{currentTestItem && currentCard && (
|
|
<>
|
|
{currentTestItem.testType === 'flip-card' && (
|
|
<SimpleFlipCard
|
|
card={currentCard}
|
|
onAnswer={handleAnswer}
|
|
onSkip={handleSkip}
|
|
/>
|
|
)}
|
|
|
|
{currentTestItem.testType === 'vocab-choice' && (
|
|
<VocabChoiceTest
|
|
card={currentCard}
|
|
options={vocabOptions}
|
|
onAnswer={handleAnswer}
|
|
onSkip={handleSkip}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* 控制按鈕 */}
|
|
<div className="mt-6 text-center">
|
|
<button
|
|
onClick={handleRestart}
|
|
className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
|
|
>
|
|
重新開始
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |