2026年4月12日 星期日

訓練了第一個 AI 模型

2026年4月12日 星期日

小孩看到我一個字一個筆劃的在 iPad 上「造字」，說到「這應該可以讓 AI 來做啊！」。其實有想過，但似乎沒有模型可以幫忙做這件事；幾天過去，那句話就在內心深處發酵了（這個爸爸也真好面子！）。以手動拉國字上的控制點是傷眼又累心的事，完美主義作祟，同一個字，每次看都覺得還可以更好，就又拉了拉、點了點，這樣子是不會有盡頭的，也因此又丟在一旁。上週和  Gemini 討教了訓練 AI 模型的問題，想利用現有已做好的一千多個字帶有筆順的單線體，訓練一個可以給字形資料，預測出其它字的單線體繪圖資料，就這麼開啟了我訓練模型的第一頁。目前已經「煉丹」到了 V6，前面有五次架構大改變，只能「廢爐」重練。因為 Google Colab 未付費版每天只能使用四小時左右，輪流用了四個帳號，總算有了一點點成果。

心得：一輪又輪的練，顧爐顧得很累；AI 真的令人覺得可敬也可怕。有 Gemini 陪練，竟然讓只吃過豬肉，也看過豬走路的人，現在能養豬了！

留下部份成果，及煉丹記錄：

▋ 抽測

[圖1] V6 隨機抽測

▋ 預測結果

[圖2] V6 預測實作 (threshold: 0.6)

[圖2] 為 AI 預測出每個字的控制點後，前端程式以三次貝茲曲線畫出的單線體字(細黑線)，為了驗證 AI 預測的點有沒有在目標字內，每個字都有加上字原來的輪廓，灰色輪廓的字為訓練資料之一，綠色輪廓的字為未被訓練過的字，純由 AI 自己推測出來的。由綠色輪廓的看來，模型還很爆衝，煞車系統不好，或是還不夠聰明；[圖3] 將 threshold 由原來的 0.6 提高到 0.9，讓 AI 盡情發揮，特別注意上下兩張圖中的「宜」，是不是長得不一樣了？另外，因為注音符號字形比較大而細，AI 一整個無經驗，像不像剛拿筆塗鴉的人！目前供 AI 訓練的資料尚不足，也較粗糙，訓練的工具已有，接下來，還是先好好的把「老師」造好。

[圖3] 沒學過的字讓 AI 自由發揮 (threshold 0.9 )

▋ 訓練記錄 (V6)

/ 第   1 輪 | 總誤差: 180.7022 | 輔助輪: 1.00
/ 第  10 輪 | 總誤差: 48.0030 | 輔助輪: 0.97
/ 第  20 輪 | 總誤差: 32.2378 | 輔助輪: 0.94
/ 第  30 輪 | 總誤差: 27.4174 | 輔助輪: 0.90
/ 第  40 輪 | 總誤差: 25.3653 | 輔助輪: 0.87
/ 第  50 輪 | 總誤差: 24.4466 | 輔助輪: 0.83
/ 第  60 輪 | 總誤差: 23.9034 | 輔助輪: 0.80
/ 第  70 輪 | 總誤差: 23.3459 | 輔助輪: 0.77
/ 第  80 輪 | 總誤差: 22.8104 | 輔助輪: 0.73
/ 第  90 輪 | 總誤差: 22.2847 | 輔助輪: 0.70
/ 第 100 輪 | 總誤差: 22.4075 | 輔助輪: 0.66
/ 第 110 輪 | 總誤差: 21.7709 | 輔助輪: 0.63
/ 第 120 輪 | 總誤差: 21.0706 | 輔助輪: 0.60
/ 第 130 輪 | 總誤差: 20.8824 | 輔助輪: 0.56
/ 第 140 輪 | 總誤差: 20.0680 | 輔助輪: 0.53
/ 第 150 輪 | 總誤差: 19.5479 | 輔助輪: 0.49
/ 第 160 輪 | 總誤差: 18.9566 | 輔助輪: 0.46
/ 第 170 輪 | 總誤差: 18.6179 | 輔助輪: 0.43
/ 第 180 輪 | 總誤差: 17.0078 | 輔助輪: 0.39
/ 第 190 輪 | 總誤差: 16.0019 | 輔助輪: 0.36
/ 第 200 輪 | 總誤差: 14.7479 | 輔助輪: 0.32
/ 第 210 輪 | 總誤差: 13.0668 | 輔助輪: 0.29
/ 第 220 輪 | 總誤差: 11.8760 | 輔助輪: 0.26
/ 第 230 輪 | 總誤差: 10.6480 | 輔助輪: 0.22
/ 第 240 輪 | 總誤差: 9.3260 | 輔助輪: 0.19
/ 第 250 輪 | 總誤差: 8.1891 | 輔助輪: 0.15
/ 第 260 輪 | 總誤差: 6.9615 | 輔助輪: 0.15
/ 第 270 輪 | 總誤差: 6.5699 | 輔助輪: 0.15
/ 第 280 輪 | 總誤差: 5.4058 | 輔助輪: 0.15
/ 第 290 輪 | 總誤差: 4.6223 | 輔助輪: 0.15
/ 第 300 輪 | 總誤差: 4.7626 | 輔助輪: 0.15
/ 第 310 輪 | 總誤差: 3.7394 | 輔助輪: 0.15

--- continue 使用時間 1小時42分

