HTML5 : phonetics_quiz 聽字詞拼注音

寫在前面

本程式已於 2022.10.10 更新，和原有的載入流程與參數設略有不同，舊的設定檔可能無法使用。新版的說明連結置在此，建議按底下的連結前往更新的文章。

• 雄 : HTML5 注音高手更新版

本篇為舊文 (2014.02.16)

2012 年底本來想利用 Flash 寫的 phonetics_quiz 來幫班上注音較差的孩子加強一下，試過後，發現我的白牌 Android 平板太小且效能較差，但是在 iPad 上並無法直接跑 Flash 的東西。以開發成本最低的方式當然是用 HTML5 弄個 Web App 。當時好不容易在忙完研習的事後，花了一個多星期，用 LimeJS 做出了雛形。不過，程式和這篇說明文就這樣子放了好久，最近才又把它們拿出來整理，幸好不是實體的東西，不然，肯定是厚厚一層灰在表面了。這次下定決心，程式除掉一堆蟲，順便加上可以較完整的答題歷程記錄，方便分析學生需要再加強之處。

html5_phonetics_quiz

作答記錄

功能及限制

• 可以和 Flash 版共用題庫及聲音檔、圖片檔。
• 使用者界面和 Flash 版大致相同。
• 設定檔的內容大致和 Flash 相同。
• 由於在 HTML5 中載入 .txt 的檔案必須將檔案存放在網路中，加上目前 iPad 的聲音離線使用有技術上的問題......，因此，HTML5 版如果是要給 iPad 使用，必須將檔案置於網路中，使用時必須在網路連線的狀態下使用。
• 可以自訂選單
• 有成績及作答歷程記錄的功能，不過，此功能需要搭配外部的程式。

試玩的網址如下：

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

程式執行流程

開啟 html5_phonetics.html
　　→ phonetics_quiz.js (主程式)
　　　→ phonetics_quiz_menu_set.js (選單設定)
　　　　→ sample-set-1.js  (程式參數，假設選單選了這個檔案)
　　　　　→ phonetab.js  (對照表，範例中設定用這個檔案)
　　　　　　→ sample-file-list.js (題庫)
　　　　　　　→ 開始玩

上面是程式的主要流程，當我們啟動程式 (以「html5_phonetics.html」來開啟) 後，它會試著載入檔名為「phonetics_quiz_menu_set.js」的設定檔，再依裡頭的設定來顯示選單。按了選項後，會依設定試著載入指定的設定檔(上例的檔名為「sample-set-1.js」)。最後，依設定的參數，載入「注音國字對照表」(預設的檔名為 「phonetab.js」，可自訂)，和「題庫設定檔」(範例裡的檔名為「sample-file-list.js」)。確定檔案都載入完成以後，就可以開始準備出題挑戰了。

壓縮檔目錄結構

當我們將下載回來的 html5_phonetics_quiz.zip 解壓縮後，裡面有以下的檔案：

• html5_phonetics.html ：要使用程式時開啟這個網頁檔就對了！
• phonetics_quiz.js：主程式，這個檔案供  html5_phonetics_quiz.html 來載入，基本上，不要去修改裡面的內容。
• phonetics_quiz_menu_set.js：選單設定檔，用的是 JavaScript 的語法。可以用類似記事本的文字編輯器來修改內容。
• sample-set-1.js：主設定檔範例，變數名稱、功能和 Flash 版相同，直接複製 Flash 用的語法，貼入中間。可以用類似記事本的文字編輯器來修改內容。如果已有舊題庫的，建議利用這個設定檔來修改較方便。只要將第一行及最後一行保留原狀，中間就可以開始放自己的設定值。
• sample-set-2.js：主設定檔範例， (選單裡的第一個項目)。變數名稱、功能和 Flash 版相同，但用的是 Javascript 指定變數的語法。可以用類似記事本的文字編輯器來修改內容。
• sample-file-list.js：另一個設定檔範例 (選單裡的第二個項目)。題庫設定檔，基本格式和 Flash 版相同，只是為了讓檔案可以在本機中可以執行，檔名是「.js」，而內容要稍微加頭、加尾，讓它變成「JavaScript」的格式。所以，這個檔案以記事本打開以後，只要將第一行及最後一行保留原狀，中間就可以開始放自己的題庫。
  如果想快速產生這個檔案，建議用 Flash 版中的 phonetics_quiz.exe 來產生後，複製到這個檔案內使用。
• phonetab.js：注音國字對照表，和 Flash 版相同，只是加了頭尾的 JavaScript 語法。
• assets (目錄)：本目錄中放了答對或答錯後的回饋音效，
  bad0.mp3 ...... bad3.mp3 ：答錯的回饋音效檔。
  good0.mp3......good3.mp3 ：答對的回饋音效檔。
  go.mp3 ：按完 [開始] 按鈕的 "加油" 音效檔。
• data (目錄)：本目錄用來存放語音檔及圖片檔，和 Flash 版相同，可以共用。

如果將上述的檔案通通解壓縮到電腦中，以 Google Chrome、Safari、Firefox ...... 等支援 HTML5 的瀏覽器，打開 html5_phonetics_quiz.html 就可以開始玩範例題庫。

