From b299e568765a3d7c4ddb9228171b03e064d9be80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Mon, 29 Sep 2025 01:52:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=AC=AC=E4=BA=8C?=
 =?UTF-8?q?=E9=9A=8E=E6=AE=B5ReviewRunner=E5=B0=8E=E8=88=AA=E7=B3=BB?=
 =?UTF-8?q?=E7=B5=B1=E6=95=B4=E5=90=88=E5=92=8C=E6=B8=AC=E8=A9=A6=E5=9F=BA?=
 =?UTF-8?q?=E7=A4=8E=E8=A8=AD=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/app/review-design/page.tsx           |   4 +
 frontend/components/VoiceRecorder.tsx         |  12 -
 frontend/components/debug/TestDebugPanel.tsx  | 119 ++++++
 frontend/components/review/ProgressBar.tsx    |  67 +++
 frontend/components/review/ReviewRunner.tsx   | 400 ++++++++++++++----
 .../review/review-tests/FlipMemoryTest.tsx    |  20 +-
 .../review-tests/SentenceSpeakingTest.tsx     |   1 -
 frontend/data/mockTestData.ts                 | 101 +++++
 8 files changed, 610 insertions(+), 114 deletions(-)
 create mode 100644 frontend/components/debug/TestDebugPanel.tsx
 create mode 100644 frontend/components/review/ProgressBar.tsx
 create mode 100644 frontend/data/mockTestData.ts

diff --git a/frontend/app/review-design/page.tsx b/frontend/app/review-design/page.tsx
index 4258217..44b08bd 100644
--- a/frontend/app/review-design/page.tsx
+++ b/frontend/app/review-design/page.tsx
@@ -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>
   )
 }
\ No newline at end of file
diff --git a/frontend/components/VoiceRecorder.tsx b/frontend/components/VoiceRecorder.tsx
index 6449e77..5a8c15f 100644
--- a/frontend/components/VoiceRecorder.tsx
+++ b/frontend/components/VoiceRecorder.tsx
@@ -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>
-      )}
 
 
       {/* 目標文字顯示 */}
diff --git a/frontend/components/debug/TestDebugPanel.tsx b/frontend/components/debug/TestDebugPanel.tsx
new file mode 100644
index 0000000..cda190c
--- /dev/null
+++ b/frontend/components/debug/TestDebugPanel.tsx
@@ -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>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/review/ProgressBar.tsx b/frontend/components/review/ProgressBar.tsx
new file mode 100644
index 0000000..f1e254e
--- /dev/null
+++ b/frontend/components/review/ProgressBar.tsx
@@ -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>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/review/ReviewRunner.tsx b/frontend/components/review/ReviewRunner.tsx
index 65b152e..102816d 100644
--- a/frontend/components/review/ReviewRunner.tsx
+++ b/frontend/components/review/ReviewRunner.tsx
@@ -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>
+  )
 }
\ No newline at end of file
diff --git a/frontend/components/review/review-tests/FlipMemoryTest.tsx b/frontend/components/review/review-tests/FlipMemoryTest.tsx
index 22e9f9f..ffb42d7 100644
--- a/frontend/components/review/review-tests/FlipMemoryTest.tsx
+++ b/frontend/components/review/review-tests/FlipMemoryTest.tsx
@@ -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">
                 {/* 定義區塊 */}
diff --git a/frontend/components/review/review-tests/SentenceSpeakingTest.tsx b/frontend/components/review/review-tests/SentenceSpeakingTest.tsx
index d3af36d..5a21e1a 100644
--- a/frontend/components/review/review-tests/SentenceSpeakingTest.tsx
+++ b/frontend/components/review/review-tests/SentenceSpeakingTest.tsx
@@ -54,7 +54,6 @@ const SentenceSpeakingTestComponent: React.FC<SentenceSpeakingTestProps> = ({
       <VoiceRecorder
         targetText={cardData.example}
         targetTranslation={cardData.exampleTranslation}
-        exampleImage={exampleImage}
         instructionText="請看例句圖片並大聲說出完整的例句："
         onRecordingComplete={handleRecordingComplete}
       />
diff --git a/frontend/data/mockTestData.ts b/frontend/data/mockTestData.ts
new file mode 100644
index 0000000..b6fcfb6
--- /dev/null
+++ b/frontend/data/mockTestData.ts
@@ -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
+}
\ No newline at end of file