You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
15 KiB
331 lines
15 KiB
<template> |
|
<div class="box"> |
|
<div class="left"> |
|
<p class="title">答题卡</p> |
|
|
|
<div class="item"> |
|
<p class="type">单选题</p> |
|
<p class="total">（共{{singleCount}}题，合计{{singlePoint}}分）</p> |
|
<div class="nums"> |
|
<span v-for="n in singleCount" :class="{active: n <= singleAnsweredCount}" :key="n">{{n}}</span> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<p class="type">多选题</p> |
|
<p class="total">（共{{multipleCount}}题，合计{{multipleChoiceScore}}分）</p> |
|
<div class="nums"> |
|
<span v-for="n in multipleCount" :class="{active: n <= multipleAnsweredCount}" :key="n">{{n}}</span> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<p class="type">判断题</p> |
|
<p class="total">（共{{judgeCount}}题，合计{{judgeScore}}分）</p> |
|
<div class="nums"> |
|
<span v-for="n in judgeCount" :class="{active: n <= judgeAnsweredCount}" :key="n">{{n}}</span> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<p class="type">填空题</p> |
|
<p class="total">（共{{fillBlankCount}}题，合计{{fillBlanksScore}}分）</p> |
|
<div class="nums"> |
|
<span v-for="n in fillBlankCount" :class="{active: n <= fillBlankAnsweredCount}" :key="n">{{n}}</span> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<p class="type">简答题</p> |
|
<p class="total">（共{{briefAnswerCount}}题，合计{{briefAnswerScore}}分）</p> |
|
<div class="nums"> |
|
<span v-for="n in briefAnswerCount" :class="{active: n <= briefAnswerAnsweredCount}" :key="n">{{n}}</span> |
|
</div> |
|
</div> |
|
<div class="btn"> |
|
<el-button size="mini" type="primary" @click="save">提交练习</el-button> |
|
</div> |
|
</div> |
|
|
|
<div class="middle"> |
|
<div class="ques"> |
|
<template v-for="(subject,k) in subjects"> |
|
<div class="item" v-if="subject.length" :key="k"> |
|
<p v-if="subjects[k].length" class="title">{{questionType[k]}}（共{{subjects[k].length}}题，合计{{scoreList[k]}}分）</p> |
|
<div class="ques-wrap" v-for="(item,index) in subject" :key="index"> |
|
<div class="name-wrap"> |
|
<span class="index">{{index+1}}.</span> |
|
<div class="name" :class="'stem' + k + index" v-html="item.questionStem"></div> |
|
</div> |
|
<div class="media" :id="item.mediaEleId"></div> |
|
<div class="options"> |
|
<template v-if="item.name == '单项选择' || item.name == '判断题'"> |
|
<div class="option"> |
|
<el-radio-group v-model="item.val" @change.once="updateProgress"> |
|
<el-radio v-for="(option,i) in item.options" :key="i" :label="i"> |
|
{{i}}.{{item.options[i]}} |
|
</el-radio> |
|
</el-radio-group> |
|
</div> |
|
</template> |
|
<template v-if="item.name == '多项选择'"> |
|
<el-checkbox-group v-model="item.val" @change="updateProgress"> |
|
<el-checkbox class="option-check" :label="i" v-for="(option,i) in item.options" :key="i"> |
|
{{i}}.{{item.options[i]}} |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
</template> |
|
<template v-if="item.name == '简答题'"> |
|
<el-input type="textarea" rows="5" v-model="item.val" @input="updateProgress"></el-input> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</div> |
|
</div> |
|
|
|
<div class="right"> |
|
<div class="ans">答题进度</div> |
|
<el-progress :percentage="progress"></el-progress> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import { mapState,mapGetters,mapActions } from 'vuex' |
|
import setBackground from '@/mixins/setBackground' |
|
import examDo from '@/mixins/examDo' |
|
import util from '@/libs/util' |
|
|
|
export default { |
|
mixins: [ setBackground,examDo ], |
|
data() { |
|
return { |
|
identification: this.$store.state.identification, |
|
subjects: [], |
|
singleCount: 0, |
|
multipleCount: 0, |
|
judgeCount: 0, |
|
fillBlankCount: 0, |
|
briefAnswerCount: 0, |
|
|
|
singleAnsweredCount: 0, |
|
multipleAnsweredCount: 0, |
|
judgeAnsweredCount: 0, |
|
fillBlankAnsweredCount: 0, |
|
briefAnswerAnsweredCount: 0, |
|
|
|
singlePoint: 0, |
|
multipleChoiceScore: 0, |
|
judgeScore: 0, |
|
fillBlanksScore: 0, |
|
briefAnswerScore: 0, |
|
scoreList: [], |
|
questionType: ['单选题','多选题','判断题','填空题','简答题'], |
|
startTime: new Date().getTime(), |
|
time: '00:00:00', |
|
progress: 0, |
|
isSubmit: false, |
|
isDone: false, |
|
totalLen: 0 |
|
}; |
|
}, |
|
computed: { |
|
...mapState('user', [ |
|
'userId' |
|
]), |
|
...mapState('practice', [ |
|
'practiseId','paperId','isContinue' |
|
]), |
|
}, |
|
mounted() { |
|
this.getData() |
|
this.addLeaveEvent() |
|
}, |
|
beforeDestroy(){ |
|
window.onbeforeunload = null |
|
window.updateProgress = null |
|
this.addRecords() |
|
}, |
|
methods: { |
|
getData() { |
|
this.$post(`${this.api.previewtestPaper}?id=${this.paperId}`) |
|
.then(res => { |
|
let data = res.data |
|
let subjects = [ |
|
[...data.list1], |
|
[...data.list2], |
|
[...data.list4], |
|
[...data.list3], |
|
[...data.list5], |
|
] |
|
this.singleCount = data.list1.length |
|
this.multipleCount = data.list2.length |
|
this.fillBlankCount = data.list3.length |
|
this.judgeCount = data.list4.length |
|
this.briefAnswerCount = data.list5.length |
|
|
|
this.singlePoint = data.list1.length ? data.list1[0].singleChoiceScore * this.singleCount : 0 |
|
this.multipleChoiceScore = data.list2.length ? data.list2[0].multipleChoiceScore * this.multipleCount : 0 |
|
this.judgeScore = data.list4.length ? data.list4[0].judgeScore * this.judgeCount : 0 |
|
this.fillBlanksScore = data.list3.length ? data.list3[0].fillBlanksScore * this.fillBlankCount : 0 |
|
this.briefAnswerScore = data.list5.length ? data.list5[0].briefAnswerScore * this.briefAnswerCount : 0 |
|
this.scoreList = [this.singlePoint,this.multipleChoiceScore,this.fillBlanksScore,this.briefAnswerScore,this.briefAnswerScore] |
|
|
|
window.updateProgress = (item) => { |
|
this.updateProgress(item,1) |
|
} |
|
let index = 0 |
|
subjects.forEach((e,i) => { |
|
e.forEach((n,j) => { |
|
index++ |
|
n.mediaEleId = `player${index}` |
|
if(i == 1){ |
|
this.$set(n,'val',[]) |
|
}else if(i == 3){ |
|
n.questionStem = n.questionStem.replace(/\(\)\(\)\(\)/g,`<input class="input" data-index="${j}" oninput="updateProgress(this)"></input>`) |
|
}else{ |
|
this.$set(n,'val','') |
|
} |
|
if(!n.options){ |
|
let options = {} |
|
for(let i in n){ |
|
if(i.includes('option') && n[i]){ |
|
options[i.replace('option','')] = n[i] |
|
} |
|
} |
|
n.options = options |
|
} |
|
n.questionStatus = 0 |
|
}) |
|
}) |
|
this.subjects = subjects |
|
this.getAnswer() |
|
}).catch(err => {}) |
|
}, |
|
getAnswer() { |
|
this.$post(`${this.api.enterPractise}?paperId=${this.paperId}&userId=${this.userId}&practiseId=${this.practiseId}&isContinue=${this.isContinue}&identification=${this.identification}`) |
|
.then(res => { |
|
let len = 0 |
|
this.subjects.map(n => len += n.length) |
|
this.totalLen = len |
|
if(this.isContinue){ |
|
this.identification = res.data.Identification |
|
this.subjects.forEach((e,i) => { |
|
e.forEach((n,k) => { |
|
this.initMedia(n) |
|
}) |
|
}) |
|
}else{ |
|
let records = [...res.data.list1,...res.data.list2,...res.data.list3,...res.data.list4,...res.data.list5] |
|
records = records.filter(n => n.user_answer) |
|
this.progress = len ? Math.floor((records.length / len * 100)) : 0 |
|
|
|
this.singleAnsweredCount = records.filter(n => n.typeName == '单项选择').length |
|
this.multipleAnsweredCount = records.filter(n => n.typeName == '多项选择').length |
|
this.fillBlankAnsweredCount = records.filter(n => n.typeName == '填空题').length |
|
this.judgeAnsweredCount = records.filter(n => n.typeName == '判断题').length |
|
this.briefAnswerAnsweredCount = records.filter(n => n.typeName == '简答题').length |
|
|
|
this.subjects.forEach((e,i) => { |
|
e.forEach((n,k) => { |
|
this.initMedia(n) |
|
let answered = records.find(j => j.questionId == n.questionId) |
|
if(answered){ |
|
if(i == 1){ |
|
n.val = answered.user_answer.split('') |
|
}else if(i == 3){ |
|
let answer = answered.user_answer.split('<>'); |
|
[...document.querySelectorAll(`.stem${i}${k} input`)].map((n,j) => { |
|
n.value = answer[j] |
|
}) |
|
n.val = answered.user_answer |
|
}else{ |
|
n.val = answered.user_answer |
|
} |
|
n.questionStatus = 1 |
|
} |
|
}) |
|
}) |
|
} |
|
}).catch(err => {}) |
|
}, |
|
addLeaveEvent(){ |
|
window.onbeforeunload = e => { |
|
e = e || window.event; |
|
if (e) { |
|
e.returnValue = '关闭提示' |
|
} |
|
this.addRecords() |
|
return '关闭提示' |
|
} |
|
}, |
|
save(){ |
|
let data1 = [] |
|
this.subjects.map((e,i) => { |
|
e.map((n,k) => { |
|
let userAnswer = '' |
|
if(i == 1){ |
|
userAnswer = n.val.join('') |
|
}else if(i == 3){ |
|
userAnswer = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value).join('<>') |
|
}else{ |
|
userAnswer = n.val |
|
} |
|
data1.push({ |
|
identification: this.identification, |
|
practiseId: this.practiseId, |
|
questionId: n.questionId, |
|
questionStatus : n.questionStatus, |
|
testPaperId: this.paperId, |
|
userAnswer, |
|
userId: this.userId |
|
}) |
|
}) |
|
}) |
|
|
|
this.$post(`${this.api.addPractiseExamAnswerDetails}`,data1) |
|
.then(res => { |
|
this.$post(`${this.api.addPractiseRecord}?userId=${this.userId}&practiseId=${this.practiseId}&paperId=${this.paperId}&identification=${this.identification}`) |
|
.then(res => { |
|
this.$post(`${this.api.calculationScorePractice}`,data1) |
|
.then(res => { |
|
this.isSubmit = true |
|
this.$message.success(this.isDone ? '练习已结束，已经自动为您提交练习！' : '提交成功') |
|
this.$router.back() |
|
}).catch(err => {}) |
|
}).catch(err => {}) |
|
}).catch(err => {}) |
|
}, |
|
addRecords(){ |
|
if(!this.isSubmit){ |
|
let data1 = [] |
|
this.subjects.map((e,i) => { |
|
e.map((n,k) => { |
|
let userAnswer = '' |
|
if(i == 1){ |
|
userAnswer = n.val.join('') |
|
}else if(i == 3){ |
|
userAnswer = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value).join('<>') |
|
}else{ |
|
userAnswer = n.val |
|
} |
|
data1.push({ |
|
identification: this.identification, |
|
practiseId: this.practiseId, |
|
questionId: n.questionId, |
|
questionStatus : n.questionStatus, |
|
testPaperId: this.paperId, |
|
userAnswer: userAnswer, |
|
userId: this.userId |
|
}) |
|
}) |
|
}) |
|
this.$post(`${this.api.addPractiseExamAnswerDetails}`,data1) |
|
.then(res => {}) |
|
.catch(err => {}) |
|
} |
|
}, |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "@/styles/pages/exam.scss"; |
|
</style> |