HTML5 : stroke 國字注音筆順練習第二版(2013版)

【更新說明】

本文介紹的「雄-筆順練習 II」為舊版，已停止除錯及更新。

【目前只針對第三版發展，建議使用第三版】

• 雄 : HTML5 : 筆順練習第三版(2019版)

舊的網址僅留供轉址用，請記得更新舊的書籤。其它的關更新資訊請參考文末的「更新記錄」。

程式源起

教育部有個「國字標準字體筆順學習網」，學生可以透過這個網站來練習國字及注音符號的筆順。不過，由於它是利用 Flash 開發的程式，並無法在 iPad 上使用，2012年的寒假，了解教育部筆順學習網筆順資料的結構以後，我利用 HTML5 寫了一個一千行左右的陽春版筆順練習程式，它最大的優點是可以在 iPad 上直接以手指頭書寫，和滑鼠的體驗完全不同，後來更進一步使用 HTML5 的 localStorage 將筆順資料下載後，儲存在本機，這樣一來，就可以在沒有網路時離線使用了。

快兩年過去了，最近對 LimeJS 更了解，不少以前卡住的關節打通了，於是決定將筆順練習的程式重寫，除了讓界面更穩定，讓它不會因為系統不同、螢幕旋轉而差異太大，也想讓設定的部份可以不用更改檔案，只要手指頭點一點，拉一拉就設定好。花了一個星期，新版的雛形已然完成，有興趣的人的可以玩玩看。

2013.12.23.c 的畫面

先回顧一下 2012 年 2 月在 Plurk 發表的第一代 HTML5 筆順練習程式

首發的噗文

發布加了離線使用功能的噗文

第一代 HTML5 筆順練習程式的畫面

程式功能

2013年12月新版的程式使用 LimeJS 來開發，筆順資料則是利用 Google Apps Script 連到教育部筆順學習網中下載後，再以 JSON 的格式餵給 HTML5 的主程式，順便將資料儲存在瀏覽器的 localStorage 中，以達到可以離線使用的目的。程式提供的功能如下：

• 可以練習教育部筆順學習網資料庫中有的國字和注音筆順。
• 以 HTML5 開發，可以在 iOS、Android 或是 PC 上支援 HTML5 的瀏覽器(Safari、Chrome、Firefox ......) 中使用。
• 筆順資料下載後會自動儲存，可以離線使用。
• 網路連線下使用，可以播放教育部筆順學習網中的語音。
• 會自動管理本機的儲存空間，目前預設最多可以儲存 50 個字的筆順。
• 習寫時，如果寫錯，會提醒錯誤的地方。
• 提供自訂選項，並能將設定值儲存起來。(.d 版增加)
• 可以利用掃描 QR Code 的方式來輸入文字，也可以將生字輸出成 QR Code 讓學生掃描。(.e 版增加)
• 提供塗鴉工具，方便教學時使用 (.h 版增加)。

使用方法

只要以支援 HTML5 的瀏覽器開啟以下的連結，即可開始使用：

• HTML5 筆順練習程式@HTML5 FUN

HTML5 筆順練習的 QR code

如果使用的是 iOS 的裝置(iPad、iPhone)，開啟上述網址以後，還可以將它「新增到『主畫面』」，以全螢幕的方式來操作。

下載筆順資料的輸入畫面

第一次開啟程式，因為本機沒有任何字的筆順資料，只要在輸入區中輸入想要練習的字(可以輸入多個字)，好了再按一下「開始下載」的按鈕，即可透過網路，由教育部取回每個字的筆順資料。中間如果有教育部網站字庫中沒有的字，程式會自動將它由清單中刪除。成功下載的字，最後則會出現在畫面右側的選單中供選用練習。

快速輸入練習題目的方法

如果想讓學生可以省下打字的時間，我們可以在網址的後面加上「?words=所有想練習的字」，例如下面的網址在「?words=」後面加了12個國字，當學生按下這個超連結時，不用重新打字就可以得到題目：

• https://gsyan888.github.io/html5_fun/html5_stroke/html5_stroke.html?words=國雄祝福大家平安健康快樂

使用時的畫面如下：

2013.12.29 .d 版(右下角多了設定鈕)

