HTML5 筆順練習部件更新為 CNS 的設定

HTML5 FUN 筆順練習的部件是讀取我於 2019 年手動建置的設定，再將字的各筆畫所屬部件，以不同的顏色呈現出來。當初在分割字的部件，純依個人上課會用到的來設定，剛開始很認真的分部件，後來因為有六千多個字要設定，手實在太酸了，只能大概的切分字的部件。

前幾天注意到數位發展部的「全字庫」（https://www.cns11643.gov.tw/）中，其實也有定義各字的部件，而且可以下載目前所有字的部件設定匯出的檔案（在全字庫的「技術支援」「全字庫授權」的頁面中有連結）。它是以 CNS 的代碼來當關鍵欄位查詢，不過，要用 Unicode 來查的話，對照表建立一下，也不是難事。

於是這幾天，啟動了一個 HTML5 FUN 筆順練習部件設定的更新計畫，目前給自己定的進度是每天至少將五百個字的部件設定，對照 CNS 的部件設定，更新到 HTML5 FUN 筆順練習中。哈！總共 6063 個國字，目前已經完成 2700 個字了，手還滿酸的！(註:  2024/05/23 全部完成)

我寫了一個小工具，讓它能呈現現在 HTML5 FUN 的部件、筆順序號，跟 CNS 的部件設定：

[圖1] 部件瀏覽工具

[圖2] 已經修正為 CNS 部件的字

多色的字是目前 HTML5 FUN 筆順練習的部件，而下方黑色的，則是 CNS 定定義的部件。找到有不同的（其實大部份都要改），就將部件的筆順序號重新輸入到設定檔中。

在這個過程中，目前發現教育部筆順網的筆順資料有臭蟲，順便記錄一下：

• 「懂」的筆畫是 16 畫，但是筆順資料卻是 32 筆；所以無論在教育部的筆順練習，或是 HTML5 FUN 的筆順練習，都要全字寫完一次，還要再寫一次，才能得到答對的回饋。
• 「榻」的筆畫是 14 畫，但是筆順資料卻是 15 筆，最後一畫多了一筆，最後一筆畫要再寫一次才能過關。
• 「贐」的第13畫和第12畫的筆順順序顛倒。
• 「瞞」16畫，但多了第17筆資料，第15畫要再重寫一次才能過關。
• 「慰」15畫，但卻有18筆資料，「心」部前三畫要重寫一次，才能過關。

而全字庫的部件設定也有部份問題：

• 慮(多一個心)  372,301,257
• 搽(多一個一) 220,204,45,186
• 擄(少一個田) 220,372,301,83
• 晝(少一個一) 411,209,1
• 礬(多一個石) 185,54,54,185,105,291
• 籲(少一個一) 391,47,1,119,119,119,313,1,5,434
• 颱(多一個石) 60,1,375,88,119
• 玁(少一個厂) 194,119,119,22,448,221
• 瞼(調整順序) 298,45,1,119,119,47,47
• 龢(少一個口) 47,1,119,119,119,313,325
• 樂(調整順序) 331,169,169,186

在拆解部件的過程中，又想起之前遇到的一個問題，部件的筆畫，不見得是筆順的順序，如果在練習筆順時，標上部件的顏色，是否反而會誤導學生，增加筆順習寫時的困擾？或許應該要再修改一下部件顏色標註的時機。

相關文章

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

• 雄:HTML5 FUN 精選集