2006年設計的 Flash 版詞語大挑戰在2012年初改寫為「Flash : Monster 詞語大挑戰」，年底又新增了 HTML5 版，讓它可以 iOS 中使用。
不過，一直沒把 HTML5 版的參數說明整理記錄，最近將題庫的格式改得更有彈性一點，也盡量讓它和 HTML5 FUN 中的其它程式類似；都快十年過去了，順便將 HTML5 版的說明完成。
Monster 詞語大挑戰可以在 HTML5 FUN 的網站中直接玩範例題庫；如果想自訂題庫，也提供下載程式及範例。
直接玩：
 |
| HTML5 FUN::Monster |
功能特色
HTML5 FUN :: Monster 範例題庫是語詞填空的多選題，畫面下方會出現句子(題幹去掉填空的部份)，上方則會顯示候選的詞語(正確跟錯誤的選項):
 |
| HTML5 FUN Moster 的畫面 |
按下選項後，如果答對會加分，答錯則會有爆炸的音效。全部的正確答案都選完了，即可進入下一關(題)。雖然名稱是「 Monster 『詞語』大挑戰」，如果把題目換成數學式，也是可以哦！
簡單的說明一下功能特色：
- 使用 HTML5 開發，可以跨平臺、載具使用。
- 可自訂選單，對應不同的題庫。
- 可自訂題庫。
- 題庫支援單選或是多選擇題的題型。
- 題幹可自訂要填的位置及置換的符號。
- 如果瀏覽器支援，可以使用 HTML5 FUN 語音辨識外掛，答案用說的。
自訂題庫
HTML5 FUN 「Monster 詞語大挑戰」除了可以直接玩範例題庫，也可以將自己的題庫加入遊戲中。
想要製作自己的遊弃，最快速的方法就是使用 2023年推出的 HTML5 FUN 烘焙機：
另外一個方式就是將遊戲的所有檔案下載到電腦中以後，將檔案內容換成自己的題庫，遊戲選單也可以自己修改項目名稱，及要載入的題庫設定檔。
如果想自訂題庫，第一個步驟是先到 HTML5 FUN 網站中，下載「Monster 詞語大挑戰」的壓縮檔，並解壓縮。接著就可以參考底下的參數說明，用文字編輯工具開啟相關的檔案來自訂選單，或是題庫。
先來看看「Monster 詞語大挑戰」的啟動程序：
- 開啟 html5_monster.html 載入網頁及程式。
- 載入並執行主程式 monster.js。
- 載入主設定檔 monster_set.js。
- 載入選單設定檔(由 monster_set.js 指定的檔名)，預設的檔案是 monster_menu_set.js。
- 載入題庫設定檔(由選單設定檔中指定項目名稱和設定檔的對應關係)。原始的範例題庫設定檔有兩個:
* 心緒類語詞:初級篇 : monster_set_basic.js
* 心緒類語詞:高級篇 : monster_set_advance.js - 開始玩。
自訂選單
下載「Monster 詞語大挑戰」，並解壓縮好的 html5_monster 資料夾中，應該可以找到一個檔名為「monster_menu_set.js」的檔案，這個檔案就是「Monster 詞語大挑戰」的選單設定檔。我們可以用純文字編輯工具(例如 Notepad++ 或是 Windows 的記事本)來開啟。
monster_menu_set.js 的範例檔中有底下的內容：
menu_title='詞語大挑戰';
menu_items = new Array(
"心緒類語詞:初級篇,monster_set_basic.js"
, "心緒類語詞:高級篇,monster_set_advance.js"
);
選單設定檔內容，對照「Monster 詞語大挑戰」的選單畫面如下圖所示：
 |
| HTML5 Monster 選單設定與選單對照圖 |
設定檔中只使用到兩個參數：
- menu_title : 選單上方的標題字。
- menu_items : 選單項目的設定。
「項目名稱」「逗號」「題庫檔檔名」
所以當使用者按下選單中的「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔，載入成功，就可以開始玩。
自訂題庫
前面提到，我們在 monster_menu_set.js 的選單設定中，指定按哪一個選項，讓程式去載入哪個題庫設定檔。範例中，按「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔；我們可以利用純文字編輯工具開啟「monster_set_basic.js」，來編輯它的內容。底下來看看可以自訂哪些參數。
- scoreToAdd : 答對時加幾分。
- scoreToMinus : 答錯時扣幾分。
- timerDefault : 倒數計時的秒數。
- question_O_X_seperator : 「題幹」、「正確答案」和「錯的選項」之間的「欄位分隔符號」，共分為三個欄位，所以一個題組(一行)中，應該會使用到這個符號兩次。
- options_seperator : 「正確答案」和「錯的選項」都可以有多個，每個選項之間，用這個符號來當分隔。
- blank_pattern : 在題幹中，要變成「填空」的地方；程式只要看到題幹字串中，和設定值一樣的地方，就會用「blank_replacement」設定的值來置換掉。
- blank_replacement : 程式在題幹中，找到「blank_pattern」後(「填空」的地方)，要置入的字串。
- question_lines : 題庫。它底下的每一行就是一個題組。所以十行就有十個題組。
其中最重要的是 question_lines ，它是題目的來源，格式很簡單：
- 一個題組一行。
- 每一行中以「question_O_X_seperator」指定的符號來分隔欄位，必須有三個欄位。由左而右，依序分別為「題幹」、「正確答案」和「錯的選項」。
- 「正確答案」和「錯的選項」中，如果有多個選項，就以「options_seperator」所指定的符號來分隔。
假設分隔符號及填空設定值為：
question_O_X_seperator = "##";
options_seperator = ",";
blank_pattern = "◎";
blank_replacement = "( )";
 |
| HTML5 FUN Monster 題庫格式 |
解說一下「 question_lines 」中的這一行：
他的惡作劇，讓大家◎。##很難過,很不高興,很生氣,很討厭,受不了,發火,發狂##開心,佩服,喜歡,喜愛,感動
我們可以看到有兩個欄位分隔符號「##」，將這個題組切為三部份：
- 他的惡作劇，讓大家◎。（題幹）
- 很難過,很不高興,很生氣,很討厭,受不了,發火,發狂（正確答案）
- 開心,佩服,喜歡,喜愛,感動（錯的選項）
題幹的部份，「◎」會被程式用「( )」置換掉，變成：
他的惡作劇，讓大家( )。
確答案會再用選項的分隔符號「,」，切為七個：
- 很難過
- 很不高興
- 很生氣
- 很討厭
- 受不了
- 發火
- 發狂
而錯的選項也會再用選項的分隔符號「,」，切為五個：
- 開心
- 佩服
- 喜歡
- 喜愛
- 感動
參考上面題庫的格式，您就可以設計自己的的 HTML5 Monster 囉！
語音外掛
HTML5 Monster 在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。
另外，畫面上的「回主選單」、「重新挑戰」可以用語音來「按」。
相關文章
更新記錄
- 2022.06.23 修正在 iOS 中，音效無法播放的問題；修改對話框的按鈕，讓它可以使用語音來「按」。
- 2022.06.13 修改題庫格式，舊格式仍可相容；新增自訂題庫資料分隔符號的參數 question_O_X_seperator、options_seperator；可自訂填空置換的搜尋字串參數 blank_pattern ，及要置換成什麼的參數 blank_replacement。
- 2012.12.01 HTML5 版
- 2006.04.15 Flash 版
發表文章
沒有留言:
張貼留言