246 lines
9.1 KiB
JavaScript
246 lines
9.1 KiB
JavaScript
|
let form, layer;
|
|||
|
|
let idx = -1; // 默认选中题目的下标
|
|||
|
|
let dataList = []; // 题目数组
|
|||
|
|
let user = getUser();
|
|||
|
|
|
|||
|
|
function setParams(){
|
|||
|
|
layui.use(['form', 'layer'], function () {
|
|||
|
|
form = layui.form;
|
|||
|
|
layer = layui.layer;
|
|||
|
|
getTopicsAjax(); // 加载考试题目
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化题目数据
|
|||
|
|
function initDayExamData(data) {
|
|||
|
|
dataList.splice(0, dataList.length);
|
|||
|
|
if (data && data.length > 0) {
|
|||
|
|
$.each(data,function(index,item){
|
|||
|
|
// 答案加密
|
|||
|
|
item.topicAnswer = encrypt(item.topicAnswer);
|
|||
|
|
dataList.push(item);
|
|||
|
|
})
|
|||
|
|
// 加载题目
|
|||
|
|
renderQuestion(0);
|
|||
|
|
// 加载答题卡
|
|||
|
|
setAnswerSheet(data);
|
|||
|
|
// 交卷状态
|
|||
|
|
let handPaperStatus = data[0].handPaperStatus;
|
|||
|
|
if(handPaperStatus === 0){
|
|||
|
|
$('#operBtn').empty().append('<button class="submit-btn" onclick="handPaper()">我要交卷</button>');
|
|||
|
|
}else{
|
|||
|
|
$('#operBtn').empty().append('<button class="submit-btn submitted">已交卷</button>');
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
$('#topicJump').empty();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setAnswerSheet(dataList) {
|
|||
|
|
idx = dataList && dataList.length > 0 ? 0 : -1; // 默认选中第一个
|
|||
|
|
$('#currentNum').html(Number(dataList.length > 0));
|
|||
|
|
$('#totalNum').html(dataList.length || 0);
|
|||
|
|
renderAnswerSheet();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化答题卡
|
|||
|
|
function renderAnswerSheet(checkIdx) {
|
|||
|
|
let html = '';
|
|||
|
|
if (dataList && dataList.length > 0) {
|
|||
|
|
$.each(dataList, function (index, item) {
|
|||
|
|
if (item.chooseAnswer && item.chooseAnswer!=='未作答') {
|
|||
|
|
html += '<div class="circle2 layout answeredQuestions">' + (index + 1) + '</div>'
|
|||
|
|
} else {
|
|||
|
|
html += '<div class="circle2 layout">' + (index + 1) + '</div>'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
$('#questionNumber').empty().append(html);
|
|||
|
|
// 默认选中第一个
|
|||
|
|
if (html && !checkIdx) {
|
|||
|
|
setCheckCircleStyle(0);
|
|||
|
|
} else if (html && checkIdx) {
|
|||
|
|
setCheckCircleStyle(checkIdx);
|
|||
|
|
}
|
|||
|
|
// 设置题号选中样式
|
|||
|
|
document.querySelectorAll('.circle2').forEach(function (item) {
|
|||
|
|
item.onclick = function () {
|
|||
|
|
document.querySelectorAll('.circle2').forEach(function (c) {
|
|||
|
|
c.classList.remove('selected');
|
|||
|
|
c.classList.remove('selected2');
|
|||
|
|
});
|
|||
|
|
if (this.classList.contains('answeredQuestions')) {
|
|||
|
|
this.classList.add('selected');
|
|||
|
|
} else {
|
|||
|
|
this.classList.add('selected2');
|
|||
|
|
}
|
|||
|
|
let number = parseInt($(this).html());
|
|||
|
|
$('#currentNum').html(number);
|
|||
|
|
// 设置题目下标
|
|||
|
|
let direction = number - 1 > idx ? 'right' : 'left';
|
|||
|
|
if (number - 1 !== idx) {
|
|||
|
|
idx = number - 1;
|
|||
|
|
renderQuestion(idx, direction);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染题目
|
|||
|
|
function renderQuestion(idx, direction) {
|
|||
|
|
const contentDiv = document.getElementById('topic');
|
|||
|
|
// 1. 先加淡出动画
|
|||
|
|
if (direction) {
|
|||
|
|
contentDiv.classList.add(direction === 'left' ? 'fade-out-left' : 'fade-out-right');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 2. 切换内容
|
|||
|
|
setTopicData(idx)
|
|||
|
|
// 3. 移除淡出，加淡入动画
|
|||
|
|
contentDiv.className = 'question-content ' + (direction === 'left' ? 'fade-in-right' : 'fade-in-left');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
contentDiv.className = 'question-content';
|
|||
|
|
}, 500);
|
|||
|
|
}, 500);
|
|||
|
|
} else {
|
|||
|
|
// 首次渲染
|
|||
|
|
setTopicData(idx)
|
|||
|
|
contentDiv.className = 'question-content';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setTopicData(idx) {
|
|||
|
|
let html = '';
|
|||
|
|
const q = dataList[idx];
|
|||
|
|
// 题目
|
|||
|
|
html += '<div class="question-title" id="question-title">' + (`第${idx + 1}题（<span style="color:#2196f3">${parseInt(q.topicType) === 1 ? '单选题' : '多选题'}</span>）：<br><br>${q.topic}`) + '</div>'
|
|||
|
|
// 选项
|
|||
|
|
html += '<div class="options" id="options">'
|
|||
|
|
let topicOptionArr = q.topicOption.split('|');
|
|||
|
|
$.each(topicOptionArr, function (index, item) {
|
|||
|
|
let option = item.split('-')[0];
|
|||
|
|
if (parseInt(q.topicType) === 1) { // 单选题
|
|||
|
|
html += "<div class='option' onclick='checkData(this," + JSON.stringify(q) + ")'>" +
|
|||
|
|
setChooseData(q, item) +
|
|||
|
|
"<span style='width:calc(100% - 40px);margin-left:16px;' value='" + option + "'>" + item.replace('-', '.') + "</span>" +
|
|||
|
|
"</div>";
|
|||
|
|
} else { // 多选题
|
|||
|
|
html += "<div class='option' onclick='checkData(this," + JSON.stringify(q) + ")'>" +
|
|||
|
|
setChooseData(q, item) +
|
|||
|
|
"<span style='width:calc(100% - 40px);margin-left:16px;' value='" + option + "'>" + item.replace('-', '.') + "</span>" +
|
|||
|
|
"</div>";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
html += '</div>'
|
|||
|
|
$('#topic').html(html);
|
|||
|
|
setAnswerData(q);
|
|||
|
|
|
|||
|
|
// 是否答完题目 赋值
|
|||
|
|
function setChooseData(q, item) {
|
|||
|
|
let option = item.split('-')[0];
|
|||
|
|
let topicAnswer = decrypt(q.topicAnswer), chooseAnswer = q.chooseAnswer,
|
|||
|
|
topicType = parseInt(q.topicType);
|
|||
|
|
let html = "", classValue = "", value = "";
|
|||
|
|
if (topicType === 1 && !chooseAnswer) { // 单选题-未答题
|
|||
|
|
html += "<input type='radio' name='option'>";
|
|||
|
|
} else if (topicType === 2 && !chooseAnswer) { // 多选题-未答题
|
|||
|
|
html += "<input type='checkbox' name='option'>";
|
|||
|
|
} else if (topicType === 1 && chooseAnswer) { // 单选题-已答题
|
|||
|
|
if (topicAnswer === option || chooseAnswer === topicAnswer === option) { // 选择正确
|
|||
|
|
classValue = "circle correct layout", value = "✔";
|
|||
|
|
} else if (topicAnswer !== option && option === chooseAnswer) { // 选择错误
|
|||
|
|
classValue = "circle error layout", value = "×";
|
|||
|
|
} else {
|
|||
|
|
classValue = "circle";
|
|||
|
|
}
|
|||
|
|
html += "<span class='" + classValue + "'>" + value + "</span>";
|
|||
|
|
} else if (topicType === 2 && chooseAnswer) { // 多选题-已答题
|
|||
|
|
if (topicAnswer.indexOf(option) > -1 || (chooseAnswer.indexOf(option) > -1 && topicAnswer.indexOf(option) > -1)) { // 选择正确
|
|||
|
|
classValue = "square correct layout", value = "✔";
|
|||
|
|
} else if ((topicAnswer.indexOf(option) > -1 && chooseAnswer.indexOf(option) === -1)
|
|||
|
|
|| (topicAnswer.indexOf(option) === -1 && chooseAnswer.indexOf(option) > -1)) { // 选择错误
|
|||
|
|
classValue = "square error layout", value = "×";
|
|||
|
|
} else {
|
|||
|
|
classValue = "square";
|
|||
|
|
}
|
|||
|
|
html += "<span class='" + classValue + "'>" + value + "</span>";
|
|||
|
|
}
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 答案赋值
|
|||
|
|
function setAnswerData(q) {
|
|||
|
|
let html = "", topicType = parseInt(q.topicType);
|
|||
|
|
if (q.chooseAnswer) { // 选择答案
|
|||
|
|
html += "<div class='answer-box layout'>" +
|
|||
|
|
"<div class='answer layout'>" +
|
|||
|
|
"<p>正确答案</p>" +
|
|||
|
|
"<p>" + decrypt(q.topicAnswer) + "</p>" +
|
|||
|
|
"</div>" +
|
|||
|
|
"<div class='answer layout'>" +
|
|||
|
|
"<p>我的答案</p>" +
|
|||
|
|
"<p>" + q.chooseAnswer + "</p>" +
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>";
|
|||
|
|
} else { // 未选择答案
|
|||
|
|
if (topicType === 2) {
|
|||
|
|
html += "<div class='save-answer-btn layout'>" +
|
|||
|
|
"<button class='submit-btn' onclick='saveAnswer(2," + JSON.stringify(q) + ")'>保存答案</button>" +
|
|||
|
|
"</div>";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$('#answer').html(html);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击选项 选中答案
|
|||
|
|
function checkData(that, q) {
|
|||
|
|
if (!q.chooseAnswer && q.handPaperStatus === 0) {
|
|||
|
|
if (parseInt(q.topicType) === 1) { // 单选
|
|||
|
|
$(that).find('input[name="option"]').attr('checked', true);
|
|||
|
|
saveAnswer(1, JSON.stringify(q));
|
|||
|
|
} else if (parseInt(q.topicType) === 2) { // 多选
|
|||
|
|
let checked = $(that).find('input[name="option"]').attr('checked');
|
|||
|
|
$(that).find('input[name="option"]').attr('checked', checked ? false : true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 题目跳转 上一题/下一题
|
|||
|
|
function topicJump(type) {
|
|||
|
|
if (dataList && dataList.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let currentIdx = -1;
|
|||
|
|
if (type === 1) { // 上一题
|
|||
|
|
currentIdx = idx - 1
|
|||
|
|
if (currentIdx < 0) {
|
|||
|
|
return layer.msg('已经是第一题啦', { icon: 7 });
|
|||
|
|
}
|
|||
|
|
} else if (type === 2) { // 下一题
|
|||
|
|
currentIdx = idx + 1
|
|||
|
|
if (currentIdx > dataList.length - 1) {
|
|||
|
|
return layer.msg('已经是最后一题啦', { icon: 7 });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
idx = currentIdx;
|
|||
|
|
renderQuestion(idx, type === 1 ? 'left' : 'right');
|
|||
|
|
setCheckCircleStyle(idx);
|
|||
|
|
$('#currentNum').html(idx + 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置答题卡选中样式
|
|||
|
|
function setCheckCircleStyle(idx) {
|
|||
|
|
document.querySelectorAll('.circle2').forEach(function (c) {
|
|||
|
|
c.classList.remove('selected');
|
|||
|
|
c.classList.remove('selected2');
|
|||
|
|
});
|
|||
|
|
let q = dataList[idx];
|
|||
|
|
if (q.chooseAnswer && q.chooseAnswer!=='未作答') {
|
|||
|
|
$('.circle2').eq(idx).addClass('selected');
|
|||
|
|
} else {
|
|||
|
|
$('.circle2').eq(idx).addClass('selected2');
|
|||
|
|
}
|
|||
|
|
}
|