無痛學習網頁是做什麼的？

把學習材料做成一門課一個網頁，讓使用者按順序學下去就能懂、學得對，並且能用題驗證自己真的掌握了。一門課是一個長期專案：可以每週加入新材料；備考時在同一個網頁裡打開考試相關的部分。使用者手上沒有材料時，先幫他規劃學習路線、找權威資源，再做網頁。

零、環境約定（適配不同的 AI agent）

這個 skill 原本為 Claude 寫成，下面說明在 Codex、WorkBuddy 等其他 agent 裡怎麼落地。正文裡的規則都照做，遇到環境能力不同的地方按這裡處理。

讀檔案：用你能用的檔案工具或腳本讀取使用者給的資料夾（PDF、PPT、DOCX、圖片）。不能做 OCR 時，告訴使用者哪些頁沒讀到。
連網：有搜尋工具時用於從零規劃和事實核實；沒有時說明，並請使用者提供材料。
提問：需要問使用者時一次問完；有選項式提問工具就用。
網頁放在哪：預設寫到課程資料夾裡的 _學習網頁/（沒有課程資料夾時，在當前工作目錄建 <課程名>_學習網頁/）：index.html 是整個網頁（單檔，資料內嵌，瀏覽器直接打開）；data/course.json 是資料正本；img/ 放來源截圖。能發布託管網頁時可以另外發布一份，但本地資料夾始終是正本。
網頁裡不能調用 AI：凡是正文裡寫「請 Claude 在網頁裡整理 / 用 sample、db、assets 能力」的地方，改成存在 localStorage，並提供「複製全部（給 AI 用）」按鈕，由使用者把內容發回給你來整理。
驗證：能執行 Python 時，執行 python3 scripts/validate_course.py <路徑>/data/course.json，修到沒有錯誤為止；能用瀏覽器或無頭瀏覽器時，打開 index.html 檢查渲染和互動；做不了的檢查要告訴使用者。

一、先定規格

先從使用者的話和材料判斷屬於哪一類。判斷不了時，用一次提問問清（最多 3 個問題）。使用者不在場時，選最合理的一類，並在交付時說明選了哪一類、為什麼。

類型	典型情況	目標	重點
自學理解	只有教材、網課轉寫稿、文章；不為考試	理解，並且學對	講清講對；用理解題驗證；不做考情分析、不計時
輕量入門	只是不瞭解某個概念或小主題，想快速入門；預計總學習時間少於 3 小時	快速建立正確的理解	不出路線、不等確認，自己定路線後直接生成網頁（見「四之三」）
自學·從零規劃	只知道想學哪一塊，手上沒有材料	由淺入深地學會	先調研、規劃路線、找權威課程和教材，使用者確認路線後再做網頁；講法要循循善誘（見「四之二」）
課程學習	學期中，每週或每兩週給課件和 lecture 轉寫	跟上課程，學懂每週內容	增量更新；按週推進；跟課程範圍嚴格對齊
備考·衝刺	離考試近，時間少	短時間拿下高頻分	考情校準；只學核心和重要；直接用真題檢驗
備考·紮實	要衝高分，時間夠	真正掌握	考情校準；閉包內全部知識點講透；先刷仿真題，真題封存到最後

需要了解的情況（能從材料推斷的就不問）：

學習目的：理解、跟課，還是備考
有什麼材料
現在的基礎
截止日期或考試日期
每天能學多久
考試形式：用什麼語言作答、能不能帶筆記、計算器限制

同一門課可以先是「課程學習」，期末再加上「備考」。這時不新建網頁，在原來的網頁上打開備考部分（見第三節）。

二、課程資料檔案

每門課維護一個 course.json，網頁由它生成。更新時改這個檔案，再重新生成網頁。

儲存在兩個地方，保證下次對話能接著做：

網頁資料夾裡的 data/course.json
使用者的課程資料夾 _學習網頁/course.json（能寫入時）

更新前先讀這個檔案。兩處都找不到時，從已發布的網頁裡還原，並告訴使用者。

