2022年2月21日 星期一

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

2022年2月21日 星期一

我的「雄 : HTML5 筆順練習」工具自 2012 年二月起,有 2012 陽春版、2013 第二版,及本文要介紹的第三版(2019版)。有關HTML5筆順練習工具的起源,可以參考文末相關連結中有關第二版的舊文。除了最陽春的第一版外,另兩個版本都可以在 HTML5 FUN 的網站中使用:

HTML5 FUN 筆順練習第三版

不過,目前的發展重心都在本篇所要介紹的第三版。舊版基本上已不再維護。

功能特色

中文識字除了書寫的筆順以外,部件也是提升識字量的好幫手。筆順練習第三版(2019版) 與之前的版本相比,最大的特色是加上了「部件」的功能。

與以前的版本一樣,筆順練習第三版也是使用「中華民國教育部『國字標準字體筆順學習網』」的筆順資料;而基本的部件資料則是由我建立的資料庫中下載,使用者可以再行自訂。

【圖1】筆順練習第三版「多字模式」

下面來簡單介紹一下筆順練習第三版的功能:

  • 跨平臺:在電腦或行動載具的網頁瀏覽器中執行。能下載並練習「中華民國教育部『國字標準字體筆順學習網』」中的國字注音筆順。
  • 支援離線使用:在行動載具中將筆順練習工具新增至「主畫面」後,下載過的筆順資料可以在網路離線時使用。
  • 筆順練習時可自訂是否要提示下一個筆畫、錯誤之處、筆順序號及畫筆粗細。
  • 可自訂部件:使用筆刷工具在字的筆畫上填色,同樣顏色的筆畫就能結合成部件,每個字最多可以設定八個部件;可以設定三組不同的部件。
  • 提供匯出與匯入的功能:可以匯出指定字的筆順資料及部件設定,並儲存成檔案;之後可利用匯入檔案的功能,能將自己或別人匯出過的筆順、部件設定檔重新載入使用,並自行選取要出現在選單上的字。
  • 支援由網址中設定要練習的字及設定部件;並提供分享網址輸出的功能。
  • 筆順練習的結果可以匯出、匯入與播放動畫。(2022.02.28.起加入)
  • 筆順練習時,可以啟用左手模式,以左手書寫。(2022.03.19. 起加入)
  • 其它功能:部件拼圖、全字筆畫及教育部教育百科詞條連結。

操作說明

筆順練習第三版有「多字模式」,和練習時的「單字模式」兩種操作模式。兩種模式均可以搭配畫面左下角「塗鴉工具箱」中的畫筆工具進行解說、教學;或使用部件填色工具來設定國字的部件。

【圖2】塗鴉工具列

而在筆順練習時,可以按畫面右下角「設定」鈕,打開設定列,依需求來控制練習時的功能選項。

【圖3】選項設定列

多字模式

筆順練習第三版載入指定的國字(注音)筆順資料以後,會如【圖1】所示,進入「多字模式」。所有的字依序呈現在畫面中,並依部件設定以不同的顏色來顯示部件。

「多字模式」中,如果點了某個字的方塊,就會進入「單字模式」。

「多字模式」除了當選單,此時也可以拖曳部件,甚至白底的方塊,整個畫面就像一塊黑板一樣,可以進行部件教學。

【圖4】「多字模式下」拖曳部件

