|
@@ -8,12 +8,16 @@
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>第{{currentQuestion.index+1}}题({{currentQuestion.type|getType}})</span>
|
|
|
|
|
|
- <span style="float: right;">
|
|
|
+ <span style="float: right;" v-if="!finishExamFlag">
|
|
|
<span> 剩余时间: <span class="ltime">{{end.h}}: {{end.m}}:{{end.s}}</span> </span>
|
|
|
+ <el-button type="danger" @click="submitPaper" class="ml20">交卷</el-button>
|
|
|
+ </span>
|
|
|
|
|
|
- <el-button type="danger" @click="submitPaper" class="ml20">交卷</el-button>
|
|
|
-
|
|
|
+ <span style="float: right;" v-else>
|
|
|
+ <span> 我的成绩: <span class="ltime">{{info.score}} 分</span> </span>
|
|
|
+ <el-button type="primary" @click="leavePage" class="ml20">离开</el-button>
|
|
|
</span>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div class="q-single">
|
|
@@ -24,7 +28,7 @@
|
|
|
|
|
|
<div class="answer" v-if="currentQuestion.type==1">
|
|
|
<div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
|
|
|
- <el-radio v-model="radio" :label="index+1">
|
|
|
+ <el-radio v-model="radio" :label="index+1" :disabled="finishExamFlag">
|
|
|
<span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
|
|
|
</el-radio>
|
|
|
</div>
|
|
@@ -33,7 +37,7 @@
|
|
|
<!-- 当选题 -->
|
|
|
<div class="answer" v-if="currentQuestion.type==2">
|
|
|
<div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
|
|
|
- <el-radio v-model="radio" :label="index+1">
|
|
|
+ <el-radio v-model="radio" :label="index+1" :disabled="finishExamFlag">
|
|
|
<span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
|
|
|
</el-radio>
|
|
|
</div>
|
|
@@ -42,12 +46,23 @@
|
|
|
<!-- 多选题 -->
|
|
|
<div class="answer" v-if="currentQuestion.type==3">
|
|
|
<div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
|
|
|
- <el-checkbox v-model="checked[index]" :label="index+1">
|
|
|
+ <el-checkbox v-model="checked[index]" :label="index+1" :disabled="finishExamFlag">
|
|
|
<span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
|
|
|
</el-checkbox>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="p20" v-if="finishExamFlag">
|
|
|
+ <p>
|
|
|
+ 答案:
|
|
|
+ <span class="ml20">{{currentQuestion.result|filterSelect}}</span>
|
|
|
+ <span class="ml20" > 我答案:</span>
|
|
|
+ <span class="ml20" :style="{color:currentQuestion.correct?'green':'red'}"> {{(commitMap[currentQuestion.id]||'空')|filterSelect}}</span>
|
|
|
+ <span class="ml20" > 结果:</span>
|
|
|
+ <span class="ml20" v-if="currentQuestion.correct" style="color:green">正确</span>
|
|
|
+ <span class="ml20" v-else style="color:red">错误</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
|
|
|
<div class="mark" >
|
|
|
<el-checkbox v-model="currentQuestion.marked" @change="changeMark" :checked="currentQuestion.marked">
|
|
@@ -69,7 +84,7 @@
|
|
|
<div>
|
|
|
<h3 class="p10">单项选择题</h3>
|
|
|
<el-row :gutter="24" class="ml20">
|
|
|
- <el-col :span="4" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==2">
|
|
|
+ <el-col :span="3" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==2">
|
|
|
<el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
|
|
|
{{index+1}}
|
|
|
<span class="red">
|
|
@@ -81,7 +96,7 @@
|
|
|
|
|
|
<h3 class="p10">多选题</h3>
|
|
|
<el-row :gutter="24" class="ml20">
|
|
|
- <el-col :span="4" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==3">
|
|
|
+ <el-col :span="3" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==3">
|
|
|
<el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
|
|
|
{{index+1}}
|
|
|
<span class="red">
|
|
@@ -93,7 +108,7 @@
|
|
|
|
|
|
<h3 class="p10">判断题</h3>
|
|
|
<el-row :gutter="24" class="ml20">
|
|
|
- <el-col :span="4" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==1">
|
|
|
+ <el-col :span="3" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==1">
|
|
|
<el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
|
|
|
{{index+1}}
|
|
|
<span class="red">
|
|
@@ -108,7 +123,7 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
- <my-dialog style="margin-top:20vh" :dialogVisible="dialogVisible" :info="info" :start="start" :end="end" @leavePage="leavePage" >
|
|
|
+ <my-dialog style="margin-top:20vh" :dialogVisible="dialogVisible" :info="info" :start="start" :end="end" @leavePage="finishExam" >
|
|
|
|
|
|
|
|
|
</my-dialog>
|
|
@@ -119,7 +134,7 @@
|
|
|
import { Message, MessageBox } from "element-ui";
|
|
|
import {httpServer } from "@/components/httpServer/httpServer.js";
|
|
|
import md5 from 'js-md5';
|
|
|
-import { getTime, packTime, time2str, saveExam, getExam,getSelect,delExam } from "./components/util.js";
|
|
|
+import { getTime, packTime, time2str, saveExam, getExam,getSelect,delExam,filterSelect } from "./components/util.js";
|
|
|
import headline from "./components/headline.vue";
|
|
|
import myDialog from "./components/my-dialog.vue";
|
|
|
const defAnswer = [false,false,false,false,false];
|
|
@@ -133,16 +148,18 @@ export default {
|
|
|
getType( val ){
|
|
|
const d = {1:'判断题', 2:'单选题', 3:'多选题'}
|
|
|
return d[val]
|
|
|
- }
|
|
|
+ },
|
|
|
+ filterSelect
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
uuid:0,
|
|
|
examId:0,
|
|
|
+ finishExamFlag: false,
|
|
|
startExam: false,
|
|
|
dialogVisible: false,
|
|
|
info: {},
|
|
|
- currentQuestion: {index:0, choice: [], marked: false},
|
|
|
+ currentQuestion: {index:0, choice: [], marked: false,correct:false},
|
|
|
questionList: [],
|
|
|
questionLen: 0,
|
|
|
questionType: '单选题',
|
|
@@ -206,13 +223,15 @@ export default {
|
|
|
this.currentQuestion.marked = !!item.marked
|
|
|
},
|
|
|
loadQuestion( index ) {
|
|
|
+ let examId = this.info.examId;
|
|
|
let item = this.questionList[index];
|
|
|
item.index = index;
|
|
|
- if( !item.title ){
|
|
|
+ let reloadFlag = (this.info.endTime>0 && item.result===0) || !item.title;
|
|
|
+ if( reloadFlag ){
|
|
|
let {id} = item;
|
|
|
- httpServer("course.loadAnswer", {id} ).then(res => {
|
|
|
+ httpServer("course.loadAnswer", {id, examId} ).then(res => {
|
|
|
if( res.code != 200) return;
|
|
|
- Object.assign( item, res.data)
|
|
|
+ Object.assign( item, res.data, {id})
|
|
|
this.doLoadQuestion( item )
|
|
|
})
|
|
|
}else{
|
|
@@ -227,9 +246,13 @@ export default {
|
|
|
getStyle: function(i) {
|
|
|
let item = this.questionList[i];
|
|
|
let select = getSelect( item.answer )
|
|
|
+ if( this.info.endTime >0 ){
|
|
|
+ return item.correct?'correct':'error';
|
|
|
+ }
|
|
|
return select ? "finish" : "unfinish";
|
|
|
},
|
|
|
checkCommit( ){
|
|
|
+ if( this.info.endTime ) return;
|
|
|
let {id, answer, exmaId} = this.currentQuestion
|
|
|
let select = getSelect(answer);
|
|
|
if( !select ) return
|
|
@@ -239,6 +262,31 @@ export default {
|
|
|
this.commitMap[id] = select;
|
|
|
})
|
|
|
},
|
|
|
+ updateResult( resultList ){
|
|
|
+ let results = {};
|
|
|
+ for( let i in resultList){
|
|
|
+ let item = resultList[i]
|
|
|
+ results[item.answerId] = item;
|
|
|
+ }
|
|
|
+ for( let index in this.questionList){
|
|
|
+ let question = this.questionList[index];
|
|
|
+ if( question.answerId>0){
|
|
|
+ let result = results[question.answerId]
|
|
|
+ if(result){
|
|
|
+ question.result = result.answer
|
|
|
+ question.correct = !!result.correct
|
|
|
+ this.questionList[index] = question
|
|
|
+ this.commitMap[question.id] = result.result;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ saveExam( this.info, this.questionList );
|
|
|
+ },
|
|
|
+ finishExam(){
|
|
|
+ this.timer && window.clearInterval(this.timer);
|
|
|
+ this.finishExamFlag = true;
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
leavePage(){
|
|
|
let courseId = this.info.courseId
|
|
|
this.timer && window.clearInterval(this.timer);
|
|
@@ -261,7 +309,6 @@ export default {
|
|
|
done();
|
|
|
instance.confirmButtonLoading = false;
|
|
|
that.dialogVisible = true;
|
|
|
-
|
|
|
} else{
|
|
|
done();
|
|
|
}
|
|
@@ -276,8 +323,10 @@ export default {
|
|
|
let { score, useTime } = res.data;
|
|
|
this.info.score = score;
|
|
|
this.info.useTime = useTime;
|
|
|
+ this.info.endTime = parseInt(Date.now()/1000);
|
|
|
this.info.isFinish = 1;
|
|
|
this.timer && window.clearInterval(this.timer);
|
|
|
+ this.updateResult( res.data.result ||[])
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -298,10 +347,14 @@ export default {
|
|
|
doStartExam( info ){
|
|
|
this.info = info
|
|
|
this.questionList = info.answers
|
|
|
+ for( let i in this.questionList){
|
|
|
+ let question = this.questionList[i]
|
|
|
+ if( question.answer ) this.commitMap[question.id] = getSelect( question.answer )
|
|
|
+ }
|
|
|
+ this.finishExamFlag = info.endTime>0;
|
|
|
this.loadQuestion(0);
|
|
|
this.startTime = info.startTime;
|
|
|
- saveExam( this.info, this.questionList );
|
|
|
- this.initTimer();
|
|
|
+ !this.finishExamFlag && this.initTimer();
|
|
|
}
|
|
|
},
|
|
|
destroyed(){
|
|
@@ -337,6 +390,7 @@ export default {
|
|
|
if (this.currentQuestion){
|
|
|
this.currentQuestion.answer = answer;
|
|
|
this.questionList[ this.currentQuestion.index].answer = answer
|
|
|
+ saveExam( this.info, this.questionList)
|
|
|
this.checkCommit()
|
|
|
}
|
|
|
},
|
|
@@ -345,6 +399,7 @@ export default {
|
|
|
if (this.currentQuestion) {
|
|
|
this.currentQuestion.answer = answer;
|
|
|
this.questionList[ this.currentQuestion.index].answer = answer
|
|
|
+ saveExam( this.info, this.questionList)
|
|
|
this.checkCommit()
|
|
|
}
|
|
|
}
|
|
@@ -355,4 +410,12 @@ export default {
|
|
|
<style lang="css">
|
|
|
@import url("./index.css");
|
|
|
@import url("../../../assets/css/base.css");
|
|
|
+ .el-radio__input.is-disabled+span.el-radio__label {
|
|
|
+ color: #333;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-disabled+span.el-checkbox__label {
|
|
|
+ color: #333;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
</style>
|