{
  "course": {"code":"…", "name":"…", "profile":"self|self-plan|course|exam-sprint|exam-deep",
             "exam": {"date":"…", "format":"…", "answer_lang":"en|zh", "allowed":"…"}},
  "sources": [{"id":"W03L1", "file":"…", "url":"…", "type":"lecture|transcript|textbook|tutorial|lab|assignment|sample_exam|past_exam|exam_info|web", "week":3, "added":"…"}],
  "modules": [{"id":"M-sql-basic", "name":"…", "order":5}],
  "points": [{
    "id":"sql-left-join",        // 穩定 ID，生成後永不修改
    "no":57,                      // 顯示編號，每次生成時重新排
    "title":"一句話內容",
    "module":"M-sql-basic",
    "week":5,
    "tier":3,                     // 3 核心 / 2 重要 / 1 次要 / 0 不考（自學類可以不分級）
    "depth":"apply",              // recall 認得 / explain 會解釋 / apply 會用 / transfer 能遷移
    "pre":[{"id":"sql-inner-join","kind":"hard"}, {"id":"null","kind":"soft","why":"IS NULL"}],
    "src":[{"source":"W05L1","page":24}, {"source":"W05L1-transcript","time":"32:10"}],
    "exam_refs":["樣卷2 Q2A"],
    "mastery":"做對什麼題算掌握（一句話，必須能用題檢驗）",
    "status":"active|merged|deprecated",
    "changed":"日期：改了什麼",
    "note":"不考 / 補充 / 老師說過…"
  }],
  "storyline": [{"from":"M-tree", "to":"M-rf", "why":"一句話：前一個模組留下了什麼問題，後一個模組怎麼接上"}],
  "lessons": [{"id":"L-w05", "track":"learn|review", "title":"…", "points":[…], "steps":[…],
               "storyline":[{"role":"問題|思路|做法|結果|新問題", "text":"一兩句", "formula":"可選，寫最簡形式", "steps":[3,4]}]}],
  "questions": [ … 見第八節 … ],
  "changelog": [{"date":"…", "summary":"…", "added":[…], "changed":[…], "conflicts":[…]}],
  "course_notes": [{"date":"…", "note":"只適用於這門課的偏好或修正（例如記號、某個模組要講更深），以後更新這門課時一律遵守"}]
}

規則：

ID 穩定：進度、勾選、錯題都按 ID 存，所以更新後使用者的進度不會丟。
不刪知識點。不再需要的標 deprecated；合併的標 merged，並指向新 ID。
pre 只寫直接前置。hard 表示必須先學；soft 表示只用到其中一個概念，並寫明是哪個。

三、網頁結構：一門課一個網頁

整門課是一個網頁（_學習網頁/index.html，見「零、環境約定」）。用頂部標籤切換板塊，用 URL hash 定位（例如 #map、#lesson/L-w05/3、#q/q-id），方便板塊之間互相跳轉。

板塊，以及每種類型顯示哪些

| 板塊 | 內容 | 自學（含從零規劃） | 課程學習 | 備考 | |---|---|---|---| | 地圖 | 模組拓撲圖、全部知識點（勾選框、前置、來源）、進度、「本次更新」面板 | ✓（從零規劃時就是學習路線，附推薦資源） | ✓ | ✓，加「考試視角」 | | 課堂 | 一步一步地講，每步帶自測 | ✓（按章節或階段） | ✓（按週） | ✓，加「複習線」 | | 練習 | 按知識點出的自編題（備考時仿真題也放這裡，用標籤區分）；「未掌握」篩選就是錯題本 | ✓ | ✓ | ✓ | | 考情 | 考試事實、材料優先級、逐題表、模組分量、不考清單、老師說過的話 | — | — | ✓ | | 仿真題 | 併入練習頁，用「仿真」標籤篩選，不單開板塊 | — | — | 紮實版 | | 真題 | 樣卷和往年卷（刷題手冊） | — | — | ✓（紮實版先封存） | | Cheat Sheet 暫存 | 學習中隨手存下不想背的內容，之後由 AI 結合上下文整理，最後據此生成筆記紙（見第六節第 5 條） | — | — | ✓（考試允許帶筆記時） |

拓撲圖必須生成

每個網頁的地圖板塊裡都要有知識點拓撲圖。無論哪種規格、時間多緊、是否跳過了確認，都必須生成。前置知識也要畫進去（例如學「API 是什麼」，要把客戶端、伺服器、HTTP 請求這些前置畫出來）。
只有兩種情況可以不畫：要學的內容極窄（只有 1–3 個知識點），或者知識點之間確實沒有先後關係。這時在地圖的位置寫一句為什麼沒有拓撲圖。
時間緊時可以減少課堂步驟和題量，但不能刪拓撲圖。

導航佈局（課堂和刷題優先）

課堂和刷題是主體，地圖、考情、學習路徑只是總覽，不能佔據頂部的大部分空間。
頂部壓成一行黏性欄：課程代碼 + 主板塊標籤 + 倒數計時 / 進度 / 術語 / 進度碼小按鈕。主板塊只有：課堂（預設打開）、刷題（子頁：練習、真題）、總覽（子頁：地圖、考情、學習路徑）、Cheat Sheet（有暫存功能時）。
第二行是當前主板塊的子頁標籤，以及單行的 Cheat Sheet 輸入框（聚焦時才展開）。
考情板塊在所有備考網頁裡保留，內容寫完就不再變；學習路徑會隨進度變化，使用者不一定參考，放在總覽裡即可。

上手成本要低

拿到網頁的人不該需要先學怎麼用它。

每個板塊第一次打開時，頂部一行淺色說明（可以關掉），一句話說清這一頁怎麼用，例如「沒把握的題不要勾『已掌握』；篩選『未掌握』就是你的錯題本」。
全站只有一種題卡：題面 → 選項或輸入框 → 提示 / 看答案 → 右上角「已掌握」勾選框。課堂自測、練習、真題都用它，學會一次到處通用。
按鈕寫動詞文字（「看答案」「下一步」），不用只有圖示的按鈕；一頁裡的篩選和開關盡量少，不常用的功能不做。
同一件事只給一個入口、一種狀態，不要讓「已訂正」「撤銷」「已掌握」這類意思相近的狀態並存。

