HTML5 FUN 中的 Speaking 是一個可以用來練習說話的語文自學、共學小工具(簡介參考「雄 : HTML5 Speaking」)。我們可以在 HTML5 FUN 網站中下載打包好的程式與設定檔
將自己想練習的題庫放在題庫設定檔裡面，就可以擁有自己專屬的 HTML5 Speaking；
也可以利用語法產生器，產生可以嵌入 Blogger 或其它網站網頁中的語法，製作一個 HTML5 Speaking 線上練習題
無論使用哪一種方式來客製 HTML5 Speaking，如果能對有哪些參數可以設定，相信可以更符合自己的需求。
底下的說明，如果覺得太複雜，建議可以先了解一下這個主題
HTML5 Speaking 的設定檔
如果在 HTML5 FUN 網站中下載 HTML5 Speaking 打包好的 .zip 壓縮檔解壓縮，裡面跟遊戲相關的幾個設定檔如下：
- 主設定檔 : speaking_set.js
- 選單設定檔 : speaking_menu_set.js
- 題庫設定檔 :
- 題庫範例 1 : questions-set-1.js
- 題庫範例 2 : questions-set-2.js
- 題庫範例 3 : questions-set-3.js
- 題庫範例 4 : questions-set-4.js
- 題庫範例 5 : questions-set-5.js
HTML5 Speaking 的主程式在啟動後，會依序載入上面的「主設定」、「選單設定」和「題庫設定」，三種設定檔。
如果是使用「雄 : HTML5 : Speaking@Blogger 語法產生器」製作旳 HTML Speaking ，它等於是「主設定檔」跟「題庫設定檔」的合體；當我們按下「開始玩 HTML5 Speaking」的按鈕後，它只會載入放在 HTML5 FUN 網站中的主設定檔 speaking_set.js，然後再載入產生器語法中的設定。因為載入設定先後順序的關係，使用這種方式製作的遊戲，只要在設定的語法中修改參數，即可自訂 HTML5 Speaking 的遊戲內容。
HTML5 Speaking 題庫設定檔的自訂參數
HTML5 Speaking 的題庫設定檔中的參數，會影響遊戲的哪一部份呢？
 |
| [圖1] HTML5 Speaking 遊戲模式選單 |
 |
