mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
396 lines
11 KiB
Vue
396 lines
11 KiB
Vue
<template>
|
||
<!--考试试卷详细信息，考试过的试卷内容-->
|
||
<view>
|
||
<u-toast ref="messager"></u-toast>
|
||
<page-title :showBack="true">查看我的答卷</page-title>
|
||
<view style="background-color: #FFFFFF;">
|
||
<u-cell-group>
|
||
<u-cell title="答卷时间" :value="lastTime"></u-cell>
|
||
<u-cell title="答卷用时" :value="testDuration+'秒'"></u-cell>
|
||
<u-cell title="本次得分" :value="score"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
<view style="padding: 20upx;">
|
||
<view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
|
||
</view>
|
||
<view class="qitem">
|
||
<view class="qitem-content">[{{getTypeName(curItem.type)}}]{{curItem.content}}</view>
|
||
<view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt" :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
|
||
<view>
|
||
<view>{{toLetter(optIdx+1)}}, {{opt.content}}</view>
|
||
</view>
|
||
<view>
|
||
<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√</text>
|
||
<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tit">试题答案</view>
|
||
<view class="answer">
|
||
<view class="result">
|
||
<text v-if="curResult" style="color: #00aa00; ">回答正确</text>
|
||
<text v-else style="color: #ff0000; ">回答错误</text>
|
||
</view>
|
||
<view class="wrought">
|
||
<view class="correct-response">
|
||
<view class="response-tit">正确答案</view>
|
||
<view class="response-sels">
|
||
<text v-for="op in correctOptIdxs" :key="op">{{toLetter(op+1)}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="wrong-response">
|
||
<view class="wrong-tit">我的答案</view>
|
||
<view class="wrong-sels">
|
||
<text v-for="op in userOptIdxs" :key="op">{{toLetter(op+1)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="analysis">解析</view>
|
||
<view class="analysis-con">联言判断就是断定集中事物情况同时存在的判断,因此该判断属于联言判断,答案为A</view> -->
|
||
<view class="bottom-btns">
|
||
<u-button type="info" text="上一题" @click="prevSub" class="next" :disabled="this.curIndex<1"></u-button>
|
||
<u-button type="info" text="下一题" @click="nextSub" class="next" :disabled="this.curIndex>=(this.total-1)"></u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiCourseStudy from '@/api/modules/courseStudy.js'
|
||
import {formatDate,getQuestionType,correctJudgment,numberToLetter} from '@/utils/tools.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
recordId:'',//保存的考试记录的id
|
||
toLetter:numberToLetter,
|
||
getTypeName:getQuestionType,
|
||
paper:{
|
||
items:[]
|
||
},
|
||
total:0,
|
||
curIndex:0,//当前试题索引
|
||
curItem:{},//当前试题
|
||
curResult:false,//答案正确
|
||
score:0,//本次试卷的得分
|
||
testName:'',
|
||
contentId:'',
|
||
courseId:'',
|
||
passLine:60,
|
||
testDuration:0,
|
||
lastTime:'',
|
||
correctOptIdxs:[],//正确的答案
|
||
userOptIdxs:[],//用户的答案
|
||
}
|
||
},
|
||
onLoad(options){
|
||
//如果id不存在，应该返回错误页面
|
||
this.recordId=options.id;//当前考试记录的id
|
||
if(this.recordId){
|
||
this.loadAnswerPaper();
|
||
}
|
||
},
|
||
methods:{
|
||
loadAnswerPaper(){
|
||
apiCourseStudy.myExamPaper(this.recordId).then(res=>{
|
||
if(res.status==200){
|
||
this.lastTime=res.result.lastTime;
|
||
this.score=res.result.score;
|
||
this.contentId=res.result.contentId;
|
||
this.courseId=res.result.courseId;
|
||
this.passLine=res.result.passLine;
|
||
this.testDuration=res.result.testDuration;
|
||
if(res.result.paper==''){
|
||
this.$refs.messager.show({message:res.message,type:'error'});
|
||
}else{
|
||
this.paper=JSON.parse(res.result.paper);
|
||
this.total=this.paper.items.length;
|
||
this.curItem=this.paper.items[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;
|
||
item.options.forEach((opt,idx)=>{
|
||
//填充正确答案
|
||
if(opt.answer){
|
||
$this.correctOptIdxs.push(idx);
|
||
}
|
||
if(item.type!=102){ //单选或判断
|
||
if(opt.id==item.userAnswer){
|
||
$this.userOptIdxs.push(idx);
|
||
}
|
||
}else{ //多选
|
||
if(item.userAnswer.indexOf(opt.id)>-1){
|
||
$this.userOptIdxs.push(idx);
|
||
}
|
||
}
|
||
});
|
||
//判断答案是否正确
|
||
if(this.correctOptIdxs.toString()==this.userOptIdxs.toString()){
|
||
this.curResult=true;
|
||
}else{
|
||
this.curResult=false;
|
||
}
|
||
},
|
||
prevSub(){
|
||
if(this.curIndex==0){
|
||
return;
|
||
}
|
||
this.curIndex--;
|
||
if(this.curIndex>-1){
|
||
this.curItem=this.paper.items[this.curIndex];
|
||
this.judgeAnswer();
|
||
}
|
||
},
|
||
nextSub() {
|
||
this.curIndex++;
|
||
if(this.curIndex<this.total){
|
||
this.curItem=this.paper.items[this.curIndex];
|
||
this.judgeAnswer();
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bottom-btns{
|
||
padding: 10px;
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.qitem{
|
||
padding: 20upx 40upx;
|
||
.qitem-content{
|
||
padding: 20upx 0upx;
|
||
}
|
||
.qitem-opt{
|
||
margin-bottom: 20upx;
|
||
min-height: 50upx;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
justify-content: space-between;
|
||
padding: 30upx 20upx;
|
||
}
|
||
.qitem-opt-user{
|
||
background-color: #fff3e5;
|
||
}
|
||
.qitem-opt-correct{
|
||
background-color: #5BA2FC;
|
||
color:#FFFFFF;
|
||
}
|
||
.qitem-opt-wrong{
|
||
background-color: #EF826B;
|
||
color:#FFFFFF;
|
||
}
|
||
}
|
||
.ed-top{
|
||
display: flex;
|
||
.preface{
|
||
color: #D5D5D5;
|
||
margin-left: 16px;
|
||
margin-top: 19px;
|
||
}
|
||
.mold{
|
||
font-size: 12px;
|
||
color: #C1C1C1;
|
||
margin-top: 22px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.ed-center{
|
||
.topic{
|
||
color: #2E2E2E;
|
||
margin-left: 16px;
|
||
margin-top: 10px;
|
||
}
|
||
.topic-center{
|
||
&-1{
|
||
width: 344px;
|
||
height: 64px;
|
||
border-radius: 4px;
|
||
background: #5BA2FC;
|
||
margin-left: 16px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.topic_left{
|
||
line-height: 64px;
|
||
margin-left: 16px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
.liany{
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.topic_right{
|
||
color: #FFFFFF;
|
||
line-height: 64px;
|
||
margin-right: 13px;
|
||
}
|
||
}
|
||
&-2{
|
||
width: 344px;
|
||
height: 64px;
|
||
border-radius: 4px;
|
||
background: #EF826B;
|
||
margin-left: 16px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.topic_left{
|
||
line-height: 64px;
|
||
margin-left: 16px;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
.liany{
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.topic_right{
|
||
color: #FFFFFF;
|
||
line-height: 64px;
|
||
margin-right: 13px;
|
||
}
|
||
}
|
||
&-3{
|
||
width: 344px;
|
||
height: 64px;
|
||
border-radius: 4px;
|
||
background: #FFFFFF;
|
||
margin-left: 16px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.topic_left{
|
||
line-height: 64px;
|
||
margin-left: 16px;
|
||
color: #000000;
|
||
display: flex;
|
||
.liany{
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.topic_right{
|
||
color: #000000;
|
||
line-height: 64px;
|
||
margin-right: 13px;
|
||
}
|
||
}
|
||
&-4{
|
||
width: 344px;
|
||
height: 64px;
|
||
border-radius: 4px;
|
||
background: #FFFFFF;
|
||
margin-left: 16px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.topic_left{
|
||
line-height: 64px;
|
||
margin-left: 16px;
|
||
color: #000000;
|
||
display: flex;
|
||
.liany{
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.topic_right{
|
||
color: #000000;
|
||
line-height: 64px;
|
||
margin-right: 13px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.tit{
|
||
color: #333333;
|
||
margin-left: 14px;
|
||
margin-top: 38px;
|
||
}
|
||
.answer{
|
||
width: 346px;
|
||
height: 112px;
|
||
background: #FFFFFF;
|
||
margin-left: 14px;
|
||
margin-top: 18px;
|
||
.result{
|
||
font-size: 12px;
|
||
color: #EF826B;
|
||
padding-left: 20px;
|
||
padding-top: 10px;
|
||
}
|
||
.wrought{
|
||
display: flex;
|
||
.correct-response{
|
||
width: 87px;
|
||
height: 70px;
|
||
.response-tit{
|
||
font-size: 14px;
|
||
color: #B3B3B3;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
}
|
||
.response-sels{
|
||
color: #5B5B5B;
|
||
text-align: center;
|
||
padding-top: 8px;
|
||
}
|
||
}
|
||
.wrong-response{
|
||
width: 87px;
|
||
height: 70px;
|
||
.wrong-tit{
|
||
font-size: 14px;
|
||
color: #B3B3B3;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
}
|
||
.wrong-sels{
|
||
color: #5B5B5B;
|
||
text-align: center;
|
||
padding-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.analysis{
|
||
font-size: 14px;
|
||
color: #D3D3D3;
|
||
margin-left: 14px;
|
||
margin-top: 20px;
|
||
}
|
||
.analysis-con{
|
||
font-size: 12px;
|
||
color: #000000;
|
||
margin-left: 14px;
|
||
margin-top: 10px;
|
||
}
|
||
.question{
|
||
height: 52px;
|
||
background: #EF826B;
|
||
margin-top: 93px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 52px;
|
||
}
|
||
</style>
|