学生习题界面简析

算法的第三模块----习题测试

$("#enter-test").click(function () {
	//跳转至 localhost:8080/lhm/platform/test?label=1页面，开始测试
       window.location.href = "test?label="+1;
   });
   $("#check-history").click(function () {
       window.location.href = "history_test";
   });

后端：

@RequestMapping(value = "/test", method = RequestMethod.GET )
    public String logistic_test(@RequestParam Integer label, Model model){
     //标签label对应哪个算法 如：label=1，挑选逻辑回归算法的10道试题
//        从题库中随机地选出10道逻辑回归的题目Questions
//        model.addAttribute("Questions", Questions);
     return "/admin/platform/logistic_test";
 }

前端：

<div id="myTabContent" class="tab-content">
 <#if Questions??>
    <#list Questions as question>
    	<!-- 题目区域  显示问题/问题难度/问题类型-->
        <div <#if question_index==0>class="tab-pane fade active in" <#else>class="tab-pane fade" </#if> >
            <div class="test_content_nr_tt">
                <#--  难度-->
                <span>难度: ${question.difficulty}</span>
                <br>
                <#if question.questionType==2>
                    <span class="mdi mdi-apps">多选&nbsp;</span>
                <#elseif question.questionType==1>
                    <span class="mdi mdi-apps">单选&nbsp;</span>
                <#elseif question.questionType==3>
                    <span class="mdi mdi-apps">填空&nbsp;</span>
                </#if>

                <#--  题目-->
                <span>${question.questionObject.titleContent}</span>

            </div>
            <!-- 选项 -->
            <div class="test_content_nr_main" id=${question.getId()} >
                <ul>
                    <#list question.questionObject.questionItemObjects as option>
                        <li class="option">
                            <input <#if question.questionType==1>type="radio" <#elseif question.questionType==2>type="checkbox" <#elseif question.questionType==3>type="radio" </#if> id=${question.questionType}+"_answer_"+${option.prefix} name="a"+${question_index} value=${option.prefix}/>
                            <label value=${option.prefix} for=${question.questionType}+"_answer_"+${option.prefix} >${option_index}.<p class="ue" style="display: inline;">${option.content}</p>
                            </label>
                        </li>
                    </#list>
                </ul>
                <!-- 题解区域-->
                <div id="answer_area">
                    <!-- 显示答对/答错-->
                    <span class="'TF"></span>
                    <br>
                    <!-- 显示题目的解析-->
                    <span class="analyse"></span>
                </div>
            </div>
        </div>
    </#list>
    </#if>
</div>

正计时器：

 <span id="timer"></span>

提交按钮

<button class="btn btn-success" id="submit-btn">提交</button>

Post Ajax

$.ajax({
            "url": "${request.contextPath}/platform/submit_paper",
            "type": "post",
            "data":{
                paperType: 1, //单元卷
                questionCorrect: totalScore, //所得总分 (10分满分
                questionCount: 10,
                doTime: count, //做题时间 count秒
                questionRecords: answer_data, //{题号,学生答案,是否答对(0/1)}
            },
            datatype: 'json',
            success: function (data) {
                if( data.code===0 ){
                    //习题添加成功
                    showSuccessMsg("完成一次测试", function() {

                    });
                }
            },
            error: function (data) {
                showErrorMsg(data.msg);
            }
        });

点击提交后：

1. ⏲计时停止，使用时长 count秒
2. 提交按钮和input标签变为无效，无法点击
3. 对每道题判断是否作对，并显示题解
4. post ajax到后端