互動頁基本規劃｜方案 A 第二螢幕
與 Google Meet 並排的輕量互動頁
老師零登入時，Google Meet 只負責影音；出題、作答、倒數、計分與資料回寫全在自家互動頁完成。設計原則：極輕、秒同步、斷線可恢復。
lesson_id01｜定位與範圍
解決什麼、不解決什麼
要做的
與 Meet 並排的第二螢幕：老師投放關卡、學生作答、即時倒數與計分、結果回寫錯題本與學習報告。
支援手機／平板／電腦瀏覽器，免安裝、免登入。
需由程式實現：Meet 原生不提供，整頁由 CoursePass 自行開發。
不做的
不做視訊（交給 Google Meet）、不做錄影（預設關閉）、P1 不做影片同步觀看與複雜題型。
不依賴 Meet add-on（add-on 需登入 Google 帳號）。
02｜角色與畫面
同一支頁面，依 token 角色顯示
老師 Console
本堂孩子的弱點／錯題清單、題庫快選、投放第 N 題、即時作答格與正確率、倒數控制、結束本題。
不顯示全家庭付款資訊。
學生 View
大字題幹與選項／填空、送出、對錯與正解、目前得分、倒數、下一題提示。
一句話＋一個開始，降低認知負擔。
即時程度與紀錄
每次作答即時回寫精熟度與錯題本；老師端同步看到該生該知識點的目前程度、弱點與進步。
不必等課後報告，上課當下就能決定換題或補先備。
身分：/live/<token> 的短效 token → lesson_id＋role；過期失效、換課換 room。免 Google 登入。
03｜一堂課的流程
四個時段一次看完
系統依弱點預選 3–5 題並快取；建立 lesson 與一次性 token；產生 /live/<token>。
師生點連結進互動頁 → 驗 token → 自動連 WebSocket 房間（room=lesson_id）→ 候課室＋設備檢查；Meet 另開一個視窗。
老師按投放 → 廣播題目（含 server_ts 與時限）→ 學生作答送回 → 伺服器判定並回傳結果、更新老師端統計 → 倒數以伺服器時間校正。
老師填三欄紀錄 → 系統生成報告、指派 1–3 關卡 → 作答結果回寫錯題本與學習地圖。
04｜同步與延遲設計
WebSocket 房間制＋伺服器權威時間
| 事件 | 方向 | 內容 |
|---|---|---|
join | client → server | token、role、裝置資訊 |
room_state | server → client | 目前題目、作答進度、分數快照（重連恢復用） |
push_question | 老師 → server → 學生 | 題幹、選項、時限、server_ts |
submit | 學生 → server | question_id、答案 |
judge_result | server → 學生 | 對錯、正解、得分 |
score_update | server → 老師 | 全班正確率、作答分布 |
timer_sync | server → client | server_ts（校正本地時間偏移） |
end_question | 老師 → server → 學生 | 結束本題、公布結果 |
低延遲
伺服器放台灣/亞洲節點，RTT 目標 < 100ms。倒數不在每個 tick 來回，改由 server_ts 校正偏移後本地跑。
可恢復
狀態採「事件＋快照」：新進或斷線重連先拿 room_state，再接後續事件；指數退避重連，斷線顯示提示不中斷課程。
05｜技術架構
輕前端＋WebSocket Gateway＋既有後端
前端
輕量單頁（原生 DOM／Canvas，或極輕框架）；手機優先響應式；預載本堂題目；無大圖、無影片。
同步層
WebSocket Gateway（房間制）；認證與事件路由；時間校正服務；狀態快照儲存。
後端／資料
沿用既有題庫、108 課綱知識點、錯題本、報告；新增 tutoring_sessions、answers。
與 Google 的界線：Google 只給視訊（Meet）與會議/出席（REST API）。互動、計分、資料全部留在 CoursePass，形成資料護城河。
06｜效能與防卡頓對策
卡不卡，取決於這一頁多輕
真正風險
學生同時開 Meet＋互動頁，低階機（舊 Android／平板）CPU、記憶體吃緊 → 掉幀、發熱。
網路頻寬影響小（互動頁極輕）。
對策
頁面體積小、預載題目、動畫用本地時間戳同步（不串流影片）；低階機降級（關特效）；重連與錯誤提示明確。
驗收方式：用入門 Android 手機（不是開發者的 iPhone）實際跑完整一堂，量測 FPS、記憶體與斷線恢復。
07｜範圍與後續
MVP（P1）先做最小可用，再做題型
P1（先做）
單一題型的投放／作答／倒數／計分／結果回寫；老師 Console 與學生 View；斷線重連。
題型先做 choice（選擇題）。
P2（後續）
題型擴充：fill_blank／word_order／matching／listening；一起看動畫（Co-Watching 等價）；與方案 B（Meet add-on）整合。
需要先確認：① 兩個視窗的使用引導與裝置效能；② 斷線／重連處理；③ 匿名加入政策與 host 放行（見一頁式摘要）；④ 未成年個資：預設不錄影、資料最小化。