HTML5 : Unscramble 重組小遊戲

Unscamble 重組小遊戲可以依字串分割設定，出題時，將句子或字詞分成好幾個部份，再以亂數把順序打亂，最後讓玩家將它們依正確的順序排好。

此外，為了避免玩家卡關，出題時也可以在題庫中加入提示用的文字、圖片或是語音。語音的部份如果不想自己錄語音檔，目前可以使用 Google 的 TTS 替代。

試玩與下載

Unscamble 可以在我的 HTML5 FUN 網站中找到，

試玩：

• https://gsyan888.github.io/html5_fun/html5_unscramble/html5_unscramble.html

下載：

• https://gsyan888.github.io/html5_fun/

《範例一》是英文句子重組的遊戲

本範例會先自動播放提示的語音，以 TTS 或是MP3聲音檔來唸出全句。

操作時，先點一下要換位置的字卡，再點一下另一張字卡，兩張字卡就會交換位置。如此兩兩交換，直到正確為止。

《範例二》是英文單字重組的遊戲

本範例不會先自動播放提示的語音，玩家想聽單字的語音時，可以自己按左下角的語音播放鈕。單字提供中文的文字提示，有些甚至還有或圖片的提示。

操作時，先按住要換位置的字母卡不放，將卡片拖曳到要放的位置後，再放開卡片。如此一張張拖、放，直到正確為止。

《範例三》是中文句子重組的遊戲

本範例會先自動以 TTS 來播放全句的提示語音。

操作時，和《範例二》相同，是以拖、放卡片的方式來換位置。

製作自己的重組遊戲

2023.05.16 起，重組遊戲有支援 HTML5 FUN 烘焙機了，如果想快速設計自己的重組遊戲，建議參考並使用這個：

• 雄:打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

如果需要了解設定參數的細節，則可以繼續閱讀本文以下有關設定檔的段落。

選單設定檔與題庫設定檔

選單設定檔

 「Unscramble 重組小遊戲」在啟動以後，會先載入主設定檔「unscramble_set.js」，接著會載入預設的選單設定檔「unscramble_menu_set.js」，然後依選單設定檔製作選單供玩家選擇，玩家選好後，最後載入題庫設定檔。

選單設定檔裡面的格式很簡單

• 每一個題庫檔會對應到一行，設定會用一對引號(單引號或雙引號均可)括住。
• 每一行會以一個半形逗號當分隔符號，將它分為兩個欄位。
• 每一行的第一個欄位是「項目名稱」，第二個欄位為「題庫設定檔的檔名」。

menu_items = new Array(
//------------------------------------下一行開始為選單增加項目
 '設定範例(英文句子),question_set_example-1.js'
,'設定範例(英文單字),question_set_example-2.js'
,'設定範例(中文句子),question_set_example-3.js'
//------------------------------------選單選項結束,以下請勿修改
);

以上面的設定來說，選單總共會出現三個選項：

1. 設定範例(英文句子)
2. 設定範例(英文單字)
3. 設定範例(中文句子)

按下第一個選項時，程式會打開檔名為「question_set_example-1.js」的題庫設定檔，並出題給玩家玩。同樣的道理，按下第二個選項時，程式會打開檔名為「question_set_example-2.js」；按下第三個選項時，程式會打開檔名為「question_set_example-3.js」。

另外，如果選單項目很多時，可以將它們分類，並建立「次選單」，此部份的機置和我另一個作品 BINGO 是一樣的，在 Blog 中有詳細的說明，可以參考這篇：

• 雄．HTML5 : BINGO

題庫設定檔

前面提到的例子，當我們按下範例選單的第一個選單後，「Unscramble 重組小遊戲」會幫我們載入題庫檔案「question_set_example-1.js」，這個檔案是個純文字檔，建議使用純文字的編輯工具來開啟，並修改內容(個人在 Windows 上習慣使用 Notepad++，在 Mac OS X 上使用 Textwrangler ) 。

底下簡單介紹一下 Unscramble 可以自訂的參數。

在開始出題前，遊戲會出現說明畫面，底下是說明對話框相關的設定參數：

• help_title : 對話框的標題。
• help_description : 對話框中的說明文字。
• help_button_caption : 對話框的按鈕。

前面提過，玩家作答時，可以直接將卡片拖曳到要放的位置；或是用按下要選的卡片，再按一下另一張卡，讓兩張卡交換位置的方式。作答的操作方式是由底下的參數所控制的：

• card_swap_mode : 字卡交換方式。
  0 為用拖曳方式換卡片的位置。
  1 為用按一下指定要交換位置的兩張卡片。

有關對答案的方式，提供一個 enableSubmitButton 的參數，可以用來控制是否出現「送出答案」的按鈕：

• enableSubmitButton
  true : 玩家按「送出答案」才核對答案。
  false : 卡片換位置後就自動對答案。

有關聲音播放的參數：

• sound_enabled : 是否播放音效及語音。
  true 播放音效及語音。
  false 不播放任何聲音。
• sound_autoPlay : 是否自動播放語音。
  true : 出題後自動播放語音。
  false : 使用者按播放鈕後才播放語音。
• sound_autoPlayLoop : 自動播放的次數。 
• sound_autoPlayDelay : 隔多久自動重播(單位秒)。
• tts_enabled : 是否使用 TTS 的語音
  true : 語音採用 TTS 來發音。
  fasle : 不使用 TTS 的語音。
