fa-study-kit

財務會計學習頁的工具包：兩種頁面的樣式與引擎、三份可直接建置的範例、一支建置兼檢查的腳本。 範例就是規格——要做新頁面時，先看最接近的那份範例，照它的寫法改內容，比讀任何說明都快。

快速開始

python3 fa_build.py examples/notes_ch10.html --out out      # 筆記頁
python3 fa_build.py my_workbook.html --out out              # 作答本

腳本做三件事：組成單檔 HTML、把作答本用到的科目從總表抽出來內嵌、做交付前檢查。檢查沒過不會輸出檔案。 需要 python3、node（檢查 JS 語法）、npm（第一次會取回科目總表並快取；沒有網路時用 --registry 指定 json）。

取得與更新工具包

工具包是 npm 套件 fa-study-kit，一行取回最新版：

npm pack fa-study-kit --silent | xargs tar xzf && mv package fa-study-kit

改過工具包後：重新建置三份範例確認沒壞 → 調高 package.json 的版本號 → 把整個資料夾交給使用者發佈（npm publish）。發佈前，改過的檔案直接在這次工作裡用就好，不必等。

檔案

| 檔案 | 內容 | |---|---| | fa_build.py | 建置與檢查 | | parts/shared.css | 色彩 token、字型、表格、callout、靜態分錄、頁尾（兩種頁面共用） | | parts/notes.css、parts/notes.js | 筆記頁版面與目錄高亮、互動計算器小工具 | | parts/workbook.css、parts/workbook.js | 作答本版面與引擎（科目選單、批改、報表塊、矩陣塊、作答紀錄） | | data/ifrs18_extra.json | IFRS 18 補充項目（種類、新小計、新列示項目） | | data/ledger_extra.json | 帳務層補充科目（溢價、折價、贖回損益……） | | examples/notes_ch10.html | 筆記頁範例：每一種元件各用一次 | | examples/workbook_ch10.html | 作答本範例：分錄、引導填空、選擇題（單選與複選、選項錯因） | | examples/workbook_statements.html | 作答本範例：分類題與四大報表 | | conventions.md | 會計慣例、科目命名、考試陷阱 |

內容檔

一頁一個內容檔，開頭用註解宣告：

<!-- page: {"type":"notes","title":"[筆記] Ch10 應付公司債"} -->
<!-- page: {"type":"workbook","title":"[測驗] Ch10 應付公司債","alias":{"1100":"現金"},"extra":["my_extra.json"]} -->

