soap-quiz-db 📊 教師看板
以「單元肥皂製作（三小時實作）」為例 — 從檢索 → 結構化 → 互動化 → 報告 → 簡報 → 驗證
視覺化：漸層封面＋KPI 卡｜互動：按鈕導航、進度條、鍵盤／滑動切換｜認知：先行組織者（Advance Organizer）讓學生 30 秒掌握全貌
認知科學設計：雙重編碼（圖＋文）、主動提取（拖拉配對）、即時回饋（滑桿數值）、分段呈現（一重點一頁降低認知負荷）。
按鈕：跳轉各頁｜拖拉：下方可拖曳重新排序｜滑桿：右側時間軸拖動
00:00 科學導入 講述+問答
認知負荷理論：把抽象（皂化式）轉為可視、可操作，降低外在負荷，提升關聯負荷。
提示：拖動藍色藥丸到右側虛線框，答對會變綠。
視覺化：分類色卡＋年代滑桿淡化舊資料｜按鈕篩選即時回饋｜拖拉：可拖卡片到「我的課程包」
把油脂特性拖到正確油名，強化聯想記憶（精緻化）。
※ 正式以 soap.intaiwan 計算機為準，此為教學演示。
安全十誡口訣：先水後鹼、緩慢分次、通風戴鏡
MP 對照：皂基切丁→隔水融→加精油1%→噴酒精→入模→30分凝固（10分安全版）
狀態：Light Trace 美乃滋 可加精油入模
三酸甘油酯＋3NaOH → 3脂肪酸鈉＋甘油（放熱）
5% 新手黃金值
水倍數 2.03｜風險 安全
按鈕快速對比極端值，建立「超脂過低／過高皆風險」的直覺。
週數 0｜pH 13.0｜硬度 軟爛
提示詞精簡版：「單檔離線互動網頁 index.html，6區塊（超脂模擬／配方INS／安全闖關Trace／SOP7步驟／pH時間軸／10題測驗本地儲存），Vanilla JS＋Canvas」
拖工具到右側對應欄位
形成性：5向度檢核 ≥3.5通過｜總結性：成品可用＋能說明1項理論｜延後：4週 pH7-9｜滿意度 ≥4.5
反思：AI是放大器，不是替代 — AI擅長檢索→結構化→雛形；教師決定超脂%、是否讓新手碰鹼、PPE用詞。角色：內容搬運工 → 學習體驗設計師
一位無程式背景的老師，透過 檢索—結構化—互動化—報告書化—驗證 五步，一日內完成過去需數週的「3小時肥皂實作」完整教材包，達到 教材＝網頁＝報告＝簡報 四位一體、可離線、可複用、可評鑑。
「從一個提示詞開始，建立自己的互動教材庫」— vocus 2026
📂 教學素材資料夾
路徑：F:\20265-08-22-B\教學素材\
📱 掃碼即玩（示意 QR）
部署後替換為 Cloudflare Pages 網址
https://your-pages.dev
認知科學：提取練習＋間隔重複 — 建議課後 4 週晾皂期間重刷本簡報 2 次，搭配 pH 實測加深長期記憶。