📜 #22 成語填空遊戲：50 個國小程度成語 + 含成語意思教學 + 倒數計時挑戰
#22 真實名稱「成語填空遊戲」— 內建 50 個國小程度成語，題目缺一個字學生要填入，每個成語都附「成語意思」教學（例：一心一意 = 形容專心致志毫無雜念）。Tailwind + 純前端單檔 26KB 部署 XOOPS VM。
#22 跟 #20 #21 是三件套但聚焦語文素養
#20 英打 練字母鍵位 / #21 中打 練注音鍵位 — 都是鍵盤輸入訓練。
#22 成語填空遊戲 主軸不同 — 內建 50 個成語 + 意思教學，重點是成語素養而不是純打字。
#22 真實怎麼做？
真實標題：「成語填空遊戲」
核心遊戲機制：
- 從 50 個國小程度成語抽題
- 顯示成語的 4 個字，其中 1 個字被空白「___」取代
- 學生填入缺失的字
- 點「確定」檢查 → 答對進「下一題」
- 含剩餘時間倒數
內建 50 個國小成語（從程式碼抽出部分樣本）：
const idioms = [
{ idiom: "一心一意", meaning: "形容專心致志，毫無雜念" },
{ idiom: "七嘴八舌", meaning: "形容人多議論紛紛" },
{ idiom: "三心二意", meaning: "形容意志不堅定，思想不專一" },
{ idiom: "不可思議", meaning: "形容事情奇怪，難以理解" },
{ idiom: "五光十色", meaning: "形容色彩鮮豔，光彩奪目" },
{ idiom: "六神無主", meaning: "形容驚慌失措" },
// ... 共 50 個成語
];
→ 每個成語都附「成語意思」 — 學生填空時順便學成語意義，不只是「機械填空」。
真實技術棧
- 純前端單檔 HTML（26,642 字元）
- Tailwind CSS
- 無後端、無 LLM
- 對應 GitHub repo
cagoooo/typeTC（後來搬到 GitHub 的版本） - 部署：
smes.tyc.edu.tw/smes_html/typeTC.html
50 個成語的選題
從第一頁樣本看選題策略：
- 多數是**「數字 + 對比」結構**：一心一意 / 三心二意 / 七嘴八舌 / 五光十色 / 六神無主
- 適合國小高年級（103 課綱「文化素養」對應）
- 意思白話化（不用古文解釋，國小生看得懂）
跟 #71 成語填空大挑戰的關係
- #22 成語填空遊戲 — 50 題基礎版
- #71 成語填空大挑戰 — 進階版？（沒查證）
兩者可能是阿凱不同時期的迭代版本。
老師使用情境
國語延伸活動：
- 上完一單元成語教學 → 學生玩 #22 鞏固
- 全班同時掃 QR 進 → 5 分鐘搶答比賽
早自習補強：
- 每天 5 分鐘玩 5 題
- 一週累積 25 題 → 一個月走完全部 50 個成語
期末成果展：
- 班內成語王挑戰賽
- 用「通過題數 / 用時」排名
家長親子互動：
- 假日家長陪孩子玩 → 邊玩邊講成語典故
- 比寫紙本作業有趣
配對工具推薦
- #21 中文注音打字遊戲 — 鍵盤訓練版
- #71 成語填空大挑戰 — 進階版
- #79 漢語新解 — AI 諷刺式新解（更高階語文延伸）
適用對象
- 國小高年級國語老師（成語單元）
- 國中國文補救教學
- 課輔老師（語文素養）
- 想做「字詞遊戲化教學」的老師
想試試？
第一次玩建議：先玩 10 題感受難度 → 看到不懂的成語讀一下「成語意思」 → 整輪完後累積對的成語就成自己的字庫。