From 0b7f709dba3c51e8663177ef822c4cf85bc4e92e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= Date: Sat, 27 Sep 2025 15:32:41 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=BB=BA=E7=AB=8B=E8=A9=9E=E5=BD=99?= =?UTF-8?q?=E5=AD=B8=E7=BF=92=E6=B8=AC=E9=A9=97UI=E8=A8=AD=E8=A8=88?= =?UTF-8?q?=E8=A6=8F=E6=A0=BC=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 文件內容 - 從原始備份檔案提取完整的測驗UI設計規格 - 涵蓋6種測驗類型的詳細HTML結構和CSS樣式 - 包含互動邏輯、動畫效果和無障礙設計規範 ## 設計規格涵蓋 - 翻卡記憶：3D動畫效果和信心等級評估 - 詞彙選擇：四選一選擇題和即時反饋 - 例句填空：內嵌式輸入框和動態寬度調整 - 例句重組：拖拽式重組和雙區域設計 - 聽力測驗：音頻播放和網格選項布局 - 口說測驗：語音錄製和評估系統 ## 技術特色 - 響應式設計和一致性配色方案 - 完整的狀態管理和錯誤處理 - 進度追蹤系統和Modal設計規範 - 保留原始用戶體驗的所有設計細節 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../learn/tests/FlipMemoryTest.tsx | 0 .../learn/tests/SentenceFillTest.tsx | 0 .../learn/tests/SentenceReorderTest.tsx | 0 .../learn/tests/VocabChoiceTest.tsx | 0 .../learn-backup/learn/tests/index.ts | 0 詞彙學習測驗UI設計規格文件.md | 1096 +++++++++++++++++ 6 files changed, 1096 insertions(+) rename frontend/{components => app/learn-backup}/learn-backup/learn/tests/FlipMemoryTest.tsx (100%) rename frontend/{components => app/learn-backup}/learn-backup/learn/tests/SentenceFillTest.tsx (100%) rename frontend/{components => app/learn-backup}/learn-backup/learn/tests/SentenceReorderTest.tsx (100%) rename frontend/{components => app/learn-backup}/learn-backup/learn/tests/VocabChoiceTest.tsx (100%) rename frontend/{components => app/learn-backup}/learn-backup/learn/tests/index.ts (100%) create mode 100644 詞彙學習測驗UI設計規格文件.md 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 +
+ {/* 錯誤回報按鈕 */} +
+ +
+ + {/* 主要內容區 */} +
+ {/* 測驗內容 */} +
+ + {/* 導航按鈕 */} +
+ + +
+
+``` + +#### 通用標題區 +```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} + +
+ + {/* 指示文字 */} +

+ 點擊卡片翻面，根據你對單字的熟悉程度進行自我評估： +

+ + {/* 單字顯示區 */} +
+
+

{word}

+
+ {pronunciation} + +
+
+
+
+
+ + {/* 背面 */} +
+
+
+ {/* 定義區塊 */} +
+

定義

+

{definition}

+
+ + {/* 例句區塊 */} +
+

例句

+
+

"{example}"

+
+ +
+
+

"{exampleTranslation}"

+
+ + {/* 同義詞區塊 */} +
+

同義詞

+
+ {synonyms.map(synonym => ( + + {synonym} + + ))} +
+
+ + {/* 信心等級評估區 */} +
+

你對這個單字的熟悉程度：

+
+ {[1, 2, 3, 4, 5].map(level => ( + + ))} +
+
+
+
+
+
+
+``` + +### CSS動畫樣式 +```css +.card-container { + perspective: 1000px; + transition: height 0.3s ease; + overflow: visible; + position: relative; +} + +.card { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s ease; + transform-style: preserve-3d; +} + +.card.flipped { + transform: rotateY(180deg); +} + +.card-front, .card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + align-items: stretch; + justify-content: center; + top: 0; + left: 0; +} + +.card-back { + transform: rotateY(180deg); +} +``` + +--- + +## 🎯 2. 詞彙選擇 (vocab-choice) + +### 核心特色 +- 四選一選擇題 +- 顯示詞彙定義，選擇對應單字 +- 即時反饋系統 + +### HTML結構 +```jsx +
+ {/* 標題區 */} +
+

詞彙選擇

+ + {difficultyLevel} + +
+ + {/* 指示文字 */} +

+ 請選擇符合上述定義的英文詞彙： +

+ + {/* 定義顯示區 */} +
+
+

定義

+

{definition}

+
+
+ + {/* 選項區域 */} +
+ {quizOptions.map((option, idx) => ( + + ))} +
+ + {/* 結果反饋區 */} + {showResult && ( +
+

+ {selectedAnswer === correctAnswer ? '正確！' : '錯誤！'} +

+ + {selectedAnswer !== correctAnswer && ( +
+

+ 正確答案是：{correctAnswer} +

+
+ )} + +
+
+
+ 發音： + {pronunciation} + +
+
+ +
+

+ 例句："{example}" +

+

+ 翻譯："{exampleTranslation}" +

+
+
+
+ )} +
+``` + +--- + +## ✏️ 3. 例句填空 (sentence-fill) + +### 核心特色 +- 內嵌式輸入框設計 +- 動態寬度調整 +- 提示系統 +- 支援圖片顯示 + +### HTML結構 +```jsx +
+ {/* 標題區 */} +
+

例句填空

+ + {difficultyLevel} + +
+ + {/* 圖片區（如果有） */} + {exampleImage && ( +
+
+

圖片提示

+ Example illustration 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 && ( +
+

詞彙定義：

+

{definition}

+
+ )} + + {/* 結果反饋區 */} + {showResult && ( +
+

+ {fillAnswer.toLowerCase().trim() === targetWord.toLowerCase() ? '正確！' : '錯誤！'} +

+ + {fillAnswer.toLowerCase().trim() !== targetWord.toLowerCase() && ( +
+

+ 正確答案是：{targetWord} +

+
+ )} + +
+
+

+ 發音： + {pronunciation} + +

+
+ +
+

+ 完整例句："{completeExample}" +

+

+ 翻譯："{exampleTranslation}" +

+
+
+
+ )} +
+``` + +--- + +## 🧩 4. 例句重組 (sentence-reorder) + +### 核心特色 +- 拖拽式單字重組 +- 雙區域設計（可用單字區 + 重組區域） +- 即時狀態反饋 + +### HTML結構 +```jsx +
+ {/* 標題區 */} +
+

例句重組

+ + {difficultyLevel} + +
+ + {/* 圖片區（如果有） */} + {exampleImage && ( +
+
+

圖片提示

+ Example illustration 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} +

+
+
+
+ )} +
+``` + +--- + +## 🎧 5. 聽力測驗 (listening) + +### 5.1 詞彙聽力 (vocab-listening) +```jsx +
+ {/* 標題區 */} +
+

詞彙聽力

+ + {difficultyLevel} + +
+ + {/* 指示文字 */} +

+ 請聽發音並選擇正確的英文單字： +

+ + {/* 音頻播放區 */} +
+
+

發音

+
+ {pronunciation} + +
+
+
+ + {/* 選項區域 - 2x2網格布局 */} +
+ {options.map((word) => ( + + ))} +
+ + {/* 結果反饋區 */} + {showResult && ( +
+

+ {selectedAnswer === correctAnswer ? '正確！' : '錯誤！'} +

+ +
+
+

+ 正確單字：{correctAnswer} +

+

+ 定義：{definition} +

+
+
+
+ )} +
+``` + +### 5.2 例句聽力 (sentence-listening) +```jsx +
+ {/* 標題區 */} +
+

例句聽力

+ + {difficultyLevel} + +
+ + {/* 指示文字 */} +

+ 請聽例句並選擇正確的選項： +

+ + {/* 音頻播放區 */} +
+
+ +

+ 點擊播放聽例句 +

+
+
+ + {/* 選項區域 - 垂直列表布局 */} +
+ {sentenceOptions.map((sentence, idx) => ( + + ))} +
+ + {/* 結果反饋區 */} + {showResult && ( +
+

+ {selectedAnswer === correctSentence ? '正確！' : '錯誤！'} +

+ +
+
+

+ 正確例句："{correctSentence}" +

+

+ 中文翻譯："{translation}" +

+
+
+
+ )} +
+``` + +--- + +## 🎤 6. 口說測驗 (sentence-speaking) + +### 核心特色 +- 整合 VoiceRecorder 組件 +- 語音識別評估 +- 即時反饋系統 + +### HTML結構 +```jsx +
+ {/* 標題區 */} +
+

例句口說

+ + {difficultyLevel} + +
+ + {/* VoiceRecorder 組件區域 */} +
+ { + handleSpeakingAnswer(example) + }} + /> +
+ + {/* 結果反饋區 */} + {showResult && ( +
+

+ 錄音完成！ +

+

+ 系統正在評估你的發音... +

+
+ )} +
+``` + +--- + +## 📊 進度條系統設計 + +### 雙層進度條 +```jsx +
+
+ 學習進度 +
+ {/* 詞卡進度 */} +
+ 詞卡: {completedCards}/{totalCards} +
+ {/* 測驗進度 */} + +
+
+ + {/* 詞卡進度條 */} +
+ 詞卡 +
+
+
+ {completedCards}/{totalCards} +
+ + {/* 測驗進度條 */} +
+ 測驗 +
setShowTaskListModal(true)} + title="點擊查看詳細進度" + > +
+
+ {completedTests}/{totalTests} +
+
+``` + +--- + +## 🎨 通用Modal設計 + +### 圖片放大Modal +```jsx +
setModalImage(null)}> +
+ 放大圖片 + +
+
+``` + +### 任務清單Modal +```jsx +
+
+ {/* 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 +
+ {/* 上一張按鈕 */} + + + {/* 動態下一張按鈕 */} + +
+``` + +### 跳過功能按鈕 +```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