🏮 #56 2026 石門國小元宵猜燈謎：Vite + React + PWA 中國紅主題 + 一起來猜燈謎歡慶元宵
#56 真實名稱「2026 石門國小元宵猜燈謎 | Lantern Festival Riddles」是阿凱專為石門國小 2026 年元宵節活動做的猜燈謎遊戲。Vite + React + PWA + 中國紅主題色 #E60012 + Noto Sans TC 字體 + Service Worker 完整支援。
元宵節數位化的真實意義
元宵節是台灣傳統節日，國小常辦「猜燈謎」活動：
- 老師寫燈謎在紅紙上 → 掛走廊
- 學生路過猜 → 答對拿禮物
- 問題：燈謎被同學偷看答案 / 紙會被風吹掉 / 老師要一個個確認
阿凱的 #56 元宵猜燈謎 反向：手機掃 QR → 線上猜 → 即時答案 + 計分。
#56 真實怎麼做？
真實標題：「2026 石門國小元宵猜燈謎 | Lantern Festival Riddles」
meta description：「石門國小 2026 年元宵節猜燈謎活動 - 一起來猜燈謎，歡慶元宵！」
完整功能（從技術 signature 推測）：
- 學生掃 QR 進入
- 看燈謎題目
- 答案輸入 / 選項點選
- 即時對答 + 計分
- 結算 / 排行榜
- 中國紅主題色
#E60012配 Noto Sans TC
真實技術棧
- Vite + React（看
assets/index-DqCBxp-A.jsbundle） - Tailwind CSS（推測）
- PWA 完整：manifest.json + 多尺寸 icon + Service Worker
- Service Worker 含 localhost 偵測（dev 時不註冊 SW 避免 HMR 衝突）
- Noto Sans TC Google Fonts
- 主題色：#E60012（中國紅）— 元宵節氣氛
- 部署：
cagoooo.github.io/lantern/
神細節：PointerLock 錯誤防禦
從 HTML 第一段 script 抓到：
window.addEventListener('unhandledrejection', function (e) {
if (e.reason && (e.reason.name === 'SecurityError' ||
(typeof e.reason.message === 'string' &&
e.reason.message.toLowerCase().includes('lock')))) {
e.preventDefault();
e.stopImmediatePropagation();
}
}, true); // capture phase = 最優先執行
→ 阿凱踩過 Vite + PointerLock SecurityError 錯誤彈窗的雷，最早執行的 script 就吞掉這個錯誤。
踩雷後在 production 寫 capture phase listener = 工程師等級的防禦性程式設計。
「節慶活動專用工具」的特殊地位
阿凱有一系列「節慶 / 活動專用」工具：
- #56 元宵猜燈謎（2 月元宵節）— 本篇
- #62 親職教育日（3 月親職日）
- #74 1150328 親職日場地配置（3/28 特定日期）
- #80 114 下學期教師會議（學期週次）
這些工具用完即丟（每年要更新版本），但每年都會有新的需求。
阿凱把工具當「節慶配套」做 — 像一張數位海報，活動結束放在那當紀念。
教學情境
元宵節班會活動：
- 全班同時掃 QR
- 看誰答對最多燈謎
- 結算頒小獎品
走廊互動裝置：
- 學校觸控螢幕掛 #56
- 學生課間互玩
家長互動：
- 親子一起猜燈謎
- 「爸媽我猜這題你也不會」
國語延伸活動：
- 猜燈謎含諧音 / 拆字 / 字謎 → 國語素養延伸
配對工具推薦
- #22 成語填空遊戲 — 同款語文遊戲化
- #71 成語填空大挑戰 — 進階版
- #62 親職教育日 — 同款活動專用工具
適用對象
- 國中小元宵節活動承辦
- 學務 / 訓育組（節慶活動數位化）
- 國文老師（猜燈謎 + 字謎教學）
- 想做「節慶活動專用 web app」的學校
想試試？
2026 元宵節已過 — 但這份活動數位化的設計思維可以套用任何年度節慶（中秋 / 端午 / 教師節 / 校慶⋯）。