You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
8.7 KiB
328 lines
8.7 KiB
9 months ago
|
<template>
|
||
|
|
<BaseContainer>
|
||
|
|
<NavBar title="考题答题" />
|
||
|
|
<view class="question-paper" v-if="question.id">
|
||
|
|
<view class="swiper-container pos">
|
||
|
|
<view class="swiper-slide abs">
|
||
|
|
<view class="type">{{ question.question_type | questionType }}</view>
|
||
|
|
<view class="status" :class="{ on: question.is_master }" @click="submitQuestion">
|
||
|
|
{{ question.is_master ? "已掌握" : "未掌握" }}
|
||
|
|
</view>
|
||
|
|
<view class="question">
|
||
|
|
<view>{{ question.stem }}</view>
|
||
|
|
<image mode="widthFix" v-if="question.image" :src="question.image" alt="" />
|
||
|
|
<view :class="{ image: question.is_img }" class="label-group">
|
||
|
|
<view class="label" v-for="(option, idx) in question.options" :key="option.key">
|
||
|
|
<view :data-idx="idx" class="label-item" :class="{
|
||
|
|
ok: option.right,
|
||
|
|
no:
|
||
|
|
!option.right &&
|
||
|
|
(option.key === question.user_answer ||
|
||
|
|
-1 !== question.user_answer.indexOf(option.key)),
|
||
|
|
}">
|
||
|
|
{{ option.value }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="analysis">
|
||
|
|
<view class="no">回答错误</view>
|
||
|
|
<view>
|
||
|
|
<view>
|
||
|
|
正确答案：
|
||
|
|
<view>{{ question.answer }}</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
您的答案：
|
||
|
|
<view>{{ question.user_answer && question.user_answer.toString() }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
试题难度：<span v-for="star in 5" :key="star" :class="{ on: star <= question.difficulty }"
|
||
|
|
class="iconfont iconxing"></span>
|
||
|
|
</view>
|
||
|
|
<view>答案解析：</view>
|
||
|
|
<mpHtml container-style="background: #ffffff;" :content="question.analysis"></mpHtml>
|
||
|
|
<view v-if="question.special && question.special.length">关联知识点：</view>
|
||
|
|
<navigator v-for="special in question.special" :key="special.id" :url="`/pages/special/${special.is_light ? 'single_details' : 'details'
|
||
|
|
}?id=${special.id}`">{{ special.title }}</navigator>
|
||
|
|
</view>
|
||
|
|
<view class="wrong-question">
|
||
|
|
<view class="footer">
|
||
|
|
<button class="button flex flex-column flex-center" :class="{ disabled: !index }" @click="changeQuestion(-1)">
|
||
|
|
<view class="text"><i class="iconfont iconshangyige"></i></view>
|
||
|
|
<view class="text">上一题</view>
|
||
|
|
</button>
|
||
|
|
<button class="button" :class="{ light: question.is_master }" @click="submitQuestion">
|
||
|
|
<view class="text"><i :class="question.is_master ? 'iconyizhangwo' : 'iconweizhangwo'"
|
||
|
|
class="iconfont"></i></view>
|
||
|
|
<view class="text">{{ question.is_master ? '已' : '未' }}掌握</view>
|
||
|
|
</button>
|
||
|
|
<button class="button flex-column flex-center" :class="{ disabled: index === idList.length - 1 }" @click="changeQuestion(1)">
|
||
|
|
<view class="text"><i class="iconfont iconxiayige"></i></view>
|
||
|
|
<view class="text">下一题</view>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</BaseContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getOneWrongRank, submitWrongBank, userWrongBankIdArr } from "@/api/topic";
|
||
|
|
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
mpHtml,
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
questionType(value) {
|
||
|
|
switch (value) {
|
||
|
|
case 1:
|
||
|
|
return "单选题";
|
||
|
|
case 2:
|
||
|
|
return "多选题";
|
||
|
|
default:
|
||
|
|
return "判断题";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formatTime(time) {
|
||
|
|
let hour = Math.floor(time / 3600000);
|
||
|
|
let minute = Math.floor((time - hour * 3600000) / 60000);
|
||
|
|
let second = Math.floor((time - hour * 3600000 - minute * 60000) / 1000);
|
||
|
|
|
||
|
|
if (hour < 10) {
|
||
|
|
hour = "0" + hour;
|
||
|
|
}
|
||
|
|
if (minute < 10) {
|
||
|
|
minute = "0" + minute;
|
||
|
|
}
|
||
|
|
if (second < 10) {
|
||
|
|
second = "0" + second;
|
||
|
|
}
|
||
|
|
|
||
|
|
return hour + ":" + minute + ":" + second;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
question: {},
|
||
|
|
id: "",
|
||
|
|
is_master: 0,
|
||
|
|
ismaster: '',
|
||
|
|
idList: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
index: function () {
|
||
|
|
return this.idList.indexOf(this.id);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad({ id, is_master = 0, ismaster }) {
|
||
|
|
this.id = id;
|
||
|
|
this.is_master = Number(is_master);
|
||
|
|
if (ismaster) {
|
||
|
|
this.ismaster = Number(ismaster);
|
||
|
|
} else {
|
||
|
|
this.ismaster = ''
|
||
|
|
}
|
||
|
|
this.getQuestion();
|
||
|
|
this.idList.push(this.id);
|
||
|
|
this.getuserWrongBankIdArr(0); //上一题
|
||
|
|
this.getuserWrongBankIdArr(1); // 下一题
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 上一题/下一题
|
||
|
|
changeQuestion: function (value) {
|
||
|
|
if(this.idList[this.index + value] == undefined)return false;
|
||
|
|
this.id = this.idList[this.index + value];
|
||
|
|
if(this.id){
|
||
|
|
this.getQuestion();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getQuestion() {
|
||
|
|
uni.showLoading({ mask: true });
|
||
|
|
getOneWrongRank(this.id)
|
||
|
|
.then(({ data: question }) => {
|
||
|
|
uni.hideLoading();
|
||
|
|
let option = JSON.parse(question.option);
|
||
|
|
|
||
|
|
question.options = [];
|
||
|
|
|
||
|
|
let answers = question.answer.split(",");
|
||
|
|
|
||
|
|
if (Array.isArray(option)) {
|
||
|
|
option.forEach((item, index) => {
|
||
|
|
let right = false;
|
||
|
|
|
||
|
|
for (let j = answers.length; j--;) {
|
||
|
|
if (answers[j] === String.fromCharCode(index + 65)) {
|
||
|
|
right = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
question.options.push({
|
||
|
|
right: right,
|
||
|
|
key: String.fromCharCode(index + 65),
|
||
|
|
value: item,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
for (let key in option) {
|
||
|
|
if (Object.hasOwnProperty.call(option, key)) {
|
||
|
|
let right = false;
|
||
|
|
|
||
|
|
for (let j = answers.length; j--;) {
|
||
|
|
if (answers[j] === key) {
|
||
|
|
right = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
question.options.push({
|
||
|
|
right: right,
|
||
|
|
key: key,
|
||
|
|
value: option[key],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ("user_answer" in question) {
|
||
|
|
if (2 === question.question_type) {
|
||
|
|
question.user_answer = question.user_answer.split(",");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
question.user_answer = 2 === question.question_type ? [] : "";
|
||
|
|
}
|
||
|
|
|
||
|
|
this.question = question;
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
uni.hideLoading();
|
||
|
|
this.$util.showMsg(err);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
submitQuestion() {
|
||
|
|
submitWrongBank({
|
||
|
|
wrong_id: this.id,
|
||
|
|
questions_id: this.question.questions_id,
|
||
|
|
is_master: this.question.is_master ? 0 : 1,
|
||
|
|
}).then(() => {
|
||
|
|
this.question.is_master = this.question.is_master ? 0 : 1;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getuserWrongBankIdArr(order) {
|
||
|
|
// order 1 是下 0 是上
|
||
|
|
userWrongBankIdArr({
|
||
|
|
id: Number(this.id),
|
||
|
|
order: order,
|
||
|
|
is_master: this.ismaster
|
||
|
|
}).then(res => {
|
||
|
|
console.log(res.data)
|
||
|
|
this.idList = this.idList.concat(res.data).sort(function (a, b) {
|
||
|
|
return b - a;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
padding-bottom: 146rpx;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
button:after {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@import "@/static/style/question.scss";
|
||
|
|
|
||
|
|
.submit-btn {
|
||
|
|
width: 540rpx;
|
||
|
|
height: 86rpx;
|
||
|
|
border-radius: 43rpx;
|
||
|
|
margin: 80rpx auto;
|
||
|
|
background-color: #2c8eff;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 86rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.question-paper {
|
||
|
|
padding-top: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status {
|
||
|
|
right: 60rpx !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer {
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 5;
|
||
|
|
display: flex;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .button {
|
||
|
|
flex: 1;
|
||
|
|
height: 110rpx;
|
||
|
|
font-size: 22rpx;
|
||
|
|
line-height: 30rpx;
|
||
|
|
color: #333333;
|
||
|
|
background: #ffffff;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .text {
|
||
|
|
margin-top: 11rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer div:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .iconfont {
|
||
|
|
vertical-align: bottom;
|
||
|
|
font-size: 34rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .button:disabled {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .light {
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .iconweizhangwo {
|
||
|
|
font-size: 20px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrong-question .footer .iconyizhangwo {
|
||
|
|
font-size: 20px;
|
||
|
|
color: #2C8EFF;
|
||
|
|
}
|
||
|
|
</style>
|