后台
@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;
}
});
});