「量詞大考驗」是我在2010年5月左右以 Flash 寫小程式，當時曾在噗浪上和噗友分享與討論，沒幫它寫過詳細的介紹文，只在自己網站的 Flash 作品集「雄之語文高手」頁面有了底下簡單的描述：
一隻、一枝、一打......這些量詞你知道怎麼用嗎？挑戰一下你對量詞的瞭解程度。遊戲的題庫可以自行擴充的，目前的題庫的來源主要是由雄老師將之前王文裕老師設計的"喜從天降”CAI 中的題庫轉換而來。
沒文章記錄，原本已經忘了是在什麼時候將 Flash 版的量詞大考驗改為 HTML5 版了，幸好在程式的一角有留下了 2012.11.28 的戳記，應該就是那日發布的吧？
最近重新檢視了自己的 HTML5 FUN 作品中，哪些可以使用HTML5 FUN 語音外掛，才發現 HTML5 Bubble 量詞大考驗很久沒維護了，於是幫它加上了音效，也把可自訂的題庫設定，改得更有彈性一點，順便補上這篇說明。
HTML5 版的量詞大考驗可以 HTML5 FUN 的網站中玩，或是下載回來，改成使用自訂的題庫：
 |
| HTML5 FUN 量詞大考驗 |
功能特色
HTML5 量詞大考驗主要是針對量詞的練習來設計，所以題庫中主要分為「量詞」、「名詞」和「說明」，而「名詞」的部份有對的跟錯的選項，所以每一個題組中共有四個部份；出題時，再由程式在量詞前面加上數詞組合成多選題的題目。
底下稍微介紹一下它的功能特色：
- 可跨平臺使用，免安裝，只要有支援 HTML5 的瀏覽器，即可使用。
- 支援自訂選單及自訂題庫，可以打造自己的量詞大考驗。
- 支援 HTML5 FUN 的語音外掛，答案可以用說的。
自訂遊戲
如果想快速地製作自己的遊戲，可以使用 2023年推出 HTML5 FUN 烘焙機來製作量詞大考驗的遊戲，裡面有多種樣版供快速套用：
另一個方式就是將量詞大考驗的所有檔案下載到電腦以後，修改成自己的內容。HTML5 量詞大考驗可以將題庫換成自訂的題目，第一個步驟是先到 HTML5 FUN 的網站中，將打包好的 html5_bubble.zip 壓縮檔下載回來，將它解壓縮以後，應該會有一個名為「html5_bubble」的資料夾，裡面跟自訂遊戲的相關的設定檔檔案如下所示：
- bubble_set.js (主設定檔)
- bubble_menu_set (選單設定檔)
- 題庫設定檔則都存放在名稱為 data 的資料夾中：
- b01-1.js (量詞找名詞生手級題庫設定檔)
- b01-2.js (量詞找名詞入門級題庫設定檔)
- b01-3.js (量詞找名詞高手級題庫設定檔)
- b02-1.js (名詞找量詞生手級題庫設定檔)
- b02-2.js (名詞找量詞入門級題庫設定檔)
- b02-3.js (名詞找量詞高手級題庫設定檔)
上面的設定檔，都可以使用純文字編輯器(例如 Windows 上可使用 Notepad++ 、記事本......) 來開啟並修改。
自訂選單
由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗中，預設使用的選單設定檔，檔名是「bubble_menu_set.js」。
選單設定檔主要的用途是讓程式知道要在畫面上呈現的標題及選單項目名稱；以及當選單項目被按下去以後，要載入哪一個題庫設定檔。所以它的設定項目不多。
 |
