最近在授课的过程中，模拟了一次月度考试，发现纸质版或者电子版的试卷，学生做后，还得老师，亲自一个一个进行阅卷，一个两个还可以，但是多了之后，就很浪费时间和经历，然后花了不到一天的时间做了一个可以在线考试的H5页面，即方便了老师阅卷，也方便了学生进行考试，经过测试，目前感觉还可以，今天，就把它开源出来，有帮助的同志可以拿去用。（本身是做Android开发，页面UI没有做优化，就凑活看吧~）。

具体效果页面（点击直达）：

https://ming723.github.io/moni/vip_ming_do.html

试卷H5页面

先说下我实现的思路，一是无论单选，多选，填空，点击提交会自动判分，二，试卷的题，由于会随着考试类型多变，所以题需要动态获取。

题如何动态获取呢？这是我简单的说一下我的思路，我这边用了一个静态文本，当然了大家也可以从数据库里进行获取。静态文本里，就是一些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毫秒的定时操作，我觉得这样做不好。

未做判断

大家有时间还是看源码吧，写的不是很好，但满足了我的需求~
https://github.com/ming723/TestPaper