/ 第 320 輪 | 總誤差: 3.0472 | 輔助輪: 0.00
/ 第 330 輪 | 總誤差: 3.7986 | 輔助輪: 0.00
/ 第 340 輪 | 總誤差: 2.1606 | 輔助輪: 0.00
/ 第 350 輪 | 總誤差: 2.4823 | 輔助輪: 0.00
/ 第 360 輪 | 總誤差: 2.2880 | 輔助輪: 0.00
/ 第 370 輪 | 總誤差: 1.7479 | 輔助輪: 0.00
/ 第 380 輪 | 總誤差: 2.0952 | 輔助輪: 0.00
/ 第 390 輪 | 總誤差: 1.5116 | 輔助輪: 0.00
/ 第 400 輪 | 總誤差: 1.6344 | 輔助輪: 0.00
/ 第 410 輪 | 總誤差: 2.3147 | 輔助輪: 0.00
/ 第 420 輪 | 總誤差: 1.2334 | 輔助輪: 0.00
/ 第 430 輪 | 總誤差: 0.9631 | 輔助輪: 0.00
/ 第 440 輪 | 總誤差: 2.2648 | 輔助輪: 0.00
/ 第 450 輪 | 總誤差: 2.9374 | 輔助輪: 0.00
/ 第 460 輪 | 總誤差: 1.6699 | 輔助輪: 0.00
/ 第 470 輪 | 總誤差: 1.0055 | 輔助輪: 0.00
/ 第 480 輪 | 總誤差: 2.4071 | 輔助輪: 0.00
/ 第 490 輪 | 總誤差: 0.8481 | 輔助輪: 0.00
/ 第 500 輪 | 總誤差: 0.8147 | 輔助輪: 0.00
/ 第 510 輪 | 總誤差: 3.3954 | 輔助輪: 0.00
/ 第 520 輪 | 總誤差: 1.2439 | 輔助輪: 0.00
/ 第 530 輪 | 總誤差: 1.0511 | 輔助輪: 0.00
/ 第 540 輪 | 總誤差: 0.7147 | 輔助輪: 0.00
/ 第 550 輪 | 總誤差: 1.6199 | 輔助輪: 0.00
/ 第 560 輪 | 總誤差: 0.8060 | 輔助輪: 0.00
/ 第 570 輪 | 總誤差: 0.5612 | 輔助輪: 0.00
/ 第 580 輪 | 總誤差: 0.7626 | 輔助輪: 0.00
/ 第 590 輪 | 總誤差: 0.7596 | 輔助輪: 0.00
/ 第 600 輪 | 總誤差: 0.4882 | 輔助輪: 0.00
/ 第 610 輪 | 總誤差: 0.4742 | 輔助輪: 0.00
/ 第 620 輪 | 總誤差: 0.5721 | 輔助輪: 0.00
/ 第 630 輪 | 總誤差: 1.4243 | 輔助輪: 0.00
/ 第 640 輪 | 總誤差: 0.6681 | 輔助輪: 0.00
/ 第 650 輪 | 總誤差: 0.7476 | 輔助輪: 0.00

--- fine tune
/ 第 611 輪 [化境 (V7)] | 總誤差: 0.4409 | LR: 1e-05 | 輔助輪: 0.00
/ 第 620 輪 [化境 (V7)] | 總誤差: 0.2399 | LR: 1e-05 | 輔助輪: 0.00
/ 第 630 輪 [化境 (V7)] | 總誤差: 0.2139 | LR: 1e-05 | 輔助輪: 0.00
/ 第 640 輪 [化境 (V7)] | 總誤差: 0.2006 | LR: 1e-05 | 輔助輪: 0.00
/ 第 650 輪 [化境 (V7)] | 總誤差: 0.1909 | LR: 1e-05 | 輔助輪: 0.00
/ 第 660 輪 [化境 (V7)] | 總誤差: 0.1832 | LR: 1e-05 | 輔助輪: 0.00
/ 第 670 輪 [化境 (V7)] | 總誤差: 0.1772 | LR: 1e-05 | 輔助輪: 0.00
/ 第 680 輪 [化境 (V7)] | 總誤差: 0.1720 | LR: 1e-05 | 輔助輪: 0.00
/ 第 690 輪 [化境 (V7)] | 總誤差: 0.1673 | LR: 1e-05 | 輔助輪: 0.00
/ 第 700 輪 [化境 (V7)] | 總誤差: 0.1632 | LR: 1e-05 | 輔助輪: 0.00
/ 第 710 輪 [化境 (V7)] | 總誤差: 0.1597 | LR: 1e-05 | 輔助輪: 0.00

--- fine tune retrain
/ 第 611 輪 [化境 (V7)] | 總誤差: 0.4401 | LR: 1e-05 | 輔助輪: 0.00
/ 第 620 輪 [化境 (V7)] | 總誤差: 0.2145 | LR: 1e-05 | 輔助輪: 0.00
/ 第 630 輪 [化境 (V7)] | 總誤差: 0.1852 | LR: 1e-05 | 輔助輪: 0.00
/ 第 640 輪 [化境 (V7)] | 總誤差: 0.1706 | LR: 1e-05 | 輔助輪: 0.00
/ 第 650 輪 [化境 (V7)] | 總誤差: 0.1603 | LR: 1e-05 | 輔助輪: 0.00
/ 第 660 輪 [化境 (V7)] | 總誤差: 0.1536 | LR: 1e-05 | 輔助輪: 0.00
/ 第 670 輪 [化境 (V7)] | 總誤差: 0.1480 | LR: 1e-05 | 輔助輪: 0.00
/ 第 680 輪 [化境 (V7)] | 總誤差: 0.1433 | LR: 1e-05 | 輔助輪: 0.00
/ 第 690 輪 [化境 (V7)] | 總誤差: 0.1388 | LR: 1e-05 | 輔助輪: 0.00
/ 第 700 輪 [化境 (V7)] | 總誤差: 0.1349 | LR: 1e-05 | 輔助輪: 0.00
/ 第 710 輪 [化境 (V7)] | 總誤差: 0.1312 | LR: 1e-05 | 輔助輪: 0.00
閱讀全文
By at 沒有留言:
標籤: ,