有關在「多字模式」下的的部件及字塊拖曳操作及示範影片,請參考這一篇:

    單字「練習模式」

    在「多字模式」中,如果點一下國字方塊,就可以進入該字的「單字模式」。

    【圖5】單字模式

    在「單字模式」的國字方塊的左側多了一些功能按鈕:

    • 【筆順示範】播放國字書寫的筆順動畫。可以利用畫面右下方的「設定」鈕來控制動畫的示範速度。
    • 【筆順練習】按一下,即可開始練習書寫該字。
      • 錯誤提醒:練習的筆畫如果有錯誤,會出現重點提示,
      • 徽章回饋:全字完成後,就可以得到一個徽章。
      • 自訂選項:練習時我們可以利用畫面右下方的「設定」鈕來控制一些選項的啟用與關閉,如語音播放、提示下一筆順、顯示提示點、顯示筆畫序號及畫筆的粗細。
    • 【部件拆解】按一下後,可以進行以下的動作:
      • 拖曳部件:可以自由地拖曳部件至想放的位罝。
      • 更換部件組:按一下右側的三個國字方塊,就可以在三個不同的部件設定中切換。
      • 自訂部件:按一下畫面左下角「塗鴉工具箱」的按鈕,即可利用部件填色工具,在筆順上填上所屬部件的顏色。
      • 儲存部件為圖片:將部件拖曳,並讓游標移動至「下載的圖示」上後放開,即可將部件儲存為圖片。
    • 【部件拼圖】按一下後,任務就是將已經打散的部件,重新放回國字方塊中拼好。在國字方塊左下角有個「按順序完成」的選項開關,它決定了拼字時,是否要按照順序放。
    • 【重新選字】按一下後,即可回到「多字模式」,重新選別的國字。(也可以按右上角的叉叉)。

    在「單字模式」的國字方塊下方還有一些選項按鈕:

    • 輪廓線
    • 十字線
    • 字典
    • 全字筆畫

    上面的功能選項,按按看就可以知道做什麼,所以不再贅述囉!

    塗鴉與自訂部件

    按了筆順練習畫面左下角的按鈕,就可以打開或是關閉塗鴉工具列。塗鴉工具列有有兩大功能:

    • 塗鴉工具:包括畫筆、橡皮擦及清除全部。
    • 部件工具:包括色盤、快速填色及部件分享。

    【圖5】塗鴉工具列

    塗塗寫寫

    打開塗鴉工具列後,預設是啟用「調色盤」圖示的部件填色工具,如果想要塗塗寫寫,就按一下它左邊的「畫筆」圖示的塗鴉工具。接著就可以點一下色盤上的色塊來換顏色,或是利用色盤右側的「拉桿」來調整畫筆粗細。

    如果想要擦掉某些線條,就點選橡皮擦工具,然後對準塗鴉區中要擦拭的線條按一下即可刪除。

    想要把所有塗鴉的內容一次擦掉,就按塗鴉工具列中,最左側的「空白文件」圖示。

    部件設定

    在筆順練習第三版中,當我們打開塗鴉工具列後,預設是啟用「調色盤」圖示的部件著色工具,如果用完塗鴉工具,按一下「調色盤」圖示,就可以更換。

    【圖6】啟動部件著色模式

    在「部件著色模式」中,只要在要塗色的筆畫上按一下,該筆畫就會被上色。同顏色的筆畫會被結合成一個部件;調色盤中共有八個顏色,也就是一個字最多可以拆解為八個部件(應該是夠用了吧?)。

    為了能比較快將筆畫上色,在「部件著色模式」下,調色盤右側有一個「剪刀圖示」的「快速填色」選項。當這個選項啟用後,點到的筆畫開始,一直到最後一筆畫,都會被填上一樣的顏色。

    另外,在「部件著色模式」時,最右邊還有一個分享的圖示,按下去以後,就可以產生一個帶有字及部件設定的網址,利用這個網址可以保存自訂的部件設定,也能分享給學生使用。

    有關部件的設定方法及部件分享的方法,可以參考這一篇:

    如果想將部件下載為圖片檔案,可以參考這一篇:

    筆順及部件資料的匯出與匯入

    HTML5 FUN 的筆順練第三版,下載完教育部網站的筆順資料,及我的部件設定資料以後,會將它們合併,並暫存在所使用的電腦或是載具中。如果資料沒被清除掉,下次使用同樣的字時,就不用透過網路,直接載入暫存的那一份。這些資料也可以自行匯出成檔案,之後再以「從檔案匯入」的方式來離線載入。這個方法應用在網路較不順暢,甚至無網路的環境,還滿好用的。另外,如果想要儲存自訂的部件,也是不錯的方法。

    如何將筆順及部件資料匯出與匯入,可以參考這一篇:

    筆順練習記錄的匯出、匯入與播放

    筆順練習第三版中,學生筆順練習時,如果完成該字,在練習區的手稿可以匯出成一個檔案,上傳給老師以後,老師可以使用自己的電腦或是載具,將學生的筆順練習記錄匯入,並觀看習寫的記錄。詳細的說明與示範影片,可以參考這一篇:

    精華文章清單

    版權聲明

    相關連結

    更新記錄

    • 2023.10.20 v.2.4F 匯出習寫結果新增可將習寫筆跡匯出為 PNG 圖片的功能。
    • 2023.08.30 v.2.4D 修正注音筆順練習沒抓到語音檔路徑的問題,將教育部原有的 .WAV 音檔改存成 .mp3 音檔,存放於 GitHub 的空間中,播放時會先放一次女聲,隔兩秒,再播放男聲。
    • 2023.08.28 v.24C 在輸入要練習的字對話框左下角,加一個「生字」搜尋的圖示,按下去以後,會跳到江明勳老師的網誌「嘰哩呱啦ACE (2代) : 第1918回-師師有法寶-4-雄-筆順練習-南一-康軒-翰林-國小國語- QR Code 大合集」。
    • 2023.08.17 v.2.4B 在分享的 QRCode 右下角加一個下載的圖示,按下後可以下載 QRCode,按一下 QRCode 可以隱藏 QRCode。
    • 2023.07.26 v.2.4A  修正分享網址之「不含部件設定」鈕在 iOS 中切換後,並沒有執行將網址複製到剪貼簿的問題(註:剪貼簿的操作命令必須放在 touchend 中才能執行)。
    • 2023.05.20 v.2.4z 查詢字的音檔路徑及部件設定改由檔案中查詢,無法工作才到 Google Drive 中查試算表資料,速度提升很多。
    • 2023.05.09 v.24y 完成練習後徽章數即可累加一個,可顯示多個徽章在多字模式,單字模式練習完成後,則以數字呈現個數。
    • 2023.05.03 v.24x 在分享部件的對話框中新增一個選項,可以控制只產生生字而不帶部件設定的網址,以縮短網址,避免像學習吧的「連結」欄位不能輸入太長字串的問題。
    • 2023.04.07 v.24w 解決因為本機快取中的筆順資料不完整,程式未檢查並重新下載或是由練習清單中刪除,以致後續程序中斷而不能使用的問題。
    • 2023.03.02 v.2.4v 解決未下載到部件設定,在自訂部件後,結束儲存時會中斷程式的問題。
    • 2022.12.09 v.2.4u 微調提示點的顯示,畫過圈的地方不會重覆畫,保持透明度。
    • 2022.11.30 v.24t 分享網址的對話框中加一個顯示網址 QRCode 的按鈕。
    • 2022.11.10 v.2.4s 將分享鈕分享的網址參數先以 encodeURI 編碼,以免張貼網址時有誤。
    • 2022.10.03 v.2.4r 由網址帶入要練習的字串,可能因為又被編碼過,導致進入程式後,解碼失敗,現在會先檢查 % 是否被編碼為 %25,如果是,就先以 unescape 解碼後,再繼續後面的程序。
    • 2022.06.24 v.2.4q 部件操作的畫面,讓按右鍵會跳出的選單不出現。
    • 2022.06.13 v.2.4p 解決部件下載為圖片時,因為畫面沒清除完全,造成下載所有部份為圖片的結果是累加的,而不是一個部件一個檔案。
    • 2022.03.20 v.2.4o 習寫偵錯與提示優化;習寫記錄重播時,在下方顯示花費的時間。
    • 2022.03.20 v.2.4n 習寫記錄會將錯的也記錄下來,播放時,錯的軌跡使用紅色,對的使用黑色來重現,方便老師觀察需加強之處。
    • 2022.03.19 v.24m 修正在按了「左手模式」的按鈕後,在習寫區留下多餘直線的問題。
    • 2022.03.19 v.24k 在筆順練習加入「左手模式」,可以正寫或反寫練習(2022.02.28 呂北老師建議)。
    • 2022.03.13 v.24j 修正筆順習寫時,部份檢查超出筆畫的問題,讓練習時橫撇可以更容易過關。
    • 2022.02.28 v.2.4i 加入筆順習寫結果的匯出、匯入與播放的功能。
    • 2022.02.25 v.2.4h 修正在多字模式中,練習徽章未加上去;修正在 v2.4 後,不支援Path2D的瀏覽器中,並未抓到處理的字是哪一個,很多功能其實未運作。
    • 2022.02.20 v.2.4g 修正部件選擇鈕在重新輸入要下載的字時未重設為第一個;修正iOS無法將分享網址複製到剪貼簿的問題。
    • 2022.02.19 v.2.4f 下載部件圖片只偵測了滑鼠,行動載具會誤判,改成如果行動載具就只能下載單一部件。
    • 2022.02.19 v.2.4e 修正因為加了下載部件的按鈕而造成展示筆順動畫錯位。
    • 2022.02.19 v.2.4d 在單字部件模式下,將部件拖曳至左下角的下載圖示上,可以下載所有部件。
    • 2022.01.12 v.2.4c 在拼圖遊中,禁用塗鴉工具,以免試圖更新部件,造成錯誤。
    • 2022.01.06 v.2.4b 拼圖遊戲加入一個是否按部件順序才算完成的選項。
    • 2021.12.25 v.2.4a 部件分解如果只有一個部件的,改以底線符號代替字串。
    • 2021.12.25 v.2.4  支援最多三組部件設定。
    • 2021.12.22 v.2.3f 用 coloring for colorblindness 調整了色盤。
    • 2021.12.21 v.2.3e Object.values 最佳化後有問題,改用 Object.['values']。
    • 2021.12.21 v.2.3d 塗鴉工具箱加入一個快速填色的圖示,可將點選的筆畫到最後一畫,全部填同樣的顏色。
    • 2021.12.18 v.2.3c 部件拼圖的位置調整。
    • 2021.12.17 v.2.3b 部件拼圖亂數取位置的程序重寫。
    • 2021.12.17 v2.3a 修正由 g0v 下載的程序有個參數用成 stroke. 的,以致程序中斷。
    • 2021.12.17 v2.3 修正 !enablePath2D 建立部件的 partsPath ( new Path2D() ) 忘了先判斷是否有支援,並幫忙建立替代的資料。
    • 2021.12.17 v2.2 調整預設的部件塗色用色盤,修正清除完 localStorage , 未把 SoundAndPartsDataFromGDive 清空,無法重新下載部件和聲音設定。
    • 2021.12.16 v2.1 修正畫筆塗鴉模式未將部件圖層禁用的問題。
    • 2021.12.16 v2.0 修正部件設定筆畫序號未檢查是否異常的問題。
    • 2021.12.15 修正未設定部件的筆畫會無法著色的問題。
    • 2021.12.14 將吃資源的部件功能轉換為兩個 CanvasContext 就能運作的方式。
    • 2021.12.07 .h 在塗鴨工具的部件設定時,右下角多一個產生帶部件連結的分享按鈕;解決下載文字輸入對話框的文字全選變數命名和其它的衝突的問題。
    • 2021.12.04 .g 修正繪圖區清除的 clearCanvasContext function 名稱一樣,造成嚴重錯誤;在文字輸入區右下角加一個「全選」的小圖示。
    • 2021.12.04 .f 塗鴨工具的繪圖功能增強,橡皮擦改以線為單位來擦拭。
    • 2021.12.01 加入顯示全字筆順的功能。
    • 2021.11.29 調整練習偵錯的靈敏度,加上了最大筆寬的 30%~60%;加入裝置旋轉偵測的功能,讓使用者決定是否要重新載入程式,以調整版面配置。
    • 2021.11.27 筆順練習的方塊右上角加一個叉叉按鈕,功能與「重新選字」一樣(結束練習,進入選單);在等待輸入文字時,讓左側塗鴨工具不能出現,以免清掉了對話框。
    • 2021.11.26 解決匯入筆順如果遇到 words 為空的時候會失敗。
    • 2021.11.25 修改筆順資料載入的方式:先以批次的方式由 GDrive 中下載音檔路徑及部件設定,再直接由教育部的網站抓筆順資料。
    • 2019.03.26 初稿


    12 則留言:

    1. 很好用,值得推廣,請問是否要逐一造出?大約包含多少字?

      回覆刪除
      回覆
      1. 您好:
        不太理解您講的「逐一造出」指的是什麼?
        在本文「版權聲明」中有寫到「本程式所使用的筆順資料來自:
        中華民國教育部『國字標準字體筆順學習網』」。國字的筆順資料並不是我製作的哦~

        刪除
    2. 老師您好~
      使用部件拆解功能時,完成該字各部件的上色後,無法拖拉該字至下載區,但當我使用左側「1」「2」「3」中的第「1」順序的字,是可以拖拉下載,想請問這個問題我可以如何解決,感謝

      回覆刪除
      回覆
      1. 您好:
        1.不知道您是使用哪一種瀏覽器?

        2.部件設定(上色)好,要先按一下畫面左下角的「塗鴉工具」圖示,關閉下方的工具列,不然,它仍在設定狀況,只能上色或塗鴉,無法拖曳部件。

        刪除
    3. 老師好,用平板掃描QRcode後,按開始下載,就一直停留在下載生字筆順的畫面(停留在同一個字),網路沒有問題,平板也更新與重新開機,依然無法解決,請問老師這應該怎麼處理呢?

      回覆刪除
      回覆
      1. 您好,不知道所謂的 QRcode 指的是什麼? 您可以將 QRcode 寄給我試試 (gmail: gsyan888)。
        卡住可以試試將輸入生字的輸入區中的字通通刪掉(清空)後,按「開始下載」的按鈕,讓它清除快取區中的筆順資料,大部份都是用這一招就能解決問題。

        刪除
    4. 請問您所選擇的筆劃可否一次下載呢? 我有發現下載的是.json檔案,似乎不包含圖片,只能用您的系統匯入,可否一次將一課( 如:輸入的16個字)的筆劃圖檔,一起下載呢?

      回覆刪除
      回覆
      1. 您好:
        .json 是是供一次匯入要練習的字使用的,它是教育部筆順資料加上部件設定而成的「設定」,主要是供一次匯入要練習的字而設計,並不是用來下載圖片的哦!
        有需要下載部件的圖片,要在「部件拆解」中,才能下載該字的部件。如果您的目的是要下載圖片,應該不是本工具設計的主要標的。

        刪除
    5. 若能下載,我們教學時才能教孩子類化部件
      漢字古今資料庫 xiaoxue.iis.sinica.edu.tw

      回覆刪除
    6. 像這樣,老師們備課才能更快速些!
      臼兒倪舀滔......圖檔一起下來 不然還是零散的學習的多
      https://gsyan888.github.io/html5_fun/html5_stroke_parts/html5_stroke_parts.html

      回覆刪除
      回覆
      1. 您好,
        工具怎麼應用還是要看個人,如同 9/30 的回覆一樣,再次強調「如果您的目的是要下載圖片,應該不是本工具設計的主要標的。」

        刪除
    7. 將相關圖片一次下載,再一次丟到myviewboard上讓孩子們練習,比較能看出基本字代字的練習效果

      回覆刪除

     
    雄::gsyan © 2009. Design by Pocket