feat: 完成第二階段ReviewRunner導航系統整合和測試基礎設施
- feat: ReviewRunner整合SmartNavigationController，支援答題前顯示Skip、答題後顯示Continue - feat: 建立完整模擬測試數據基礎設施，使用example-data.json真實數據結構 - feat: 新增TestDebugPanel調試面板，方便測試進度條和智能分配功能 - feat: 新增ProgressBar組件顯示測試進度和統計資訊 - refactor: 移除VoiceRecorder重複例句圖片顯示，避免與SentenceSpeakingTest重複 - fix: 修正FlipMemoryTest的CEFR等級顯示位置，統一TestHeader佈局 - docs: 更新開發計劃，標記第二階段完成狀態 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
9286d3cd12
commit
b299e56876
|
|
@ -12,6 +12,7 @@ import {
|
|||
SentenceSpeakingTest
|
||||
} from '@/components/review/review-tests'
|
||||
import exampleData from './example-data.json'
|
||||
import { TestDebugPanel } from '@/components/debug/TestDebugPanel'
|
||||
|
||||
export default function ReviewTestsPage() {
|
||||
const [logs, setLogs] = useState<string[]>([])
|
||||
|
|
@ -271,6 +272,9 @@ export default function ReviewTestsPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 調試面板 */}
|
||||
<TestDebugPanel />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -244,18 +244,6 @@ export default function VoiceRecorder({
|
|||
{/* 隱藏的音頻元素 */}
|
||||
<audio ref={audioRef} />
|
||||
|
||||
{/* Example Image */}
|
||||
{exampleImage && (
|
||||
<div className="mb-4">
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<img
|
||||
src={exampleImage}
|
||||
alt="Example context"
|
||||
className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* 目標文字顯示 */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useTestQueueStore } from '@/store/useTestQueueStore'
|
||||
import { useTestResultStore } from '@/store/useTestResultStore'
|
||||
import { mockFlashcards, getTestStatistics, generateTestQueue } from '@/data/mockTestData'
|
||||
|
||||
interface TestDebugPanelProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const TestDebugPanel: React.FC<TestDebugPanelProps> = ({ className }) => {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
const { testItems, currentTestIndex, addTestItems, resetQueue } = useTestQueueStore()
|
||||
const { totalCorrect, totalIncorrect, resetScore } = useTestResultStore()
|
||||
|
||||
const stats = getTestStatistics(mockFlashcards)
|
||||
|
||||
const handleLoadMockData = () => {
|
||||
const queue = generateTestQueue(mockFlashcards)
|
||||
addTestItems(queue.map(item => ({
|
||||
flashcardId: item.card.id,
|
||||
mode: item.mode,
|
||||
priority: item.priority,
|
||||
attempts: item.card.testAttempts || 0,
|
||||
completed: false
|
||||
})))
|
||||
}
|
||||
|
||||
const handleResetAll = () => {
|
||||
resetQueue()
|
||||
resetScore()
|
||||
}
|
||||
|
||||
if (!isVisible) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setIsVisible(true)}
|
||||
className="fixed bottom-4 right-4 bg-blue-600 text-white px-3 py-2 rounded-lg shadow-lg text-sm z-50"
|
||||
>
|
||||
🔧 調試
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`fixed bottom-4 right-4 bg-white border border-gray-200 rounded-lg shadow-xl p-4 z-50 w-80 ${className}`}>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-semibold text-gray-800">測試調試面板</h3>
|
||||
<button
|
||||
onClick={() => setIsVisible(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 當前進度 */}
|
||||
<div className="mb-4 p-3 bg-gray-50 rounded">
|
||||
<h4 className="font-medium text-sm mb-2">當前進度</h4>
|
||||
<div className="text-xs space-y-1">
|
||||
<div>隊列長度: {testItems.length}</div>
|
||||
<div>當前位置: {currentTestIndex + 1}/{testItems.length}</div>
|
||||
<div>正確: {totalCorrect} | 錯誤: {totalIncorrect}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 測試數據統計 */}
|
||||
<div className="mb-4 p-3 bg-blue-50 rounded">
|
||||
<h4 className="font-medium text-sm mb-2">模擬數據統計</h4>
|
||||
<div className="text-xs space-y-1">
|
||||
<div>總卡片: {stats.total}</div>
|
||||
<div>未測試: {stats.untested}</div>
|
||||
<div>答錯: {stats.incorrect}</div>
|
||||
<div>跳過: {stats.skipped}</div>
|
||||
<div className="mt-2 text-gray-600">
|
||||
優先級 - 高:{stats.priorities.high} 中:{stats.priorities.medium} 低:{stats.priorities.low}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={handleLoadMockData}
|
||||
className="w-full bg-green-600 text-white py-2 px-3 rounded text-sm hover:bg-green-700"
|
||||
>
|
||||
載入真實測試數據 ({mockFlashcards.length} 卡片)
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleResetAll}
|
||||
className="w-full bg-red-600 text-white py-2 px-3 rounded text-sm hover:bg-red-700"
|
||||
>
|
||||
重置所有數據
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 隊列預覽 */}
|
||||
{testItems.length > 0 && (
|
||||
<div className="mt-4 p-3 bg-yellow-50 rounded">
|
||||
<h4 className="font-medium text-sm mb-2">當前隊列預覽</h4>
|
||||
<div className="text-xs max-h-32 overflow-y-auto">
|
||||
{testItems.slice(0, 10).map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex justify-between ${index === currentTestIndex ? 'font-bold text-blue-600' : ''}`}
|
||||
>
|
||||
<span>{item.mode}</span>
|
||||
<span>P:{item.priority}</span>
|
||||
</div>
|
||||
))}
|
||||
{testItems.length > 10 && (
|
||||
<div className="text-gray-500">...還有 {testItems.length - 10} 項</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import React from 'react'
|
||||
|
||||
interface ProgressBarProps {
|
||||
current: number
|
||||
total: number
|
||||
correct: number
|
||||
incorrect: number
|
||||
skipped: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const ProgressBar: React.FC<ProgressBarProps> = ({
|
||||
current,
|
||||
total,
|
||||
correct,
|
||||
incorrect,
|
||||
skipped,
|
||||
className = ''
|
||||
}) => {
|
||||
const percentage = total > 0 ? Math.round((current / total) * 100) : 0
|
||||
const completed = correct + incorrect + skipped
|
||||
|
||||
return (
|
||||
<div className={`bg-white rounded-lg shadow p-4 ${className}`}>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3 className="font-medium text-gray-900">複習進度</h3>
|
||||
<span className="text-sm text-gray-600">
|
||||
{current + 1} / {total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 進度條 */}
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 mb-3">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 統計信息 */}
|
||||
<div className="grid grid-cols-4 gap-2 text-xs">
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-green-600">{correct}</div>
|
||||
<div className="text-gray-500">正確</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-red-600">{incorrect}</div>
|
||||
<div className="text-gray-500">錯誤</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-yellow-600">{skipped}</div>
|
||||
<div className="text-gray-500">跳過</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-semibold text-gray-600">{total - completed}</div>
|
||||
<div className="text-gray-500">待完成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 百分比顯示 */}
|
||||
<div className="mt-3 text-center">
|
||||
<span className="text-lg font-semibold text-blue-600">{percentage}%</span>
|
||||
<span className="text-sm text-gray-500 ml-1">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
import { useEffect } from 'react'
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useReviewSessionStore } from '@/store/useReviewSessionStore'
|
||||
import { useTestQueueStore } from '@/store/useTestQueueStore'
|
||||
import { useTestResultStore } from '@/store/useTestResultStore'
|
||||
import { useUIStore } from '@/store/useUIStore'
|
||||
import { SmartNavigationController } from './NavigationController'
|
||||
import { ProgressBar } from './ProgressBar'
|
||||
import { mockFlashcards } from '@/data/mockTestData'
|
||||
import {
|
||||
FlipMemoryTest,
|
||||
VocabChoiceTest,
|
||||
|
|
@ -19,44 +22,66 @@ interface TestRunnerProps {
|
|||
|
||||
export const ReviewRunner: React.FC<TestRunnerProps> = ({ className }) => {
|
||||
const { currentCard, error } = useReviewSessionStore()
|
||||
const { currentMode, testItems, currentTestIndex, markTestCompleted, goToNextTest } = useTestQueueStore()
|
||||
const { updateScore, recordTestResult } = useTestResultStore()
|
||||
const { currentMode, testItems, currentTestIndex, markTestCompleted, goToNextTest, skipCurrentTest } = useTestQueueStore()
|
||||
const { updateScore, recordTestResult, score } = useTestResultStore()
|
||||
|
||||
// 答題狀態管理
|
||||
const [hasAnswered, setHasAnswered] = useState(false)
|
||||
const [isProcessingAnswer, setIsProcessingAnswer] = useState(false)
|
||||
|
||||
const {
|
||||
openReportModal,
|
||||
openImageModal
|
||||
} = useUIStore()
|
||||
|
||||
// 處理答題
|
||||
const handleAnswer = async (answer: string, confidenceLevel?: number) => {
|
||||
if (!currentCard) return
|
||||
// 重置答題狀態（切換測驗時）
|
||||
useEffect(() => {
|
||||
setHasAnswered(false)
|
||||
setIsProcessingAnswer(false)
|
||||
}, [currentTestIndex, currentMode])
|
||||
|
||||
// 檢查答案正確性
|
||||
const isCorrect = checkAnswer(answer, currentCard, currentMode)
|
||||
// 處理答題（只記錄答案，不進行導航）
|
||||
const handleAnswer = useCallback(async (answer: string, confidenceLevel?: number) => {
|
||||
if (!currentCard || hasAnswered || isProcessingAnswer) return
|
||||
|
||||
// 更新分數
|
||||
updateScore(isCorrect)
|
||||
setIsProcessingAnswer(true)
|
||||
|
||||
// 記錄到後端
|
||||
const success = await recordTestResult({
|
||||
flashcardId: currentCard.id,
|
||||
testType: currentMode,
|
||||
isCorrect,
|
||||
userAnswer: answer,
|
||||
confidenceLevel,
|
||||
responseTimeMs: 2000
|
||||
})
|
||||
try {
|
||||
// 檢查答案正確性
|
||||
const isCorrect = checkAnswer(answer, currentCard, currentMode)
|
||||
|
||||
if (success) {
|
||||
// 標記測驗為完成
|
||||
markTestCompleted(currentTestIndex)
|
||||
// 更新分數
|
||||
updateScore(isCorrect)
|
||||
|
||||
// 延遲進入下一個測驗
|
||||
setTimeout(() => {
|
||||
goToNextTest()
|
||||
}, 1500)
|
||||
// 記錄到後端
|
||||
const success = await recordTestResult({
|
||||
flashcardId: currentCard.id,
|
||||
testType: currentMode,
|
||||
isCorrect,
|
||||
userAnswer: answer,
|
||||
confidenceLevel,
|
||||
responseTimeMs: 2000
|
||||
})
|
||||
|
||||
if (success) {
|
||||
// 標記測驗為完成
|
||||
markTestCompleted(currentTestIndex)
|
||||
|
||||
// 設定已答題狀態（啟用導航按鈕）
|
||||
setHasAnswered(true)
|
||||
|
||||
// 如果答錯，將題目移到隊列最後（優先級 20）
|
||||
if (!isCorrect && currentMode !== 'flip-memory') {
|
||||
// TODO: 實現答錯重排邏輯
|
||||
console.log('答錯，將重新排入隊列')
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('答題處理失敗:', error)
|
||||
} finally {
|
||||
setIsProcessingAnswer(false)
|
||||
}
|
||||
}
|
||||
}, [currentCard, hasAnswered, isProcessingAnswer, currentMode, updateScore, recordTestResult, markTestCompleted, currentTestIndex])
|
||||
|
||||
// 檢查答案正確性
|
||||
const checkAnswer = (answer: string, card: any, mode: string): boolean => {
|
||||
|
|
@ -105,6 +130,115 @@ export const ReviewRunner: React.FC<TestRunnerProps> = ({ className }) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 處理跳過
|
||||
const handleSkip = useCallback(() => {
|
||||
if (hasAnswered) return // 已答題後不能跳過
|
||||
|
||||
skipCurrentTest()
|
||||
|
||||
// 重置狀態準備下一題
|
||||
setHasAnswered(false)
|
||||
setIsProcessingAnswer(false)
|
||||
}, [hasAnswered, skipCurrentTest])
|
||||
|
||||
// 處理繼續
|
||||
const handleContinue = useCallback(() => {
|
||||
if (!hasAnswered) return // 未答題不能繼續
|
||||
|
||||
goToNextTest()
|
||||
|
||||
// 重置狀態準備下一題
|
||||
setHasAnswered(false)
|
||||
setIsProcessingAnswer(false)
|
||||
}, [hasAnswered, goToNextTest])
|
||||
|
||||
// 測驗內容渲染函數 (使用 mock 數據)
|
||||
const renderTestContentWithMockData = (mockCardData: any, testType: string, options: string[]) => {
|
||||
const mockCommonProps = {
|
||||
cardData: mockCardData,
|
||||
onAnswer: handleAnswer,
|
||||
onReportError: () => console.log('Mock report error')
|
||||
}
|
||||
|
||||
switch (testType) {
|
||||
case 'flip-memory':
|
||||
return (
|
||||
<FlipMemoryTest
|
||||
{...mockCommonProps}
|
||||
onConfidenceSubmit={(level) => handleAnswer('', level)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'vocab-choice':
|
||||
return (
|
||||
<VocabChoiceTest
|
||||
{...mockCommonProps}
|
||||
options={options}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-fill':
|
||||
return (
|
||||
<SentenceFillTest
|
||||
{...mockCommonProps}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-reorder':
|
||||
return (
|
||||
<SentenceReorderTest
|
||||
{...mockCommonProps}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onImageClick={(image) => console.log('Mock image click:', image)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'vocab-listening':
|
||||
return (
|
||||
<VocabListeningTest
|
||||
{...mockCommonProps}
|
||||
options={options}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-listening':
|
||||
return (
|
||||
<SentenceListeningTest
|
||||
{...mockCommonProps}
|
||||
options={options}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onImageClick={(image) => console.log('Mock image click:', image)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-speaking':
|
||||
return (
|
||||
<SentenceSpeakingTest
|
||||
{...mockCommonProps}
|
||||
exampleImage={mockCardData.exampleImage}
|
||||
onImageClick={(image) => console.log('Mock image click:', image)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-yellow-700 mb-2">未實現的測驗類型</h3>
|
||||
<p className="text-yellow-600">測驗類型 "{testType}" 尚未實現</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
|
|
@ -117,6 +251,51 @@ export const ReviewRunner: React.FC<TestRunnerProps> = ({ className }) => {
|
|||
}
|
||||
|
||||
if (!currentCard) {
|
||||
// 檢查是否有測試隊列但沒有 currentCard (測試模式)
|
||||
if (testItems.length > 0 && currentTestIndex < testItems.length) {
|
||||
const currentTest = testItems[currentTestIndex]
|
||||
const mockCard = mockFlashcards.find(card => card.id === currentTest.cardId)
|
||||
|
||||
if (mockCard) {
|
||||
// 使用 mock 數據創建 cardData
|
||||
const mockCardData = {
|
||||
id: mockCard.id,
|
||||
word: mockCard.word,
|
||||
definition: mockCard.definition,
|
||||
example: mockCard.example,
|
||||
translation: mockCard.translation,
|
||||
exampleTranslation: mockCard.exampleTranslation,
|
||||
pronunciation: mockCard.pronunciation,
|
||||
difficultyLevel: mockCard.difficultyLevel,
|
||||
exampleImage: mockCard.exampleImage,
|
||||
synonyms: mockCard.synonyms
|
||||
}
|
||||
|
||||
// 生成測驗選項
|
||||
const mockOptions = generateOptions(mockCard, currentTest.testType)
|
||||
|
||||
return (
|
||||
<div className={`review-runner ${className}`}>
|
||||
{/* 測驗內容 */}
|
||||
<div className="mb-6">
|
||||
{renderTestContentWithMockData(mockCardData, currentTest.testType, mockOptions)}
|
||||
</div>
|
||||
|
||||
{/* 智能導航控制器 */}
|
||||
<div className="border-t pt-6">
|
||||
<SmartNavigationController
|
||||
hasAnswered={hasAnswered}
|
||||
disabled={isProcessingAnswer}
|
||||
onSkipCallback={handleSkip}
|
||||
onContinueCallback={handleContinue}
|
||||
className="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-500">載入測驗中...</div>
|
||||
|
|
@ -144,75 +323,118 @@ export const ReviewRunner: React.FC<TestRunnerProps> = ({ className }) => {
|
|||
onReportError: () => openReportModal(currentCard)
|
||||
}
|
||||
|
||||
// 渲染對應的測驗組件
|
||||
switch (currentMode) {
|
||||
case 'flip-memory':
|
||||
return (
|
||||
<FlipMemoryTest
|
||||
{...commonProps}
|
||||
onConfidenceSubmit={(level) => handleAnswer('', level)}
|
||||
/>
|
||||
)
|
||||
// 測驗內容渲染函數
|
||||
const renderTestContent = () => {
|
||||
// 渲染對應的測驗組件（不包含導航）
|
||||
switch (currentMode) {
|
||||
case 'flip-memory':
|
||||
return (
|
||||
<FlipMemoryTest
|
||||
{...commonProps}
|
||||
onConfidenceSubmit={(level) => handleAnswer('', level)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'vocab-choice':
|
||||
return (
|
||||
<VocabChoiceTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
/>
|
||||
)
|
||||
case 'vocab-choice':
|
||||
return (
|
||||
<VocabChoiceTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-fill':
|
||||
return (
|
||||
<SentenceFillTest
|
||||
{...commonProps}
|
||||
/>
|
||||
)
|
||||
case 'sentence-fill':
|
||||
return (
|
||||
<SentenceFillTest
|
||||
{...commonProps}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-reorder':
|
||||
return (
|
||||
<SentenceReorderTest
|
||||
{...commonProps}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
/>
|
||||
)
|
||||
case 'sentence-reorder':
|
||||
return (
|
||||
<SentenceReorderTest
|
||||
{...commonProps}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'vocab-listening':
|
||||
return (
|
||||
<VocabListeningTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
/>
|
||||
)
|
||||
case 'vocab-listening':
|
||||
return (
|
||||
<VocabListeningTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-listening':
|
||||
return (
|
||||
<SentenceListeningTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
/>
|
||||
)
|
||||
case 'sentence-listening':
|
||||
return (
|
||||
<SentenceListeningTest
|
||||
{...commonProps}
|
||||
options={generateOptions(currentCard, currentMode)}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'sentence-speaking':
|
||||
return (
|
||||
<SentenceSpeakingTest
|
||||
{...commonProps}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
/>
|
||||
)
|
||||
case 'sentence-speaking':
|
||||
return (
|
||||
<SentenceSpeakingTest
|
||||
{...commonProps}
|
||||
exampleImage={cardData.exampleImage}
|
||||
onImageClick={openImageModal}
|
||||
disabled={isProcessingAnswer}
|
||||
/>
|
||||
)
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-yellow-700 mb-2">未實現的測驗類型</h3>
|
||||
<p className="text-yellow-600">測驗類型 "{currentMode}" 尚未實現</p>
|
||||
default:
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-yellow-700 mb-2">未實現的測驗類型</h3>
|
||||
<p className="text-yellow-600">測驗類型 "{currentMode}" 尚未實現</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`review-runner ${className}`}>
|
||||
{/* 進度條 (僅在測試模式顯示) */}
|
||||
{testItems.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<ProgressBar
|
||||
current={currentTestIndex}
|
||||
total={testItems.length}
|
||||
correct={score.correct}
|
||||
incorrect={score.total - score.correct}
|
||||
skipped={testItems.filter(item => item.isSkipped).length}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 測驗內容 */}
|
||||
<div className="mb-6">
|
||||
{renderTestContent()}
|
||||
</div>
|
||||
|
||||
{/* 智能導航控制器 */}
|
||||
<div className="border-t pt-6">
|
||||
<SmartNavigationController
|
||||
hasAnswered={hasAnswered}
|
||||
disabled={isProcessingAnswer}
|
||||
onSkipCallback={handleSkip}
|
||||
onContinueCallback={handleContinue}
|
||||
className="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -93,12 +93,10 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
|
|||
style={{ backfaceVisibility: 'hidden' }}
|
||||
>
|
||||
<div className="p-8 h-full">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<TestHeader
|
||||
title="翻卡記憶"
|
||||
difficultyLevel={cardData.difficultyLevel}
|
||||
/>
|
||||
</div>
|
||||
<TestHeader
|
||||
title="翻卡記憶"
|
||||
difficultyLevel={cardData.difficultyLevel}
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-lg text-gray-700 mb-6 text-left">
|
||||
|
|
@ -132,12 +130,10 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
|
|||
}}
|
||||
>
|
||||
<div className="p-8 h-full">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<TestHeader
|
||||
title="翻卡記憶"
|
||||
difficultyLevel={cardData.difficultyLevel}
|
||||
/>
|
||||
</div>
|
||||
<TestHeader
|
||||
title="翻卡記憶"
|
||||
difficultyLevel={cardData.difficultyLevel}
|
||||
/>
|
||||
|
||||
<div className="space-y-4 pb-6">
|
||||
{/* 定義區塊 */}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@ const SentenceSpeakingTestComponent: React.FC<SentenceSpeakingTestProps> = ({
|
|||
<VoiceRecorder
|
||||
targetText={cardData.example}
|
||||
targetTranslation={cardData.exampleTranslation}
|
||||
exampleImage={exampleImage}
|
||||
instructionText="請看例句圖片並大聲說出完整的例句："
|
||||
onRecordingComplete={handleRecordingComplete}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
/**
|
||||
* 測試用假數據 - 使用 example-data.json 的真實數據結構
|
||||
*/
|
||||
|
||||
import exampleData from '@/app/review-design/example-data.json'
|
||||
|
||||
export interface MockFlashcard {
|
||||
id: string
|
||||
word: string
|
||||
definition: string
|
||||
example: string
|
||||
translation: string
|
||||
exampleTranslation: string
|
||||
pronunciation: string
|
||||
difficultyLevel: 'A1' | 'A2' | 'B1' | 'B2' | 'C1' | 'C2'
|
||||
exampleImage?: string
|
||||
synonyms: string[]
|
||||
filledQuestionText?: string
|
||||
// 測試用欄位
|
||||
testPriority?: number
|
||||
testAttempts?: number
|
||||
lastCorrect?: boolean
|
||||
}
|
||||
|
||||
// 將 example-data.json 轉換為 MockFlashcard 格式，並添加測試優先級
|
||||
export const mockFlashcards: MockFlashcard[] = (exampleData.data || []).map((card, index) => ({
|
||||
id: card.id,
|
||||
word: card.word,
|
||||
definition: card.definition,
|
||||
example: card.example,
|
||||
translation: card.translation,
|
||||
exampleTranslation: card.exampleTranslation,
|
||||
pronunciation: card.pronunciation,
|
||||
difficultyLevel: card.difficultyLevel as 'A1' | 'A2' | 'B1' | 'B2' | 'C1' | 'C2',
|
||||
synonyms: card.synonyms || [],
|
||||
filledQuestionText: card.filledQuestionText,
|
||||
exampleImage: card.flashcardExampleImages?.[0]?.exampleImage ?
|
||||
`http://localhost:5008/images/examples/${card.flashcardExampleImages[0].exampleImage.relativePath}` :
|
||||
undefined,
|
||||
// 模擬不同的測試狀態
|
||||
testPriority: index % 4 === 0 ? 20 : index % 5 === 0 ? 10 : 100,
|
||||
testAttempts: index % 4 === 0 ? 2 : index % 5 === 0 ? 1 : 0,
|
||||
lastCorrect: index % 4 === 0 ? false : undefined
|
||||
}))
|
||||
|
||||
export const testModes = [
|
||||
'flip-memory',
|
||||
'vocab-choice',
|
||||
'sentence-fill',
|
||||
'sentence-reorder',
|
||||
'vocab-listening',
|
||||
'sentence-listening',
|
||||
'sentence-speaking'
|
||||
] as const
|
||||
|
||||
export type TestMode = typeof testModes[number]
|
||||
|
||||
/**
|
||||
* 生成測試隊列 - 模擬智能分配邏輯
|
||||
*/
|
||||
export function generateTestQueue(cards: MockFlashcard[]): Array<{card: MockFlashcard, mode: TestMode, priority: number}> {
|
||||
const queue: Array<{card: MockFlashcard, mode: TestMode, priority: number}> = []
|
||||
|
||||
cards.forEach(card => {
|
||||
// 每張卡片隨機分配2-3種測驗模式
|
||||
const numTests = Math.floor(Math.random() * 2) + 2 // 2-3個測驗
|
||||
const modesArray = [...testModes] // 創建可變數組
|
||||
const selectedModes = modesArray
|
||||
.sort(() => Math.random() - 0.5)
|
||||
.slice(0, numTests) as TestMode[]
|
||||
|
||||
selectedModes.forEach((mode: TestMode) => {
|
||||
queue.push({
|
||||
card,
|
||||
mode,
|
||||
priority: card.testPriority || 100
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// 按優先級排序
|
||||
return queue.sort((a, b) => b.priority - a.priority)
|
||||
}
|
||||
|
||||
/**
|
||||
* 調試用資訊
|
||||
*/
|
||||
export function getTestStatistics(cards: MockFlashcard[]) {
|
||||
const stats = {
|
||||
total: cards.length,
|
||||
untested: cards.filter(c => c.testAttempts === 0).length,
|
||||
incorrect: cards.filter(c => c.lastCorrect === false).length,
|
||||
skipped: cards.filter(c => c.testPriority === 10).length,
|
||||
priorities: {
|
||||
high: cards.filter(c => (c.testPriority || 100) >= 100).length,
|
||||
medium: cards.filter(c => (c.testPriority || 100) === 20).length,
|
||||
low: cards.filter(c => (c.testPriority || 100) === 10).length
|
||||
}
|
||||
}
|
||||
return stats
|
||||
}
|
||||
Loading…
Reference in New Issue