|
|
@@ -1,25 +1,65 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <swiper class="question_content">
|
|
|
- <swiper-item v-for="(item, index) in question_Info.question_list" :key="index">
|
|
|
- <view class="question_item">
|
|
|
- <view class="question_content_text">{{ item.question_title }}</view>
|
|
|
- <view class="question_options">
|
|
|
- <view v-for="(option, cIndex) in item.answer_list" :key="index" :class="['question_answer', { active: item.checkAnswer == option.id }]" @click="_selectAnswer(index, option.id)">
|
|
|
- <view :class="['question_index', { active: item.checkAnswer == option.id }]">{{ option.value.substring(0, 1) }}</view>
|
|
|
- {{ option.value.substring(2) }}
|
|
|
- </view>
|
|
|
+ <view class="question_content">
|
|
|
+ <view class="question_item">
|
|
|
+ <view class="question_title">第 {{ currentQuestionIndex + 1 }} 题 / 共 {{ question_Info.question_total }} 题</view>
|
|
|
+ <view class="question_content_text">{{ question_map.question_title }}</view>
|
|
|
+ <view class="question_tip"> 请从以下选项中选出正确答案 </view>
|
|
|
+ <view class="question_options">
|
|
|
+ <view
|
|
|
+ v-for="(option, cIndex) in question_map.answer_list"
|
|
|
+ :key="cIndex"
|
|
|
+ :class="[
|
|
|
+ 'question_answer',
|
|
|
+ { active: question_map.selectAnswer == option.id },
|
|
|
+ { error: question_map.checkAnswer && question_map.checkAnswer == option.id && question_map.checkAnswer !== question_map.answer_id },
|
|
|
+ ]"
|
|
|
+ @click="_selectAnswer(option.id)"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ :class="[
|
|
|
+ 'question_index',
|
|
|
+ { active: question_map.selectAnswer == option.id },
|
|
|
+ { error: question_map.checkAnswer && question_map.checkAnswer == option.id && question_map.checkAnswer !== question_map.answer_id },
|
|
|
+ ]"
|
|
|
+ >{{ option.value.substring(0, 1) }}</view
|
|
|
+ >
|
|
|
+ {{ option.value.substring(2) }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="bottom_btn">
|
|
|
- <view class="answer_info"
|
|
|
+ <view class="question_result" v-if="question_map.checkAnswer">
|
|
|
+ <icon :type="question_map.answer_id == question_map.checkAnswer ? 'success' : 'cancel'" size="24" />
|
|
|
+ <view :class="['title', question_map.checkAnswer == question_map.answer_id ? 'green' : 'red']">{{
|
|
|
+ question_map.answer_id == question_map.checkAnswer ? "恭喜您，答对啦!" : "很遗憾，答错了"
|
|
|
+ }}</view>
|
|
|
+ <view class="tip">本题的正确选项为：{{ answer_number[question_map.answer_index] }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom_btn" v-if="question_Info.question_list.length !== 0">
|
|
|
+ <!-- <view class="answer_info"
|
|
|
>已答 <view style="color: #5045e6">{{ answeredCount }}</view
|
|
|
> 题，共 {{ question_Info.question_total }} 题</view
|
|
|
+ > -->
|
|
|
+ <!-- <view class="submit-btn" @click="_handleSubmit">交卷</view> -->
|
|
|
+ <view
|
|
|
+ :class="[
|
|
|
+ 'submit-btn',
|
|
|
+ {
|
|
|
+ disabled: !question_map.selectAnswer,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @click="_handleSubmitAnswer"
|
|
|
+ v-if="!question_map.checkAnswer"
|
|
|
>
|
|
|
- <view class="submit-btn" @click="_handleSubmit">交卷</view>
|
|
|
+ 提交
|
|
|
+ </view>
|
|
|
+ <view v-if="question_map.checkAnswer" style="display: flex; justify-content: space-between; width: 100%">
|
|
|
+ <view class="prev_btn" @click="_prevQuestion">上一题</view>
|
|
|
+ <view class="next_btn" @click="_nextQuestion">{{ currentQuestionIndex !== question_Info.question_list.length - 1 ? "下一题" : "查看报告" }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <Empty v-if="question_Info.question_list.length == 0" text="----- 本课程还没有配置习题 -----" />
|
|
|
<uni-popup ref="tipRef" type="center" @change="_changeTip">
|
|
|
<view class="tip_content">
|
|
|
<view code> {{ "<" }} {{ ">" }} </view>
|
|
|
@@ -30,11 +70,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Empty from "@/components/Empty/Empty.vue";
|
|
|
export default {
|
|
|
+ components: { Empty },
|
|
|
data() {
|
|
|
return {
|
|
|
+ currentQuestionIndex: 0,
|
|
|
course_id: null,
|
|
|
question_Info: {},
|
|
|
+ question_map: {}, // 初始化 question_map
|
|
|
+ answer_number: ["A", "B", "C", "D", "E", "F"],
|
|
|
};
|
|
|
},
|
|
|
onLoad(param) {
|
|
|
@@ -73,12 +118,31 @@ export default {
|
|
|
})
|
|
|
.then((re) => {
|
|
|
if (re.code == "success") {
|
|
|
+ re.data.question_list.map((item) => {
|
|
|
+ item.answer_index = item.answer_list.findIndex((answer) => answer.is_answer == 1);
|
|
|
+ item.answer_id = item.answer_list.find((answer) => answer.is_answer == 1).id;
|
|
|
+ item.selectAnswer = null; // 初始化 selectAnswer 属性
|
|
|
+ });
|
|
|
+ console.log(re.data);
|
|
|
this.question_Info = re.data;
|
|
|
+ this.question_map = re.data.question_list[this.currentQuestionIndex];
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- _selectAnswer(index, id) {
|
|
|
- this.question_Info.question_list[index].checkAnswer = id;
|
|
|
+ _selectAnswer(id) {
|
|
|
+ //已经回答的题目不能再答了
|
|
|
+ if (this.question_map.checkAnswer) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // this.question_map.selectAnswer = id;
|
|
|
+ this.$set(this.question_map, "selectAnswer", id);
|
|
|
+ console.log(this.question_map);
|
|
|
+ },
|
|
|
+ _handleSubmitAnswer() {
|
|
|
+ if (!this.question_map.selectAnswer) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.question_map.checkAnswer = this.question_map.selectAnswer;
|
|
|
},
|
|
|
_handleSubmit() {
|
|
|
if (this.answeredCount !== this.question_Info.question_total) {
|
|
|
@@ -98,7 +162,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
_handleIn() {
|
|
|
- const _this = this
|
|
|
+ const _this = this;
|
|
|
const question_list = this.question_Info.question_list.filter((item) => item.checkAnswer);
|
|
|
const answer_list = question_list.map((item) => {
|
|
|
return { question_id: item.question_id, answer_id: item.checkAnswer };
|
|
|
@@ -114,26 +178,58 @@ export default {
|
|
|
)
|
|
|
.then((re) => {
|
|
|
if (re.code == "success") {
|
|
|
- uni.showModal({
|
|
|
- title: "完成测评",
|
|
|
- content: "恭喜您完成测评，是否查看报告",
|
|
|
- confirmText: "查看报告",
|
|
|
- cancelText: "返回列表",
|
|
|
- success(res) {
|
|
|
- if (res.confirm) {
|
|
|
- uni.redirectTo({
|
|
|
- url: `/pages/video/record?type=exam&record_id=${_this.question_Info.record_id}`,
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.redirectTo({
|
|
|
- url: `/pages/video/index`,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/video/record?type=exam&record_id=${_this.question_Info.record_id}`,
|
|
|
});
|
|
|
+ // uni.showModal({
|
|
|
+ // title: "完成测评",
|
|
|
+ // content: "恭喜您完成测评，是否查看报告",
|
|
|
+ // confirmText: "查看报告",
|
|
|
+ // cancelText: "返回列表",
|
|
|
+ // success(res) {
|
|
|
+ // if (res.confirm) {
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url: `/pages/video/record?type=exam&record_id=${_this.question_Info.record_id}`,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url: `/pages/video/index`,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // });
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ _prevQuestion() {
|
|
|
+ if (this.currentQuestionIndex === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "已是第一题啦！",
|
|
|
+ icon: "none",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.currentQuestionIndex--;
|
|
|
+ this.question_map = this.question_Info.question_list[this.currentQuestionIndex];
|
|
|
+ },
|
|
|
+ _nextQuestion() {
|
|
|
+ try {
|
|
|
+ if (this.currentQuestionIndex == this.question_Info.question_list.length - 1) {
|
|
|
+ this._handleIn();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.question_Info.question_list[this.currentQuestionIndex] = this.question_map;
|
|
|
+ this.currentQuestionIndex++;
|
|
|
+ this.question_map = this.question_Info.question_list[this.currentQuestionIndex];
|
|
|
+ console.clear();
|
|
|
+ console.log(this.currentQuestionIndex, "currentQuestionIndex");
|
|
|
+ console.log(this.question_map, "question_map");
|
|
|
+ console.log(this.question_Info.question_list, "this.question_Info.question_list");
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -150,20 +246,30 @@ export default {
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
.question_content {
|
|
|
- height: calc(100vh - 150rpx);
|
|
|
+ height: calc(100vh - 200rpx);
|
|
|
background-color: #f2f2f2;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
padding: 30rpx 20rpx;
|
|
|
+ background-color: #f9fbfc;
|
|
|
.question_item {
|
|
|
width: 100%;
|
|
|
padding: 30rpx 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
- border: 2rpx solid #ddd;
|
|
|
+ // border: 2rpx solid #ddd;
|
|
|
border-radius: 8rpx;
|
|
|
+ // background-color: #fff;
|
|
|
+ .question_title {
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .question_tip {
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
.question_content_text {
|
|
|
font-size: 32rpx;
|
|
|
- margin-bottom: 80rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.question_options {
|
|
|
@@ -171,6 +277,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
gap: 40rpx;
|
|
|
width: 100%;
|
|
|
+
|
|
|
.question_index {
|
|
|
border: 2rpx solid #ddd;
|
|
|
border-radius: 50%;
|
|
|
@@ -184,6 +291,10 @@ export default {
|
|
|
background-color: #5045e6;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+ &.error {
|
|
|
+ background-color: #ef4444;
|
|
|
+ border-color: #ef4444;
|
|
|
+ }
|
|
|
}
|
|
|
.question_answer {
|
|
|
height: 80rpx;
|
|
|
@@ -191,11 +302,39 @@ export default {
|
|
|
border-radius: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ border: 2rpx solid #ddd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
&.active {
|
|
|
color: #5045e6;
|
|
|
+ border-color: #5045e6;
|
|
|
+ }
|
|
|
+ &.error {
|
|
|
+ border-color: #ef4444;
|
|
|
+ background-color: #fef2f2;
|
|
|
+ color: #ef4444;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .question_result {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #ddd;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.bottom_btn {
|
|
|
@@ -203,13 +342,35 @@ export default {
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- height: 150rpx;
|
|
|
+ height: 200rpx;
|
|
|
border-top: 4rpx solid #ddd;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
+ .prev_btn {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 45%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .next_btn {
|
|
|
+ background-color: #5045e6;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 45%;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
.answer_info {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
@@ -218,12 +379,17 @@ export default {
|
|
|
background-color: #5045e6;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
- width: 200rpx;
|
|
|
+ width: 100%;
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
border-radius: 8rpx;
|
|
|
box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
text-align: center;
|
|
|
+ &.disabled {
|
|
|
+ background-color: #ccc;
|
|
|
+ color: #999;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
钱新宇