HTML5 FUN 筆順部件及 CNS 部件校正

最近想製作國字的筆畫序資料庫，基於 2024年五月已經把 HTML5 FUN 的部件改使用 CNS 的部件定義，所以先幫 CNS 517個部件一個個建立了完整的筆順序。原本的計畫是接下來就可以輕鬆用 517 個部件的基礎，推算出任何字的筆順序；果然是想得太簡單了，國字有很多「例外」啊！參考教育部的《常用國字標準字體筆順手冊》：

• https://language.moe.gov.tw/001/Upload/files/SITE_CONTENT/M0001/BISHUEN/c8.htm

裡面有筆順基本法則，以「國」這個字來說，它的部件是「囗戈口一」，第一個部件「囗」最後一筆的橫畫，要留在其它筆畫寫完才能加上；「國」算單純的，像「鄙」，到底什麼時候要加上橫畫，得好好的計算與判斷了。在「挖掘」的過程中，發現 HTML5 FUN 筆順練習的部件設定有諸多錯誤，而 CNS 的部件設定也有很多沒有按照《常用國字標準字體筆順手冊》中的原則來設定，修正的記錄附在本文的後段。此外，新發現教育部筆順網有兩個字寫正確了反而會過不了關的：

• 「寓」12畫，卻有13筆資料，第6畫要重寫一次才能過關。
• 「製」14畫，卻有15筆資料，最後面多了一筆第13畫的。

筆順網其它可能會過不了關的字，請參考「雄:教育部筆順學習網這些字的過關秘訣」這一則舊文中的說明。

▋ 整合 HTML5 FUN 部件設定與 CNS 部件筆順序

HTML5 FUN 部件設定及對應的CNS部件設定有誤的地方修正好了，乾脆偷懶，將對應的主客互換，先產生 CNS 部件的筆順序，再以部件對應到 HTML5 FUN 的筆畫序，這樣子就可以知道部件中每一個筆畫的名稱，重新按筆畫序列出，完全不用複雜的判斷就是我要的結果了。但是由產生出的結果交互比對，找出了更多的錯誤 XDDD

經過將近一週的努力，至少教育部筆順網的六千多個字，都能有完整的筆順序了。花了大半天，把國小國語課本三個版本中最近兩學期使用到的生字(二千九百多個字)，以一個小工具，人工檢查的方式再次確認，並以程式調整了以下的字：

• 寫法與部件有異：竊(vs禸)、虜(vs毌)、亟極殛(筆畫要多1)、歿沒別捌(vs方)。
• 筆順與部件有異：升昇陞呏、臧藏臟贓。
• 一字不二捺，捺改頓點或長頓點：潑返閣額雒擱篷縫蓬逢逄皴逡蹩釐犛邀遨瓤還遠退腿褪螁隧毅豬櫫瀦燹豢遯逐遂燧遽邃劇裹歉。

筆順校對與測試小工具截圖

目前校對部件、筆順清單已大致完成，也測試了念出筆順的功能，測試的過程還解決了一個在 iOS / Android 播放指定區段聲音一直存在的臭蟲，一個星期的研究沒有白費。接下來應該可以先弄一個「國字基本筆畫練習」的小工具測試一下資料庫與語音的功能。

▋  CNS 部件調整記錄

依據教育部《常用國字標準字體筆順手冊》筆順基本法則，調整 CNS 部件順序

✅ 「凡字的上半或下方，左右包中，且兩邊相稱或相同的結構，通常先寫中間，再寫左右。」

學 54,54,395,72,162

歟 36,4,395,1,49,62,45

爨 41,1,21,395,72,185,185,105,250

礬 54,54,185,185,105,291

攀 54,54,185,185,105,218

樊 54,54,185,185,106

燮 442,250,250,84

盥 276,394,305

與 36,4,395,1,49

舉 36,4,395,1,48,97

嶼 121,36,4,395,1,49

興 41,1,119,395,1,49

覺 54,54,395,72,432

攪 220,54,54,395,72,432

譽 36,4,395,1,48,442

釁 41,1,21,395,72,425,48,81

輿 419,395,1,49

櫸 185,36,4,395,1,48,97

鬱 384,185,185,72,399,80,25,128

懋 353,185,185,257

爍 250,331,169,169,186

兜 331,65,73,55

嬴 67,15,119,155,382,137

瀛 277,67,15,119,155,382,137

羸 67,15,119,406,382,137

贏 67,15,119,434,382,137 (除順序,原「238『月』」修正為 382)

✅ 「凡以筆順基本原則-廴部筆形、筆順基本原則-辶部筆形為偏旁結體之字，通常筆順基本原則-廴部筆形、筆順基本原則-辶部筆形最後寫。」

辶(253)廴(157)後寫：

迂 96,253

迆 154,253

迅 13,20,253

迄 42,8,253

巡 170,253

迎 65,75,253

返 22,84,253

近 232,253

廷 5,99,157

✅ 「卂」相關的字

迅 20,13,253 (第一筆在十20的豎畫, 調整為 20,13)

汛 277,20,13

煢 250,250,72,20,13

✅ 「鄉」相關的字部件由左而右

響 167,6,413,166,339,209

饗 167,6,413,166,483

薌 204,167,6,413,166

✅ 沱跎陀 「它」的下方應該是 27

沱 277,139,27

跎 119,208,139,27

陀 166,139,27

些 208,24,19 「此」右為 24, 「些」應相同

✅ 統一「可」的組合全部改用「32,119」，以下修正：

