HTML5 FUN 題庫編輯器測試

從以前的 Flash 到現在的 HTML5 電子學具或教具，一直都維持可以利用純文字編輯工具，修改設定檔，客製自己的的遊戲或工具。不過，這設定檔中的一堆「碼」可也常嚇壞人了，尤其是加上圖片或是聲音檔的設定，更是弄得很多人頭昏眼花。

正因為這樣，很久之前就在想，怎樣可以讓大家在使用 HTML5 FUN 網站中的遊戲或工具，可以不用開檔案，就能客製化。2022年1月起，陸續試著讓幾個遊戲支援 Blogger 或網頁的語法產生器，正式踏出了更容易出題的第一步。

這三天一直在試著弄一個編寫遊戲題庫的輔助工具，主要是能在輸入或是貼上圖片、聲音的路徑、網址或資料時，可以將一長串或是一堆「碼」暫時藏起來，圖片顯示縮圖，而聲音跟分隔符號用圖示來替代。中間卡了不少關，還因為程序及演算法不良，分析語法、處理資料耗時頗多，甚至讓瀏覽器當掉的。

今天將程式整個大梳理了一番，總算有一點小成果。如果測試順利，就可以將它整合進 HTML5 注音高手、Speaking、單字高手、English1200 ......這些語法產生器中。

註: 

2023.05.15 最新版、將所有 HTML5 FUN 遊戲整合在一起的正式版發布了，請按這個連結使用：

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

玩玩 HTML5 FUN Editor

下面是 HTML5 FUN 題庫編輯器的雛形(哈哈哈～應該也不會變多少啦！)，目前適用於題庫欄位分隔符號是兩個井字號「##」的遊戲(以後應該會將 HTML5 FUN 中的遊戲題庫統一)。

大概幾個操作重點如下：

• 分為兩大輸入區，可依需求擇一使用：
• 上方的「圖形化題庫編輯器」中，欄位符號、圖片及聲音檔，均以縮圖或圖示顯示；輸入文字，則會以虛線框包成群組，方便識別。
• 下方的「題庫原始碼」，此區的內容，才是真正要複製並貼到遊戲設定檔中的內容。可以依照戲題庫格式輸入，輸入完，點一下輸入區以外的地方，上方的圖形化內容，也會自動更新。
• 新增欄位：因為這裡預設的欄位符號是「##」，所以只要輸入兩個井字號，即可新增欄位。
• 添加文字、圖片、聲音時，先讓游標停在兩個欄位圖示的中央後，再開始打字、貼網址，或是貼圖片。
• 聲音的部份，如果貼的是 Vocaroo 網站 錄好的語音網址，會自動將網址，轉成 HTML5 FUN 可用的格式。
• 在修改過題庫內容後，如果未完會更新，可以按一下右上角的「更新」鈕，即可將縮圖及相關內容呈現出來。

底下輸入區中有預填了三行題庫，可以比較一下不同輸入區，呈現的差異。也可以試著更改裡面的內容，看看有什麼變化。

玩玩看吧！

圖形化題庫編輯器

1. ######

題庫原始碼：

猫##貓##https://cdn.pixabay.com/photo/2016/01/20/13/05/cat-1151519__340.jpg 犬##狗##https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg トラック##卡車##https://cdn.pixabay.com/photo/2014/11/17/12/15/semi-trailers-534577__340.jpg

相關連結

• 雄:HTML5 FUN 精選集

• 雄:HTML5:Speaking@Blogger語法產生器

• 雄:HTML5:注音高手@Blogger 語法產生器

 更新記錄

• 2022.10.26 按圖形化編輯器上方圖示說明列中的圖示可以在游標處插入欄位分隔符號或是開啟 Vocaroo 錄音網站的連結。
• 2022.10.24 加入由剪貼簿貼上動作的處理，事先將文字分析並轉換後才貼上可用的語法。
• 2022.10.22 加入 Drag & Drop 的功能，收到圖片、聲音檔案以後，會轉為 DataURL 的格式，並以圖片的標籤直接貼在游標所在的地方；支援 BaseURL 的聲音資料；調整 MutationObserver 監聽的程序，只更新有異動的 LI ，減少負載。
• 2022.10.21 圖片可處理 DataURL 的 base64 格式；解析的程序重整，限定僅能使用 SAPN、IMG 的 tags，其它的通通過濾掉，可減少重覆解析的次數。
• 2022.10.19 第 0 版。