热门搜索 :
考研考公
您的当前位置:首页正文

在线考试系统前端界面

来源:东饰资讯网

整个在线考试系统分为教师端和学生端,教师端和学生端的登录端也不一样,二者分开登录

学生库表设计

var stuSchema = new Schema({
  stuName: String,
  stuId: String,
  password: String,
  class: String
});

教师库表设计

var stuSchema = new Schema({
  teaName: String,
  teaId: String,
  password: String
});

学生端

学生登录成功之后进入到考生页面,若时间未到,显示倒计时;若时间到,显示考题;


image.png

考试还未开始的时候,考生登入后显示倒计时,同时隐藏开始考试的按钮

//倒计时显示剩余的时间
function showtime() {
  var nowtime = new Date();
  var endtime = new Date("2016/12/02,21:26:00");
  var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
  var day = parseInt(lefttime / (24 * 60 * 60));
  var hour = parseInt(lefttime / (60 * 60) % 24);
  var min = parseInt(lefttime / 60 % 60);
  var sec = parseInt(lefttime % 60);
      day = addZero(day);
      hour = addZero(hour);
      min = addZero(min);
      sec = addZero(sec);
      $("#unStart #explain").text("考试还未开始");
      $("#unStart #timer").text(day+":"+hour+":"+min+":"+sec);
  if(lefttime<=0){
    $("#unStart #explain").text("考试已开始");
    $("#unStart #timer").hide();
    $("#startBtn").show();
    return;
  }
  setTimeout(showtime,1000);
}
//当时间小于10的时候添加0
function addZero(i){
  if(i<10){
    i = "0" + i;
  }return i;
}

如果考试开始了,则显示开始考试的按钮,考生点击开始考试的按钮开始答题,考试时间到了,无论考生是否点击了开始考试,考试进度都会进行。到了规定的时间之后就无法答题。

//考试已进行的时间
function testSchedule() {
  var nowtime = new Date();
  var endtime = new Date("2016/12/04,19:00:00");
  var usedTime = parseInt((nowtime.getTime()-endtime.getTime()) / 1000);
  var hour = parseInt(usedTime / (60 * 60) % 24);
  var min = parseInt(usedTime / 60 % 60);
  var sec = parseInt(usedTime % 60);
  hour = addZero(hour);
  min = addZero(min);
  sec = addZero(sec);
  $("#testSchedule").text("考试进度:"+hour+":"+min+":"+sec);
  if(usedTime>=testTime) {
    $(".stopBox").show();
    return;
  }
  setTimeout(testSchedule,1000);
}

教师端

image.png

要注意的是new Date().getTime() 和Date.now()的用法

Top