2017年10月2日 星期一

HTML5 : BINGO

2013年九月寫過一個 Flash 版的 BINGO 小學具,讓孩子們可以複習學過的成語,最近上課將它又拿到課堂使用,孩子們很愛玩,於是答應他們會放到班級網站中,回家也可以練習。不過,考慮到 Flash 無法跨平臺,於是下定決心,把曾經動念改寫,卻一直放著沒完成的 HTML5 版 BINGO 拿出來開工。經過幾天的努力,算是沒辜負孩子們的期待,把它完成了。



試玩的網址如下:



有興趣將它改成自己的題庫的話,可以繼續往下,將本篇看完,底下的筆記可以提供各位參考。


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

下載

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

下載的網址:


自訂選單及題庫

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

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

選單設定檔

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

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


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

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


題庫設定檔

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

在題庫設定檔中可以使用的參數(變數)名稱如下:
  • seperator:指定在題目字串中,各欄位的分隔符號。
  • question_field_number:指定題幹在第幾欄位(由 0 起算)。
  • answer_field_number :指定答案在第幾欄位(由 0 起算)。
  • auto_replace_answer :設定是否自動將題幹中帶有的答案字串用括號取代。
  • question_lines:設定題庫的內容,每一題以一對「單引號」括住。而題幹和答案的內容可以是圖片檔的檔名、一般文字、分數格式或加注音格式文字。

底下為如何設定題庫的簡易說明影片:


補充說明

HTML5 版的 BINGO 比 Flash 版多了一個顯示解釋的功能,可以在題庫設定檔中多加以下的欄位:
  • description_field_number:指定解釋在第幾欄位(由 0 起算)
如果有設定 description_field_number ,並且在該參數的欄位中有內容,遊戲畫面中會多一個問號的按鈕,按下去以後,遊戲會暫停,進入「提示模式」,並將答案選擇區暫時變成顯示提示(解釋)的選擇按鈕。再度按下問號的按鈕,遊戲的計時器會再度啟動並回到「作答模式」。

進入「提示模式」
另外,為了方便製作成語 BINGO,如果成語的國字與注音分為不同的欄位,還可以使用底下的參數來指定答案的注音在哪一個欄位:
  • phonics_field_number:指定注音符號在第幾欄位(由 0 起算)
如果有指定 phonics_field_number 並且在題庫中有設定注音的內容,程式會自動幫忙把答案的國字和注音重組為國字加注音的格式。

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


相關文章


更新記錄

  • 2017.09.25 .v3 加入「提示模式」的功能。 
  • 2017.09.22 HTML5 版首次公開
  • 2013.10.01 初稿



2 則留言:

 
© 2009. Design by Pocket