腎入學習 — 兒童 CKD 教學門診

Tags: Vue 3, TypeScript, Vite, Vitest, Vercel

緣由

兒童慢性腎臟病的衛教多半停留在紙本與口頭說明，門診時間有限，家屬與病童難以確認「學會了沒有」。教學門診希望有一個能在診間或回家後使用的輕量工具，讓衛教成效可以被看見、被比較，並能作為教學評比的佐證。

目的與預期效果

• 以 CKD 五大知識面向設計前後測，讓使用者了解自己的學習進步。
• 用雷達圖呈現各面向得分，用分布圖把個人成績對照歷史前測／後測的中位百分位。
• 不需註冊登入，開啟網址即可練習，降低診間使用門檻。
• 作為教學門診的輔助教材與成效紀錄，而非有防作弊要求的正式考試。

如何做出來

1. 整理臨床診療指引與衛教計畫等參考資料，擬定主題與五題練習題及候選答案。
2. 將歷史前測（166 筆）、後測（162 筆）Excel 以 Python 腳本轉為匿名統計（僅分數分布、平均、中位數），不含姓名與逐筆答案。
3. 計分邏輯獨立為 scoring 模組（每題 2 分、完成率、得分率、同分中位百分位），以 Vitest 撰寫測試。
4. 作答紀錄與草稿存於瀏覽器 localStorage，可下載 JSON 備份；儲存介面預留 adapter，日後可接雲端資料庫。
5. 路由採 hash，純靜態部署至 Vercel，不需環境變數或後端。

使用的套件與模型

• 框架：Vue 3 + TypeScript + Vite 7
• 圖表：自繪 SVG 雷達圖與分布圖元件
• 圖示：Lucide
• 測試：Vitest、vue-tsc 型別檢查
• 資料處理：Python + openpyxl（僅開發時轉檔）
• 部署：Vercel 靜態託管
• 模型：網站執行時不使用任何 AI 模型，所有計分皆為確定性程式邏輯

限制

• 紀錄僅存於該瀏覽器與網域，換裝置或清除資料不會帶走。
• 純前端的答案與計分可被檢視，不適合正式考試。
• 題目為測試版，正式使用前仍須教師核定。

連結

• 線上網站：https://frontend-two-chi-30.vercel.app/
• 原始碼：私有儲存庫（未公開）