所有留存的操作都能撤銷

拿到新網頁的人會先到處點點試試。所以凡是會被保存下來的操作，都要能恢復到操作之前，試錯不留痕跡。

開關類（「已掌握」、知識點勾選、步驟「已完成」）：再點一次就取消，不要做成只能打勾、不能取消。
作答記錄：每道題有「重做」按鈕，清掉這道題的作答和回饋，回到沒做過的樣子。
清零、移除、匯入這類會丟東西的操作：做完後底部彈出提示條「已清零 · 撤銷」，約 8 秒內點「撤銷」就完整恢復。不用瀏覽器的 confirm()。
- 計時器清零、Cheat Sheet 移除條目、匯入進度碼都走這個提示條
- Cheat Sheet 的移除用軟刪除：移到頁面底部的「最近移除」裡，過了提示條的時間也能從那裡恢復
- 匯入進度碼前自動備份當前進度
一鍵重置：進度碼彈窗裡放「清空我的全部記錄」，方便試玩完從頭開始。點之前先自動備份，清空後同一個彈窗裡保留「恢復剛才的記錄」按鈕。
實現上：每次會丟東西的寫入前，把受影響的那部分狀態存一份快照；撤銷就是寫回快照。一鍵重置的備份存在單獨的 localStorage 鍵裡，直到下一次重置才覆蓋。

學習模式和考試模式共存時怎麼放

地圖只有一張，提供「學習視角 / 考試視角」切換：
- 學習視角：按週或按章節排，顯示全部知識點
- 考試視角：按考試分量排；考試閉包以外的知識點變灰；顯示考試出處標籤和學習路徑
兩種視角共用一套勾選進度。
課堂分兩條線：
- 學習線：學期中按週做的課，一直保留
- 複習線：備考時新增的課，按學習路徑排。複習線不重複講已經學過的內容：已學過的知識點只給一張壓縮回顧卡片，連結到學習線的原講解，再補上考試角度（題目怎麼問、答到多深、常見失分點）。只有考試要用、學習線沒講透的地方才展開講
練習題庫只有一個：平時的自測題和備考的仿真題都放在裡面，按標籤篩選。錯題本跨模式共用
考情、真題這兩個板塊只在備考時出現。真題手冊屬於備考，不放進學習模式

網頁裡的通用功能

頂部：課程名、類型、總進度，以及考試倒數計時（備考時）
計時器：放在每一步卡片的右上角（顯眼位置，不要只藏在側欄裡），顯示「本步用時 mm:ss · 本課累計」，每秒刷新；有「暫停 / 繼續」和「清零」按鈕（清零只清當前一步，清完彈出「撤銷」提示條）；暫停狀態跨步驟保持；切到別的標籤頁時自動暫停；用時記在當前的步驟或題目上
主線彈窗：隨時可以打開當前這一課的邏輯主線，並高亮「你在這裡」（見第七節「邏輯主線」）
術語對照彈窗（中英對照，每個附一句話解釋）；數學、統計類課程再加一個符號翻譯器
課件連結：用相對路徑指向課程資料夾裡的原 PDF，並帶 #page=N（瀏覽器自帶的 PDF 閱讀器會跳到對應頁）；轉寫稿標註時間點；網路資源給出原始連結
進度碼：導出一段文字發給 AI，AI 據此知道哪裡薄弱。匯入時只增加勾選，不刪除；匯入前自動備份，可以撤銷
所有狀態按「課程代碼 + 穩定 ID」存在 localStorage，讀寫一律包 try/catch
一套統一的配色，帶深色模式，同一門課前後保持一致
適配手機：側欄改為堆疊在頂部，表格可以橫向滾動，並適配安全區
公式用 MathJax 的 SVG 輸出（tex-svg），記號和排版規則見第七節「排版與記號」
拓撲圖：知識點多時用 Graphviz 預先算好佈局，在頁面裡畫可點擊、可縮放的 SVG：點一個知識點，亮出它的全部前置和後續；「按考題看」可以亮出做某道題需要的全部知識點。模組級小圖可以用 Mermaid
來源截圖：只匯出知識點引用到的課件頁（用 pdftoppm 等命令列工具直接從 PDF 匯出 PNG，不逐頁查看，幾乎不耗 token），放進網頁資料夾的 img/，點出處彈窗看圖（PPT 檔案瀏覽器打不開某一頁，所以用截圖）
網頁裡的資料直接嵌在 index.html 中，data/course.json 作為正本另外儲存

四、新建（有材料時）

1. 讀材料

