🗳️ #3 學生即時投票：4 題型 + 4 碼房間代碼避混淆 + 匿名升級 Google + 投影專用頁 + 表情彈幕的真實架構
#3 不只是「全班舉手投票」 — 是 4 種題型（單選 / 多選 / 是非 / 簡答 WordCloud）+ 4 碼房間代碼（字元集避開 0/O/1/I/L 給小學生）+ 匿名升級 Google 保留歷史題目 + 投影專用頁 /present/:id 含 QR 四檔大小 + confetti + 表情彈幕。Firestore onSnapshot + Cloud Functions 排程清理 + LINE Flex 通知管理員。
一個老師都遇過的痛：「同學請發表意見⋯⋯」（全班沉默）
問問題沒人舉手是國小高年級到國中的通病。 不是學生沒答案，是「我答錯會被笑」「我太害羞了」「不要被點到」。
傳統破解法：
- 隨機抽號 → 學生緊張到僵住
- 分組討論 → 班上 3-4 個強的把答案搶光，弱的還是沒參與
- 用 Kahoot → 設定要 10 分鐘、要創帳號、英文介面卡
於是 #3 上線了。
#3 怎麼解？（真實技術細節）
功能 A：4 種題型（不只單選！）
single單選multiple多選（1–20 個 index）truefalse是非（鎖定 ⭕❌）shortanswer簡答（1–50 字）— 用 WordCloud 元件呈現（不是長條圖）
功能 B：三種學生入場方式
- 掃 QR Code 直接連
/{questionId} - 輸入 4 碼房間代碼（
/join頁） - 老師直接分享連結
- 學生不用登入，App 啟動時
signInAnonymously拿匿名 uid
功能 C：4 碼房間代碼字元集（小學生友善設計）
- 刻意排除 0 / O / 1 / I / L 避免眼花
- 31 字元 4 碼 = 92 萬組合
功能 D：匿名升級 Google（神細節）
- 老師可選擇登入或不登入
- 匿名也能建題（題目綁匿名 uid）
- 按 Google 登入後用
linkWithPopup把匿名帳號升級成 Google 帳號保留 uid - 舊題不會消失（
credential-already-in-use雙路徑 fallback）
功能 E：投影專用頁 /present/:id（與 /teacher 分開）
- 全螢幕大畫面
- QR Code S/M/L/XL 四檔大小（記憶到 localStorage）
- 倒數計時器 + 票數變動 canvas-confetti 撒花
- 表情彈幕（30 秒滾動窗口）
功能 F：倒數計時器 + 4 小時 TTL 雙計時器
- 老師按 30 / 60 / 90 秒，學生端跟著倒數
- 0 秒時播音效
- 題目硬上限 4 小時（
QUESTION_TTL_MS） - Cloud Functions 每 15 分鐘掃一次過期題並推 LINE 給管理員
功能 G：題目圖片四選一上題
- 截圖貼上 / 白板繪製 / 圖片標註 / 圖片裁切
- 圖片存 Firebase Storage
功能 H：LINE Flex 通知
- 建題 / 過期都會推 Flex Message 給管理員阿凱老師
功能 I：老師後台 /dashboard（owner-only）
- 列出自己所有題目 + 票數 + 可重新啟用 + 編輯題目
真實技術棧
- README 已過時：寫的是 Express + Drizzle ORM + Memory Storage + Replit
- 實際早就重構成純 Firebase 架構：
- React 18 + Vite + TypeScript + Wouter（路由）
- TanStack Query + shadcn/ui + Tailwind + Framer Motion + recharts + react-qr-code
- Firestore
onSnapshot（不是 WebSocket，不是 Realtime Database） - Firebase Auth（匿名 + Google）+ Storage
- Cloud Functions（asia-east1）：
onQuestionCreated+expireOldQuestions
- 部署：GitHub Pages + Firebase Hosting 雙軌（vite.config.gh-pages.ts 為主）
- Firestore Rules 嚴格鎖死：學生只能寫自己 uid 的票、不能改票、老師才能刪票
實戰：5 年級社會課「市場買賣」單元
我用 #3 帶單元時長這樣：
- 暖身 5 分鐘：投票「你覺得菜市場跟超市哪個比較便宜？」全班手機掃碼
- 看即時長條圖：30 秒內全班 25 票進來，A=14、B=11 → 全班開始討論
- 講解 15 分鐘：講「為什麼大家有不同直覺」
- 再投一次：「現在你會選哪個？」（看認知改變）
- 結尾投票：「下週你想討論什麼題目？」
全班 25 人，第 1 次投票 25 票、第 2 次 24 票、第 3 次 23 票 — 連最害羞的小晴都按了。
累計數字（從 2024 上線到現在）
| 指標 | 數字 |
|---|---|
| 累計使用班級 | 桃園 12 所國小、3 所國中 |
| 累計投票場次 | 84 場 |
| 平均一場參與率 | 92%（vs 舉手約 25%） |
| 老師最常用情境 | 課堂理解測驗 > 班級事務票選 > 自治市選舉 |
學生 / 家長 / 校長回饋
「老師我以前都假裝在抄筆記不敢回答，現在我可以匿名投票，發現我答對的時候超有成就感。」
— 5 年級小晴
「校長視察那天我們班用了 #3，校長現場掃 QR 投了一票『要不要每天午餐多一道菜』，結果他發現是 95% 同意。回辦公室就跟營養師講了。」
— 6 年級導師
配對工具推薦
- #96 DFC 行動方案即時投票 — 自治市選舉公開計票進階版
- #93 自治小市長 - 即時計票監票 — 教師唱票模式
- #10 班級小管家 — 投票後接著抽籤、分組與加分
適用情境
- 國小 / 國中任何學科的「全班參與」需求
- 班會議題票選（午餐、戶外教學地點、班級規範）
- 教師研習想做「現場互動」示範
- 校長 / 主任行政會議要做意見蒐集
想試試？
第一次用建議先在班會試「全班投票最想要的下週午餐」當暖身 — 學生會立刻愛上這個工具。