呵 119,32,119

坷 100,32,119

✅ 其它

鄭 70,425,106,166

羋 3,205,95

脊 252,45,382

瘠 338,252,45,382

蹐 119,208,252,45,382

鶺 252,47,382,438,251

灩 277,121,230,230,1,119,141,99,88,305 (修正第二碼為山121)

挫 220,47,47,99

丫 70,3

忍 81,6,257

僉 45,1,119,119,47,47

簽 391,45,1,119,119,47,47

儉 46,45,1,119,119,47,47

劍 47,1,119,119,47,47,82

撿 220,45,1,119,119,47,47

斂 47,1,119,119,47,47,221

檢 185,45,1,119,119,47,47

殮 195,45,1,119,119,47,47

臉 382,45,1,119,119,47,47

險 166,45,1,119,119,47,47

驗 489,45,1,119,119,47,47

鹼 38,120,399,45,1,119,119,47,47

瀲 277,47,1,119,119,47,47,221

銼 470,47,47,99

函 17,278,80

涵 277,17,278,80

菡 204,17,278,80

緻 417,369,131

鯈 46,3,221,63,301,251

斌 248,1,114,208

黹 314,49,123,49

揀 220,423,70 (這個字的柬和其它的順序不同, 修正為423,70)

滅 277,295,1,250 (火改用 250 末筆才是長頓點)

醫 28,42,106,58,85,425 又應該要用長頓點第二畫的 85，而不是 84。

饜 22,209,382,193,483 一字不二捺, 犬改用 193 的。

✅ 部件與寫法有異者

虜 372, 273,83  原第2部件為 213 應該是錯的, 應為273「毌」ㄍㄨㄢˋ (4畫),但寫法不同「豎,橫折,豎,橫,橫」(5畫)。參「異體字字典-虜」。

竊 竊的右下其實為「禸」，只是寫法有異，最後一個部件像 厶88 (2畫)，但寫法應為3畫「豎,挑,點」。參「異體字字典-竊」。

「臧藏臟贓」應修正以戈優先，然後 266 爿 的筆順需調整為豎撇,豎橫折,橫,豎撇。

▋ 相關連結

• 雄:HTML5 : 筆順練習第三版(2019版)
• 雄:HTML5 筆順練習部件更新為 CNS 的設定
• 雄:教育部筆順學習網這些字的過關秘訣

閱讀全文

你變我也變:解析雲端硬碟圖片縮圖網址更新

有人反應無法用「以雲端硬碟資料夾的圖片製作注音高手」影片中的方法出題；研究了半天，終於抓到問題點，看起來是 Google Drive 共用資料夾頁面的內容有異動，導致用來找出圖片縮圖網址的程序失效了。這麼一來，就影響了以下幾篇中的小工具：

• 雄:擷取 Google 雲端硬碟圖片縮圖網址
• 雄:以雲端硬碟資料夾的圖片製作注音高手
• 雄:打造自己的遊戲 : HTML5 FUN 烘焙機大彙整
• 雄:Tools : 解析出雲端硬碟資料夾中所有圖片或音檔的網址

哈！有問題才有好玩的。「你變我也變」，只要找到關鍵的片段，去掉工程師故意加入的「雜質」，再加上看似被遺漏的符號，就能以 JSON.parse 將變數還原，最後擷取要的欄位，問題就可以解決了。簡單記錄幾個關鍵：