用你能用的檔案工具讀取使用者給的資料夾或上傳的檔案。每個檔案都讀完：掃描頁和手寫頁要做 OCR，圖要逐頁看。
lecture 轉寫和網課文字稿同樣重要：口頭講的例子、強調的重點（「這個會考」「這裡很多人錯」）、課件上沒有的解釋，都要提取出來，並標註時間點。
先回給使用者一份檔案清單，並標出讀不了的檔案。

2. 範圍與準確性

課程學習和備考：範圍以課件和 lecture 為準，不新增課外內容。必須補的背景知識標「補充」。記號跟課件保持一致。
自學理解：範圍以使用者的學習目標為準，材料只是起點。材料講得不清楚或有錯時，可以補充權威解釋，但要標出來。網課轉寫稿常有識別錯誤和口誤，要按上下文更正，並對照可靠來源核實關鍵事實和公式。不確定的地方要寫明。

3. 拆知識點

粒度要細：每條只講一件事（一個定義、性質、方法、題型或陷阱）。如果一條裡有兩個可以分開檢驗的東西，就繼續拆。
學習類的深度先按材料的講法定：材料推導了就到 explain，材料做了例題就到 apply。自學類按使用者的目標定。

4. 建拓撲

組成有向無環圖。出現循環說明拆錯了，要重新拆。
課程學習類：按週次排，週內按依賴排。自學類：完全按依賴排。
模組圖用 Mermaid flowchart：實線表示必須先學，虛線表示只用到一個概念（寫明是哪個）；用顏色區分重要度；節點上寫編號範圍。圖下面用一段話總結整張圖有幾條主線。

5. 先確認拓撲圖，再生成

給使用者確認的核心是知識點拓撲圖，不是模組路線。做法：先把全部知識點一條條拆出來、打散；從考題（或學習目標）需要的知識點出發，找它們的前置、前置的前置……形成拓撲圖。前置關係要跨模組連線（例如 Module 8 的題用到 Module 7 的工具、先修課的概念），讓網頁的講法比學校材料更順。
知識點編號按「即時前置」順序排：每個前置剛好排在第一次用到它之前，不把先修內容堆在開頭。
可以先發布一個只含地圖、考情和學習路徑的第一版網頁，讓使用者直接在可互動的圖上確認；確認後再分批生成課堂和題庫。
先修知識也按來源單獨成課（例如「矩陣與秩（前置速補）」），各課第 0 步列出「先確認會這些（來自其它課）」並鏈過去。
只在使用者能判斷時才請他確認拓撲圖：使用者手裡有課件、考試範圍，或者已經有相關基礎時，才發給他確認。使用者是入門者時不要讓他確認，因為他判斷不了對錯；AI 自己對照課件或權威來源核對一遍，再直接放進網頁。
跳過確認（不管是因為使用者是入門者，還是時間來不及）時，拓撲圖照樣生成，放在地圖板塊裡。

四之二、沒有材料時：先規劃路線

1. 問清目標

要學到什麼程度，學來做什麼（看懂論文、做專案、面試、興趣）
相關的基礎會不會
每週有多少時間

能從對話裡推斷的就不問。

2. 調研

有連網搜尋時，找這個領域公認的資源：大學公開課（課程主頁、講義、影片）、經典教材、官方文件、綜述。優先找原始、權威的來源，記下連結以及具體的章節或講次。
對照 2–3 個權威來源的大綱，歸納這個領域主要分哪幾塊、哪些是基礎、哪些是進階、它們之間的先後關係。

3. 出學習路線，先給使用者確認

領域全景：這個領域分哪幾塊；為了使用者的目標，必須學哪幾塊，哪些可以先不學。
前置檢查：需要哪些基礎。使用者不確定自己會不會時，給 3–5 道診斷小題，按結果調整起點。
主線資源：推薦一門課或一本書作為主線，其餘作為補充，並說明理由（權威性、難度是否合適、是否免費可得）。
分階段路線：每個階段寫明：
- 學習目標（可以檢驗）
- 核心概念
- 推薦資源（具體到章節或講次，附連結）
- 預計時間
- 階段檢驗方式
階段之間要說明「上一階段解決了什麼、這一階段要解決什麼新問題」。
請使用者確認的是目標、時間和主線資源。知識點拓撲圖不需要使用者確認：AI 對照權威來源核對後，直接放進網頁。

4. 使用者確認路線後，做網頁

學習路線就是地圖。調研到的資料記為 sources（type 為 web 或 textbook），每個知識點都標來源。
講解由 AI 依據這些來源來寫，關鍵事實和公式要核實，給出原始連結，方便使用者深入閱讀。
使用者後來拿到教材、課程轉寫稿或講義時，作為新材料走增量更新（第五節）：補來源、補深度，不推倒重來。

5. 循循善誘的講法

每一步從一個問題、現象或需求開始。先讓使用者想一想，可以先選一個猜測，再揭曉答案和道理。
一步只邁一小步，用已經學會的東西引出新的東西。
難的地方先給最簡單的特例，再推廣。
每個階段結束時回顧：現在你能做到什麼，還有什麼問題是現有知識解決不了的，下一階段就來解決它。

