在线考试系统(三)---cookie存储所选答案（.aspx和java）

在线考试中，为了防止页面异常关闭，需要用到cookie来存储答案，设计要求如下
（1）每选择一个选项后，将答案保存在cookie中；
（2）为保证session不过期，每隔2分钟用jquery向后台提交请求，请求的地址为空页面；
（3）cookie有几个地方要注意的
a.长度限制
b.保存时间
c.使用人的范围

1.首先来解决这个session的问题
session不过期只要加一个这个函数

function keepsession(){ 
        $.ajax({
            type: "post",
            contentType: "application/json",
            url: "sessionKeeper.aspx"
        })  
    } 
setInterval(keepsession, 3000); 

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
详细点的用法可以参考http://www.jb51.net/shouce/htmldom/jb51.net.htmldom/htmldom/met_win_setinterval.asp.html

记得在该jsp文件所在同一目录下新建一个空白页面，名字是sessionKeeper.asp，里面啥也不用写~~~

==================我是分隔符======================
我来更新啦，上面那样写是不对的。有个大神告诉我，.aspx是.net的文件，这个地址用在这里是无效的，要用jsp文件。
那么什么地址是有效的呢？就是能访问的地址，在浏览器里直接输入以后可以返回结果的，即使是这里说的一个空文件。
但是并不能简单的把文件后缀一改就算了，因为由于过滤器的原因，WEB-INF目录下的jsp文件是不能直接访问的，需要通过controller类访问，就是之前跳到这个页面的这种访问方式。
所以就存在两种解决方式：
第一种方法，在WEB-INF目录外即webapp这个目录下新建这个jsp文件

可以检验一下是否可以访问到，随便写点字。

浏览器地址栏输地址，tleave是项目名哦，后面直接加这个文件名

证明是可以访问到的，说了要空白页面，那再把这些数字删掉好啦
所以上面那个函数改成这样子

function keepsession(){ 
        $.ajax({
            type: "post",
            contentType: "application/json",
            url: "/tleave/sessionKeeper.jsp"
        })  
    } 

第二种方法就是写一个controller类，指向这个空白页面，这个就懒得写了，既然能访问这个页面，那肯定能访问空白页面呐！

2.保存答案
上一篇博客有说到单双选题型的设置

<input id="q${testPaperQuestion.questionOrder}" name="q${testPaperQuestion.questionOrder}"
                                         value="${questionOption.option}" type="radio" onclick="saveCookie(${testPaperQuestion.questionOrder})">                        

上面是单选，多选就把type换成checkbox就好啦~

这里的saveCookie方法就是为了每点击一个题目的选项以后，就会在cookie中存储这个，那么要存哪些东西呢？首先要有用户也就是这张试卷的id吧，然后就是题号，还有用户选的答案，用分隔符分开，取得时候按顺序取就可以了。

function saveCookie(order){
        var _minute = parseInt("${test.timeLimit}");
        var _expiresHours = _minute * 60 * 1000;
        var name = "${testPaper.id}"+","+order;
        var type = $("#qtype"+order).val();
        var value = "";
        if(0==type){
            value = type +"-"+$("input[name='q"+order+"']:checked").val();
        }else{
            var s = "";
            $("input[name='q"+order+"']:checked").each(function(){
                if(""== s){
                    s = $(this).val();
                }else{
                    s += "*" + $(this).val();
                }
            });
            value = type +"-"+s;
        }
        addCookie(name,value,_expiresHours);
    }

    // 添加cookie
    function addCookie(name, value, expiresHours) {
        var cookieString = name + "=" + escape(value); //escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
        //判断是否设置过期时间,0代表关闭浏览器时失效
        if (expiresHours > 0) {
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 1000);
            cookieString = cookieString + ";expires=" + date.toUTCString();
        }
        document.cookie = cookieString;
    }

存到cookie里了，可不得取出来吗

//根据名字获取cookie的值
    function getCookieValue(name) {
        var strCookie = document.cookie;
        var arrCookie = strCookie.split("; ");
        for (var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            if (arr[0] == name) {
                return unescape(arr[1]);
                break;
            } else {
                continue;
            };
        };
    }

然后重新打开页面的时候自动的填上去，重新打开就暗示了这个设置答案的方法写在哪里了

    $(document).ready(function() {
            setAnswer();// 设置答案的方法
            $("#inputForm").validate({
                submitHandler: function(form){
                    var size = $("#questionSize").val();
                    var flag = 0;
                    for(var i=1;i<=size;i++){
                        if(undefined==$("input[name='q"+i+"']:checked").val()){
                            flag=1;
                        }
                    }
                    if(1==flag){
                        warn("提示!","有未作答的题，请返回完成！");
                        return;
                    }
                    var size = $("#questionSize").val();
                    for(var i=1;i<=size;i++){
                        var type = $("#qtype"+i).val();
                        if(1==type){
                            var m = "";
                            $("input[name='q"+i+"']:checked").each(function(){
                                if(""== m){
                                    m = $(this).val();
                                }else{
                                    m += $(this).val();
                                }
                            });
                            $("#qchioce"+i).val(m);
                        }
                    }
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });

        });

用到的两个函数

function setAnswer(){
        var size = $("#questionSize").val();
        for(var i=1;i<=size;i++){
            var name = "${testPaper.id}"+","+i;
            var val = getCookieValue(name);
            if(null!=val && "undefined" !=val){
            var arr = val.split("-");
            var type = arr[0];
            var value = arr[1];
            //alert(name+"||"+val);
            if(0==type){
                $("input[name='q"+i+"'][value='"+value+"']").prop("checked","checked");                
            }else{
                var ans = value.split("*");
                for(var j=0;j<ans.length;j++){
                    $("input[name='q"+i+"'][value='"+ans[j]+"']").prop("checked","checked");       
                }
              }
            }
        }
    }

    // 提示框
        function warn(title,content){
            $.alert({
                title: title,
                content: content,
                icon: 'fa fa-rocket',
                animation: 'zoom',
                closeAnimation: 'zoom',
                buttons: {
                    okay: {
                        text: '确定',
                        btnClass: 'btn-primary'
                    }
                }
            });
            return;
        }

上面为了提示用户有未作答的题就直接交卷了，就设置了一个标志位，我都说了我是一个细心的人啦。
这上面有一些id我不解释了，在html里写的，贴个图看下吧

友情提示一下，题型type 0表示单选，1表示多选，在处理数据的时候两个要分开处理，期间会遇到很多的小问题，需要耐着性子一个个去解决，但是这也就是写代码的乐趣所在呀~~~