🎰 #17 創意抽籤系統：純前端 Tailwind + canvas-confetti 輸入名單一個一個抽 + 剩餘項目即時顯示（XOOPS VM 部署）
#17 真實名稱「創意抽籤系統」是阿凱用 Gemini Canvas 寫的純前端 + Tailwind + canvas-confetti 抽籤工具，部署在 XOOPS 校網 VM。輸入名單後一個一個抽出（不是一次全抽），剩餘項目即時顯示，每抽中觸發 confetti 撒花，可複製結果 + 重新開始。footer 寫「桃園市石門國小 資訊組 阿凱老師 設計」。
阿凱另一個部署平台：XOOPS 校網 VM
繼 Google Sites Embedded 之後，阿凱第三個部署平台是 石門國小 XOOPS 校網 VM（web.smes.tyc.edu.tw/smes_html/）— 用 Gemini Canvas 寫好單檔 HTML，直接上傳到學校 VM 雲端就上線。
為什麼用這個方式？
- 比 Google Sites 更彈性（不受 Embedded HTML 限制）
- 比 GitHub Pages 更省事（不用 commit / push）
- 掛在學校網域 → 學生看到
smes.tyc.edu.tw自然信任
#17 真實怎麼做？
真實標題：「✨ 創意抽籤系統 ✨」
核心功能：
- 📝 輸入抽籤名單：每行一個名稱或項目
- 🎲 開始抽籤：一個一個抽出（不是一次全抽）
- 🏆 抽籤結果：顯示已抽出的清單
- 剩餘項目即時顯示：知道還有幾個沒抽
- 📋 複製結果 / 重新開始
遊戲化設計：每抽中觸發 canvas-confetti 撒花。
真實技術棧
- 純前端單檔 HTML（19,892 字元）
- Tailwind CSS（
cdn.tailwindcss.com） - canvas-confetti
- 無後端、無 LLM
- 部署：
smes.tyc.edu.tw/smes_html/gogogo.html（檔名 gogogo 很可愛） - Footer：「© 2025 桃園市石門國小 資訊組 阿凱老師 設計」
跟 #18 大量抽選的差別
| 維度 | #17 創意抽籤 | #18 大量隨機抽選 |
|---|---|---|
| 抽法 | 一個一個抽（保留懸念） | 一次出正取 + 備取名單 |
| 場景 | 課堂點人 / 隨機分組 | 比賽選手 / 校隊選拔 |
| 結果 | 累積式（看誰先被抽中） | 一次性（含備取） |
| confetti | ✅ 撒花 | ❌ 純表格 |
老師使用情境
課堂點人發言：
- 開學第一週收集學生名單貼上
- 上課時點「開始抽籤」抽下一個發言
- 抽過的不會再抽（自動排除）
- 比小棒子公平 + 比 random.org 視覺好玩
分組活動：
- 30 人分 6 組 → 每次抽 5 個 → 自動成一組
- 剩餘人數即時顯示，知道還有多少要分
配對工具推薦
- #18 繽紛隨機學生抽選工具 — 正取 + 備取榜單模式
- #57 餐廳命運轉盤 — 選擇障礙剋星
- #10 班級小管家 — 內建名字卡片抽籤與投影抽籤
適用對象
- 國中小所有任課老師（每天都會用到點人）
- 補習班 / 安親班老師
- 想做課堂遊戲化的老師
- 想看「Gemini Canvas + XOOPS VM 工作流」案例的開發者
想試試？
把全班名單貼進去 → 一次點「開始抽籤」抽 1 個 → 學生看 confetti 撒花會超開心。