線上考試系統(二)---單選多選多種題型(radio和checkbox)
阿新 • • 發佈:2019-01-05
同一個頁面有多個題型是如何實現的呢?首先就單選題來說,我們都知道radio單選框是以name來分組的,一個組裡只能有一個radio被選中,所以在設計的時候,為了與後臺之間的傳值,就要根據一定的命名規則,為每個題附一個不同的name,這樣才能保證可以在每道題都可以選擇一個答案。而多選的題型就用checkbox來做就好了。
首先,考試、試卷、試卷題目以及題目是四個類,一場考試會有很多不同的試卷,一張試卷會包括很多的試卷題目,試卷題目這個表中會用到題目這個類(試卷題目包含的欄位如下,題目就是單純的問題以及正確答案)資料表之間的設計關係在此不作冗述,貼個完整的資料表格的設計圖好了。
試卷題目這個類中應該包含的欄位有:
/**
* 試卷表
*/
private TestPaper testPaper;
/**
* 試卷順序
*/
private Integer questionOrder;
/**
* 試題選項
*/
private String choice;
/**
* 單題目分值
*/
private Integer score;
/**
* 問題表
*/
private Question question;
這裡應該根據題目的型別做不同的顯示,單選用radio,多選用checkbox(講真是因為我不會用MarkDown編輯器排版還是沒有自動排版這一說?貼程式碼上來亂七八糟還要手動排,這對我這樣一個懶人來說真的是巨大的折磨吶!!!我決定貼個圖算啦~~~)
整個的迴圈是遍歷試卷問題的選項的,每一道題自然是有選項的。
name的命名是結合了題號的,onclick中的方法是為了每選擇一個選項,就儲存在cookie裡,防止頁面異常關閉,下一篇會專門講怎麼寫這個函式。
後臺處理這裡只展示如何取到使用者填寫的答案,僅提供思路,不然越扯越多~~~
@RequestMapping(value = "my/test")
public String myTest(String testId, RedirectAttributes redirectAttributes
, HttpServletRequest request) throws ParseException {
int questionNum = Integer.parseInt(request.getParameter("questionSize"));//這個在上面的頁面的第二行就有寫,專門就是為了在這裡用的,頁面在表單資料裡用EL表示式取長度很方便
for (int i = 1; i <= questionNum; i++) {
/**
* 填充試題表格
*/
TestPaperQuestion testPaperQuestion = answerService.getTestPaperQuestionById(
request.getParameter("tpQuestionId"+i));
// 答題者所選的答案
String selOption = "";
String type = request.getParameter("qtype"+i);
if ("1".equalsIgnoreCase(type)) {
selOption = request.getParameter("qchoice"+i);
}else {
selOption = request.getParameter("q"+i);
}
testPaperQuestion.setChoice(selOption);
testPaperQuestions.add(testPaperQuestion);
}
}