• tts_is_at_index : 如果使用 TTS ，將題庫中的哪一個欄位的文字轉語音。如果值為 0 ，表示使用左側題目中的文字當要發聲的字串；如果為 1，則是以右側提示欄位中的文字來發聲。
• tts_language : TTS 選用的語言代碼。
  en : 英文。
  zh_tw : 中文。
• tts_base_url : TTS 的呼叫網址。

有關題庫的參數：

Unscramble 在出題時，要知道

• 完整的題目字串是什麼？
• 怎麼切割字串？
• 提示是什麼？(可包括文字、圖片、語音)

照這樣看來，每一題題目，我們要：

• 先切割成題目(第一欄位)和提示(第2, 3, 4欄位，也可不要提示)。
• 第一欄位中的題目再切成多個字串，變成一張張的卡片。
• 第 2, 3, 4 欄位中的提示可以是文字、圖片檔檔名或是聲音檔檔名。

照這樣分析，我們只要使用兩個「分隔符號」分別當「第一層」和「第二層」的分割器，就可以符合我們的需求了。先以 「data_seperator」指定的符號分割，再以「split_seperator 」指定的符號進行第二層的分割。

資料分割符號設定：

• data_seperator : 用來切割題目和提示的分隔符號(第一層)。
• split_seperator : 用來切割題目子字串的分隔符號(第二層)。

以《範例二》「question_set_example-2.js」中的設定來說明：

它的資料分割符號設定為：

data_seperator = "##";
split_seperator = "~~";

所以「題目」和「提示」、「提示」和「提示」之間是以兩個井字號「##」來切割。

這個題庫是用來進行英文單字重組的，字母和字母之間是以兩個毛毛蟲「~~」來切割。

h~~a~~p~~p~~y##快樂##images/happy.png
a~~n~~g~~r~~y##生氣
c~~r~~y##哭泣

看看第一題是測驗「happy」這個英文單字(註:截圖為 2019 年舊版的題庫格式)

兩個井字號將第一題分為題目：

h~~a~~p~~p~~y

和文字提示：

快樂

與圖片提示：

images/happy.png

題目又以兩個等號分為：「h」、「a」、「p」、「p」和「y」五個字母。

提示也以兩個井字號分為：中文意思的「快樂」，和提示圖片檔名的「images/happy.png」，兩部份。

觀察一下，後面兩題的「angry」和「cry」則都只有中譯的文字提示，沒有圖片提示。

範例二的解說影片

進階設定

如果有需要調整版面的配置，讓題目、提示文字、提示圖片和語音播放器的位置能自訂，就打開主設定檔「unscramble_set.js」依需要調整底下的座標：

• answer_block_y : 作答區的 y 座標
• audioPlayer_x : 語音播放器的 x 座標
• audioPlayer_y : 語音播放器的 y 座標
• text_hint_x : 提示文字區的 x 座標
• text_hint_y : 提示文字區的 y 座標
• image_hint_x : 圖片的 x 座標
• image_hint_y : 圖片的 y 座標

調整時要注意的是，(0, 0) 的位置是在左上角。而整個版面是最大範圍：

• X : 1024
• Y : 768

以上是有關 Unscramble 重組小遊戲的簡單說明。

相關文章

• 雄 : HTML5 FUN 精選集

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

• 雄．HTML5 : BINGO

更新記錄

• 2024.04.01 解決字數很長時，卡片排列偏右的問題；純英文、數字的題目如果字數不超過15個字，但總寬度超過畫面寬度時，字型縮小為原來的 80%，看能不能在一行顯示而不換行。
• 2023.08.18 題庫支援國字加注音的格式；新增一個即時切換交換字卡方式的選項開關，並調整各功能鈕的位置。
• 2023.05.16 支援 HTML5 FUN 烘焙機的功能；題庫格式稍作調整，每一題第 2, 3, 4 欄位可以是文字、圖檔或是音檔，「split_seperator」只用來切割第一欄位的題目為卡片內容。
• 2019.05.21 加入 split_by_length、split_by_length_substring_length：split_by_length　用來設定是否以字串長度來切割子字串，如果設為 true, 題庫第一欄位會以長度來切割；如果設為 false (預設值), 題庫第一欄位會以 split_seperator 的分隔符號來切割。split_by_length_substring_length 則是當 split_by_length 為 true 時, 每個子字串要多長。
• 2019.05.18 加入 select_questions_in_random、number_of_questions。
  select_questions_in_random：用來控制如何由題庫選題的方式( true:以亂數選題  false:按題庫順序)。
  number_of_questions：設定在亂數選題時，最多選幾題。
• 2019.05.15 加入 sound_autoPlayLoop、sound_autoPlayDelay ，用來控制語音自動重播的次數。
• 2019.04.30 加入 enableSubmitButton 的選項。是否使用「送出答案」的按鈕， true : 玩家按「送出答案」才核對答案； false : 卡片換位置後就自動對答案
• 2019.04.27 釋出。
• 2019.04.24 明勳建議加入計時器，可在結束時知道花多少時間作答。
• 2019.01.06 明勳建議不要自動播放語音，可以在需要時再手動播放語音；版面位置調整改為可以設定檔中自行設定。
• 2019.01.03 測試版。