layui考试试卷的组装

后台

	@RequestMapping("/examinPaper/showExamInfo")
	public String startExam(ModelMap model,String examinPaperId)
	{
		List<ExaminQuestionDto> examinQuestionList =  examinPaperService.makeExaminQuestion(examinPaperId);
		ExaminPaper examinPaper = examinPaperService.getExaminPaperById(examinPaperId);
		model.addAttribute("examinPaper", examinPaper);
		model.addAttribute("examinQuestionList", examinQuestionList);
		return "studyContest/showExamInfo";
	}

	/**
	 * Map<题目ID,题目选项>
	 * @param questionItemList
	 */
	private Map<String,List<QuestionItem>> getQuestionItemMap(List<QuestionDto> questionItemList)
	{
		Map<String,List<QuestionItem>> questionMap = new HashMap<String,List<QuestionItem>>(1);
		//选项list
		List<QuestionItem> itemList = null;
		for (QuestionDto dto : questionItemList) 
		{
			QuestionItem item = new QuestionItem();
			item.setQuestionItemId(dto.getQuestionItemId());
			item.setItemSerial(dto.getItemSerial());
			item.setItemContent(dto.getItemContent());
			item.setItemOrder(dto.getItemOrder());
			if(questionMap.containsKey(dto.getQuestionMgtId()))
			{
				itemList = questionMap.get(dto.getQuestionMgtId());
				itemList.add(item);
			}
			else
			{
				itemList = new ArrayList<QuestionItem>(1);
				itemList.add(item);
				questionMap.put(dto.getQuestionMgtId(), itemList);
			}
		}
		return questionMap;
	}


	/**
	 * 组装试卷
	 * @param examinPaperId
	 */
	public List<ExaminQuestionDto> makeExaminQuestion(String examinPaperId)
	{
		Map<String,Object> param = new HashMap<String,Object>(1);
		param.put("flag", 0);//不带is_right条件
		param.put("examinPaperId", examinPaperId);
		//包含题目与选项
		List<QuestionDto> questionItemList = examinPaperMapper.getExaminQuestionItemList(param);
		if(CollectionUtils.isEmpty(questionItemList))
		{
			return null;
		}
		Map<String,List<QuestionItem>> questionItemMap = getQuestionItemMap(questionItemList);
		List<ExaminQuestionDto> examinQuestionList = new ArrayList<ExaminQuestionDto>(1);
		ExaminQuestionDto examinQuestion = null;
		for(Map.Entry<String,List<QuestionItem> > entry:questionItemMap.entrySet())
		{  
			for (QuestionDto dto : questionItemList)
			{
				if(entry.getKey().equals(dto.getQuestionMgtId()))
				{
					examinQuestion = new ExaminQuestionDto();
					examinQuestion.setQuestionMgtId(dto.getQuestionMgtId());
					examinQuestion.setQuestionName(dto.getQuestionName());
					examinQuestion.setQuestionType(dto.getQuestionType());
					examinQuestion.setQuestionTypeName(dto.getQuestionTypeName());
					examinQuestion.setQuestionAnwser(dto.getQuestionAnwser());
					List<QuestionItem> itemList = entry.getValue();
					examinQuestion.setItemList(itemList);
					examinQuestionList.add(examinQuestion);
					break;
				}
			}
		}  
		
		return examinQuestionList;
	}


	/**
	 * 根据id查询试卷详情
	 * @param examinPaperId
	 */
	public ExaminPaper getExaminPaperById(String examinPaperId)
	{
		/*ExaminPaper examinPaper = ;
		if(examinPaper != null && StringUtil.isNotEmpty(examinPaper.getJoinPersonsIds())) {
			StringBuffer joinMember = new StringBuffer();
			for (String partyMemberId : examinPaper.getJoinPersonsIds().split(",")) {
				PartyMember partyMember = partyMemberMapper.getPartyMember(partyMemberId);
				if(partyMember != null ) {
					joinMember.append(","+partyMember.getName());
				}
			}
			String joinMembers = joinMember.toString().replaceFirst(",", "");
			examinPaper.setJoinPersonsNames(joinMembers);
		}
		*/
		ExaminPaper examinPaper = examinPaperMapper.getExaminPaperById(examinPaperId);
		if (StringUtils.isNotEmpty(examinPaper.getJoinPersonsIds())) {
			String[] ids = examinPaper.getJoinPersonsIds().split(",");
			List<String> joinPersonsNames=examinPaperMapper.findJoinPersonsNames(ids);
			for(int i=0;i<joinPersonsNames.size();i++) {
				System.out.println("====================="+joinPersonsNames.get(i));
			}
			if (CollectionUtils.isNotEmpty(joinPersonsNames)) {
				examinPaper.setJoinPersonsNames(StringUtils.strip(joinPersonsNames.toString(),"[]"));
			}
			System.out.println("----------------"+examinPaper.getJoinPersonsNames());
		}
		return examinPaper;
	}

