refactor: 完成所有7種測驗元件架構統一重構

- 重構 FlipMemoryTest: 使用 inline styles 避免 styled-jsx 問題，整合 ConfidenceLevel 元件
- 重構 VocabChoiceTest: 使用 ChoiceTestContainer + ChoiceGrid 統一選擇題架構
- 重構 SentenceFillTest: 使用 FillTestContainer + TextInput，保留複雜填空邏輯
- 重構 SentenceReorderTest: 使用 TestContainer，保留完整拖拽重組功能
- 重構 VocabListeningTest: 使用 ListeningTestContainer + ChoiceGrid + AudioPlayer
- 重構 SentenceListeningTest: 使用 ListeningTestContainer，支援圖片功能
- 重構 SentenceSpeakingTest: 使用 SpeakingTestContainer + VoiceRecorder

技術改進:
- 統一容器組件模式，提高代碼重用度
- 各元件實現 hasAnswered 狀態追蹤，為導航整合做準備
- 修復 ListeningTestContainer 和 SpeakingTestContainer 介面問題
- 修復 BaseTestComponent testContext 傳遞錯誤
- 清理未使用的代碼和註釋

測試結果:
- 所有元件編譯無錯誤
- TypeScript 類型檢查通過
- 開發伺服器運行穩定
- 保留所有原有功能（翻卡動畫、拖拽、錄音等）

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/review-design/page.tsx

