📧 #63 Email 帳密記憶遊樂園：教學生記學校信箱帳密的 Vite + React + shadcn/ui 遊戲化工具
#63「Email 帳密記憶遊樂園」是阿凱用 Vite + TypeScript + React + shadcn-ui + Tailwind CSS 寫的學校信箱帳密記憶遊戲。解決國中小學生「忘記學校 Google 帳號 / 密碼」的真實痛點，遊戲化方式幫學生記住每天要登入的工具。
國中小「學生忘記 Google 帳密」的真實痛點
學校導入 Google Workspace 後，每個學生都有 @mail2.smes.tyc.edu.tw 學校信箱：
- 用來登入 Google Classroom
- 用來看老師發的作業
- 用來使用 Google Drive / Docs
- 用來登入各種教育工具（PIRLS / 5W1H / 班級小管家⋯）
痛點：
- ❌ 學生每次都忘記密碼 → 老師重設一次又一次
- ❌ 帳號太長（含學號 + 學校網域）
- ❌ 一年級剛開始用 → 不知道什麼是 @
- ❌ 學生不懂「信箱 vs 帳號 vs 密碼」差別
阿凱的 #63 Email 帳密記憶遊樂園 反向：遊戲化幫學生記住信箱結構 + 練習輸入。
#63 真實怎麼做？
真實名稱：「Email 帳密記憶遊樂園」
核心定位（推測）：
- 互動式遊戲教學生認識 Email 結構
- 練習輸入學校信箱
- 記憶密碼設定原則
真實技術棧
- Vite + TypeScript + React
- shadcn-ui（Radix UI 元件庫）
- Tailwind CSS
- 純前端（推測 localStorage 存進度）
- 部署：
cagoooo.github.io/email/
為什麼這個工具值得寫？
「資訊素養基礎」是被忽略的教學單元：
- ✅ 學生會用 Google → 但不懂 Email 結構
- ✅ 學生會輸入密碼 → 但不懂為什麼要設這麼複雜
- ✅ 資訊素養課要從「認識 Email」開始
阿凱用遊戲化方式 → 比講解 PPT 有效 10 倍。
跟 #50 童樂學園的關係
| # | 工具 | 教什麼 |
|---|---|---|
| #50 童樂學園 v1.5.0 | 完整兒童學習平台 | 多元學科 + 經濟學習 |
| #63 Email 記憶遊樂園（本篇） | 資訊素養基礎 | Email 結構 + 帳密記憶 |
#63 是「單一主題深耕」 / #50 是「多元主題廣度」 — 兩種設計哲學。
教學情境
三年級資訊課第 1 單元「認識 Email」：
- 上完 Email 結構講解 → 學生玩 #63
- 練習輸入學校信箱
- 記住「學號 + @mail2.smes.tyc.edu.tw」格式
一年級新生入學第 1 週：
- 老師發學校信箱卡
- 學生用 #63 練習打卡
- 打 10 次 → 自然記住
補救教學：
- 學生一直忘記密碼 → 老師指定玩 #63
- 比「寫小卡片貼桌邊」更生動
家長親子：
- 家長協助孩子記學校信箱
- 比逼背好玩
配對工具推薦
- #50 童樂學園 — 完整兒童學習平台
- #20 英文字母打字練習 — 鍵盤輸入訓練
- #61 英打打字超互動遊戲 — 進階英打
適用對象
- 國中小三年級資訊課老師（第 1 單元必用）
- 一年級導師（新生入學帳密設定）
- 補救教學老師
- 家長協助孩子記學校信箱
想試試？
新學期開學 — 第一堂資訊課就用 #63 → 一週後全班學生不再來「老師我密碼忘了」。