sunwei
/
jianDemo_edu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/webpage/include/taglibf.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>${fns:getConfig("productName")}</title>
		<link rel="stylesheet" href="${ctxStaticWeb}/css/base.css" />
		<link rel="stylesheet" href="${ctxStaticWeb}/css/second.css" />
		<link href="${ctx}/static/plugin/layui/dist/css/layui.css" rel="stylesheet" />

		<script src="${ctx}/static/web/js/jquery-2.1.4.js"></script>
		<script src="${ctx}/static/plugin/jquery-validation/1.14.0/jquery.validate.js" type="text/javascript"></script>
		<script src="${ctx}/static/plugin/jquery-validation/1.14.0/localization/messages_zh.min.js" type="text/javascript"></script>

		<script src="${ctxStatic}/plugin/layui/layer/layer.js"></script>
		<script src="${ctxStatic}/plugin/layui/laytpl/laytpl.js"></script>
		<script src="${ctxStatic}/plugin/vue/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="${ctxStaticWeb}/css/dj.css" />
		<style>
			h2 div{
            display: inline;
        }
		label div{
		    display: inline;
		}
    </style>

	</head>
	<body>
		<%@ include file="/webpage/modules/web/top.jsp"%>
		<div id="app" class="contant c">

			<div class="dtk">
				<div class="time">剩余时间<p>{{count}}</p>
				</div>
				<div class="title">
					<div class="title_border"></div>
					<div class="title_content">答题卡</div>
				</div>
				<div class="card-content-title">{{testInfo.paperName}}（共{{sum}}题，合计{{testInfo.points}}分）</div>
				<div class="box-list clearfix">
					<div v-for="(question, i) in questionList">
						<a :herf="'#'+i" :class="questionList[i].userAnswer === '' ? '' : 'red'">{{i + 1}}</a>
					</div>
				</div>

				<div class="modal-footer">
					<span class="icon-box s2"></span>
					<span class="icon-label">已答</span>
					<span class="icon-box s1"></span>
					<span class="icon-label">未答</span>

				</div>
			</div>
			<div class="mian">

				<div class="tit">{{testInfo.paperName}}（共{{sum}}题，合计{{testInfo.points}}分）</div>
				<div class="qustion">
					<div v-for="(question, i) in questionList">
						<div v-if="question.types === '1'">
							<h2 :id="i"><strong>{{i+1}}</strong>.<div v-html="question.title">{{question.title}}</div>({{question.points}}分)</h2>
							<ul>
								<div v-for="(option,index) in question.eduQuestionOptionList">
									<li>
										<input class="radio_type" type="radio" :name="'question'+i" :value="index+''" v-model="questionList[i].userAnswer" @click="handleClick(i,question.types)"/>
										<label>
											<div v-html="option.title">{{option.title}}</div>

										</label>
									</li>
								</div>
							</ul>
							<div class="h"></div>
						</div>
						<div v-if="question.types === '2'">
							<h2 :id="i"><strong>{{i+1}}</strong>.<div v-html="question.title">{{question.title}}</div>({{question.points}}分)</h2>
							<ul>
								<div v-for="(option,index) in question.eduQuestionOptionList">
									<li>
										<input class="radio_type" type="checkbox" :name="'question'+i" :value="index+''" v-model="questionList[i].checkAnswer"  @click="handleClick(i,question.types)" />
										<label>
											<div v-html="option.title">{{option.title}}</div>
										</label>
									</li>
								</div>
							</ul>
							<div class="h"></div>
						</div>
						<div v-if="question.types === '3'">
							<h2 :id="i"><strong>{{i+1}}</strong>.<div v-html="question.title">{{question.title}}</div>({{question.points}}分)</h2>
							<ul>
								<div v-for="(option,index) in question.eduQuestionOptionList">
									<li>
										<input class="radio_type" type="radio" :name="'question'+i" :value="index+''" v-model="questionList[i].userAnswer" @click="handleClick(i,question.types)"/>
										<label>
											<div v-html="option.title">{{option.title}}</div>
										</label>
									</li>
								</div>
							</ul>
							<div class="h"></div>
						</div>
					</div>

				</div>
				<div class="btn" @click="handleCommit()">提交</div>
			</div>
		</div>

		<div class="hintl">

			<div class="hintl-in2">有试题未完成，是否交卷？</div>
			<div class="hintl-in3">取消</div>
			<div class="hintl-in4">确认</div>
		</div>
		<link rel="stylesheet" type="text/css" href="${ctxStaticWeb}/css/alert.css" />

		<script>
			new Vue({
				el: "#app",
				data: {
					num: 0,
					questionList: [],
					testInfo: {},
					count: '',
					endTime: 0,
					sum: 0
				},
				 mounted: function () {
					const now = Date.parse(new Date())
					this._interval = setInterval(() => {
						this.handleCount();
					}, 1000)
				},
				 destroyed () {
					 this.commit()
					clearInterval(this._interval)
				},
				methods: {
					commit(){
						clearInterval(this._interval)
						var eduQuestionDtos = JSON.stringify(this.questionList);
						var inde = top.layer.msg('智能判卷中！', {
						  icon: 16
						  ,shade: 0.01,
						  time:999999999//设置超长时间
						});
						$.ajax({
						 type:"post",
						 async: false,
						 url:"${ctx}/a/exam/eduUserTests/commit",
						 data:eduQuestionDtos,
						 contentType : 'application/json',
						 dataType : 'json',
						 success:function(data){
							if(data.success){
								  layer.close(inde)
								  msg = '提交成功，考试结束!您的得分是'+data.totalPoint+'分！'
								  layer.open({
									content: msg
									,btn: ['确定']
									,yes: function(index, layero){
									  window.location.href = "${ctxF}/${goToPage}";
									}
								  });
							}
						 },
						 error:function(){//失败的函数
						    layer.close(inde)
							layer.confirm('提交失败', {icon: 3, title:'提示'}, function(index){
								layer.close(index);
							});
						 }
						});
					},
					handleCommit() {
						var msg = "确认要提交吗？"
						var unAnswer = 0;
						for (let i = 0; i < this.questionList.length; i++) {
							const obj = this.questionList[i]
							if(obj.userAnswer === ''){
								unAnswer++
							}
						}
						if(unAnswer != 0){
							msg = '您有'+unAnswer+'道题未做，'+msg
						}
						var that = this;
						layer.confirm(msg, {icon: 3, title:'提示'}, function(index){
							that.commit();
							layer.close(index);
						});
					},
					handleClick(i,types) {
						var obj = this.questionList[i];
						if(types === '2') {
							//多选绑定数组
							setTimeout(function(){
								obj.userAnswer = obj.checkAnswer.toString();
							},10)
						}
						this.$set(this.questionList, i, obj);
					},
					handleCount(){
					  const now = Date.parse(new Date())
					  const msec = this.endTime - now
					  if(msec <= 0){
					  	this.commit()
					  }
					  let hr = parseInt(msec / 1000 / 60 / 60 % 24)
					  let min = parseInt(msec / 1000 / 60 % 60)
					  let sec = parseInt(msec / 1000 % 60)
					  hr = hr > 9 ? hr : '0' + hr
					  min = min > 9 ? min : '0' + min
					  sec = sec > 9 ? sec : '0' + sec,
					  this.count = hr+':'+min+':'+sec
					}
				},
				beforeCreate(){
					const msg = "您已经开始考试，离开本页面即为提交！"
					layer.alert(msg, {icon: 0});
				},
				created() {
					this.testInfo = ${fns: toJson(testInfo)}
					this.endTime = Date.parse(new Date()) + this.testInfo.examTime * 60000;
					const dataList = ${fns: toJson(questionList)}
					for (var i = 0; i < dataList.length; i++) {
						var obj = dataList[i];
						//v-modle双向绑定时 复选框初始化为数组
						if (obj.types === '2') {
							obj.checkAnswer = [];
						}
						obj.userAnswer = '';
                        obj.testId = this.testInfo.id;
						obj.questionId = obj.id;
						this.questionList[i] = obj;
					}
					this.sum = this.questionList.length;
				}
			})
		</script>
	</body>
</html>