2017年10月2日 星期一

HTML5 : BINGO

2017年10月2日 星期一
HTML5 BINGO 是源自於 2013年九月分享的 Flash 版 BINGO 小學具 (請參考舊文: 雄:Flash : BINGO)，當時主要是想讓孩子們可以複習學過的成語。2017年上課將它又拿到課堂使用，孩子們很愛玩，於是答應他們會放到班級網站中，回家也可以練習。不過，考慮到 Flash 無法跨平臺，於是下定決心，把曾經動念改寫，卻一直放著沒完成的 HTML5 版 BINGO 拿出來開工。經過幾天的努力，算是沒辜負孩子們的期待，把它完成了。

[圖1] HTML5 BINGO 的起始畫面截圖

HTML5 BINGO 收錄在 HTML5 FUN 的網站中，在網站中找到 BINO 的圖示，按下去就可以玩已建立的範例題庫；除此之外，可以下載打包好的遊戲檔案，離線玩範例題庫，甚至加入自己的題庫；想要將遊戲嵌入到自己的網站中，則可以使用 HTML5 FUN 的烘焙機來製作。

HTML5 FUN 網站的網址如下：

HTML5 BINGO 試玩的網址如下：

HTML5 FUN 烘焙機的網址如下：

功能特色

以下是 HTML5 FUN BIONGO 的一些特點：

  • HTML5 開發，只要有瀏覽器，即可以跨平臺使用。
  • 可以自訂賓果的格子數，過關後，玩家可以繼續挑戰更多格或重玩。
  • 題幹支援文字、圖片、聲音的內容；答案支援文字及圖片的內容；文字除了一般文字以外，支援國字加注音及分數格式。
  • 題庫可以使用題幹＋答案的題庫格式，以兩個欄位來建立題庫；也可以使用出題光碟的 CSV 格式；或是自訂欄位，使用多欄位來出題。
  • 可以自訂提示內容。
  • 純文字的題幹或是答案，可以啟用 TTS 的選項，以合成語音念出來；題幹會出現語音播放器，除了會自動播放，也可以手動播放；答案則是答對時，以合成語音念出來。
  • 支援 HTML5 FUN 烘焙機出題，可以將遊戲嵌入網站中。

如有興趣使用自己的題庫來打造遊戲的話，可以繼續往下，將本篇看完，底下的筆記可以提供各位參考。

以「烘焙機」來打造自己的遊戲

[2023年補記] 自2023年起，HTML5 FUN 的遊戲大多有支援「遊戲式題庫烘焙機 (HTML5 FUN Homepage)」，利用「烘焙機」就可以線上出題、修改遊戲參數；最後可以直接下載遊戲網頁、匯出遊戲設定檔，甚至將遊戲嵌入自己的網誌、網站中。

HTML5 BINGO 也有支援「烘焙機」，想要打造自己的遊戲嗎？

詳細的說明及示範影片，請按底下的連結：


如果想了解如何以早期的方式來修改遊戲設定，則可以參考下一小節中的說明。

以修改設定檔的方式打造自己的遊戲

HTML5 版 BINGO 如同 2013 年 Flash 版的 BINGO 一樣，它是可以自訂題庫的，除此之外，本次的改版，順便加入了自訂選單的功能，可以將不同單元或課別的題庫放在同一個連結中，管理起來應該會更方便。

下載

首先當然得先將程式及範例設定下載到自己的電腦中囉！

下載的網址：

自訂選單及題庫

HTML5 BINGO 可以自訂選單及題庫，因為它的設定檔都是純文字格式的，所以我們只要利用純文字的編輯工具即可開啟設定檔並修改裡面的內容。個人在 Windows 上習慣用 Notepad++，如果不想再額外安裝工具，在 Windows 中可以直接使用附屬應用程式中的「記事本」來編輯設定檔。不過，因為「記事本」預設是用來編輯 *.txt 的檔案，所以在「開啟舊檔」的對話框中，記得要先將「檔案類型」設為「所有檔案」，這樣子才能看到 .js 的設定檔。詳細的說明可以參考這篇「雄 : HTML5 : 如何以Windows的記事本修改.js設定檔」中的說明。


選取「所有檔案」才看得到 .js 設定檔

題庫設定檔

當我們按下選單項目後，程式會試著幫我們載入它指定的題庫檔。題庫檔裡面除了題庫以外，可以透過設定告訴程式要如何去解析出「題幹」、「答案」或是其它相關資訊。

在題庫設定檔中可以使用的參數(變數)名稱如下：

  • seperator：指定在題目字串中，各欄位的分隔符號。
  • seperator2：指定在題目字串中， 題幹混合使用「文字」、「圖片」、「聲音」時，不同素材間的分隔符號。(2024.01.13 新增的功能)
  • question_field_number：指定題幹在第幾欄位(由 0 起算)。
  • answer_field_number ：指定答案在第幾欄位(由 0 起算)。
  • auto_replace_answer ：設定是否自動將題幹中帶有的答案字串用括號取代。
  • 針對成語的額外欄位(成語可以使用四個欄位)：
    • phonics_field_number : 注音符號在第幾欄位(由 0 起算)。
    • description_field_number : 解釋在第幾欄位(由 0 起算)。
  • optionColTotal : 一列有幾個選項。預設為 3，所以啟始會有 3x3 格；遊戲過關後，會自動加一，讓玩家選擇是否繼續挑戰 4x4 格，以此類推。(2024.01.10 新增的功能)
  • enableBingoStar : 奇數個選項時，是否在正中央加一個星號。預設值為 true，當 optionColTotal 為奇數時，會在央加星號，破壞兩條對角的連線。
  • 文字轉語音(TTS) 的相關設定參數：
    • tts_language : 念[題目]時用的語言代碼，例如  'en-US' 'zh-TW'
    • tts_speed : 語音的速度 0 ~ 1 (可用小數)
    • question_text_speaking_enabled : 題幹是文字題時，是否用 TTS 念出文字，true :念出文字   false :不使用此功能。
    • tts_language_of_answer : 念[答案]時，使用的 TTS 語言代碼。
    • answer_text_speaking_enabled : 答案是文字題時，是否用 TTS 念出文字，true :念出文字   false :不使用此功能。
  • questionLines：設定題庫的內容
    • 一題一行。
    • 題幹欄位的內容可以是 [文字]、[圖片]、[聲音]，可以混用(以seperator2分隔)。
    • 答案欄位的內容可以是 [文字]、[圖片]，但是只能使用一種。
    • [文字] 型態的內容可以是 [一般文字]、[分數格式]，或 [國字加注音格式]。