| [圖2] HTML5 Speaking 練習畫面 |
如果我們修改了 HTML5 Speaking 的題庫設定，應該可以看到 [圖1] 遊戲模式選單，或是 [圖2] 練習內容，有所改變。
底下簡單地列出 HTML5 Speaking 可供自訂的參數：
- 出題時是否要以亂數來選題
- order_by_random :
- true : 以亂數來選題。
- false : 按照題庫設定的原始順序，一行行取用。
- 遊戲說明對話框的設定
- helpDialogCaption : 標題字。
- helpDialogDescription : 說明文字。支援多行，想換行就加上「\n」。
- helpDialogButtonCaption : 按鈕上的文字。
- helpDialogTextAlign : 說明文字對齊的方式: 可用的值 left、right、center。
- 遊戲模式按鈕上的文字 ( [圖1] 上的按鈕 )
- gameMode_1_Caption : 模式1。題庫第1欄為問題，也是提示。
- gameMode_2_Caption : 模式2。題庫第1欄為問題，第1欄和第2欄為提示。
- gameMode_3_Caption : 模式3。題庫第1欄為問題，第2欄和第3欄為提示。
- 語音辨識的參數
- speechRecognitionLang : 語音辨識的語言代碼，例如「en-US」(英文)，「zh-TW」(中文)。相關代碼可以到 [ Google 的說明文件 ] 中查到。
- 控制合成語音播放速度的參數
- ttsPlaybackRate : 使用大於 0 的數字來表示播放速度。例如：「1.0」正常、「0.75」較慢速、「0.5」慢速、「1.5」快速、「2.0」兩倍速。
可以使用多個速度(以中括號括住)，
例如預設值為 [1.0, 0.75, 0.5] ，會依序並循環使用 1.0、0.75、0.5，每播放一次，就跳下一個數字，最後再從第一個開始。 - 題庫的設定參數
- seperator : 題目資料的欄位分隔符號，預設值為兩個井字號「##」。
- questionLines : 題庫資料。題庫設定檔中，最重要的就是這個參數，每一行就是一道題目，它決定了玩家會看到哪些問題、哪些提示，及合成語音要發出什麼語音內容。詳細的說明，請參考下一小節。
前面的參數是原本設計在題庫設定檔中使用的自訂參數，而語法產生器所產生的題庫設定，也是這些內容。另外，原本應用在主設定檔中的部份參數，也可以放在題庫設定中，一併介紹：
- 語音辨識多久逾時
- timeRecognitionTimeout : 超過多久沒辨識結果，就關掉辨識的功能。此參數主要應用在 iOS 的環境中，當語音辨識打開後，如果超過這個參數設定的時間(預設為 1500，也就 1.5 秒)，沒有偵測到講話的聲音並辨識出結果，就自動關閉語音辨識及麥克風。
- 中文是否先轉為拼音(無調號)再核對答案
- pinyinConvertEnable :如果設為 true (預設值)，當辨識語言設為中文，在核對答案時，會先將中文都先轉為無調號的拼音，為 false 則不會。此功能主要是解決中文有很多同音字的問題，以提高答對率。
HTML5 Speaking 題庫的格式
在 HTML5 Speaking 裡面，什麼設定參數最重要？
答案當然是和題庫相關的兩個設定參數：
- seperator
- questionLines
「questionLines」決定了這個題庫組中有多少題目，決定了問題(也是答案)，決定了要給什麼提示，是文字、是圖片？像 [範例1] 題庫設定檔 questions-set-1.js 中是：
questionLines = function(){/*--這一行請勿更改--
cat##貓
mouse##老鼠
chicken##雞
monkey##猴子
tiger##老虎
horse##馬
-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);
在 questions-set-1.js 中， questionLines 參數設定，從「cat」這行，到「horse」這行，共有六行，代表這個題組中，共有六道題目。
「seperator」則決定了，在 questionLines 中，每一道(每一行)題目的資料中，用什麼符號來分隔問題(答案)、文字提示、圖片提示，三種不同的資料。
 |
| [圖3] HTML5 Speaking 的練習畫面 |
[圖3] 是 HTML5 Speaking 範例題庫2 (questions-set-2.js) 中的一題，以這一題來說，它在遊戲畫面的提示區中顯示了以下的內容：
Do you want some coffee ?
你想要一些咖啡嗎？
「Do you want some coffee ?」是題目第一個欄位的資料
「你想要一些咖啡嗎 ？」是題目第二個欄位的資料
如果照程式的預設值，「欄位分隔符號」為兩個井字號(##)，設定參數：
seperator = '##';
[圖3] 的這一題，在題庫中，它會佔用獨立的一行，內容如下：
Do you want some coffee?##你想要一些咖啡嗎？
注意英文和中文之間的兩個井字號「##」，是不是將它們分為兩個欄位了！
所以，如果想為這一題配上圖片的提示，只要在後面再加上兩個井字號及圖片的網址，類似這樣的格式(哈！自己把「這裡貼圖片的網址」換成您找的圖片網址哦～)：
Do you want some coffee?##你想要一些咖啡嗎？##這裡貼圖片的網址
上面這樣的話，這一題的題目設定就有三個欄位，可以顯示文字及圖片的提示了。
在 HTML5 Speaking 的範例題庫檔案中，題庫使用到圖片的，有這兩個檔案可以觀察、參考看看：
HTML5 Speaking 的題庫可以使用各種語言，題庫使用什麼語言，記得也要修改一下有關語音辨識及語音合成「speechRecognitionLang」的參數為搭配的語言代碼；不然的話，可能無法正確地將麥克風傳來的語音，辨識為正確的文字。
國小的題庫可能有國字加注音的需求，因此程式有特別針對國字加注音處理，題庫的格式可以參考 [範例 5] 題庫檔 (questions-set-5.js) 中的設定，有空會針對國字加注音的格式，設專文介紹。
發表文章
沒有留言:
張貼留言