Alphabet Academy 英語字母小學堂：一本會回應的字母描寫簿
2026年4月15日
為什麼做這個專案
這個專案的起點很單純：兒子開始學英文字母，敲碗想要一個英文字母的手寫練習。
紙本描寫簿寫完就結束了，沒有人即時告訴他寫得好不好、哪裡還可以更好。剛好自己會寫程式，那就為他做一個。
Alphabet Academy 英語字母小學堂想做的是一本「會回應的描寫簿」：在螢幕上用手指或滑鼠描寫字母，寫完馬上得到星星和語音鼓勵；也可以聽發音、認單字，用遊戲的方式把 26 個字母練熟。
主要功能
兩種模式
- 練習模式：看著淡淡的字母描寫，旁邊提示這個字母的單字與中文，例如 A — Apple 蘋果
- 挑戰模式：題目先不給答案，從畫面下方的字母鍵盤點選正確的字母，考考自己記住了沒
依需求挑選題目
- 全部 A–Z：照順序從頭練
- 母音 A E I O U／子音：分開加強
- 智能挑戰：還沒完成的字母優先出現
- 隨機、今日：換個順序，每天都有新鮮感
另外還可以切換大寫／小寫，開啟「自動唸」讓每張卡片出現時自動播放發音。
聲音與鼓勵
字母和單字都會用英文發音，語速特別放慢一點，適合小朋友跟讀。寫完之後依照得到的星星數，用中文語音給予鼓勵：「太棒了！滿分三顆星」、「好棒喔！快要成功了」、「加油！你一定可以的」。
最核心的部分：怎麼幫手寫字母打分數
這個專案花最多時間的地方，是評分要公平、又要對小朋友友善。太嚴格會讓孩子挫折；太寬鬆的話，隨便亂塗也能拿滿分，就失去練習的意義。
最後的做法是同時看兩件事：
- 覆蓋率：字母本來的筆畫，有多少被描到了？代表「完整度」
- 精準度：使用者畫的線，有多少落在字母上？代表「有沒有亂畫」
兩者加權合成分數，覆蓋率佔比較重。因為對初學者來說，「把字寫完整」比「每一筆都很精準」更重要。
在這個基礎上，再加了幾個調整：
- 位置容錯：小朋友的手不穩，筆畫稍微偏一點不應該算錯，所以判斷時會給筆畫一點寬容的範圍
- 防止亂塗：在字母範圍外畫了一大片的話會被扣分，避免把整個畫面塗滿就拿到高分
- 筆順與方向：除了「畫在哪裡」，也會檢查筆畫數量和方向是否大致合理，例如 A 應該有斜線和橫線
畫面上會即時顯示覆蓋、準度、溢出等各項指標，以及拿到三顆星需要達到的標準，讓家長和小朋友都知道還差多少。
技術選擇
| 項目 | 使用技術 |
|---|---|
| 框架 | Next.js ＋ React ＋ TypeScript |
| 手寫 | HTML Canvas，支援滑鼠與觸控 |
| 語音 | 瀏覽器內建的 Web Speech API |
| 部署 | Cloudflare Pages |
整個應用程式都在瀏覽器裡運作，評分也在本機計算，不需要後端，也不會上傳孩子的手寫資料。
小結
做這個專案讓我體會到，「教育類」產品的重點不在功能有多少，而在回饋的分寸：要讓孩子覺得自己做得到，又真的在進步。評分演算法裡的每一個門檻，背後其實都是在拿捏這個分寸。
🌐 線上體驗