四之三、輕量入門（總時長少於 3 小時）

1. 怎麼判斷

滿足下面兩條就按輕量入門處理：

使用者問的是一個概念或小主題，例如「什麼是 X」「X 入門」「想了解一下 X」
估計總學習時間少於 3 小時，大約不超過 15 個知識點、1–3 課

超過這個體量時，改按「自學理解」或「從零規劃」做。

2. 流程

不提問，除非連主題本身都不明確。
不發路線等確認：自己定好知識點和順序，直接生成網頁。
不知道使用者的基礎時，以「聰明的外行」為起點。需要的前置知識不要求先去學，而是在第 0 步給一份「前置小抄」：每個前置用一句話解釋清楚。
能連網時，用搜尋核實關鍵事實和公式，並在來源裡給出連結。

3. 網頁精簡

只保留三個板塊：
- 課堂：1–3 課，每課 5–10 步
- 練習：每個知識點 1–2 題
- 簡版地圖：知識點小拓撲圖，要畫出前置知識（例如學 API 時的客戶端、伺服器、HTTP），再加一條主線
不做考情、仿真題、真題、計時器、複習佇列和進度碼。
仍然保留：
- 先講直覺再寫定義、一個例子貫穿全程
- 人話框（數理類）
- 每課最後的邏輯主線
- 每個知識點的掌握標準和自測，答錯時給針對性的解釋
最後一頁寫「下一步可以學什麼」。如果使用者想深入，可以升級為「自學」或「從零規劃」，在同一個網頁上擴展。所以 course.json 這時也要照常儲存。

五、增量更新（每週或每兩週）

讀取 course.json 和新材料。
從新材料裡拆出知識點，逐條和已有知識點對比，歸到下面某一種情況：

情況	處理
全新內容，前置都已有	新增
已有知識點的延伸或深化	新建一個知識點，以舊知識點為 hard 前置；不要塞進舊知識點
和已有知識點是同一個東西	不新建。在舊知識點上補來源；深度提高了就更新 `depth`
老師更正了以前的內容	修改舊知識點，寫入 `changed`，網頁上加「已更正」標記
後補前置（新內容其實是某個舊知識點的基礎）	新增這個前置，給舊知識點補上前置邊。已發布的課不重排，在新的一課裡加一張「回看」卡片，連結到舊知識點，並說明現在可以怎樣重新理解它
新舊材料矛盾（記號或說法不同）	兩種說法都記下，標「待確認」，交付時問使用者以哪個為準
加邊後出現循環	把拆得太粗的知識點拆開，舊 ID 標 `merged`，指向拆分後的新知識點
新主題	新建模組。新內容能放進已有模組時就擴展已有模組，不要隨便改模組名

校驗：所有 pre 指向的 ID 都存在且是 active；圖裡沒有循環；沒有任何知識點早於它的 hard 前置（後補前置除外，但必須有回看卡片）。
內容有改動的舊知識點標「有更新，建議複看」，保留使用者原來的勾選。
寫入 changelog，在地圖的「本次更新」面板裡顯示：新增幾個、更正幾個、後補了幾個前置、有哪些待確認。
重新生成網頁，寫回同一個網頁資料夾（託管網頁則發布到同一個地址），使用者的路徑或連結不變。

六、備考

1. 以考試為錨點，反推知識點

給材料分優先級：目標是樣卷或有官方答案的往年卷，參考是其他往年卷和作業，主線仍然是課件，tutorial 和 lab 作補充。
拆題：每道題拆到小問，再拆成它考的技能，列出「做對這一問必須會的知識點」。
反推閉包：從這些知識點出發，沿著 hard 前置一路往回找，得到考試需要的全部知識點。閉包以外的知識點降為次要或不考。
深度校準：按題目的問法定深度。同一個知識點被多道題考到時，取最深的一級：
- 判斷、選擇 → recall
- 解釋、比較、問為什麼 → explain
- 計算、寫程式碼、畫圖、按步驟做 → apply
- 新場景、綜合、設計 → transfer
缺口檢查：
- 考試要用、課件沒講的內容 → 寫常識性講解，標「課件未講」
- 課件講了、考試說明明確排除的內容 → 標不考
- 往年考過、今年課件沒講的內容 → 單獨列出
把結果寫進考情板塊：逐題表（題 → 知識點 → 分值）、模組分量表、不考清單、老師說過的話（標日期）、往年題的規律、通用答題模板。
學習路徑：按使用者的可用時間切段。課堂始終按課程模組組織（一個模組一課，前置也按來源分課），這樣以後可以複用；學習路徑只引用課堂裡的步驟（「今天學哪幾課的哪幾步」），不按天切課。每段列出要學的編號，寫明為什麼排在這裡，以及學完用什麼題檢驗。衝刺版另附一個保底版，並列出「可以先砍」的編號；紮實版按天排，每天包含新學的內容和到期的複習。

2. 衝刺版和紮實版

	衝刺版	紮實版
