「2026 石門國小元宵猜燈謎」是阿凱老師為 元宵節班會活動 / 走廊互動裝置 打造的 節慶主題闖關 PWA,部署在 cagoooo.github.io/lantern/,主題色 #E60012 中國紅配 Noto Sans TC,meta description 直接寫明「石門國小 2026 年元宵節猜燈謎活動 - 一起來猜燈謎,歡慶元宵!」
🎯 核心特色
- 🏮 中國紅主題 + Noto Sans TC — 元宵氣氛滿點,視覺一秒抓住節慶感
- 📱 PWA 完整支援 — manifest.json + 多尺寸 icon + Service Worker,可加到主畫面像原生 App
- ⚡ Vite + React 現代化架構 — 小巧快速載入,老師上課 1 秒打開
- 🎯 即時對答 + 計分 + 排行榜 — 學生掃 QR 進入猜題立刻知道對錯,看誰拿最多分
- 🛡️ PointerLock 錯誤防禦 — capture phase listener 最優先吞掉 SecurityError 彈窗,工程師等級的防禦性程式設計
- 💻 Service Worker localhost 偵測 — dev 時不註冊 SW 避免 HMR 衝突
- 📲 手機掃 QR 線上猜 — 走廊不用掛紅紙、不會被風吹掉、答案不會被同學偷看
💡 設計理念
傳統元宵節老師寫燈謎在紅紙掛走廊,學生路過猜答案、老師一個個確認 — 痛點是答案被偷看、紙會被風吹掉、老師確認超累。阿凱反向用 手機掃 QR → 線上猜 → 即時答案 + 計分 解決。這款屬於阿凱「節慶 / 活動專用工具」系列:#62 親職教育日(3 月)、#74 親職日場地配置(特定日期)、#80 教師會議(學期週次),活動結束放著當數位海報、隔年改改日期就能再用。bundle 看出阿凱踩過 Vite + PointerLock SecurityError 的雷,最早執行的 script 就吞掉錯誤 — 這種踩雷後的防禦性寫法是工程師等級的細節。
🎒 適合情境
- 元宵節班會活動:全班同時掃 QR → 看誰答對最多燈謎 → 結算頒小獎品
- 走廊互動裝置:學校觸控螢幕掛 #56,學生課間互玩
- 家長親子活動:「爸媽我猜這題你也不會」變家庭遊戲
- 國語延伸活動:燈謎含諧音 / 拆字 / 字謎 → 國語素養延伸
適合國中小元宵節活動承辦、學務 / 訓育組(節慶活動數位化)、國文老師(猜燈謎 + 字謎教學)。2026 元宵已過 — 但這份活動數位化的設計思維可套用任何年度節慶(中秋 / 端午 / 教師節 / 校慶),搭配 #22 成語填空遊戲 與 #71 成語填空大挑戰 是完整語文遊戲化套組。