mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-10 11:26:47 +08:00
2022年5月29日 从svn移到git
This commit is contained in:
daihh
318
pages/exam/answer.vue
Normal file
318
pages/exam/answer.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<!--查看答卷-->
|
||||
<view class="">
|
||||
<u-toast ref="messager"></u-toast>
|
||||
<page-title :showBack="true">答卷信息</page-title>
|
||||
<view style="display: flex;justify-content: space-between;padding: 20upx;">
|
||||
<view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
|
||||
<view style="color: #000000;">
|
||||
<text style="font-size: 40upx;">{{toScoreTow(score)}}分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qitem">
|
||||
<view class="qitem-info">[{{getQuestionType(curItem.type)}}]{{curItem.title}}</view>
|
||||
<view v-if="curItem.type == 3">
|
||||
<view class="qitem-opts">
|
||||
<view class="qitem-opt" :class="{check:curItem.answer && curItem.userAnswer}">
|
||||
{{toLetter(1)}}.正确
|
||||
<u-icon v-if="curItem.answer && curItem.userAnswer" name="checkbox-mark" color="#00aa00"></u-icon>
|
||||
</view>
|
||||
<view class="qitem-opt" :class="{check:!curItem.answer && !curItem.userAnswer}">
|
||||
{{toLetter(2)}}.错误
|
||||
<u-icon v-if="!curItem.answer && !curItem.userAnswer" name="checkbox-mark" color="#00aa00"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else v-for="(opt,optIdx) in curItem.optionList" :key="optIdx">
|
||||
<view class="qitem-opts">
|
||||
<view class="qitem-opt" :class="{check:userOptIdxs.indexOf(optIdx)>-1}">
|
||||
{{toLetter(optIdx+1)}}.{{opt.content}}
|
||||
<u-icon v-if="userOptIdxs.indexOf(optIdx)>-1" name="checkbox-mark" color="#00aa00"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
回答结果：
|
||||
<text v-if="curResult" style="color: #00aa00; ">正确</text>
|
||||
<text v-if="!curResult" style="color: #ff0000; ">错误</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="curItem.type == 3 && showAnswer">
|
||||
正确答案：{{curItem && curItem.answer?'正确':'错误'}}
|
||||
</view>
|
||||
<view class="info-row" v-if="curItem.type !== 3 && showAnswer">
|
||||
正确答案：<text v-for="(item,a) in curItem.optionList" :key="a">{{item.isAnswer?toLetter(a+1):''}}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="curItem.analysis">
|
||||
解析：{{curItem.analysis}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 50px;"></view>
|
||||
<view class="bottom-fixed">
|
||||
<view class="bottom-btns">
|
||||
<u-button type="info" text="上一题" @click="prevSub" class="next" v-if="curIndex>0"></u-button>
|
||||
<u-button type="primary" text="下一题" @click="nextSub" class="next" v-if="curIndex<(total-1)"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import apiTestPaper from '@/api/modules/testPaper.js'
|
||||
import { correctJudgment, numberToLetter, examType,toScoreTow } from '@/utils/tools.js';
|
||||
import { formatDate, formatSeconds } from '@/utils/index.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
toScoreTow,
|
||||
answerId:'',
|
||||
viewShowData: [],
|
||||
showAnswer:false,
|
||||
showAnalysis:false,
|
||||
paperDetailData:[],
|
||||
getQuestionType: examType,
|
||||
toLetter: numberToLetter,
|
||||
total:0,
|
||||
score:0,
|
||||
curItem: {},
|
||||
curIndex: 0,
|
||||
curResult:false,//答案正确
|
||||
correctOptIdxs:[],//正确的答案
|
||||
userOptIdxs:[],//用户的答案
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
//console.log(options, 'options')
|
||||
this.answerId = options.id;
|
||||
if(options.showAnswer){
|
||||
this.showAnswer=options.showAnswer=='true'? true:false;
|
||||
}
|
||||
if(options.showAnalysis){
|
||||
this.showAnalysis=options.showAnalysis=='true'? true:false;
|
||||
}
|
||||
if (this.answerId) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() { //加载答卷试信息
|
||||
apiTestPaper.getAnswerDetail(this.answerId).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.score=res.result.score;
|
||||
let answerJson = JSON.parse(res.result.answerJson);
|
||||
let paperJson = JSON.parse(res.result.paperJson);
|
||||
//console.log(answerJson,'answerJson');
|
||||
//console.log(paperJson,'paperJson');
|
||||
let paperQuestions=[];//不包含分页符的试题数组
|
||||
//设置答案
|
||||
paperJson.forEach((qitem , index) => {
|
||||
if(qitem .type<900){
|
||||
let avalue=answerJson[qitem.id];
|
||||
//console.log(avalue,'avalue')
|
||||
if(qitem.type==3){
|
||||
qitem.answer=qitem.answer=='true'? true:false;
|
||||
}
|
||||
if(avalue){
|
||||
if(qitem.type==1){ //单选
|
||||
qitem.userAnswer=avalue;
|
||||
//console.log(qitem,avalue,'单选qitem')
|
||||
}else if(qitem.type==2){ //多选
|
||||
qitem.userAnswer=avalue.split(',');
|
||||
}else if(qitem.type==3){ //判断
|
||||
qitem.userAnswer=avalue=='true'? true:false;
|
||||
}
|
||||
}
|
||||
paperQuestions.push(qitem);
|
||||
}
|
||||
});
|
||||
//设置选中状态及对于错
|
||||
// paperQuestions.forEach((item, index) => {
|
||||
|
||||
// });
|
||||
this.total=paperQuestions.length;
|
||||
this.paperDetailData = paperQuestions;
|
||||
this.curItem = this.paperDetailData[this.curIndex];
|
||||
this.judgeAnswer();
|
||||
} else {
|
||||
this.$refs.messager.show({message:res.message,type:'error'});
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
judgeAnswer(){
|
||||
//正确答案和错误答案
|
||||
this.correctOptIdxs=[];//正确答案
|
||||
this.userOptIdxs=[];//用户的答案
|
||||
|
||||
let $this=this;
|
||||
let item=this.curItem;
|
||||
//console.log(this.curItem,'curItem');
|
||||
if(item.type!=3){
|
||||
item.optionList.forEach((opt,idx)=>{
|
||||
//填充正确答案,判断题不用处理
|
||||
if(opt.isAnswer){
|
||||
$this.correctOptIdxs.push(idx);
|
||||
}
|
||||
if(item.type==1){ //单选
|
||||
if(opt.id==item.userAnswer){
|
||||
$this.userOptIdxs.push(idx);
|
||||
}
|
||||
}else if(item.type==2){ //多选
|
||||
if(item.userAnswer.indexOf(opt.id)>-1){
|
||||
$this.userOptIdxs.push(idx);
|
||||
}
|
||||
}
|
||||
});
|
||||
//console.log(this.userOptIdxs,'userOptIdxs');
|
||||
//判断答案是否正确
|
||||
if(this.correctOptIdxs.toString()==this.userOptIdxs.toString()){
|
||||
this.curResult=true;
|
||||
}else{
|
||||
this.curResult=false;
|
||||
}
|
||||
}else{
|
||||
//判断题
|
||||
if(item.answer==item.userAnswer){
|
||||
this.curResult=true;
|
||||
}else{
|
||||
this.curResult=false;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
prevSub() {
|
||||
if (this.curIndex == 0) {
|
||||
return;
|
||||
}
|
||||
this.curIndex--;
|
||||
if (this.curIndex > -1) {
|
||||
this.curItem = this.paperDetailData[this.curIndex];
|
||||
this.judgeAnswer();
|
||||
}
|
||||
},
|
||||
nextSub() {
|
||||
if (this.curIndex >= (this.total - 1)) {
|
||||
return;
|
||||
}
|
||||
this.curIndex++;
|
||||
this.curItem = this.paperDetailData[this.curIndex];
|
||||
//console.log(this.curItem,'this.curItem')
|
||||
this.judgeAnswer();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.epage {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sta-can {
|
||||
text-align: center;
|
||||
color: red;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.info-row{
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.pager-title {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
padding: 0 20upx;
|
||||
|
||||
.title-name {
|
||||
margin-left: 20upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.titlt-btn {
|
||||
display: flex;
|
||||
|
||||
.sub {
|
||||
height: 20px;
|
||||
border-radius: 40px;
|
||||
margin-top: 10px;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.score-box {
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.sta-btn {
|
||||
margin: 20upx 50upx;
|
||||
}
|
||||
|
||||
.redText {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.column {
|
||||
color: #838383;
|
||||
font-size: 40upx;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.qitem {
|
||||
padding: 10px 20px;
|
||||
|
||||
.qitem-info {
|
||||
font-size: 1.2em;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.qitem-opts {
|
||||
padding: 5px 0px;
|
||||
|
||||
.qitem-opt {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 15px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.check {
|
||||
color: #00aa00;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-fixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 10px 0px;
|
||||
bottom: 00px;
|
||||
.bottom-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.next {
|
||||
width: 45%;
|
||||
border-radius: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user