範圍	核心和重要	閉包內全部知識點
講解	講到夠做題	按校準深度講透；transfer 級要講變式
練習	直接用真題檢驗	先刷仿真題，熟練後再做真題
真題	邊學邊用	封存：某種題型的仿真題都達標後，才解鎖對應的真題；最後整卷計時模擬

時間不夠時按這個順序砍：先砍次要知識點的講解，再砍題量，最後才壓縮課堂步驟。拓撲圖和考情不砍。

3. 仿真題（紮實版必須做）

每種考試題型寫 3–6 道仿真題：考同樣的技能，換場景、換資料，難度不低於真題。每道標出對應的真題類型（例如「樣卷 2 Q2D 類」）和考的技能。
出題順序：先出單一技能的題，再出組合技能的題，最後出和真題同等綜合度的題。
每講完一個模組，緊跟著就是這個模組的仿真題。
仿真題放在練習頁，帶「仿真」標籤，不單開板塊。

4. 真題手冊

模組按考試分量排序；模組 0 是考試情報與答題策略；每個模組開頭有一個「必背」框。
每道題包含：層級標籤（官方答案 / 推導答案，推導答案註明非官方）、出處和分值、原題、中文翻譯（考試用英文時）、思路、預設摺疊的答案、「已掌握」勾選。每個小問用全站統一的題卡。
考試用英文作答時，答案先給一段可以直接照著寫的英文，再用中文解釋為什麼這樣答。
一個整卷計時器（預設考試時長，可暫停、清零）和一個「展開 / 收起全部答案」開關。不做單題計時、文字高亮、失分原因歸類這類不常用的功能。

5. Cheat Sheet 暫存（考試允許帶筆記時都加上）

頁面頂部有一個單行輸入框：貼上文字回車即存；LaTeX 自動渲染；可以直接貼上圖片（存成 data URL）。在 Cheat Sheet 頁任意位置貼上也能存。
每條都記下貼上時的上下文（哪一課哪一步、哪個知識點）。條目存在 localStorage 裡。
有「複製全部（給 AI 用）」按鈕：使用者把內容連同上下文發給 AI，AI 把零碎內容整理成易讀條目（標題 + 正文，中文說明、保留英文術語、公式用 LaTeX），再寫回網頁資料；原文保留、可切換檢視。
卡片點擊選中（可多選），右鍵選單「移除所選」，再用頁內確認框確認（不能用 confirm()）；手機上用工具列按鈕。移除是軟刪除：可以用提示條撤銷，也可以從「最近移除」恢復。
用途：做筆記紙時，暫存頁的內容作為「最不紮實的部分」放進 cheat sheet 的一小塊，其餘由 AI 根據課程自動生成。

七、講解寫法

所有類型通用

每一課以第 0 步開頭：這節課解決什麼問題；學完你應該能……（可以檢驗的編號列表）。
先講直覺，再寫定義，再給例子。一個例子貫穿整課，後面的步驟反覆用它。
句子要短，說人話，不寫空話。中文講解，保留英文原詞；考試用英文時，每一步都標出英文關鍵詞。
課堂一次只顯示一步；底部有上一步 / 下一步。卡片頂部寫明：第 N 步 · 預計分鐘數 · 知識點編號 · 英文術語。
左側欄分三層，層級要一眼分清、不擁擠：
- 單元（前置、Module X……）：可摺疊的標題條，帶底色和進度，只預設展開當前單元；只記錄使用者親手點的展開 / 收起（不要把初始化觸發的 toggle 當成使用者操作）
- 課：每課一行，左邊模組色點，右邊進度小標籤；當前課描邊高亮；未生成的課變灰
- 步驟：只在當前課下展開，用一條豎向時間線串起來，每步前是帶編號的小圓點（完成變 ✓），字號更小，用時靠右；「本課主線」按鈕放在步驟列表上方
卡片裡按需要使用這些內容塊：
- 核心公式或定義框
- 人話框
- 例題框
- 考點框：標註出處，按「下一步」逐行展開
- 常見卡點框
- 答題寫法框
- 了解即可（小字）
- 回看卡片（增量更新時）
- 自測
備考也要把學科講通：樣卷只代表題型和典型題，不代表閉包外的東西不會考。學會是目的，考試只是檢測。
- 每一步的「為什麼現在學這個」寫學科上的動機（上一步留下什麼問題、這一步怎麼解決），不寫「因為要考」；考題出處單獨列在每步末尾
- 閉包外的知識點照樣放進課堂、照樣講清楚，只是標為次要

一步講解的固定寫法

每一步按下面的順序寫。沒有的就跳過，但不調換順序：

為什麼現在學：一句話，寫學科上的動機（上一步留下什麼問題、這一步怎麼解決）
直覺：1–3 句話，或者用貫穿例子裡的具體數字引出問題
定義 / 核心公式框：公式單獨成行居中
人話：緊貼公式下方，先逐個符號說明（是什麼、形狀是數 / 向量 / 矩陣、隨機還是固定），再一句「某個量變大時結果怎麼變」
例題框：用貫穿例子代入數字算一遍，每步一行
常見卡點框（有才寫）
自測題：1–2 道，正好檢驗這一步的掌握標準
考題出處：最後一行小字，列出考到這一步的真題小問