• 有用的資訊: data-p
• 雜質: %.@.
• 需還原: "
• 最前面少了一個 [

當初花了不少時間研究還是有差，現在愈來愈會拆彈了。

總之，壞掉的地方修好了，如果是使用試算表的，只要重新建立範例試算表的副本，就又能開心使用了。

閱讀全文

Life:百香果醃蘿蔔

前幾天買了條白蘿蔔煮排骨湯，看到家裡的百香果，就留了一點中段的，試做百香果醃蘿蔔，第一次做，但想馬上嘗鮮，沒放過夜就吃光光了，想當然爾，一定不夠入味，所以昨天買菜又買了一條專做醃蘿蔔的。

簡單的流程記錄一下：

• 蘿蔔削皮洗淨後切薄片。
• 加入鹽巴拌勻後靜置15分鐘脫水殺青。
• 擠水後再用白開水沖洗一次。
• 加入少許的冰糖及百香果汁。
• 冰箱靜置一晚。

哈！看起來怎麼那麼白～～但是有百香果就給讚！冰冰涼涼又香氣撲鼻，中午吃鍋貼，這百香果醃蘿蔔解膩又爽口，真是絕配。

閱讀全文

特教教材資料庫中的「創意ㄅㄆㄇ整合版」

昨天偶然看到一則貼文中，有人想以圖找學注音的軟體；對那個畫面有一點印象，曾經玩過，也下載過，趕緊到自己的下載區找找，證驗一下自己的記憶。年初在研究有關注音教學的相關工具時，特別建立了一個注音專用的資料夾，果然提升了搜尋的效率，一下子就找到該截圖是楊妮曼老師所分享的「拼音對對碰」。不過民國九十幾年時的 Flash 程式，在網路中找到的連結，應該大多失效了。用楊老師的另一個作品名稱「創意ㄅㄆㄇ」，可能會好找一些。後來才發現，其實楊老師的「創意ㄅㄆㄇ」+「拼音對對碰」，在教育部「優質特教發展網絡系統暨教學支援平台」的特教教材資料庫中有一個「創意ㄅㄆㄇ整合版」，網址如下：

• https://sencir.spc.ntnu.edu.tw/GoWeb/include/index.php?Page=6-5&news03=672

打開後會有說明及檔案下載的連結。檔案是 RAR 的壓縮檔，解壓縮以後，裡面的「bpm.exe」可以在 Windows 中打開來玩。

▋ 行動載具可玩的版本

哭哭～在 MacOS / Linux 還有模擬器可以執行 Windows 的 .exe，這樣子不就不能在行動載具上玩了？！

沒關係，試了一下，由 bpm.exe 中解離出 .swf 就可以利用 Ruffle 在網頁瀏覽器中載入，按底下的紅色按鈕，就可以立即啟動楊妮曼老師所分享的「創意ㄅㄆㄇ整合版」，電腦或是平板都能玩：

註：Ruffle 載入的和在本機直接玩相比，字型會有所不同，瀏覽器版中使用的是芫荽字型，注音符號的調號會稍小、位置稍偏移。

▋ 版權聲明

• 「創意ㄅㄆㄇ整合版」下載自教育部「優質特教發展網絡系統暨教學支援平台」，為楊妮曼老師的作品。

▋ 相關連結

• 雄:Flash : SWF 遊戲啟動器

閱讀全文

擷取 Google 雲端硬碟圖片縮圖網址

製作網頁遊戲時，可以使用放在 Google 雲端硬碟中的圖片嗎？一般來說，在瀏覽器中會因為 CORS 的跨域讀取限制，無法直接應用 Google 雲端硬碟的圖片在網頁遊戲裡，但如果是雲端硬碟圖片的縮圖，則不會受限制。所以如何取得圖片縮圖的網址就是關鍵。

▋ 擷取 Google 雲端硬碟圖片縮圖

這個小工具可以解析出已共用為「知道連結的任何人」 Google 雲端硬碟「資料夾」中，所有圖片的縮圖網址，大小為 640x480，雖然解析度不高，但應用於一般的遊戲中的插圖，算還不錯。

▋ 使用方法

程式會在已公開共用的雲端硬碟資料夾頁面中，找出所有圖片的清單，解析出檔名及其縮圖的網址，能輸出「主檔名」和「圖片網址」兩個欄位，欄位分隔符號使用跳格的符號，所以複製輸出結果後，可以直接貼到試算表中使用。操作程序如下：

• ✅ 在 Google 雲端硬碟建立資料夾。
• ✅ 設定共用為「知道連結的任何人」「檢視」。
• ✅ 將要使用的圖片上載到雲端硬碟資料夾中。
• ✅ 確認圖片的檔名(如果要輸出檔名為題目欄位)。
• ✅ 複製共用的連結。
• ✅ 在本文的工具中貼上連結，按 [開始解析] 鈕。

如果順利，最後可以按 [複製到剪貼簿] 鈕，將資料複製後應用。

▋ 開始使用

目標：解析雲端硬碟「資料夾」中圖片的縮圖網址

共用資料夾網址 (必須設為「知道連結的任何人」可以檢視)：

主檔名   圖片網址   MP3音檔網址   MP4影片網址

OK

 

複製到剪貼簿的資料可以直接貼到試算表中，會自動分欄、分行，貼在試算表的儲存格中。

這個解析出縮圖網址的工具已經內建在 HTML5 FUN 的烘焙機中，另外，也可以在 Google 試算表中的自訂公式來進行解析應用，可以參考三月的舊文「雄:以雲端硬碟資料夾的圖片製作注音高手」

▋ 相關連結

• 雄:以雲端硬碟資料夾的圖片製作注音高手
• 雄:Tools:解析出雲端硬碟資料夾中所有圖片或音檔的網址

▋ 更新記錄

• 2025.09.23 Google Drive 更動了共享資料夾頁面的內容，改由其它參數中找到圖片的相關資訊。

閱讀全文

利用 iframe 解決因為 CORS 而抓不到YT字幕的問題

前兩天發現 HTML5 FUN Audio Player 怎麼樣都抓不到 YouTube 字幕；查了一下，看來多變的 YouTube 又出招了，讓原本由影片頁面原始碼中擷取到的字幕網址失效了，只能抓到空白的內容。研究了大半天，找到了另一個方法 (有興趣可以參考 jdepoix 的 youtube-transcript-api )，主要就是先由影片的頁面原始碼中找到「INNERTUBE_API_KEY」，然後再利用 YouTube 的 API ，以 POST 的方式取得影片資訊，如果成功，就能拿到影片字幕軌資料的網址。

以 JavaScript 使用新方法來擷取影片資訊的第一關會是在 POST 時的 CORS 問題，如果透過 CORS proxy 當然是可行的方法，一般來說，利用 Google Apps Script 也能寫出 CORS proxy，不過 YouTube 的 API 有在擋 bot，Google Apps Script 直接就被封殺了，網路上其它 CORS proxy 服務也沒好到哪裡去，多玩個幾次，就只能得到這樣的訊息了：

status: 'LOGIN_REQUIRED',
reason: 'Sign in to confirm you’re not a bot'

想要的資料當然就撈不到了。

後來發現，原來在瀏覽器中用 fetch ，不透過 CORS proxy 來 POST  ，就能使用 YouTube API 了，倒是有個小地方要注意，不然就會一直出現：

Access to fetch at 'https://.......' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

裡面最重要的關鍵字是「preflight」，當 Content-Type 是 application/json 時，瀏覽器在未傳送資料給遠端前，會先自我審查是否違反 CORS，難怪我一直看不到 YouTube API 的回應。要怎麼改呢？

只要在 fetch 參數中的 headers 指定 Content-Type 為 text/plain ，它就會使用 simple header ，然後可以避免 preflight，加入：

headers: {
  'Content-Type': 'text/plain', 
}

不透過 CORS proxy 來呼叫 YouTube API 的好處是，比較不會動不動就被 YouTube 判定為 bot 而抓不到資料，是不是很棒？！

不過，當我很開心地將改良過的程式應用到 Blogger 中的 Audio Player 時，居然還是出現違反 CORS 的訊息，為什麼？

底下兩張截圖來探討原因，關鍵已經用箭頭標示出來了：

[圖1] origin 為 blog 的網域

[圖2] origin 為 null

如 [圖1] 所示，當程式在 Blogger 中執行時，origin 被設定為 Blogger 所在的網域，瀏覽器送給 YouTube API ，因為兩者在不同的網域，這樣一來，就會因為 CORS 的問題，無法抓到資料了。同樣的程式碼，由本機載入並執行時，會像 [圖2] 一樣，origin 被設定為 null，YouTube API 接受了，會回傳資料 (這不知道是故意的，還是 API 的 bug，哈！但是我喜歡它現在的狀況)。

本來在研究 YouTube embed 時的 iframe 結構，看看能不能從中挖出字幕，一份資料中提到如果使用 base64 編碼後的 data URI 當 iframe 的 src ，會導致 origin 被設定為 null，就會讓它變成與頁面不同源，而無法存取頁面中的資料 (這一點其實是可以利用 postMessage 來交換資料) ......。

綜合前面看起來像問題的點，因為一個關鍵字「null」，讓我兜出了一個可行的方案。

如果產生一個只用來透過 YouTube API 抓影片資訊的 iframe，而且程式碼用 base64 編碼以後，設定為 iframe 的 src，利用 postMessage 傳影片的 id 與 api key 給 iframe, iframe 收到後，執行抓資料的程序，再使用 postMessage 回傳影片資料給 Audio Player。

哈！就這樣子，Audio Player 又能順利抓到 YouTube 的字幕了！

▋ 相關連結

• 雄:HTML5 FUN : PLAYER 增強聽讀能力的小工具

閱讀全文

HTML5 : 位值小教具

位值小教具將數字的每一位數拆解以後，放在類似長形便利貼的箭頭底框中，初始狀態會疊在一起，使用者可以拖曳分解，或是按底下工具列中的按鈕來展開／收合。如果不是拖曳而是按一下，數字會變成中文、中文會變成數字。工具的功能請參考 [圖1] 中的註解。

[圖1] 位值小教具樣式與工具說明

▋ 啟動小教具

想立即玩玩看，就按一下紅色按鈕啟動：

▋ Q & A

• Q : 可以指定預設出現指定的數字嗎？
• A : 位值小教具可以在網址後面以 n 的參數來指定要帶入什麼數字，例如想要帶入 5815 這個數字，就在網址後面加上 ?n=5815，像這樣子：
  https://gsyan888.blogspot.com/p/place-value.html?n=5815
  以這個格式的網址開啟後會出現指定的數字。
• Q : 如何讓學生掃瞄 QR Code 後，出現的是指定數字？
• A : 可以試試底下的小工具
  👉 按這裡輸入數字製作QR Code 及網址 👈

▋ 相關連結

• 雄: HTML5 : 大數的讀與寫小工具
• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.08.15 v1.0 發布

已複製到剪貼簿！

製作 QR Code

輸入數字

掃描或按 QR Code

閱讀全文

HTML5 : 大數的讀與寫小工具

國小中年級數學會改到眼花的作業，認識大數的單元一定是前三名，盯著一排排的數字，看半天，真的會老眼昏花！今天在 HTML5 FUN 上架了一個大數讀寫的小工具，它有五種玩法，五個範圍，可以當教具，也可以讓學生拿來複習大數的讀與寫。這一則文就來簡單地介紹一下。想立即玩玩看，就按一下紅色按鈕啟動：

▋ 功能簡介

大數的讀與寫小工具分為五種模式：

1. 看數字猜中文：這個模式先顯示每一位的阿拉伯數字的卡片，中文卡片有三種狀態，按一下卡片就可以在後兩種間切換：
• 問號
• 中文數字
• 幾個單位
2. 看中文猜數字：這個模式先顯示中文數字，阿拉伯數字的卡片按了以後才會顯；中文卡片按了則可以顯示幾個單位。
3. 輸入中文：題目在阿拉伯數字卡片上，以手寫輸入在空白的中文卡片上，一張張寫出對應的中文字。如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入數字完整的「讀法」才能過關。
4. 輸入數字：題目在中文數字卡片上，以手寫直接在空白的阿拉伯數字卡片上，一張張寫出對應的數字，如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入完整的數字。
5. 輸入讀法：題目在阿拉伯數字上片上，以手寫的方式在方格中，一格一個字寫出完整的讀法。
   [小技巧] 方格只要由左往右，由上往下使用，可以分行寫，例如一億以上的大數，可以分為三行來寫，第一行寫到億，第二行寫到萬，剩下的寫到第三行，這樣更有結構，好看又好更改。

每一種模式都可以選擇數字的位數包括：

• 一百以內
• 一千以內
• 一萬以內
• 一億以內
• 一億以上

模式1、模式2 在位值表右上角有 [翻開全部] 的按鈕，可以一次將卡片翻面，按過以後會變成 [全部重罝] ，按下後恢復為蓋牌的狀態。

如果想出新的題目，可以按位值表右上角的 [下一題] 鈕，或是上方的功能鈕。

在畫面下方的 [讀作] 鈕除了可以看文字，也會以 TTS 合成語音的方式讀出數字。

▋ Q & A

• Q : 模式1和模式2中，卡片上方的鎖頭按鈕是做什麼的？
• A : 按下鎖頭按鈕，該位置的數字就會被鎖住，按 [下一題] 按鈕後，只會針對未上鎖的位置重出題目，方便教學應用。
• Q : 模式1和模式2中，卡片下方的加、減號是做什麼的？
• A : 加、減號按鈕可以用來調整該位置的數字，方便教學應用。

▋ 相關連結

• 雄 : HTML5 位值小教具
• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.08.11 v1.1 模式3,4 的下方手寫區加上方格，改為寫一個字就辨識，以提高辨識率，並可以按一下格子右上角的垃圾桶圖示，或是在格子內長按約一秒，來清除該格子的字；模式1,2的第一格改為可以接受手動調為 0；模式4修改為出題後會出現阿拉伯數字，中文的部份只有問號，然後會自動以合成語音讀出數，並出現讀法，使用者要在格子內寫出數字；手寫的字因座標非整數而模糊，座標改以四捨五入取整數。
• 2025.08.07 修正 TailwindCSS 缺漏的色碼；手寫辨識如果是在卡片上或是方格中者，只取辨識完的第一個字，以免因為不小心誤畫的字被辨識到，造成使用者除錯時的困擾，所以如果在卡片中寫「五萬」只會取「五」，模式3,4下方的手寫區才會取多個字的辨識結果。
• 2025.08.06 發布。
• 2025.07.30 v1.0

閱讀全文

Doodle Petals : DD Petals 花瓣字

▋ 花瓣與手寫交織的遊戲

最近 HTML5 FUN 發展了一系列的 Doodle 小工具與遊戲，其實是由尚未公開的 DD Board 起的頭。DD Board 有一個花瓣字的元件，玩著玩著，就不小心和 Google 的手寫辨識擦出火花，讓 DD PETALS 變成單獨的遊戲先在這裡分享了。

▋ DD PETALS 的玩法

DD PETALS 畫面中會有一朵花，花的上方會有提示，而中央會有題目；目前的遊戲有三種模式，看國字造詞、看部件填部件，或是看數字填算式。

• 手寫填答：作答時，將答案寫在花瓣上，經過一會會兒，如果答對，會出現一顆星星。
• 大橡皮擦：想擦掉某一片花瓣上的字，就在該花瓣上長按一秒後放開。
• 造詞模式：例如題目「雄」，就在花瓣上寫「英」、「心」、「偉」......等，讓它成詞。咦～那可以寫「國」變成「國雄」嗎？ ^_^
• 部件模式：例如題目「口」，就在上方花瓣上寫「木」變「杏」，右側花瓣寫「丁」變「叮」......等。
• 數學模式：例如題目「6」，就在花瓣上寫「2x3」、「24÷4」、「5+1」、「8-2」......等，讓計算結果是題目的大小。

▋ 啟動遊戲

在「筆順練習」第三版練習時的上方選單有一個「花瓣造詞」，按下去即可玩所有字的造詞。

另外，目前提供三個遊戲範例，請按底下的按鈕啟動。

▋ 自製遊戲

DD PETALS 的可以讀取 Google 試算表中的題庫，如果想自製遊戲，可以：

• 先開啟底下的 Google 試算表：
  【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)
  
  
