<template>
<view style="font-family: '微软雅黑', serif;
font-size: 40px;
color: #7f7f44;height: 30px;text-align: center;padding:20px;padding-bottom: 0;">
{{examObject.examTitle}}
</view>
<uni-row>
<uni-col :span="4" style="margin-top: 30px">
<uni-card style="height: 85vh;">
<l-divider color="#00a60d">
<view style="font-size: 20px;">考生信息</view>
</l-divider>
<view
style="font-family: '微软雅黑' , serif;font-size: 20px;color: #8c8c8c;height: 30px;text-align: center;padding:5px;">
姓名：{{user.realname}}
</view>
<view
style="font-family: '微软雅黑', serif;font-size: 20px;color: #8c8c8c;height: 30px;text-align: center;padding:5px;">
考号：{{user.username}}
</view>
<l-divider color="#00a60d">
<view style="font-size: 20px;">试卷名称</view>
</l-divider>
<radio-group>
<label v-for="(item, index) in examObject.examPapersList" :key="item.value">
<view>
<view class="paperCss"
:style="'background-color: '+(item.state === 0?'#b5aa09;':(item.state === 9?'#ececec':'#00f545'))">
<view style="color: #000000;"> <strong>{{item.title}}</strong></view>
</view>
</view>
</label>
</radio-group>
<l-divider color="#b3b3b3">
</l-divider>
<button type="primary" style="margin-top: 10px;" @click="subExam">交卷</button>
<button type="primary" style="margin-top: 10px;" @click="reload">刷新</button>
</uni-card>
</uni-col>
<uni-col :span="16" style="margin-top: 30px">
<uni-card style="height: 85vh;">
<scroll-view scroll-y="true" class="scroll-Y">
<uni-section :title="scantron.questionIndex+'、'+scantron.questionTypeName" type="line" padding>
<view v-if="scantron.questionType!==7&&scantron.questionType!==8" id="scantronNodes"
style="height: 45vh;">
</view>
<template v-if="scantron.questionType===1||scantron.questionType===3">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<radio-group>
<label v-for="(item, index) in scantron.question.answerList" :key="item">
<view>
<button @click="radioAdd(item,index,scantron)"
:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
</view>
</label>
</radio-group>
</view>
</template>
<template v-if="scantron.questionType===2">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<radio-group>
<label v-for="(item, index) in scantron.question.answerList" :key="item.value">
<view>
<button @click="item.isRight=!item.isRight;radioAdd(item,index,scantron);"
:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
</view>
</label>
</radio-group>
</view>
</template>
<template v-if="scantron.questionType===4">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<view>
<view class="uni-textarea"
style="border: #8c8c8c solid 2px;border-radius: 5px;height: 20vh;">
<textarea @blur="radioAdd(null,null,scantron)"
v-model="scantron.question.subjectiveAnswer"
placeholder-style="color:#c7c7c7" placeholder="请输入答案" />
</view>
</view>
</view>
</template>
<template v-if="scantron.questionType===5">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<label v-for="(item, index) in scantron.question.answerList" :key="item.value">
<view class="allceter"
style="background-color: #e7f4ff; text-align: left;padding: 10px;margin-bottom: 10px;border: #2a7eeb solid 1px;border-radius: 5px;">
<view style="display: inline-block;padding-left: 10px;">
<strong style="font-size: 20px;color: #0072eb;">{{item.tag}}</strong>
</view>
<input @blur="radioAdd(item.blankcontent,item.tag,scantron)" class="uni-input"
style="display: inline-block;background-color: white;" type="text"
v-model="item.blankcontent" :placeholder="item.tag" />
</view>
</label>
</view>
</template>
<template v-if="scantron.questionType===6">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view class="" v-for="(combinationItem,index) in scantron.subQuestionList">
<uni-card>
<strong>{{scantron.questionIndex+'.'+combinationItem.questionIndex+'、'+combinationItem.questionTypeName}}</strong>
<view :id="'combinationItemNodes'+index" style="height: 45vh;">
<!-- <rich-text :nodes="combinationItem.question.content"></rich-text> -->
</view>
<template v-if="combinationItem.questionType===1||combinationItem.questionType===3">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<radio-group>
<label v-for="(item, index0) in combinationItem.question.answerList"
:key="item">
<view>
<button @click="radioAdd(item,index0,scantron,combinationItem)"
:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
</view>
</label>
</radio-group>
</view>
</template>
<template v-if="combinationItem.questionType===2">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<radio-group>
<label v-for="(item, index) in combinationItem.question.answerList"
:key="item.value">
<view>
<button
@click="item.isRight=!item.isRight;radioAdd(item,index0,scantron,combinationItem);"
:style="'margin-top: 15px;padding-left:15px;font-size: 20px;text-align: left;background-color: '+(item.isRight?'#f9ea0d;':'#f0eff0')"><strong
style="color: #0072eb;">{{item.tag+"、"}}</strong>{{item.content}}</button>
</view>
</label>
</radio-group>
</view>
</template>
<template v-if="combinationItem.questionType===4">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<view>
<view class="uni-textarea"
style="border: #8c8c8c solid 2px;border-radius: 5px;height: 20vh;">
<textarea v-model="combinationItem.question.subjectiveAnswer"
placeholder-style="color:#c7c7c7" placeholder="请输入答案" />
</view>
</view>
</view>
</template>
<template v-if="combinationItem.questionType===5">
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<label v-for="(item, index) in combinationItem.question.answerList"
:key="item.value">
<view class="allceter"
style="background-color: #e7f4ff; text-align: left;padding: 10px;margin-bottom: 10px;border: #2a7eeb solid 1px;border-radius: 5px;">
<view style="display: inline-block;padding-left: 10px;">
<strong
style="font-size: 20px;color: #0072eb;">{{item.tag}}</strong>
</view>
<input
@blur="radioAdd(item.blankcontent,item.tag,scantron,combinationItem)"
class="uni-input"
style="display: inline-block;background-color: white;"
type="text" v-model="item.blankcontent"
:placeholder="item.tag" />
</view>
</label>
</view>
</template>
<template v-if="combinationItem.questionType===7">
<view style="height: 5vh;">
<rich-text :nodes="combinationItem.question.content"></rich-text>
</view>
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view style=" height: 500px;width: 700px;background-color: #ff3807;">
<movable-area style="height: 500px;width: 700px;background-color: #8c8c8c;">
<movable-view style="width: 50px;height: 50px;border:solid 1px black;"
:x="x" :y="y">
</movable-view>
<movable-view
style="width: 40px;height: 40px;background-color: #f90005;"
direction="all" :x="x" :y="y" @change="onChange">
text
</movable-view>
</movable-area>
</view>
</template>
<template v-if="combinationItem.questionType===8">
<view style="height: 5vh;">
<rich-text :nodes="combinationItem.question.content"></rich-text>
</view>
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<view style="height: 600px;width: 800;background-color: #8c8c8c;">
<movable-area
style="height: 100%;width: 100%;background-color: #8c8c8c;">
<movable-view
style="width: 50px;height: 50px;border:solid 1px black;" :x="95"
:y="95">
</movable-view>
<movable-view
style="width: 40px;height: 40px;background-color: #f90005;"
direction="all" :x="x" :y="y" @change="onChange">
text
</movable-view>
</movable-area>
</view>
</view>
</template>
</uni-card>
</view>
</template>
<template v-if="scantron.questionType===7">
<button @click="restart">重置</button>
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view style="height: 600px;width: 800;background-color: #ffffff;">
<movable-area
:style="`height: 500px;width: 700px;background-color: #8c8c8c;margin: auto;background-image: url('${drag[this.scantron.sort].background.url}');background-size:${drag[this.scantron.sort].background.width}px ${drag[this.scantron.sort].background.height}px;background-repeat: no-repeat;`">
<!-- <rich-text :nodes="scantron.question.content"></rich-text> -->
<!-- <img v-if="drag.background.url!==''" :style="`width:${drag.background.width} px;height:${drag.background.height} px;`" :src="drag.background.url"/> -->
<template v-for="item in drag[this.scantron.sort].answer">
<view
:style="`position: absolute;width: ${item.width}px;height: ${item.height}px;border:solid 1px black;left:${item.x}px;top:${item.y}px;`">
</view>
</template>
<template v-for="item in drag[this.scantron.sort].option">
<movable-view v-if="mbvShow" :id="item.id" :disabled="!disabledDrag"
:style="'width: '+item.width+'px;height: '+item.height+'px;background-color: '+item.backgroundColor+';'"
direction="all" :x="item.x" :y="item.y" @mousedown="onMousedown(item)"
@change="onChange">
</movable-view>
<movable-view v-if="!mbvShow" :id="item.id" :disabled="!disabledDrag"
:style="'width: '+item.width+'px;height: '+item.height+'px;background-color: '+item.backgroundColor+';'"
direction="all" :x="item.x" :y="item.y" @mousedown="onMousedown(item)"
@change="onChange">
</movable-view>
</template>
</movable-area>
</view>
</template>
<template v-if="scantron.questionType===8">
<view style="height: 5vh;">
</view>
<view>
<l-divider color="#aaaa7f">
</l-divider>
</view>
<view>
<view
style="height: 600px;width: 800px;background-color: #8c8c8c;margin: auto;padding-top: 50px;">
<movable-area
style="height: 550px;width: 700px;background-color: #f6f6f6;margin: auto;">
<canvas canvas-id="lineCanvas" style="width: 700px; height: 500px;">
<template v-for="(item,index) in connectionHtml">
<view
style="display: inline-block;margin-top: 30px;margin-left: 30px;margin-right: 70px;">
<!-- <rich-text :nodes="item.innerHTML"></rich-text> -->
<view v-for="(item0,index0) in item.children" :key="index">
<view :id="'option'+index+'-'+(index0+1)"
style="width: 90px;height: 100px;padding: 10px;padding-bottom:0 ;margin-bottom: 10px;border-radius: 5px;border: #007aff solid 1px;background-color: #e0eef9;overflow: hidden;">
</view>
</view>
</view>
</template>
</canvas>
</movable-area>
</view>
</view>
</template>
</uni-section>
</scroll-view>
</uni-card>
</uni-col>
<uni-col :span="4" style="margin-top: 30px">
<uni-card style="height: 85vh;">
<l-divider color="#8f960c" style="margin-top: 20px;">
<view style="font-size: 20px;">当前试卷时间</view>
</l-divider>
<view
style="font-family: '微软雅黑', serif;font-size: 20px;color: #f90005;height: 30px;text-align: center;padding:10px;font-size: 35px;">
<strong>{{paperTime}}</strong>
</view>
<!-- <l-divider color="#8f960c">
<view style="font-size: 20px;">考试时间</view>
</l-divider>
<view
style="font-family: '微软雅黑', serif;font-size: 15px;color: #00aaf9;height: 30px;text-align: center;padding:10px;">
剩余:{{examTime}}
</view> -->
<l-divider color="#251e75">
<view style="font-size: 20px;">答题卡</view>
</l-divider>
<view>
<scroll-view scroll-y="true" style="height: 50vh;">
<label v-for="(item, index) in examObject.answerCardList2" :key="item">
<uni-section class="mb-10" :title="item.questionTypeName" type="line">
<template v-for="sort in item.indexList">
<view style="display: inline-block;margin-left: 5px;"
@mousedown="radioScantron(sort)">
<view>
<button type="radio"
:style="'width: 30px;height: 30px;padding:0px;color:#FFFFFF;font-size: 12px;text-align: center;background-color: '+(sort === scantron.questionIndex?'#b5aa09;':(this.examObject.userExamQuestionList[sort-1].question.isAnswer?'#18da59':'#007aff'))">{{sort}}</button>
</view>
<view>
{{item.questionTypeName.replace("题","")}}
</view>
</view>
</template>
</uni-section>
</label>
</scroll-view>
</view>
<l-divider color="#251e75" />
<view>
<button type="primary" style="margin-top: 10px;" @click="previousQuestion">上一题</button>
<button type="primary" style="margin-top: 10px;" @click="nextQuestion">下一题</button>
</view>
</uni-card>
</uni-col>
</uni-row>
<uni-popup ref="message" type="message">
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
</uni-popup>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" title="提交试卷" @confirm="dialogInputConfirm">
<view>
<view>1、提交当前试卷后不可再次作答</view>
<view>2、本试卷剩余时间不计入下一套</view>
<view>3、最终试卷提交将结束考试</view>
<view style="text-align: center;">确认提交？</view>
</view>
</uni-popup-dialog>
</uni-popup>
<uni-popup ref="cheat" type="dialog">
<uni-popup-dialog style="width: 50vh;" ref="inputClose" title="作弊提醒">
<view style="color: red;">
<view>1、鼠标请勿点击窗口之外的地方</view>
<view>2、如果不小心退出全屏，请按F11恢复到全屏</view>
<view>3、鼠标多次点击窗口之外的地方将按作弊处理</view>
</view>
</uni-popup-dialog>
</uni-popup>
</template>
<script>
import {
exit,
request,
getExamDetail,
cacheExamAnswer,
getCacheAnswer,
submitExamPaper,
getExamQueryById
} from '../../examJs/examRequest';
import screenfull from "screenfull";
import {
redirectTo,
toLogin
} from '../../examJs/examRoute';
import {
windowState
} from '../../util/examStartUtil';
export default {
name: "examStart",
data() {
return {
// 所有方块============拖拽
drag: [],
// 拖拽元素刷新
mbvShow: true,
// 拖拽的方块信息
dragItem: {},
// 拖拽位置记录
subDrag: [],
// 拖拽后动作未完成禁用
disabledDrag: true,
// ==================================
// 连线===============================
// 连线题内容页面展示
connectionHtml: [],
// 连线题中间存储
connectionInfo: [],
// 连线题连线内容保存
connectionContentALL: [],
// 连线绘制
ctx: null,
// 点击过程颜色
clickColor: '0px 0px 5px 2px rgba(80, 85, 83, 0.7)',
// 点击结束颜色
connectionColor: ['#ffaa00', '#00ff7f', '#6ca7ff', '#1d00ff', '#aa00ff', '#ffff00', '#550000', '#ff0000'],
// ==============================
// 所有试卷和试题
examObject: {},
// 当前题目
examTopic: {},
// 答题卡
scantron: '',
//选项
answer: {},
typeThree: '',
userExamAnswers: [],
user: {},
// 拖动监听测试
b: true,
canvasWidth: 300,
canvasHeight: 300,
// 用户当前考试
userExamPaper: {},
// 倒计时实际时间
examPaperTime: 0,
// 除当前试卷的其他时间
papersTime: 0,
// 倒计时试卷显示时间
paperTime: '',
// 倒计时考试显示时间
examTime: '',
// 倒计时函数
intervalId: null,
// 切屏记录========================
windowCheat: 0,
// 切屏状态
cheat: null,
// 消息弹窗记录=================
msgType: 'success',
messageText: '这是一条成功提示',
};
},
methods: {
// 页面刷新
reload() {
cacheExamAnswer({
'examAnswers': this.userExamAnswers,
'userExamId': sessionStorage.getItem('examId'),
'leaveTime': this.windowCheat,
'paperId': this.userExamPaper.paperId,
'limitTime': this.userExamPaper.limitTime
}).then(data => {
console.log(data);
window.location.reload()
})
},
// 消息提示
messageToggle(type, message) {
this.msgType = type
this.messageText = message
this.$refs.message.open()
},
// 弹窗内容
dialogInputConfirm(val) {
this.submitExam()
},
// 提交试卷弹窗提示打开
subExam() {
this.$refs.inputDialog.open()
},
// 提交试卷
submitExam(ins) {
console.log(ins);
submitExamPaper({
'examAnswers': this.userExamAnswers,
'userExamId': sessionStorage.getItem('examId'),
'paperId': this.userExamPaper.paperId,
}).then(data => {
if (data.data.result !== null && data.data.success) {
if (ins !== 0 && ins !== 'cheat') {
this.messageToggle('success', "本试卷提交成功，即将开始下一张试卷······")
}
this.userExamAnswers = []
clearInterval(this.intervalId);
this.examObject = data.data.result
this.scantron = this.examObject.userExamQuestionList[0]
this.userExamPaper = this.examObject.userExamPapersList[0]
this.examPaperTime = this.addExamPaperTime(new Date(this.userExamPaper.systemTime),
new Date(this
.userExamPaper.limitTime))
// 试卷计时
this.papersTime = this.examPapersTime()
this.intervalId = setInterval(this.updateCountDown, 1000);
this.examTime = this.paperTime
} else {
if (ins === 'cheat') {
this.messageToggle('error', "多次切屏，考试强行终止")
} else if (ins !== 0) {
this.messageToggle('success', "考试已结束，即将退出！")
} else {
this.messageToggle('warn', "时间已到，已为您自动交卷")
}
setTimeout(() => {
screenfull.exit();
window.removeEventListener('blur', this.handleBlur);
window.removeEventListener('focus', this.handleFocus);
exit()
}, 2000)
}
if (data.data.result !== null && data.data.success && ins === 'cheat') {
this.handleBlur(0)
}
})
},
// 重置
restart() {
this.disabledDrag = true
this.drag[this.scantron.sort].answer = []
this.drag[this.scantron.sort].option = []
let content = this.stringToHTML(this.scantron.question.content)
console.log(content);
for (var i = 0; i < content.children.length; i++) {
let thisTop = content.children[i].style.top.toString().replace("px", "")
let thisLeft = content.children[i].style.left.toString().replace("px", "")
let thisWidth = content.children[i].style.width.toString().replace("px", "")
let thisHeight = content.children[i].style.height.toString().replace("px", "")
let thisBackgroundColor = content.children[i].style.backgroundColor
let thisInnerHTML = content.children[i].innerHTML
if (content.children[i].id.includes("option")) {
this.drag[this.scantron.sort].option.push({
id: content.children[i].id,
x: Number(thisLeft),
y: Number(thisTop),
old: {
x: 0,
y: 0,
ax: Number(thisLeft),
by: Number(thisTop)
},
// 只添加一次拖拽监听
b: true,
width: thisWidth,
height: thisHeight,
backgroundColor: thisBackgroundColor,
innerHTML: thisInnerHTML
})
}
if (content.children[i].id.includes("answer")) {
this.drag[this.scantron.sort].answer.push({
id: content.children[i].id,
x: Number(thisLeft),
y: Number(thisTop),
old: {
x: 0,
y: 0
},
width: thisWidth,
height: thisHeight,
backgroundColor: thisBackgroundColor
})
}
}
},
// 上一题目
previousQuestion() {
if (this.scantron.sort > 1) {
this.radioScantron(this.scantron.sort - 1)
}
},
// 下一题目
nextQuestion() {
if (this.scantron.sort < this.examObject.userExamQuestionList.length) {
// this.scantron = this.examObject.userExamQuestionList[this.scantron.sort]
this.radioScantron(this.scantron.sort + 1)
}
},
// 答题卡单击题目
radioScantron(value) {
this.scantron = this.examObject.userExamQuestionList[value - 1]
if (this.scantron.questionType !== 7 && this.scantron.questionType !== 8) {
document.getElementById('scantronNodes').innerHTML = this.scantron.question.content
}
let combination = setInterval(() => {
if (this.scantron.questionType == 6) {
for (var i = 0; i < this.scantron.subQuestionList.length; i++) {
if (document.getElementById('combinationItemNodes' + i) === null) {
console.log("加载中");
break;
}
document.getElementById('combinationItemNodes' + i).innerHTML = this.scantron
.subQuestionList[i].question.content
}
clearInterval(combination);
}
}, 10)
cacheExamAnswer({
'examAnswers': this.userExamAnswers,
'userExamId': sessionStorage.getItem('examId'),
'leaveTime': this.windowCheat,
'paperId': this.userExamPaper.paperId,
'limitTime': this.userExamPaper.limitTime
})
// 拖拽加载
if (this.scantron.questionType == 7) {
this.mbvShow = !this.mbvShow
this.disabledDrag = true
console.log(this.drag[this.scantron.questionIndex]);
if (this.drag[this.scantron.questionIndex] !== undefined) {
setTimeout(() => {
for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
let drags = this.drag[this.scantron.sort].option[i]
console.log(document.getElementById(drags.id));
document.getElementById(drags.id).innerHTML = drags.innerHTML
}
}, 10)
return
}
this.drag[this.scantron.questionIndex] = {}
this.drag[this.scantron.questionIndex].answer = []
this.drag[this.scantron.questionIndex].option = []
this.drag[this.scantron.questionIndex].background = {}
let content = this.stringToHTML(this.scantron.question.content)
for (var i = 0; i < content.children.length; i++) {
let thisTop = content.children[i].style.top.toString().replace("px", "")
let thisLeft = content.children[i].style.left.toString().replace("px", "")
let thisWidth = content.children[i].style.width.toString().replace("px", "")
let thisHeight = content.children[i].style.height.toString().replace("px", "")
let thisBackgroundColor = content.children[i].style.backgroundColor
let thisInnerHTML = content.children[i].innerHTML
if (content.children[i].id.includes("option")) {
this.drag[this.scantron.sort].option.push({
id: content.children[i].id,
x: Number(thisLeft),
y: Number(thisTop),
old: {
x: 0,
y: 0,
ax: Number(thisLeft),
by: Number(thisTop)
},
// 只添加一次拖拽监听
b: true,
width: thisWidth,
height: thisHeight,
backgroundColor: thisBackgroundColor,
innerHTML: thisInnerHTML
})
}
if (content.children[i].id.includes("answer")) {
this.drag[this.scantron.sort].answer.push({
id: content.children[i].id,
x: Number(thisLeft),
y: Number(thisTop),
old: {
x: 0,
y: 0
},
width: thisWidth,
height: thisHeight,
backgroundColor: thisBackgroundColor
})
}
if (content.children[i].tagName === 'IMG') {
this.drag[this.scantron.sort].background.url = content.children[i].src
this.drag[this.scantron.sort].background.width = content.children[i].style.width.toString()
.replace("px", "")
this.drag[this.scantron.sort].background.height = content.children[i].style.height.toString()
.replace("px", "")
}
}
console.log(this.drag[this.scantron.sort].option.length);
setTimeout(() => {
for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
let drags = this.drag[this.scantron.sort].option[i]
console.log(document.getElementById(drags.id));
document.getElementById(drags.id).innerHTML = drags.innerHTML
}
}, 10)
}
// 连线题添加监听
if (this.scantron.questionType == 8) {
this.connectionHtml = []
let content = this.stringToHTML(this.scantron.question.content)
for (var i = 0; i < content.children.length; i++) {
let child = content.children[i]
for (var j = 0; j < child.children.length; j++) {
if (child.children[j].id !== undefined && child.children[j].id.includes("option")) {
this.connectionHtml.push(child.children[j])
}
}
}
if (this.connectionContentALL[value] === undefined) {
this.connectionContentALL[value] = []
}
this.connectionInfo = []
setTimeout(() => {
// 画内容
this.drawLineWriteContent()
// 画缓存线
this.drawLineWrite(value)
}, 100)
for (var i = 0; i < this.connectionHtml.length; i++) {
let option = this.connectionHtml[i]
for (var j = 0; j < option.children.length; j++) {
let ids = "option" + i + "-" + (j + 1)
if (document.getElementById(ids) === null) {
setTimeout(() => {
let optionCol = document.getElementById(ids)
optionCol.addEventListener("mousedown", (event) => {
console.log(event);
let id = event.currentTarget.id
console.log(id);
let colId = Number(id.replace('option', '').split('-')[0])
let rowId = Number(id.replace('option', '').split('-')[1])
let left = event.target.offsetLeft
let right = Number(event.target.offsetLeft + event.target
.offsetWidth)
let top = Number(event.target.offsetTop + event.target
.offsetHeight / 2)
if (this.connectionInfo.length === this.connectionHtml.length &&
colId === 0) {
this.connectionContentALL[this.scantron.sort].push(this
.connectionInfo)
this.radioAdd(this.connectionInfo, this
.connectionInfo[0].id.replace('option', '').split('-')[
1], this.scantron)
this.connectionInfo = []
}
let arr = []
for (var i = 0; i < this.connectionContentALL[this.scantron.sort]
.length; i++) {
let all = this.connectionContentALL[this.scantron.sort][i]
if (all[0].id !== id) {
arr.push(this.connectionContentALL[this.scantron.sort][i])
}
}
this.connectionContentALL[this.scantron.sort] = arr
let infoLength = this.connectionInfo.length
if (infoLength <= this.connectionHtml.length) {
if (infoLength !== 0) {
if (!this.isLine(id, this.scantron.sort)) {
this.messageToggle('error', "这个已经连过了")
this.drawLineWrite(this.scantron.sort)
return
}
let last = this.connectionInfo[infoLength -
1]
let lastId = Number(last.id.replace('option', '').split(
'-')[0])
if (lastId + 1 === colId) {
this.connectionInfo.push({
'id': id,
'left': left,
'right': right,
'top': top
})
}
if (lastId === colId && colId !== this.connectionHtml
.length - 1) {
this.connectionInfo[infoLength - 1] = {
'id': id,
'left': left,
'right': right,
'top': top
}
document.getElementById(ids).style.boxShadow = this
.clickColor
if (Number(last.id.replace('option', '').split(
'-')[1]) === rowId &&
this.connectionInfo.length === this.connectionHtml
.length) {
this.connectionContentALL[this.scantron.sort].push(
this.connectionInfo)
console.log(this.connectionContentALL[this.scantron
.sort]);
this.radioAdd(this.connectionInfo, this
.connectionInfo[0].id.replace('option', '')
.split('-')[1], this.scantron)
this.connectionInfo = []
}
} else if (colId === this.connectionHtml.length - 1) {
this.connectionContentALL[this.scantron.sort].push(
this.connectionInfo)
console.log(this.connectionContentALL[this.scantron
.sort]);
this.radioAdd(this.connectionInfo, this
.connectionInfo[0].id.replace('option', '')
.split('-')[1], this.scantron)
this.connectionInfo = []
}
} else if (infoLength === 0) {
if (colId === 0) {
this.connectionInfo.push({
'id': id,
'left': left,
'right': right,
'top': top
})
console.log(document.getElementById(id + ''));
document.getElementById(id + '').style.boxShadow = this
.clickColor
console.log(document.getElementById(id));
}
}
}
this.shadowClean()
this.drawLineWrite(this.scantron.sort)
})
}, 10)
} else {
setTimeout(() => {
this.shadowClean()
}, 10)
}
}
}
}
},
// 连线绘制
drawLine(x1, y1, x2, y2, index) {
this.ctx = uni.createCanvasContext('lineCanvas');
this.ctx.beginPath();
let color = this.connectionColor[index]
if (index === -1) {
color = '#000000'
this.ctx.shadowColor = 'red';
// 设置阴影的模糊级别
this.ctx.setshadowBlur = 100;
// 设置阴影的水平偏移
this.ctx.shadowOffsetX = 1;
// 设置阴影的垂直偏移
this.ctx.shadowOffsetY = 1;
} else {
this.ctx.shadowColor = '#000000';
this.ctx.setshadowBlur = 0;
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
}
this.ctx.setStrokeStyle(color)
this.ctx.lineWidth = 3
this.ctx.moveTo(x1, y1); // 开始点
this.ctx.lineTo(x2, y2); // 结束点
this.ctx.stroke(); // 绘制线条
this.ctx.draw(true);
},
// 连线清理
clearRect() {
const canvas = uni.createCanvasContext('lineCanvas');
// 使用clearRect方法清空整个画布
canvas.clearRect(0, 0, 700, 500); // 这里的300x300是画布的宽高，应该与你的实际画布尺寸相匹配
canvas.draw(true); // 调用draw方法将清空操作应用到画布上
},
// 阴影清理
shadowClean() {
for (var i = 0; i < this.connectionHtml.length; i++) {
let option = this.connectionHtml[i]
for (var j = 0; j < option.children.length; j++) {
let ids = "option" + i + "-" + (j + 1)
document.getElementById(ids).style.boxShadow = ''
}
}
},
isLine(id, value) {
for (var i = 0; i < this.connectionContentALL[value].length; i++) {
let option = this.connectionContentALL[value][i]
for (var j = 0; j < option.length; j++) {
let oldId = option[j].id
if (oldId === id) {
return false
}
}
}
return true
},
// 连线题画内容
drawLineWriteContent() {
for (var i = 0; i < this.connectionHtml.length; i++) {
let option = this.connectionHtml[i]
for (var j = 0; j < option.children.length; j++) {
let ids = "option" + i + "-" + (j + 1)
document.getElementById(ids).innerHTML = option.children[j].innerHTML
}
}
}, // 连线画线
drawLineWrite(value) {
this.clearRect()
if (this.connectionInfo.length >= 2) {
for (var i = 0; i < this.connectionInfo.length - 1; i++) {
let one = this.connectionInfo[i]
let two = this.connectionInfo[i + 1]
// box-shadow: ;
document.getElementById(one.id).style.boxShadow = this.clickColor
document.getElementById(two.id).style.boxShadow = this.clickColor
this.drawLine(one.right, one.top, two.left, two.top, -1)
}
} else if (this.connectionInfo.length === 1) {
document.getElementById(this.connectionInfo[0].id).style.boxShadow = this.clickColor
}
for (var i = 0; i < this.connectionContentALL[value].length; i++) {
let option = this.connectionContentALL[value][i]
for (var j = 0; j < option.length - 1; j++) {
let one = option[j]
let two = option[j + 1]
document.getElementById(one.id).style.boxShadow = '0px 0px 5px 2px ' + this.connectionColor[i]
document.getElementById(two.id).style.boxShadow = '0px 0px 5px 2px ' + this.connectionColor[i]
this.drawLine(one.right, one.top, two.left, two.top, i)
}
}
},
// 字符转换html对象
stringToHTML(str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
},
// 拖动位置固定
tap(index, subX, subY) {
let x = subX
let y = subY
this.drag[this.scantron.sort].option[index].x = this.drag[this.scantron.sort].option[index].old.x
this.drag[this.scantron.sort].option[index].y = this.drag[this.scantron.sort].option[index].old.y
this.$nextTick(function() {
this.drag[this.scantron.sort].option[index].x = x
this.drag[this.scantron.sort].option[index].y = y
})
},
// 鼠标按下
onMousedown(item) {
console.log(this.drag[this.scantron.sort].option.length);
this.dragItem = item;
},
// 拖动监听
onChange: function(e) {
if (!this.disabledDrag) {
return
}
let index = -1
for (var j = 0; j < this.drag[this.scantron.sort].option.length; j++) {
let option = this.drag[this.scantron.sort].option[j]
if (option.id === this.dragItem.id) {
index = j
break;
}
}
this.drag[this.scantron.sort].option[index].old.x = e.detail.x
this.drag[this.scantron.sort].option[index].old.y = e.detail.y
let asda = (event) => {
document.removeEventListener('mouseup', asda)
this.disabledDrag = false
let bxs = true
// 处理鼠标抬起事件
for (var i = 0; i < this.drag[this.scantron.sort].answer.length; i++) {
let drag = this.drag[this.scantron.sort].answer[i]
let x = drag.x
let y = drag.y
if (
(Number(this.drag[this.scantron.sort].option[index].old.x) <= (Number(drag.x) + Number(
drag
.width))) &&
(Number(this.drag[this.scantron.sort].option[index].old.x) + Number(this.drag[this
.scantron.sort].option[index]
.width)) >= drag.x &&
(Number(this.drag[this.scantron.sort].option[index].old.y) <= (Number(drag.y) + Number(
drag
.height))) &&
(Number(this.drag[this.scantron.sort].option[index].old.y) + Number(this.drag[this
.scantron.sort].option[index]
.height)) >= drag.y
) {
this.tap(index, x, y);
bxs = false
break;
}
}
// console.log(this.drag[this.scantron.sort].option[index]);
if (bxs) {
this.tap(index, this.drag[this.scantron.sort].option[index].old.ax, this.drag[this.scantron
.sort].option[index].old.by);
}
setTimeout(() => {
for (var i = 0; i < this.drag[this.scantron.sort].option.length; i++) {
this.drag[this.scantron.sort].option[i]
for (var j = 0; j < this.drag[this.scantron.sort].answer.length; j++) {
this.drag[this.scantron.sort].answer[j]
}
}
this.radioAdd(this.dragItem, i, this.scantron)
this.disabledDrag = true
}, 700)
}
// if (this.drag[this.scantron.sort].option[index].b) {
// this.drag[this.scantron.sort].option[index].b = false
document.addEventListener('mouseup', asda);
// }
},
//缓存答案读取
answerDisplay(data) {
this.windowCheat = Number(data.leaveTime)
this.userExamAnswers = data.examAnswers
let examAnswers = data.examAnswers
for (var i = 0; i < examAnswers.length; i++) {
let scantron = examAnswers[i]
let index = Number(scantron.index)
if (scantron.index.includes('.')) {
let parentIndex = Number(scantron.index.split('.')[0])
let childIndex = scantron.index.split('.')[1]
let childSubject = this.examObject.userExamQuestionList[parentIndex - 1].subQuestionList[
childIndex]
console.log(childSubject);
} else if (scantron.questionType === 1 || scantron.questionType === 3) {
console.log(this.examObject.userExamQuestionList[index - 1]);
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
this.examObject.userExamQuestionList[index - 1].question.answerList[Number(scantron.answerIndex[
0])]
.isRight = true
} else if (scantron.questionType === 2) {
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
for (var j = 0; j < scantron.answerIndex.length; j++) {
this.examObject.userExamQuestionList[index - 1].question.answerList[Number(scantron
.answerIndex[j])].isRight = true
}
} else if (scantron.questionType === 4) {
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
this.examObject.userExamQuestionList[index - 1].question.subjectiveAnswer = scantron
.subjectiveAnswer
} else if (scantron.questionType === 5) {
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
let blankAnswer = JSON.parse(scantron.blankAnswer)
for (var k = 0; k < blankAnswer.length; k++) {
for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
.length; j++) {
if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
blankAnswer[k].tag) {
this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
blankAnswer[k].content
}
}
}
} else if (scantron.questionType === 7) {
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
let blankAnswer = JSON.parse(scantron.blankAnswer)
for (var k = 0; k < blankAnswer.length; k++) {
for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
.length; j++) {
if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
blankAnswer[k].tag) {
this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
blankAnswer[k].content
}
}
}
this.drag[index] = JSON.parse(scantron.coordinates)
} else if (scantron.questionType === 8) {
console.log(scantron);
this.examObject.userExamQuestionList[index - 1].question.isAnswer = true
let blankAnswer = JSON.parse(scantron.blankAnswer)
for (var k = 0; k < blankAnswer.length; k++) {
for (var j = 0; j < this.examObject.userExamQuestionList[index - 1].question.answerList
.length; j++) {
if (this.examObject.userExamQuestionList[index - 1].question.answerList[j].tag ===
blankAnswer[k].tag) {
this.examObject.userExamQuestionList[index - 1].question.answerList[j].blankcontent =
blankAnswer[k].content
}
}
}
this.connectionContentALL[index] = JSON.parse(scantron.coordinates)
}
}
},
// 题目做答
radioAdd(value, index, scantron, combinationItem) {
index = index + ''
let qIndex = scantron.questionIndex + ""
let arr = []
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = true
if (scantron.questionType === 1 || scantron.questionType === 3) {
for (var i = 0; i < scantron.question.answerList.length; i++) {
scantron.question.answerList[i].isRight = false
}
scantron.question.answerList[index].isRight = true
for (var i = 0; i < this.userExamAnswers.length; i++) {
if (this.userExamAnswers[i].index !== qIndex) {
arr.push(this.userExamAnswers[i])
}
}
arr.push({
answerIndex: [index],
answers: [value.id],
index: qIndex,
questionType: scantron.questionType
})
} else if (scantron.questionType === 2) {
let b = true
for (var i = 0; i < this.userExamAnswers.length; i++) {
if (this.userExamAnswers[i].index !== qIndex) {
arr.push(this.userExamAnswers[i])
} else {
b = false
let bc = true
let arrAnswer = []
let arrAnswerId = []
let num = this.userExamAnswers[i].answers.length;
for (var j = 0; j < num; j++) {
if (this.userExamAnswers[i].answerIndex[j] !== index) {
arrAnswer.push(this.userExamAnswers[i].answerIndex[j])
arrAnswerId.push(this.userExamAnswers[i].answers[j])
} else {
if (!value.isRight) {
bc = false
}
}
}
if (bc) {
arrAnswer.push(index)
arrAnswerId.push(value.id)
}
if (arrAnswer.length !== 0) {
arr.push({
answerIndex: arrAnswer,
answers: arrAnswerId,
index: qIndex,
questionType: scantron.questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
}
}
if (b) {
arr.push({
answerIndex: [index],
answers: [value.id],
index: qIndex,
questionType: scantron.questionType
})
}
} else if (scantron.questionType === 4) {
for (var i = 0; i < this.userExamAnswers.length; i++) {
if (this.userExamAnswers[i].index !== qIndex) {
arr.push(this.userExamAnswers[i])
}
}
if (scantron.question.subjectiveAnswer === null || scantron.question.subjectiveAnswer === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
arr.push({
subjectiveAnswer: scantron.question.subjectiveAnswer,
index: qIndex,
questionType: scantron.questionType
})
} else if (scantron.questionType === 5) {
if (value === undefined) {
return
}
let b = true
for (var i = 0; i < this.userExamAnswers.length; i++) {
if (this.userExamAnswers[i].index !== qIndex) {
arr.push(this.userExamAnswers[i])
} else {
b = false
let bc = true
let arrAnswer = []
let blankAnswer = JSON.parse(this.userExamAnswers[i].blankAnswer)
let num = blankAnswer.length;
for (var j = 0; j < num; j++) {
if (blankAnswer[j].tag !== index) {
arrAnswer.push({
tag: blankAnswer[j].tag,
content: blankAnswer[j].content
})
} else {
bc = false
}
}
if (bc) {
arrAnswer.push({
tag: index,
content: value
})
}
if (arrAnswer.length !== 0) {
arr.push({
blankAnswer: JSON.stringify(arrAnswer),
index: qIndex,
questionType: scantron.questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
}
}
if (b) {
if (value === null || value === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
arr.push({
blankAnswer: JSON.stringify([{
tag: index,
content: value
}]),
index: qIndex,
questionType: scantron.questionType
})
}
} else if (scantron.questionType === 6) {
qIndex = qIndex + "." + combinationItem.sort
if (combinationItem.questionType === 1 || combinationItem.questionType ===
3) {
for (var j = 0; j < combinationItem.question.answerList.length; j++) {
combinationItem.question.answerList[j].isRight = false
}
combinationItem.question.answerList[index].isRight = true
for (var j = 0; j < this.userExamAnswers.length; j++) {
if (this.userExamAnswers[j].index !== qIndex) {
arr.push(this.userExamAnswers[j])
}
}
arr.push({
answerIndex: [index],
answers: [value.id],
index: qIndex,
questionType: combinationItem.questionType
})
} else if (combinationItem.questionType === 2) {
let b = true
for (var j = 0; j < this.userExamAnswers.length; j++) {
if (this.userExamAnswers[j].index !== qIndex) {
arr.push(this.userExamAnswers[j])
} else {
b = false
let bca = true
let arrAnswer = []
let arrAnswerId = []
let num = this.userExamAnswers[j].answers.length;
for (var k = 0; k < num; k++) {
if (this.userExamAnswers[j].answerIndex[k] !== index) {
arrAnswer.push(this.userExamAnswers[j].answerIndex[k])
arrAnswerId.push(this.userExamAnswers[j].answers[k])
} else {
if (!value.isRight) {
bca = false
}
}
}
if (bca) {
arrAnswer.push(index)
arrAnswerId.push(value.id)
}
if (arrAnswer.length !== 0) {
arr.push({
answerIndex: arrAnswer,
answers: arrAnswerId,
index: qIndex,
questionType: combinationItem.questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
.isAnswer =
false
}
}
}
if (b) {
arr.push({
answerIndex: [index],
answers: [value.id],
index: qIndex,
questionType: combinationItem.questionType
})
}
} else if (combinationItem.questionType === 4) {
for (var j = 0; j < this.userExamAnswers.length; j++) {
if (this.userExamAnswers[j].index !== qIndex) {
arr.push(this.userExamAnswers[j])
}
}
if (combinationItem.question.subjectiveAnswer === null || scantron.subQuestionList[
i].question.subjectiveAnswer === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
arr.push({
subjectiveAnswer: combinationItem.question.subjectiveAnswer,
index: qIndex,
questionType: combinationItem.questionType
})
} else if (combinationItem.questionType === 5) {
if (value === undefined) {
return
}
let b = true
for (var j = 0; j < this.userExamAnswers.length; j++) {
if (this.userExamAnswers[j].index !== qIndex) {
arr.push(this.userExamAnswers[j])
} else {
b = false
let bc = true
let arrAnswer = []
let blankAnswer = JSON.parse(this.userExamAnswers[j].blankAnswer)
let num = blankAnswer.length;
for (var q = 0; q < num; q++) {
if (blankAnswer[q].tag !== index) {
arrAnswer.push({
tag: blankAnswer[q].tag,
content: blankAnswer[q].content
})
} else {
bc = false
}
}
if (bc) {
arrAnswer.push({
tag: index,
content: value
})
}
if (arrAnswer.length !== 0) {
arr.push({
blankAnswer: JSON.stringify(arrAnswer),
index: qIndex,
questionType: scantron.subQuestionList[i].questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
.isAnswer = false
}
}
}
if (b) {
if (value === null || value === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
console.log(qIndex);
console.log(scantron);
console.log(this.examObject.userExamQuestionList[scantron.questionIndex - 1].subQuestionList[
Number(combinationItem.sort)]);
arr.push({
blankAnswer: JSON.stringify([{
tag: index,
content: value
}]),
index: qIndex,
questionType: scantron.subQuestionList[i].questionType
})
}
}
} else if (scantron.questionType === 7) {
if (value === undefined) {
return
}
index = (Number(index) + 1) + ""
let b = true
for (var i = 0; i < this.userExamAnswers.length; i++) {
if (this.userExamAnswers[i].index !== qIndex) {
arr.push(this.userExamAnswers[i])
} else {
b = false
let bc = true
let arrAnswer = []
let blankAnswer = JSON.parse(this.userExamAnswers[i].blankAnswer)
let num = blankAnswer.length;
for (var j = 0; j < num; j++) {
if (blankAnswer[j].tag !== index) {
arrAnswer.push({
tag: blankAnswer[j].tag,
content: blankAnswer[j].content
})
} else {
bc = false
}
}
if (bc) {
arrAnswer.push({
tag: index,
content: value.id
})
}
if (arrAnswer.length !== 0) {
arr.push({
blankAnswer: JSON.stringify(arrAnswer),
coordinates: JSON.stringify(this.drag[qIndex]),
index: qIndex,
questionType: scantron.questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
}
}
if (b) {
if (value === null || value === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer = false
}
arr.push({
blankAnswer: JSON.stringify([{
tag: index,
content: value.id
}]),
coordinates: JSON.stringify(this.drag[qIndex]),
index: qIndex,
questionType: scantron.questionType
})
}
} else if (scantron.questionType === 8) {
console.log(this.connectionContentALL[qIndex]);
let info = value
value = ""
for (var i = 0; i < info.length; i++) {
console.log(info);
value += info[i].id.replace('option', '').split('-')[1]
}
// connectingCoordinates
if (value === undefined) {
return
}
let b = true
for (var j = 0; j < this.userExamAnswers.length; j++) {
if (this.userExamAnswers[j].index !== qIndex) {
arr.push(this.userExamAnswers[j])
} else {
b = false
let bc = true
let arrAnswer = []
let blankAnswer = JSON.parse(this.userExamAnswers[j].blankAnswer)
let num = blankAnswer.length;
for (var q = 0; q < num; q++) {
if (blankAnswer[q].tag !== index) {
arrAnswer.push({
tag: blankAnswer[q].tag,
content: blankAnswer[q].content
})
} else {
bc = false
}
}
if (bc) {
arrAnswer.push({
tag: index,
content: value
})
}
if (arrAnswer.length !== 0) {
arr.push({
blankAnswer: JSON.stringify(arrAnswer),
index: qIndex,
coordinates: JSON.stringify(this.connectionContentALL[qIndex]),
questionType: scantron.questionType
})
} else {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question
.isAnswer =
false
}
}
}
if (b) {
if (value === null || value === "") {
this.examObject.userExamQuestionList[scantron.questionIndex - 1].question.isAnswer =
false
}
arr.push({
blankAnswer: JSON.stringify([{
tag: index,
content: value
}]),
coordinates: JSON.stringify(this.connectionContentALL[qIndex]),
index: qIndex,
questionType: scantron.questionType
})
}
}
this.userExamAnswers = arr
},
// 失去焦点时的处理函数
handleBlur(v) {
if (this.examObject.leaveOn) {
if (this.windowCheat < 2 && v !== 0) {
this.$refs.cheat.open()
}
let leaveCount = this.examObject.totalLeaveTimes
let leaveTime = this.examObject.leaveTime
if (this.windowCheat < leaveCount) {
this.cheat = setInterval(() => {
console.log("切屏加一");
this.windowCheat++
cacheExamAnswer({
'examAnswers': this.userExamAnswers,
'userExamId': sessionStorage.getItem('examId'),
'leaveTime': this.windowCheat,
'paperId': this.userExamPaper.paperId,
'limitTime': this.userExamPaper.limitTime
})
clearInterval(this.cheat)
}, leaveTime * 1000)
} else {
this.submitExam('cheat')
}
console.log(this.windowCheat);
}
},
// 获得焦点时的处理函数
handleFocus() {
if (this.examObject.leaveOn) {
clearInterval(this.cheat)
}
},
// 时间
addExamPaperTime(systemTime, endTime) {
return (endTime.getTime() - systemTime.getTime()) / 1000
},
// 更新倒计时函数
updateCountDown() {
var distance = this.examPaperTime;
this.examPaperTime = this.examPaperTime - 1
if (distance < 0) {
clearInterval(this.intervalId);
console.log(0);
this.messageToggle('warn', "时间已到，2秒后为您自动交卷")
setTimeout(() => {
this.submitExam(0)
}, 2000)
return;
}
// 计算时分秒
var seconds = Math.floor((distance % (60)));
var minutes = Math.floor((distance % (60 * 60)) / (60));
var hours = Math.floor(distance / (60 * 60));
if (hours != 0) {
this.paperTime = hours + ":" + (minutes.toString().length == 2 ? minutes : '0' + minutes) + ":" + (
seconds.toString().length == 2 ? seconds : '0' + seconds)
} else {
this.paperTime = (minutes.toString().length == 2 ? minutes : '0' + minutes) + ":" + (seconds.toString()
.length == 2 ? seconds : '0' + seconds)
}
let examTime = this.papersTime + distance
// 计算考試时分秒
var examTimeseconds = Math.floor((examTime % (60)));
var examTimeminutes = Math.floor((examTime % (60 * 60)) / (60));
var examTimehours = Math.floor(examTime / (60 * 60));
if (examTimehours != 0) {
this.examTime = examTimehours + ":" + (examTimeminutes.toString().length == 2 ? examTimeminutes : '0' +
examTimeminutes) + ":" + (
seconds.toString().length == 2 ? examTimeseconds : '0' + examTimeseconds)
} else {
this.examTime = (examTimeminutes.toString().length == 2 ? examTimeminutes : '0' + examTimeminutes) +
":" + (examTimeseconds.toString()
.length == 2 ? examTimeseconds : '0' + examTimeseconds)
}
},
examPapersTime() {
let list = this.examObject.examPapersList
let time = 0
for (var i = 0; i < list.length; i++) {
if (list[i].paperId !== this.userExamPaper.paperId) {
if (list[i].state === 9) {
time += list[i].paperTime * 60
}
}
}
return time
}
},
mounted() {
window.addEventListener("unload", (e) => {
e.preventDefault();
setTimeout(() => {
cacheExamAnswer({
'examAnswers': this.userExamAnswers,
'userExamId': sessionStorage.getItem('examId'),
'leaveTime': this.windowCheat,
'paperId': this.userExamPaper.paperId,
'limitTime': this.userExamPaper.limitTime
}).then(data => {
console.log(data);
})
}, 100)
});
this.user = JSON.parse(sessionStorage.getItem("user"))
let examId = sessionStorage.getItem('examId')
getExamDetail({
'userExamId': examId,
't': new Date().toString()
}).then(data => {
if (data.data.code !== 200) {
sessionStorage.removeItem('examId')
toLogin()
}
this.examObject = data.data.result
this.scantron = this.examObject.userExamQuestionList[0]
this.userExamPaper = this.examObject.userExamPapersList[0]
this.examPaperTime = this.addExamPaperTime(new Date(this.userExamPaper.systemTime), new Date(this
.userExamPaper.limitTime))
// 试卷计时
this.papersTime = this.examPapersTime()
this.intervalId = setInterval(this.updateCountDown, 1000);
this.examTime = this.paperTime
// 添加切屏事件监听
if (windowState) {
window.addEventListener('blur', this.handleBlur);
window.addEventListener('focus', this.handleFocus);
}
// 获取缓存答案
getCacheAnswer({
'userExamId': examId
}).then(answerData => {
if (answerData.data.result !== null) {
this.answerDisplay(answerData.data.result)
}
})
})
}
}
</script>
<style scoped>
.svg-container {
width: 100%;
height: 100%;
overflow: hidden;
position: runiative;
}
svg {
display: block;
width: 100%;
height: 100%;
}
.scroll-Y {
height: 80vh;
}
.allceter {
display: flex;
align-items: center;
height: 50px;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
div {
margin: 0;
padding: 0;
}
/* CSS 预设*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
body a {
outline: none;
blr: expression(this.onFocus=this.blur());
}
.uni-input {
padding-left: 20px;
border: 1rpx solid #5bb4ee;
height: 96rpx;
margin-left: 10px;
color: #000000;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
}
img {
border: none;
}
.dialog-text {
font-size: 14px;
color: #333;
}
.paperCss {
width: 85%;
border-radius: 5px;
padding: 15px;
margin-top: 15px;
font-size: 15px;
text-align: left;
}
</style>