17 KiB
17 KiB
情境對話功能規格文檔 (Web版)
📋 功能概述
功能名稱: 第3關情境對話訓練系統 (Web端)
建立日期: 2025-09-11
最後更新: 2025-09-11
負責團隊: 前端Web/設計/開發
對應Mobile規格: ../mobile/01_situational-dialogue-mobile.md
整合共用規範
本規格基於以下共用模組，請參閱對應規格文件：
主要功能 (第3關情境對話)
- 雙重任務系統: 完成劇情意圖 + 使用前面學習的5個指定詞彙
- 三星評分系統: 任務星、語法星、口說星獨立評估
- AI即時分析: 語法、口說、任務完成三維度即時反饋
- 回覆輔助系統: 三層引導內容和免費輔助功能
- 訂正系統: 語法錯誤和口說問題的精準糾正
- 限時挑戰模式: 300秒限時對話，競技式學習體驗
Web端特色功能
- 雙視窗模式: 左右分割顯示對話和輔助資訊
- 實時打字支援: 完整鍵盤輸入，支援多語言輸入法
- 對話歷史面板: 可捲動查看完整對話記錄和即時分析
- 多標籤對話: 同時進行多個對話練習
- 語音輸入優化: Web Speech API整合，桌面級語音識別
- 進階統計儀表板: 詳細的對話分析和學習軌跡
適用場景
- 辦公室桌面環境的深度對話練習
- 需要大量文字輸入的商務溝通訓練
- 多螢幕環境下的沉浸式學習體驗
- 長時間專注的對話技能提升訓練
與其他功能的關聯
- 線性闖關系統: 完成第2關或第2+關後解鎖，通關後解鎖下一劇本
- 詞彙學習系統: 使用前三關學習的5個指定詞彙
- 道具商店系統: 整合回覆提示道具、加時道具、時間管理道具
- 命條系統: 啟動消耗1個命條，失敗不額外扣除
- 間隔複習系統: 對話中使用的詞彙自動加入複習清單
💻 涉及的Web頁面 (第3關架構)
主要頁面
- Page_Dialogue_Level3_Main_W - 第3關情境對話主界面 (Web版)
- Page_Dialogue_AI_Analysis_W - AI三維對話分析頁面 (Web版)
- Page_Dialogue_Correction_W - 對話訂正系統頁面 (Web版)
- Page_Character_Background_W - 角色詳情與情境背景 (Web版)
- Page_Task_Progress_W - 雙重任務進度追蹤 (Web版)
- Page_Reply_Assistance_W - 回覆卡關輔助面板 (Web版)
Web專用頁面
- Page_Dialogue_History_Dashboard_W - 對話歷史統計儀表板 (Web專用)
- Page_Multi_Dialogue_Manager_W - 多對話管理頁面 (Web專用)
- Page_Timed_Challenge_W - 限時挑戰模式頁面 (Web專用)
輔助模態視窗
- Modal_Cost_Confirm_W - 道具消費確認模態視窗
- Modal_TimeWarp_Cards_W - 時光卷道具使用模態視窗
- Modal_Challenge_Exit_Confirm_W - 挑戰退出確認對話框
- Panel_Three_Star_Display_W - 三星評分結果顯示面板
🎯 詳細頁面規格 (基於共用規範)
Page_Dialogue_Level3_Main_W - 第3關情境對話主界面
功能說明 (整合共用規範)
- 頁面目的: 第3關情境對話的核心學習體驗
- 關卡機制: 參考 線性闖關學習系統 - 第3關
- 進入條件: 完成第2關或第2+關，消耗1個命條
- 通關條件: 雙重任務系統（劇情意圖≥50%完成 + 詞彙至少提及一次）
雙重任務系統
基於 AI算法規格 - 劇情任務識別：
- 劇情意圖任務: 完成指定的情境表達意圖
- 指定詞彙任務: 使用前面關卡學習的5個詞彙
三星評分系統
基於 AI算法規格 - 三星評分：
- ⭐ 任務星: 所有意圖任務100%完成
- ⭐ 語法星: 語法錯誤率 = 0
- ⭐ 口說星: 口說平均分數 > 80
Web版佈局特點
- 主要對話區域: 占螢幕60%寬度，中央對話泡泡顯示
- 任務進度面板: 右側20%寬度，顯示雙重任務進度
- 輔助功能面板: 左側20%寬度，顯示詞彙提示、AI分析
- 底部輸入區域: 固定在底部，包含文字輸入和語音輸入
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 劇本情境標題 | String | 是 | - | 5-50字 | 頁面頂部顯示 |
| 對話參與角色 | Array | 是 | - | 角色陣列 | 右側面板顯示 |
| 對話歷史記錄 | Array | 是 | [] | 對話陣列 | 中央區域，可捲動 |
| 當前說話角色 | String | 是 | - | 角色ID | 動態高亮顯示 |
| 用戶回覆輸入 | String | 否 | - | 1-500字 | 底部輸入框 |
| 劇情任務進度 | Array | 是 | [] | 意圖完成陣列 | 右側面板進度條 |
| 指定詞彙進度 | Array | 是 | [] | 詞彙使用陣列 | 左側面板列表 |
| 剩餘時間 | Number | 否 | - | >=0秒 | 限時挑戰時顯示 |
| 三維即時評分 | Object | 是 | {} | 評分物件 | 即時分析顯示 |
| 語音輸入狀態 | Boolean | 是 | false | true/false | 麥克風圖示狀態 |
| 命條餘額 | Number | 是 | - | >=0 | 右上角顯示 |
Web版互動元素
| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---|---|---|---|---|---|
| 文字輸入框 | 文本區域 | 點擊/自動焦點 | - | 空白→輸入中 | 支援多語言輸入法 |
| 語音輸入按鈕 | 按鈕 | 點擊/V鍵 | V | 關閉→錄音中 | Web Speech API |
| 送出回覆按鈕 | 按鈕 | 點擊/Enter鍵 | Enter | 正常→傳送中 | 主要操作按鈕 |
| 回覆提示按鈕 | 按鈕 | 點擊/H鍵 | H | 正常→請求中 | 消耗30鑽石 |
| 任務提示按鈕 | 按鈕 | 點擊/T鍵 | T | 正常→顯示提示 | 免費，但影響任務星 |
| 詞彙提示按鈕 | 按鈕 | 點擊/W鍵 | W | 正常→顯示範例 | 免費詞彙使用範例 |
| 翻譯輔助按鈕 | 按鈕 | 點擊/G鍵 | G | 正常→翻譯中 | Google翻譯整合 |
| 角色背景查看 | 面板 | 滑鼠懸停 | I | 收合→展開 | 右側面板互動 |
| 對話歷史捲動 | 捲動條 | 滑鼠滾輪 | ↑↓ | - | 無限捲動對話記錄 |
| 語速調節 | 滑桿 | 拖拽/+- | +/- | 0.5x-2x | 語音播放速度 |
| 全螢幕模式 | 按鈕 | 點擊/F11 | F11 | 正常↔全螢幕 | 沉浸式對話模式 |
Web版使用者操作流程
- 對話準備: 頁面載入 → 檢視角色背景 → 閱讀雙重任務目標 → 預習指定詞彙
- 對話進行: AI開場 → 用戶回覆 → AI即時三維評分 → 任務進度更新 → 繼續對話
- 輔助使用: 卡住時查看任務提示 → 使用回覆提示道具 → 查看詞彙範例
- 通關判定: 達到雙重通關條件 → 三星評分結算 → 選擇訂正或直接領獎
Page_Dialogue_AI_Analysis_W - AI三維對話分析頁面
功能說明 (整合口說評分和語用分析)
三維分析架構
基於 AI算法規格 - 三維對話評估：
- 語法評分: 評估語法正確性，完美表現雙倍獎勵
- 口說評分: 五維度口說表現評估（發音/流暢度/韻律/完整度/準確度）
- 語用分析: 六維語用標準建議（僅建議，不評分）
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 語法評分結果 | Object | 是 | {} | 評分物件 | 卡片式顯示 |
| 語法錯誤列表 | Array | 否 | [] | 錯誤陣列 | 有錯誤時顯示 |
| 口說五維評分 | Object | 是 | {} | 評分物件 | 雷達圖顯示 |
| 口說平均分數 | Number | 是 | 0 | 0-100 | 大數字顯示 |
| 語用六維建議 | Object | 是 | {} | 建議物件 | 建議卡片列表 |
| 劇情任務完成度 | Array | 是 | [] | 完成度陣列 | 進度條顯示 |
| 詞彙使用統計 | Object | 是 | {} | 使用統計 | 標籤雲顯示 |
| 三星獲得狀態 | Object | 是 | {} | 星級物件 | 星星圖示顯示 |
| 學習建議列表 | Array | 是 | [] | 建議陣列 | 列表形式 |
Web版互動元素
| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---|---|---|---|---|---|
| 分析類別切換 | 標籤組 | 點擊/1-3數字鍵 | 1-3 | - | 語法/口說/語用切換 |
| 詳細錯誤查看 | 按鈕 | 點擊/D鍵 | D | 收合→展開 | 錯誤詳情面板 |
| 口說音檔回放 | 按鈕 | 點擊/P鍵 | P | 正常→播放中 | 用戶錄音回放 |
| 建議接受按鈕 | 按鈕 | 點擊/A鍵 | A | - | 採納學習建議 |
| 分析報告匯出 | 按鈕 | 點擊/Ctrl+E | Ctrl+E | 正常→處理中 | PDF報告匯出 |
| 立即訂正按鈕 | 按鈕 | 點擊/C鍵 | C | 正常→訂正模式 | 進入訂正流程 |
| 直接領獎按鈕 | 按鈕 | 點擊/R鍵 | R | 正常→領取中 | 跳過訂正直接領獎 |
Page_Dialogue_Correction_W - 對話訂正系統頁面
功能說明 (整合AI訂正系統)
- 頁面目的: 針對語法和口說錯誤進行精準訂正
- 訂正系統: 參考 AI算法規格 - 情境對話AI訂正
- 獎勵機制: 訂正完成後獲得訂正後獎勵數值
訂正流程
- 語法錯誤訂正: 依序對每個錯誤句子進行訂正
- 口說錯誤訂正: 重新錄製口說表現不佳的句子
- 進度追蹤: 分子=訂正次數，分母=總錯誤數
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 待訂正錯誤列表 | Array | 是 | [] | 錯誤陣列 | 左側錯誤清單 |
| 當前訂正句子 | String | 是 | - | 句子字串 | 中央顯示區域 |
| 錯誤類型標記 | String | 是 | - | 錯誤類型 | 語法/口說標籤 |
| 訂正輸入框 | String | 否 | - | 1-200字 | 用戶訂正輸入 |
| 語音重錄區域 | Audio | 否 | - | 音檔 | 口說訂正專用 |
| 訂正進度 | Number | 是 | 0 | 0-100% | 進度條顯示 |
| 訂正結果反饋 | Object | 否 | {} | 反饋物件 | 正確/錯誤提示 |
Page_Timed_Challenge_W - 限時挑戰模式頁面 (Web專用)
功能說明 (整合限時挑戰機制)
- 頁面目的: 300秒限時對話挑戰，競技式學習
- 付費機制: 參考 共同業務規則 - 道具商店
- 入場費: 50鑽石，VIP用戶每日3次免費
限時挑戰特色
- 精確計時: 300秒倒數計時系統
- 時間道具: 時間暫停（100鑽石）、時間加成（150鑽石）
- 效率獎勵: 基於完成時間的1.2x-2.0x獎勵倍數
- 排行榜: 每週限時挑戰排行榜競爭
頁面欄位細節
| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---|---|---|---|---|---|
| 剩餘時間顯示 | Number | 是 | 300 | >=0秒 | 頁面頂部大字體 |
| 入場費確認 | Boolean | 是 | false | true/false | 進入前確認 |
| VIP免費次數 | Number | 否 | 0 | >=0 | VIP用戶顯示 |
| 時間道具庫存 | Object | 否 | {} | 道具物件 | 右側道具面板 |
| 挑戰進度 | Number | 是 | 0 | 0-100% | 任務完成度 |
| 效率倍數 | Number | 是 | 1.0 | 1.0-2.0 | 實時效率計算 |
| 排行榜位置 | Number | 否 | - | >=1 | 當前排名顯示 |
🌐 Web端技術特點 (整合共用規範)
響應式設計適配
- 超寬螢幕: 2560px以上支援三欄佈局（對話+任務+輔助）
- 標準桌面: 1920px最佳化雙欄佈局
- 筆記本: 1366px以上單欄加側邊欄
- 平板橫向: 1024px以上簡化佈局
AI系統整合
基於共用模組的Web端實現：
Web API整合
- Web Speech API: 語音識別和語音合成
- Clipboard API: 複製對話內容和分析結果
- Fullscreen API: 沉浸式對話模式
- Notification API: 桌面通知和學習提醒
- IndexedDB: 對話歷史和分析結果快取
⌨️ Web版快捷鍵系統
對話操作快捷鍵
Enter- 送出回覆Shift + Enter- 換行（多行輸入）V- 開始/停止語音輸入H- 請求回覆提示（消耗30鑽石）T- 顯示任務提示（免費但影響任務星）W- 顯示詞彙使用範例G- Google翻譯輔助Space- 播放/暫停AI語音
頁面導航快捷鍵
Ctrl + T- 開啟新對話標籤Ctrl + W- 關閉當前對話Ctrl + Tab- 切換對話標籤F11- 全螢幕沉浸式模式Esc- 退出當前操作
分析和訂正快捷鍵
1-3- 切換分析類別（語法/口說/語用）D- 顯示詳細錯誤P- 播放口說音檔C- 進入訂正模式R- 跳過訂正直接領獎
📊 Web版業務邏輯差異
第3關特殊機制
基於 線性闖關學習系統 的Web端實現：
- 雙重任務並行: 同時追蹤劇情任務和詞彙使用進度
- 三星獨立評估: 每顆星星獨立計算，最多可獲得0-3顆星
- 命條消耗機制: 啟動時消耗1個命條，失敗不額外扣除
- 解鎖機制: 通關後解鎖下一劇本第1關
道具系統整合
基於 共同業務規則 - 道具商店：
- 回覆提示道具: 30鑽石，提供三層引導內容
- 限時挑戰道具: 時間暫停100鑽石、時間加成150鑽石
- 免費輔助功能: 任務提示、詞彙範例、Google翻譯
多會話管理
- 對話狀態同步: 多標籤對話進度即時同步
- 會話持久化: 瀏覽器關閉前自動保存對話狀態
- 跨設備同步: 通過帳戶系統同步學習進度
🧪 Web版測試要點
第3關流程測試
- 雙重任務系統正常運作
- 三星評分機制正確計算
- 命條消耗和扣除機制
- 通關後正確解鎖下一劇本
AI分析功能測試
- 語法評分準確性
- 口說五維評分正常
- 語用建議生成合理
- 即時分析響應速度<2秒
道具功能測試
- 回覆提示道具正常消費和使用
- 限時挑戰付費機制
- 免費輔助功能無限制使用
- VIP特權正確識別
Web專用功能測試
- 多標籤對話管理
- 全螢幕沉浸式模式
- 快捷鍵功能完整
- 響應式佈局適配
📝 Web端開發注意事項
前端架構
- 使用現代JavaScript框架整合AI分析系統
- 整合多個共用模組API（口說評分、語用分析）
- 實現複雜的雙重任務追蹤邏輯
- 響應式設計支援多種螢幕尺寸
AI系統整合
業務邏輯整合
用戶體驗優化
- 對話輸入無延遲響應
- 語音識別準確度>90%
- AI分析結果視覺化呈現
- 支援完整的快捷鍵操作
文檔狀態: 🟢 已完成 (基於共用規範更新)
最後更新: 2025-09-11
版本: v2.0 - 整合第3關情境對話和AI分析系統
相關文檔:
../common/progressive-stage-system.md- 線性闖關學習系統規格../common/ai-algorithm-specs.md- AI算法規格../common/speaking-evaluation-specs.md- 口說評分系統規格../common/pragmatic-analysis-specs.md- 語用分析系統規格../common/business-rules.md- 共同業務規則