2026年4月5日 星期日

玩玩自製的單線體中文字

2026年4月5日 星期日

一直想弄一支可以利用現有字型自動變單線體的小工具，玩了好久，都沒有滿意的；最後還是決定用半自動的方式就好(其實還是手工調整居多)。三月份很專心地玩了兩週「造字」，居然將兩個學期一到三年級的生字及注音符號玩完了。哈！不過後來才發現不少字的筆畫離得太開，又進入調整的地嶽。大概是之前玩太累，就這麼丟著一星期都不碰了，換玩別的東西。先來看看部份成果，有空再慢慢完成四到六年級的生字。

[圖1] 單線體字形編輯器的截圖

每個都只取了關鍵的幾個點，用繪圖指令就能畫出完整的字；正因為這樣，可以做很多變化，變點點字、虛線字、實線字，粗細、顏色......就更不用說了。前置工作很無聊，但成果卻很有趣。至於要應用在哪裡呢？除了筆順練習、生字簿產生器，或許也可以拿來設計成遊戲；邊「造字」邊想吧～才弄完不到兩千個字，離六千多個字還差得遠呢！

底下的設定改一下，字的形態就會改變哦～可以玩玩看。


輸出字形自訂參數
閱讀全文
By at 沒有留言:
標籤: , , ,

2026年3月13日 星期五

Tools : IVS注音字型文字與國字+注音格式轉換

2026年3月13日 星期五

最近 Google 文件中可以加入自帶注音的字型了，只要按一下字型選單旁的「小三角形」▼ ，再點選「更多字型」，就能新增名稱為 Bpmf Huninn /  Bpmf Iansui /  Bpmf Zihi Kai Std 的注音字型。

▋ 注音字型⇦⇨國字+注音

突然有個想法，這些注音字型必須使用支援 IVS 技術的輸入法來調整多音字的注音，再將文字貼到文書處理軟體(例如:Google文件)中指定使用注音字型；如果反向處理，將 Google 文件有加注音的文字貼到無法顯示注音字型的網頁或遊戲中，注音就看不到了；寫個能將「注音字型」文字和「國字+注音」格式間的轉換小工具，應該滿有意思的。這樣子可以將別人在文件中以注音字型顯示的文字，轉成遊戲用的「國字+注音」，或是倒過來處理，將以前國字加注音的內容，直接轉為「注音字型」的文字格式，貼到文件中。

在「ButTaiwan」的「bpmfvs」專案中找到了製作注音IVS字型的國字注音對照表：

IVS格式了解了，對照表有了，簡易的轉換工具就生出來了，先來玩玩看，改天再來增強以前寫的「語文高手題庫&國字加注音產生器」。

▋ 使用方法

✅ 例如將教育部國語小字典中已加注音的解釋轉貼到 Google 文件：

  • 選擇「國字+注音 ⇨ 注音字型」模式 。
  • 在輸入區貼上國語小字典複製的內容。
  • 按「去掉換行」鈕 (去掉國語小字典國字和注音間多的換行)。
  • 按「開始轉換」鈕
  • 按綠色「 複製輸出區 」鈕
  • 貼到 Google 文件，然後套用注音字型。
✅ 例如幫課文加上注音
  • 選擇「注音字型(或國字) ⇨ 國字+注音」模式。
  • 在輸入區貼上課文。
  • 按「開始轉換」鈕。
  • 校正注音後，按「 更新全部 」鈕。
  • 按紅色「 複製 」鈕。
  • 貼到 Google 文件，然後套用注音字型。
說明：按了「更新全部」鈕後，輸入區的國字會加上看不到的 IVS 注音標註符號，使用注音字型時就會出現注音。

▋ 注音IVS字型與國字+注音轉換工具

選擇轉換模式

校正注音 (紅色為多音字, 可按一下調整)


▋ 相關連結

▋ 更新記錄

  • 2026.03.14 參考教育部簡編本字典新增詞庫。
  • 2026.03.13 初版。
閱讀全文
By at 沒有留言:
標籤: , , , ,

2026年3月8日 星期日

HTML5 FUN : 生字簿產生器

2026年3月8日 星期日

之前有人問到 HTML5 FUN 的雄筆順練習可以印成紙本，變成生字簿嗎？其實用「生字簿」當關鍵字，應該可以在網路上找到好幾個能自製生字簿，或是下載國小國語課本生字簿電子檔的地方。前一陣子為了增加雄筆順部首顯示的功能，花了近三天的時間建立及校對六千多筆的資料。為了提升所花費時間的價值，只好再生出一個「生字簿產生器」（這是什麼邏輯？）。

▋ 生字簿產生器功能與使用

HTML5 FUN 的生字簿產生器目前開放自訂的目項如下：

  • 一頁放幾個字。
  • 一個字要有幾個練習格。
  • 要練習哪些字（一次最多50個字）。
  • 多音字的注音可自選。
使用的方法很簡單：先設定參數，然後校正注音，按完「開始製作」的按鈕就會出現像 [圖1] 的預覽畫面，最後按「📥 下載 / 列印全部頁面 (PDF)」的按鈕，出現列印的對話框，可以選擇直接由印表機輸出，或是儲存為 PDF 檔案。

[圖1] 生字簿產生器預覽圖

▋ 啟動生字簿產生器

按一下底下的紅色按鈕，就可以啟動生字簿產生器：

▋ Q&A

  • Q : 為什麼有些字沒有出現筆順或是標示部首？
    • A : 這個生字簿產生器的筆順是參考教育部筆順練習網站的資料，所以只有教育部筆順網有建置的六千多個國字才會出現筆順及標示部首。
  • Q : 為什麼有些字不是楷書？
    • A : 如果字不屬教育部筆順網已建置的範圍內，而電腦系統沒有標楷體或程式有設定的楷書字體名稱就會這樣，如果是在手機或是平板上操作，非常用字可能遇到。
  • Q : 可以使用其它的字體嗎？
    • A : 已列入未來要新增的功能，目前尚不支援。

▋ 版權聲明

▋ 相關連結

▋ 更新記錄

  • 2026.02.26 v1.0 初版。
閱讀全文
By at 沒有留言:
標籤: , , ,

2026年2月21日 星期六

以 js-dos 玩 DOS 時期的 CAI

2026年2月21日 星期六

農曆年前心血來潮，接上舊硬碟，挖出了以前放在電腦教室讓學生玩的 CAI。民國85年剛接電腦教室時，資源有限，找了「臺灣省國民學校教師研習會」設計的一些電腦輔助軟體，有多餘的時間會讓學生玩一下。這些「上古時期」的 CAI，相對於現在的軟體，看似陽春，但有不同的樂趣。讓家裡沒經歷過 DOS 時期的小孩玩了一下，他們覺得還滿好玩的呢！

想在瀏覽器中玩那些上古時期的 CAI，可以使用 js-dos 來載入。js-dos 其實是將另一個開源的 DOSBox 包裝成網頁版，在瀏覽器中操作，提高了親和力，也能在平板上玩。js-dos  GitHub 的網址如下：

js-dos 目前的操作界面沒有提供繁中的語言選項，我懶得由原始碼重編，直接把下載回來的 js-dos 加上了由英文翻譯的繁中，讓 js-dos 偵測到瀏覽器語言為 zh-TW ，就設定使用中文的操作界面與訊息。

▋ 臺灣省國民學校教師研習會CAI

以前的臺灣省國民學校教師研習會製作了不少的 CAI

[圖1] 臺灣省國民學校教師研習會 CAI 截圖

這些 CAI 當初大部份是可以自訂題庫的，可以說是小而美。

[圖2] 瀏覽器中的 CAI 可用虛擬按鍵操作

[圖2] 是 DOS 版 CAI 在網頁瀏覽器裡的截圖，以 js-dos 來玩時，比原始的畫面多了左側欄，跟箭頭所指的「虛擬按鍵」；玩的時候要以電腦鍵盤或是最下方的虛擬按鍵來操作。

▋ CAI 選單

以下為30年前蒐集的部份 CAI，想玩哪一個就按一下縮圖。


▋ 筆記

支援中文的 DOSBox 分支 DOSBox-X 

▋相關連結
閱讀全文
By at 沒有留言:
標籤: , , ,

2026年2月16日 星期一

Life : 2026 三江生色::四海呈祥

2026年2月16日 星期一

馬年吉祥，祝大家閤家平平安安，健健康康。

當然不能免俗，寫個春聯好過年。今年的馬就請小孩自己找找有什麼最簡單的褶紙。哈！後來發現找到的褶法根本萬用的，身體比例調一下，羊年、狗年還可以再使用同樣的方法。太久沒練字，一整個生疏，但也只能急就章，有空再來練練。

2026-02-16 馬年春聯

以前元宵節左右，會帶學生玩一個 Flash 做的放天燈小動畫，每人去講臺說出祝福的話，或是許願，然後放螢幕中的天燈。前兩天做了一個網頁版的，可以用手寫或打字的方式在天燈上寫上心願或是祝福的話，然後按按鈕放天燈，有興趣可以玩玩看：

🏮閤家安康🏮放天燈囉🏮

新年快樂～馬年行大運～～

▋相關連結
閱讀全文
By at 沒有留言:
標籤:

2026年2月11日 星期三

HTML5 FUN：各版本成語BINGO

2026年2月11日 星期三

有了各版本字音字形語文高手，當然要再來個各版本成語BINGO，程式是使用 2013年開發，2017年改版的 HTML5 FUN BINGO，題目主要來源要是教育部成語典的例句，同一個成語如果有多個例句，每一回合會以隨選的方式取用例句。來挑戰自己的成語能力吧！

▋ 遊戲選單

請按一下按鈕開啟選單，並選擇要玩哪一課的語文高手題目：


✅ 小秘訣:可利用選單的 QRCode 預先設定版本課別並自動啟動。

✅ 挑戰字音字形：各版本字音字形語文高手。

▋ 相關連結

▋ 更新記錄

  • 2026.02.10 加入 114上的題庫。
  • 2026.02.09 加入 114下的題庫。
閱讀全文
By at 沒有留言:
標籤: , ,

2026年2月2日 星期一

HTML5 FUN 各版本字音字形語文高手

2026年2月2日 星期一

HTML5 FUN 中，很多遊戲都有支援「語文高手格式」的題庫，語文高手格式其實是2009年我的一個投籃 Flash 遊戲和足球 Flash 遊戲所用的題庫格式，主要是支援多音字、形近字或同音字的題型，並且可以加上注音的格式，後來甚至有製作題庫的國字加注音產生器(詳見「雄:HTML5:語文高手題庫&國字加注音產生器」)。以前每學期都會建置「語文高手」的題庫讓學生可以複習、挑戰；本文中可以自行選擇要挑戰的內容及遊戲模式，目前提供 HTML5 FUN 的投籃高手、足球高手、兩人PK和四人PK ...... 等七個遊戲模式（投籃高手和足球高手有啟用題目預覽功能）。來挑戰自己的字音字形能力吧！

▋ 遊戲選單

請按一下按鈕開啟選單，並選擇要玩哪一課的語文高手題目：


✅ 小秘訣:可利用選單的 QRCode 預先設定課別與遊戲模式。

✅ 挑戰成語：各版本成語BINGO。

▋ 相關連結

▋ 更新記錄

  • 2026.01.30 加入 114上的題庫。
  • 2026.01.24 加入 114下的題庫。
閱讀全文
By at 沒有留言:
標籤: , ,

2026年1月22日 星期四

以 Word Viewer 讀取 Word 資料

2026年1月22日 星期四

Windows 7 撐了很久，去年底才接上新的 SSD 安裝十月被 MS 終止服務的 Windows 10，滿好笑的，人家終止服務了，我才開始全時使用。現在電腦中完全沒有安裝 MS Office，後來為了能在本機讀取 MS Office Word 的檔案(實在不懂，為什麼教科書出版社提供的備課檔案，居然連很簡單的生字清單，也要放到 Word 表格？)，安裝了 LibreOffice。不過 Word 的表格實在是大魔王，無論是在 LibreOffice 或是 Google 文件中，亂就算了，連要將表格中的文字複製出來，很多都還是極不正常；為了撈出 HTML5 FUN Partdle 用的生詞和筆順練習用的生字清單，耗費了我很多時間。

▋ 不安裝 MS Office 要怎麼讀 Word 檔案？

想要在不安裝 MS Office 的情形下讀取 Word 檔案的內容，除了 LibeOffice 和 Google 文件，MS 很久以前的 Word Viewer 或許是一個解方，雖然它對表格還是不見得百分之百的重現（很奇妙！連自家工具都解不了的表格）。

看一下維基百科中有關 Word Viewer 的說明：

▋ 哪裡下載 Word Viewer

MS 已經不提供 Word Viewer 下載了，怎麼辦？在維基百科的「網站參考」(上標的小數字) 中，其實都有提供 Wayback Machine (https://web.archive.org/) 幫忙備份的頁面，找舊物，找它就對了！(順手找了幫學校建置在市師的網頁 1997年10月版本)

底下將找到的 Word Viewer 中文版頁面整理供參考：

依序下載三個檔案，並安裝，就可以在沒有安裝 MS Office 的機器上讀取 .doc、.docx 的 Word 檔案了。

有了 Word Viewer 就可以讀取出版社提供的備課資料並複製來用，至於怎麼從看似很亂的資料中去蕪存菁，撈出想要的標的則又是另一個課題了，心得是會一點小技巧，效率就能提高很多，以前爬資料培養出來的能力，還是有用的。
閱讀全文
By at 沒有留言:
標籤: ,

2025年12月31日 星期三

DD Petals 花瓣字 : 看部件寫形近字

2025年12月31日 星期三

HTML5 FUN 的 DD Petals 花瓣字，在中文字上的應用，除了可以玩「寫字造詞」，也可以看部件「寫部件湊成字」。「寫部件湊成字」出題跟回答都用部件，寫的部件還需要寫對花瓣(結構)，才算答對，無論是出題或回答，難度相對高一點。因此最近新增了一個新的玩法：看部件「寫形近字」；這個遊戲模式，出題跟回答都是用完整的國字，題目以完整的國字來出題，程式會自動解析出當問題的部件，答案要寫出帶有題目指定部件的完整形近字。

▋ 中文部件字型的問題

中文的部件有一些在電腦或是行動載具的系統字型中，是沒有造字的，所以用純文字來顯示時，就會變成一個「方框」或是「方框叉叉」(如圖1) ......；看不出題目是什麼，自然無法回答案了！數位發展部的「全字庫」網站，有一個「字形即時顯示」，可以產生字的「圖片」；所以只要我們的程式能夠偵測出一個字是字型「不支援」的字碼，再利用全字庫「字形即時顯示」產生圖片，取代「方框」的位置，這樣子就可以重現字的樣子了。

例如：「鳥」、「島」和「裊」有共同的部件「󶆵」，哈！是不是看不出什麼字形！它的 Unicode 碼是「F61B5」，可以到「全字庫」「字形即時顯示」中，將字或是字碼，填入表單的「Unicode 碼」欄位，試著讓它即時生出圖片來看，網址如下：


[圖1] 中央的方框叉叉是未正確顯示的部件

▋ 偵測未支援字的方法

怎麼樣偵測字是看不出內容的「方框叉叉」「方框..」呢？以下是一個偵測的小程序：

/**
 * 偵測字型是否支援該字
 * @param {string} ch
 * @param {string} font
 * @return {boolean}
 */
function isGlyphSupported(ch, font) {
  let probe = document.getElementById("fontProbe");
  if (!probe) {
    probe = document.createElement('div');
    probe.id = 'fontProbe';
    probe.setAttribute('style', 'font-size:32px; visibility:hidden; position:absolute;');
　document.body.appendChild(probe);
  }
  probe.style.fontFamily = (font ? font + ', ' : '') + "monospace";
  probe.textContent = ch;
  const w1 = probe.offsetWidth;
  probe.style.fontFamily = "monospace";
  probe.textContent = ch;
  const w2 = probe.offsetWidth;
  return (w1 == w2 && w1 != 0 );
}

當我呼叫「isGlyphSupported("雄", "Arial")」它以比較設定字型 Arial 前後的「offsetWidth」是否一樣 (注意：早期的 iOS 10.3.4 中，不支援的字都會為 0)，來判斷該字是否被字型支援。「花瓣字」出部件的題型時，預設會在花的中央放部件的文字，如果「isGlyphSupported」回傳為 false，就將原來的文字隱藏，改載入全字庫的「即時顯示圖片」代替。用圖片有什麼缺點呢？載入時間需牽就全字庫網站，較難控制，而且字看起來有鋸齒是難免的。為了怕載入圖片的時間較長時，使用者以為程式當掉了，所以我加上了轉圈圈的載入動畫。底下 [圖2] 是修正完的結果：

［圖2] 正常顯示部件畫面

▋ 哪裡玩花瓣字「看部件，寫形近字」

DD Petals 花瓣字「看部件，寫形近字」和「寫字造詞」都是以完整國字來出題，題目可以共用，花瓣字的側欄選單中 (按遊戲畫面左上角三條線的圖示可以打開側欄選單)，有提供切換遊戲模式的選項及按鈕。所以由「雄筆順」的「花瓣字」選單進入 DD Petals 花瓣字的人，一個遊戲會有兩種模式可以玩。

三大出版社(南一、康軒、翰林)國語課本各冊、各課的生字筆順練習可以按這裡：

▋ 卡關了怎麼瓣

個人的經驗，花瓣字一開始玩，造詞會比組字容易很多，組字明明有的字很常在用的，一時之間反而想不出來。當然，花瓣字當初的設計初衷就是希望能好玩、多寫，所以滿建議用 open book 的概念，可以邊查，邊動腦。部件怎麼查呢？全字庫 (https://www.cns11643.gov.tw/) 是一個很好用的資源，它的「字碼查詢」選單中的「IDS查詢」和「部件查詢」，都可以用部件來找字。

另外，花瓣字的題目如果是部件相關的，可以按上方「關卡:?」，會有小驚喜哦！哈～我是覺得這樣子滿好笑的：「卡關」了，就按「關卡」！

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年12月19日 星期五

修正 iOS 10.3.4 CSS repeat function 的問題

2025年12月19日 星期五

前兩天在測試新遊戲 HTML5 FUN Make 10 時，發現在 iPad 4 的 iOS 10.3.4 居然不能玩！研究半天，找到讓程式卡住的地方是監聽畫面動態的「ResizeObserver」，iOS 10.3.4 不支援，只好多加幾行，讓它改用傳統監聽「resize」事件的方法。以為從此就可以過著幸福快樂的日子了嗎？

來看看 Make 10 正常的畫面應該像 [圖1] 這樣：

[圖1] 正常排列的 Make 10 按鈕

結果在 iOS 10.3.4 中是 [圖2] 這樣，全部疊成一排：

[圖2] iOS 10.3.4 中全部疊在一起

Make 10 中的數字方塊使用了 grid 來配置按鈕棋盤：

.board-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 1%;
  width: 100%;
  height: 100%;
}

設計的是 8 x 6 的棋盤，在 iOS 10.3.4 中，8欄有正常分配了，6 排卻疊成一排。本來以為 iOS 10.3.4 不支援 repeat function，但實際用 getComputedStyle 取得 grid-template-rows 的值，它有執行 repeat(6, 1fr) ，只是回傳的值是「0px 0px 0px 0px 0px 0px」，分成六份了，但每一份都是 0px。

原來關鍵在 iOS 10.3.4 的 repeat 在計算寬度時，有正確解讀「width: 100%」，而在計算高度時，「height: 100%」使用了百分比，並沒有被正確解讀。如果換成別的單位，例如「height: 100vh」，就不會疊成一排了。

找到原因了，在 resize 的監聽程序中，加入程式計算高度即可，取得棋盤容器的總高，扣掉不能使用的空間，再將「height: 100%」最後用 px 的單位來設定。

不過，怎麼知道哪一個人用了像 iOS 10.3.4 這樣， repeat 有缺陷的瀏覽器呢？

本來是用前面提到的「0px 0px 0px 0px 0px 0px」，以按鈕的高度為 0 來判斷，但是這樣的方法只能在一進入遊戲時用，如果使用者旋轉了裝置或是讓視窗尺寸有所改變時，就無法再重新自動設定格子大小了。後來發現「gap: 1%;」這個也是個線索，因為 iOS 10.3.4 並不支援「gap」，所以用 getComputedStyle 取得的 gap 會是 undefined ，這個特性剛好可以用判斷是否為 iOS 10.3.4。

來看一下修改過後的畫面：

［圖3] 不使用 % 設定高度後的棋盤

套上修正方法後的 [圖3] ，和原始設計的 [圖1] 比較，可以看到 [圖3] 格子與格子沒有間隔，所以格線看不出來；不過修正過後，至少在 iOS 10.3.4 中可以玩 Make 10 了！

    ▋ 完美修正

    還是不能接受「gap: 1%;」沒被 iOS 10.3.4 處理到，那怎麼辦？

    把 1%  到底是多少算出來，然後將所有格子找出來設定它們的 width 和 height 為 calc(100% - gap) 就可以有 1% 的間隔了，底下是實作的程序：

    function gridRepeatFix() {
      const boardGrid = document.querySelector('.board-grid');
      if (boardGrid) {
        if (typeof getComputedStyle(boardGrid)['gap'] == 'undefined') {
          const style = getComputedStyle(boardGrid.parentElement);
          let height = parseFloat(style.height);
          height -= parseFloat(style.paddingTop);
          height -= parseFloat(style.paddingBottom);
          const gap = Math.floor(height * 0.01);
          boardGrid.style.height = Math.floor(height) + 'px';
          Array.from(boardGrid.children).forEach(cell => {
            cell.style.width = `calc(100% - ${gap}px)`;
            cell.style.height = `calc(100% - ${gap}px)`;
          });
        }
      }
    }

    ▋ 補記 DD Car Map Editor 中用的方法

    在 DD Car Map Editor 中用了另一個方法，當 CSS 遇到不支援的 gap 時, 利用 margin-left 來補救，例如：

    .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0.5rem;
    }

    就在後面多加判斷及補救

    @supports not (gap: 0.5rem) {
      .main-content > * + * {
        margin-left: 0.5rem; /* LTR 預設 */
      }
    }

    之前花了好多時間在程式裡除錯，原來只是 CSS 的問題，有了這個經驗，以後應該可以縮短卡關的時間了。

    ▋ 相關連結
    閱讀全文
    By at 沒有留言:
    標籤: ,

    2025年12月18日 星期四

    HTML5 FUN: Make 10 : 湊 10 小遊戲

    2025年12月18日 星期四

    以前在 iPad 上很喜歡挑戰一個 Make 10 的數學遊戲，玩法很簡單，就是由畫面下方的一堆數字方塊中，找到能和畫面上方的數字湊成 10 ，如果答對，方塊會消掉，答錯的話，方塊會往上堆；另外，在還沒過關之前，間隔一段時間，底部也會被插入一排新的方塊，如果方塊被推到頂部，或是計時器終了，遊戲就結束。除了湊成 10，遊戲也提供自訂要挑戰湊成其它數字。

    這麼好玩的遊戲，當然也要寫一個可以跨平台玩的，現在 HTML5 FUN 中新增了 Make 10 湊10 的小遊戲。

    ▋ 啟動 Make 10

    按一下底下的圖示，或是紅色的按鈕，就可以玩 Make 10：


    ▋ Q&A

    • Q : 挑戰湊成 10 的，但是在下方的數字中，找不到可以湊成 10 的，怎麼辦？
      • A : 暫時無法湊成 10，就選一個較理想的按一下，雖然會造成某一個堆高一層，但至少能搶時間繼續玩，不然，等被再追加一整層方塊，就更難過關了。（其實讓哪一層堆高也是有差別的哦～所以思考一下是值的。)
    • Q : 玩到一半，想重頭玩，或是換別的遊戲模式，怎麼辦？
      • A : 如果想放棄現有進度及分數重玩，按一下畫面左上角的「三條線」，展開側欄以後，裡面有一個「結束重來」的紅色按鈕。

    ▋ 相關連結

    ▋ 更新記錄

    • 2025.12.19 v.1.2 修正棋盤格子在 iOS 10.3.4 顯示不正常的問題。
    • 2025.12.18 v1.1 縮短動畫延遲的時間，不會有出題太慢的錯覺。
    • 2025.12.17 v1.0 初版。
    閱讀全文
    By at 沒有留言:
    標籤: , ,

    2025年12月16日 星期二

    HTML5 FUN : 花朵產生器

    2025年12月16日 星期二

    前兩天重寫了 HTML5 FUN Doodle Petals 花瓣字的花朵模組，完成後，順手弄了個「花朵產生器」，使用者可以自訂控制參數，產生自己的花朵圖案，並匯出為 SVG 或是 PNG 圖形檔。

    ▋ 啟動花朵產生器

    按一下底下的圖示，或是紅色的按鈕，就可以開啟花朵產生器：


    ▋ 功能簡介

    HTML5 FUN 花朵產生器截圖

    上圖是 HTML5 FUN 花朵產生器的截圖。在夠寬的螢幕中，左側是參數設定區，參數改變，右側預覽的花朵也會立即更新；改到滿意了，設定區的最下方有「匯出 SVG」和「匯出 PNG」兩個按鈕，可以將花朵儲存到檔案中。

    參數設定的部份，基本上是在設定區中，由上而下，一項項去設定，玩玩看，應該就可以上手了。幾個特別在此簡單說明：

    • 樣版：每一個樣版會帶入花瓣的基本設定或是層數，而顏色或是其它參數請自行調整。
    • 控制點半徑：改變花瓣的邊緣是圓、是尖，還是平的；是凸、是凹的。
    • 花瓣層數：產生器支援多層花瓣，像上面截圖中的花朵，中央黃色的花心以外，還有兩層的花瓣；可以應用在國語課的「部件」→「字」→「語詞」。
    • 層間擴展距離：控制多不同層花瓣間，外緣的距離，愈大離愈開。
    • 多色：花瓣色彩模式設為「多色」時，會依不同設定，而有不同的效果
      • 「一筆畫」模式時，只有設定為多層的花瓣時，才看得出「多色」的效果，一層用一個顏色，顏色依色盤順序使用。
      • 不是「一筆畫」模式時，不同花瓣會依序套用色盤中的顏色，顏色數不足時，會從頭重覆使用。
    • 全部填白色：如果只想留花朵的輪廓線，就勾選這一個參數，將整朵塗上白色。
    • 一筆畫：這個選項啟用時，畫出的花瓣，無論設定為幾個花瓣，會以一筆畫的方式畫完，所以同層的花瓣無法用多色。未勾選時，則是以一個花瓣為單位輸出，所以每一個花瓣可以有自己的顏色。
    • 連接到花心：當不是「一筆畫」時，花瓣靠中心端，可以選擇只到花心的邊緣，或是到花朵的正中心。由於差異是出現在花心內，所以這個選項要在沒有勾選「顯示中心圓」時，才看得出差異。

    ▋ 相關連結

    ▋ 更新記錄

    • 2025.12.15 v1.0 初版。
    閱讀全文
    By at 沒有留言:
    標籤: , , ,

    2025年12月11日 星期四

    HTML5 : 提升 Google 試算表查詢效率

    2025年12月11日 星期四

    教育部國語辭典可以在《教育部國語辭典公眾授權網》中下載匯出的文字資料，而且有提供試算表格式，只要上載到 Google 雲端硬碟，另存為 Google 試算格式，就可以使用 JSONP 的方式，將試算表當資料庫查詢。

    在 HTML5 FUN 中，筆順練習、Partdle 和花瓣字均有使用到查詢字典的功能，《國語小字典》和《國語辭典簡編本》1140925版有 45194筆資料， 因為資料筆數較少，查詢的等待時間算可以接受，但是《重編國語辭典修訂本》1140923版有 163907筆資料，從十幾萬筆資料中撈出要用的，會明顯的感受到「等」！如果想將《重編本》的工作表複製到別的試算表，甚至會出現錯誤訊息而無法完成。

    ▋ 輕鬆建立小而美的工作表

    昨天做了一個小實驗，原本在《重編本》的檔案中只有一個名稱為「1140923辭典匯出」的工作表，新增一個工作表，命名為「short」，並利用參照工作表「1140923辭典匯出」的方式來建立資料，把我想查詢的「字詞名」(A 欄)和「注音一式」(I 欄)，用以下程序建立：

    • 游標移至「short」的儲存格 A1 
    • 輸入公式：='1140923辭典匯出'!A1
    • 游標移至「short」的儲存格 B1
    • 輸入公式：='1140923辭典匯出'!I1

    公式如果正確，顯示的內容應該就跟「1140923辭典匯出」A1 與 I1 中的一樣了。

    [圖1] Google 試算表表的參照與自動填滿

    因為 Google 試算表的新工作表預設只會有 1000 列，而「1140923辭典匯出」中有的資料遠遠超過 1000 列，所以要先查一下要參照的工作表「1140923辭典匯出」有多少列資料，如前面提過的，這個版本有163907筆資料，所以 163907 - 1000 = 162907，需要在工作表「short」的最底部再新增 16290 列，努力的捲到底部，就可以看到輸入框了 [圖2]，在裡面填入需要新增的列數。

    [圖2] Google 試看表在底部新增多列

    新增完所需要的列數，接下來可以準備使用魔法的快速按鍵「Ctrl + Enter」，幫我們自動填入資料了：

    • 游標移至「short」的儲存格 A1
    • 按一下上方的欄名「A」，可以選取整欄。
    • 按鍵盤「Ctrl + Enter」

    成功的話，等一下下，Ａ欄中應該就會將資料都自動填入空格了。

    繼續「自動填滿」B 欄：

    • 游標移至「short」的儲存格 B1
    • 按一下上方的欄名「B」，可以選取整欄。
    • 按鍵盤「Ctrl + Enter」

    成功的話，B 欄的所有空格應該也自動填入資料了。

    ▋ 比比看誰快

    新建立的工作表「short」只有兩個欄位，來和完整版的工作表比較一下查詢所花費的時間，底下在四個不同帳號，分別在兩個工作表查詢 A 欄帶有「山」這個字的，並回傳國字、注音兩欄所花的時間(單位為千分之一秒)：

    ✅ 工作表「short」(共2欄, 回傳 2欄, 找到 1038筆)

    時間:  1691 , 筆數:  1038
    時間:  1436 , 筆數:  1038
    時間:  1264 , 筆數:  1038
    時間:  1398 , 筆數:  1038

    ✅ 工作表「1140923辭典匯出」(共18欄, 回傳 2欄, 找到 1038筆)

    時間:  4993 , 筆數:  1038
    時間:  5137 , 筆數:  1038
    時間:  4522 , 筆數:  1038
    時間:  3584 , 筆數:  1038

    只有兩欄的「short」很明顯地快多了。

    來看看資料量較少的《簡編本》如何呢？

    ✅ 工作表「short」(共2欄, 回傳 2欄, 找到 137筆)

    時間:  473 , 筆數:  137
    時間:  624 , 筆數:  137
    時間:  750 , 筆數:  137
    時間:  525 , 筆數:  137

    ✅ 工作表「辭典匯出_1140925」(共15欄, 回傳 2欄, 找到 137筆)

    時間:  1071 , 筆數:  137
    時間:  1297 , 筆數:  137
    時間:  1371 , 筆數:  137
    時間:  1367 , 筆數:  137

    《簡編本》如果查詢只有兩個欄位的「short」工作表，也可以比原來快很多。

    實際應用在 HTML5 FUN 筆順練習和花瓣字中，可以讓程式更靈活了。哈！雖然使用者原來不見得感覺有在等待，畢竟程式在背景載入資料時，大伙兒都忙著操作別的呢！

    ▋ 相關連結
    閱讀全文
    By at 沒有留言:
    標籤: , , ,
    訂閱： 意見 (Atom)
     
    雄::gsyan © 2009. Design by Pocket