• 建立副本。
• 設定試算表的「共用」為「知道連結的任何人」。
• 在自己的副本中，選取要製作的工作表(造詞或是數學)，並修改題目內容。
• 在瀏覽器的網址列複製工作表的網址。

✅ 將試算表網址轉為遊戲網址：

• 👉 按這裡進行試算表網址轉遊戲網址 👈

✅ 不想使用試算表，也可以即時輸入國字(不能指定花瓣數量)或數字來取得遊戲網址：

• 👉 按這裡立即輸入題目製作遊戲網址 👈

▋ FAQ

• 為什麼答案核對感覺有一點頓？
• A : DD Petals 為了避免字還沒寫完就進行辨識，等約一秒鐘，確定未寫字後，才會進行手寫辨識；如果是造詞的題目，還多了一個查詢線上字典的程序，因此可能會稍候一下下才能確認對錯。不過，寫完一個答案，可以繼續在別的花瓣上寫下一個答案，如果錯了，再回頭去清除並修改即可。
• 為什麼明明寫的答案對了，卻沒有出現星星？
• A : 因為字跡需要先手寫辨識才能檢核答案，如果確定答案沒錯，建議清除再重寫看看；字的順序也很重要，辨識時是從左到右、由上到下。此外，如果是造詞的題型，也有可能是線上字典未收錄該語詞，建議換個語詞試試看。
• 寫錯了，怎麼擦掉所寫的字？
• A : 想擦掉哪一個花瓣上的字跡，就對準該花瓣按著不住，約一秒鐘後再放開，應該就能清除該花瓣上的字跡了。
• 咦～好像可以兩個人一起寫字吔！
• A : 是的， Doodle Petals 支援多點觸控，所以如果電腦或載具有支援多點觸控，是可以多個人同時寫字的，兩個人一起在電子白板或是平板上拼速度，應該也滿有意思的。
• 造詞的答案是怎麼來的？
• A : 造詞的題型，會先比對試算表中的參考答案欄位，如果沒有找到，會再跟「萌典」查詢，所以如果兩處都沒有收錄者，就會判定為回答錯誤。
• 可以自訂答案嗎？
• A: 在題庫的試算表中，D 欄起可以自行輸入要優先查核的自訂答案，數量不居。
• 國語的題目有支援看題目的部件，寫出部件組成字的模式嗎？
• A : 目前受限於 Google 的手寫辨識不是每個部件都可以辨識得出來，所以目前不支援部件組字的題目。未來有計畫加入已有的獨體部件字來當題目。(2025.07.29起支援部件模式[兩個部件組字])。
• 數學的題目有支援分數的題型嗎？
• A : 因為手寫辨識似乎沒有支援分數的辨識，目前只能使用整數或是小數，但是答案可以接受未使用括號的四則混合計算。
• 匯出圖片的功能可以匯出所有題目的嗎？
• A : 目前只能匯出畫面上的那一題為 PNG 圖片，匯出所有做過的題目為圖片的功能，未來應該會加入。
• 回答不出來時，可以跳題嗎？
• A : 只有使用網址 words 參數和 parts 參數命題的造詞、部件題型才有提供未填完花瓣，按「下一題」跳關的功能，使用試算表及數學題型請自行篩選會卡關的題目。
• Doodle Petals 是用什麼開發的？
• A : Doodle Petals 除了我自己一個個字敲出的程式碼，另外使用一些外部的函式庫或 API :
• Goole 手寫辨識服務, 可參考 Chen-Yu Ho 的「handwriting.js」。
• 「萌典」查字典的 API, 可參考 g0v 的「moedict-webkit」。
• 彩帶飛舞的特效, 可參考「Canvas Confetti」。
• 數學算式字串進行計算, 可參考 Tommy Pang 的這一則文。

▋ 相關連結

• 雄 : HTML5 FUN 精選集

▋ 更新記錄

• 2025.07.30 v.1.3 部件模式支援八片花瓣，如果是用參數 parts 的的方命題，會自動計算要使用八片花瓣或是四片花瓣，沒有答案的花瓣會自動上鎖。
• 2025.07.29 v1.2 利用全字庫 CNS IDS 來查表，新增部件模式，除了使用試算表，也可以在網址中使用參數 parts 來指定部件的題庫。
• 2025.07.27 v1.1 造詞的題型會自動擷取中研院大腦與語言實驗室分享的「生字表字詞資料庫」當候選的答案，提高使用者的答對率；可透過網址中的參數 words 來指定造詞的題庫(類似筆順練習)，參數 numbers 則可以指定數學的題庫；透過 words 來命題時，「下一題」的按鈕只要通過一個答案，就開放跳到下一題，以免卡關，但是用試算表命題者，不能跳題，請自行過濾答案太少的字。
• 2025.07.20 v1.0

已複製到剪貼簿！

取得遊戲網址

請在下方貼上 DD PETALS Google 試算表的網址(記得先設定共用)。

請在下方輸入題庫 (國字一行多字, 數學一題一行)

選擇遊戲模式： 造詞 部件 數學

