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.
253 lines
12 KiB
253 lines
12 KiB
<template> |
|
<div> |
|
<breadcrumb :data="'我的练习/练习'"></breadcrumb> |
|
<div class="box"> |
|
<div class="page left"> |
|
<div> |
|
<div class="item" style="border-top: 0"> |
|
<p class="type">单选题(共{{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">多选题(共{{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">判断题(共{{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">填空题(共{{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">简答题(共{{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> |
|
|
|
<div class="page right"> |
|
<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"> |
|
<div class="ques" 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> |
|
</div> |
|
</template> |
|
</div> |
|
</div> |
|
|
|
<el-dialog title="成绩详情" :visible.sync="resultVisible" width="30%" :close-on-click-modal="false" :show-close="false"> |
|
<el-table :data="resultData"> |
|
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column> |
|
<el-table-column label="正误" min-width="45" align="center"> |
|
<template slot-scope="scope"> |
|
<img v-if="scope.row.true" src="../../../assets/img/true.png" alt=""> |
|
<img v-else src="../../../assets/img/false.png" alt=""> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column> |
|
<el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column> |
|
<el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column> |
|
</el-table> |
|
<div slot="footer" class="dialog-footer"> |
|
<el-button type="primary" size="small" @click="back">返回</el-button> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import { mapState,mapGetters,mapActions } from 'vuex' |
|
import examDo from '@/mixins/examDo' |
|
import util from '@/libs/util' |
|
import breadcrumb from '@/components/breadcrumb' |
|
export default { |
|
mixins: [ examDo ], |
|
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: ['单选题','多选题','判断题','填空题','简答题'], |
|
resultVisible: false, |
|
resultData: [] |
|
}; |
|
}, |
|
components: {breadcrumb}, |
|
computed: { |
|
...mapState('user', [ |
|
'userId','clientId' |
|
]), |
|
...mapState('wrongBook', [ |
|
'qid','type' |
|
]), |
|
}, |
|
beforeDestroy(){ |
|
window.updateProgress = null |
|
}, |
|
mounted() { |
|
this.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
if(this.qid){ |
|
this.$post(`${this.api.previewPaper}?qid=${this.qid}`) |
|
.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 |
|
}).catch(err => {}) |
|
} |
|
}, |
|
save(){ |
|
let subjects = this.subjects |
|
let result = [] |
|
subjects.map((e,i) => { |
|
e.map((n,k) => { |
|
let right = true |
|
let val = n.val |
|
let answer = n.answer |
|
if(n.name == '单项选择' || n.name == '判断题'){ |
|
if(val != n.answer) right = false |
|
}else if(n.name == '多项选择'){ |
|
val = n.val.join('') |
|
if(val != n.answer) right = false |
|
}else if(n.name == '填空题'){ |
|
let options = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value) |
|
let answers = [] |
|
for(let i in n.options){ |
|
answers.push(n.options[i]) |
|
} |
|
answers.map((n,i) => { |
|
if(n != options[i]) right = false |
|
}) |
|
val = options.filter(n => n).join() |
|
answer = answers.join() |
|
} |
|
// if(right) this.$post(`${this.api.removes}?qid=${quesInfo.questionId}&userId=${this.userId}&type=${this.type}`).then(res => {}).catch(err => {}) |
|
result.push({ |
|
true: right, |
|
answer: answer, |
|
userAnswer: val, |
|
answerAnalysis: n.answerAnalysis, |
|
}) |
|
}) |
|
}) |
|
this.resultData = result |
|
this.resultVisible = true |
|
}, |
|
back(){ |
|
this.$router.back() |
|
} |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "@/styles/pages/exam.scss"; |
|
</style> |