DuskTown Blog

自制在线考试系统

目前已实现的功能:

  1. 自动评分
  2. 自动生成成绩报表
  3. 统计每道题目的正确率并生成报表

Todo:

  1. 前端页面优化
  2. 准备开源

本文记录一下开发过程中遇到的一些问题合解决方案

用过问卷星的都知道,在你划回想要检查答案的时候很容易误触

那么如何解决这个问题呢?

防误触的实现

首先创建一个list用于存储用户答案 主要逻辑是监测到点击时间后,遍历该question下的选项id,将所有button加上disabled属性 由于每个question下的选项内容可能不同,为了方便调用这里创建一个存储id映射关系的list


let option_mapping = ["a", "b", "c", "d", "e", "f", "g"]

index = 1 对应于 {{option_id}}_a

具体实现:


$.each(questionsList, function(i, v) {
    //找到对应的question
    if (v["question_id"] == question_id) {
    	$.each(questionsList[i]["options"], function(index, option_id) {
    		//使该问题下的全部按钮无法点击防止误触
    		$(eval(question_id+"_"+option_mapping[index)).prop('disabled', true);
    	});
    }
});

但如果要更改答案怎么办呢,这时我们再定义一个函数

function changeAnswer(e) {

    question_id = $(e).attr("question_id");

    $.each(userAnswerList, function(key, value) {
    	if (value["question_id"] == question_id) {
    		userAnswerList.pop(key);
    	}
    });

    $.each(questionsList, function(i, v) {
    	if (v["question_id"] == question_id) {
    		$.each(questionsList[i]["options"], function(index, option_id) {
    			question_info = question_id+"_"+option_mapping[index);
    			$(eval(question_info)).removeAttr('disabled');			});
    	}
    });

}

判分系统的实现

这里由于力求最简单的解决办法,所以不论是选择题还是填空题我们都通过对比用户输入和答案是否一致来实现

但又出现了新的问题,一道题可以有多个正确答案 这里我们用“|”分隔每个答案,验证答案是否正确时只需判断用户输入的答案是否在答案列表里即可