diff --git a/智能複習系統-第五階段開發計劃.md b/智能複習系統-第五階段開發計劃.md
new file mode 100644
index 0000000..1e842b0
--- /dev/null
+++ b/智能複習系統-第五階段開發計劃.md
@@ -0,0 +1,504 @@
+# 智能複習系統-第五階段開發計劃
+
+**版本**: 1.0
+**日期**: 2025-09-28
+**基於**: 智能複習系統開發成果報告.md
+**目標**: 測驗元件整合與導航系統實裝
+
+---
+
+## 📋 階段概述
+
+### 目標
+將新開發的基礎架構整合到現有7種測驗元件，實現完整的智能導航和跳過隊列管理功能。
+
+### 預計時間
+3-4天
+
+### 重點任務
+- 元件重構：使用新基礎架構
+- 導航整合：實現智能導航控制
+- 狀態管理：優化答題和跳過邏輯
+
+---
+
+## 📁 計劃文件結構
+
+將在根目錄創建以下文件：
+```
+/智能複習系統-第五階段開發計劃.md    # 本計劃文件 ✅
+/智能複習系統-整合進度追蹤.md        # 實時進度更新
+/智能複習系統-測試案例文檔.md        # 測試場景和結果
+```
+
+---
+
+## 🎯 第一部分：測驗元件重構（Day 1-2）
+
+### 1.1 FlipMemoryTest 重構
+**目標**: 使用新架構並支援導航狀態
+
+**重構要點**:
+- 整合 `FlipTestContainer`
+- 使用 `ConfidenceLevel` 元件
+- 添加 `hasAnswered` 狀態追蹤
+- 當選擇信心等級後設定 `hasAnswered = true`
+
+**實現細節**:
+```typescript
+// 新的 FlipMemoryTest 結構
+<FlipTestContainer
+  cardArea={翻卡區域}
+  confidenceArea={<ConfidenceLevel onSelect={handleConfidenceSelect} />}
+  navigationArea={<SmartNavigationController hasAnswered={hasAnswered} />}
+/>
+```
+
+### 1.2 VocabChoiceTest 重構
+**目標**: 使用統一選擇題架構
+
+**重構要點**:
+- 整合 `ChoiceTestContainer`
+- 使用 `ChoiceGrid` 元件
+- 整合 `useTestAnswer` Hook
+- 選擇答案後設定 `hasAnswered = true`
+
+**實現細節**:
+```typescript
+// 新的 VocabChoiceTest 結構
+<ChoiceTestContainer
+  questionArea={定義顯示區}
+  optionsArea={<ChoiceGrid options={options} onSelect={handleAnswer} />}
+  resultArea={結果顯示}
+  navigationArea={<SmartNavigationController hasAnswered={showResult} />}
+/>
+```
+
+### 1.3 SentenceFillTest 重構
+**目標**: 使用統一填空題架構
+
+**重構要點**:
+- 整合 `FillTestContainer`
+- 使用 `TextInput` 元件
+- 添加答題狀態管理
+- 提交答案後設定 `hasAnswered = true`
+
+**實現細節**:
+```typescript
+// 新的 SentenceFillTest 結構
+<FillTestContainer
+  sentenceArea={例句顯示區}
+  inputArea={<TextInput onSubmit={handleAnswer} />}
+  resultArea={結果顯示}
+  navigationArea={<SmartNavigationController hasAnswered={showResult} />}
+/>
+```
+
+### 1.4 SentenceReorderTest 重構
+**目標**: 保留拖拽功能，整合新架構
+
+**重構要點**:
+- 使用 `TestContainer` 基礎容器
+- 保留現有拖拽邏輯
+- 添加導航狀態支援
+- 完成重組後設定 `hasAnswered = true`
+
+### 1.5 聽力測驗重構（VocabListening & SentenceListening）
+**目標**: 統一聽力測驗架構
+
+**重構要點**:
+- 整合 `ListeningTestContainer`
+- 使用 `ChoiceGrid` 元件
+- 添加音頻播放狀態管理
+- 選擇答案後設定 `hasAnswered = true`
+
+**實現細節**:
+```typescript
+// 新的聽力測驗結構
+<ListeningTestContainer
+  audioArea={<AudioPlayer />}
+  questionArea={問題顯示}
+  answerArea={<ChoiceGrid options={options} />}
+  navigationArea={<SmartNavigationController hasAnswered={showResult} />}
+/>
+```
+
+### 1.6 SentenceSpeakingTest 重構
+**目標**: 整合錄音控制
+
+**重構要點**:
+- 使用 `SpeakingTestContainer`
+- 整合 `RecordingControl` 元件
+- 錄音提交後設定 `hasAnswered = true`
+
+---
+
+## 🔧 第二部分：ReviewRunner 整合（Day 2-3）
+
+### 2.1 導航控制器整合
+
+**新增功能**:
+```typescript
+// 在 ReviewRunner 中添加
+import { SmartNavigationController } from '@/components/review/NavigationController'
+
+// 狀態追蹤
+const [hasAnswered, setHasAnswered] = useState(false)
+
+// 重置狀態（切換測驗時）
+useEffect(() => {
+  setHasAnswered(false)
+}, [currentTestIndex])
+```
+
+### 2.2 答錯處理機制
+
+**實現邏輯**:
+```typescript
+const handleIncorrectAnswer = (testIndex: number) => {
+  // 1. 標記為答錯
+  markTestIncorrect(testIndex)
+
+  // 2. 設定已答題狀態
+  setHasAnswered(true)
+
+  // 3. 自動重排隊列（優先級 20）
+  // 4. 題目移到隊列最後
+}
+```
+
+### 2.3 跳過處理機制
+
+**實現邏輯**:
+```typescript
+const handleSkipTest = () => {
+  // 1. 調用跳過邏輯
+  skipCurrentTest()
+
+  // 2. 不記錄答題結果
+  // 3. 優先級設為 10
+  // 4. 移到隊列最後
+
+  // 5. 重置答題狀態
+  setHasAnswered(false)
+}
+```
+
+### 2.4 狀態同步
+
+**確保狀態一致性**:
+- `hasAnswered` 狀態同步到導航控制器
+- 測驗完成狀態更新到 store
+- 處理頁面刷新恢復邏輯
+- 防止狀態不一致問題
+
+---
+
+## 📊 第三部分：整合測試（Day 3-4）
+
+### 3.1 單元測試
+
+**測試每個重構的元件**:
+- ✅ 答題狀態追蹤正確
+- ✅ 導航按鈕顯示邏輯
+- ✅ 狀態更新正確性
+- ✅ Props 傳遞正確
+
+### 3.2 整合測試場景
+
+**核心流程測試**:
+
+#### 場景1: 正常答題流程
+```
+1. 載入測驗 → 顯示「跳過」按鈕
+2. 答題 → 設定 hasAnswered = true
+3. 顯示「繼續」按鈕
+4. 點擊繼續 → 進入下一題
+5. 重置 hasAnswered = false
+```
+
+#### 場景2: 跳過流程
+```
+1. 載入測驗 → 顯示「跳過」按鈕
+2. 點擊跳過 → skipCurrentTest()
+3. 題目移到隊列最後
+4. 載入下一個優先級測驗
+5. 最終需要回來完成跳過的題目
+```
+
+#### 場景3: 答錯流程
+```
+1. 載入測驗 → 顯示「跳過」按鈕
+2. 答錯 → markTestIncorrect()
+3. 設定 hasAnswered = true
+4. 顯示「繼續」按鈕
+5. 題目移到隊列最後重複練習
+```
+
+#### 場景4: 混合流程
+```
+多種操作組合：答對+跳過+答錯的混合場景
+驗證優先級排序正確性
+```
+
+### 3.3 邊界案例
+
+**特殊情況處理**:
+- 全部題目跳過的處理
+- 最後一題的導航邏輯
+- 網路中斷恢復
+- 頁面刷新狀態保持
+- 無題目時的狀態
+- 連續答錯的處理
+
+---
+
+## 🔄 第四部分：優化和調整（Day 4）
+
+### 4.1 效能優化
+
+**優化重點**:
+- 減少不必要的重新渲染
+- 優化狀態更新邏輯
+- 防止記憶體洩漏
+- 使用 React.memo 和 useCallback
+
+### 4.2 使用者體驗優化
+
+**改進項目**:
+- 添加過渡動畫
+- 優化按鈕響應速度
+- 改善錯誤提示
+- 增強視覺回饋
+
+---
+
+## 📝 具體實施步驟
+
+### Step 1: 創建開發分支
+```bash
+git checkout -b feature/integrate-navigation-system
+```
+
+### Step 2: 逐個重構測驗元件
+1. **FlipMemoryTest** 開始（最簡單）
+2. **VocabChoiceTest** 和 **VocabListeningTest**（選擇題類型）
+3. **SentenceFillTest**（填空題類型）
+4. **SentenceListeningTest**（聽力+選擇）
+5. **SentenceReorderTest**（拖拽類型）
+6. **SentenceSpeakingTest**（錄音類型，最複雜）
+
+### Step 3: 更新 ReviewRunner
+1. 添加狀態追蹤邏輯
+2. 整合導航控制器
+3. 實現答錯和跳過處理
+4. 測試狀態同步
+
+### Step 4: 測試和調試
+1. 本地開發測試
+2. 修復發現的問題
+3. 優化效能
+4. 邊界案例驗證
+
+### Step 5: 文檔更新
+1. 更新整合指南
+2. 記錄測試結果
+3. 撰寫使用說明
+4. 更新開發成果報告
+
+---
+
+## ⚠️ 風險和注意事項
+
+### 技術風險
+
+| 風險項目 | 影響程度 | 緩解策略 |
+|---------|---------|---------|
+| 相容性問題 | 高 | 漸進式重構，保留備份 |
+| 狀態同步複雜 | 中 | 充分測試，清楚文檔 |
+| 效能下降 | 中 | 使用 React 優化技巧 |
+| 測試覆蓋不足 | 高 | 建立完整測試場景 |
+
+### 緩解策略
+
+1. **保留原始檔案備份**
+2. **漸進式重構**，一次一個元件
+3. **充分測試**每個步驟
+4. **及時提交**，避免大量變更
+5. **文檔記錄**所有變更
+
+---
+
+## 📈 成功指標
+
+### 技術指標
+- ✅ 所有7種測驗元件成功重構
+- ✅ 導航控制器正常運作
+- ✅ 跳過隊列管理功能正常
+- ✅ 無編譯錯誤和警告
+- ✅ 效能無明顯下降
+
+### 功能指標
+- ✅ 答題前只顯示「跳過」按鈕
+- ✅ 答題後只顯示「繼續」按鈕
+- ✅ 跳過題目正確移到隊列最後
+- ✅ 答錯題目能夠重複練習
+- ✅ 優先級排序符合預期
+
+### 使用者體驗指標
+- ✅ 導航流暢無延遲
+- ✅ 狀態切換即時響應
+- ✅ 進度追蹤準確顯示
+- ✅ 視覺回饋清晰明確
+
+---
+
+## 🚀 預期成果
+
+完成第五階段後將實現：
+
+### 1. 統一的元件架構
+- 所有測驗使用相同基礎架構
+- 程式碼重用度大幅提高
+- 維護成本顯著降低
+
+### 2. 智能導航系統
+- 完全符合 PRD US-008 要求
+- 狀態驅動的按鈕顯示
+- 答題與導航完全分離
+
+### 3. 跳過隊列管理
+- 實現 PRD US-009 所有功能
+- 靈活的學習節奏控制
+- 智能優先級排序
+
+### 4. 更好的開發體驗
+- 統一的開發模式
+- 清晰的架構規範
+- 便於擴展和維護
+
+---
+
+## 📋 檢查清單
+
+### 開發前準備
+- [ ] 創建開發分支
+- [ ] 備份現有檔案
+- [ ] 設置測試環境
+- [ ] 準備測試數據
+
+### 重構檢查
+- [x] FlipMemoryTest 重構完成 ✅ (2025-09-28)
+- [x] VocabChoiceTest 重構完成 ✅ (2025-09-28)
+- [x] SentenceFillTest 重構完成 ✅ (2025-09-28)
+- [x] SentenceReorderTest 重構完成 ✅ (2025-09-28)
+- [x] VocabListeningTest 重構完成 ✅ (2025-09-28)
+- [x] SentenceListeningTest 重構完成 ✅ (2025-09-28)
+- [x] SentenceSpeakingTest 重構完成 ✅ (2025-09-28)
+
+### 整合檢查
+- [ ] ReviewRunner 更新完成
+- [ ] 導航控制器整合
+- [ ] 狀態管理優化
+- [ ] 測試場景驗證
+
+### 最終檢查
+- [ ] 所有測試通過
+- [ ] 效能符合要求
+- [ ] 文檔更新完成
+- [ ] 程式碼審查通過
+
+---
+
+**批准**: 待確認
+**預計開始日期**: 2025-09-28
+**預計完成日期**: 2025-10-02
+**負責人**: 開發團隊
+
+---
+
+## 📊 實際開發進度
+
+### 2025-09-28 開發日誌
+
+#### ✅ 已完成
+1. **FlipMemoryTest 重構** (2025-09-28 16:30)
+   - 成功整合 ConfidenceLevel 元件
+   - 實現 hasAnswered 狀態追蹤邏輯
+   - 保留完整翻卡動畫功能
+   - 使用 inline styles 替代 styled-jsx 避免編譯問題
+   - 編譯測試通過，review-design 頁面正常運行
+
+2. **VocabChoiceTest 重構** (2025-09-28 16:40)
+   - 成功整合 ChoiceTestContainer 架構
+   - 使用新的 ChoiceGrid 元件替代原有選項實現
+   - 實現 hasAnswered 狀態追蹤（選擇答案後設為 true）
+   - 保留完整的答題結果顯示和反饋功能
+   - 編譯成功無錯誤
+
+3. **SentenceFillTest 重構** (2025-09-28 16:43)
+   - 成功整合 FillTestContainer 架構
+   - 使用新的 TextInput 元件替代原有 SentenceInput
+   - 保留複雜的填空邏輯（支援後端挖空和前端降級）
+   - 整合提示功能和操作按鈕
+   - 編譯成功無錯誤
+
+#### ✅ 已完成 (2025-09-28 16:50)
+**階段性檢查和優化完成**:
+- 所有重構元件編譯成功無錯誤
+- 修復 BaseTestComponent.tsx TypeScript 錯誤
+- 清理未使用的代碼和註釋
+- 開發伺服器運行穩定，/review-design 頁面正常載入
+- TypeScript 類型檢查通過
+
+#### ✅ 已完成 (2025-09-28 17:00)
+**所有7種測驗元件重構完成**:
+
+**4. SentenceReorderTest 重構** (2025-09-28 16:55)
+   - 使用 TestContainer 基礎容器
+   - 保留完整拖拽重組邏輯
+   - 拆分為 contentArea（重組區域）和 answerArea（可用單字+控制按鈕）
+   - 實現 hasAnswered 狀態追蹤
+   - 編譯成功無錯誤
+
+**5. VocabListeningTest 重構** (2025-09-28 16:57)
+   - 使用 ListeningTestContainer 架構
+   - 整合新的 ChoiceGrid 元件
+   - 修復 ListeningTestContainer 介面問題（排除 contentArea）
+   - 音頻播放、問題顯示、答題區域分離
+   - 編譯成功無錯誤
+
+**6. SentenceListeningTest 重構** (2025-09-28 16:58)
+   - 使用 ListeningTestContainer 架構
+   - 保留圖片支援功能
+   - 使用 ChoiceGrid 統一選項介面
+   - 完整聽力+選擇題流程整合
+   - 編譯成功無錯誤
+
+**7. SentenceSpeakingTest 重構** (2025-09-28 17:00)
+   - 使用 SpeakingTestContainer 架構
+   - 修復 SpeakingTestContainer 介面問題（排除 contentArea）
+   - 保留完整 VoiceRecorder 整合功能
+   - 拆分為 promptArea（提示+圖片）和 recordingArea（錄音控制）
+   - 編譯成功無錯誤
+
+#### ✅ 重構總結
+**架構統一達成**:
+- 7種測驗元件全部重構完成
+- 統一使用容器組件模式
+- 各元件都實現 hasAnswered 狀態追蹤
+- 所有元件編譯無錯誤，TypeScript 檢查通過
+
+#### 🔄 進行中
+- 準備開始 ReviewRunner 導航系統整合
+
+#### 📝 技術備註
+- FlipMemoryTest 未使用 FlipTestContainer，因為該容器不支援翻卡特定功能
+- 使用 React inline styles 實現 3D 翻卡效果，避免 styled-jsx 編譯問題
+- 成功集成新的 ConfidenceLevel 元件，替代原有 ConfidenceButtons
+- hasAnswered 狀態正確追蹤：選擇信心等級後設定為 true
+
+#### ⚠️ 注意事項
+- BaseTestComponent 的 cardData.difficultyLevel 存取錯誤已解決
+- 確保所有 mockCardData 包含必要欄位（包括 synonyms）
+- Next.js 編譯快取問題需要清除 .next 目錄解決
\ No newline at end of file