开源一个前端试卷题页面

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

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

https://abnerming888.github.io/vip/testpage/vip_ming_do.html

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

题如何动态获取呢？这是我简单的说一下我的思路，我这边用了一个静态文本，当然了大家也可以从数据库里进行获取。静态文本里，就是一些Json数据，因为我的题型目前有三种，单选，多选，和填空，所以我的Json文本格式如下，（当然了，请忽略的我的字段名称）：

简单的说些Json中这些字段的作用，三种题型，我用了三个数组进行存储，分别是one,two three,单选和多选，除了A,B,C,D之外，还有一个title，这个title就是每一题的标题，字段biao，就是用来标识每一题的一个name值。

当然了除了题的文本之外，还有答案的文本，答案可以和题写到一个文本里，这里我进行分开了，单独对答案又写了一个json的静态文本，格式如下：

很简单，每个题型有几道题，对应的就要有几个答案，单选题我们比对就可以了，那多选题比对，和填空题比对，如何操作呢，其实也很简单，获取出来答案之后，可以判断所选的答案是否包含于获取的答案，或者用个标识进行截取，两个数组进行一一比对，也是可以的。

好了，有了数据之后，那么就开始写页面吧，页面没啥好说的，使用的JQuery,比如头部这个，其实就是固定写死的。

其实按理来说，顶部的这些信息，其实也得需要自己来动态获取，毕竟试题不一样，班级也不一样，专业阶段也不一样，这些改变就显得简单的了，直接获取下来，进行填充即可。

中间的题，也是很简单，毕竟数据已经给出了，直接获取，动态创建标签进行填充数据就可以了，这里就以单选为例，大家可以看看，创建div，动态的向指定div里进行append就可以了，毕竟不是做前端开发的，可能写的不标准，大家凑合着看吧~

多选和填空类似，这里就不多做解释，点击提交，怎么判断，哪一道题没有做呢，比如单选，这里，设置name，就是json文本里的biao字段，我们可以直接对这个字段做判断即可，如下：

然后对其判断，哪道题没有写，给用户一个提示：

都写了之后，计算分数，这里我用的是（price）来计算总的分数（不要在乎字段名字），需要注意的是，我这里定义的无论哪种题型，每一题的分值都是2.5分，当然了你可以去改变。

至于这个anItem如何获取，我之前也说过了，答案，我定义了一个单独的静态文件，获取数据之后，赋值给了一个成员变量：

三个类型，就定义了三个变量。  

多选，和填空，大家可以看源码进行分析，需要注意的是，填空，我是如何自动判分的呢，很简单，只要学生回答的包含我们指定的字段，就可以给他分。分值的话由自己去判断，比如对一个几分，对两个又是几分。

底部还有一个动态展示，学生哪道题没有做，可以点击，到哪道题，以及做过的题，进行变色处理；这块逻辑，不知道大家怎么实现，我的实现很笨，用字符串的形式，存储你点击过后的题，然后，进行遍历，如果字符串中有这个题，那么就变色，没有就不变，做了一个200毫秒的定时操作，我觉得这样做不好。

大家有时间还是看源码吧，写的不是很好，但满足了我的需求~

源码地址

https://github.com/AbnerMing888/TestPape