2022年6月16日 星期四

HTML5 : Monster 詞語大挑戰

2022年6月16日 星期四

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 詞語大挑戰」的啟動程序:

  1. 開啟 html5_monster.html 載入網頁及程式。
  2. 載入並執行主程式 monster.js。
  3. 載入主設定檔 monster_set.js。
  4. 載入選單設定檔(由 monster_set.js 指定的檔名),預設的檔案是 monster_menu_set.js。
  5. 載入題庫設定檔(由選單設定檔中指定項目名稱和設定檔的對應關係)。原始的範例題庫設定檔有兩個:
    * 心緒類語詞:初級篇 : monster_set_basic.js
    * 心緒類語詞:高級篇 : monster_set_advance.js
  6. 開始玩。
上面的檔案,在下載回來的解壓縮檔解壓縮以後,應該可以 html5_monster 的資料夾中看到。

自訂選單

下載「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 版


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket