在我的 HTML5 FUN 中有一個樂透機，可以拿它來當提問的工具，或是拿來抽籤、摸彩......。除了抽出彩球，抽完還能在蹦出的「對話框」中，顯示不同的內容。彩球球面上可以顯示文字和圖片；而對話框中則可以顯示文字、圖片或播放聲音檔。這部份可以參考 2012年這篇舊文：
去年曾經為另兩個 HTML5 的作品「戳戳樂」和「幸運輪」加上了即時題庫編輯器，利用打字及拖、拉、放的動入，即可完成題庫的製作。圖片跟聲音檔用拖曳到編輯區，可自動將檔案「編碼」，並新增至題庫中。不過，那個編輯器比較陽春，無法預覽圖片，只會看到一長串見不到底的「亂碼」，實在怪嚇人的。
最近研究了較新的方式，可以在題庫編輯器中預覽圖片，畫面乾乾淨淨的，「亂碼」通通「躲」起來了！這樣看起來比較有親和力些了！
 |
| [圖1] 上面可預覽圖片，底下則是原始碼 |
想試試看，可以在 HTML5 FUN 的網站中找到 HTML5 樂透機：
快速新增號碼題
當我們打開 HTML5 樂透機，可以看到左右各有一個設定按鈕。
 |
| [圖2] 修改題庫的按鈕 |
[圖2] 左側綠色箭頭的按鈕按下去，可以快速將彩球的內容換為數字：
 |
| [圖3] 快速新增號碼題 |
設定好最小和最大的數字，及要跳過不用的號碼清單，再按一下底下黃色的按鈕，立即將彩球都變成號碼球了。
使用題庫編輯器
[圖2] 紅色箭頭的按鈕按下去，就會打開題庫編輯器。它會先顯示目前使用中的題庫內容，每一題的內容都用橫線分隔了。圖片會直接顯示它的縮小圖，如果是「破圖」的圖示，則是聲音檔。
 |
| [圖4] 題庫編輯器 |
如果想要新增圖片或是聲音，就直接用檔案總管拖曳進題庫編輯器中要放置的地方。成功的話，應該會出現縮圖。
底下是在 PC 上更換題目的操作影片：
接著是在 iPad 上 HTML5 樂透機修改題目的過程：
哈哈哈～個人是比較喜歡在電腦修改題庫，圖片檔和聲音檔只要拖、拉、放，就可以加內容，多輕鬆。目前在 Chrome 和 Firefox 測試過，基本上沒什麼問題。不過，強烈的建議圖片的解析度不用太高，反正最後都會被我的程式縮小為 640x480，太大只會在建題庫時吃更多資源而已。聲音則不建議用時間長的檔案。
修改過的題庫，如果下次還要用，建議按一下 [圖4] 箭頭處的匯出按鈕，它會將設定匯出在一個設定檔中，儲存好後，只要確認檔名是 HTML5 樂透機用的 lotto_set.js，並以它把原來 HTML5 樂透機中的覆蓋掉，下次開啟的題庫就是它囉！
相關文章
- 雄 : HTML5 : lotto 樂透摸彩機
- 雄 : HTML5 : Lotto 樂透摸彩機@Blogger語法產生器
- 雄 : HTML5 : Poke 戳戳樂
- 雄 : HTML5 : wheel 幸運轉輪
發表文章
沒有留言:
張貼留言