資訊教育互動教材地圖

為什麼要做這個作品

我是國小、國中的資訊老師，以前上課大多用書商電子書附的互動遊戲。這些遊戲是罐頭內容，玩法固定、跟班上教學目標也對不太起來，學生玩兩次就沒新鮮感，興趣缺缺。我想要的不是「有遊戲可以玩」，而是「遊戲真的服務教學目標」——滑鼠怎麼握、鍵盤怎麼找字、運算思維怎麼拆解步驟，都該是遊戲玩法本身，不是另外加的說明文字。

用到的工具與架構

整個作品集是純靜態網站，沒有後端、沒有資料庫：

• HTML + CSS + Vanilla JS：不用框架，每款遊戲是獨立的單一頁面，互不干擾。
• 瀏覽器 localStorage：學生的分數本機保存，免登入免帳號，符合國小機房的使用情境。
• GitHub Pages：push 到 `main` 分支就自動部署上線。
• AI 協作分工：Gemini Canvas 負責做互動原型、視覺風格快速迭代；Claude Code 負責跨檔案結構整合、SDD 規範維護，部分單元用平行 agent 批量產出。
• SDD.md 規範：統一命名（`unit{N}-{主題}`）、RWD 斷點、localStorage 計分 key 命名空間，保證 21 款風格不互相打架。

以前怎麼做／現在怎麼做

flowchart LR
    A["備課需要互動練習"] --> B["翻書商電子書附的罐頭遊戲"]
    B --> C["玩法固定、跟教學目標對不起來"]
    C --> D["學生玩兩次就沒新鮮感"]

flowchart LR
    A["想清楚這堂課的教學目標"] --> B["用 Gemini Canvas 做原型 或 直接用 Claude Code 刻"]
    B --> C["照 SDD 規範整合進課程地圖"]
    C --> D["串接計分 key、首頁徽章"]
    D --> E["上線：學生用闖關遊戲練到目標技能"]

一次教材從發想到上線，實際會發生什麼

1. 定教學目標：先想清楚這堂課要練什麼——可能是滑鼠雙擊、注音輸入、或運算思維的「拆解步驟」。 2. 做原型或直接刻：簡單的視覺互動先用 Gemini Canvas 出草稿；需要跟既有架構整合或要批量產出的，直接讓 Claude Code 寫。 3. 照 SDD 規範整合：命名對齊 `unit{N}-{主題}`、檢查 RWD 斷點、補上「🏠 首頁」返回按鈕。 4. 串計分與首頁：接上 localStorage 計分 key，更新首頁卡片與徽章，讓學生玩完馬上看到自己的分數。 5. 截圖驗證：實際跑一輪，確認固定定位的返回按鈕沒有蓋住遊戲自己的標題（滿版置左的版型特別容易踩到這個雷）。 6. commit + push：推上 `main`，GitHub Pages 一分鐘內自動上線。

現在的具體成果

目前已經上線 21 款遊戲化教材，依年級分齡設計：一年級從滑鼠、鍵盤基礎練起，中、高年級進階到計時英打、注音 IME 輸入比對。每款遊戲都有獨立計分，首頁卡片會顯示學生最新分數。

學生樂園首頁：依年級分區，整張卡片都可以點擊進入對應教材。

最直接的改變是課堂氣氛——學生上課比較容易專注，也符合課程精神，真正做到寓教於樂，不再是「玩具」跟「教學內容」兩條平行線。

「烏龜小指揮官」：用方向指令指揮烏龜吃到所有胡蘿蔔，練習序列、除錯、最少步數的運算思維入門。

「太空打字防衛戰」：外星人從天而降，打對英文字母才能擊落，練習英文打字入門。

設計時做過哪些取捨與調整

做的過程踩過幾個技術坑，回頭重新調整過：

• Gemini Canvas 草稿 + Claude Code 整合分工：視覺原型先用 Gemini Canvas 快速迭代，定稿後再交給 Claude Code 整合進主架構、補齊規範，分工後產出速度明顯比單一工具從頭刻快很多。
• SDD 規範同步機制：21 款教材如果各自命名、各自排版，很快就會失控。靠 SDD.md 把命名、RWD、計分 key 寫死規則，新增單元時對照規範同步更新首頁卡片與 README。
• 固定返回按鈕蓋住標題：左上角固定定位的「🏠 首頁」按鈕在「滿版置左」版型的遊戲上會蓋住自己的標題文字，後來統一在這類版型補上對應的留白間距才解決。
• 計分 key 統一格式：每款遊戲各自命名計分 key 會讓首頁徽章難維護，後來統一成固定命名規則，新增單元時直接照規則接好就會自動顯示分數。
• 零文字依賴的圖示判斷重寫：其中一款偏資訊倫理主題的教材原本仰賴大量文字說明，考慮到低年級識字量不足，重寫成純圖示判斷版本，降低文字依賴。

上課學到什麼，工作方式有什麼改變

這次最大的收穫是學到系統化思考：透過反覆迭代讓教材更符合自己真正的教學需求，而不是一次就要求完美。同時也透過課程建立起自己的 AI 記憶系統，讓 AI 更了解我的需求與思考模式，不用每次都重新解釋一遍。

工作方式上，以前備課大多是照本宣科、套用現成內容，學生興趣缺缺；現在透過 AI，互動式教學遊戲可以更快做出來、也更容易呈現我真正想教的東西。備課從「找現成的湊合用」變成「想清楚要教什麼就能做出來」，這是這次最有感的轉變。

下一步想優化什麼

目前 21 款都是闖關遊戲形式，下一步想開發中、高年級的課程教材，內容可能不一定是遊戲，或許會走互動式動畫的方向，讓教材形式更貼合不同年段的學習需求。

最後想對其他同學說的話

透過課程你可以發展出自己的特色，讓備課這件事更有系統化，也更有趣味性。不用一開始就想著做出完美的東西，先做一款解決你真正卡住的教學需求，剩下的交給反覆迭代慢慢打磨。