2022年1月27日 星期四

HTML5 : Lotto 題庫編輯器

2022年1月27日 星期四

在我的 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 樂透機中的覆蓋掉,下次開啟的題庫就是它囉!

相關文章









沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket