330 題庫 × 進度追蹤 × 零後端互動工具
產業類型： 教育科技 / 親子學習 / 互動工具
使用技術： HTML、CSS、JavaScript、localStorage、Netlify
作品連結： 數學小達人
從真實家庭需求出發
這個作品的起點，不是為了展示技術，而是來自我自己的生活需求。
我的兩個女兒目前分別是國小一年級與二年級，平常在陪她們練習數學時，我發現市面上的學習工具常見幾個問題：
- 廣告太多，孩子容易分心
- 多數 App 需要訂閱或付費
- 題目設計不一定符合台灣 108 課綱
- 很難針對特定年級做精準練習
- 有些工具操作複雜，孩子無法自己使用
所以我決定直接做一個適合台灣小學生使用的數學練習系統。
這個作品不只是給自己孩子用，也是一個技術展示案例：
如何把真實使用者需求，轉化成一個可以公開使用、低成本維護、快速上線的互動工具。
我想解決的問題
這套系統的核心目標很明確：
不是做一個功能很複雜的教育平台，而是做一個孩子打開就能使用、家長不用額外設定、完全免費的小型練習工具。
我希望它能解決三件事：
第一，讓孩子可以依照自己的年級練習，不需要在不適合的題目中浪費時間。
第二，讓家長不用下載 App、不用註冊帳號，也不需要處理廣告與訂閱問題。
第三，讓系統具備基本的進度記錄，孩子下次打開時可以延續之前的練習狀態。
功能設計
目前系統涵蓋國小 1 到 6 年級，共 330 題題庫，並依照不同年級設計對應的數學練習內容。
功能包含：
1. 年級選擇
使用者可以選擇國小 1 到 6 年級，每個年級有獨立題庫，避免孩子一開始就接觸過難或不適合的題型。
2. 題型覆蓋
題目內容包含加減乘除、分數、小數、面積、時間等國小常見數學主題，並依照年級程度進行安排。
3. 即時答題回饋
孩子作答後，系統會立即判斷答案。
答對時會出現撒花動畫，增加正向回饋；答錯時會顯示正確答案，讓孩子可以立刻修正理解。
4. 進度本地儲存
系統使用 localStorage 儲存練習進度，即使關閉瀏覽器，下次打開仍然可以保留紀錄。
這樣的設計不需要登入帳號，也不需要資料庫，對孩子與家長來說都更直覺。
5. 零後端架構
整個系統是純前端靜態網站，不需要伺服器、不需要資料庫、不收集個人資料。
這讓網站可以直接部署在 Netlify 上，降低維護成本，也提高使用上的安全感。
技術選擇與架構
這個作品使用 HTML、CSS、JavaScript 製作，並部署在 Netlify。
技術選擇的重點不是追求複雜，而是選擇最適合這個需求的解法。
因為這個工具不需要會員系統、不需要多人同步、不需要後台管理，所以使用純前端架構反而更有效率。
這樣做的好處是：
- 上線速度快
- 維護成本低
- 不需要後端伺服器
- 不需要資料庫
- 可以免費部署
- 使用者不需要註冊帳號
- 不會收集孩子個人資料
對教育工具、品牌互動頁、小型測驗、活動頁、名單收集前的小遊戲來說，這類架構非常適合用來做 MVP 測試。
這個作品展示的能力
這個作品想展示的，不只是我會寫 HTML、CSS、JavaScript。
更重要的是，我能從一個真實需求出發，拆解使用情境，設計操作流程，最後做出一個可以公開使用的互動工具。
對我來說，網站不只是放資料的地方。
如果設計得好，它也可以變成一個讓使用者「先體驗、再信任、再行動」的入口。
這套小學數學練習系統，就是把一個很生活化的問題，轉成可操作產品的例子。
它不需要大型後台、不需要會員系統，也不需要高額主機成本。
只要需求夠清楚，很多品牌互動頁、測驗頁、推薦工具，其實都可以用輕量架構先做出第一版，快速上線測試。
這類工具適合用在哪裡？
這類互動工具適合用在「你不想只讓使用者看內容，而是希望他真的動手操作」的場景。
例如：
- 教育品牌：課程前測、練習題、學習診斷
- 香氛品牌：香氣推薦、情緒測驗、產品導購
- 命理品牌：占卜抽籤、生命靈數、塔羅測驗
- 個人品牌：名單收集、服務診斷、內容導流
- 電商品牌：商品推薦、需求篩選、活動互動頁
比起單純做一頁形象網站，互動工具更容易讓使用者停留，也更容易讓對方理解你的服務價值。
因為他不是只是在看你介紹自己。
他是在使用你的內容。
如果你也想做自己的互動工具
如果你有品牌、課程、產品或專業內容，卻不知道怎麼把它變成可以讓使用者操作的網頁工具，我可以協助你整理。
我可以協助你把想法拆成流程，做成可公開分享的互動網頁，適合放在官網、社群連結、活動頁或個人作品集中使用。
Verna
Verna
AI 工具 × 自動化 × 品牌網站建置