掃描 QRcode

閱讀全文

拼湊了「粄」的筆順

上週程式玩到煩了，決定來做一下苦活兒，調劑一下。大概是距離新學期開學還有一段時日，之前能抓到國小課本生字清單的來源，都還沒有更新，只好到三大出版社的線上資源去找了。

翰版已在線上的大補帖光碟中提供各冊生字清單在一個檔案中，而且格式跟我需要的一模一樣，算是最佛心的了。康版雖有大補帖為名的生字清單，只有一年級的，其它年級的，得由格式很不同的 MS Word 檔中去挖(不懂，為什麼要用直式表格)；研究出康版的格式有兩種規則，最後寫了個可以全選、複製、貼上的轉換小工具，哈！下回就可以直接用了！南版的則只能由一冊冊生字清單的 PDF 中挖掘，它國字的部份是圖片，只能複製到注音的「國字」，哇！很不好玩，很多都是利用同音的國字來標注音的，所以複製到的國字，當然就降低可用度，還要手動輸入，並核對、校正的地方很多，不過幸好有早發現字根本錯字一堆，不然上線就丟臉丟大了；一陣敲敲打打，也是修正完畢。花了大半天，把 114學年度上學期的生字筆順都建置完畢。（註：苦活兒做完沒幾天，三個版本的線上資源也都完整上線了，哈！白忙一場？還是有不少收獲的）

有善心人士看到上週新上線的生字清單中有誤，我查了一下線上電子教科書，確認生字清單有誤，改清單不太花時間，倒是有一個我十幾年前教中年級就遇到過的「缺字」比較麻煩。是的，教育部的筆順網並不是每個國字都有建置筆順資料，哪些字有筆順資料，可以到教育部筆順網的 FAQ 頁面中查到：

• 常見問題集 - 教育部《國字標準字體筆順學習網》2025

引自常見問題集「有關內容 Ｑ1」，目前 (2025.07.16) 是：

共收錄個6,063國字筆順動畫，另附有37個注音符號的筆順動畫。

翰版中有個生字「粄」，並不在這 6063 個國字內，教育部筆順網查詢結果的網址:

• https://stroke-order.learningweb.moe.edu.tw/searchW.jsp?ID2=1&WORD=%E7%B2%84

