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');
|
||
}
|
||
} |