🎯 #18 繽紛隨機學生抽選工具：正取 + 備取名單一次出 + 可匯出結果（比賽選手 / 校隊選拔專用）
#18 真實名稱「繽紛隨機學生抽選工具」是 #17 的進階版 — 不只抽一個，而是**一次抽出「正取人數 + 備取人數」雙清單**（給比賽選拔、校隊抽籤用）。純 vanilla JS（無 Tailwind）+ 可匯出結果，22KB 單檔部署 XOOPS VM。
#17 vs #18 — 不同抽法服務不同場景
#17 創意抽籤 = **「一個一個抽」**保留懸念，課堂點人用。
#18 繽紛隨機學生抽選工具 = 「一次抽出正取 + 備取雙清單」，比賽選拔用。
阿凱兩款抽籤工具，為不同需求各設計一個而不是塞進同一個。
#18 真實怎麼做？
真實標題：「✨ 隨機學生抽選工具 ✨」
核心功能：
- ✏️ 輸入學生名單（每行一個姓名）
- 🎯 錄取人數：填要抽幾個正取
- 🔄 備取人數：填要抽幾個備取
- 🎲 開始抽選：一次出兩份名單
- 🎉 抽選結果：
- 正取名單
- 備取名單
- 📋 匯出結果
真實技術棧（注意：純 JS 無 Tailwind！）
- 純前端單檔 HTML（22,175 字元）
- 純 vanilla JS（沒用 Tailwind！ 跟 #17 不同設計選擇）
- 無後端、無 LLM
- 部署：
smes.tyc.edu.tw/smes_html/random.html - Footer：「© 2025 桃園市石門國小 資訊組 阿凱老師 設計」
為什麼 #18 不用 Tailwind？
從 size 23 KB vs #17 的 20 KB 推測：
- #17 用 Tailwind CDN（外部資源）+ 簡潔 class
- #18 寫死自己的 CSS（繽紛主題需要客製漸層 / 動畫）
「繽紛」這個形容詞暗示阿凱在 UI 設計上花了心思，可能用了 inline CSS 寫各種顏色變化。
老師使用情境
校內語文競賽選手抽籤：
- 全年級報名 30 人 → 正取 5 人比賽 + 備取 3 人候補
- 一次點「開始抽選」直接出兩份名單
- 匯出結果貼公佈欄 + 寄家長 LINE
校隊招新抽籤（人多名額少）：
- 報名 50 人 → 正取 20 + 備取 10
- 抽完直接通知
獎學金抽籤：
- 符合資格學生 → 抽 3 名正取 + 2 名備取（候補）
親職日抽獎：
- 出席家長抽 5 個獎 + 5 個備取（領獎時人不在）
跟 #17 對比
| 維度 | #17 創意抽籤 | #18 繽紛抽選 |
|---|---|---|
| 抽法 | 一個一個累積 | 一次出兩榜（正取 + 備取） |
| 視覺效果 | confetti 撒花 | 「繽紛」主題色彩 |
| 技術棧 | Tailwind CDN | 純 JS + 自寫 CSS |
| 結果輸出 | 複製文字 | 匯出檔案 |
| 適用場景 | 課堂點人 | 比賽 / 選拔 / 抽獎 |
配對工具推薦
- #17 創意抽籤系統 — 一個一個抽版本
- #51 自動排課系統 — 對抽選後排賽程
- #10 班級小管家 — 學生名單匯入來源
適用對象
- 教務組（語文競賽 / 樂讀比賽 / 數學競賽選手）
- 訓育組（校隊招新）
- 輔導室（獎助學金抽選）
- 親職日承辦（抽獎活動）
想試試？
下次比賽選手抽籤 — 填正取 + 備取人數 → 一次出兩份名單 → 公平、透明、有 audit log。