2013年12月28日 星期六

HTML5 : stroke 國字注音筆順練習 (2017.10.24 更新)

教育部有個「常用國字標準字體筆順學習網」,學生可以透過這個網站來練習國字及注音符號的筆順。不過,由於它是利用 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 筆順練習的 QR code



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

下載筆順資料的輸入畫面

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


快速輸入練習題目的方法

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



使用時的畫面如下:
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)或是瀏覽器的書籤中打開筆順練習工具,點選要練習的字,應該可以由已預先儲存的資料庫中載入筆順資料囉!




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

  • 筆順示範速度調整。(已完成)
  • 練習時的畫筆粗細。(已完成)
  • 是否出現筆順序號。(已完成)
  • 練習時,是否出現提示。(已完成)
  • 可儲存的筆順資料字數。
  • 重播(上載)練習時的筆順。


版權聲明




相關連結




更新記錄
  • 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 發布。



44 則留言:

  1. 老師你好,我是否可以在我們的線上學習平台 1know (http://1know.net) 上使用這個功能呢?也就是直接使用"快速輸入練習題目的方法"引用你的功能呢? 謝謝。

    回覆刪除
    回覆
    1. 您好:
      抱歉,我的作品基本上只同意非商業的使用,您的平臺應該非這個範圍。而且,您所謂的引用,只有看到東西被嵌入貴站之中,並未看到任何標明出處的文字,這應該不是引用而已。

      刪除
  2. 雄老師好,非常謝謝您的分享,我想將之連結在學校網頁上和老師們分享可以嗎?雖然目前還在研究中,我的andriod手機是4.1.2,可是連結很慢。所以不知道學生端使用起來如何?筆順示範也很慢。不過很興奮又可以讓學生多一種學習機會!

    回覆刪除
    回覆
    1. 老師您好:
      歡迎使用。因為採用的 framework 較耗資源,在 Android 的滑順度可能較差一些, 硬體好一點可能會順一點。手機上的版面則略小了些,可能應用在平板上較好。

      刪除
  3. 瞭解,謝謝顏老師!看來光是有smart phone還不夠,要看看IQ有多少!當老師也要有先進的工具才行。

    回覆刪除
  4. 請問國雄師,筆順練習左下方筆的顏色與橡皮擦應如何使用呢?
    我的電腦好像無法選取顏色!
    另,不知能否建議加上田子格和九宮格兩種不同的格線?
    感恩!

    回覆刪除
    回覆
    1. 您好:
      不知您使用何種瀏覽器,因為是針對 iPad 設計,因此只有在 Google Chrome 和 Apple Safari 上測試過,主要必須有支援 HTML5 的瀏覽器。
      顏色選完,筆的圖示外框會變色,變化不大,接著就可以在練習區塗鴉,再度按左下角的「塗鴉工具圖示」工具列會隱藏,而塗鴉會全部清除。
      背景在格線的部份曾考慮過,不過,現在版面有一點擠,還在思考怎麼加工具較好

      刪除
  5. 我知道了,原來按掉圖示,塗鴉就會清除了!
    另外,請問"下載筆順"的資料會存在哪裡呢?
    可否存成一課一課的資料夾放進usb呢?

    回覆刪除
    回覆
    1. 筆順資料是儲存在瀏覽器內建的空間中,而且是有容量限制的,只能用程式去管理,這些資料要有程式去解譯才有用。 HTML5礙於安全的限制,並無法在本機儲存檔案的, 其實 Flash 也是如此;即使存了檔案,同樣的理由,除非將所有東西都放在網路上,否則亦無法讀取。

      刪除
  6. 雄老師,請問如何整理於練習簿給幼兒使用

    回覆刪除
    回覆
    1. Tiffiny 您好:
      抱歉, 不清楚您說到的「練習簿」指的是什麼吔

      刪除
  7. ‘我是一位幼稚園教師,因要準備K2幼兒的筆順練習,但不知如何匯入功課冊內.

    回覆刪除
    回覆
    1. Tiffiny 您好:
      您只要參考文中「快速輸入練習題目的方法」裡提到的 hyperlink URL 語法,將中文字(words=.....) 裡的中文字(等號後面)換成您想給孩子練習的字串,然後將 URL 加入您原來「功課」內的即可。
      因為沒看過您所謂的「功課冊」,只能先這樣解釋,如有不清楚之處還望見諒。建議您以後要問別人類似的問題,最好能讓人可以看到您的畫面,不然,可能無法明瞭您的困難點。

      刪除
  8. 老師好,
    想問一下,因為教室裡沒有網路,可以在輸入需要的字之後,將此程式下載下來,做離線使用嗎? 不知道老師還知不知道有可離線使用的筆順典?

    謝謝!

    回覆刪除
    回覆
    1. SH 您好:
      這個工具只要您在有網路時, 先輸入要練習的字串並按[開始下載], 它就會將筆順資料下載並儲存在預設的空間中(不含聲音的部份)。下次打開時就可以離線使用。其實可不可以離線使用這個問題,我在本篇的前言中就已寫了,不然,您應該自己測試就知道答案了,做中學是很重要的。
      第二個問題在我開發這個工具之前應該是沒有,現在有沒有則沒有研究。

      刪除
  9. 雄老師 您好,
    太好用了,謝謝您的分享。讚!

    回覆刪除
    回覆
    1. sharon chu 您好:
      很高興知道這個小工具對您有用,好用就給它用力的用。

      刪除
  10. 老師, 可以講多一點點, 你用什麼 FUNCTION 去寫這個APP

    回覆刪除
    回覆
    1. MIX 您好:
      這不是三言兩語就可以解決的,個人程式寫作習慣不好,有時自己要修理臭蟲都得想半天當初怎麼弄出來的 XD

      刪除
  11. 謝謝你的回覆!
    請容許我問多一個問題, 請問你是用html5 Canvas 嗎?

    回覆刪除
    回覆
    1. MIX 您好:
      程式主要是去抓教育部的筆順資料(XML 格式), 裡面帶有如何「畫」字的資訊, 再利用 HTML5 Canvas 繪圖指令把字輸出在畫面上。教育部現在也已實作出 HTML5 的版本了, 網址如下:
      http://stroke-order.learningweb.moe.edu.tw/mobiles/menu.rbt
      另外,前一陣子看到 g0v 有很多寶,您可以找一下,裡頭可能有您可以參考的哦~
      https://github.com/g0v

      刪除
    2. 非常詳細 謝謝老師!

      刪除
  12. 雄老師您好, 想請問輸入法也可以像教育部一樣用拼音輸入嗎? 國外的學生只會拼音. 您設計的顯示功能將要練習的生字一次排好, 很適合家長陪同學生/學生自行參考練習. 想介紹給學生, 但教育部的字輸入後直接進入筆順, 無法將字複製貼上到你的網址. 目前看起來還是只能先用教育部的筆順網. 有沒有可能增加這個選項呢? JiJi

    回覆刪除
  13. 雄老師您好,感謝您分享了這麼多很棒的教學工具。經由phcno1老師介紹得知你的筆順練習程式,準備在校內推廣給其他老師教學使用。但因google學網連線速度常常不是很順暢,不知是否可以將你的筆順程式放在我們校內的網站提供老師教學使用。
    澎湖縣中興國小教師高孝彰

    回覆刪除
    回覆
    1. 孝彰老師您好:
      這個筆練習程式有兩部份, 大家看得到的是 HTML5 寫的操作界面, 它會快取在瀏覽器中, 不會有速度的問題; 另一部份則是放在 server 端的程式, 主要是幫忙去擷取教育部筆順網中的筆順資料, 並回傳給 HTML5 的程式畫給使用者練習, server 端的部份應該是慢的主因, 但它是用 Google 的 Apps Script 寫的, 所以除非程式重寫, 不然, 這部份可能無法移到貴校網站中。
      誠如我文章中所提到的, 這個筆順程式有快取的機置, 也就是只要下載過的筆順資料會儲存在瀏覽器的資料庫中, 建議在教學應用前先讓裝置或電腦先「下載」要練習的生字, 第二次在開時, 除了無法儲存的語音檔以外, 其它的應該都可以即開即用, 這也是本程式的特色哦!

      刪除
  14. 感謝雄老師的說明,我不太清楚自己的想法是不是有正確傳達給老師,所以我先把我們的想法呈現在校網右側(http://www.chps.phc.edu.tw/),若有不妥我們馬上撤下,麻煩老師幫我們看一下。
    澎湖縣中興國小教師高孝彰

    回覆刪除
    回覆
    1. 孝彰老師您好:
      哈~ 我了解您的意思, 這樣做沒問題的。
      小缺點大概是: 如果我更新了程式, 貴校的就不會同步更新。另外如同前一次的分析, 整個程式的慢會是卡在由Google server 上的 Apps Script 去抓教育部字型資料的部份, 雖然 HTML5 程式已放在貴校了, Apps Script 的部份還是在 Google 的 server 中的。

      刪除
  15. 感謝老師,我們會隨時盯著你的網站,跟隨著你的腳步做更新。

    回覆刪除
  16. 感謝老師,我們會隨時盯著你的網站,跟隨著你的腳步做更新。

    回覆刪除
  17. 謝謝國雄老師。

    老師,我有一個問題想問您:
    是否這個方式衹能練習正體中文?而不能練習簡體中文?
    身爲老師,爲了學生的學習着想,不管什麽體,還是要練習。

    因爲我目前在美國教中文,可是學區用的是簡體中文。雖然我很“小心”的在推廣正題中文,可是衹是播種罷了。不敢太明目張膽的推廣正體中文。怕被學區、校長等釘,最後丟了工作。所以得很小心!

    回覆刪除
    回覆
    1. 吳老師您好:
      這個工具是抓取了教育部的筆順資料來使用, 所以教育部有提供筆順資料的字才能呈現出來, 目前教育部只提供了正體的常用字, 因此, 您如果有簡體中文字的需求, 可能要找別的工具試。

      刪除
  18. 老師您好,我是一名華語老師,這真的非常實用,對外國學生來說相當好。2016年六月我會到印尼培訓當地的華語老師,能否讓我在培訓時推薦您的這套軟體?非常謝謝您!

    回覆刪除
    回覆
    1. Lee 老師您好:
      很高興知道敝人的小小工具對您是有所助益的, 歡迎使用與分享。

      刪除
  19. 老師您好:
    最近在使用QR Code下載時發現 好像已經無法使用
    能請老師幫忙查一下原因嗎??

    回覆刪除
    回覆
    1. 您好:
      忘了從哪一版的 iOS 更新以後, 它的 WebViewer 的引擎應該和以前不一樣, QR Code 的功能已經壞掉很久了, 之前曾考慮將將功能由界面中拿掉的。

      刪除
  20. 顏國雄老師好,
    從2014年開始,我就是「國字注音筆順練習 」這個 APP 的忠實使用者...不管在教室裡還是放上Moodle及部落格,讓我的學生使用。同時也向許多僑校老師或同事推廣。大家對您寫的這個APP嘉惠海外老師,都很感謝。
    因為太好用來教國字書寫,所以這二年來,我一直非常依賴您分享給大家的「國字注音筆順練習 」。
    但是,最近收到Google 來信說道:「Google Drive的hosting功能將於8月31日停止使用,說明凡是/host/D[id]的都會被取消功能」!不知道屆時,「國字注音筆順練習」會不會無法操作?開學在即,實在很擔心!
    不知道能不能懇請顏老師,協助我們,看有沒有辦法繼續讓這個APP可以使用?
    感恩,謝謝。
    敬祝教安
    楊曉青

    回覆刪除
  21. 謝謝顏老師,已經看到連結更新了!真是太感謝您!

    回覆刪除
  22. 作者您好:
    想請教您是否願意釋出筆順資料庫(廣義)
    或是提供製作大略方向呢?

    小弟我的用途是想試著製作一份生字詞產生器,
    用於特殊教育方面的字詞練習
    市面上生字簿主要用於小教
    對於特殊需求並沒有很合用...
    無法做細部調整~
    (非商業用途)

    小弟信箱:
    grayfree[at]grayfree.tw

    再次感謝您~
    恭祝 平安喜樂

    (不好意思,按到回覆鈕沒在本文中留言...><)

    回覆刪除
    回覆
    1. grayfree 您好:
      您要的答案, 其實在前面曾回覆過某位網友, 您可以參考。
      程式所有的筆順資料庫都是使用者在操作時才去擷取教育部網站中的, 並不屬於個人哦! 關於程式的部份, 有興趣的話, 倒是建議您去 g0v 找他們製作的「萌典」, 在 GiHub 中有 open source。哈~ 我的實在很不專業, 沒臉公開啦~不過, 因為我的是用 HTML5 寫的, 想挖也是看得到的 XDDD

      刪除
    2. 感謝您提供資訊以供參考^^
      您太謙虛了XDD
      十分感謝您~~ =D

      刪除
  23. 雄老師 您好 您真的是教育界之光,期待也能寫英文大小寫字。(我家5歲小小孩每天寫得很起勁)

    回覆刪除
    回覆
    1. 您好:
      您過譽了,這支程式能運作,靠的是教育部有建置筆順網,我只是擷取筆順資料庫來重現而已。哈~所以只能支援注音符號和常用的國字,那些資料非我能力及財力所能建置的。
      聽到小朋友寫得很起勁,好高興,謝謝您的回饋。英文字母的練習應該有很多可以用了,您可以上網找找。推薦一個網站給您參考:
      http://www.starfall.com/

      刪除

 
© 2009. Design by Pocket