我以前教中年級國語也遇過這個字，正因為這樣，在 HTML5 FUN 中才會有一個「筆順編輯器」，可以讀取現有的國字筆順，自己來重組缺的字。以前因為筆順的資料都是直接讀取教育部筆順網的資料，但是自從筆順網 2025年1月改版以後，已經無法簡單地直接讀取筆順資料，所以改用他法自立救濟了。也正因為如此，我順手東拼西湊，將「粄」加入非官方的資料庫，讓它可以在 HTML5 FUN 的筆順練習中出現了。

• HTML5 FUN 筆順練習：粄粉版精板

[圖1] 粄的筆順組合

參考一下 [圖1] ，應該看得出來「粄」這個字是如何開始暫時被支援的吧！它已經可以在 HTML5 FUN 的筆順練習中使用，但是只支援筆順練習，語音的部分只能等教育部什麼時間建置好了。

不過，年初時有發現許久沒用的 HTML5 FUN 筆順編輯器有臭蟲，無法由網路下載字的筆順資料而卡住，只是一來，用得人很多，二來，想用新一點的技術來改寫，也就放著沒動它了。如果想用，小技巧就是，先使用筆順練習將要拿來拼湊新字的國字先下載過筆順資料，再開啟筆順編輯器，臭蟲就不會跑出來搗蛋。

▋　相關連結

• 雄 : HTML5 : 筆順編輯工具
• 雄 : HTML5 FUN 精選集

閱讀全文

Doodle Car : DD Car : 嘟嘟車

 Doodle Car (簡稱 DD Car 或嘟嘟車) 是 HTML5 FUN 2025年7月新增的遊戲，不但可以挑戰題庫範例，還有遊戲地圖編輯器，可以設計遊戲給別人玩。由於過關的方法不見得只有一種，如果能夠再加上討論，交流心得，應該會更有趣。

Doodle Car 嘟嘟車

DD Car嘟嘟車地圖編輯器

玩法很簡單，每一關都會有一部嘟嘟車和終點，只要在畫面中手繪線條(馬路)，並按「開始」或是「增加」鈕，讓嘟嘟車能碰到終點，就算過關。按啟動鈕來動動腦，挑戰一下吧！

▋ 小秘訣

• 嘟嘟車有重量，下方沒有東西支撐時，是會往下墜落的。
• 目前車子沒有是沒有動力的，必須靠斜坡，或是碰撞才能動；而畫面中的磚牆是障礙物，球會滾動，箭頭則可以讓嘟嘟車加速或是跳躍。

▋ Q&A

• Q: 可以自己設計遊戲關卡嗎？
• A: DD Car 有遊戲地圖編輯器，可以使用拖曳圖示的方法來設計自己的遊戲，還能直接分享遊戲連結。
• Q: 遊戲關卡設定可以儲存嗎？
• A: DD Car 可以由遊戲網址中讀取遊戲，也可以由 Google 試算表中讀取遊戲資料，所以保留遊戲地圖編輯器製作的網址、資料，或是將關卡資料儲存在 Google 試算表均可。
• Q: 如何在 Google 試算表中儲存遊戲設定？
• A: 先開啟底下的 Google 試算表，並建立自己的副本，然後利用 DD Car 的地圖編輯器設計好各關的地圖，按 [複製] 鈕後，再貼到自己的試算表。
• 【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)
• Q: 如何將 Google 試算表的網址變成嘟嘟車的遊戲網址？
• A: 先將 Google 試算表「共用」給「知道連結的任何人」，然後複製試算表的網址(不見得要使用第一個工作表，想用哪一個，就切到那個工作表，再複製網址；所以一個試算表文件中可以使用多個工作表來儲存，變成不同的遊戲)。
• 👉 按這裡進行試算表網址轉遊戲網址 👈
• Q: 最多可以設計幾關？
• A: 程式並沒有限制，端看用什麼方式存取資料；如果關數很多，會比較建議使用 Google 試算表來儲存資料。
• Q: 遊戲地圖編輯器打開的遊戲網址，為什麼無法製作 QR code？
• A: 如果設計的遊戲地圖有很多關，而且關卡都很複雜，會讓編輯器製作的網址變很長，而一般的 QR code 產生器可能會有網址長度的限制，就會無法生成 QR code。怎麼辦呢？建議在遊戲編輯器的工具區中，找到「複製」鈕，將設定資料複製到剪貼簿後，再貼到 Google 試算表中；以試算表來當遊戲的資料庫。
• Q: DD Car 是用什麼開發的？
• A: DD Car 主要是使用 Phaser 的遊戲框架，再加上 Planck.js 的物理模擬。遊戲地圖編輯器則未使用任何框架。

▋　相關連結

• 雄 : HTML5 FUN 精選集

▋　更新記錄

• 2025.07.01 Map Editor v1.0
• 2025.06.25 Doodle Car v1.0

已複製到剪貼簿！

取得遊戲網址

請在下方貼上 dd car Google 試算表的網址(記得先設定共用)。

掃描 QRcode

閱讀全文

HTML5:壓力感應塗鴉小工具

前一陣子原本是在研究多點觸控與實體卡片的應用，變成玩自行車內胎、吸管、鋁箔(銅箔)製作感壓筆，目標是希望能模擬出寫毛筆的手感。為了測試自製感壓筆的效果，就設計了一個可以隨著偵測到的「觸控半徑」大小，而自動改變畫筆粗細的塗鴉程式；最後發展成可以隨著運筆速度而改變畫筆粗細的「壓力感應塗鴉」。它可以使用觸控點大小，移動速度，自動調整畫筆粗細的繪圖小工具，即使沒有感壓功能的筆(哭～我舊舊的 iPad Air2 和 iPad 4 本就不支援新的感壓筆)，或是利用滑鼠，也能畫出粗細不同的線條。

