|
|
<!DOCTYPE html>
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
<head>
|
|
|
<th:block th:include="include :: header('保密考试')" />
|
|
|
</head>
|
|
|
<style>
|
|
|
button {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
button:focus {
|
|
|
outline: 0;
|
|
|
border: 1px #ddd solid;
|
|
|
}
|
|
|
ul li {
|
|
|
list-style: none;
|
|
|
}
|
|
|
body {
|
|
|
background-color: #f3f3f4;
|
|
|
overflow: hidden;
|
|
|
padding: 20px;
|
|
|
|
|
|
}
|
|
|
#blackCover {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
|
|
|
.black{
|
|
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
|
|
display: block !important;
|
|
|
}
|
|
|
|
|
|
|
|
|
#blackCover > div{
|
|
|
background-color: #ddd;
|
|
|
width: 280px;
|
|
|
height: 160px;
|
|
|
margin-left: -140px;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 150px;
|
|
|
border-radius:10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
/* "提示" */
|
|
|
#blackCover span{
|
|
|
display: block;
|
|
|
text-align: center;
|
|
|
color: #000;
|
|
|
margin-top:10px;
|
|
|
font-size: 16px;
|
|
|
font-weight:700;
|
|
|
padding:5.4% 0;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
#information{
|
|
|
text-align: justify;
|
|
|
color: #3f3f3f;
|
|
|
margin-bottom: 20px;
|
|
|
padding: 0 10px;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
#goOn{
|
|
|
display: block;
|
|
|
background-color:#ED171F;
|
|
|
width:30.4%;
|
|
|
margin:0 auto;
|
|
|
font-size:14px;
|
|
|
color:#fff;
|
|
|
font-weight:700;
|
|
|
height:36px;
|
|
|
border-radius:8px;
|
|
|
line-height:36px;
|
|
|
border:1px solid red;
|
|
|
}
|
|
|
|
|
|
|
|
|
#main {
|
|
|
width: 100%;
|
|
|
height: 660px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
|
|
|
#examTitle {
|
|
|
width: 100%;
|
|
|
height: 70px;
|
|
|
background-color: #ffffff;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 0 20px 0 20px;
|
|
|
}
|
|
|
|
|
|
|
|
|
#timing {
|
|
|
float: right;
|
|
|
width: 220px;
|
|
|
height: 50px;
|
|
|
background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='32' height='32' %3E%3Cpath d='M913.892 470.344C866.856 339.898 752 239.779 609.227 207.91c36.588-52.48 97.191-86.976 165.988-86.976 111.86 0 202.508 90.683 202.508 202.49.036 58.032-24.706 109.998-63.83 146.923zM524.486 128.505v127.324c194.311 7.93 349.502 167.497 349.502 363.725 0 81.957-27.365 157.264-72.981 218.166l84.458 146.284-70.18 40.49-72.239-125.196c-63.247 52.852-144.637 84.723-233.508 84.723-88.377 0-169.375-31.443-232.481-83.802l-74.153 128.407-70.127-40.49 86.142-149.263c-46.167-61.065-73.886-136.903-73.886-219.34 0-194.933 153.149-353.615 345.545-363.527V128.467c-19.65-7.024-33.892-25.361-33.892-47.426 0-28.111 22.79-50.866 50.866-50.866 28.111 0 50.866 22.772 50.866 50.866 0 22.099-14.275 40.417-33.929 47.46zm-298.473 491.05c0 156.571 126.918 283.488 283.488 283.488s283.488-126.881 283.488-283.488c0-156.553-126.918-283.472-283.488-283.472S226.013 463.001 226.013 619.555zm368.477 61.278H492.704c-18.711 0-33.892-15.2-33.892-33.91V511.262c0-18.747 15.182-33.929 33.892-33.929 18.783 0 33.929 15.182 33.929 33.929V613.01h67.855c18.73 0 33.892 15.163 33.892 33.946 0 18.676-15.163 33.874-33.892 33.874zM110.179 470.344c-39.124-36.926-63.884-88.908-63.884-146.941 0-111.824 90.665-202.49 202.508-202.49 68.815 0 129.399 34.513 165.988 86.994-142.755 31.871-257.575 131.988-304.611 262.434z' fill='%23189837'/%3E%3C/svg%3E") 15px center no-repeat #fff;
|
|
|
border-radius: 100px;
|
|
|
}
|
|
|
|
|
|
#timer {
|
|
|
width: 60px;
|
|
|
height: 40px;
|
|
|
color: #696969;
|
|
|
font-size: 24px;
|
|
|
padding: 10px 0 0 60px;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
#suspend {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border: none;
|
|
|
border-radius: 100px;
|
|
|
background-color: #6AC895;
|
|
|
color: #fff;
|
|
|
float: right;
|
|
|
margin: 5px 8px;
|
|
|
display: inline-block;
|
|
|
font-size: 18px;
|
|
|
font-weight: 800;
|
|
|
line-height: 40px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
/*左侧选题区域*/
|
|
|
|
|
|
#itemSelection {
|
|
|
width: 25%;
|
|
|
height: 100%;
|
|
|
box-shadow: 4px 0 2px #EFF1F0;
|
|
|
float: left;
|
|
|
background: linear-gradient(to right, #EDF8F2 0%, #EDF8F2 97.9%, #C8CBCA 98%, #FAFAFA 100%);
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#itemChoose {
|
|
|
width: 100%;
|
|
|
height: 600px;
|
|
|
padding: 10px 12px 0 3px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#itemChoose>div {
|
|
|
width: 100%;
|
|
|
margin: 6px;
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
#itemChoose button {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #39CB76;
|
|
|
border-radius: 3px;
|
|
|
color: #39CB76;
|
|
|
font-family: "黑体";
|
|
|
float: left;
|
|
|
margin: 6px 3px 6px 6px;
|
|
|
}
|
|
|
|
|
|
#itemChoose>div p {
|
|
|
height: 16px;
|
|
|
line-height: 16px;
|
|
|
text-align: left;
|
|
|
float: left;
|
|
|
margin: 6px 3px 6px 3px;
|
|
|
font-size: 15px;
|
|
|
color: #6EAD8B;
|
|
|
}
|
|
|
|
|
|
#itemChoose>div ul {
|
|
|
display: block;
|
|
|
margin: 0 3px;
|
|
|
float: left;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
#itemChoose>div li {
|
|
|
text-align: center;
|
|
|
font-size: 15px;
|
|
|
border-radius: 3px;
|
|
|
float: left;
|
|
|
margin: 3px 5px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.nowAnswer {
|
|
|
background-color: #F0FAF5;
|
|
|
border: 1px solid #609080;
|
|
|
color: #90B5A2;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
box-shadow: 0px 0px 4px #888888;
|
|
|
}
|
|
|
|
|
|
.markAnswer {
|
|
|
background-color: #FFAD00 !important;
|
|
|
border: 1px solid #FFAD00 !important;
|
|
|
color: #fff !important;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
|
|
|
.yesAnswer {
|
|
|
background-color: #2AB064;
|
|
|
border: 1px solid #2AB064;
|
|
|
color: #fff;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
|
|
|
.noAnswer {
|
|
|
background-color: #F0FAF5;
|
|
|
border: 1px solid #ddd;
|
|
|
color: #90B5A2;
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
|
|
|
/*标记指示信息*/
|
|
|
#markInfo {
|
|
|
width: 100%;
|
|
|
height: 80px;
|
|
|
background-color: #D5EDDF;
|
|
|
box-sizing: border-box;
|
|
|
padding: 8px 10px;
|
|
|
background: linear-gradient(to right, #D5EDDF, #D6EEE0 97.9%, #A4BAAD 98%, #D2E8DB 100%);
|
|
|
}
|
|
|
|
|
|
#markInfo li {
|
|
|
height: 20px;
|
|
|
line-height: 20px;
|
|
|
font-size: 18px;
|
|
|
display: block;
|
|
|
width: 60px;
|
|
|
float: left;
|
|
|
font-size: 12px;
|
|
|
margin: 5px 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
#markInfo span {
|
|
|
display: inline-block;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border-radius: 3px;
|
|
|
vertical-align: middle;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
|
|
|
#answer {
|
|
|
width: 75%;
|
|
|
height: 100%;
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
#info {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
background-color: #edf8f2;
|
|
|
float: left;
|
|
|
font-family: "宋体";
|
|
|
line-height: 50px;
|
|
|
text-indent: 15px;
|
|
|
font-size: 14px;
|
|
|
color: #333;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
|
|
|
#item {
|
|
|
width: 100%;
|
|
|
height: 550px;
|
|
|
background-color: #FFFFFF;
|
|
|
float: left;
|
|
|
padding: 20px 30px;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
|
|
|
#index {
|
|
|
font-style: normal;
|
|
|
margin-bottom: 20px;
|
|
|
display: block;
|
|
|
font-size: 20px;
|
|
|
color: #1F834B;
|
|
|
font-weight: 800;
|
|
|
}
|
|
|
|
|
|
#describe {
|
|
|
line-height: 23px;
|
|
|
word-spacing: 20px;
|
|
|
/*字符宽度，专有空格*/
|
|
|
letter-spacing: 1px;
|
|
|
text-align: justify;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
/* 题目中的图片 */
|
|
|
|
|
|
#describe img{
|
|
|
max-width: 80%;
|
|
|
margin:10px auto;
|
|
|
}
|
|
|
|
|
|
|
|
|
#option {
|
|
|
background-color: #EEF9F3;
|
|
|
padding: 10px 15px;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
#option p {
|
|
|
display: inline-block;
|
|
|
line-height: 17px;
|
|
|
text-align: justify;
|
|
|
margin: 5px 20px 0 10px;
|
|
|
}
|
|
|
|
|
|
#option i {
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
|
|
|
#option li {
|
|
|
margin: 5px 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
/* 题目解析 */
|
|
|
#explain {
|
|
|
margin: 0 30px;
|
|
|
width: 626px;
|
|
|
background: rgba(87, 192, 133, 0.05);
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
right: 0;
|
|
|
border: 1px dashed #ffd;
|
|
|
border-radius: 5px;
|
|
|
padding: 10px 15px;
|
|
|
text-align: justify;
|
|
|
font-size: 16px;
|
|
|
color: #3f3f3f;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
|
|
|
#explain p:first-child {
|
|
|
color: #4B7C5F;
|
|
|
font-weight: 800;
|
|
|
margin: 0 0 6px -8px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#ctrlBtn {
|
|
|
width: 100%;
|
|
|
height: 80px;
|
|
|
background-color: #D5EDDF;
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
|
|
|
#ctrlBtn button {
|
|
|
width: 80px;
|
|
|
height: 36px;
|
|
|
border: none;
|
|
|
border-radius: 3px;
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
float: left;
|
|
|
margin: 20px -24px 12px 30px;
|
|
|
}
|
|
|
|
|
|
.enable {
|
|
|
color: #EEE !important;
|
|
|
}
|
|
|
|
|
|
|
|
|
#prevItem,
|
|
|
#nextItem {
|
|
|
background-color: #2BC76D;
|
|
|
}
|
|
|
|
|
|
#markItem {
|
|
|
background-color: #FBAD04;
|
|
|
margin-left: 40px !important;
|
|
|
}
|
|
|
|
|
|
#submit {
|
|
|
background-color: #FF635C;
|
|
|
margin-left: 240px !important;
|
|
|
}
|
|
|
#quit{
|
|
|
background-color: #FF635C;
|
|
|
margin-left: 50px !important;
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
<div id="examTitle">
|
|
|
<h2 style="text-align: center">考生<span class="typeId"></span>试卷</h2>
|
|
|
<div id="timing">
|
|
|
<time id="timer"></time>
|
|
|
<!-- <button id="suspend" disabled>||</button>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="itemSelection">
|
|
|
<div id="itemChoose"></div>
|
|
|
<ul id="markInfo">
|
|
|
<li>当前<span class="nowAnswer"></span></li>
|
|
|
<li>未做<span class="noAnswer"></span></li>
|
|
|
<li>待查<span class="markAnswer"></span></li>
|
|
|
<li>已做<span class="yesAnswer"></span></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="answer">
|
|
|
<div id="info">
|
|
|
<p>题库类型：<span class="typeId2"></span></p>
|
|
|
<p>科目总分：100 通过分数：60</p>
|
|
|
<p>北京时间：<span style="color: red" class="beijintime"></span></p>
|
|
|
<p>考试开始时间：<span class="kaishi"></span></p>
|
|
|
<p>考试结束时间：<span class="jieshu"></span></p>
|
|
|
</div>
|
|
|
<div id="item">
|
|
|
<i id="index"> 1丨单选题</i>
|
|
|
<p id="describe"></p>
|
|
|
<ul id="option"></ul>
|
|
|
<!-- <div id="explain">-->
|
|
|
<!-- <p>【答案解析】</p>-->
|
|
|
<!-- <p id="knowledge"></p>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="ctrlBtn">
|
|
|
<button id="prevItem">上一题</button>
|
|
|
<button id="nextItem">下一题</button>
|
|
|
<button id="markItem">设置待查</button>
|
|
|
<button id="submit">交卷</button>
|
|
|
<button id="quit">退出</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="blackCover">
|
|
|
<div>
|
|
|
<span>提示</span>
|
|
|
<p id="information">当前考试已暂停，点击下方按钮继续答题</p>
|
|
|
<button id="goOn">继续</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<th:block th:include="include :: footer" />
|
|
|
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
|
|
<script th:inline="javascript">
|
|
|
var prefix = ctx + "system/question";
|
|
|
var save = ctx + "system/exam";
|
|
|
// 获取当前页面的URL
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
|
// 获取名为 param1 的参数值
|
|
|
var param = urlParams.get('TYPEID');
|
|
|
var userName = urlParams.get('userName');
|
|
|
var deptName = urlParams.get('deptName');
|
|
|
if(param ==='1'){
|
|
|
document.querySelector('.typeId').innerHTML = '专业题库'
|
|
|
document.querySelector('.typeId2').innerHTML = '专业题库'
|
|
|
}else{
|
|
|
document.querySelector('.typeId').innerHTML = '基础题库'
|
|
|
document.querySelector('.typeId2').innerHTML = '基础题库'
|
|
|
}
|
|
|
|
|
|
// 获取当前北京时间
|
|
|
function getCurrentDateTime() {
|
|
|
var currentDate = new Date();
|
|
|
var year = currentDate.getFullYear(); // 年份
|
|
|
var month = currentDate.getMonth() + 1; // 月份
|
|
|
var day = currentDate.getDate(); // 当月的某一天
|
|
|
var hours = currentDate.getHours(); // 小时
|
|
|
var minutes = currentDate.getMinutes(); // 分钟
|
|
|
var seconds = currentDate.getSeconds(); // 秒钟
|
|
|
// 将时间部分补零，保证两位数显示
|
|
|
month = month < 10 ? '0' + month : month;
|
|
|
day = day < 10 ? '0' + day : day;
|
|
|
hours = hours < 10 ? '0' + hours : hours;
|
|
|
minutes = minutes < 10 ? '0' + minutes : minutes;
|
|
|
seconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
|
|
// 格式化输出日期时间
|
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
|
|
}
|
|
|
// 更新显示时间的函数
|
|
|
function updateClock() {
|
|
|
// 假设你有一个 id 为 clock 的元素用来显示时间
|
|
|
document.querySelector('.beijintime').innerText = getCurrentDateTime();
|
|
|
}
|
|
|
updateClock();
|
|
|
// 每秒钟更新一次时间
|
|
|
setInterval(updateClock, 1000);
|
|
|
//获取考试开始时间和考试结束时间
|
|
|
// 获取当前时间
|
|
|
var currentTime = new Date();
|
|
|
// 获取考试开始时间
|
|
|
var examStartTime = new Date(currentTime);
|
|
|
// 加上45分钟得到考试结束时间
|
|
|
examStartTime.setMinutes(examStartTime.getMinutes() + 45);
|
|
|
function formatDateTime(date) {
|
|
|
var year = date.getFullYear();
|
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
|
var hours = date.getHours().toString().padStart(2, '0');
|
|
|
var minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
var seconds = date.getSeconds().toString().padStart(2, '0');
|
|
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
|
|
}
|
|
|
// 输出考试开始时间和结束时间
|
|
|
document.querySelector('.kaishi').innerText = formatDateTime(currentTime)
|
|
|
document.querySelector('.jieshu').innerText = formatDateTime(examStartTime)
|
|
|
// function checkExamTime (){
|
|
|
// var currentTime1 = new Date();
|
|
|
// if (currentTime1 > examStartTime) {
|
|
|
// // 超时，进行强制提交操作
|
|
|
// console.log("已超过考试开始时间，进行强制提交操作。");
|
|
|
// clearInterval(intervalID);
|
|
|
// } else {
|
|
|
// // 未超时，正常进行考试
|
|
|
// console.log("考试开始时间：" + formatDateTime(currentTime));
|
|
|
// console.log("考试结束时间：" + formatDateTime(examStartTime));
|
|
|
// }
|
|
|
// }
|
|
|
// var intervalID = setInterval(checkExamTime , 60000);
|
|
|
|
|
|
|
|
|
var subject = [
|
|
|
// {
|
|
|
// "order": 1, //题目编号，需从1开始，依次增加
|
|
|
// "type": "single", //题目类型，single单选、multiple多选、judge判断、indeterminate不定项
|
|
|
// "describe": "甲公司职工齐某因违章操作给公司造成经济损失8000元，甲公司按照劳动合同约定要求齐某赔偿该损失，并按月从其工资中扣除，已知齐某月工资2600元，当地月最低工资标准为2200元，甲公司每月可以从齐某工资中扣除的最高限额为( )。", //题目描述
|
|
|
// "option": ["520元", "440元", "400元", "2600元"], //各个选项描述
|
|
|
// "note": "C", //参考答案
|
|
|
// "explain": "考察知识点：劳动合同——劳动报酬——最低工资标准。因劳动者本人原因给用人单位造成经济损失的，用人单位可按照劳动合同的约定要求其赔偿经济损失。经济损失的赔偿，可从劳动者本人的工资中扣除。但每月扣除的部分不得超过劳动者当月工资的20%。若扣除后的剩余工资部分低于当月最低工资标准，则按最低工资标准支付。所以扣除的部分=2600*20%=520;2600-520=2080<2200，所以不能扣除520扣除的限额为=2600-2200=400元。", //题目解析
|
|
|
// "answer": "", //考生答案
|
|
|
// "mark": false, //是否标记，初始值为0，表示未标记，此项会根据具体情况更改，不用人工自己操作
|
|
|
// "score": 0, //该题目满分
|
|
|
// }
|
|
|
];
|
|
|
//
|
|
|
$(document).ready(function() {
|
|
|
const obj = {
|
|
|
pageSize: 50,
|
|
|
pageNum: 1,
|
|
|
isAsc: 'asc',
|
|
|
TYPEID: param
|
|
|
};
|
|
|
|
|
|
$.ajax({
|
|
|
url: prefix + "/list",
|
|
|
type: "POST",
|
|
|
data: obj,
|
|
|
success: function(data) {
|
|
|
// 请求成功时，初始化答题系统
|
|
|
subject = data.rows;
|
|
|
for (let index = 0; index < subject.length; index++) {
|
|
|
let item = subject[index];
|
|
|
// 添加属性
|
|
|
item.order = 1;
|
|
|
item.type = "single";
|
|
|
item.answer = "";
|
|
|
item.mark = false;
|
|
|
item.score = 0;
|
|
|
item.option = [
|
|
|
item.optiona,
|
|
|
item.optionb,
|
|
|
item.optionc,
|
|
|
item.optiond
|
|
|
];
|
|
|
}
|
|
|
externalFunction(); // 调用外部函数的示例
|
|
|
},
|
|
|
error: function() {
|
|
|
// 请求失败时显示错误消息
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
var maxtime = 45 * 60;
|
|
|
var t; //定时器
|
|
|
// ------ 计时程序 -----
|
|
|
function CountDown() {
|
|
|
if (maxtime >= 0) {
|
|
|
//写入HTML
|
|
|
hours = checkTime(parseInt(maxtime / 60 / 60) % 60);
|
|
|
minutes = checkTime(parseInt(maxtime / 60) % 60);
|
|
|
seconds = checkTime(parseInt(maxtime % 60));
|
|
|
msg = hours + ":" + minutes + ":" + seconds;
|
|
|
document.getElementById("timer").innerHTML = msg;
|
|
|
maxtime--;
|
|
|
} else {
|
|
|
// 弹出确认提示框
|
|
|
let confirmation = confirm("答题时间到！系统将强制提交");
|
|
|
if (confirmation) {
|
|
|
clearInterval(t);
|
|
|
var obj = externalFunction();
|
|
|
obj.callInternalFunction();
|
|
|
window.location.href = `/system/index`;
|
|
|
} else {
|
|
|
clearInterval(t);
|
|
|
var obj = externalFunction();
|
|
|
obj.callInternalFunction();
|
|
|
window.location.href = `/system/index`;
|
|
|
}
|
|
|
clearInterval(t); // 确保定时器在时间到后只执行一次
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function checkTime(i) { //将0-9的数字前面加上0
|
|
|
if (i < 10) {
|
|
|
i = "0" + i;
|
|
|
}
|
|
|
return i;
|
|
|
}
|
|
|
function externalFunction(){
|
|
|
//配置信息设置
|
|
|
var indexItem = 0; //全局变量，当前的题目编号
|
|
|
var itemCouAll = subject[subject.length - 1].order; //大题总数
|
|
|
intQuestion()
|
|
|
function intQuestion() {
|
|
|
// ----- 填充HTML ------
|
|
|
var orderNo = [];
|
|
|
|
|
|
//写入各个题的div
|
|
|
var itemChooseHTML = '';
|
|
|
for (var i = 0; i < itemCouAll; i++) {
|
|
|
itemChooseHTML +=
|
|
|
`
|
|
|
<div id = ${'order'+i} >
|
|
|
<ul></ul>
|
|
|
</div>
|
|
|
`
|
|
|
}
|
|
|
document.getElementById('itemChoose').innerHTML = itemChooseHTML;
|
|
|
|
|
|
|
|
|
//写入div下的ul li
|
|
|
|
|
|
//获取每个div下应有多少li
|
|
|
var orderCou = [];
|
|
|
for (var i = 0; i < itemCouAll; i++) {
|
|
|
var m = 0;
|
|
|
for (var j = 0; j < subject.length; j++) {
|
|
|
if (subject[j].order === i + 1) {
|
|
|
m++;
|
|
|
}
|
|
|
}
|
|
|
orderCou[i] = m;
|
|
|
}
|
|
|
|
|
|
for (var i = 0; i < itemCouAll; i++) {
|
|
|
var optionHTML = '';
|
|
|
for (var j = 0; j < orderCou[i]; j++) {
|
|
|
optionHTML += `<li class="noAnswer">${j+1}</li>`
|
|
|
}
|
|
|
document.getElementById('order' + i).getElementsByTagName("ul")[0].innerHTML = optionHTML;
|
|
|
}
|
|
|
|
|
|
|
|
|
var liList = document.getElementById('itemChoose').getElementsByTagName('li');
|
|
|
for (var i = 0; i < liList.length; i++) {
|
|
|
liList[i].index = i;
|
|
|
liList[i].onclick = function() {
|
|
|
indexItem = this.index;
|
|
|
refresh();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//设置各个li的class，是否符合回答规范、设置了待查标记
|
|
|
for (var i = 0; i < liList.length; i++) {
|
|
|
|
|
|
liList[i].className = YesOrNo(i);
|
|
|
|
|
|
if (subject[i].mark) { //设置待查标记
|
|
|
liList[i].classList.add('markAnswer');
|
|
|
} else {
|
|
|
liList[i].classList.remove('markAnswer');
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 开始倒计时
|
|
|
// document.getElementById('suspend').innerHTML = '||';
|
|
|
t = setInterval('CountDown()', 1000);
|
|
|
|
|
|
refresh(); //加载题目
|
|
|
|
|
|
}
|
|
|
//
|
|
|
//题目刷新
|
|
|
//
|
|
|
function refresh() {
|
|
|
//题目序号与题目类型描述文本
|
|
|
var itemType = ''; //单选题、多选题
|
|
|
switch (subject[indexItem].type) {
|
|
|
case "single":
|
|
|
itemType = '单选题';
|
|
|
break;
|
|
|
case "judge":
|
|
|
itemType = '判断题';
|
|
|
break;
|
|
|
case "multiple":
|
|
|
itemType = '多选题';
|
|
|
break;
|
|
|
case "indeterminate":
|
|
|
itemType = '不定项';
|
|
|
break;
|
|
|
}
|
|
|
document.getElementById("index").innerHTML = indexItem + 1 + '丨' + itemType;
|
|
|
|
|
|
//题目描述
|
|
|
var describeText = "";
|
|
|
describeText += subject[indexItem].qSubject;
|
|
|
document.getElementById("describe").innerHTML = describeText;
|
|
|
|
|
|
//答案选项
|
|
|
var optNum = subject[indexItem].option.length;
|
|
|
var optionText = "";
|
|
|
var inputType = "";
|
|
|
var inputName = subject[indexItem].type;
|
|
|
switch (subject[indexItem].type) {
|
|
|
case "single":
|
|
|
case "judge":
|
|
|
inputType = "radio";
|
|
|
break;
|
|
|
case "multiple":
|
|
|
case "indeterminate":
|
|
|
inputType = "checkbox";
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
for (var i = 0; i < optNum; i++) {
|
|
|
var itemChecked = '';
|
|
|
if (subject[indexItem].type === 'indeterminate' || subject[indexItem].type === 'multiple') {
|
|
|
if (subject[indexItem].answer.charAt(i) !== '_' && subject[indexItem].answer.charAt(i) !== '') {
|
|
|
itemChecked = 'checked="checked"';
|
|
|
}
|
|
|
} else {
|
|
|
if (subject[indexItem].answer === String.fromCharCode(65 + i)) {
|
|
|
itemChecked = 'checked="checked"';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
optionText +=
|
|
|
`
|
|
|
<li>
|
|
|
<input type=${inputType} name="opt" value= ${String.fromCharCode(65 + i)} ${itemChecked}/>
|
|
|
<i>${String.fromCharCode(65 + i)}</i>
|
|
|
<p>${subject[indexItem].option[i]}</p>
|
|
|
</li>
|
|
|
`
|
|
|
}
|
|
|
document.getElementById("option").innerHTML = optionText;
|
|
|
|
|
|
//按钮禁用状态
|
|
|
if (indexItem === 0) {
|
|
|
document.getElementById("prevItem").className += "enable";
|
|
|
} else if (indexItem === subject.length - 1) {
|
|
|
document.getElementById("nextItem").className += "enable";
|
|
|
} else {
|
|
|
document.getElementById("prevItem").className = "";
|
|
|
document.getElementById("nextItem").className = "";
|
|
|
}
|
|
|
|
|
|
//待查状态设置
|
|
|
if (subject[indexItem].mark == 1) { //这里==表示约等于，true也可以视为1
|
|
|
document.getElementById('markItem').innerHTML = '取消待查';
|
|
|
} else {
|
|
|
document.getElementById('markItem').innerHTML = '设置待查';
|
|
|
}
|
|
|
|
|
|
|
|
|
//设置左侧答题卡对应题目为当前
|
|
|
var liList = document.getElementById('itemChoose').getElementsByTagName('li');
|
|
|
for (var i = 0; i < liList.length; i++) {
|
|
|
if (i === indexItem) {
|
|
|
liList[i].classList.add('nowAnswer');
|
|
|
} else {
|
|
|
liList[i].classList.remove('nowAnswer');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
BindOpt(); //重新绑定点击选项的事件
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
//上/下一题按钮绑定
|
|
|
document.getElementById("prevItem").onclick = function() {
|
|
|
if (indexItem) {
|
|
|
indexItem--;
|
|
|
refresh();
|
|
|
}else{
|
|
|
alert('已经是第一题了')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.getElementById("nextItem").onclick = function() {
|
|
|
if (indexItem < subject.length - 1) {
|
|
|
indexItem++;
|
|
|
refresh();
|
|
|
}else{
|
|
|
alert('已经是最后一题了')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
//设置标记按钮绑定
|
|
|
document.getElementById('markItem').onclick = function() {
|
|
|
if (this.innerHTML === '设置待查') {
|
|
|
//左侧的class增加markAnswer
|
|
|
subject[indexItem].mark = 1;
|
|
|
this.innerHTML = '取消待查';
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('markAnswer');
|
|
|
} else { //恢复原始的答题状态
|
|
|
subject[indexItem].mark = 0;
|
|
|
this.innerHTML = '设置待查';
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('markAnswer');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//绑定选项按钮单击事件
|
|
|
function BindOpt() {
|
|
|
for (var i = 0; i < document.getElementById("option").getElementsByTagName('input').length; i++) {
|
|
|
|
|
|
document.getElementById("option").getElementsByTagName('input')[i].onchange = function() {
|
|
|
//将当前答案写到JSon中
|
|
|
|
|
|
subject[indexItem].answer = ''; //清除原有答案
|
|
|
for (var j = 0; j < document.getElementById("option").getElementsByTagName('input').length; j++) {
|
|
|
if (document.getElementById("option").getElementsByTagName('input')[j].checked) {
|
|
|
subject[indexItem].answer += document.getElementById("option").getElementsByTagName('input')[j].value;
|
|
|
} else {
|
|
|
if (subject[indexItem].type === 'multiple' || subject[indexItem].type === 'indeterminate') {
|
|
|
subject[indexItem].answer += '_';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//改变左侧答题卡显示状态
|
|
|
//
|
|
|
if (YesOrNo(indexItem) === 'noAnswer') {
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('noAnswer');
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('yesAnswer');
|
|
|
} else {
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.add('yesAnswer');
|
|
|
document.getElementById('itemChoose').getElementsByTagName('li')[indexItem].classList.remove('noAnswer');
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
//绑定计时按钮
|
|
|
// document.getElementById('suspend').onclick = function() {
|
|
|
//
|
|
|
// if (this.innerHTML === '||') {
|
|
|
// this.innerHTML = '►';
|
|
|
// clearInterval(t);
|
|
|
// } else {
|
|
|
// this.innerHTML = '||';
|
|
|
// t = setInterval("CountDown()", 1000);
|
|
|
// }
|
|
|
// BlackCover();
|
|
|
// }
|
|
|
function BlackCover() {
|
|
|
var bCover = document.getElementById('blackCover');
|
|
|
if (bCover.classList.contains('black')) {
|
|
|
bCover.classList.remove('black');
|
|
|
} else {
|
|
|
bCover.classList.add('black');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.getElementById('goOn').onclick = function() {
|
|
|
|
|
|
// document.getElementById('suspend').click();
|
|
|
}
|
|
|
|
|
|
|
|
|
//判断当前题目是否已作答
|
|
|
function YesOrNo(index) {
|
|
|
|
|
|
if (subject[index].type === 'multiple') {
|
|
|
|
|
|
var ans = new Array();
|
|
|
ans[0] = RepeatNum('_', subject[index].option.length);
|
|
|
|
|
|
for (var i = 0; i < subject[index].option.length; i++) {
|
|
|
ans[i + 1] = RepeatNum('_', i) + String.fromCharCode(65 + i) + RepeatNum('_', subject[index].option.length - 1 - i);
|
|
|
}
|
|
|
var blockJudge = false; //是否为空
|
|
|
for (var j = 0; j < ans.length; j++) {
|
|
|
if (subject[index].answer === ans[j]) {
|
|
|
blockJudge = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (blockJudge || subject[index].answer === '') {
|
|
|
return 'noAnswer';
|
|
|
} else {
|
|
|
return 'yesAnswer';
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
if (subject[index].answer !== '' && subject[index].answer !== RepeatNum('_', subject[index].option.length)) {
|
|
|
return 'yesAnswer';
|
|
|
} else {
|
|
|
return 'noAnswer';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
//打印num个str，如times(n,3) nnn
|
|
|
function RepeatNum(str, num) {
|
|
|
if (num > 1) {
|
|
|
return str += RepeatNum(str, --num);
|
|
|
}
|
|
|
if (num === 1) {
|
|
|
return str;
|
|
|
} else {
|
|
|
return '';
|
|
|
}
|
|
|
}
|
|
|
document.getElementById('submit').onclick = function() {
|
|
|
var sub = 'submit'
|
|
|
submitMethid(sub);
|
|
|
};
|
|
|
document.getElementById('quit').onclick = function() {
|
|
|
let confirmation = confirm("退出后将考试进度将重置，确认退出？");
|
|
|
if (confirmation) {
|
|
|
window.location.href = `/system/exam`;
|
|
|
}
|
|
|
};
|
|
|
window.addEventListener('beforeunload', function() {
|
|
|
documentVisililityChange();
|
|
|
});
|
|
|
|
|
|
window.addEventListener('unload', function() {
|
|
|
documentVisililityChange();
|
|
|
});
|
|
|
document.addEventListener('visibilitychange',documentVisililityChange)
|
|
|
function documentVisililityChange (){
|
|
|
if (document.visibilityState === 'hidden'){
|
|
|
alert("检测到您已切换页面，系统将进行强制提交");
|
|
|
submitMethid();
|
|
|
}
|
|
|
}
|
|
|
function submitMethid(sub){
|
|
|
var htmlText = '';
|
|
|
var account = 0; //总得分
|
|
|
if(sub=== 'submit'){
|
|
|
let confirmation = confirm("只能提交一次，确定提交吗？");
|
|
|
if (confirmation) {
|
|
|
for (var i = 0; i < subject.length; i++) {
|
|
|
|
|
|
//计算当前题目得分
|
|
|
var nowAccount;
|
|
|
if (subject[i].type === 'single') {
|
|
|
if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
nowAccount = 2;
|
|
|
}
|
|
|
} else if (subject[i].type === 'judge') {
|
|
|
if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
|
|
|
nowAccount = -0.5;
|
|
|
} else {
|
|
|
nowAccount = 1;
|
|
|
}
|
|
|
} else if (subject[i].type === 'indeterminate') {
|
|
|
if (subject[i].answer === '') { //如果未填写答案
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
var hasError = false; //假设没有错误选项
|
|
|
for (var j = 0; j < subject[i].option.length; j++) {
|
|
|
if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
|
|
|
hasError = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if (hasError) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
nowAccount = subject[i].answer.replace(/_/g, "").length / subject[i].note.replace(/_/g, "").length * 4;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
} else { //多选题
|
|
|
if (subject[i].answer === '') { //如果未填写答案
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
var hasError = false; //假设没有错误选项
|
|
|
for (var j = 0; j < subject[i].option.length; j++) {
|
|
|
if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
|
|
|
hasError = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if (hasError) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
if (subject[i].answer === subject[i].note) { //全部正确
|
|
|
nowAccount = 4;
|
|
|
} else {
|
|
|
if (subject[i].answer.replace(/_/g, "").length >= 4) {
|
|
|
nowAccount = 3;
|
|
|
} else {
|
|
|
nowAccount = subject[i].answer.replace(/_/g, "").length;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
htmlText += '题目' + i + ' 答案' + subject[i].note + ' 回答' + subject[i].answer + ' 得分' + nowAccount.toFixed(2) + '\n';
|
|
|
account += nowAccount;
|
|
|
}
|
|
|
let params = {
|
|
|
examResult:account,
|
|
|
userName:userName,
|
|
|
dept:deptName,
|
|
|
startTime:formatDateTime(currentTime),
|
|
|
endTime:getCurrentDateTime(),
|
|
|
type:param,
|
|
|
|
|
|
};
|
|
|
saveResult(params)
|
|
|
alert('您的总得分为：' + account + '分');
|
|
|
document.getElementById('submit').disabled = true
|
|
|
document.getElementById('submit').style.backgroundColor = '#999'
|
|
|
window.location.href = `/system/exam`;
|
|
|
}
|
|
|
}else{
|
|
|
for (var i = 0; i < subject.length; i++) {
|
|
|
|
|
|
//计算当前题目得分
|
|
|
var nowAccount;
|
|
|
if (subject[i].type === 'single') {
|
|
|
if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
nowAccount = 2;
|
|
|
}
|
|
|
} else if (subject[i].type === 'judge') {
|
|
|
if (subject[i].answer === '' || subject[i].answer !== subject[i].note) {
|
|
|
nowAccount = -0.5;
|
|
|
} else {
|
|
|
nowAccount = 1;
|
|
|
}
|
|
|
} else if (subject[i].type === 'indeterminate') {
|
|
|
if (subject[i].answer === '') { //如果未填写答案
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
var hasError = false; //假设没有错误选项
|
|
|
for (var j = 0; j < subject[i].option.length; j++) {
|
|
|
if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
|
|
|
hasError = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if (hasError) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
nowAccount = subject[i].answer.replace(/_/g, "").length / subject[i].note.replace(/_/g, "").length * 4;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
} else { //多选题
|
|
|
if (subject[i].answer === '') { //如果未填写答案
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
var hasError = false; //假设没有错误选项
|
|
|
for (var j = 0; j < subject[i].option.length; j++) {
|
|
|
if (subject[i].answer.charAt(j) !== '_' && subject[i].note.charAt(j) === '_') { //有错误选项
|
|
|
hasError = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
if (hasError) {
|
|
|
nowAccount = 0;
|
|
|
} else {
|
|
|
if (subject[i].answer === subject[i].note) { //全部正确
|
|
|
nowAccount = 4;
|
|
|
} else {
|
|
|
if (subject[i].answer.replace(/_/g, "").length >= 4) {
|
|
|
nowAccount = 3;
|
|
|
} else {
|
|
|
nowAccount = subject[i].answer.replace(/_/g, "").length;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
htmlText += '题目' + i + ' 答案' + subject[i].note + ' 回答' + subject[i].answer + ' 得分' + nowAccount.toFixed(2) + '\n';
|
|
|
account += nowAccount;
|
|
|
}
|
|
|
let params = {
|
|
|
examResult:account,
|
|
|
userName:userName,
|
|
|
dept:deptName,
|
|
|
startTime:formatDateTime(currentTime),
|
|
|
endTime:getCurrentDateTime(),
|
|
|
type:param,
|
|
|
|
|
|
};
|
|
|
saveResult(params)
|
|
|
alert('您的总得分为：' + account + '分');
|
|
|
document.getElementById('submit').disabled = true
|
|
|
document.getElementById('submit').style.backgroundColor = '#999'
|
|
|
window.location.href = `/system/exam`;
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
function saveResult(params){
|
|
|
$.ajax({
|
|
|
url: save + "/add",
|
|
|
type: "POST",
|
|
|
data: params,
|
|
|
success: function(data) {
|
|
|
console.log(data)
|
|
|
},
|
|
|
error: function() {
|
|
|
// 请求失败时显示错误消息
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
// 返回一个闭包，包含内部函数的引用
|
|
|
// 返回一个包含内部函数引用的对象
|
|
|
return {
|
|
|
callInternalFunction: submitMethid
|
|
|
};
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