考试页面

<!DOCTYPE html>
<html>
<head>
<#include "/common/header.html"/>
<meta charset="utf-8">
<title>考试答题</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
.exam{ padding: 0 20px; }
.exam_tit{
    height: 40px;
    overflow: hidden;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
}
.exam_info{
    height: 30px;
    overflow: hidden;
    line-height: 30px;
    vertical-align: middle;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px #999999 solid;
    margin-bottom: 15px;
}
.exam_info p{
    display: inline-block;
}
.exam_info p:first-child span{
    margin-right: 30px;
}
.exam_info p:first-child{
    float: left;
}
.exam_info p:last-child{
    float: right;
}
.exam_question{
    line-height: 30px;
    font-size: 13px;
    color: #000000;
    font-weight: bold;
}
.exam_block{ 
    padding-left: 20px;
    font-size: 12px;
    color: #000000;
}
.exam_block .layui-form-radio span{
    font-size: 12px;
    color: #000000;
}
.exam_checkbox p{
    height: 29px;
    padding-left: 2px;
}
.exam_checkbox .layui-form-checkbox[lay-skin=primary] span {
    color: #000000;}
.exam_sub{
    border-top: 1px #999999 solid;
    margin-top: 20px;
    padding-top: 10px;
    text-align: center;
    padding-bottom: 20px;
}
.exam_grade{
  height: auto;
  overflow: hidden;
  padding-top: 10px;
}
.exam_grade p{
  line-height: 26px;
  font-size: 13px;
  color: #000000;
  text-align: center;
}
.exam_grade p:last-child{
  font-size: 12px;
  color: #666666;
  line-height: 20px;
}
.exam_grade p.on{
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  line-height: 30px;
}
h1 {
    font-family:"微软雅黑";
    font-size:40px;
    margin:20px 0;
    border-bottom:solid 1px #ccc;
    padding-bottom:20px;
    letter-spacing:2px;
}

</style>
</head>
<body>
<div class="system_wrap exam">
   <div class="exam_tit">${examinPaper.paperName}</div>
   <div class="exam_info">
     <p>
       <b>考试编号：</b>
       <span>NO.23564</span>
       <b>答题人：</b>
       <span>${current_login_user.userName}</span>
       <b class="score" style="display:none">得分：</b>
       <span class="score" id="scoreValue" style="display:none"></span>
     </p>
     <p>
       <b>
       <button class="layui-btn layui-btn-normal" id="startExam" onclick="startExam()">开始考试</button>
       </b>
       <b>考试时间：</b>
       <span>
       <input type="hidden" id="examinDuration" value="${examinPaper.examinDuration}"/>
       <strong id="hour_show">0时</strong>
       <strong id="minute_show">0分</strong>
       <strong id="second_show">0秒</strong></span>
       </p>
   </div>
   <div class="exam_con layui-form">
     <form id="examinPaperForm" class="layui-form">
     <#if examinQuestionList?? && (examinQuestionList?size > 0) >
     <#list examinQuestionList as question>
     <div class="layui-form-item">
        <div class="exam_question">
        ${question_index+1}、（${question.questionTypeName!''}） ${question.questionName!''}  
        <strong class="layui-bg-red" style="display:none">正确答案：${question.questionAnwser!''}</strong>
        </div>
        <input type="hidden" value="${question.questionMgtId}">
        <div class="exam_block">
          <#if question.itemList?? && (question.itemList?size>0)>
          <#list question.itemList?sort_by ("itemOrder") as item>
          <p><input type="radio" name="${question.questionMgtId!''}" value="${item.itemSerial!''}" title="${item.itemSerial!''}、${item.itemContent!''}"/></p>
          </#list>
          </#if>
          </div>
       </div>
       </#list>
       </#if>
     <div class="layui-form-item exam_sub" id="submitExam" style="visibility:hidden">
        <button class="layui-btn layui-btn-big" lay-submit="" lay-filter="submitExam" >交卷</button>
     </div>
     </form>
   </div>
   <div>
    <input type="hidden" id="examinPaperId" name="examinPaperId" value="${examinPaper.examinPaperId!''}">
    <#if examinQuestionList??>
   	<input type="hidden" id="questionNum" name="questionNum" value="${examinQuestionList?size}">
   	</#if>
   </div>
</div>
<script type="text/javascript" src="${rc.contextPath}/studyContest/js/examinPaper.js" charset="utf-8"></script>
</body>
</html>

js

var useTime = 0;
var questionNum = parseInt($("#questionNum").val());
layui.use(['element','form','layer'], function(){
  var element = layui.element;
  var form = layui.form
  ,layer = layui.layer;
  
  var submitNum = 0;
  //单选监听及过滤事件
  form.on('radio', function(data){
    submitNum += 1;
 });
  form.on('submit(submitExam)',function(data){
	  var a = JSON.stringify(data.field);
	  layer.confirm('您确定要提交试卷吗？', {
		  btn: ['确定','取消'] //按钮
		}, function(){
		  var questionNum = parseInt($("#questionNum").val());
		  if(questionNum!=submitNum){
			  layer.msg('您还有题目没有作答，请再检查一下', {icon: 2});
			  return false;
		  }
		  var questionItem = data.field;//题目选项：题目答案
		  var examinPaperId = $("#examinPaperId").val();
		  var params = {
				  "examinPaperId":examinPaperId,
				  "questionScore":JSON.stringify(questionItem),
				  "finishExaminDuration":useTime
		  }
		  var url = CONTEXT_PATH + '/examinPaper/saveExaminScore';
		  var retData = $.getData(url, params);
		  if(retData.status ==1000 || retData.status == WebConst.SUCCESS){
			    layer.msg('提交成功', {icon: 1});
			    $("#submitExam").hide();
			    $("#startExam").text("考试结束");
			    $("strong.layui-bg-red").attr("style","display:''")
			    $(".score").attr("style","display:''");
			    $("#scoreValue").text(retData.data);
				return false;
		   }
		}, function(){
		  layer.msg('再检查一下', {icon: 2});
		  return false;
		});
	  return false;
  });
  // 弹层
  var layer = layui.layer;
});

var sumTime = $("#examinDuration").val();
var intDiff =sumTime * 60 ;//倒计时总秒数量
var timeFlag = true;
var beginExaminTime = "";
//倒计时
function timer(intDiff){
    window.setInterval(function(){
    var day=0,
        hour=0,
        minute=0,
        second=0;//时间默认值        
    if(intDiff > 0){
        day = Math.floor(intDiff / (60 * 60 * 24));
        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    }
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    $('#day_show').html(day+"天");
    $('#hour_show').html('<s id="h"></s>'+hour+'时');
    $('#minute_show').html('<s></s>'+minute+'分');
    $('#second_show').html('<s></s>'+second+'秒');
    intDiff--;
    useTime++;
    }, 1000);
} 
function startExam(){
	beginExaminTime = getNowFormatDate();
	if(timeFlag){
		 timer(intDiff);
	}
	$("#submitExam").attr("style","visibility:visible");
	$("#startExam").text("正在考试");
}
//计算当前时间
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
}

$(function(){
	$(document).bind("keydown", function(e) {
		 e = window.event || e;//解决浏览器兼容的问题   
		 if(e.keyCode == 116) {//F5按下
			 e.keyCode = 0;
			 return false;
		 }
	});
});