<template>
|
<view class="page">
|
<u-toast ref="uToast" />
|
<view class="top-bg">
|
<u-navbar :is-back="true" title=" " :border-bottom="false" :custom-back="customBack">
|
<view class="top-tool">
|
<view class="item" @click="model='exam'" :class="model=='exam'?'item-active':''"
|
style="border-right: none;border-radius: 25rpx 0 0 25rpx;">
|
答题
|
</view>
|
<view class="item" @click="model='look'" :class="model=='look'?'item-active':''"
|
style="border-left: none;border-radius:0 25rpx 25rpx 0">
|
解析
|
</view>
|
</view>
|
</u-navbar>
|
<view class="top-info">
|
<view class="chapter-name u-line-1">
|
{{title}}
|
</view>
|
<view class="count" @click="answerCardHide= !answerCardHide">
|
<u-icon name="grid" size="32" style="margin-right: 10rpx;"></u-icon>
|
{{currentIndex+1}}/{{list.length}}
|
</view>
|
</view>
|
</view>
|
<view class="swiper-box" :style="{ top: 93 + statusBarHeight + 'px' }">
|
<pw-swiper ref="swiper" :list="list" :getPreviousHandler="gph" :getNextHandler="gnh"
|
:dataIndex="currentIndex" @change="change">
|
<template v-slot:default="{item,index}">
|
<view class="question">
|
<view class="tool-tip">
|
<view class="type">
|
({{item.type|category}})
|
</view>
|
</view>
|
<view class="title">
|
<mp-html :content="item.title"></mp-html>
|
</view>
|
|
|
<!-- 单选 -->
|
<view class="accessories" v-if="item.type=='1'||item.type=='3'">
|
<view class="item" @click="chosed(a_index,a_item.isRight,item,item.type)"
|
v-for="(a_item,a_index) in item.answerList" :key="a_index">
|
<view class="icon" :class="{'choice':a_index==answercard[item._id].a}">
|
{{a_index|letter}}
|
</view>
|
<view class="text">
|
<mp-html :content="a_item.content"></mp-html>
|
</view>
|
</view>
|
</view>
|
|
<!-- 多选 -->
|
<view class="accessories" v-if="item.type=='2'">
|
<view class="item" @click="chosed(a_index,a_item.isRight,item,item.type)"
|
v-for="(a_item,a_index) in item.answerList" :key="a_index">
|
<view class="icon"
|
:class="{'choice':answercard[item._id].a&&answercard[item._id].a.indexOf(a_index)!=-1}">
|
{{a_index|letter}}
|
</view>
|
<view class="text">
|
<mp-html :content="a_item.content"></mp-html>
|
</view>
|
</view>
|
</view>
|
<!-- 无需作答 -->
|
<view class="accessories" v-if="item.type=='4'||item.type=='5'">
|
<view class="item" style="justify-content: center;">
|
<view class="text" style="color: #3c7cfc;">
|
本题不支持作答，请自行核对答案并查看解析
|
</view>
|
</view>
|
</view>
|
<view class="analysis" v-if="model=='look'">
|
<u-section title="答 案 解 析" :font-size="30" :right="false" :line-color="'#005CFF'"
|
:color="'#313133'"></u-section>
|
<view class="content">
|
<mp-html :content="item.analysis"></mp-html>
|
</view>
|
<!-- 选项解析 -->
|
<view class="accessories">
|
<view class="item" v-for="(a_item,a_index) in item.answerList" :key="a_index"
|
v-if="a_item.analysis!=''">
|
<view class="text">
|
{{a_item.analysis}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</pw-swiper>
|
</view>
|
<!-- 答题卡 -->
|
<view class="answer-card" :class="answerCardHide?'answer-card-hide':''">
|
<view class="item-box">
|
<view class="item"
|
:class="{'choice':model=='exam'&&answercard[item._id].r!=0,'no':model=='look'&&answercard[item._id].r==2,'yes':model=='look'&&answercard[item._id].r==1}"
|
@click="currentIndex=index;answerCardHide=true" v-for="(item,index) in list">{{index+1}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
let that
|
let systemInfo = uni.getSystemInfoSync()
|
import pwSwiper from "../../components/pw-swiper/pw-swiper"
|
export default {
|
components: { pwSwiper },
|
data() {
|
return {
|
cid: null,
|
bank_id: null,
|
title: null,
|
statusBarHeight: systemInfo.statusBarHeight,
|
list: [],
|
currentIndex: 0,
|
model: 'exam',
|
answerCardHide: true,
|
answercard: {}, //留有最新结果的答题版
|
answercardNew: {}, //本次答的题目，用于统计
|
hasSubmit: false
|
};
|
},
|
onLoad(options) {
|
that = this
|
this.cid = options.cid
|
this.bank_id = options.bank_id
|
this.title = options.title
|
this.getQuestions()
|
},
|
onUnload() {
|
//页面卸载时提交答题情况
|
if (!this.hasSubmit)
|
this.saveAnswercard()
|
},
|
filters: {
|
letter(val) {
|
const arr = ['A', "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
|
"T",
|
"U", "V", 'W', "X", "Y", "Z"
|
]
|
return arr[val]
|
},
|
category(val) {
|
const catType = {
|
'1': "单选",
|
'2': "多选",
|
'3': "判断",
|
'4': "问答",
|
'5': "填空"
|
}
|
return catType[val]
|
}
|
},
|
methods: {
|
customBack() {
|
uni.showLoading({
|
title: "保存中..."
|
})
|
//提交并返回
|
this.saveAnswercard().then(v => {
|
this.hasSubmit = true
|
uni.hideLoading()
|
uni.navigateBack({
|
delta: 1
|
})
|
})
|
},
|
//提交答题情况
|
saveAnswercard() {
|
return uni.vk.callFunction({
|
url: 'client/q_bank/kh/save_answer',
|
data: {
|
bank_id: this.bank_id,
|
chapter_id: this.cid,
|
answercard: this.answercard,
|
answercardNew: this.answercardNew
|
},
|
})
|
},
|
//获取题目
|
getQuestions() {
|
uni.showLoading({
|
title: "准备中..."
|
})
|
uni.vk.callFunction({
|
url: 'client/q_bank/kh/get_questions_by_chapter',
|
data: {
|
bank_id: this.bank_id,
|
cid: this.cid
|
},
|
success(data) {
|
that.list = data.questions.rows
|
//处理答题版
|
let temp = {}
|
data.questions.rows.forEach(v => {
|
//取出历史答题卡 把历史内容更新到最新答题卡上
|
if (data.answercard != null && data.answercard.answercard[v._id] != null) {
|
temp[v._id] = data.answercard.answercard[v._id]
|
} else {
|
temp[v._id] = {
|
a: null, //答题结果
|
r: 0, //答题状态 0 未答 1 对 2 错
|
}
|
}
|
|
})
|
|
//展示
|
that.answercard = temp
|
uni.hideLoading()
|
},
|
fail(e) {
|
that.$refs.uToast.show({
|
title: e.msg
|
})
|
}
|
});
|
},
|
chosed(s, isRight, question, type) {
|
let res = this.answercard[question._id]
|
//选项下标 题目下标 题目类型
|
if (type == 2) {
|
//多选
|
if (res.a == null) {
|
//第一次选择
|
res.a = [s]
|
} else {
|
//判断是选中还是取消
|
const find_index = res.a.indexOf(s)
|
if (find_index > -1) {
|
res.a.splice(find_index, 1)
|
} else {
|
res.a.push(s)
|
}
|
}
|
//判断答案是否正确
|
let my_choice = res.a.sort(function(a, b) {
|
return a - b
|
}).join(',')
|
|
//取标准答案
|
let answerArr = []
|
question.answerList.forEach((item, index) => {
|
if (item.isRight)
|
answerArr.push(index)
|
});
|
let answer_str = answerArr.sort(function(a, b) {
|
return a - b
|
}).join(',')
|
|
res.r = my_choice == answer_str ? 1 : 2
|
|
} else if (type == 1 || type == 3) {
|
//单选 判断
|
res = {
|
a: s,
|
r: isRight ? 1 : 2,
|
}
|
}
|
|
//更新答题版
|
this.$set(this.answercard, question._id, res)
|
//追加做题记录
|
this.answercardNew[question._id] = res
|
},
|
gph() {},
|
gnh() {},
|
change(e) {
|
this.currentIndex = e
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page,
|
.page {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
.swiper-box {
|
position: absolute;
|
width: 100%;
|
bottom: 0;
|
left: 0;
|
}
|
|
.body {
|
width: 100%;
|
height: 100%;
|
// background: #007AFF;
|
}
|
|
.top-bg {
|
position: fixed;
|
background: #FFFFFF;
|
top: 0;
|
left: 0;
|
width: 750rpx;
|
z-index: 10;
|
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.05);
|
|
.top-tool {
|
position: relative;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 50rpx;
|
/* #ifdef MP */
|
padding-left: 112rpx;
|
/* #endif */
|
/* #ifndef MP */
|
padding-right: 36rpx;
|
/* #endif */
|
|
.item {
|
/* #ifdef MP */
|
width: 33%;
|
/* #endif */
|
/* #ifndef MP */
|
width: 25%;
|
/* #endif */
|
height: 100%;
|
line-height: 50rpx;
|
border: 1rpx solid #efefef;
|
text-align: center;
|
letter-spacing: 4rpx;
|
}
|
|
.item-active {
|
color: #FFFFFF;
|
// font-weight: bold;
|
background-color: rgba($color: #005CFF, $alpha: 0.9);
|
border: 1rpx solid rgba($color: #005CFF, $alpha: 0.9);
|
}
|
}
|
}
|
|
.top-info {
|
width: 100%;
|
height: 90rpx;
|
border-top: 1rpx solid #ECECEC;
|
border-bottom: 1rpx solid #ECECEC;
|
background: #FFFFFF;
|
padding: 0 20rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.chapter-name {
|
width: 580rpx;
|
overflow: hidden;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
letter-spacing: 1rpx;
|
}
|
|
.count {
|
width: 120rpx;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
|
.question {
|
padding: 20rpx;
|
background: #FFFFFF;
|
|
.tool-tip {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 44rpx;
|
|
.type {
|
font-size: 28rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 600;
|
color: #005CFF;
|
line-height: 44rpx;
|
margin-bottom: 10rpx;
|
letter-spacing: 2rpx;
|
}
|
}
|
|
|
.title {
|
font-size: 30rpx !important;
|
font-weight: 500 !important;
|
color: #333333;
|
text-align: justify !important;
|
}
|
|
.accessories {
|
background: #FFFFFF;
|
margin-top: 10rpx;
|
|
.item {
|
width: 100%;
|
height: 100rpx;
|
border-bottom: 1rpx dashed #ECECEC;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding: 0 20rpx;
|
|
.icon {
|
width: 46rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
margin-right: 20rpx;
|
border-radius: 23rpx;
|
color: #afafaf;
|
border: 2rpx solid #afafaf;
|
text-align: center;
|
}
|
|
.text {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 40rpx;
|
}
|
}
|
}
|
}
|
|
.answer-card {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
height: 60vh;
|
width: 750rpx;
|
z-index: 20;
|
background: #FFFFFF;
|
margin-top: 20rpx;
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
border-radius: 30rpx 30rpx 0 0;
|
transition: height 0.4s ease;
|
padding: 20rpx 40rpx;
|
overflow-y: scroll;
|
|
.item-box {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
|
.item {
|
width: 65rpx;
|
height: 65rpx;
|
line-height: 65rpx;
|
margin: 15rpx;
|
border-radius: 50%;
|
color: #afafaf;
|
border: 2rpx solid #afafaf;
|
text-align: center;
|
}
|
}
|
|
}
|
|
.no {
|
color: #FFFFFF !important;
|
background: #FF6944 !important;
|
border: 2rpx solid #FF5C31 !important;
|
}
|
|
.yes {
|
color: #FFFFFF !important;
|
background: #4AD746 !important;
|
border: 2rpx solid #00DC1C !important;
|
}
|
|
.choice {
|
color: #FFFFFF !important;
|
background: #005CFF !important;
|
border: 2rpx solid #005CFF !important;
|
}
|
|
.analysis {
|
background: #FFFFFF;
|
margin-top: 20rpx;
|
padding: 20rpx;
|
|
.content {
|
margin-top: 20rpx;
|
font-size: 30rpx !important;
|
font-weight: 500 !important;
|
color: #333333;
|
text-align: justify !important;
|
}
|
}
|
|
.answer-card-hide {
|
height: 0rpx !important;
|
bottom: -60rpx;
|
}
|
</style>
|
