🛫 #81 國小資訊科技教學駕駛艙：25 個駕駛艙 × 飛行儀表板入口，三到六年級完整資訊課程系統
#81 不是「入口連結牆」— 是阿凱用 5 週手刻 84 個 commits、純 vanilla JS 蓋出來的「飛行員儀表板 + 25 個獨立駕駛艙」課程系統，每單元含 NotebookLM 投影片 + YouTube 自學影片 + Canvas 關卡 + 評量題 + 演講簡報模式。
不是入口連結牆 — 是整個資訊課
我第一次跟同事介紹 #81 駕駛艙時，他以為這是「那種收藏連結的 portal page」。
打開 cagoooo.github.io/it-cockpit/ 看，他臉色變了 — 這不是連結牆，是整個三到六年級資訊科技課的完整課程系統。
首頁是一個飛行員儀表板：
COCKPIT.HORIZON · ALT 2026 / HDG NW / SPD · 25
FLIGHT PLAN · 2026 學年課表
MISSIONS: 25 | GRADES: 4 | SUBJECTS: 12
🔴 LIVE
點任一單元卡進去 → 進入該單元的駕駛艙（單頁 80-100KB 自製互動長頁）。
為什麼是「駕駛艙」這個隱喻？
108 課綱資訊科技強調「學生主導 + 教師引導 + 多元素養」。傳統做法：
- 老師發紙本講義
- 連到不同網站上課
- 學生記不住網址
阿凱反過來 — 每個單元 = 一個獨立駕駛艙，學生掃進去就能：
- 看 NotebookLM 投影片（自學閱讀）
- 看 YouTube 自學影片（嵌入）
- 玩 Canvas 互動關卡（每單元 4-6 個 STAGE）
- 寫評量題（每單元 8-18 題）
- 演講簡報模式（lecture-slides.html）給老師上課切換
[← IT COCKPIT] ← 每駕駛艙左上角都有
按 ← / → 切換、Esc 兩段式退出 — 真的是飛行員操作邏輯。
25 個駕駛艙覆蓋全年級
三年級 · 資訊基礎（4 個）
- 嗨！電腦新朋友（電腦入門）
- Windows 電腦小尖兵（Retro Win98 風）
- 中年級英文打字（QWERTY + 八手指）
- PaGamO 國小天地世界冒險
四年級 · AI 創作入門（3 個）
- Canva 魔法簡報（Magic Write / BG Remover）
- PhotoCap 圖像編輯魔法師（台灣免費影像軟體）
- PaGamO 桃園市付費版進階
五年級 · 程式設計（5 個）
- 滑手機前先想一下（數位安全）
- Scratch 動畫魔法師
- Scratch 遊戲設計師（水果接接樂）
- Inkscape 向量繪圖（Risograph 雙色印刷風）
- micro:bit 創客小英雄（Circuit-glow 電路霓光風）
六年級 · AI 與媒體素養（12 個）
- Gemini × Canva 影片創作
- Canva AI 魔法創作
- AI 音樂創作師（Gemini 畢業歌曲）
- AI 中文生圖大 PK（196,608 種 prompt 組合）
- 故事生圖 Gem 機器人（Nano Banana 2）
- AI 假影片偵探社（Deepfake / SIFT）
- 假訊息偵探社（MyGoPen / Hive / Google Lens）
- Gemini 引導式學習（PARTS 框架）
- AR/VR 科技穿戴（Meta Ray-Ban / Vision Pro）
- 麥昆小車程式設計
- Blogger × AI 創作家
- 用 Suno 設計班級神曲
- 痞客邦部落格（Scrapbook 手帳風）
教師研習 · 師培演講（1 個）
- A2 PaGamO 遊戲化教學（中央大學師培演講）
重點：每單元都有獨立視覺主題梗 — Retro Win98 / Circuit-glow / Risograph / Scrapbook / 暖橘奶油，不是套模板。
每個駕駛艙獨立視覺主題不是炫技 — 是讓學生視覺記憶綁定單元。回家被家長問「今天上什麼」，學生會記得「就那個霓虹電路的」「就那個 Win98 的」，而不是「資訊課」這種模糊回答。
真實技術棧（讓工程師同事尖叫的選擇）
- 零框架：純 HTML + vanilla JS（手寫
el()createElement helper） + 內嵌<style>CSS - 沒有 package.json，沒有 build step，沒有 React / Vue / Vite
- Google Fonts：Noto Sans TC + Inter Tight + JetBrains Mono（駕駛艙等寬字體）
- PWA：自製
sw.js（68 行），network-first HTML + cache-first 靜態 - CACHE_VERSION 命名梗：
'2026-05-19-microbit-fix'— 直白記錄每次 bump 原因 - 新版自動 polling：前景頁面 5 分鐘 polling 一次，跳「🚀 偵測到新版」toast 後自動 reload
- 部署：GitHub Pages
cagoooo.github.io/it-cockpit/ - 外部嵌入：NotebookLM 筆記 + YouTube iframe，沒有 LLM API、沒有 Firebase、沒有任何後端
老師備課實際流程
- 開首頁儀表板 → 看年級導覽 chip（G3/G4/G5/G6）
- 點本週單元卡 → 進駕駛艙
- 上課：
- 先用 lecture-slides.html 演講簡報模式 demo（NotebookLM 風）
- 切回駕駛艙做 Canvas 互動 STAGE
- 補上 YouTube 自學影片給學生回家複習
- 學生作業：駕駛艙內評量題 8-18 題
實測效果（石門國小 5 年級 micro:bit 單元）
完整對照表：
| 指標 | 傳統做法 | 用 #81 駕駛艙 |
|---|---|---|
| 學生記網址 | 8 個（散落各平台） | 1 個（cagoooo.github.io/it-cockpit） |
| 老師上課切換工具 | 5-6 次 | 0 次（駕駛艙內全包） |
| 缺課學生回家補課 | 找不到資料 | 網址打開就完整補完 |
| 教師研習示範 | 切多個視窗 | 演講簡報模式一鍵全程 |
| 跨年級老師借鏡 | 各做各的 | 25 個駕駛艙互相觀摩 |
老師 + 學生回饋
「我帶五年級 Scratch 缺課的學生，回家自己看完 5 個 STAGE + 評量題，下週進度直接跟上 — 第一次有這種感覺」
— 石門國小資訊老師
「我在中央大學師培演講用 lecture-slides.html — 教授問我哪個工具做的，我說純 HTML 不用 build — 全場驚」
— 阿凱老師（自述）
「我家小孩看『AI 假影片偵探社』看到一半跑來問我『爸爸這個真的還假的』— 教育就在這時刻發生」
— 學生家長
開發時間線爆速
- 2026-04-11 repo 開張
- 2026-05-19 累積 84 個 commits / 25 個單元 / 5 週
- 2026-05-18 一次幫 23 個單元加上 演講簡報模式（lecture-slides.html）
- Footer Powered by：NOTEBOOKLM × CLAUDE CODE（不掛其他工具）
- Footer 學校網域：
smes.tyc.edu.tw/?account=ipad（石門國小，有 commit 記錄修正過誤寫的學校名）
配對工具推薦
- #100 工具索引神器 — 找其他單元 / 工具的入口
- #80 教師會議報告集合 — 教師研習風格的姊妹站
- #11 剛好學課堂互動 — 駕駛艙內可嵌入做即時投票
- #81 國小資訊科技教學駕駛艙 — 本篇主角
適用對象
- 國小資訊科技老師（直接 fork 用或當教學範本）
- 教務組長 / 學年主任（看完整課程設計）
- 教師研習講師（演講簡報模式即用）
- 校長 / 主任（看 108 課綱資訊融入完整實作）
- 教育系研究者（一線老師如何用 NotebookLM × Claude Code 打造課程系統）
想試試？
第一次推薦 從六年級「AI 假影片偵探社」進（最熱門也最具話題性的單元），看完你會理解「教學駕駛艙」這個隱喻有多到位。