course-handoutlisted

# 互動課程講義網頁 把一門「跟著做」的實作課程，做成講師可投影講解、學員可跟著操作的單檔 HTML 講義， 發布為 Artifact。機制固定、內容抽換——不要重新發明機制。 **範本用法**：`assets/template.html` 是完整成功案例（《君子動口不動手・排座位篇》）。 內容收集完、開始產出時，先把它整份複製到 scratchpad，再逐區塊替換內容（標題、單元、 提示詞、驗收、證書詞庫、MD_TEXT），機制程式碼原樣保留。不要憑記憶重寫整頁——重寫 容易遺漏備援與修過的 bug；也不用為了了解機制先通讀整份範本，下方規格表就是機制摘要。 ## 起點：三種情境都能做 1. **已有完成的專案＋提示詞**（最佳）：直接進入內容收集，講義忠實還原實際建構過程。 2. **只有課程主題或構想**：先陪使用者把成品做出來（在對話中實際建構一次），過程中自然產生提示詞、預期錯誤、踩坑點——這些是驗收清單的素材；成品做完再產講義，並產出可分享的成果參考連結。不要憑空杜撰提示詞和驗收項：沒實測過的驗收清單會在課堂上翻車。 3. **只有專案程式碼、沒有提示詞**（逆向還原）：讀懂程式 → 列出功能清單 → 按教學節奏分部（骨架 → 資料 → 參數化 → 輸出 → 保存 → 交付）→ 每部**反推一句提示詞**。反推時用學員的「需求語言」寫（畫面上看得到的行為、使用情境），不要寫成從程式碼翻譯出來的技術規格。反推的提示詞務必**試跑驗證**：開新對話實測一輪，確認能長出功能相近的成品、記下實際跳出的錯誤訊息當驗收素材；跳過驗證就交付，講義會在課堂上翻車。 4. **非 AI 實作課**（Excel、Canva、任何分部驟教學）：泡泡裡放的不一定是提示詞，可以是指令、操作步驟或設定值；「複製按鈕＋驗收清單＋證書」的機制完全通用。 ## 第一步：向使用者收集內容 缺什麼問什麼，能推斷就不要問： 1. **課名**（短、有記憶點）＋**副標／篇名**（如「排座位篇」）＋ **20 字內課程介紹**（可幫忙擬幾個讓使用者挑） 2. **成果參考連結**（可選）：完成品的體驗連結（如 Google 試算表 /copy 連結） 3. **單元拆解**：課程分幾部（建議 4–8 部），每部包含—— - 目標（一句話） - 給 AI／給工具的操作內容（提示詞、指令或步驟） - 操作步驟（學員實際要做的事） - 驗收清單（2–5 項可打勾、可實測的項目） - 技巧點評（一句話，該部的方法論） 4. **開始之前**：準備清單＋工作區介紹＋反覆出現的循環動作（做成術語浮動說明） 5. **結尾**：帶走的原則（3 條左右）＋回家挑戰題 ## 固定機制（template.html 已全部實作，直接沿用） | 機制 | 規格要點 | |------|----------| | 單元收合 | `.unit.closed` 預設全收起；點 h2 展開（▸/▾）；單元底部「▲ 收起本單元」按鈕，收起後 scrollIntoView 回標題；h2 有 tabindex=0 支援鍵盤 | | 提示詞複製 | 泡泡右上角「複製」鈕；**三層備援**：navigator.clipboard → execCommand('copy') → 自動選取文字提示按 Ctrl+C（Artifact 沙箱常擋新 API，此備援必要） | | 驗收清單 | 真核取方塊，勾選後文字轉灰；驗收項必須「可實測」，含刻意設計的預期錯誤（「跳出 Erro