| [圖1] HTML5 量詞大考驗選單畫面及設定的對應 |
選單設定檔中可自訂的參數如下：
- menu_title : 畫面上方要出現的標題字。
- datafolder : 題庫存放的資料夾名稱。
- menu_items : 選單項目名稱和題庫檔檔名(兩者之間用逗號分隔)。
以 [圖1] 中的選單設定來說，當我們按下「量詞找名詞生手級」的選項以後，程式會到資料夾「data」(datafolder 指定的)中，找到「b01-1.js」這個題庫檔案，並載入題庫。
自訂題庫
由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗壓縮檔解壓縮後，有一個名稱為「data」的資料夾，裡面有六個範例題庫設定檔。以純文字編輯器開啟以後，即可修改為自己的題庫。
題庫設定檔中，能夠自訂的參數如下：
- numberOfQuestionsPerGame : 抽幾題題目來作答。這個參數如果設為 0 ，表示要將題庫檔中的所有題組都回答完，才會結束；因為可以自訂要回答幾個題組，結束遊戲。
- question_O_X_seperator : 題幹、正確答案、錯的選項和解說對話框文字之間的欄位分隔符號。一個題組需要有四個欄位，所以應該會使用到本符號三次。
- options_seperator : 多個答案選項之間的分隔符號，對的答案和錯的選項都用同樣的符號。
- question_type : 題目類型
- 設為 1 時，數字(question_number_string)會由程式加到題庫的題幹欄位(第 1 欄)中。
- 設為 2 時，數字(question_number_string)會由程式加到題庫的選項欄位(第 2,3 欄)中。
- question_number_string : 可使用的數字列表，如果有多個時，以 options_seperator 設定的字當作分隔符號。
- question_lines : 題庫內容。這個參數最重要，它底下的每一行就是一個題組，如果有十行，就表示有十個題組。
在題庫設定檔中，最重要的是 question_lines ，它是題目的來源，格式很簡單：
- 一個題組一行。
- 每一行中以「question_O_X_seperator」指定的符號來分隔欄位，必須有四個欄位。由左而右，依序分別為「題幹」、「正確答案」、「錯的選項」和「解說對話框文字」。
- 「正確答案」和「錯的選項」中，如果有多個選項，就以「options_seperator」所指定的符號來分隔。
以 data 資料夾中的題庫設定檔 b01-1.js 來說，它的分隔符號、題目類型及數字列表設定值為：
question_O_X_seperator = ";";
options_seperator = ",";
question_type = 1;
question_number_string = "一,兩,三,四";
以題庫設定參數 question_lins 中的這一行為例：
頭;牛,山羊;馬,黑狗,猴子,鳥;計算牛、羊的單位。
和遊戲畫面對照的結果：
 |
| [圖2] HTML5 量詞大考驗題庫與畫面對照圖 |
「;」分號為欄位分隔符號(question_O_X_seperator)，題目中有三個「;」分號，將這個題組切為四部份：
- 頭
- 牛,山羊
- 馬,黑狗,猴子,鳥
- 計算牛、羊的單位。
「,」逗號為多選項的分隔符號，將正確答案切為兩個：
- 牛
- 山羊
「,」逗號為多選項的分隔符號，將錯的選項切為五個：
- 馬
- 黑狗
- 猴子
- 鳥
因為題目的類型(question_type)是設為「1」，[圖2] 中，飛鳥所拉的紅布條上有「四頭」，數字「四」是由「question_number_string」的設定值中，以亂數隨機取出來的，它和題組中的題幹欄位(左起第一欄)的「頭」合在一起，就變成「四頭」了。
當玩家選錯選項時，就會如 [圖2] 中，跳出解說的對話框，解說的文字是在題組設定中的第四個欄位，本題組是「計算牛、羊的單位。」。
以上的資訊在製作自己的自訂題庫檔案時，可供參考。
語音外掛
HTML5 量詞大考驗在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。
另外，畫面上的「繼續挑戰」、「開始挑戰」的按鈕，可以用語音來「按」。
相關連結
更新記錄
- 2023.04.19 修正題目去掉空白及欄位數不足時演算的錯誤。
- 2022.06.24 建立說明文章。
- 2022.06.23 更改按鈕的元件，以支援更多的語音指令。
- 2022.06.22 加入音效。
- 2012.11.28 HTML版發布。
- 2010.05.06 Flash 版於噗浪分享。
發表文章
沒有留言:
張貼留言