S-20 Speak Studio Smart Speaking Practice
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
AI 口說練習
🎨 Figma: SS_main 🔗 · recording 🔗 · result 🔗
🎯 功能定位
這是專為口說設計的 AI 練功房。
- 核心邏輯：遵循 特別盒子 > 當前 Session > 盒子 1-6 的優先順序，排除所有非口說題型。
- AI 判定：透過 ASR 即時比對標準音檔，給予精確到「字」級別的顏色反饋。
- 容錯機制：提供求助功能，確保學生不會因挫敗而中斷練習。
允許學生進行3次練習，1次性過才可以升級盒子。3次全錯或者skip則算爲錯誤。
🧱 畫面結構
- Status Bar (固定):
Level: ES1 Session: 4-2 | ⭐ 03:00 - Title:
Smart Speaking Practice - Question:
Nǐ hǎo ma?你好嗎？← 題目顯示 (簡體中文) - Help:
[ 🔊 Need Help? ]← 求助功能 (播放標準音) - ASR Status:
[ Recording... ] - Mic Button:
( 🎤 ) Hold to Speak← 圓形大按鈕 - Result:
[ 你 ][ 好 ][ 嗎 ]← 即時顏色標示回饋 - Progress:
Completed: 08 [ Skip > ]
※注意：學生確實無法通過的時候，可以 Skip。
設計參考: ASR 顏色反饋 — 綠色表示正確，紅色表示錯誤，橙色表示模糊或聲調不準。麥克風按鈕為大圓形（≥44px 觸控目標）。
📥 題型內容說明
具體參考 10-盒子系統.md 中定義的出題邏輯與盒子演算法。
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 狀態 | 備註 |
|---|---|---|---|---|---|
| 1 | 狀態區 | Timer | 自動倒數，歸零後完成該題即結束 | 運行中 | 預設時長 t=3 |
| 2 | 題目區 | Content Display | 根據 A-40 矩陣顯示字/詞/句/QA | 靜態 | 字體需大且清晰 |
| 3 | 輔助區 | Need Help? | 點擊播放標準原音 | 播放中 / 閒置 | 使用後該題不進階盒子 |
| 4 | 互動區 | Microphone | 長按錄音，放開提交 | Recording / Idle | 需有波形動畫回饋感 |
| 5 | 回饋區 | ASR Result | 以「字」為單位自動上色標註 | Pass / Try Again | 紅色=錯誤；綠色=正確 |
| 6 | 進度區 | Count/Counter | 顯示此回合完成的總題數 | 動態累加 | 激勵機制 |
🎨 ASR 顏色標示邏輯 (Visual Feedback)
為了讓學生精確知道「哪裡唸錯」，我們不顯示錄音轉文字，而是直接在原題目上塗色：
- 綠色: 辨識完全正確
- 紅色: 辨識完全錯誤
- 橙色: 辨識模糊或聲調不準
例子：題目：
[ 我 ][ 很 ][ 漂亮 ]，學生唸錯「漂亮」 → 畫面顯示：[ 我(綠) ][ 很(綠) ][ 漂亮(紅) ]+ 提示 Try Again
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| Recording | 長按麥克風 | 按鈕縮小，伴隨波形圖動畫 |
| Evaluating | 放開按鈕後 | 顯示「Evaluating...」，禁止再次點擊 |
| Pass | ASR 判定通過 | 字體全綠，盒子編號 +1，設定冷卻時間 |
| Fail | ASR 判定失敗 | 錯誤字標紅，停留重錄 |
| Help Used | 點擊求助 | 播放原音，該題不進階盒子 |
| QA Priority | 存在快問快答題型 | 強制取代「說 3」提升難度 |
🔎 邏輯自我檢查
- 盒子分離：口說盒子進度與 Discovery Hub 完全獨立計算。
- 求助限制：「使用 Help 後不可進階」規則已寫入邏輯。
- 連續錯誤：同一題 Try Again 超過 3 次，系統自動存入 Special Box 並顯示「Let's try next one」跳過。
- 自動化判斷：ASR 僅比對語音合理性，不顯示學生唸錯的錯字。
- 麥克風權限：進入前確認麥克風權限。