2014年2月16日 星期日

HTML5 : phonetics_quiz 聽字詞拼注音

2012 年底本來想利用 Flash 寫的 phonetics_quiz 來幫班上注音較差的孩子加強一下,試過後,發現我的白牌 Android 平板太小且效能較差,但是在 iPad 上並無法直接跑 Flash 的東西。以開發成本最低的方式當然是用 HTML5 弄個 Web App 。當時好不容易在忙完研習的事後,花了一個多星期,用 LimeJS 做出了雛形。不過,程式和這篇說明文就這樣子放了好久,最近才又把它們拿出來整理,幸好不是實體的東西,不然,肯定是厚厚一層灰在表面了。這次下定決心,程式除掉一堆蟲,順便加上可以較完整的答題歷程記錄,方便分析學生需要再加強之處。
html5_phonetics_quiz
作答記錄
功能及限制
  • 可以和 Flash 版共用題庫及聲音檔、圖片檔。
  • 使用者界面和 Flash 版大致相同。
  • 設定檔的內容大致和 Flash 相同。
  • 由於在 HTML5 中載入 .txt 的檔案必須將檔案存放在網路中,加上目前 iPad 的聲音離線使用有技術上的問題......,因此,HTML5 版如果是要給 iPad 使用,必須將檔案置於網路中,使用時必須在網路連線的狀態下使用。
  • 可以自訂選單
  • 有成績及作答歷程記錄的功能,不過,此功能需要搭配外部的程式。
試玩的網址如下:



程式執行流程

開啟 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 的試算表中,方便大家運用。這部份要另起一份新文章圖解一下才行。請參考相關文章。


檔案下載



相關文章



更新記錄

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




沒有留言:

張貼留言

 
© 2009. Design by Pocket