524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template style="">
|
||
<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
|
||
<public-module></public-module>
|
||
<z-nav-bar title="试卷答案">
|
||
<!-- <text slot="right" style="padding-right: 20rpx; font-size: 26rpx; color: #666;"
|
||
@click="showPopup = true">考试说明</text> -->
|
||
</z-nav-bar>
|
||
<!-- 有考试结果时候 -->
|
||
<template>
|
||
<view class="border_radius_10 haveResult">
|
||
<view class="scoreBox">
|
||
<text class="score PM_font">{{testPaper.score}}分</text>
|
||
</view>
|
||
<view class="otherItems flex_box flex_between">
|
||
<view class="itt">
|
||
<text class="ciyao">总题数</text>
|
||
<text class="mainTxt">{{questionList.length}}</text>
|
||
</view>
|
||
<view class="itt">
|
||
<text class="ciyao">已答</text>
|
||
<text class="mainTxt">{{questionList.length - haveNoAnswerNumber}}</text>
|
||
</view>
|
||
<view class="itt">
|
||
<text class="ciyao">未答</text>
|
||
<text class="mainTxt">{{haveNoAnswerNumber}}</text>
|
||
</view>
|
||
<view class="itt">
|
||
<text class="ciyao">正确率</text>
|
||
<text class="mainTxt">{{rightNumber / questionList.length * 100}} %</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 没有考试结果的时候 -->
|
||
<template>
|
||
<!-- <view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box"
|
||
>
|
||
|
||
</view> -->
|
||
<view class="question border_radius_10" v-if="curQuestion.id">
|
||
<view class="">
|
||
<text class="questionType">{{curQuestion.type == 0 ? '单选题' : '多选题'}}</text>
|
||
|
||
<text style="position: absolute; right: 20rpx; top: 30rpx; z-index: 2;"><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}}
|
||
</i> / {{questionList.length}}</text>
|
||
|
||
<view class="questionItem" v-if="curQuestion.id">
|
||
<view class="">
|
||
<text>{{curQuestion.content}}</text>
|
||
</view>
|
||
<view class="optionsBox">
|
||
<view :class="['item','border_radius_10',
|
||
item.rightWrong == 1 ? 'right' : '',
|
||
checkAnswer(item.id) && item.rightWrong == 0 ? 'wrong' : '',
|
||
checkAnswer(item.id) && item.rightWrong == 1 ? 'right' : ''
|
||
]"
|
||
v-for="(item, index) in curQuestion.options" :key="index">
|
||
<!-- {{checkAnswer(item.id) ? '包含' : '不包含'}} -->
|
||
<view class="flex_box flex_between">
|
||
<text>{{item.content}}</text>
|
||
<text
|
||
v-if="checkAnswer(item.id)">{{item.rightWrong == 1 ? '正确':'错误'}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btnBox " style="overflow: hidden;">
|
||
<view class="flex_box flex_between">
|
||
<view class="item">
|
||
<button @click="showPrevQuestion" type="default" plain="true" :disabled="curIndex1 == 0"
|
||
size="mini">上一题</button>
|
||
</view>
|
||
<view class="item">
|
||
<button @click="showNextQuestion" type="primary"
|
||
:disabled="curIndex1 == questionList.length-1" size="mini">下一题</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-top: 20rpx;">
|
||
<text style="color: #666; font-size: 28rpx;">开始时间：{{testPaper.startTime}} <br/> 结束时间：{{testPaper.endTime}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<u-popup key="1" :show="showPopup" :round="10" @close="hidePopup">
|
||
<view class="guanli">
|
||
<h3>考试说明</h3>
|
||
<view class="tips border_radius_10">
|
||
<text>①、每位学员共有两次考试的机会，考试成绩以两次成绩的最高分作为最终的卷面成绩，请认真对待每次考试;<br />
|
||
②、请在倒计时结束前完成答题，倒计时结束后将自动交卷。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// const paperBack = require('@/data/paperBack.json')
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showPopup: false,
|
||
code: 0, // 英文code
|
||
exameId: undefined,
|
||
testPaper: [],
|
||
curQuestion: {
|
||
answerIds: []
|
||
},
|
||
questionList: [], // 试题列表
|
||
result: {}, // 考试结果
|
||
curIndex1: 0,
|
||
answerIdsList: [],
|
||
haveNoAnswerNumber: 0, // 未作答数量
|
||
rightNumber: 0 // 答题正确个数
|
||
}
|
||
},
|
||
async onLoad(e) {
|
||
console.log('收到得值', e);
|
||
this.exameId = e.id
|
||
this.getTestPage()
|
||
},
|
||
onHide() {},
|
||
onShow() {},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
// getallLIst() {
|
||
// const numbers = Array.from(Array(100).keys(), n => n + 1);
|
||
// console.log('numbers', numbers);
|
||
// return numbers
|
||
// }
|
||
},
|
||
methods: {
|
||
checkAnswer(id){
|
||
var _list = [...this.answerIdsList]
|
||
var _list1 = []
|
||
_list = _list.map( item => {
|
||
return item.split(',')
|
||
})
|
||
for (var i = 0; i < _list.length; i++) {
|
||
for (var j = 0; j < _list[i].length; j++) {
|
||
if(id == _list[i][j]){
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
return false
|
||
},
|
||
getNoAnswerList() {
|
||
var list = []
|
||
if (this.curIndex1 > 0) {
|
||
for (var i = 0; i < this.curIndex1; i++) {
|
||
if (this.testPaper[i].answerIds.length == 0) {
|
||
console.log('fuhe?');
|
||
list.push(i)
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
},
|
||
gethaveAnswerList() {
|
||
var list = []
|
||
if (this.curIndex1 > 0) {
|
||
for (var i = 0; i < this.curIndex1; i++) {
|
||
if (this.testPaper[i].answerIds.length > 0) {
|
||
console.log('fuhe?');
|
||
list.push(i)
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
},
|
||
|
||
// 获取交卷数据
|
||
sumitAnswer() {
|
||
this.sumbitPaper()
|
||
},
|
||
showPrevQuestion() {
|
||
// 上一题
|
||
this.curIndex1--
|
||
// this.curQuestion.answerIds = []
|
||
this.curQuestion = {
|
||
...this.questionList[this.curIndex1]
|
||
}
|
||
// console.log('----------------', this.testPaper );
|
||
// this.haveAnswerList = this.gethaveAnswerList()
|
||
},
|
||
showNextQuestion() {
|
||
// 下一题
|
||
this.curIndex1++
|
||
// this.curQuestion.answerIds = []
|
||
this.curQuestion = {
|
||
...this.questionList[this.curIndex1]
|
||
}
|
||
|
||
},
|
||
setDesc() {
|
||
const letterArr = []
|
||
// 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
|
||
for (let i = 65; i < 91; i++) {
|
||
letterArr[i] = String.fromCharCode(i)
|
||
}
|
||
return letterArr
|
||
},
|
||
getTestPage() {
|
||
uni.showLoading({
|
||
title: '正在展开试卷'
|
||
})
|
||
$http.request({
|
||
url: "common/classExam/getExamPaperInfo",
|
||
method: "POST",
|
||
data: {
|
||
"id": this.exameId
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
// that.isHave = true
|
||
var subOptions = JSON.parse(res.examPaper.subject)
|
||
subOptions.forEach(item => {
|
||
var code = 0
|
||
item.options.forEach(item1 => {
|
||
const randomAbc = this.setDesc().splice(65)
|
||
item1.content = randomAbc[code] + '、' + item1.content
|
||
code++
|
||
})
|
||
})
|
||
|
||
this.questionList = subOptions
|
||
|
||
console.log('this.questionListthis.questionListthis.questionList', this.questionList)
|
||
this.testPaper = res.examPaper
|
||
console.log('试卷信息', this.testPaper);
|
||
this.answerIdsList = JSON.parse(res.examPaper.answer)
|
||
var newList = JSON.parse(res.examPaper.answer)
|
||
newList = newList.map(item => {
|
||
// console.log('item.substring(0,item.length - 2)',item.substring(0,item.length - 2));
|
||
return item.substr(item.length - 1)
|
||
})
|
||
this.rightNumber = 0
|
||
newList.forEach(item => {
|
||
if (item == '1') {
|
||
this.rightNumber += 1
|
||
}
|
||
})
|
||
console.log('newList', newList);
|
||
this.answerIdsList = this.answerIdsList.map(item => {
|
||
// console.log('item.substring(0,item.length - 2)',item.substring(0,item.length - 2));
|
||
return item.substring(0, item.length - 2)
|
||
})
|
||
this.haveNoAnswerNumber = 0
|
||
this.answerIdsList.forEach(item => {
|
||
if (item == '') {
|
||
this.haveNoAnswerNumber += 1
|
||
}
|
||
})
|
||
// this.examId = res.id
|
||
this.curQuestion = {
|
||
...this.questionList[this.curIndex1]
|
||
}
|
||
console.log('subOptions', subOptions, 'answerIdsList', this.answerIdsList);
|
||
// console.log(questionList, '试卷', this.curQuestion)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.errMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: e.errMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
});
|
||
},
|
||
|
||
goToClass() {
|
||
uni.navigateTo({
|
||
url: `/pages/miniClass/classInfo?id=${this.classId}`
|
||
})
|
||
},
|
||
hidePopup() {
|
||
this.showPopup = false
|
||
},
|
||
clickIndex(val) {
|
||
this.curIndex1 = val - 1
|
||
console.log('val', val, this.curIndex1, this.testPaper.length);
|
||
this.curQuestion = this.testPaper[this.curIndex1]
|
||
this.noAnswerList = this.getNoAnswerList()
|
||
this.haveAnswerList = this.gethaveAnswerList()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
|
||
.questIndx {
|
||
overflow: hidden;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
span {
|
||
padding: 20rpx 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.red {
|
||
border-color: #f56c6c;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.green {
|
||
border-color: #67c23a;
|
||
color: #67c23a;
|
||
}
|
||
|
||
text {
|
||
background-color: #fff;
|
||
padding: 6rpx 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
align-items: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.cur {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.guanli {
|
||
padding: 40rpx;
|
||
|
||
h3 {
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
background: #fbe8e8;
|
||
color: #f56c6c;
|
||
line-height: 50rpx;
|
||
font-size: 28rpx;
|
||
padding: 10rpx 20rpx;
|
||
text-align: justify;
|
||
}
|
||
|
||
.questionType {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 20rpx;
|
||
background-color: $themeColor;
|
||
color: #fff;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 0 50rpx 50rpx 0;
|
||
}
|
||
|
||
.scroll-Y {
|
||
height: 300rpx;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item {
|
||
// height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.scroll-view-item_H {
|
||
display: inline-block;
|
||
width: 13%;
|
||
// height: 300rpx;
|
||
overflow: hidden;
|
||
// line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.haveResult {
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.scoreBox {
|
||
overflow: hidden;
|
||
color: #333; margin:20rpx 0;
|
||
}
|
||
|
||
.score {
|
||
|
||
color: $themeColor;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.question {
|
||
padding: 20rpx;
|
||
padding-top: 100rpx;
|
||
background-color: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.otherItems {
|
||
// border: 1px solid #dadada;
|
||
|
||
text-align: center;
|
||
// background-color: rgba(255, 255, 255, .5);
|
||
border-radius: 20rpx;
|
||
justify-content: space-around;
|
||
|
||
.itt {
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.ciyao {
|
||
color: #999;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
|
||
.optionsBox {
|
||
margin: 30rpx 0;
|
||
|
||
.item {
|
||
border: 1px solid #eee;
|
||
padding: 16rpx 12rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.right {
|
||
border-color: #c2e7b0;
|
||
color: #67c23a;
|
||
background-color: #fef0f0;
|
||
}
|
||
|
||
.wrong {
|
||
border-color: #fbc4c4;
|
||
color: #f56c6c;
|
||
background-color: #f0f9eb;
|
||
}
|
||
|
||
.choosed {
|
||
border-color: #b3d8ff;
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.right {
|
||
border-color: #c2e7b0;
|
||
color: #67c23a;
|
||
background-color: #f0f9eb;
|
||
}
|
||
|
||
.wrong {
|
||
border-color: #fbc4c4;
|
||
color: #f56c6c;
|
||
background-color: #fef0f0;
|
||
}
|
||
}
|
||
|
||
.result_imgBox {
|
||
width: 100%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.timeBox {
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.questIndx {
|
||
.cur {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btnBox {
|
||
.item {
|
||
width: 40%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |