顯示具有 HTML5 標籤的文章。 顯示所有文章
顯示具有 HTML5 標籤的文章。 顯示所有文章

2025年9月2日 星期二

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

2025年9月2日 星期二

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

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

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

▋ 使用方法

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

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

▋ 開始使用

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

        

OK

 

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

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

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

2025年8月15日 星期五

HTML5 : 位值小教具

2025年8月15日 星期五

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

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

▋ 啟動小教具

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


▋ Q & A

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

▋ 相關連結

▋ 更新記錄

  • 2025.08.15 v1.0 發布


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,

2025年8月6日 星期三

HTML5 : 大數的讀與寫小工具

2025年8月6日 星期三

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


▋ 功能簡介

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

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

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

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

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

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

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

▋ Q & A

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

▋ 相關連結

▋ 更新記錄

  • 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
閱讀全文
By at 沒有留言:
標籤: , ,

2025年7月26日 星期六

Doodle Petals : DD Petals 花瓣字

2025年7月26日 星期六

▋ 花瓣與手寫交織的遊戲

最近 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 :

▋ 相關連結

▋ 更新記錄

  • 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


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,

2025年7月16日 星期三

拼湊了「粄」的筆順

2025年7月16日 星期三

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

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

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

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

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

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

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


[圖1] 粄的筆順組合

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

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

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

2025年7月8日 星期二

Doodle Car : DD Car : 嘟嘟車

2025年7月8日 星期二

 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 的物理模擬。遊戲地圖編輯器則未使用任何框架。

▋　相關連結

▋　更新記錄

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


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,

2025年6月21日 星期六

HTML5:壓力感應塗鴉小工具

2025年6月21日 星期六

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

壓力感應塗鴉 2025.06.21 截圖

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


▋ Q&A

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

▋ 相關連結

 
閱讀全文
By at 沒有留言:
標籤: , ,

2025年5月12日 星期一

HTML5 數學小白板分數元件

2025年5月12日 星期一

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

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

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

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

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

▋ 操作示範影片

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

2025年5月3日 星期六

SVG 轉 ODP 簡報小工具

2025年5月3日 星期六

HTML5 FUN 的筆順練習工具，除了提供 PNG 格式的部件圖片下載（一個部件一個檔案）；也有提供 SVG 格式的圖形檔（一個檔案中，放多個可以單獨操作的部件）。不過，不是每個工具或平台都能直接匯入 SVG 圖形檔，或是匯入了 SVG 圖形，卻被轉為非向量圖片，無法輕鬆地將筆順部件拆解。試了一下大家常用的工具：

  • InkScape : 本身就是向量圖的編輯器，還能儲存或是匯出為各種格式，SVG 支援度最高，但可能需要花一點時間學習怎麼使用。
  • Google 文件：不支援匯入 SVG 檔案，貼上的 SVG 圖形會轉為點陣圖，無法直接拆解部件。
  • MS Office 線上版 : 可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • Canva 網站：可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • LibreOffice : SVG 支援度極高，貼上或是匯入的 SVG 圖片，而且還能拆解圖中的各部件。

▋ 好轉通吃的 ODP 簡報

LibreOffice 很好用，跟 MS Office 也很像，不但免費，能匯貼或是貼上 SVG 圖形，而且它儲存的簡報檔案 (.odp) 可以使用 Google 簡報、MS 簡報、Canva ...... 等來開啟，將 LibreOffice 簡報檔 (.odp) 上載到各平台的雲端硬碟中，開啟時，除了能轉成各平台的簡報格式外， .odp 簡報中的 SVG 圖形如果有「斷開」、解除群組，也能在各平台中保有圖形部件，直接獨立操作的特性。

什麼！還要再學怎麼使用 LibreOffice 哦！應該又一堆人卻步了！

[圖1] svg2odp 可以將筆順 SVG 轉為 ODP 簡報

最近花了一點時間研究怎麼將筆順練習匯出的 SVG 部件檔案，甚至其它 SVG 圖形檔，置入 LibreOffice 簡報(Impress) 的 .odp 的格式，並寫成一個小工具 (svg2odp)。透過簡單的步聚，即可輕鬆下載 .odp 的簡報檔案，然後可以將簡報檔案上載到 Google 雲端硬碟、微軟雲端硬碟，或是 Canva 中。

[圖2] 將 ODP 簡報上載到 Canva 可自行重組

▋ 使用方法

以 HTML5 FUN 筆順練習來說：

  • ✅ 在筆順練習的「部件拆解」功能中，按一下左下角綠色的下載圖示  📥 (如圖3)。
  • ✅ 按下「下載部件 SVG」或「下載筆畫 SVG」，即可儲存為 SVG 圖檔 (如圖3)。
  • ✅ 利用「SVG 轉 ODP 簡報小工具」將 SVG 轉為 ODP 簡報檔。
  • ✅ 將 ODP 簡報檔上傳到雲端硬碟或網站，並開啟檔案，即可得到國字部件， (如圖4)。

[圖3] 在筆順練習中下載 SVG 圖檔

[圖4] 將轉好的 ODP 簡報檔案上傳到 Canva

▋ SVG 轉 ODP 簡報小工具


拖曳 SVG 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案

解除所有群組

▋ 操作示範影片

▋Q & A

  • Q: 勾選「解除所有群組」有什麼效果？
    • A: SVG 轉 ODP 簡報小工具除了筆順練習的 SVG 檔，預設會保留各物件的群組設定，勾選「解除所有群組」後，所有的群組都會被解除；以筆順練習的 SVG 檔來說，通通會變成以筆畫為最小單位。群組都被解除的好處是可以自己再重組。
  • Q: 一個簡報檔案中可以放幾個 SVG 圖形？
    • A: 當有多個 SVG 圖形時，程式會計算適合的大小，所以數量就看個人需求。
  • Q: 拖曳到轉換工具的圖形，怎樣刪除不用？
    • A: 在每一張預覽圖片的右下角有一個叉叉，按一下即可移除。
  • Q: 在轉換工具區塊右下角的綠色圓圈是做什麼的？
    • A: 綠色圓圈可以貼上 SVG 圖形的語法，或是放在網路上的 SVG 圖形網址，程式會載入 SVG 圖片供轉換。
    • 可以試試這幾個有提供 SVG 圖片網址或語法的圖庫網站：
  • Q: 在預覽圖片的左下角有一個鎖頭是什麼用的？
    • A: 初版的工具無法處理較複雜的 SVG 圖形，就只能以不轉換繪圖指令的方式，將 SVG 圖片篏入 ODP 簡報檔中，因此以鎖頭的圖示來區別；現在的版本已經用 flatten.js 預先處理過了，所以大部份的圖片應該都不會再「加鎖」。
  • Q: 那個燈泡的圖示是做什麼用的呢？
    • A: 哈！務必試試看，多按幾次就知道囉！

▋ 參考資料

SVG 轉 ODP 簡報小工具中使用到的一些專案及相關的資料列在下面做個記錄，也感謝大家的分享，解決了我不少問題：

▋相關連結

 
閱讀全文
By at 沒有留言:
標籤: , , , , ,

2025年4月1日 星期二

HTML5 : MAZE : 唐詩迷宮

2025年4月1日 星期二

「唐詩迷宮」是使用 HTML5 FUN 2025 年新增的「文字迷宮」製作的遊戲，可以套用不同的題庫。

請先選擇要挑戰的題庫，並設定難易度。再按紅色按鈕啟動遊戲。

遊戲設定

題庫：

 

▋ Q & A

  • Q : 如何自製文字迷宮的遊戲？
  • Q : 文字迷宮自製遊戲時，使用哪一個 Google 試算表範本？
  • Q : 如何像唐詩迷宮一樣，可以國字加上注音？
  • Q : 只能出中文的題目嗎？
    • A : 題目未限定語言，所以也能出其它語言的文字迷宮。題目的字串以空格來分隔，程式會用空格來切為每一格要填入的文字。

  • Q : 可以加圖片嗎？
    • A : 目前支援加一張圖片在畫面的右下角，可以在題庫的第四欄位指定圖片的網址。

  • Q : 可以自訂語音嗎？
    • A : 如果不想使用 TTS 播放題目文字的合成語音，可以在題庫的第五欄位中，填入語音的網址，例如可以使用 Vocaroo (https://vocaroo.com/)來自行錄音，文字迷宮的程式有支援 Vocaroo 錄音後，分享的音檔網址。

  • Q : 難易度的普通模式和進階模式有何差異？
    • A : 兩種模式的差異主要是在產生題目的迷宮時，用兩題的文字來混合，或是只使用一題的文字來出題；只使用一題的文字來出題時，因為字的重覆度會高，在作答時，可能需要費神來選擇，才能走到終點，所以為進階模式。

  • Q : 為什麼同一題的走法不見得每次都一樣？
    • A : 文字迷宮在製作時是以用隨機的方式選擇字要放到哪一格，因此走法不見得都一樣；另外，有時也可能因為相同的字就在旁邊，而形成有多個走法的情形。所以要多方思考，找出最佳路徑。

▋ 相關連結

▋ 更新記錄

  • 2025.04.03 可在題庫的第四欄位指定要顯示在右下角的圖片；第五欄位如果有自訂語音的網址，就不使用 TTS 來念題目。
  • 2025.04.02 檢查題目解析完是否佔太多格，限制不能超過 87 格 (總格數最大為 10x10)；非國字注音的題目(ex.英文題)會自動調整字的大小；試算表範本新增 tts_language 的參數，供自訂合成語音的語言。
  • 2025.04.01 加入線上題庫的功能，支援以 Google 試算表＋HTML5 FUN 遊戲啟動器來自製文字迷宮的線上遊戲。
  • 2025.03.27 v.1.0  初版。

 

 
閱讀全文
By at 沒有留言:
標籤: , ,

2025年3月15日 星期六

HTML5 : 考驗加減能力的 Zlizer 小遊戲

2025年3月15日 星期六

HTML5 FUN 的程式幾乎是是使用 LimeJS 來開發的，雖然該專案已經沒有在維護了，但是使用多年，HTML5 FUN 有了自己的模式，小臭蟲大概也除得差不多，所以二月時，將調整過後， LimeJS 目前可以運作的版本，放了一份在 GitHub 中。

LimeJS 的 lime/demos 目錄中，有一個範例遊戲，名為 Zlizer，它是一個利用數學加、減法來闖關的益智遊戲，滿好玩的。這兩天認真地研究了程式碼，解決了動不動就因錯誤而掛掉的問題，界面可自動依瀏覽器的設定顯示中文，另外還增強了一些功能。

▋  考驗加減能力的 Zlizer

Zlizer 的遊戲畫面中會出現很多帶有數字的泡泡，玩的時候必須使用滑鼠，或是在觸控螢幕畫線，可以將泡泡分解或合併，必須在泡泡落地，或是超過左右範圍之前，使泡泡數字能和右上角的目標數字一樣。答對會加與泡泡上數字等值的分數，超過範圍也會扣與數字等值的分數。

👉 在多個泡泡外畫線，可以將它們合部合併為一個。

[圖1] 將多個泡泡畫線圈起來，合併為一個

👉 在泡泡中間畫線，可以分解為多個泡泡。

[圖2] 在泡泡上畫線，分解泡泡

👐 如果是在支援多點觸控的平板，或是大屏，可以多人同時操作，合作破關哦！

▋ 啟動程式開始玩

按底下的圖示，或是紅色按鈕，即可開啟遊戲。


▋ 版權聲明

Zlizer 的原始碼來自於 LimeJS 的 Demos：


▋ 相關連結

▋ 更新記錄

  • 2025.03.17 解決泡泡內的數字，或是部份的文字因為字型大小的關係，而自動變成兩行字的問題。
  • 2025.03.15 加入音效；各模組補充 JSDoc 缺漏的部份，解決 compile 的時候會出現的一堆警告訊息 ( 一整個寫程式的潔癖 XDDD )。
  • 2025.03.14 除蟲；可自動偵測是否為中文環境，language 為 zh 開頭者，就進行中文化；遊戲說明對話框右上角多一個叉叉按鈕，可以跳過說明。
閱讀全文
By at 沒有留言:
標籤: , , ,
訂閱： 文章 (Atom)
 
雄::gsyan © 2009. Design by Pocket