@@ -61,6 +61,7 @@ export default function ReviewTestsPage() {
     filledQuestionText: undefined,
     exampleTranslation: "載入中...",
     pronunciation: "",
+    synonyms: [],
     difficultyLevel: "A1",
     translation: "載入中",
     exampleImage: undefined

frontend/components/review/review-tests/FlipMemoryTest.tsx

@@ -2,15 +2,12 @@ import { useState, useRef, useEffect, memo, useCallback } from 'react'
 import AudioPlayer from '@/components/AudioPlayer'
 import {
   ErrorReportButton,
-  ConfidenceButtons,
   TestHeader,
-  HintPanel
+  ConfidenceLevel
 } from '@/components/review/shared'
 import { ConfidenceTestProps } from '@/types/review'
 
-interface FlipMemoryTestProps extends ConfidenceTestProps {
-  // FlipMemoryTest specific props (if any)
-}
+interface FlipMemoryTestProps extends ConfidenceTestProps {}
 
 const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
   cardData,
@@ -24,6 +21,9 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
   const frontRef = useRef<HTMLDivElement>(null)
   const backRef = useRef<HTMLDivElement>(null)
 
+  // 判斷是否已答題（選擇了信心等級）
+  const hasAnswered = selectedConfidence !== null
+
   useEffect(() => {
     const updateCardHeight = () => {
       if (backRef.current) {
@@ -54,11 +54,10 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
   }, [disabled, isFlipped])
 
   const handleConfidenceSelect = useCallback((level: number) => {
-    if (disabled) return
+    if (disabled || hasAnswered) return
     setSelectedConfidence(level)
     onConfidenceSubmit(level)
-  }, [disabled, onConfidenceSubmit])
-
+  }, [disabled, hasAnswered, onConfidenceSubmit])
 
   return (
     <div className="relative">
@@ -68,18 +67,29 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
 
       {/* 翻卡容器 */}
       <div
-        className={`card-container ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
+        className={`relative w-full ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
         onClick={handleFlip}
-        style={{ perspective: '1000px', height: `${cardHeight}px` }}
+        style={{
+          perspective: '1000px',
+          height: `${cardHeight}px`,
+          minHeight: '400px',
+          transition: 'height 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
+        }}
       >
         <div
-          className={`card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
-          style={{ transformStyle: 'preserve-3d', height: '100%' }}
+          style={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            transformStyle: 'preserve-3d',
+            transition: 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
+            transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
+          }}
         >
           {/* 正面 */}
           <div
             ref={frontRef}
-            className="card-face card-front absolute w-full h-full"
+            className="absolute w-full h-full bg-white rounded-xl shadow-lg hover:shadow-xl"
             style={{ backfaceVisibility: 'hidden' }}
           >
             <div className="p-8 h-full">
@@ -115,8 +125,11 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
           {/* 背面 */}
           <div
             ref={backRef}
-            className="card-face card-back absolute w-full h-full"
-            style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
+            className="absolute w-full h-full bg-white rounded-xl shadow-lg"
+            style={{
+              backfaceVisibility: 'hidden',
+              transform: 'rotateY(180deg)'
+            }}
           >
             <div className="p-8 h-full">
               <div className="flex justify-between items-start mb-6">
@@ -161,75 +174,20 @@ const FlipMemoryTestComponent: React.FC<FlipMemoryTestProps> = ({
                     </div>
                   </div>
                 )}
-
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      {/* 信心等級評估區 */}
+      {/* 信心等級評估區 - 使用新元件 */}
       <div className="mt-6">
-        <ConfidenceButtons
+        <ConfidenceLevel
           selectedLevel={selectedConfidence}
           onSelect={handleConfidenceSelect}
-          disabled={disabled}
+          disabled={disabled || hasAnswered}
         />
       </div>
-
-      <style jsx>{`
-        .card-container {
-          perspective: 1000px;
-          transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          min-height: 400px;
-        }
-
-        .card {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          transform-style: preserve-3d;
-          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .rotate-y-180 {
-          transform: rotateY(180deg);
-        }
-
-        .card-face {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          backface-visibility: hidden;
-          overflow: hidden;
-        }
-
-        .card-front .p-8 {
-          display: flex;
-          flex-direction: column;
-          min-height: 100%;
-        }
-
-        .card-back .p-8 {
-          overflow: visible;
-        }
-
-        @media (max-width: 768px) {
-          .card-container {
-            min-height: 350px;
-          }
-        }
-
-        @media (max-width: 480px) {
-          .card-container {
-            min-height: 300px;
-          }
-
-          .card-face .p-8 {
-            padding: 1rem;
-          }
-        }
-      `}</style>
     </div>
   )
 }

frontend/components/review/review-tests/SentenceFillTest.tsx

@@ -1,16 +1,14 @@
 import React, { useState, useMemo, useCallback, memo } from 'react'
 import { getCorrectAnswer } from '@/utils/answerExtractor'
 import {
-  ErrorReportButton,
-  SentenceInput,
   TestResultDisplay,
-  HintPanel
+  HintPanel,
+  FillTestContainer,
+  TextInput
 } from '@/components/review/shared'
 import { FillTestProps } from '@/types/review'
 
-interface SentenceFillTestProps extends FillTestProps {
-  // SentenceFillTest specific props (if any)
-}
+interface SentenceFillTestProps extends FillTestProps {}
 
 const SentenceFillTestComponent: React.FC<SentenceFillTestProps> = ({
   cardData,
@@ -22,11 +20,12 @@ const SentenceFillTestComponent: React.FC<SentenceFillTestProps> = ({
   const [showResult, setShowResult] = useState(false)
   const [showHint, setShowHint] = useState(false)
 
-  const handleSubmit = useCallback(() => {
-    if (disabled || showResult || !fillAnswer.trim()) return
+
+  const handleSubmit = useCallback((answer: string) => {
+    if (disabled || showResult) return
     setShowResult(true)
-    onAnswer(fillAnswer)
-  }, [disabled, showResult, fillAnswer, onAnswer])
+    onAnswer(answer)
+  }, [disabled, showResult, onAnswer])
 
   const handleToggleHint = useCallback(() => {
     setShowHint(prev => !prev)
@@ -55,14 +54,18 @@ const SentenceFillTestComponent: React.FC<SentenceFillTestProps> = ({
             <span key={index}>
               {part}
               {index < parts.length - 1 && (
-                <SentenceInput
-                  value={fillAnswer}
-                  onChange={setFillAnswer}
-                  onSubmit={handleSubmit}
-                  disabled={disabled}
-                  showResult={showResult}
-                  targetWordLength={correctAnswer.length}
-                />
+                <span className="inline-block mx-1">
+                  <TextInput
+                    value={fillAnswer}
+                    onChange={setFillAnswer}
+                    onSubmit={handleSubmit}
+                    disabled={disabled}
+                    showResult={showResult}
+                    isCorrect={isCorrect}
+                    correctAnswer={correctAnswer}
+                    placeholder=""
+                  />
+                </span>
               )}
             </span>
           ))}
@@ -79,14 +82,18 @@ const SentenceFillTestComponent: React.FC<SentenceFillTestProps> = ({
             <span key={index}>
               {part}
               {index < matches.length && (
-                <SentenceInput
-                  value={fillAnswer}
-                  onChange={setFillAnswer}
-                  onSubmit={handleSubmit}
-                  disabled={disabled}
-                  showResult={showResult}
-                  targetWordLength={correctAnswer.length}
-                />
+                <span className="inline-block mx-1">
+                  <TextInput
+                    value={fillAnswer}
+                    onChange={setFillAnswer}
+                    onSubmit={handleSubmit}
+                    disabled={disabled}
+                    showResult={showResult}
+                    isCorrect={isCorrect}
+                    correctAnswer={correctAnswer}
+                    placeholder=""
+                  />
+                </span>
               )}
             </span>
           ))}
@@ -101,95 +108,98 @@ const SentenceFillTestComponent: React.FC<SentenceFillTestProps> = ({
     handleSubmit,
     disabled,
     showResult,
-    correctAnswer.length
+    isCorrect,
+    correctAnswer
   ])
 
-  return (
-    <div className="relative">
-      <div className="flex justify-end mb-2">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <div className="flex justify-between items-start mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">例句填空</h2>
-          <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
-            {cardData.difficultyLevel}
-          </span>
+  // 句子顯示區域
+  const sentenceArea = (
+    <div className="space-y-6">
+      {/* 圖片區（如果有） */}
+      {cardData.exampleImage && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <img
+            src={cardData.exampleImage}
+            alt="Example illustration"
+            className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
+            onClick={() => {
+              // 圖片點擊處理 - 後續可以添加放大功能
+            }}
+          />
         </div>
+      )}
 
-        {/* 圖片區（如果有） */}
-        {cardData.exampleImage && (
-          <div className="mb-6">
-            <div className="bg-gray-50 rounded-lg p-4">
-              <img
-                src={cardData.exampleImage}
-                alt="Example illustration"
-                className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
-                onClick={() => {
-                  // 這裡需要處理圖片點擊，但我們暫時移除 onImageClick
-                  // 因為新的 cardData 接口可能不包含這個功能
-                }}
-              />
-            </div>
-          </div>
-        )}
+      {/* 指示文字 */}
+      <p className="text-lg text-gray-700 text-left">
+        請點擊例句中的空白處輸入正確的單字：
+      </p>
 
-        {/* 指示文字 */}
-        <p className="text-lg text-gray-700 mb-6 text-left">
-          請點擊例句中的空白處輸入正確的單字：
-        </p>
-
-        {/* 填空句子區域 */}
-        <div className="mb-6">
-          <div className="bg-gray-50 rounded-lg p-6">
-            {renderFilledSentence()}
-          </div>
-        </div>
-
-        {/* 操作按鈕 */}
-        <div className="flex gap-3 mb-4">
-          <button
-            onClick={handleSubmit}
-            disabled={!fillAnswer.trim() || showResult}
-            className={`px-6 py-2 rounded-lg transition-colors ${
-              !fillAnswer.trim() || showResult
-                ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                : 'bg-blue-600 text-white hover:bg-blue-700'
-            }`}
-          >
-            {!fillAnswer.trim() ? '請先輸入答案' : showResult ? '已確認' : '確認答案'}
-          </button>
-          <button
-            onClick={handleToggleHint}
-            className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
-          >
-            {showHint ? '隱藏提示' : '顯示提示'}
-          </button>
-        </div>
-
-        {/* 提示區域 */}
-        <HintPanel
-          isVisible={showHint}
-          definition={cardData.definition}
-          synonyms={cardData.synonyms}
-        />
-
-        {/* 結果反饋區 */}
-        <TestResultDisplay
-          isCorrect={isCorrect}
-          correctAnswer={correctAnswer}
-          userAnswer={fillAnswer}
-          word={cardData.word}
-          pronunciation={cardData.pronunciation}
-          example={cardData.example}
-          exampleTranslation={cardData.exampleTranslation}
-          showResult={showResult}
-        />
+      {/* 填空句子區域 */}
+      <div className="bg-gray-50 rounded-lg p-6">
+        {renderFilledSentence()}
       </div>
     </div>
   )
+
+  // 輸入區域（包含操作按鈕和提示）
+  const inputArea = (
+    <div className="space-y-4">
+      {/* 操作按鈕 */}
+      <div className="flex gap-3">
+        <button
+          onClick={() => handleSubmit(fillAnswer)}
+          disabled={!fillAnswer.trim() || showResult}
+          className={`px-6 py-2 rounded-lg transition-colors ${
+            !fillAnswer.trim() || showResult
+              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              : 'bg-blue-600 text-white hover:bg-blue-700'
+          }`}
+        >
+          {!fillAnswer.trim() ? '請先輸入答案' : showResult ? '已確認' : '確認答案'}
+        </button>
+        <button
+          onClick={handleToggleHint}
+          className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
+        >
+          {showHint ? '隱藏提示' : '顯示提示'}
+        </button>
+      </div>
+
+      {/* 提示區域 */}
+      <HintPanel
+        isVisible={showHint}
+        definition={cardData.definition}
+        synonyms={cardData.synonyms}
+      />
+    </div>
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult ? (
+    <TestResultDisplay
+      isCorrect={isCorrect}
+      correctAnswer={correctAnswer}
+      userAnswer={fillAnswer}
+      word={cardData.word}
+      pronunciation={cardData.pronunciation}
+      example={cardData.example}
+      exampleTranslation={cardData.exampleTranslation}
+      showResult={showResult}
+    />
+  ) : null
+
+  return (
+    <FillTestContainer
+      cardData={cardData}
+      testTitle="例句填空"
+      sentenceArea={sentenceArea}
+      inputArea={inputArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const SentenceFillTest = memo(SentenceFillTestComponent)

frontend/components/review/review-tests/SentenceListeningTest.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useCallback, useMemo, memo } from 'react'
 import AudioPlayer from '@/components/AudioPlayer'
 import {
-  ErrorReportButton,
   TestResultDisplay,
-  TestHeader
+  ListeningTestContainer,
+  ChoiceGrid
 } from '@/components/review/shared'
 import { ChoiceTestProps } from '@/types/review'
 
@@ -24,6 +24,9 @@ const SentenceListeningTestComponent: React.FC<SentenceListeningTestProps> = ({
   const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
   const [showResult, setShowResult] = useState(false)
 
+  // 判斷是否已答題（選擇了答案）
+  const hasAnswered = selectedAnswer !== null
+
   const handleAnswerSelect = useCallback((answer: string) => {
     if (disabled || showResult) return
     setSelectedAnswer(answer)
@@ -33,84 +36,73 @@ const SentenceListeningTestComponent: React.FC<SentenceListeningTestProps> = ({
 
   const isCorrect = useMemo(() => selectedAnswer === cardData.example, [selectedAnswer, cardData.example])
 
-  return (
-    <div className="relative">
-      {/* 錯誤回報按鈕 */}
-      <div className="flex justify-end mb-2">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <TestHeader
-          title="例句聽力"
-          difficultyLevel={cardData.difficultyLevel}
-        />
-
-        {/* 指示文字 */}
-        <p className="text-lg text-gray-700 mb-6 text-left">
-          請聽例句並選擇正確的選項：
-        </p>
-
-        {/* 音頻播放區 */}
-        <div className="text-center mb-8">
-          <div className="mb-6">
-            <AudioPlayer text={cardData.example} />
-          </div>
-        </div>
-
-        {/* 圖片區（如果有） */}
-        {exampleImage && (
-          <div className="mb-6">
-            <div className="bg-gray-50 rounded-lg p-4">
-              <img
-                src={exampleImage}
-                alt="Example illustration"
-                className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
-                onClick={() => onImageClick?.(exampleImage)}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* 選項區域 - 響應式網格布局 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
-          {options.map((sentence, idx) => (
-            <button
-              key={idx}
-              onClick={() => handleAnswerSelect(sentence)}
-              disabled={disabled || showResult}
-              className={`p-4 text-center rounded-lg border-2 transition-all ${
-                showResult
-                  ? sentence === cardData.example
-                    ? 'border-green-500 bg-green-50 text-green-700'
-                    : sentence === selectedAnswer
-                    ? 'border-red-500 bg-red-50 text-red-700'
-                    : 'border-gray-200 bg-gray-50 text-gray-500'
-                  : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50'
-              }`}
-            >
-              <div className="text-lg font-medium">{sentence}</div>
-            </button>
-          ))}
-        </div>
-
-        {/* 結果反饋區 */}
-        {showResult && (
-          <TestResultDisplay
-            isCorrect={isCorrect}
-            correctAnswer={cardData.example}
-            userAnswer={selectedAnswer || ''}
-            word={cardData.word}
-            pronunciation={cardData.pronunciation}
-            example={cardData.example}
-            exampleTranslation={cardData.exampleTranslation}
-            showResult={showResult}
-          />
-        )}
-      </div>
+  // 音頻播放區域
+  const audioArea = (
+    <div className="text-center">
+      <AudioPlayer text={cardData.example} />
     </div>
   )
+
+  // 問題顯示區域（包含圖片）
+  const questionArea = (
+    <div className="space-y-4">
+      <p className="text-lg text-gray-700 text-left">
+        請聽例句並選擇正確的選項：
+      </p>
+
+      {/* 圖片區（如果有） */}
+      {exampleImage && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <img
+            src={exampleImage}
+            alt="Example illustration"
+            className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
+            onClick={() => onImageClick?.(exampleImage)}
+          />
+        </div>
+      )}
+    </div>
+  )
+
+  // 答題區域
+  const answerArea = (
+    <ChoiceGrid
+      options={options}
+      selectedOption={selectedAnswer}
+      correctAnswer={cardData.example}
+      showResult={showResult}
+      onSelect={handleAnswerSelect}
+      disabled={disabled}
+    />
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult ? (
+    <TestResultDisplay
+      isCorrect={isCorrect}
+      correctAnswer={cardData.example}
+      userAnswer={selectedAnswer || ''}
+      word={cardData.word}
+      pronunciation={cardData.pronunciation}
+      example={cardData.example}
+      exampleTranslation={cardData.exampleTranslation}
+      showResult={showResult}
+    />
+  ) : null
+
+  return (
+    <ListeningTestContainer
+      cardData={cardData}
+      testTitle="例句聽力"
+      audioArea={audioArea}
+      questionArea={questionArea}
+      answerArea={answerArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const SentenceListeningTest = memo(SentenceListeningTestComponent)

frontend/components/review/review-tests/SentenceReorderTest.tsx

@@ -1,10 +1,8 @@
-import React, { useState, useEffect, useCallback, useMemo, memo } from 'react'
-import AudioPlayer from '@/components/AudioPlayer'
+import React, { useState, useEffect, useCallback, memo } from 'react'
 import { ReorderTestProps } from '@/types/review'
 import {
-  ErrorReportButton,
   TestResultDisplay,
-  TestHeader
+  TestContainer
 } from '@/components/review/shared'
 
 interface SentenceReorderTestProps extends ReorderTestProps {
@@ -25,6 +23,9 @@ const SentenceReorderTestComponent: React.FC<SentenceReorderTestProps> = ({
   const [showResult, setShowResult] = useState(false)
   const [reorderResult, setReorderResult] = useState<boolean | null>(null)
 
+  // 判斷是否已答題（完成重組後設定 hasAnswered = true）
+  const hasAnswered = showResult
+
   // 初始化單字順序
   useEffect(() => {
     const words = cardData.example.split(/\s+/).filter(word => word.length > 0)
@@ -63,126 +64,129 @@ const SentenceReorderTestComponent: React.FC<SentenceReorderTestProps> = ({
     setReorderResult(null)
   }, [disabled, showResult, cardData.example])
 
-  return (
-    <div className="relative">
-      <div className="flex justify-end mb-4">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <div className="flex justify-between items-start mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">例句重組</h2>
-          <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
-            {cardData.difficultyLevel}
-          </span>
-        </div>
-
-        {/* 圖片區（如果有） */}
-        {exampleImage && (
-          <div className="mb-6">
-            <div className="bg-gray-50 rounded-lg p-4">
-              <img
-                src={exampleImage}
-                alt="Example illustration"
-                className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
-                onClick={() => onImageClick?.(exampleImage)}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* 重組區域 */}
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">重組區域：</h3>
-          <div className="relative min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
-            {arrangedWords.length === 0 ? (
-              <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-lg">
-                請嘗試組成完整句子
-              </div>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {arrangedWords.map((word, index) => (
-                  <div
-                    key={`arranged-${index}`}
-                    className="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-blue-200 transition-colors"
-                    onClick={() => handleRemoveFromArranged(word)}
-                  >
-                    {word}
-                    <span className="ml-2 text-blue-600 hover:text-blue-800">×</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 指示文字 */}
-        <p className="text-lg text-gray-700 mb-6 text-left">
-          點擊下方單字，依序重組成正確的句子：
-        </p>
-
-        {/* 可用單字區域 */}
-        <div className="mb-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">可用單字：</h3>
-          <div className="bg-white border border-gray-200 rounded-lg p-4 min-h-[80px]">
-            {shuffledWords.length === 0 ? (
-              <div className="text-center text-gray-400">
-                所有單字都已使用
-              </div>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {shuffledWords.map((word, index) => (
-                  <button
-                    key={`shuffled-${index}`}
-                    onClick={() => handleWordClick(word)}
-                    disabled={disabled || showResult}
-                    className="bg-gray-100 text-gray-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition-colors select-none disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {word}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 控制按鈕 */}
-        <div className="flex gap-3 mb-6">
-          {arrangedWords.length > 0 && !showResult && (
-            <button
-              onClick={handleCheckAnswer}
-              disabled={disabled}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              檢查答案
-            </button>
-          )}
-          <button
-            onClick={handleReset}
-            disabled={disabled || showResult}
-            className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            重新開始
-          </button>
-        </div>
-
-        {/* 結果反饋區 */}
-        {showResult && reorderResult !== null && (
-          <TestResultDisplay
-            isCorrect={reorderResult}
-            correctAnswer={cardData.example}
-            userAnswer={arrangedWords.join(' ')}
-            word={cardData.word}
-            pronunciation={cardData.pronunciation}
-            example={cardData.example}
-            exampleTranslation={cardData.exampleTranslation}
-            showResult={showResult}
+  // 主要內容區域
+  const contentArea = (
+    <div className="space-y-6">
+      {/* 圖片區（如果有） */}
+      {exampleImage && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <img
+            src={exampleImage}
+            alt="Example illustration"
+            className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
+            onClick={() => onImageClick?.(exampleImage)}
           />
-        )}
+        </div>
+      )}
+
+      {/* 指示文字 */}
+      <p className="text-lg text-gray-700 text-left">
+        點擊下方單字，依序重組成正確的句子：
+      </p>
+
+      {/* 重組區域 */}
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">重組區域：</h3>
+        <div className="relative min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
+          {arrangedWords.length === 0 ? (
+            <div className="absolute inset-0 flex items-center justify-center text-gray-400 text-lg">
+              請嘗試組成完整句子
+            </div>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {arrangedWords.map((word, index) => (
+                <div
+                  key={`arranged-${index}`}
+                  className="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-blue-200 transition-colors"
+                  onClick={() => handleRemoveFromArranged(word)}
+                >
+                  {word}
+                  <span className="ml-2 text-blue-600 hover:text-blue-800">×</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )
+
+  // 答題區域
+  const answerArea = (
+    <div className="space-y-4">
+      {/* 可用單字區域 */}
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">可用單字：</h3>
+        <div className="bg-white border border-gray-200 rounded-lg p-4 min-h-[80px]">
+          {shuffledWords.length === 0 ? (
+            <div className="text-center text-gray-400">
+              所有單字都已使用
+            </div>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {shuffledWords.map((word, index) => (
+                <button
+                  key={`shuffled-${index}`}
+                  onClick={() => handleWordClick(word)}
+                  disabled={disabled || showResult}
+                  className="bg-gray-100 text-gray-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition-colors select-none disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {word}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 控制按鈕 */}
+      <div className="flex gap-3">
+        {arrangedWords.length > 0 && !showResult && (
+          <button
+            onClick={handleCheckAnswer}
+            disabled={disabled}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            檢查答案
+          </button>
+        )}
+        <button
+          onClick={handleReset}
+          disabled={disabled || showResult}
+          className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          重新開始
+        </button>
+      </div>
+    </div>
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult && reorderResult !== null ? (
+    <TestResultDisplay
+      isCorrect={reorderResult}
+      correctAnswer={cardData.example}
+      userAnswer={arrangedWords.join(' ')}
+      word={cardData.word}
+      pronunciation={cardData.pronunciation}
+      example={cardData.example}
+      exampleTranslation={cardData.exampleTranslation}
+      showResult={showResult}
+    />
+  ) : null
+
+  return (
+    <TestContainer
+      cardData={cardData}
+      testTitle="例句重組"
+      contentArea={contentArea}
+      answerArea={answerArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const SentenceReorderTest = memo(SentenceReorderTestComponent)

frontend/components/review/review-tests/SentenceSpeakingTest.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useCallback, memo } from 'react'
 import VoiceRecorder from '@/components/VoiceRecorder'
 import {
-  ErrorReportButton,
-  TestHeader
+  SpeakingTestContainer
 } from '@/components/review/shared'
 import { BaseReviewProps } from '@/types/review'
 
@@ -21,51 +20,71 @@ const SentenceSpeakingTestComponent: React.FC<SentenceSpeakingTestProps> = ({
 }) => {
   const [showResult, setShowResult] = useState(false)
 
+  // 判斷是否已答題（錄音提交後設定 hasAnswered = true）
+  const hasAnswered = showResult
+
   const handleRecordingComplete = useCallback(() => {
     if (disabled || showResult) return
     setShowResult(true)
     onAnswer(cardData.example) // 語音測驗通常都算正確
   }, [disabled, showResult, cardData.example, onAnswer])
 
-  return (
-    <div className="relative">
-      {/* 錯誤回報按鈕 */}
-      <div className="flex justify-end mb-2">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <TestHeader
-          title="例句口說"
-          difficultyLevel={cardData.difficultyLevel}
-        />
-
-        {/* VoiceRecorder 組件區域 */}
-        <div className="w-full">
-          <VoiceRecorder
-            targetText={cardData.example}
-            targetTranslation={cardData.exampleTranslation}
-            exampleImage={exampleImage}
-            instructionText="請看例句圖片並大聲說出完整的例句："
-            onRecordingComplete={handleRecordingComplete}
+  // 提示區域
+  const promptArea = (
+    <div className="text-center">
+      <p className="text-lg text-gray-700 text-left mb-4">
+        請看例句圖片並大聲說出完整的例句：
+      </p>
+      {exampleImage && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <img
+            src={exampleImage}
+            alt="Example illustration"
+            className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
+            onClick={() => onImageClick?.(exampleImage)}
           />
         </div>
-
-        {/* 結果反饋區 */}
-        {showResult && (
-          <div className="mt-6 p-6 rounded-lg bg-blue-50 border border-blue-200 w-full">
-            <p className="text-blue-700 text-left text-xl font-semibold mb-2">
-              錄音完成！
-            </p>
-            <p className="text-gray-600 text-left">
-              系統正在評估你的發音...
-            </p>
-          </div>
-        )}
-      </div>
+      )}
     </div>
   )
+
+  // 錄音區域
+  const recordingArea = (
+    <div className="w-full">
+      <VoiceRecorder
+        targetText={cardData.example}
+        targetTranslation={cardData.exampleTranslation}
+        exampleImage={exampleImage}
+        instructionText="請看例句圖片並大聲說出完整的例句："
+        onRecordingComplete={handleRecordingComplete}
+      />
+    </div>
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult ? (
+    <div className="p-6 rounded-lg bg-blue-50 border border-blue-200 w-full">
+      <p className="text-blue-700 text-left text-xl font-semibold mb-2">
+        錄音完成！
+      </p>
+      <p className="text-gray-600 text-left">
+        系統正在評估你的發音...
+      </p>
+    </div>
+  ) : null
+
+  return (
+    <SpeakingTestContainer
+      cardData={cardData}
+      testTitle="例句口說"
+      promptArea={promptArea}
+      recordingArea={recordingArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const SentenceSpeakingTest = memo(SentenceSpeakingTestComponent)

frontend/components/review/review-tests/VocabChoiceTest.tsx

@@ -1,15 +1,12 @@
 import React, { useState, useCallback, useMemo, memo } from 'react'
-import AudioPlayer from '@/components/AudioPlayer'
 import { ChoiceTestProps } from '@/types/review'
 import {
-  ErrorReportButton,
   TestResultDisplay,
-  TestHeader
+  ChoiceTestContainer,
+  ChoiceGrid
 } from '@/components/review/shared'
 
-interface VocabChoiceTestProps extends ChoiceTestProps {
-  // VocabChoiceTest specific props (if any)
-}
+interface VocabChoiceTestProps extends ChoiceTestProps {}
 
 const VocabChoiceTestComponent: React.FC<VocabChoiceTestProps> = ({
   cardData,
@@ -21,6 +18,7 @@ const VocabChoiceTestComponent: React.FC<VocabChoiceTestProps> = ({
   const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
   const [showResult, setShowResult] = useState(false)
 
+
   const handleAnswerSelect = useCallback((answer: string) => {
     if (disabled || showResult) return
     setSelectedAnswer(answer)
@@ -32,70 +30,57 @@ const VocabChoiceTestComponent: React.FC<VocabChoiceTestProps> = ({
     selectedAnswer === cardData.word
   , [selectedAnswer, cardData.word])
 
-  return (
-    <div className="relative">
-      <div className="flex justify-end mb-2">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <TestHeader
-          title="詞彙選擇"
-          difficultyLevel={cardData.difficultyLevel}
-        />
-
-        {/* 指示文字 */}
-        <p className="text-lg text-gray-700 mb-6 text-left">
-          請選擇符合上述定義的英文詞彙：
-        </p>
-
-        {/* 定義顯示區 */}
-        <div className="text-center mb-8">
-          <div className="bg-gray-50 rounded-lg p-4 mb-6">
-            <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
-            <p className="text-gray-700 text-left">{cardData.definition}</p>
-          </div>
-        </div>
-
-        {/* 選項區域 - 響應式網格布局 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
-          {options.map((option, idx) => (
-            <button
-              key={idx}
-              onClick={() => handleAnswerSelect(option)}
-              disabled={disabled || showResult}
-              className={`p-4 text-center rounded-lg border-2 transition-all ${
-                showResult
-                  ? option === cardData.word
-                    ? 'border-green-500 bg-green-50 text-green-700'
-                    : option === selectedAnswer
-                    ? 'border-red-500 bg-red-50 text-red-700'
-                    : 'border-gray-200 bg-gray-50 text-gray-500'
-                  : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50'
-              }`}
-            >
-              <div className="text-lg font-medium">{option}</div>
-            </button>
-          ))}
-        </div>
-
-        {/* 結果反饋區 */}
-        {showResult && (
-          <TestResultDisplay
-            isCorrect={isCorrect}
-            correctAnswer={cardData.word}
-            userAnswer={selectedAnswer || ''}
-            word={cardData.word}
-            pronunciation={cardData.pronunciation}
-            example={cardData.example}
-            exampleTranslation={cardData.exampleTranslation}
-            showResult={showResult}
-          />
-        )}
+  // 問題顯示區域
+  const questionArea = (
+    <div className="text-center">
+      <div className="bg-gray-50 rounded-lg p-6">
+        <h3 className="font-semibold text-gray-900 mb-3 text-left">定義</h3>
+        <p className="text-gray-700 text-left text-lg leading-relaxed">{cardData.definition}</p>
       </div>
+      <p className="text-lg text-gray-700 mt-4 text-left">
+        請選擇符合上述定義的英文詞彙：
+      </p>
     </div>
   )
+
+  // 選項區域
+  const optionsArea = (
+    <ChoiceGrid
+      options={options}
+      selectedOption={selectedAnswer}
+      correctAnswer={cardData.word}
+      showResult={showResult}
+      onSelect={handleAnswerSelect}
+      disabled={disabled}
+    />
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult ? (
+    <TestResultDisplay
+      isCorrect={isCorrect}
+      correctAnswer={cardData.word}
+      userAnswer={selectedAnswer || ''}
+      word={cardData.word}
+      pronunciation={cardData.pronunciation}
+      example={cardData.example}
+      exampleTranslation={cardData.exampleTranslation}
+      showResult={showResult}
+    />
+  ) : null
+
+  return (
+    <ChoiceTestContainer
+      cardData={cardData}
+      testTitle="詞彙選擇"
+      questionArea={questionArea}
+      optionsArea={optionsArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const VocabChoiceTest = memo(VocabChoiceTestComponent)

frontend/components/review/review-tests/VocabListeningTest.tsx

@@ -1,15 +1,13 @@
 import React, { useState, useCallback, useMemo, memo } from 'react'
 import AudioPlayer from '@/components/AudioPlayer'
 import {
-  ErrorReportButton,
   TestResultDisplay,
-  TestHeader
+  ListeningTestContainer,
+  ChoiceGrid
 } from '@/components/review/shared'
 import { ChoiceTestProps } from '@/types/review'
 
-interface VocabListeningTestProps extends ChoiceTestProps {
-  // VocabListeningTest specific props (if any)
-}
+interface VocabListeningTestProps extends ChoiceTestProps {}
 
 const VocabListeningTestComponent: React.FC<VocabListeningTestProps> = ({
   cardData,
@@ -21,6 +19,9 @@ const VocabListeningTestComponent: React.FC<VocabListeningTestProps> = ({
   const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
   const [showResult, setShowResult] = useState(false)
 
+  // 判斷是否已答題（選擇了答案）
+  const hasAnswered = selectedAnswer !== null
+
   const handleAnswerSelect = useCallback((answer: string) => {
     if (disabled || showResult) return
     setSelectedAnswer(answer)
@@ -30,74 +31,63 @@ const VocabListeningTestComponent: React.FC<VocabListeningTestProps> = ({
 
   const isCorrect = useMemo(() => selectedAnswer === cardData.word, [selectedAnswer, cardData.word])
 
-  return (
-    <div className="relative">
-      {/* 錯誤回報按鈕 */}
-      <div className="flex justify-end mb-2">
-        <ErrorReportButton onClick={onReportError} />
-      </div>
-
-      <div className="bg-white rounded-xl shadow-lg p-8">
-        {/* 標題區 */}
-        <TestHeader
-          title="詞彙聽力"
-          difficultyLevel={cardData.difficultyLevel}
-        />
-
-        {/* 指示文字 */}
-        <p className="text-lg text-gray-700 mb-6 text-left">
-          請聽發音並選擇正確的英文單字：
-        </p>
-
-        {/* 音頻播放區 */}
-        <div className="space-y-4 mb-8">
-          <div className="bg-gray-50 rounded-lg p-4">
-            <h3 className="font-semibold text-gray-900 mb-2 text-left">發音</h3>
-            <div className="flex items-center gap-3">
-              {cardData.pronunciation && <span className="text-gray-700">{cardData.pronunciation}</span>}
-              <AudioPlayer text={cardData.word} />
-            </div>
-          </div>
-        </div>
-
-        {/* 選項區域 - 2x2網格布局 */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
-          {options.map((option) => (
-            <button
-              key={option}
-              onClick={() => handleAnswerSelect(option)}
-              disabled={disabled || showResult}
-              className={`p-4 text-center rounded-lg border-2 transition-all ${
-                showResult
-                  ? option === cardData.word
-                    ? 'border-green-500 bg-green-50 text-green-700'
-                    : option === selectedAnswer
-                    ? 'border-red-500 bg-red-50 text-red-700'
-                    : 'border-gray-200 bg-gray-50 text-gray-500'
-                  : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50'
-              }`}
-            >
-              <div className="text-lg font-medium">{option}</div>
-            </button>
-          ))}
-        </div>
-
-        {/* 結果反饋區 */}
-        {showResult && (
-          <TestResultDisplay
-            isCorrect={isCorrect}
-            correctAnswer={cardData.word}
-            userAnswer={selectedAnswer || ''}
-            word={cardData.word}
-            pronunciation={cardData.pronunciation}
-            example={cardData.example}
-            exampleTranslation={cardData.exampleTranslation}
-            showResult={showResult}
-          />
-        )}
+  // 音頻播放區域
+  const audioArea = (
+    <div className="bg-gray-50 rounded-lg p-4">
+      <h3 className="font-semibold text-gray-900 mb-2 text-left">發音</h3>
+      <div className="flex items-center gap-3">
+        {cardData.pronunciation && <span className="text-gray-700">{cardData.pronunciation}</span>}
+        <AudioPlayer text={cardData.word} />
       </div>
     </div>
   )
+
+  // 問題顯示區域
+  const questionArea = (
+    <p className="text-lg text-gray-700 text-left">
+      請聽發音並選擇正確的英文單字：
+    </p>
+  )
+
+  // 答題區域
+  const answerArea = (
+    <ChoiceGrid
+      options={options}
+      selectedOption={selectedAnswer}
+      correctAnswer={cardData.word}
+      showResult={showResult}
+      onSelect={handleAnswerSelect}
+      disabled={disabled}
+    />
+  )
+
+  // 結果顯示區域
+  const resultArea = showResult ? (
+    <TestResultDisplay
+      isCorrect={isCorrect}
+      correctAnswer={cardData.word}
+      userAnswer={selectedAnswer || ''}
+      word={cardData.word}
+      pronunciation={cardData.pronunciation}
+      example={cardData.example}
+      exampleTranslation={cardData.exampleTranslation}
+      showResult={showResult}
+    />
+  ) : null
+
+  return (
+    <ListeningTestContainer
+      cardData={cardData}
+      testTitle="詞彙聽力"
+      audioArea={audioArea}
+      questionArea={questionArea}
+      answerArea={answerArea}
+      resultArea={resultArea}
+      onAnswer={onAnswer}
+      onReportError={onReportError}
+      disabled={disabled}
+    />
+  )
 }
 
 export const VocabListeningTest = memo(VocabListeningTestComponent)

frontend/components/review/shared/BaseTestComponent.tsx

@@ -39,19 +39,6 @@ export const BaseTestComponent: React.FC<BaseTestComponentProps> = ({
     showResult: false
   })
 
-  // 更新測驗狀態
-  const updateTestState = useCallback((updates: Partial<TestState>) => {
-    setTestState(prev => ({ ...prev, ...updates }))
-  }, [])
-
-  // 提供給子元件的狀態和方法
-  const testContext = {
-    testState,
-    updateTestState,
-    cardData,
-    disabled: disabled || testState.showResult
-  }
-
   return (
     <div className={`relative ${className}`}>
       {/* 錯誤回報按鈕 */}
@@ -76,7 +63,7 @@ export const BaseTestComponent: React.FC<BaseTestComponentProps> = ({
 
         {/* 測驗內容區域 */}
         <div className="test-content">
-          {React.cloneElement(children as React.ReactElement, { testContext })}
+          {children}
         </div>
 
         {/* 結果顯示區域 */}

frontend/components/review/shared/TestContainer.tsx

@@ -92,7 +92,7 @@ export const TestContainer: React.FC<TestContainerProps> = ({
  */
 
 // 選擇題容器
-export interface ChoiceTestContainerProps extends Omit<TestContainerProps, 'layout'> {
+export interface ChoiceTestContainerProps extends Omit<TestContainerProps, 'layout' | 'contentArea'> {
   questionArea: ReactNode
   optionsArea: ReactNode
 }
@@ -125,7 +125,7 @@ export const ChoiceTestContainer: React.FC<ChoiceTestContainerProps> = ({
 }
 
 // 填空題容器
-export interface FillTestContainerProps extends Omit<TestContainerProps, 'layout'> {
+export interface FillTestContainerProps extends Omit<TestContainerProps, 'layout' | 'contentArea'> {
   sentenceArea: ReactNode
   inputArea: ReactNode
 }
@@ -150,7 +150,7 @@ export const FillTestContainer: React.FC<FillTestContainerProps> = ({
 }
 
 // 聽力測驗容器
-export interface ListeningTestContainerProps extends Omit<TestContainerProps, 'layout'> {
+export interface ListeningTestContainerProps extends Omit<TestContainerProps, 'layout' | 'contentArea'> {
   audioArea: ReactNode
   questionArea: ReactNode
   answerArea: ReactNode
@@ -186,7 +186,7 @@ export const ListeningTestContainer: React.FC<ListeningTestContainerProps> = ({
 }
 
 // 口說測驗容器
-export interface SpeakingTestContainerProps extends Omit<TestContainerProps, 'layout'> {
+export interface SpeakingTestContainerProps extends Omit<TestContainerProps, 'layout' | 'contentArea'> {
   promptArea: ReactNode
   recordingArea: ReactNode
 }