mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
468 lines
11 KiB
Vue
468 lines
11 KiB
Vue
<template>
|
||
<!--考试试卷详细信息，考试过的试卷内容-->
|
||
<view style="padding-bottom: 60px;">
|
||
<u-toast ref="messager"></u-toast>
|
||
<page-title :showBack="true">查看我的答卷</page-title>
|
||
<view style="background-color: #FFFFFF;">
|
||
<u-cell-group>
|
||
<u-cell title="答卷时间" :value="answerSurveyTime"></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">
|
||
<view>[{{ getTypeName(curItem.type) }}]{{ curItem.content }}</view>
|
||
<view class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></view>
|
||
</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 v-if="opt.images" class="qimg">
|
||
<img class="qimg-fit" :src="imageBaseUrl+opt.images"/>
|
||
</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 config from '@/config/index.js'
|
||
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,
|
||
imageBaseUrl: config.fileUrl,
|
||
paper: {
|
||
items: []
|
||
},
|
||
total: 0,
|
||
curIndex: 0,//当前试题索引
|
||
curItem: {},//当前试题
|
||
curResult: false,//答案正确
|
||
score: 0,//本次试卷的得分
|
||
testName: '',
|
||
contentId: '',
|
||
courseId: '',
|
||
passLine: 60,
|
||
testDuration: 0,
|
||
lastTime: '',
|
||
correctOptIdxs: [],//正确的答案
|
||
userOptIdxs: [],//用户的答案
|
||
}
|
||
},
|
||
computed: {
|
||
answerSurveyTime() {
|
||
console.log(`answer time: ` , this.lastTime)
|
||
if (!this.lastTime.length) return "Error Date"
|
||
const [y, m, d, h, min, s] = this.lastTime
|
||
return `${y}年${m}月${d}日 ${h}:${min}:${s}`
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
|
||
.qimg {
|
||
//padding-left: 30px;
|
||
width: 100%;
|
||
text-align: left;
|
||
|
||
.qimg-fit {
|
||
width: 100%;
|
||
|
||
object-fit: scale-down
|
||
}
|
||
}
|
||
</style>
|