|
|
|
|
@ -5,117 +5,304 @@ |
|
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="type">单选题</p> |
|
|
|
|
<p class="total">（共10题，合计20分）</p> |
|
|
|
|
<p class="total">（共{{singleCount}}题，合计{{singlePoint}}分）</p> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<span v-for="n in 10">{{n}}</span> |
|
|
|
|
<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">（共10题，合计20分）</p> |
|
|
|
|
<p class="total">（共{{multipleCount}}题，合计{{multipleChoiceScore}}分）</p> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<span v-for="n in 10">{{n}}</span> |
|
|
|
|
<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">（共10题，合计20分）</p> |
|
|
|
|
<p class="total">（共{{judgeCount}}题，合计{{judgeScore}}分）</p> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<span v-for="n in 5">{{n}}</span> |
|
|
|
|
<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">（共10题，合计20分）</p> |
|
|
|
|
<p class="total">（共{{fillBlankCount}}题，合计{{fillBlanksScore}}分）</p> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<span v-for="n in 5">{{n}}</span> |
|
|
|
|
<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">（共10题，合计20分）</p> |
|
|
|
|
<p class="total">（共{{briefAnswerCount}}题，合计{{briefAnswerScore}}分）</p> |
|
|
|
|
<div class="nums"> |
|
|
|
|
<span v-for="n in 5">{{n}}</span> |
|
|
|
|
<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">提交练习</el-button> |
|
|
|
|
<el-button size="mini" type="primary" @click="save">提交练习</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="middle"> |
|
|
|
|
<p class="title">单选题（共10题，合计20分）</p> |
|
|
|
|
<div class="ques"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="name">测试题目测试题目测试题目测试题目测试题目</p> |
|
|
|
|
<div class="options"> |
|
|
|
|
<p class="option">A.单选项</p> |
|
|
|
|
<p class="option">B.单选项</p> |
|
|
|
|
<p class="option">C.单选项</p> |
|
|
|
|
<p class="option">D.单选项</p> |
|
|
|
|
</div> |
|
|
|
|
<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="item"> |
|
|
|
|
<p class="name">测试题目测试题目测试题目测试题目测试题目</p> |
|
|
|
|
<div class="options"> |
|
|
|
|
<p class="option">A.单选项</p> |
|
|
|
|
<p class="option">B.单选项</p> |
|
|
|
|
<p class="option">C.单选项</p> |
|
|
|
|
<p class="option">D.单选项</p> |
|
|
|
|
<template v-if="item.name == '单项选择' || item.name == '判断题'"> |
|
|
|
|
<div class="option" v-for="(option,i) in item.options" :key="i"> |
|
|
|
|
<el-radio v-model="item.val" :label="i"> |
|
|
|
|
{{i}}.{{item.options[i]}} |
|
|
|
|
</el-radio> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template v-if="item.name == '多项选择'"> |
|
|
|
|
<el-checkbox-group v-model="item.val"> |
|
|
|
|
<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"></el-input> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<p class="name">测试题目测试题目测试题目测试题目测试题目</p> |
|
|
|
|
<div class="options"> |
|
|
|
|
<p class="option">A.单选项</p> |
|
|
|
|
<p class="option">B.单选项</p> |
|
|
|
|
<p class="option">C.单选项</p> |
|
|
|
|
<p class="option">D.单选项</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="right"> |
|
|
|
|
<p class="title">剩余时间</p> |
|
|
|
|
<p class="time">00:59:00</p> |
|
|
|
|
<div class="ans">答题进度</div> |
|
|
|
|
<el-progress :percentage="50"></el-progress> |
|
|
|
|
<el-progress :percentage="progress"></el-progress> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import mixins from '@/mixins/setBackground'; |
|
|
|
|
import { mapState,mapGetters,mapActions } from 'vuex' |
|
|
|
|
import mixins from '@/mixins/setBackground' |
|
|
|
|
import util from '@/libs/util' |
|
|
|
|
export default { |
|
|
|
|
mixins: [ mixins ], |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
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 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapState('user', [ |
|
|
|
|
'userId' |
|
|
|
|
]), |
|
|
|
|
...mapState('practice', [ |
|
|
|
|
'practiseId','paperId','isContinue','identification' |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getData() |
|
|
|
|
this.addLeaveEvent() |
|
|
|
|
}, |
|
|
|
|
beforeDestroy(){ |
|
|
|
|
window.onbeforeunload = null |
|
|
|
|
this.addRecords() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData() { |
|
|
|
|
// this.$get(`${this.api.getCourse}/${this.id}`) |
|
|
|
|
// .then(res => { |
|
|
|
|
// let data = res.data.course |
|
|
|
|
// this.name = data.name |
|
|
|
|
// this.classificationId = data.classificationId |
|
|
|
|
// this.description = data.description |
|
|
|
|
// this.coverUrl = data.coverUrl |
|
|
|
|
// this.uploadList.push({ |
|
|
|
|
// name: 'cover.jpg', |
|
|
|
|
// url: this.coverUrl |
|
|
|
|
// }) |
|
|
|
|
// }) |
|
|
|
|
// .catch(err => { |
|
|
|
|
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] |
|
|
|
|
|
|
|
|
|
subjects.forEach((e,i) => { |
|
|
|
|
e.forEach(n => { |
|
|
|
|
if(i == 1){ |
|
|
|
|
this.$set(n,'val',[]) |
|
|
|
|
}else if(i == 3){ |
|
|
|
|
n.questionStem = n.questionStem.replace(/\(\)\(\)\(\)/g,`<input class="input"></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 records = [...res.data.list1,...res.data.list2,...res.data.list3,...res.data.list4,...res.data.list5] |
|
|
|
|
records = records.filter(n => n.user_answer) |
|
|
|
|
let len = 0 |
|
|
|
|
this.subjects.map(n => len += n.length) |
|
|
|
|
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) => { |
|
|
|
|
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 |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
console.log(22,this.subjects) |
|
|
|
|
}).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> |
|
|
|
|
@ -152,21 +339,22 @@ export default { |
|
|
|
|
} |
|
|
|
|
.nums{ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
span{ |
|
|
|
|
width: 24px; |
|
|
|
|
margin: 2px 1px; |
|
|
|
|
line-height: 24px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #888; |
|
|
|
|
font-size: 10px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
border: 1px solid #f8f8f8; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
&.active{ |
|
|
|
|
.active{ |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #e80909; |
|
|
|
|
border-color: #e80909; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -181,30 +369,67 @@ export default { |
|
|
|
|
overflow: auto; |
|
|
|
|
.title{ |
|
|
|
|
padding: 10px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #444; |
|
|
|
|
border-bottom: 1px solid $borderColor; |
|
|
|
|
} |
|
|
|
|
.ques{ |
|
|
|
|
padding: 15px; |
|
|
|
|
.ques-wrap{ |
|
|
|
|
padding: 0 15px; |
|
|
|
|
margin: 10px 0 20px; |
|
|
|
|
} |
|
|
|
|
.item{ |
|
|
|
|
margin: 10px 0 20px; |
|
|
|
|
.name{ |
|
|
|
|
&:first-child{ |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
.name-wrap{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 13px; |
|
|
|
|
color: #444; |
|
|
|
|
.index{ |
|
|
|
|
font-size: 13px; |
|
|
|
|
color: #444; |
|
|
|
|
} |
|
|
|
|
/deep/.input{ |
|
|
|
|
width: 100px; |
|
|
|
|
height: 28px; |
|
|
|
|
padding: 0 5px; |
|
|
|
|
margin: 0 5px; |
|
|
|
|
color: #444; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border: 1px solid #ebebeb; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
&:focus{ |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
&:disabled{ |
|
|
|
|
background-color: #e8e8e8; |
|
|
|
|
cursor: not-allowed; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.options{ |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #8b8b8b; |
|
|
|
|
.option{ |
|
|
|
|
margin: 3px 0; |
|
|
|
|
margin: 5px 0; |
|
|
|
|
&.selected{ |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #555; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.option-check{ |
|
|
|
|
display: block; |
|
|
|
|
margin-right: 6px; |
|
|
|
|
} |
|
|
|
|
/deep/.el-radio__label{ |
|
|
|
|
padding-left: 6px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
