|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<th:block th:include="include :: header('保密考试')" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.table-striped {
|
|
|
|
|
|
min-height: 84%;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.table-striped p{
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.headerBox{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.contentBox{
|
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#answer-form{
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#next-question{
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.topBox{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body class="gray-bg">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container-div">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-sm-12 search-collapse">
|
|
|
|
|
|
<h2 style="text-align: center">考生<span class="typeId"></span>试卷</h2>
|
|
|
|
|
|
<div class="topBox">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<button class="submit" type="submit">提交</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="question-container" class="col-sm-12 select-table table-striped">
|
|
|
|
|
|
<div class="headerBox">
|
|
|
|
|
|
<h3 id="question-number"></h3>
|
|
|
|
|
|
<h3 id="typeId-number"></h3>
|
|
|
|
|
|
<p style="padding-top: 5px;">单选题（请在以下几个选项中选择唯一正确答案） 本题分数:2分</p><br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="contentBox">
|
|
|
|
|
|
<p style="padding-top: 5px;" id="question-content"></p>
|
|
|
|
|
|
<form id="answer-form">
|
|
|
|
|
|
<div id="options"></div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<p id="result"></p>
|
|
|
|
|
|
<button id="next-question">下一题</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="col-sm-12 select-table table-striped">-->
|
|
|
|
|
|
<!-- <table id="bootstrap-table"></table>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
</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 editFlag = [[${@permission.hasPermi('system:question:edit')}]];
|
|
|
|
|
|
var removeFlag = [[${@permission.hasPermi('system:question:remove')}]];
|
|
|
|
|
|
var TYPEIDDatas = [[${@dict.getType('td_question_type')}]];
|
|
|
|
|
|
var prefix = ctx + "system/question";
|
|
|
|
|
|
// 获取当前页面的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);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
const obj = {
|
|
|
|
|
|
pageSize: 50,
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
isAsc: 'asc',
|
|
|
|
|
|
TYPEID: param
|
|
|
|
|
|
};
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: prefix + "/list",
|
|
|
|
|
|
type: "POST",
|
|
|
|
|
|
data: obj,
|
|
|
|
|
|
success: function(data) {
|
|
|
|
|
|
// 请求成功时，初始化答题系统
|
|
|
|
|
|
var questions = data.rows;
|
|
|
|
|
|
initQuestionSystem(questions);
|
|
|
|
|
|
},
|
|
|
|
|
|
error: function() {
|
|
|
|
|
|
// 请求失败时显示错误消息
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function initQuestionSystem(questions) {
|
|
|
|
|
|
let currentQuestionIndex = 0;
|
|
|
|
|
|
// const result = [];
|
|
|
|
|
|
let result1 = [] //正确答案
|
|
|
|
|
|
let result2 = [] //错误答案
|
|
|
|
|
|
// 实现显示第一题的函数
|
|
|
|
|
|
function showQuestion(question,currentQuestionIndex) {
|
|
|
|
|
|
// 显示题目和选项等信息
|
|
|
|
|
|
const questionNumberElement = document.getElementById('question-number');
|
|
|
|
|
|
const typeIdNumberElement = document.getElementById('typeId-number');
|
|
|
|
|
|
const questionContentElement = document.getElementById('question-content');
|
|
|
|
|
|
const optionsElement = document.getElementById('options');
|
|
|
|
|
|
questionNumberElement.textContent = `题号:${currentQuestionIndex+1}/50`;
|
|
|
|
|
|
questionContentElement.textContent = question.qSubject;
|
|
|
|
|
|
typeIdNumberElement.textContent = `题型:${question.typeid}`;
|
|
|
|
|
|
question.options = [
|
|
|
|
|
|
'A、' + question.optiona,
|
|
|
|
|
|
'B、' + question.optionb,
|
|
|
|
|
|
'C、' + question.optionc,
|
|
|
|
|
|
'D、' + question.optiond
|
|
|
|
|
|
]
|
|
|
|
|
|
optionsElement.innerHTML = '';
|
|
|
|
|
|
for (let index = 0; index < question.options.length; index++) {
|
|
|
|
|
|
const option = question.options[index];
|
|
|
|
|
|
const optionElement = document.createElement('input');
|
|
|
|
|
|
optionElement.type = 'radio';
|
|
|
|
|
|
optionElement.name = 'answer';
|
|
|
|
|
|
optionElement.value = option;
|
|
|
|
|
|
optionElement.id = `option-${index}`;
|
|
|
|
|
|
const labelElement = document.createElement('label');
|
|
|
|
|
|
labelElement.htmlFor = `option-${index}`;
|
|
|
|
|
|
labelElement.textContent = option;
|
|
|
|
|
|
optionsElement.appendChild(optionElement);
|
|
|
|
|
|
optionsElement.appendChild(labelElement);
|
|
|
|
|
|
optionsElement.appendChild(document.createElement('br'));
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 检查答案的函数
|
|
|
|
|
|
function checkAnswer(answer) {
|
|
|
|
|
|
// 检查用户答案，更新result数组
|
|
|
|
|
|
const question = questions[currentQuestionIndex];
|
|
|
|
|
|
if (answer.indexOf(question.note) !== -1) {
|
|
|
|
|
|
// 答案正确
|
|
|
|
|
|
result1.push({ number: question.id, answer: answer,note:question.note,});
|
|
|
|
|
|
console.log('正确',result1)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
result2.push({ number: question.id, answer: answer,note:question.note,});
|
|
|
|
|
|
console.log('错误',result2)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 显示结果的函数
|
|
|
|
|
|
function showResult() {
|
|
|
|
|
|
// 显示用户的答题结果
|
|
|
|
|
|
const resultElement = document.getElementById('result');
|
|
|
|
|
|
resultElement.textContent = `已答题数：${result.length}`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 显示下一题的函数
|
|
|
|
|
|
function nextQuestion(event) {
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
const selectedOption = document.querySelector('input[name="answer"]:checked');
|
|
|
|
|
|
if (selectedOption) {
|
|
|
|
|
|
const selectedAnswer = selectedOption.value;
|
|
|
|
|
|
checkAnswer(selectedAnswer);
|
|
|
|
|
|
// showResult();
|
|
|
|
|
|
// 清除选择
|
|
|
|
|
|
selectedOption.checked = false;
|
|
|
|
|
|
// 更新currentQuestionIndex，显示下一题
|
|
|
|
|
|
currentQuestionIndex++;
|
|
|
|
|
|
if (currentQuestionIndex < questions.length) {
|
|
|
|
|
|
showQuestion(questions[currentQuestionIndex],currentQuestionIndex);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('所有题目已答完！请提交');
|
|
|
|
|
|
// 如果需要在所有题目答完后进行额外操作，可以在这里添加代码
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('请选择一个答案！');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//提交
|
|
|
|
|
|
document.querySelector('.topBox .submit').addEventListener('click', function(event) {
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
examResult:result1.length * 2,
|
|
|
|
|
|
userName:userName,
|
|
|
|
|
|
dept:deptName,
|
|
|
|
|
|
startTime:formatDateTime(currentTime),
|
|
|
|
|
|
endTime:formatDateTime(examStartTime),
|
|
|
|
|
|
type:param,
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
// 弹出确认提示框
|
|
|
|
|
|
let confirmation = confirm("提交后不可更改，是否确定提交？");
|
|
|
|
|
|
if (confirmation) {
|
|
|
|
|
|
// 如果用户确定提交，则执行提交操作
|
|
|
|
|
|
console.log(params);
|
|
|
|
|
|
// 执行提交的相关操作
|
|
|
|
|
|
this.disabled = true; // 禁用提交按钮
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 如果用户取消提交，则继续答题
|
|
|
|
|
|
console.log("取消提交，继续答题。");
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
document.getElementById('next-question').addEventListener('click', nextQuestion);
|
|
|
|
|
|
// 初始加载第一题
|
|
|
|
|
|
if (questions.length > 0) {
|
|
|
|
|
|
showQuestion(questions[currentQuestionIndex],currentQuestionIndex);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