右下角設定鈕按下後的畫面：

.d 版後，下方多了一些設定選項

清除所有下載的筆順資料

如果想要刪除所有下載回來的筆順資料及設定值，只要先按一下右下方的「下載筆順」按鈕，再將輸入區中的所有字通通刪除，最後再按一下「開始下載」的按鈕，程式就會將之前儲存的資料清除成第一次使用的狀態。

像「.c」的版本幫原本筆順練習網的筆順資料中加了「語音檔網址」的屬性，以方便程式播放字的解說語音，如果沒有清除舊的筆順資料，會因為少了「語音檔網址」而無法播放該字的語音。此時，這一招就很好用哦！

以 QR Code 輸入文字

「.e 版」整合了 jsqrcode 的程式，在輸入準備要下載的字串時，可以使用行動裝置內建的相機拍 QR Code 以後再解碼，並填入輸入區使用。目前在我的 iOS 7 上測試是可行的，不過速度有時較慢。

iOS 7 上，按完「QR」鈕的畫面 (.e版)

如上面的截圖所示，按了右下角的「QR code」鈕以後，iPad 會出現「拍攝照片」的選項，按一下以後，對準 QR Code 拍一張，好了就點一下右下角的「使用照片」，解碼成功後，就會自動將解碼後的文字貼入輸入區。

「教育噗浪客」五個字的 QR Code

目前「QR Code 輸入法」在我家的 Android 上還沒成功過(2014.01.02 已在 Android 4.04內建的瀏覽器中成功由 QR Code 取得生字)，而一般 PC 中，Chrome 裡載入 QR Code 的圖檔也可以成功(哈！別的方法應該會更快完成輸入)，其它問題再研究囉！

輸出 QR Code

「.f 版」新增了將目前練習的字或是將選單中的合部字輸出成 QR Code 呈現在畫面上的功能，方便在教學時，將字透過投影方式給學生以 QR Code 輸入到他們的手持裝置上。

「.f 版」下方多了兩個 QR Code 輸出按鈕

如上圖紅色箭頭所示，下方左側的 QR Code 小按鈕會輸出目前練習的那個生字，右側的 QR Code 小按鈕則是將選單中的所有生字組合成字串輸出。想要關閉輸出的放大版生字 QR Code ，只要按一下 QR Code 即可恢復原來的畫面。

輸出的文字型態 QR Code

離線使用的方法

由於本工具已設定好 HTML5 離線使用的快取控制設定，如果想要在沒有網路時，仍然可以練習筆順，只要進行以下兩個動作即可。

1.在網路連線的狀態，以瀏覽器連到 HTML5 國字注音筆順練習工具後，

• iPad ：將該頁面加入「主畫面」，這樣就會多一個桌面圖示，方便使用。
• Chrome、Firefox : 將該頁面加入「書籤」。

2.在網路連線的狀態，按一下國字注音筆順練習工具中的「下載筆順」按鈕，輸入準備下載筆順資料的所有字以後，按一下「開始下載」的按鈕。

當下載完筆順資料以後，測試一下離線使用，將瀏覽器全部關閉，並將網路切斷。由桌面圖示(iPad)或是瀏覽器的書籤中打開筆順練習工具，點選要練習的字，應該可以由已預先儲存的資料庫中載入筆順資料囉！

目前程式功能還在慢慢增加中，近期會加入設定的功能如下：

• 筆順示範速度調整。(已完成)
• 練習時的畫筆粗細。(已完成)
• 是否出現筆順序號。(已完成)
• 練習時，是否出現提示。(已完成)
• 可儲存的筆順資料字數。
• 重播(上載)練習時的筆順。(2022.02.27完成，筆順練習第三版新增的功能，第二版不支援)。

版權聲明

• 本程式所使用的筆順資料來自：
  中華民國教育部「國字標準字體筆順學習網」
  https://stroke-order.learningweb.moe.edu.tw/

相關連結

• 雄 : 教育部筆順學習網部份字的小臭蟲
• 教育部常用國字標準字體筆順學習連結快速產生器
  (2010.02 與江明勳老師合作的小工具)
• 雄 : HTML5 : 筆順練習第三版(2019版)

更新記錄

