最近在授課的過程中，模擬了一次月度考試，發現紙質版或者電子版的試卷，學生做後，還得老師，親自一個一個進行閱卷，一個兩個還可以，但是多了之後，就很浪費時間和經歷，然後花了不到一天的時間做了一個可以在線考試的H5頁面，即方便了老師閱卷，也方便了學生進行考試，經過測試，目前感覺還可以，今天，就把它開源出來，有幫助的同志可以拿去用。（本身是做Android開發，頁面UI沒有做優化，就湊活看吧~）。
具體效果頁面（點擊直達）：
https://ming723.github.io/moni/vip_ming_do.html
先說下我實現的思路，一是無論單選，多選，填空，點擊提交會自動判分，二，試卷的題，由於會隨着考試類型多變，所以題需要動態獲取。
題如何動態獲取呢？這是我簡單的說一下我的思路，我這邊用了一個靜態文本，當然了大家也可以從數據庫裏進行獲取。靜態文本里，就是一些Json數據，因爲我的題型目前有三種，單選，多選，和填空，所以我的Json文本格式如下，（當然了，請忽略的我的字段名稱）：
{
"one":[
{
"title":"1、我是標題",
"a":"A、我是第一道題",
"b":"B、我是第二道題",
"c":"C、我是第二道題",
"d":"D、我是第二道題",
"biao":"one_0"
},{
"title":"1、我是標題",
"a":"A、我是第一道題",
"b":"B、我是第二道題",
"c":"C、我是第二道題",
"d":"D、我是第二道題",
"biao":"one_1"
}
],
"two":[
{
"title":"1、我是標題",
"a":"A、我是第一道題",
"b":"B、我是第二道題",
"c":"C、我是第二道題",
"d":"D、我是第二道題",
"biao":"two_0"
}, {
"title":"1、我是標題",
"a":"A、我是第一道題",
"b":"B、我是第二道題",
"c":"C、我是第二道題",
"d":"D、我是第二道題",
"biao":"two_1"
}, {
"title":"1、我是標題",
"a":"A、我是第一道題",
"b":"B、我是第二道題",
"c":"C、我是第二道題",
"d":"D、我是第二道題",
"biao":"two_2"
}
],
"three":[
{
"title":"1、我是填空題"
},{
"title":"2、我是填空題"
},{
"title":"3、我是填空題"
}
]
}
簡單的說些Json中這些字段的作用，三種題型，我用了三個數組進行存儲，分別是one,two three,單選和多選，除了A,B,C,D之外，還有一個title，這個title就是每一題的標題，字段biao，就是用來標識每一題的一個name值。
當然了除了題的文本之外，還有答案的文本，答案可以和題寫到一個文本里，這裏我進行分開了，單獨對答案又寫了一個json的靜態文本，格式如下：
{
"an":[
{
"ok":"A"
},{
"ok":"A"
}
],
"an_two":[
{
"ok":"A,B"
},{
"ok":"A,B"
},{
"ok":"A,B"
}
],
"an_three":[
{
"ok":"A-B"
},{
"ok":"A-B"
},{
"ok":"A-B"
}
]
}
很簡單，每個題型有幾道題，對應的就要有幾個答案，單選題我們比對就可以了，那多選題比對，和填空題比對，如何操作呢，其實也很簡單，獲取出來答案之後，可以判斷所選的答案是否包含於獲取的答案，或者用個標識進行截取，兩個數組進行一一比對，也是可以的。
好了，有了數據之後，那麼就開始寫頁面吧，頁面沒啥好說的，使用的JQuery,比如頭部這個，其實就是固定寫死的。
其實按理來說，頂部的這些信息，其實也得需要自己來動態獲取，畢竟試題不一樣，班級也不一樣，專業階段也不一樣，這些改變就顯得簡單的了，直接獲取下來，進行填充即可。
中間的題，也是很簡單，畢竟數據已經給出了，直接獲取，動態創建標籤進行填充數據就可以了，這裏就以單選爲例，大家可以看看，創建div，動態的向指定div裏進行append就可以了，畢竟不是做前端開發的，可能寫的不標準，大家湊合着看吧~
多選和填空類似，這裏就不多做解釋，點擊提交，怎麼判斷，哪一道題沒有做呢，比如單選，這裏，設置name，就是json文本里的biao字段，我們可以直接對這個字段做判斷即可，如下：
然後對其判斷，哪道題沒有寫，給用戶一個提示：
都寫了之後，計算分數，這裏我用的是（price）來計算總的分數（不要在乎字段名字），需要注意的是，我這裏定義的無論哪種題型，每一題的分值都是2.5分，當然了你可以去改變。
至於這個anItem如何獲取，我之前也說過了，答案，我定義了一個單獨的靜態文件，獲取數據之後，賦值給了一個成員變量：
三個類型，就定義了三個變量。
多選，和填空，大家可以看源碼進行分析，需要注意的是，填空，我是如何自動判分的呢，很簡單，只要學生回答的包含我們指定的字段，就可以給他分。分值的話由自己去判斷，比如對一個幾分，對兩個又是幾分。
底部還有一個動態展示，學生哪道題沒有做，可以點擊，到哪道題，以及做過的題，進行變色處理；這塊邏輯，不知道大家怎麼實現，我的實現很笨，用字符串的形式，存儲你點擊過後的題，然後，進行遍歷，如果字符串中有這個題，那麼就變色，沒有就不變，做了一個200毫秒的定時操作，我覺得這樣做不好。
大家有時間還是看源碼吧，寫的不是很好，但滿足了我的需求~