1. 程式人生 > >線上考試系統(二)---單選多選多種題型(radio和checkbox)

線上考試系統(二)---單選多選多種題型(radio和checkbox)

同一個頁面有多個題型是如何實現的呢?首先就單選題來說,我們都知道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); } }