Classroom Firebase Tools

課堂教學的即時互動工具，使用 Firebase Cloud Firestore 做即時同步。

工具

📊 即時投票（A/B/C/D）

老師建一題 → 學生輸入代碼選 A/B/C/D → 老師看即時長條圖。

☁️ 文字雲

老師出提示語 → 學生送一個詞 → 老師看即時文字雲。

開始使用

部署到 https://teachers-study.web.app（Firebase Hosting）。

從首頁進入：

• 老師端：建立場次、拿 6 碼代碼、看即時結果
• 學生端：輸入代碼 + 班級代號 + 座號、送出答案

技術

• 前端：純 HTML / CSS / Vanilla JS（無 build step）
• 資料庫：Firebase Cloud Firestore（NoSQL，即時同步）
• 文字雲渲染：wordcloud2.js
• 部署：Firebase Hosting

Firestore 資料結構

votes/{code}
  question: string
  options: string[4]
  active: bool
  createdAt: timestamp
  responses: { "{classCode}-{seat}": "A"|"B"|"C"|"D" }

wordclouds/{code}
  prompt: string
  active: bool
  createdAt: timestamp
  submissions: { "{classCode}-{seat}": "詞" }

安全規則只白名單到這兩個集合，其他寫入一律拒絕。

本機開發

cd public
npx serve -l 5050
# 開 http://localhost:5050

部署

# 規則 + Hosting
npx firebase-tools deploy

# 只部署規則
npx firebase-tools deploy --only firestore:rules

# 只部署網頁
npx firebase-tools deploy --only hosting

隱私

學生資料只存「班級代號 + 座號」，不存真名。