2012年12月13日 星期四

HTML5 : PK 大賽自訂題庫《進階》

前一篇提到 PK 大賽留了一個「後門」給使用者餵題目給系統,這後門要如何使用呢?哈!如果看完,覺得內容很難「啃」,消化不良,就裝作沒看到這一篇,用前一篇的方法吧!
先來看看 smaples/sample-1.js 中的截圖:
samples/sample-1.js
設定檔中的「第35行」有個 question_lines ,它是一個陣列(Array),而「第37~40行」則是陣列元素,也就是我們自訂題庫的題目。這些題庫內容交給「第53~55行」的程式處理,並回傳資料給呼叫它的程式使用。這是使用我寫的 API (tools.getOneQuestion)來達到以亂數選一題題目並回傳題幹及選項給系統的目的。因為是使用我寫好的 API ,分隔符號就只能使用預設的半形分號(分隔欄位)及半形逗號(分隔多個選項),或是使用「語文高手格式」來建題庫。

自訂分隔符號及題幹、選項的順序

想要更有彈性一點,連分隔符號及題幹、選項的順序都要調換,怎麼辦?《2012.12.12 以後的版本》除了「語文高手」格式外,可以自訂分隔符號。
例如,想要建立具有以下特性的題庫:
  • 二欄式題庫。
  • 以「半形逗號」當欄位分隔符號。
  • 第一欄為答案,第二欄為題幹。
設定檔中的關鍵如下圖:
上圖是 PK 國字注音的題庫設定,
getOneQuestion = function(tools) {
return tools.getOneQuestion(question_lines, "," , "OQ" );
};
特別注意「第54行」:
return tools.getOneQuestion(question_lines, "," , "OQ" );
括號中是參數,依序為:
  1. 「question_lines」:題庫的陣列。
  2. 「","」:指定以「半形逗號」為欄位的分隔符號。這裡因為是二欄式題庫,單選題答案只有一個,所以只要指定一個分隔符號;如果是三欄式題庫,因為錯誤的選項應該會有多個,所以要再指定第二個分隔符號來解析多個選項。
    照前面的說明來推,如果這個參數省略的狀況,系統會使用「半形分號」和「半形逗號」,也就是「;,」。
  3. 「"OQ"」:O代表對的選項(取圈圈的意思),Q代表題幹,「OQ」先「O」再「Q」,也就是第一欄位為答案,第二欄位為題幹。
    如果是三欄式的題庫,還可以再加一個「X」(取叉叉的意思)表示錯誤的選項。所以如果這個參數省略了,系統會用預設值「QOX」。

加了這樣的功能,主要是想讓大家輕鬆的使用已有的題庫,不用轉換來轉換去。如果覺得太複雜,就直接使用 samples 中原有的幾個範例依樣畫葫蘆即可。

動態製作題庫

如果會寫 JavaScript ,想用自訂的格式,或是想用程式直接動態製作題庫,要如何進行呢?「後門」的關鍵在底下:
  • 寫一個名為「getOneQuestion」的 function。
  • 回傳一個 Object ,但是必須設定好三個 properties:
    「question」:題幹,為一個 String。
    「optionsOK」:答案,為一個 Array ,因為目前只支援單選題,所以指定第 0 個元素的內容即可。
    「optionsNG」:錯誤的選項,為一個 Array,一個陣列元素一個錯誤選項。
只要具備以上的條件,當系統需要重新出題時,它會呼叫「getOneQuestion」來取得下一題的題目。至於中間要如何選題、出題,就看自己想怎麼出就怎麼出囉!在下載回去的壓縮檔中,名為 data 的資料夾裡有幾個我寫的範例(獻醜了)可供參考,例如:「data/9x9.js」可以動態出九九乘法的題目,「data/fratcion_add.js」可以動態出分數的加法。


相關文章:




沒有留言:

張貼留言

 
© 2009. Design by Pocket