HTML5 BINGO 的題庫設定

底下為如何設定題庫的簡易說明影片(此影片使用的是舊版設定格式)：


成語的額外欄位補充說明

HTML5 版的 BINGO 比 Flash 版多了一個顯示解釋的功能，可以在題庫設定檔中多加兩個欄位，變成四個欄位，所以多了兩個可以設定的參數：

  • description_field_number：指定解釋在第幾欄位(由 0 起算)

如果有設定 description_field_number ，並且在該參數的欄位中有內容，遊戲畫面中會多一個問號的按鈕，按下去以後，遊戲會暫停，進入「提示模式」，並將答案選擇區暫時變成顯示提示(解釋)的選擇按鈕。再度按下問號的按鈕，遊戲的計時器會再度啟動並回到「作答模式」。

進入「提示模式」

另外，為了方便製作成語 BINGO，如果成語的國字與注音分為不同的欄位，還可以使用底下的參數來指定答案的注音在哪一個欄位：

  • phonics_field_number：指定注音符號在第幾欄位(由 0 起算)

如果有指定 phonics_field_number 並且在題庫中有設定注音的內容，程式會自動幫忙把答案的國字和注音重組為國字加注音的格式。

相關的題庫範例可以參 data 目錄中的題庫設定檔檔案。

選單設定檔

當我們打開 HTML5 BINGO 後，程式會自動載入 「bingo_menu_set.js」 中的設定值，這個「bingo_menu_set.js」就是選單的設定檔。

選單設定檔主要是提供兩項資訊：選單「項目名稱」和按下去以後要載入的「題庫設定檔檔名」。所以，每一行選單設定會有兩個欄位，而欄位跟欄位之間是以一個「半形逗號」來當欄位的分隔符號。


在欄位分隔符號左側的「第 0 欄位」為選單的項目名稱，右側的「第 1 欄位」則為按下該項目以後會自動載入的題庫設定檔的檔案路徑。

底下為如何設定選單的簡易說明影片：




相關文章

更新記錄

  • 2024.01.15 題幹的聲音播放器可以拖曳至想放的位置，改變過後，在沒關掉之前，播放器都會放在該位置。
  • 2024.01.13 題幹可以混合使用文字、圖片、聲音，設定時，不同媒材間用 speparator2 所指定的分隔符號分隔。
  • 2024.01.10 新增一個 optionColTotal 的參數，可以自訂格子是幾乘以幾，預設為 3x3，如果 optionColTotal = 4，就會變成 4x4，如果 optionColTotal 為偶數時，中央不加星星，可以有對角連線 Bingo，奇數時則因為中央會放星星，所以不能對角連線 Bingo；遊戲過關時，可以選擇重玩或是挑戰格數增加；新增參數 enableBingoStar ，預設為 true，當格子數為奇數時，會在正中央那一格放一個星號，如果設為 false，無論多少格，都不會以星號佔去中央的格子；修正國字加注音及分數格式，字型大小不會自動調整的問題。
  • 2024.01.09 將純文字的選項字形自動依格式的大小調整至最大(長寬各留白40點，剩下的空間盡量填滿, bingo.addOption)；啟動程式時會載入注音字型及 EngTRESS A 字型檔案，純英、數時，使用 EngTRESS A 字型。
  • 2023.07.19 題幹支援聲音的題型；新增question_text_speaking_enabled、answer_text_speaking_enabled 兩個參數，文字題時，可以啟用念出題幹或是答案。
  • 2022.06.12 更新語音輸入的外掛，將按鈕調整，並自動調整位置至左下角；比對時，將中文先換為拼音(江明勳老師建議)，讓同音時可使用；判斷對錯時，如果按鈕上的文字是語音辨識結果中的一部份，即可算對，提升應用在線上教學時容錯；MIC按鈕上的文字會依對錯以不同的延遲時間後清除，找到是按鈕上的就顯示「繼續」，否則顯示辨識出的文字。
  • 2021.06.18 未改動主程式，但網頁載入時，會先載入語音辨識的外掛，可以使用麥克風說出按鈕上的字來回答。
  • 2018.02.08 .v4 選單設定中加入第三個欄位，可以指定第二欄位的檔案是選單設定檔，按下該選項時會載入另一個選單，而不是題庫，讓選單可以較有結構化。針對題庫的欄位多一些檢查，避免出現 'undefined' 的錯誤訊息。
  • 2017.09.25 .v3 加入「提示模式」的功能。 
  • 2017.09.22 HTML5 版首次公開
  • 2013.10.01 初稿



By at
標籤: ,

5 則留言:

訂閱： 張貼留言 (Atom)
 
雄::gsyan © 2009. Design by Pocket