Widget 系統測試書

這本書展示 5 個 widget 該怎麼用。每一章測試一個。

目錄

<span data-widget="toc"></span>

讀完每一章按一下「我讀完這節了」打勾,目錄會顯示 ✓。

<span data-widget="check" data-id="read-ch1"></span>

把 <span data-widget="audio" data-id="sample"></span> 放進 markdown,Lumi 自動接成一個小播放按鈕:

<span data-widget="audio" data-id="sample"></span>

點 ▶ 試試。倍速跟著全域設定走(從 TOEIC 聽力頁帶過來)。

· 載入中顯示 ◌ · 播放中顯示 ⏸ · 4xx / 5xx 顯示 ⚠ · id 找不到顯示 🔇 灰色

試完打勾。

<span data-widget="check" data-id="read-ch2"></span>

練習小測直接寫在 markdown 裡。<span data-widget="quiz" data-id="basics" data-opts="count=3"></span> 從 quiz.json 抓題,可用 count 限題數。

<span data-widget="quiz" data-id="basics" data-opts="count=3"></span>

答題: · 點選項 → 確認 → 反白對錯 + 解析 · 跳過也算一筆紀錄(不種 SRS) · 重新整理回來會接續(localStorage 保存)

答過的題目寫進 attempt 表 namespace book:widgets-demo:basics:<i>。

<span data-widget="check" data-id="read-ch3"></span>

<span data-widget="srs" data-id="mini"></span> 開一組 SRS 卡片。Lumi 自動排程:

· 第一次看 → 新卡 · 答對 → 拉長間隔 · 答錯 → 短間隔再來

<span data-widget="srs" data-id="mini"></span>

按「開始複習」走 4 階段評分(Again/Hard/Good/Easy),走完當天該複習的 + 最多 5 張新卡(new-per-day=5 opt)。

寫進 srs_state 表 namespace book:widgets-demo:srs:mini:<cardId>。

<span data-widget="check" data-id="read-ch4"></span>

5 個 widget 全測完了:

1. <span data-widget="toc"></span> — 章節目錄 + 跟 check 連動
2. <span data-widget="check"></span> — 章節打勾 + 跨裝置(寫 book_progress 表)
3. <span data-widget="audio"></span> — id → audio-map.json → CDN URL → 播
4. <span data-widget="quiz"></span> — quiz.json + attempt 紀錄
5. <span data-widget="srs"></span> — srs.json + FSRS 排程

故障示範(刻意失敗的)

找不到的 audio id:

<span data-widget="audio" data-id="no-such-id"></span>

找不到的 quiz set:

<span data-widget="quiz" data-id="no-such-set"></span>

找不到的 deck:

<span data-widget="srs" data-id="no-such-deck"></span>

未知 widget:

<span data-widget="nonsense" data-id="foo"></span>

以上應該全部顯示「找不到 / unknown」placeholder,不會炸頁。

<span data-widget="check" data-id="read-ch5"></span>