琉夏123

导航

 
在线考试系统试卷内容展示，并自动评阅试卷获取考试分数——自定义属性data-*

一界面展示代码

<body>
 <%
  int m = 1;
 int n = 1;
 %>
<!--试卷标题，考生姓名展示-->
 <h2 style="text-align: center;">考生姓名：${sessionScope.stuinfo.s_name }
  &nbsp;&nbsp;&nbsp;&nbsp;班级：${sessionScope.examinfo.cls_name }&nbsp;&nbsp;&nbsp;&nbsp;试卷名称：${sessionScope.examinfo.j_title }</h2>
 <h4 style="text-align: center; margin-bottom: 10px; margin-top: 10px;">（单选题,每题2分）</h4>
<!--计时器展示-->
 <h3 class="time" id="time"  style="text-align: center; color: red; margin-bottom: 20px;">00时00分00秒</h3>
<!--试卷内容展示-->
 <form action="" method="POST">
  <div id="Radio" class="panel-collapse collapse in">
   <div class="panel-body">
    <ol>
<!--从后台查询数据库展示题目内容-->
     <c:forEach items="${sessionScope.quesinfostuinfo}" var="question"
      varStatus="status">
<!--题干：使用的是data-*属性，先把答案和解析存放到自定义属性里-->
      <div class="subject" data-i="<%=n++ %>" data-answer="0"
       data-sid="${question.q_id}" data-key="${question.q_ans}"
       data-state="0" data-skey="" data-xi="${question.q_xi }">
       <p><%=m++%>&nbsp;、${question.q_con }
       </p>
       <ol id="selec">
<!--选项展示-->
        <li><label><input type="radio" value="A"
          name="${question.q_id}" style="display: none;">A&nbsp;.&nbsp;${question.q_a}</label></li>
        <li><label><input type="radio" value="B"
          name="${question.q_id}" style="display: none;">B&nbsp;.&nbsp;${question.q_b}</label></li>
        <li><label><input type="radio" value="C"
          name="${question.q_id}" style="display: none;">C&nbsp;.&nbsp;${question.q_c}</label></li>
        <li><label><input type="radio" value="D"
          name="${question.q_id}" style="display: none;">D&nbsp;.&nbsp;${question.q_d}</label></li>
       </ol>
      </div>
      <br>
     </c:forEach>
    </ol>
    <button class="layui-btn layui-btn-lg layui-btn-normal btn"
     onclick="unAnswer()" type="button">交卷</button>
   </div>
  </div>
 </form>
</body>
 
二、<!--js代码-->
 
<script type="text/javascript">
 //声明分数变量
 var score = 0;
//声明正确题目数量
 var correct = 0;
 //1、做题
 $(function() {
  $(".subject ol li").click(function() {
//选中的选项字体变成红色，其他的选项是黑色
   $(this).css("color", "red").siblings().css("color", "black");
   var r = $(this).find(':input').val();
//获取选的答案，并赋值给自定义属性data-skey，这是自定义属性的赋值和取值的方式
   $(this).parent().parent().attr('data-skey', r);
//给自定义属性的赋值
   $(this).parent().parent().attr('data-answer', true);
  });
 });
 // 2、提交试卷
 var unanswer;
 function unAnswer() {
  //判断题目是否已经作答
  unanswer = 0;
  $('.subject').each(function(index) {
   var self = $(this);
//一定要这样写，不然值不会变化，即获取自定义属性的值方式为：$(选择器).attr('data-answer')
   if (self.attr('data-answer') == false) {
    unanswer++;
   }
  });
  if (unanswer != 0) {
   layui.use('layer', function() {
    var layer = layui.layer;
    layer.confirm("还有" + unanswer + "道题没写完，确定提交吗？", {
     btn : [ '确定', '取消' ]
    //按钮
    }, function() {
     getScore();
    }, function() {
     layer.close();
    });
   });
  } else {
   getScore();
  }
 }
 function getScore() {
//遍历展示错误题目的答案和解析
  $('.subject')
    .each(
      function(index) {
       var self = $(this);
       if (self.data("key") != self.data("skey")) {
        for (var j = 0; j < 4; j++) {
         if (self.children().eq(j).val() == self
           .data("key")) {
          self.children().eq(j).css("color",
            "green");
         }
        }
        $(this)
          .after(
            "<p style='margin:auto;background:#97E860;width:800px;'>答案："
              + self.data("key")
              + "</p><p style='margin:auto;background:#97E860;width:800px;'>答案解析："
              + self.data("xi")
              + "</p>");
       } else {
        correct++;
        score = score + 2;
       }
      });
  layui.use('layer', function() {
   var layer = layui.layer;
   layer.open({
    title : '得分',
    content : "共答对：" + correct + "题 ，共计：" + score + "分",
    icon : 1,
   });
  });
 }
</script>
<script type="text/javascript">
 function p(n) {
  return n < 10 ? '0' + n : n;
 }
 //获取当前时间
 var now = new Date();
 //获取结束时间
 var endDate = new Date();
 var j_time = "${sessionScope.j_time}";
 //设置考试时间（单位分钟）
 endDate.setMinutes(now.getMinutes() + parseInt(j_time));
 function getTime() {
  var startDate = new Date();
  var countDown = (endDate.getTime() - startDate.getTime()) / 1000;
  var h = parseInt(countDown / (60 * 60) % 24);
  var m = parseInt(countDown / 60 % 60);
  var s = parseInt(countDown % 60);
  $('.time').html(p(h) + '时' + p(m) + '分' + p(s) + '秒');
  if (countDown <= 0) {
   document.getElementById('time').innerHTML = '考试结束';
   layer.open({
    title : '警告',
    content : '考试时间到，试卷已经提交！',
    icon : 5,
    end : function() {
     unAnswer();
    }
   })
  } else {
   setTimeout('getTime()', 500);
  }
 }
 getTime();
</script>
 
 
问题总结：试卷没写完时，点击提交试卷，会给出确认提示，点击取消后，再继续答题，继续做题的数量并没有累加到第一次做题的数量上，出现这种情况的原因即：
绿色部分不能写成：self.data('answer'),虽然这种方式也能获取到值。
 
 
 
 
 
 
 
 
 
 
 
 
 
posted on 2020-08-02 14:44  琉夏123  阅读(466)  评论(0)    收藏  举报
 
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3