想新增題目，就將聲音檔(.mp3)及圖片檔(.jpg、.png ... ，也可沒有圖片檔)存放到「data」資料夾中，然後再將前述檔案的檔名加到題庫設定檔「sample-file-list.js」中即可。

如果想直接使用 Flash 版的題庫(設定檔的檔名都是 .txt )，由於 JavaScript 無法讀取 .txt 的設定檔，因此，無法開啟本機的檔案來玩，必須將所有檔案上載到網路的空間後才能正常運作。另外，圖片及聲音檔應該會使用中文來命名，因此，網路空間的中文支援度也可能會影響程式的運作。目前我測試過， Google Drive 和 Dropbox 的免費空間是沒問題的 (不過，它們的速度慢了點會是另外一個問題)。


自訂選單 (phonetics_quiz_menu_set.js)

選單設定檔的檔名為「phonetics_quiz_menu_set.js」，裡面主要是設定 「menu_items」這個 JavaScript 「字串陣列」。因此，每項選單的設定記得用一組半形的單引號「'」括住。單引號內的字串以一個半形的逗號「,」當分隔，逗號左側為選單的名稱，右側則為該選單要載入的設定檔檔名。
以我在壓縮檔中的設定範例來說明：

menu_title='注音高手';
menu_items = new Array(
'例1:不選國字,sample-set-1.js'
,'例2:要選國字,sample-set-2.js'
);

• 第 1 行：「menu_title」 設定出現在選單畫面最上方的標字為「注音高手選單」。
• 第 2 行：「menu_items = new Array(」宣告一個名為 menu_items 的陣列，下一行開始為陣列的元素。
• 第 3 行：「'例1:不選國字,sample-set-1.js'」，頭尾的單引號一定要有；這是選單中的第一個項目，半形逗號左側的「例1:不選國字」是選單按鈕上顯示的文字，當我們按下該按鈕後，會去載入檔名(半形逗號右側)為「sample-set-1.js」的設定檔。
• 第 4 行：「,'例2:要選國字,sample-set-2.js'」，第一個逗號及頭尾的單引號一定要有；這是選單中的第二個項目，「例2-不選國字」是選單按鈕上顯示的文字，當我們按下該按鈕後，會去載入檔名為「phonetics_quiz_set-2.js」的設定檔。
• 最後一行：「);」宣告 menu_items 陣列結束。

所以，如果我們想加第三個選單，項目名稱叫「第三課」，按下去後載入檔名為「set3.js」的設定檔，加完的選單設定內容如下：

menu_title='注音高手選單';
menu_items = new Array(
'例1:不選國字,sample-set-1.js'
,'例2:要選國字,sample-set-2.js'
,'第三課,set3.js'
);

至於 set3.js 中要放什麼，建議先將 sample-set-1.js 複製為 set3.js ，然後再依「自訂程式參數」中的說明，修改為想要的內容，這樣會最簡便。


自訂程式參數

壓縮檔內的「sample-set-1.js」和「sample-set-2.js」都是主設定檔的範例，它們主要是告訴程式要開啟哪一個檔案來載入題庫、要開啟哪個檔案來載入注音國字的對照表、聲音檔和圖片檔放在哪一個資料夾中、出多少題目......，它和 Flash  版中的 phonetics_quiz.txt 的功能一樣，可以自訂程式的一些功能：

• 最上方的標題：title
• 要載入的注音國字對照表檔案名稱：phonetics_table_filename
• 虛擬鍵盤是否要選國字：character_select_enabled
• 是否要用亂數出題：random_order_enabled
• 每回出多少題：questions_to_answer
• 聲音檔和圖片檔存放的資料夾名稱：data_folder_name
• 題庫檔的檔案名稱：file_list

各參數的詳細的說明可以參考 Flash 版中的介紹。

除了以上的參數，在 HTML5 版中多了一個名為「logger_url」的參數，可以用來指定接收成績紀錄程式的網址。如果有指定這個參數，在使用者過關時，程式會將設定檔的檔名「file」、標題「title」、操作秒數「timeTotal」、按錯次數「faultTotal」、全對的百分比「score」及每一題的作答情形：時間、錯幾次、輸入了哪些答案......的資訊，傳給「logger_url」 網址所指定的程式接手處理記錄。此部份我利用 Google apps-script 寫了個接收作答記錄的小工具，最後會將成績寫入 Google Doc 的試算表中，方便大家運用。這部份要另起一份新文章圖解一下才行。請參考相關文章。


檔案下載

• html5_phonetics_quiz.zip (2014.02.15 更新)

相關文章

• 雄 : Flash : phonetics_quiz 聽字詞拼注音
• 雄 : Apps Script : 用 scoreLogger 來接收遊戲作答記錄

更新記錄

• 2014.02.15 修改載入檔案的程序，簡化設定檔的格式，精簡程式。
• 2014.02.14 修正播放聲音的流程，讓 Android 上播放聲音可以更順一點，修改作答記錄的資料結構。
• 2014.02.07 修改設定檔的架構，把原本無法在本機執行的問題解決。
• 2012.10.20 首次在 plurk 上發布測試版