diff --git a/frontend/components/learn-backup/learn/tests/FlipMemoryTest.tsx b/frontend/app/learn-backup/learn-backup/learn/tests/FlipMemoryTest.tsx
similarity index 100%
rename from frontend/components/learn-backup/learn/tests/FlipMemoryTest.tsx
rename to frontend/app/learn-backup/learn-backup/learn/tests/FlipMemoryTest.tsx
diff --git a/frontend/components/learn-backup/learn/tests/SentenceFillTest.tsx b/frontend/app/learn-backup/learn-backup/learn/tests/SentenceFillTest.tsx
similarity index 100%
rename from frontend/components/learn-backup/learn/tests/SentenceFillTest.tsx
rename to frontend/app/learn-backup/learn-backup/learn/tests/SentenceFillTest.tsx
diff --git a/frontend/components/learn-backup/learn/tests/SentenceReorderTest.tsx b/frontend/app/learn-backup/learn-backup/learn/tests/SentenceReorderTest.tsx
similarity index 100%
rename from frontend/components/learn-backup/learn/tests/SentenceReorderTest.tsx
rename to frontend/app/learn-backup/learn-backup/learn/tests/SentenceReorderTest.tsx
diff --git a/frontend/components/learn-backup/learn/tests/VocabChoiceTest.tsx b/frontend/app/learn-backup/learn-backup/learn/tests/VocabChoiceTest.tsx
similarity index 100%
rename from frontend/components/learn-backup/learn/tests/VocabChoiceTest.tsx
rename to frontend/app/learn-backup/learn-backup/learn/tests/VocabChoiceTest.tsx
diff --git a/frontend/components/learn-backup/learn/tests/index.ts b/frontend/app/learn-backup/learn-backup/learn/tests/index.ts
similarity index 100%
rename from frontend/components/learn-backup/learn/tests/index.ts
rename to frontend/app/learn-backup/learn-backup/learn/tests/index.ts
diff --git a/詞彙學習測驗UI設計規格文件.md b/詞彙學習測驗UI設計規格文件.md
new file mode 100644
index 0000000..5f52a44
--- /dev/null
+++ b/詞彙學習測驗UI設計規格文件.md
@@ -0,0 +1,1096 @@
+# 詞彙學習測驗UI設計規格文件
+
+**文件版本**: 1.0
+**建立日期**: 2025-09-27
+**來源**: 從備份檔案 `page-v1-original.tsx` 提取的完整UI設計規格
+**用途**: 重新實作測驗功能時的設計參考文件
+
+---
+
+## 📋 總體設計架構
+
+### 核心測驗類型
+該系統包含6種主要測驗類型：
+1. **翻卡記憶** (flip-memory)
+2. **詞彙選擇** (vocab-choice)
+3. **例句填空** (sentence-fill)
+4. **例句重組** (sentence-reorder)
+5. **聽力測驗** (listening - vocab-listening, sentence-listening)
+6. **口說測驗** (speaking - sentence-speaking)
+
+### 共同設計元素
+
+#### 通用容器結構
+```jsx
+
+ {/* 錯誤回報按鈕 */}
+
+
+
+
+ {/* 主要內容區 */}
+
+ {/* 測驗內容 */}
+
+
+ {/* 導航按鈕 */}
+
+
+
+
+
+
+ {測驗名稱}
+
+
+ {currentCard.difficultyLevel}
+
+
+```
+
+#### 配色方案
+- **主色調**: `bg-primary`, `text-white`, `hover:bg-primary-dark`
+- **次要色調**: `bg-gray-500`, `hover:bg-gray-600`
+- **成功狀態**: `bg-green-50`, `border-green-200`, `text-green-700`
+- **錯誤狀態**: `bg-red-50`, `border-red-200`, `text-red-700`
+- **提示狀態**: `bg-yellow-50`, `border-yellow-200`, `text-yellow-800`
+- **信息狀態**: `bg-blue-50`, `border-blue-200`, `text-blue-700`
+
+---
+
+## 🔄 1. 翻卡記憶 (flip-memory)
+
+### 核心特色
+- 3D翻卡動畫效果
+- 正面顯示單字，背面顯示詳細資訊
+- 信心等級評估系統
+
+### HTML結構
+```jsx
+
+
+ {/* 正面 */}
+
+
+ {/* 標題區 */}
+
+
翻卡記憶
+
+ {difficultyLevel}
+
+
+
+ {/* 指示文字 */}
+
+ 點擊卡片翻面，根據你對單字的熟悉程度進行自我評估：
+
+
+ {/* 單字顯示區 */}
+
+
+
+
+ {/* 背面 */}
+
+
+
+ {/* 定義區塊 */}
+
+
+ {/* 例句區塊 */}
+
+
例句
+
+
"{exampleTranslation}"
+
+
+ {/* 同義詞區塊 */}
+
+
同義詞
+
+ {synonyms.map(synonym => (
+
+ {synonym}
+
+ ))}
+
+
+
+ {/* 信心等級評估區 */}
+
+
你對這個單字的熟悉程度：
+
+ {[1, 2, 3, 4, 5].map(level => (
+
+ ))}
+
+
+
+
+
+
+
+ {/* 標題區 */}
+
+
詞彙選擇
+
+ {difficultyLevel}
+
+
+
+ {/* 指示文字 */}
+
+ 請選擇符合上述定義的英文詞彙：
+
+
+ {/* 定義顯示區 */}
+
+
+ {/* 選項區域 */}
+
+ {quizOptions.map((option, idx) => (
+
+ ))}
+
+
+ {/* 結果反饋區 */}
+ {showResult && (
+
+
+ {selectedAnswer === correctAnswer ? '正確！' : '錯誤！'}
+
+
+ {selectedAnswer !== correctAnswer && (
+
+
+ 正確答案是：{correctAnswer}
+
+
+ )}
+
+
+
+
+
發音：
+
{pronunciation}
+
+
+
+
+
+
+ 例句："{example}"
+
+
+ 翻譯："{exampleTranslation}"
+
+
+
+
+ )}
+
+ {/* 標題區 */}
+
+
例句填空
+
+ {difficultyLevel}
+
+
+
+ {/* 圖片區（如果有） */}
+ {exampleImage && (
+
+
+
圖片提示
+
setModalImage(exampleImage)}
+ />
+
+
+ )}
+
+ {/* 指示文字 */}
+
+ 請點擊例句中的空白處輸入正確的單字：
+
+
+ {/* 填空句子區域 */}
+
+
+
+ {/* 動態生成填空句子 */}
+ {sentence.split(targetWord).map((part, index) => {
+ const isTargetWord = index > 0;
+ return (
+
+ {part}
+ {isTargetWord && (
+
+ setFillAnswer(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && !showResult && fillAnswer.trim()) {
+ handleFillAnswer()
+ }
+ }}
+ placeholder=""
+ disabled={showResult}
+ className={`inline-block px-2 py-1 text-center bg-transparent focus:outline-none disabled:bg-gray-100 ${
+ fillAnswer
+ ? 'border-b-2 border-blue-500'
+ : 'border-b-2 border-dashed border-gray-400 focus:border-blue-400 focus:border-solid'
+ }`}
+ style={{
+ width: `${Math.max(100, Math.max(targetWord.length * 12, fillAnswer.length * 12 + 20))}px`
+ }}
+ />
+ {!fillAnswer && (
+
+ ____
+
+ )}
+
+ )}
+
+ )
+ })}
+
+
+
+
+ {/* 操作按鈕 */}
+
+ {!showResult && fillAnswer.trim() && (
+
+ )}
+
+
+
+ {/* 提示區域 */}
+ {showHint && (
+
+ )}
+
+ {/* 結果反饋區 */}
+ {showResult && (
+
+
+ {fillAnswer.toLowerCase().trim() === targetWord.toLowerCase() ? '正確！' : '錯誤！'}
+
+
+ {fillAnswer.toLowerCase().trim() !== targetWord.toLowerCase() && (
+
+
+ 正確答案是：{targetWord}
+
+
+ )}
+
+
+
+
+ 發音：
+ {pronunciation}
+
+
+
+
+
+
+ 完整例句："{completeExample}"
+
+
+ 翻譯："{exampleTranslation}"
+
+
+
+
+ )}
+
+ {/* 標題區 */}
+
+
例句重組
+
+ {difficultyLevel}
+
+
+
+ {/* 圖片區（如果有） */}
+ {exampleImage && (
+
+
+
圖片提示
+
setModalImage(exampleImage)}
+ />
+
+
+ )}
+
+ {/* 重組區域 */}
+
+
重組區域：
+
+ {arrangedWords.length === 0 ? (
+
+ 將下方單字拖拽到這裡組成完整句子
+
+ ) : (
+
+ {arrangedWords.map((word, index) => (
+
handleRemoveFromArranged(word)}
+ >
+ {word}
+ ×
+
+ ))}
+
+ )}
+
+
+
+ {/* 指示文字 */}
+
+ 點擊下方單字，依序重組成正確的句子：
+
+
+ {/* 可用單字區域 */}
+
+
可用單字：
+
+ {shuffledWords.length === 0 ? (
+
+ 所有單字都已使用
+
+ ) : (
+
+ {shuffledWords.map((word, index) => (
+
+ ))}
+
+ )}
+
+
+
+ {/* 控制按鈕 */}
+
+ {arrangedWords.length > 0 && (
+
+ )}
+
+
+
+ {/* 結果反饋區 */}
+ {reorderResult !== null && (
+
+
+ {reorderResult ? '正確！' : '錯誤！'}
+
+
+ {!reorderResult && (
+
+
+ 正確答案是："{correctSentence}"
+
+
+ )}
+
+
+
+
+
+
+ 中文翻譯：{translation}
+
+
+
+
+ )}
+
+ {/* 標題區 */}
+
+
詞彙聽力
+
+ {difficultyLevel}
+
+
+
+ {/* 指示文字 */}
+
+ 請聽發音並選擇正確的英文單字：
+
+
+ {/* 音頻播放區 */}
+
+
+ {/* 選項區域 - 2x2網格布局 */}
+
+ {options.map((word) => (
+
+ ))}
+
+
+ {/* 結果反饋區 */}
+ {showResult && (
+
+
+ {selectedAnswer === correctAnswer ? '正確！' : '錯誤！'}
+
+
+
+
+
+ 正確單字：{correctAnswer}
+
+
+ 定義：{definition}
+
+
+
+
+ )}
+
+ {/* 標題區 */}
+
+
例句聽力
+
+ {difficultyLevel}
+
+
+
+ {/* 指示文字 */}
+
+ 請聽例句並選擇正確的選項：
+
+
+ {/* 音頻播放區 */}
+
+
+ {/* 選項區域 - 垂直列表布局 */}
+
+ {sentenceOptions.map((sentence, idx) => (
+
+ ))}
+
+
+ {/* 結果反饋區 */}
+ {showResult && (
+
+
+ {selectedAnswer === correctSentence ? '正確！' : '錯誤！'}
+
+
+
+
+
+ 正確例句："{correctSentence}"
+
+
+ 中文翻譯："{translation}"
+
+
+
+
+ )}
+
+ {/* 標題區 */}
+
+
例句口說
+
+ {difficultyLevel}
+
+
+
+ {/* VoiceRecorder 組件區域 */}
+
+ {
+ handleSpeakingAnswer(example)
+ }}
+ />
+
+
+ {/* 結果反饋區 */}
+ {showResult && (
+
+
+ 錄音完成！
+
+
+ 系統正在評估你的發音...
+
+
+ )}
+
+
+
學習進度
+
+ {/* 詞卡進度 */}
+
+ 詞卡: {completedCards}/{totalCards}
+
+ {/* 測驗進度 */}
+
+
+
+
+ {/* 詞卡進度條 */}
+
+
詞卡
+
+
{completedCards}/{totalCards}
+
+
+ {/* 測驗進度條 */}
+
+
測驗
+
setShowTaskListModal(true)}
+ title="點擊查看詳細進度"
+ >
+
+
+
{completedTests}/{totalTests}
+
+
setModalImage(null)}>
+
+
+
+
+
+
+ {/* Header */}
+
+
+ 📚 學習任務清單
+
+
+
+
+ {/* Content */}
+
+ {/* 進度統計 */}
+
+
+
+ 測驗進度: {completedTests} / {totalTests} ({progressPercentage}%)
+
+
+ ✅ 已完成: {completedCount}
+ ⏳ 進行中: {currentCount}
+ ⚪ 待完成: {pendingCount}
+
+
+
+
+
+ {/* 測驗清單 */}
+
+ {testItems.map((item) => (
+
+
+ {item.isCompleted ? '✅' : item.isCurrent ? '⏳' : '⚪'}
+
+
+
+ {item.order}. {item.word} - {item.testName}
+
+
+ {item.isCompleted ? '已完成' :
+ item.isCurrent ? '進行中' : '待完成'}
+
+
+
+ ))}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+ {/* 上一張按鈕 */}
+
+
+ {/* 動態下一張按鈕 */}
+
+
+```
+
+### 跳過功能按鈕
+```jsx
+{/* 跳過按鈕（答題前狀態） */}
+{!showResult && (
+
+
+
+)}
+
+{/* 繼續按鈕（答題後狀態） */}
+{showResult && (
+
+
+
+)}
+```
+
+---
+
+## 🎨 設計特色總結
+
+### 1. **一致性設計**
+- 所有測驗類型都採用相同的容器結構 (`bg-white rounded-xl shadow-lg p-8`)
+- 統一的配色方案和視覺層次
+- 標準化的按鈕樣式和hover效果
+
+### 2. **響應式布局**
+- 使用 Grid 和 Flexbox 布局
+- 適配不同螢幕尺寸 (`md:grid-cols-2 lg:grid-cols-3`)
+- 移動端友好的觸控設計
+
+### 3. **互動動畫**
+- 翻卡3D效果 (`transform: rotateY(180deg)`)
+- Hover狀態轉換 (`transition-all`, `hover:bg-blue-50`)
+- 按鈕點擊反饋 (`active:bg-gray-300`)
+
+### 4. **無障礙設計**
+- 鍵盤導航支援 (`onKeyDown` Enter 鍵提交)
+- 清晰的狀態反饋 (`disabled` 狀態顯示)
+- 適當的對比度和字體大小
+
+### 5. **視覺層次**
+- 合理的間距系統 (`mb-6`, `p-4`, `gap-3`)
+- 字體大小層次 (`text-4xl`, `text-2xl`, `text-lg`, `text-sm`)
+- 顏色對比設計 (`text-gray-900`, `text-gray-700`, `text-gray-500`)
+
+### 6. **即時反饋**
+- 答題後的即時視覺反饋（綠色成功，紅色錯誤）
+- 動態進度條更新
+- 狀態圖標顯示 (`✅`, `❌`, `⏳`, `⚪`)
+
+---
+
+## 📝 實作注意事項
+
+### 必需依賴組件
+1. **AudioPlayer** - 音頻播放功能
+2. **VoiceRecorder** - 語音錄製功能
+3. **MasteryIndicator** - 熟悉度顯示
+4. **ReviewTypeIndicator** - 測驗類型指示器
+
+### 關鍵狀態管理
+- `isFlipped` - 翻卡狀態
+- `showResult` - 顯示答題結果
+- `selectedAnswer` - 用戶選擇的答案
+- `fillAnswer` - 填空題答案
+- `arrangedWords` / `shuffledWords` - 重組題狀態
+
+### 動畫效果實作
+- 使用 CSS `transition-all` 實現平滑過渡
+- 翻卡動畫需要 `transform-style: preserve-3d`
+- 進度條動畫使用 `transition-all` 配合動態 `width` 樣式
+
+這份文件保留了原始設計的所有精華和用戶體驗細節，可作為重新實作的完整參考。
\ No newline at end of file