公式與排版的固定寫法（參照 MAST90138 複習課堂）

行內還是成行：短符號寫在行內（ $\hat\beta_1$ ）；定義、核心公式、要背的結論單獨成行居中。
推導鏈：用 aligned，等號對齊，每行右邊用 \quad\text{（依據）} 寫一個短依據；很長的不等式或公式也用 aligned 分行，不要撐破卡片。
數值計算固定三段：先寫公式 → 再代入數字 → 再寫結果，結果保留 3–4 位有效數字；所有數值用程式碼驗算過。
公式裡只用 \text{} 寫短詞，不寫中文長句。
記號用真正的 LaTeX，跟課件一致：向量、矩陣用粗體（\mathbf{X}、\boldsymbol\beta）；該花體的花體（Fisher 資訊 \mathcal I、模型 \mathcal M、常態 \mathcal N）；運算元和分佈名用正體（\operatorname{Var}、\mathrm{SS}_{\text{res}}、\mathrm{Bin}）。不要用 Unicode 拼湊公式（XᵀX、β̂、F(2,4) 這類）；知識點標題、掌握標準、選項、提示、真題翻譯裡也一樣。只有 SVG 拓撲圖節點標籤用純文字。
在 MathJax 設定裡定義一套巨集（如 \X、\bb、\SSres、\FI），全站共用，保證記號一致；用到 \boldsymbol 時要載入 boldsymbol 套件。Python 裡寫含 LaTeX 的字串一律用 r"…"。
公式裡不能直接寫 <、>：資料透過 innerHTML 插入頁面時， $\rk(\X)<p$ 裡的 <p 會被瀏覽器當成 HTML 標籤開頭，後面整段被吞掉，露出 $\rk(\X) 這樣的半截程式碼。生成網頁時統一處理：遍歷全部資料字串，把所有 < 取代為 \lt{}（或 <，視情境而定），把所有 > 取代為 \gt{}（或 >）。只在 LaTeX 數學模式內（ $…$ 、$$…$$）做這個取代，但實務上整份 JSON 需要被轉成 HTML 時，對所有字串做取代比逐一判斷安全。可以用 unicode 的 ＜ ＞ 全形符號來寫比較關係（例如 $n ＜ p$ ），這樣既能渲染成小於號，又不會跟 HTML 標籤衝突，但注意全形符號在等寬字型下不美觀。建議的處理步驟： a. 準備 json.dumps(data, ensure_ascii=False) 產生的 JSON 字串 b. 對數學模式內的所有裸露 < 和 > 做取代（用正則：\$[^$]*<[^$]*\$，但注意巢狀）。最安全的辦法：爬完所有文字欄位後，把每個欄位裡的 < 和 > 在插入 JSON 前就轉義掉，例如用 str.replace("<", "\\lt{}").replace(">", "\\gt{}")，確保轉譯後的字串不會再被瀏覽器解析。如果不想改用 \lt，就統一對整份 JSON 做 HTML 跳脫（< → <，> → >），然後在渲染頁面時用 .innerText 或 textContent 而非 innerHTML，讓瀏覽器直接呈現這些字元，這樣就完全避開了 HTML 解析。但是這樣會讓其他 HTML 格式無法生效，所以推薦只對數學模式處理。

邏輯主線

每課的最後一步是一份邏輯主線表：標出整課的每個邏輯步驟及其角色（問題 → 思路 → 做法 → 結果 → 新問題）和對應的步驟編號。讓學完一課的人可以俯瞰全局。角色順序固定，跳過的中間角色留空。每個角色寫在 storyline 裡。
這張表同時也是「主線彈窗」裡的內容，並高亮當前步驟。

八、題庫

通用的題庫結構（questions）

{
  "id": "q-sql-left-join-01",
  "type": "mc|multi|fill|code|essay",
  "points": ["sql-left-join"],
  "skill": "...",
  "from": "lesson|practice|simulation|past",
  "source": {"exam": "樣卷2", "q": "Q2A"},
  "stem": "...",
  "options": ["A. …", "B. …", "C. …", "D. …"],
  "answer": "B",
  "explanation": "...",
  "hint": "...",
  "mastery_target": "..."
}

每道題的必定欄位

題幹、選項（單選）或輸入欄位（多選 / 填空 / 程式碼）、答案、解釋、提示。
每個選項都寫完整，不要在題幹尾端接續。
提示以「試試先想」開頭，給思考方向，不是直接給答案。
解釋裡要區分「對的選項為什麼對」和「錯的選項哪裡錯」，如果有多個易錯方向，提到它們。
根據題型，選項可多可少，但至少 2 個（判斷題就是 True / False）。
程式碼題要有標準答案（可以執行的程式碼）+ 關鍵字比對的檢查點，以及參考實作。

