美文网首页前端社团
在线考试系统前端界面

在线考试系统前端界面

作者: wuyumumu | 来源:发表于2016-12-04 20:06 被阅读123次

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

学生库表设计

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()的用法

相关文章

  • 在线考试系统前端界面

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

  • Node.js在线考试系统——服务器与客户端的交互

    Node.js在线考试系统 1. 系统结构 系统考虑使用Nodejs和SocketIo实现服务器端逻辑,前端使用H...

  • 在线考试系统

    第1章 前台 1.1 注册 想要进行在线考试必须先登录,如果您是新用户需要先进行注册,以获取登录密码,单击登录页面...

  • 基于web在线考试系统推荐

    如果我们有组织在线考试的需求,一般我们会选择在线考试系统,但如果不想下载系统,那么我们可以找基于web的在线考试系...

  • 免费微信在线学习考试系统

    在线学习考试系统,是集在线学习、在线考试、在线交流、学习信息管理、学习档案管理等功能的系统平台,教育机构或企业使用...

  • 在线答题系统,支持在线考试、在线练习等功能(PC端/移动端)

    在线答题系统(在线考试,问卷调查,在线练题),支持在线考试、在线练习等功能... 支持题型:单选题、多选题、填空题...

  • springboot1.5.9 + mybatis + layu

    后台管理系统 业务场景 spring boot + mybatis后台管理系统框架; layUI前端界面; shi...

  • 值得推荐的免费在线考试系统

    在线考试系统相对于传统纸张线下考试,快捷方便、省时省力。现在很多的企业、政府或者是学校都会选择在线考试系统进行培训...

  • 在线考试系统排名

    在线考试系统不仅仅是企业、教育培训行业、政府单位等领域管理者组织在线学习练习考试、微信考试、培训考试、员工线上考核...

  • 如何搭建一个在线答题系统

    在线答题系统是什么? 说到在线答题系统,也许大家都会觉得就是可以实现在线考试回答问题的系统。其实这样回答也是正确的...

网友评论

  • 2d3047466d8b:大神好,请问您有完整的代码吗,可以分享学习一下吗,谢啦

本文标题:在线考试系统前端界面

本文链接:https://www.haomeiwen.com/subject/icnopttx.html