• title 同時是 <title> 與輸出檔名。命名規則：[<類型>] Ch<兩位數>(-<兩位數>) 名稱，類型沿用書架的 [筆記]、[測驗]、[題目]、[解析]、[講義]、[附件]；沒有對應章節就省略章節。
• alias：代碼 → 這門課要顯示的名稱（講義用語與 TIFRS 不同時用）。
• extra：這一頁另外要帶的補充項目檔，格式同 data/*_extra.json。
• show_code：true 時選單顯示代碼。預設不顯示，因為代碼前兩碼就是分類。
• 作答本第一次建置會在第一行寫入 <!-- page-id: UUID -->，是作答紀錄的鍵。複製內容檔做新頁時把這行刪掉；修改既有頁時保留。

筆記頁

骨架是 header.hero ＋ div.layout > nav.toc + main，main 裡每節一個 <section id="sN"><h2><span class="idx">0N</span>標題</h2>…</section>。 元件都在 examples/notes_ch10.html 裡出現過：

| 元件 | class | 用在 | |---|---|---| | 公式 | .formula | 一行算式，<b> 標出被定義的量 | | callout | .call ＋ key／warn／ex／ok／exam | 一個 callout 只講一件事；類別表達讀者該怎麼對待它 | | 表格 | .tw > table，數字欄 td.n，正負 .pos／.neg | 對照、明細、攤銷表 | | 靜態分錄 | .jes，貸方列加 cr | 筆記裡展示分錄 | | 步驟 | .ladder > .s | 有先後順序的程序 | | 時間軸 | .timeline > .ev | 有日期節點的流程 | | 卡片群 | .grid > .card | 並列的特性或要素 | | 左右對照 | .two > .col.a／.col.b | 兩個容易混淆的東西 | | 報表範本 | .tpl > .l | 報表上怎麼列示 | | 收合 | details > summary | 非必考的延伸 | | 互動計算器 | .calc ＋ 內容檔結尾的 <script data-page-calcs> | 改數字能看出規律的觀念；用 FA.bindCalc、FA.num、FA.fmt |

首屏的山丘插圖（svg.scene）與明體引言（.quote）是點綴，一頁各最多一次，不適合就拿掉。

作答本

每題一個 <section class="problem" id="…" data-pool="陷阱代碼…">，裡面放提示按鈕、題目、作答元件、按鈕列、.solution。照範例抄骨架即可。

科目一律以代碼作答與批改，顯示中文為主、英文為輔。可用的代碼是 TIFRS 總表（npm tifrs-ci-accounts）加上補充項目。

作答元件

| 元件 | 寫法 | 批改 | |---|---|---| | 科目格 | <select class="gi acct" data-answer="2531\|2530"> | 選到任一可接受代碼；上下層同名視為同一項 | | 分類格 | <select class="gi acct cat" data-answer="11XX" data-pool="11XX 15XX …"> | 同上；自己帶候選清單 | | 落在某分類底下即可 | <select class="gi acct" data-under="21XX" data-example="2201"> | 代碼在該分類之下 | | 非科目的選擇 | <select class="gi pick" data-answer="溢價"><option>… | 值相同 | | 選擇題 | <div class="gi mcq" data-answer="B"><p class="qno">第 12 題 <small>課本選擇 10</small></p><p class="stem">題幹</p><ol><li>選項</li>…</ol></div> | 選項依順序編 A、B、C…；data-answer="A,C" 是複選，要全部選對 | | 金額／填空 | <input class="gi amt\|fib" data-answer="430881" data-tol="5"> | 誤差在容差內；可填 -12000 或 (12000) | | 分錄 | .je > .jline（借方：科目、金額、span.cell.off；貸方：科目加 ind、span.cell.off、金額） | 逐格 | | 報表段落 | .stmt > .sec[data-expected="1100:185000,1172\|1170:240000"] | 列由作答者自己加；同段不計順序；放錯段判錯 | | 合計 | <input class="gi amt tot" data-answer="…" data-of="a,-b,=212000"> | 正確為綠；與作答者自己的數字一致但來源有誤為黃 | | 矩陣（權益變動表） | .mx.xscroll[data-cols][data-open][data-rows] | 列自己選、金額填進受影響的欄；橫向縱向合計同上 |

其他屬性：

• data-pool（題目上）：這一題的陷阱代碼。建置時會自動併入本題所有正解，所以同一題每一格看到的候選清單相同，不會靠清單洩題。
• data-scope="CF"／"ES"（題目或報表塊上）：選單改用現金流量表或權益變動表的項目。預設是資產負債表加綜合損益表。現金流量表裡同名的項目視為同一項，類別由放在哪一段決定。
• data-of：合計的等式，逗號分隔；可寫輸入格的 id、整段的 id（取各列加總）、前面加 - 表示減、=數字 表示常數。
• data-ph：自訂 placeholder。data-rows="3"（段落上）：一開始給幾列空白。
• 提示類的元素加 hint class，預設隱藏；.solution 裡不要再放 hint。

選擇題的題號獨立一行（.qno）：題號粗體，來源之類的標籤用 <small> 跟在後面，「複選」與答對／答錯也顯示在這一行；省略 .qno 時自動補「第 N 題」。題幹（.stem）是一般字重、照原文寫成一段，不要把題號寫進題幹、不要整段粗體、標籤不要接在題幹尾端——題目一長就讀不下去。

批改與解答

• 檢查只標對錯（綠／紅／黃）與分數，不給答案。
• 顯示解答不覆蓋作答：先照目前的作答批改一次，答錯與空白的格保留原樣，正解列在旁邊——單格是格子後面的標籤，選擇題把正確選項標出來，分錄是該列下方一整列，報表段落列出「這一類尚未答對的列」，矩陣在下方另列一張正解表。同時展開 .solution。
• 沒全對就看解答的題目記為已看解答：分數停在看解答前的成績、檢查鈕停用、題目索引改用金色虛線標示而不是完成；按重設才重新計分。
• 錯因是選用的，由這一章決定要不要寫。在作答格上加 data-why="鍵=說明;鍵=說明;*=說明"：鍵是陷阱代碼（科目格）、某個錯誤金額（金額格）或選項值，* 代表其他任何錯誤；檢查後答錯且對得上才顯示在該格下方。選擇題直接寫在選項上：<li data-why="…">，選到那個錯誤選項才顯示。說明裡要用分號時寫全形「；」。值得寫的是那種「錯得有道理」的陷阱（拿面額當帳面金額、溢折價選反），不必每格都寫——寫太多等於把提示送出去。

補充項目

總表只收證交所現行項目，不要為了一門課去改它。缺的東西加在 data/*_extra.json 或這一頁自己的 extra 檔：一列一個項目，欄位同總表再加第九欄搜尋關鍵字；代碼以 X 開頭，避免和證交所代碼混淆。常見情況：TIFRS 把溢價與折價合成一個科目、IFRS 18 的種類與小計還沒有證交所代碼、帳上用得到但報表不單獨列示的科目。

作答紀錄

作答自動存在瀏覽器的 localStorage，鍵是 fa-study:v1:answers:<page-id>，每題各一筆並帶正解簽章；題目或答案改過，舊紀錄自動作廢。除了作答內容，只多存一個「已看解答」的記號與當時的分數；重新開啟時該題會回到看解答後的畫面。提示展開狀態不存。

發佈

• 單檔自足，外部資源只有 Google Fonts（JetBrains Mono、Noto Sans TC）與 jsDelivr 上的科目總表。
• 字型不內嵌：CSS 只寫字型名稱，裝置有裝 LINE Seed TW、源泉圓體、GenKiMin2 就用，沒有就退回系統字型。
• 科目總表先從 jsDelivr 載入，失敗再找同資料夾的 tifrs-ci-2026-03-31.js（建置時會複製到輸出資料夾，發佈時可一併附上當備援）。兩者都失敗時頁面仍可作答與批改，只是搜尋範圍縮到本頁內嵌的科目。
• 既有頁面更新時用原連結，不另開新的。

設計

色彩、圓角、字型堆疊取自使用者的設計系統（米底、分層的綠、一點棕；卡片用虛線邊框與大圓角；按鈕與標籤全圓角；不用 emoji）。紅、藍、金、紫四個語意色是為 callout 與批改延伸的，調成同一色溫。所有顏色走 parts/shared.css 開頭的 token，淺色與深色各一組；新元件用 token，不寫死色碼。

可以改什麼

這包東西是起點，不是框架。題型不合就加新元件、新檢查；版面不合就調；某份來源適合完全不同的章節結構就照來源走。 改 parts/ 之後把三份範例重新建置一次，確認沒有弄壞既有頁面；值得留下來的改動寫回工具包。