• 2022.03.14 .v14.8 版 : 修正習寫檢查對錯的檢查點不在筆畫中的問題，提高習寫的正確率。
• 2021.12.16 .v14.1 版：修正在塗鴉畫筆的模式下仍可以設定部件組成的問題；修正偵測瀏覽器是否有 Path2D.addPath function ，在 JavaScript 最佳化後無效的問題。
• 2021.12.16 .v14 版：修正部件設定未檢查是筆畫序號是否超出範圍的問題；修正在使用塗鴉工具或拖曳部件，在選單上方時，選單會滑動的問題(利用cancelEvents)。
• 2021.12.12 .v13i版：將部件的功能整個大翻修，改用 Path2D 的 isPointInPath 或自己設計的 isPointInPath (考慮到部份舊的瀏覽器不支援 Path2D)，來判斷並處理按下、移動與部件或筆畫的互動，讓部件的功能輕量化，更有效率。
• 2021.12.05 .v13h版：加入十字線在背景；改善下載輸入文字時游標與選取功能，加入全部選取所有文字的工具圖示；QR code 中央加上 HTML5 FUN 圖示及要練習的字串摘要。
• 2021.12.04 .v13g版：塗鴨區的畫筆最佳化，橡皮擦改以線為單位，點到的線會整條擦拭，塗鴨範圍亦擴大。
• 2021.11.30 .v13f 版：調整各按鈕，讓它們可隨著解析度自動調整大小、位置；加強部件模式按鈕的控制，以免使用者在不該按時誤觸；更換選單與練習區互換位置的圖示；練習時，字的輪廓加一個填灰色無外框的模式(設定為不提示下一筆順時適用)。
• 2021.11.28 .v12 版：解決在寫字時，畫面會跟著滑動的情形；微調按鈕的位置；加入偵測裝置旋轉的狀態，並讓使用者選擇是否要重新整理頁面。
• 2021.11.28 .v11 版：支援直拿模式；解決在部份手機QR Code 無法產生的問題，並加入按QRCode 圖示或按右上角叉叉關閉的功能；部件的部份改在使用時才新增物件，以免耗太多資源(不過如果筆畫較多的字，在記憶體較少的系統仍可能有間題)；解決選單中的字數如果太多，被遮住的字仍可以按的問題。
• 2021.11.25 .v10 版：更改了下載筆順的流程，會先批次抓取語音檔的路徑及部件設定，再直接擷取教育部筆順網的筆順資料，提升了下載筆順的速度；解決 JSQRCode 無法於JavaScript 最佳化後使用(qrcode.js 有個變數 p 未宣告為區域變數，errorlevel.js中有三個全域變數名稱只用了一個英文字母，容易和最佳後的 JavaScript 重覆)； 將檔案由 firebase hosting 移到了 HTML5 FUN 的空間，方便維護。
• 2019.03.09 .v9 版：新增部件的功能，如果有下載到部件的資料，可以拖曳部件；在左下方的「塗鴨工具」裡多了填色的工具，可以在各筆畫中填色，同色的即為同一部件；自訂的部件設定會儲存在本機中，供下次使用。網址中加入 parts 的參數，可供設定第一個生字的部件。
• 2018.11.14 .v8 版：新增可以在網址中加入選項的開與關變數，控制是否要提示下一筆順用「enableShowHint」、是否顯示筆順序號用「enableShowStrokeNumber」，是就用「true」，否就用「false」；例如不想要提示下一筆順就在網址中加入「enableShowHint=false」。
• 2017.04.01 .v7 版：解決 iOS 11.3 以後，在寫字時，畫面會捲動的問題。
• 2017.10.24 .v6 版：解決按了下載對話框的叉叉關閉對話框以後，會造成下載筆順的無法再使用的問題。
• 2017.09.25 .v5 版：在筆順練習區和選單中間下方加入一個小圖示，可以讓左、右的區塊交換，現在預設將選單區換到左側。
• 2017.09.18 .k4 版：練習如果答對，會在右側選單該字上加一枚徽章的圖示。
• 2016.09.03 .k3 版：更改擷取筆順資料的程序，先利用 Google SpreadSheet 查出字的 big5 碼和語音檔代碼，才進行擷取筆順資料的 XML 檔，可以減少 Google App Script 呼叫「UrlFetchApp.fetch」的頻率。將舊的 App Script 停用，以免仍使用 Google web hosting 快取的舊程式持續呼叫，造成呼叫流量超過 quota 的問題。另外，將 g0v 筆順資料的網址改用 https ，以配合架構在 https 的 Firebase 。
• 2016.09.02 .k2 版：教育部網站有狀況，擷取不到筆順資料，加上程式的 bug，一直呼叫 Google App Script，導致超過流量而無法正常工作；修改程序，一但擷取不到教育部的筆順資料，就改用 g0v 的筆順資料( https://github.com/g0v/zh-stroke-data )。不過，g0v 的 .xml 並不帶語音檔的相關資訊，會因此不能播放語音的部份。
• 2016.08.26 .k 版：修改聲音處理的模組，因為語音檔為 Cross Site 的，讓它用最原始的方式載入及播放；新增了寫錯及完成的回饋語音。
• 2016.08.23 .j2版：前一次修改讓 iOS 7/8 Android 的掃瞄 QR Code 恢復，但在 iOS 9 上卻連照相的功能都出不來，將 qrcodeButton 的監聽事件由 ['mousedown','touchstart'] 改為 ['click'] 以後才能正常的叫出取得圖片的功能。
• 2016.08.21 更新 jsqrcode 中的 qrcode.js 以解決在 iPad 上無法使用 QR Code 來輸入字串；但又發現它無法掃出中文字串，更改了「qrcode.decode_utf8」的傳回值：將「return s;」改為「return decodeURIComponent( escape( s ) );」。
• 2016.08.20 因應 Google 關閉 web hosting 的服務，將檔案改放到 firebase 的 hosting 中，文章中所有的網址一併修改。
• 2014.02.07 塗鴉工具加入畫筆粗細調整工具，和原來筆順練習用的畫筆粗細分開設定。解決 Base64 解碼後中文有問題的 bug (此部份不影響筆順練習)。
• 2014.02.05 .i 版：修改下載筆順資料的程序，不在一開始就下載全部的筆順，以免等候的時間太久，只有在使用者按「下載筆順」的按鈕才會一次下載所需的筆順。處理按了選單按鈕，在本機沒有筆順資料時的程序臭蟲。加了「載入設定檔中」的訊息，以免因為載入 QR code 相關檔案等候過久而畫面空白一片。
• 2014.01.27 .h 版：右下角多一個畫筆的圖示，按下去可以打開或關閉塗鴉的功能，方便教學解說用。
• 2014.01.03 .g 版：修正筆順示範的 bugs，讓它更流暢及解決未填滿的問題；調整各按鈕按下後的流程；將以 QR Code 輸入下載文字的按鈕改用圖示表示；顯示筆順序號時加入箭頭，提示運筆方向。
• 2014.01.02  修正 QR Code 掃描輸入在 Android 上失敗的問題。
• 2014.01.01 .f 版：加入 QR Code 產生器，可產生目前練習的生字，或是選單中所有生字的 QR Code ，方便老師教學使用。
• 2013.12.30 .e 版：修正按了筆順示範會將語音停止的問題；整合 jsqrcode 的功能，可以在輸入區以 QR Code 來輸入文字。
• 2013.12.29 .d 版：除掉一些臭蟲，在右下角加入設定鈕，按完以後可以調整畫筆大小、範寫速度，控制是否啟動筆順數字、錯誤提示及播放語音，設定值會自動儲存起來，啟動時會還原。將輸入區提示字串改放到輸入區下方小字。
• 2013.12.28 調整 Google Apps Script 的流程，下載的筆順資料加入聲音檔路徑後才傳給 HTML5 儲存；加入連線時播放語音的功能。
• 2013.12.27 調整界面；發現筆順繪製時未處理「CubicTo」，以致有使用到這部份的字會缺筆畫；修正筆順示範時，畫筆比例未處理，動畫不夠細膩的問題。
• 2013.12.26 第二版發布。
• 2013.12.23 Google Apps Script 擷取筆順資料測試成功；以 LimeJS 改寫筆順練習程式。
• 2012.02.22 第一版在 Plurk 發布。