掌握標準與自測

每個知識點都要有 mastery 欄位（「做對什麼題算掌握」），寫的必須能用題檢驗，不能是空話。
自測題緊跟在知識點之後，在課堂步驟的卡片底部，恰好驗證 mastery。答錯時給針對性的解釋，指出哪裡理解有誤。
學習線和複習線的自測題分開：學習線的題測理解，複習線的題測考試應對。

題卡互動

作答後立即顯示對錯，答對時可選地展示完整解釋，答錯時必顯示提示。
每道題可以重新作答，清除之前記錄。
「已掌握」勾選不自動聯動：答對不代表掌握，使用者自己決定什麼時候勾。但是「未掌握」篩選會列出 points 列表裡包含該題知識點、且沒有被勾「已掌握」的題目。
使用者對一道題的作答記錄（選項、花費時間、嘗試次數）存在 localStorage。使用者可以一鍵清除某個知識點或某課的全部作答記錄。

九、網頁技術實作

單頁應用

全部 CSS 和 JS 內嵌在 index.html 裡。資料在 <script> 區塊裡定義為全域變數 COURSE_DATA，格式跟 course.json 一樣。
用 URL hash 做路由。切板塊、展開步驟 / 題目都是 hash change。
資料的「正本」是 data/course.json，所以每次更新時，AI 要讀這個 JSON，修改它，再重新生成 index.html。

localStorage 的使用

所有使用者狀態存在 localStorage[courseCode + ":states"] 裡。
- 知識點勾選：{"sql-left-join": true, ...}
- 步驟完成：{"L-w05/3": true, ...}
- 題目作答：{"q-sql-left-join-01": {selected: "B", time: 30, attempts: 1}, ...}
- 錯題集：哪道題錯了、錯了幾次
- 進度碼：最近一次的匯入 / 匯出時間
每次寫入前先讀取，確保不蓋掉其他分頁的變更（但同一課同時只能一個人學，所以不處理衝突）。
所有 localStorage 操作包在 try/catch 裡，儲存空間滿時提示使用者清理。

進度碼

格式：courseCode|points:sql-left-join,done,front;sql-join,done,back|lessons:L-w05/3,done;L-w05/4,done|q:q-id,done;q-id,miss。
匯入時：只加勾選，不刪除。知識點用 done 和 front 區分「完全掌握」和「看過但還不熟」。
匯入前自動備份當前狀態到 lastBackup 鍵。匯入後在提示條顯示「匯入完成 · 撤銷」，8 秒內可以點撤銷。

從 `course.json` 生成 `index.html`

用 Python 或 node.js 腳本讀取 course.json，渲染成 index.html。
如果是 Python，用 Jinja2 模板（templates/single_page.html.j2）來渲染。
生成前先做一次校驗：所有 pre 指向的知識點存在、圖無循環、所有題目的 points 存在、lessons 裡的 points 存在。
生成時會自動重新給全部知識點編號（no 欄位），順序是先按照 order 排模組，模組內按照 week 然後 pre 的依賴關係排。
所有 <、> 替換成 \lt{}、\gt{}。
圖片的 src 是相對路徑 img/...，這樣瀏覽器可以直接載入。沒有圖片的知識點不會有圖片連結。
產生後在終端機運作驗證腳本。

驗證腳本 (`scripts/validate_course.py`)

讀取 course.json，檢查：
- 必填欄位是否存在
- 所有 ID（知識點、模組、課程、來源、問題）不重複
- 所有 pre 的 ID 存在於知識點列表
- 圖無循環（DFS 檢查）
- 每道題的 points 列表裡的所有知識點 ID 存在
- 日期格式正確
輸出：通過則印出 OK；不通過則列出所有問題，帶行號。

十、交付給使用者的格式

每次交付時，給使用者一個訊息，裡面包含：

網頁資料夾的路徑（相對路徑）。
一句話說明做了什麼（例如「為『資料庫導論』課程建立了一個學習網頁，包含第 1–5 週的課堂和練習，以及第 1 份樣卷的考情分析」）。
如果跳過了使用者的確認，說明原因（例如「由於時間緊迫，沒有請您確認拓撲圖，但我已對照課件核對過，確認無誤」）。
如果遺漏了任何材料（讀不了、無法 OCR、找不到），列出遺漏清單並說明。
交付時，index.html 會自動打開在瀏覽器？不可能，所以告訴使用者「您可以在瀏覽器中打開這個檔案來使用」。
不論在做什麼（新建、增量更新、考情分析），都保持這個輸出格式。

附：與其他技能的互動

學完一個領域的知識點後，可以用「應試筆記」技能生成可列印的考試用筆記紙。
可以用「精簡摘要」技能把一課的內容摘要成 1–3 頁的複習講義。
進度碼是與其他課程互通的一種標準化格式，可以被「學習儀表板」技能讀取。

最後更新：2025-04

在你喜歡的 AI 中提問

說明文件

無痛學習網頁 是做什麼的？