雄的 HTML5 FUN 網站提供了一些不用安裝，可以直接在網頁瀏覽器中使用的數位學具與教具，它們除了可以使用已建立好的題庫，還可以打造成自己的工具或是遊戲。
如果想試玩各個遊戲或工具，就到 HTML5 FUN 網站，網址如下：
如果想查看各個遊戲或工具的詳細說明，或是手動建立題庫的方法，請參考「HTML5 FUN 精選集」：
遊戲式題庫烘焙機 (HTML5 FUN Homepage)
什麼是「遊戲式題庫烘焙機 (HTML5 FUN Homepage)」？
這個「烘焙機」是我和好友江明勳老師經過一番討論後，幫 HTML5 FUN 遊戲製作工具所取的名稱 (「Homepage 烘焙雞」的聯想)。
HTML5 FUN 的遊戲題庫彈性其實可以很大，透過題庫設定，可以自訂題庫內容，打造自己的遊戲。為了方便大家能在網頁瀏覽器中即可設定，最後還能將遊戲放到網站中使用，無論是 Blog、Google Sites、Weebly 或是其它網站中，都可以使用 HTML5 FUN 烘焙機來製作嵌入的語法；甚至下載為單一遊戲網頁，打開來就可以在本機玩。
目前 HTML5 FUN 大部份可自訂題庫的遊戲都有支援烘焙機，打開烘焙機以後，即可看到已支援烘焙機的遊戲清單，並由清單中選取想製作的遊戲；有的遊戲還支援多種題庫設定範本，製作時可以參考範本，輕鬆設定。
HTML5 FUN 的烘焙機，只要三大步驟就可以製作嵌入網頁的HTML語法；貼入 Blogger 、Google Sites 或其它網頁中，即可分享、使用自製的 HTML5 FUN 遊戲。
製作 HTML5 FUN 的遊戲就是這麼簡單，讓我們馬上按底下的啟動按鈕，打開「HTML5 FUN 烘焙機」製作自己的 HTML5 FUN 遊戲吧！
Let's go ～～
步驟 1
1-0 選擇遊戲及題庫樣板
選擇遊戲
選擇題庫樣版
1-1 輸入題庫 ？
- 每一行即是一個問題
- 每題用欄位分隔符號分為問題跟選項
- 支援多種格式，請依需求選用題庫様板
您可以在圖形化編輯器或是原始碼輸入區中
填入自己的題庫內容：
圖形化題庫編輯器
- ######
題庫原始碼：
1-2 設定其它參數 ？
按這裡展開並設定其它選項
以上為主要的設定
其它更多的參數，請在複製原始碼貼到您自己的Blogger(HTML檢視)之後，再自行設定。
步驟 2
(進入遊戲畫面後，按右上角的小叉叉可以再回到語法產生器)
步驟 3
底下可以將合併後的原始碼貼到網站
下載遊戲或是匯出設定檔
以 Blogger 為例
- 在前面「步驟1」輸入題目及修改遊戲選項。
- 按底下的 【查看合併後的原始碼-自動複製到剪貼簿】
複製合併後的原始碼。 - 進入Blogger建立新文章。
- 輸入「標題」。
- 文章編輯工具最左邊的 <> 切換為 <>HTML檢視。
- 貼上複製的原始碼。
- 按 ➤發布測試。
- 沒問題就可以編輯文章，自訂題庫，再按 ➤更新 更新內容。
- Google Sites 或是其它網站也是類似的程序。
- 下載單獨執行的網頁檔案可以按
- 想匯出成題庫設定檔可以按
詳細說明
Blogger 協作平台 WordPress Padlet 下載與匯出
功能選項
是否要自動啟動遊戲
(勾選 :直接進入遊戲 ； 未勾選 :按按鈕啟動)
是否要嵌入 Google Sites (協作平台)
(勾選 : Google Sites 專用的語法 ； 未勾選 :使用一般語法)
應用於 Google Sites
將遊戲開啟在獨立的視窗
是否要以 Google 試算表當資料庫
(勾選 : 貼到試算表的專用語法 ； 未勾選 :使用一般語法)
是否要嵌入 ClassroomScreen
(勾選 : ClassroomScreen 專用的語法 ； 未勾選 :使用一般語法)
請依需求按一下底下的功能選項或左右的圖示
發表文章
打不開匯出題目設定檔
回覆刪除您好，
刪除「匯出題目設定檔」匯出的檔案是一個 .js 的文字檔，它可以使用類似 Windows 的「記事本」或是 Notepad++ 的純文字編輯器來開啟。這個檔案是搭配 HTML5 FUN 下載回來的壓縮檔使用的，並無法單獨運作哦～
如果您是要能單獨運作的話，請使用步驟３左上角的「下載可單獨運行的網頁」，它是設定加上遊遊啟動指令的網頁，可以在電腦上直接用網頁瀏覽器來開啟。
如果您的需求是離線玩，就必須:
刪除1.到 HTML5 FUN 網站下載打包好的遊戲 .zip 壓縮檔，並解壓縮檔案。
2.利用烘焙機步驟3右上角的「匯出設定檔」。
3.在前面解壓縮的遊戲目錄中，並將原來的遊設定檔改名或刪除；將匯出的設定檔搬移到遊戲目錄中，並改名為遊戲需要的設定檔名稱。(有的遊戲可以編輯選單的，就照製作選單的方式操作)。
請問之前（實驗階段）用google drive 一鍵創立語法的功能之後還會開放嗎？用注音高手搭配你們開發的這個方式 可以自訂圖片 在統一創建題庫 非常便利快速！pixabay 上傳功能也變了...
回覆刪除您好，
刪除哈! 原來那個功能有人在用! ^_^
之前因為發現 MP3 與 MP4 的部份，Google 已阻擋而不能用了，因此將功能暫時隱藏起來。剛剛將不能用的設為不能勾選，讓功能重現了。
另外，不知道您說的「pixabay 上傳功能也變了 」，指的是什麼? 這幾天是有人發現 Padlet 上傳的功能變了，所以我有在該說明的舊文前面加上註解了。
謝謝您回報使用上的問題。
看了您在 YouTube 注音高手影片中的留言，大概猜出您指的 Pixabay 的可能問題了。
刪除如果您想加圖片與自訂的語音，記得要先按一下上方「圖示」中的「欄位分隔(輸入 ## 新增) 」那個圖示，加入「欄位分隔符號」再貼圖片；注意示範影片時間點 1:32 起 , 在「小狗」後面是有一個「欄位分隔符號」的；其它題目想加圖片或是自訂語音，都必須自己按「欄位分隔符號的圖示」，確定有欄位分隔符號了，再貼圖片。
謝謝你撥空回覆！這個功能真的太棒了！超級喜歡！
回覆刪除老師您好，感謝您的無私分享。請問該如何放入自製錄音檔在重組遊戲(重組句子)的程式中?
回覆刪除可否從google雲端硬碟中聯結呢? 感謝。
您好，
刪除關於重組遊戲的題庫格式可以參考重組遊戲的說明舊文。
題庫第一欄為題目，聲音可以放在第二欄或其它欄位，看您的需求。
Google 雲端硬碟中的影音檔案已無法由 HTML5 FUN 的遊戲載入，如果遊戲是要放線上玩的，又想自己錄音的，建議可以使用 Vocaroo (烘焙機中的[去錄音] 有連結)，Vocaroo 可以立即錄音或是上傳現有音檔，而 HTML5 FUN 的遊戲直接支援它分享的網址。
感謝老師的回覆。如果我在句子重組裡使用多個音檔，該如何利用Vocaroo搭配使用呢? 或是有其他方式可使用放在網路上的音檔呢? 另問可否把中英文字體縮小，因為題目字數較多，螢幕被塞滿了。感謝老師。
刪除您好，
刪除題庫中可以有多題，每一行為一題，一題中只能使用一個音檔。
「有其他方式可使用放在網路上的音檔呢?」這問題基本上就是動手試，將音檔的網址放到題庫中，試玩時，聽得到，就表示可以用，不能用，那就只能找可以用的來用(好饒舌的感覺)
字體的部份是程式依字數自動計算的，無法自訂。其實會建議不要使用字數太多的題目，玩起來比較有趣味。不然就得找其它工具來試了。
老師您好，不好意思，最近問題比較多。我把"搶救公主"的中英文位置對調，讓學生看英文選中文，請問可以讓英文發出聲音嗎? 感謝您的耐心回覆。
回覆刪除您好，
刪除從您的問題看來，您應該不是上過我研習課的學員吧？我跟學員會有通關密碼 XDDD
建議您先到我 YouTube 中看一下烘焙機教學影片再操作，可能會較清楚烘焙機怎麼使用。HTML5 FUN 中的遊戲能支援的題目內容，並不一定相同的，得看一下烘焙機中，各題庫範例的說明：
特別注意一下「1-1 輸入題庫」中都有簡易的格式說明，再不然就是在 blog 中要找到該遊戲的說明文章(我的網站右上方有搜尋的方塊可以使用，不然就是找一下「HTML5 FUN 精選集」中的清單。
搶救公主" 這一系列的遊戲並不支援聲音哦!
了解，感謝老師解惑。
刪除請問"下載單獨執行的網頁檔案"的連結似乎無法在手機中使用，google搜尋出現"找不到符合搜尋字詞" file:///C:/Users.....html的文件，但在筆電裡使用是可以的。是否手機無法使用這種連結呢? 感謝解惑。
手機、平板等行動載具本就無法直接開啟下載後的網頁檔案，真想開來用，只好安裝有支援的 Apps，至於有什麼 Apps 可以，您可以自行到網路搜尋答案。
刪除HTML5 FUN 有個「遊戲啟動器」的機置，或許您可以玩玩看，Blog 中有說明文件，YouTube 中也有影片。不管有沒有聽過我的課，其實常見的問題，在文章中、影片中可能都有答案了。另外，用電腦最大的好處就是花一點時間，參考說明，動手去試，可不可以、行不行就可以馬上知道答案了；反正玩不壞的 ^_^
感謝老師回覆，我試著在google site插入修改的原始碼，發布後仍然無法用手機開啟。但我發現手機可以在老師的網站執行遊戲:
回覆刪除https://gsyan888.github.io/html5_fun/ (HTML FUN BY GSYan)。
請問我如何做一個這樣的網頁(或任何方法)，讓手機可以直接到某個地方，執行我修改過內容的遊戲。感謝老師的解惑。
您好，
刪除不知道是不是按照這個教學影片操作的?
https://www.youtube.com/watch?v=n2HEoYCIim0
放到 Google Sites 中，在烘焙機中一定要勾選「應用於 Google Sites」
我的 YouTube 頻道:
https://www.youtube.com/@gsyan888
老師您好，我看了影片，勾選「應用於 Google Sites」，也勾選了
刪除「將遊戲開啟在獨立的視窗」。
手機無法執行"開啟在獨立視窗" (按下去沒有反應)，但可以直接在google sites 的頁面的頁面執行，感謝。
您好，
刪除建議您先在電腦中開開看，看是不是就能開啟了。
"開啟在獨立視窗" 是有可能被瀏覽器攔截而看不到的，以iOS 的 Safari 來說，它有個設定叫作「阻擋彈出式視窗」，如果這個選項啟用了，您是一定看不到的，所以建議您要多方測試，並檢查自己載具的設定。另外，正因為這樣，如果您是設計給學生使用的，使用這個方式，學生也可能「莫明」地開不了您設計的東西。