壓力感應塗鴉 2025.06.21 截圖

一進畫面，記得在「壓力測試模式」先用不同的壓力或速度，讓程式蒐集畫筆的資訊；套用測試結果後，在畫面上方中央，有繪圖設定控制區可使用，改變一下「壓力係數」，會有不同的效果哦！建議以有觸控螢幕的裝置來玩，體驗會更好。

▋ Q&A

• Q: 使用「半徑」模式時，線條粗細的變化似乎沒有「速度」模式時好。
• A: 主要是能偵測到的觸控半徑，變化實在有限，甚至在 iOS 中，只有按下去那瞬間才能抓到半徑，移動時都是回報同一個數值，所以只能應用在 Android 系統中。另外，有沒有用「漸變半徑」的選項也有差別。
• Q: 在「速度」模式時，怎樣改變線條的粗細？
• A: 按下以後，移動速度慢，線條就會粗；反之，瞬間移動，畫出的線就會變很細。

▋ 相關連結

• 雄 : HTML5 FUN 精選集

 

閱讀全文

SVG ID 衝突導致顯示異常

一般來說， 在頁面中，ID 應該是唯一的才對，但是實務上，不見得會有影響；不過，最近在測試開發中的新版筆順練習程式時，終於踢到鐵板了！

筆順示範的動畫是先建立一個筆畫的「遮罩」，然後在遮罩下，不斷的用不同座標畫大大小小的圓，畫面上只會看到該筆畫慢慢地被「塗上」顏色，彷彿用筆在寫的樣子。所以「遮罩」是很重要的關鍵。在 SVG 中設定要使用哪一個遮罩是用類似這樣的語法：

mask="url(#demo-mask)"

也就是設定名稱為「mask」的屬性，而用「url(# ... )」來指定用 ID 為 ... 的 mask ；以前面的例子來說，它指定使用 ID 為「demo-mask」的遮罩。

整個網頁中只有一個 ID 是「demo-mask」的話，當然不會有任何問題；如果有多個 ID 都叫作「demo-mask」，「url(#demo-mask)」只會取用第一個；應用在第一個 SVG 也不會有問題，其它的 SVG 就無法正常顯示了。之所以會踢到鐵板，完全是因為自己愛亂玩，一次在頁面中放了好幾個國字的 SVG ，而它們的遮罩的 ID 通通叫作「demo-mask」，玩到第二個字以後，只有第一個置入頁面的會正常顯示；這部份倒是和設定 style 不同，style 是後載入的會覆蓋先載入者。

▋ 動態產生 uuid 

怎樣動態產生唯一的 ID 呢？

之前曾看過別人使用這樣的語法：

uuid = function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}

只要呼叫 uuid() 就能得到一個不會重覆的 uuid。

另外一個語法是：

window.URL.createObjectURL(new Blob([])).slice(-36)

哈！我是喜歡簡潔一點的後者。如果想讓 id 短一點，就將 36 改小一點。

▋ 測試

以下的字，照設計的流程是：

1. 多色的靜態筆畫。
2. 按完播放鈕，筆畫變紅色。
3. 黑色的書寫動畫。
4. 黑色靜態筆畫，至全字動畫播畢。
5. 多色的靜態筆畫。

可以觀察一下，當 mask 使用相同 ID，與使用不同 ID 有何差異，按底下的按鈕，開始測試：

[圖1] 是右邊的「試」 在 [測試1 (相同ID)] 中，第四筆畫時的截圖，本來應該是寫橫畫的，卻冒出了豎畫。我故意將「測」的輪廓疊上去，比較容易看出豎畫哪裡冒出來的；。那其實就是第一個字「測」的第四筆畫，「貝」的起筆豎畫製作的遮罩，「試」此時寫的是橫畫，所以只能看到短短的豎畫，這是因為遮罩 ID 衝突，所造成的誤用。而在 [測試2 (ID不同)] 中，兩個字都能正常的顯示遮罩內容。

[圖1] 右邊的字誤用了左邊的遮罩而不正常

所以在 SVG 中有使用到「url(# ... )」來指定對象者，ID 在命名時，務必要特別注意，不然就會像我，程式改來又改去，對的程序都會改成錯的了。

閱讀全文

HTML5 數學小白板分數元件

前幾天有老師問到 HTML5 FUN 數學小白板的分數元件能不能換顏色？原本分數條可以自訂顏色，而圖形式分數元件則沒有自訂顏色的功能。上一次修改程式已經是一年前的事了，查了一下程式，其實自訂顏色的參數是有預留的，只是顏色的設定，沒有加在功能選單上而已，這樣該稱讚自己有先見之明嗎？ XDDD

昨天在圖形式分數元件的設定選單中，新增了五個顏色的項目，只要按一下想使用的顏色按鈕，就能套用到這個元件上；順便調整了選單的順序，讓它和分數條的差不多。

[圖1] 數學小白板的分數元件

哈！看一下 [圖1] ，目前圖形式分數元件的設定選單多達 15 個按鈕，有夠壯觀的。

順便錄了有關分數元件的操作示範影片。

▋ 操作示範影片

• 🎬 https://www.youtube.com/watch?v=DxSpXxWpdCg

▋ 相關連結

• 雄 : HTML5 FUN : 數學小白板

• 雄 : HTML5 FUN 精選集

閱讀全文