|
@@ -10,15 +10,18 @@
|
|
|
problemList[problemListIndex].questionType | questionType
|
|
|
}}</span>
|
|
|
<!-- <text>{{ problemListIndex + 1 }}、</text> -->
|
|
|
- <text class="problem-issue">{{
|
|
|
- problemList[problemListIndex].issue
|
|
|
- }}</text>
|
|
|
+ <text class="problem-issue"
|
|
|
+ >{{ problemListIndex + 1 }}.{{
|
|
|
+ problemList[problemListIndex].issue
|
|
|
+ }}</text
|
|
|
+ >
|
|
|
<view v-if="problemList[problemListIndex].image" class="problem-img">
|
|
|
<image
|
|
|
mode="widthFix"
|
|
|
:src="problemList[problemListIndex].image"
|
|
|
></image>
|
|
|
</view>
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
<!-- 单项选择 -->
|
|
|
<view
|
|
|
v-if="problemList[problemListIndex].questionType < 3"
|
|
@@ -27,27 +30,22 @@
|
|
|
<van-radio-group
|
|
|
:value="problemList[problemListIndex].userAnswer"
|
|
|
:max="1"
|
|
|
- @change="changeGroup"
|
|
|
+ @change="changeRadioGroup"
|
|
|
>
|
|
|
<van-radio
|
|
|
- @change="changeCheckbox"
|
|
|
- :value="
|
|
|
- problemList[problemListIndex].userAnswer.includes(
|
|
|
- problemList[problemListIndex].answer
|
|
|
- )
|
|
|
- "
|
|
|
+ :value="problemList[problemListIndex].userAnswer === item.value"
|
|
|
class="problem-checkbox"
|
|
|
use-icon-slot
|
|
|
v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
:key="index"
|
|
|
- :name="item"
|
|
|
+ :name="item.value"
|
|
|
>
|
|
|
- <text>{{ item }}</text>
|
|
|
+ <text>{{ item.value }}</text>
|
|
|
<view
|
|
|
class="problem-op"
|
|
|
:class="{
|
|
|
'problem-op_selected':
|
|
|
- problemList[problemListIndex].userAnswer.includes(item),
|
|
|
+ problemList[problemListIndex].userAnswer === item.value,
|
|
|
}"
|
|
|
slot="icon"
|
|
|
>{{ numberToLetter(index) }}</view
|
|
@@ -64,27 +62,23 @@
|
|
|
<van-checkbox-group
|
|
|
:value="problemList[problemListIndex].userAnswer"
|
|
|
:max="4"
|
|
|
- @change="changeGroup"
|
|
|
+ @change="changeCheckboxGroup"
|
|
|
>
|
|
|
<van-checkbox
|
|
|
- @change="changeCheckbox"
|
|
|
:value="
|
|
|
- problemList[problemListIndex].userAnswer.includes(
|
|
|
- problemList[problemListIndex].answer
|
|
|
- )
|
|
|
+ problemList[problemListIndex].userAnswer.includes(item.value)
|
|
|
"
|
|
|
class="problem-checkbox"
|
|
|
use-icon-slot
|
|
|
v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
:key="index"
|
|
|
- :name="item"
|
|
|
+ :name="item.value"
|
|
|
>
|
|
|
- <text>{{ item }}</text>
|
|
|
+ <text>{{ item.value }}</text>
|
|
|
<view
|
|
|
class="problem-op"
|
|
|
:class="{
|
|
|
- 'problem-op_selected':
|
|
|
- problemList[problemListIndex].userAnswer.includes(item),
|
|
|
+ 'problem-op_selected': item.selected,
|
|
|
}"
|
|
|
slot="icon"
|
|
|
>{{ numberToLetter(index) }}</view
|
|
@@ -92,6 +86,142 @@
|
|
|
</van-checkbox>
|
|
|
</van-checkbox-group>
|
|
|
</view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ <!-- 单选 -->
|
|
|
+ <!-- #ifdef MP-TOUTIAO -->
|
|
|
+ <view
|
|
|
+ v-if="
|
|
|
+ problemList[problemListIndex].questionType < 3 &&
|
|
|
+ !problemList[problemListIndex].isCompleted
|
|
|
+ "
|
|
|
+ class="problem-ops"
|
|
|
+ >
|
|
|
+ <m-radio-group
|
|
|
+ @change="changeRadioGroup"
|
|
|
+ :value.sync="problemList[problemListIndex].userAnswer"
|
|
|
+ >
|
|
|
+ <m-radio
|
|
|
+ :value="item.value"
|
|
|
+ :item="item"
|
|
|
+ :useIconSlot="true"
|
|
|
+ :key="index"
|
|
|
+ :name="numberToLetter(index)"
|
|
|
+ v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
+ >
|
|
|
+ </m-radio>
|
|
|
+ </m-radio-group>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="
|
|
|
+ problemList[problemListIndex].questionType < 3 &&
|
|
|
+ problemList[problemListIndex].isCompleted
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
+ :key="index"
|
|
|
+ class="problem-select"
|
|
|
+ >
|
|
|
+ <icon
|
|
|
+ v-if="item.isAnswer && item.selected"
|
|
|
+ class="icon-box-img"
|
|
|
+ type="success"
|
|
|
+ color="#06c05f"
|
|
|
+ size="37"
|
|
|
+ ></icon>
|
|
|
+ <icon
|
|
|
+ v-if="!item.isAnswer && item.selected"
|
|
|
+ class="icon-box-img"
|
|
|
+ type="clear"
|
|
|
+ size="37"
|
|
|
+ ></icon>
|
|
|
+ <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
|
|
|
+ numberToLetter(index)
|
|
|
+ }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.isAnswer && !item.selected"
|
|
|
+ class="problem-op_green"
|
|
|
+ >{{ numberToLetter(index) }}</text
|
|
|
+ >
|
|
|
+ <text class="problem-opAnswer">{{ item.value }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 多选 -->
|
|
|
+
|
|
|
+ <view
|
|
|
+ v-if="
|
|
|
+ problemList[problemListIndex].questionType == 3 &&
|
|
|
+ !problemList[problemListIndex].isCompleted
|
|
|
+ "
|
|
|
+ class="problem-ops"
|
|
|
+ >
|
|
|
+ <m-checkbox-group
|
|
|
+ @change="changeCheckboxGroup"
|
|
|
+ :value="problemList[problemListIndex].userAnswer"
|
|
|
+ :max="4"
|
|
|
+ >
|
|
|
+ <m-checkbox
|
|
|
+ @change="changeCheckbox"
|
|
|
+ :item="item"
|
|
|
+ :value="item.value"
|
|
|
+ class="problem-checkbox"
|
|
|
+ use-icon-slot
|
|
|
+ v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
+ :key="index"
|
|
|
+ :name="numberToLetter(index)"
|
|
|
+ >
|
|
|
+ </m-checkbox>
|
|
|
+ </m-checkbox-group>
|
|
|
+ <!-- <view class="flex-center">
|
|
|
+ <van-button
|
|
|
+ @click="confirmMult"
|
|
|
+ color="#498ef5"
|
|
|
+ round
|
|
|
+ custom-style="width:600rpx"
|
|
|
+ type="primary"
|
|
|
+ >确定</van-button
|
|
|
+ >
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="
|
|
|
+ problemList[problemListIndex].questionType == 3 &&
|
|
|
+ problemList[problemListIndex].isCompleted
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in problemList[problemListIndex].optsArr"
|
|
|
+ :key="index"
|
|
|
+ class="problem-select"
|
|
|
+ >
|
|
|
+ <icon
|
|
|
+ v-if="item.isAnswer && item.selected"
|
|
|
+ class="icon-box-img"
|
|
|
+ type="success"
|
|
|
+ color="#06c05f"
|
|
|
+ size="37"
|
|
|
+ ></icon>
|
|
|
+ <icon
|
|
|
+ v-if="!item.isAnswer && item.selected"
|
|
|
+ class="icon-box-img"
|
|
|
+ type="clear"
|
|
|
+ size="37"
|
|
|
+ ></icon>
|
|
|
+ <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
|
|
|
+ numberToLetter(index)
|
|
|
+ }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.isAnswer && !item.selected"
|
|
|
+ class="problem-op_green"
|
|
|
+ >{{ numberToLetter(index) }}</text
|
|
|
+ >
|
|
|
+ <text class="problem-opAnswer">{{ item.value }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- #endif -->
|
|
|
<view class="function-list">
|
|
|
<div class="function-item">
|
|
|
<van-icon name="star-o" size="25px" />
|
|
@@ -122,7 +252,7 @@
|
|
|
</div> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
<van-tabbar>
|
|
|
<van-tabbar-item @click="goBeforeTopics"
|
|
|
><van-icon
|
|
@@ -151,6 +281,39 @@
|
|
|
/>下一题
|
|
|
</van-tabbar-item>
|
|
|
</van-tabbar>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP-TOUTIAO -->
|
|
|
+ <tabbar height="35px">
|
|
|
+ <view @click="goBeforeTopics" class="flex-all-center h-full">
|
|
|
+ <van-icon
|
|
|
+ slot="icon"
|
|
|
+ custom-style="transform: rotate(90deg);"
|
|
|
+ custom-class="last-subject"
|
|
|
+ name="down"
|
|
|
+ size="18px"
|
|
|
+ /><text> 上一题 </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-all-center h-full">
|
|
|
+ <van-icon size="18px" name="description" />{{ problemListIndex + 1 }}/{{
|
|
|
+ problemListTotal
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
+ <view @click="submitExam" class="flex-all-center h-full">
|
|
|
+ <van-icon slot="icon" size="18px" name="records" />交卷
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view @click="goNextTopics" class="flex-all-center h-full">
|
|
|
+ 下一题
|
|
|
+ <van-icon
|
|
|
+ custom-style="transform: rotate(-90deg);"
|
|
|
+ custom-class="last-subject"
|
|
|
+ name="down"
|
|
|
+ size="18px"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </tabbar>
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -158,6 +321,11 @@
|
|
|
import navBar from "./components/navBar.vue";
|
|
|
import api from "@/api/index";
|
|
|
import utils from "@/utils/index";
|
|
|
+import tabbar from "./components/tabbar.vue";
|
|
|
+import mRadio from "@/components/m-radio/m-radio.vue";
|
|
|
+import mRadioGroup from "@/components/m-radio-group/m-radio-group.vue";
|
|
|
+import mCheckbox from "@/components/m-checkbox/m-checkbox.vue";
|
|
|
+import mCheckboxGroup from "@/components/m-checkbox-group/m-checkbox-group.vue";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -299,6 +467,8 @@ export default {
|
|
|
let score = 0;
|
|
|
let query = this.query;
|
|
|
let that = this;
|
|
|
+ let scorePerQuestion = 0
|
|
|
+ query.subject === "4"?scorePerQuestion=2:scorePerQuestion=1
|
|
|
this.problemList.forEach((item, index) => {
|
|
|
if (
|
|
|
typeof item.userAnswer == "object" &&
|
|
@@ -311,10 +481,10 @@ export default {
|
|
|
console.log(answerArr, userAnswer);
|
|
|
}
|
|
|
if (answerArr.join("-") === userAnswer.join("-")) {
|
|
|
- score = score + 1;
|
|
|
+ score = score + scorePerQuestion;
|
|
|
}
|
|
|
} else if (typeof item.userAnswer == "string") {
|
|
|
- item.answer === item.userAnswer ? (score = score + 1) : "";
|
|
|
+ item.answer === item.userAnswer ? (score = score + scorePerQuestion) : "";
|
|
|
}
|
|
|
});
|
|
|
uni.showModal({
|
|
@@ -332,7 +502,7 @@ export default {
|
|
|
utils.mapToUrlQuery({
|
|
|
score,
|
|
|
useTime,
|
|
|
- ...query,
|
|
|
+ ...that.query,
|
|
|
}),
|
|
|
});
|
|
|
}
|
|
@@ -368,7 +538,64 @@ export default {
|
|
|
globalAudio.play();
|
|
|
}
|
|
|
},
|
|
|
+ changeRadioGroup(e) {
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex],
|
|
|
+ "userAnswer",
|
|
|
+ e.detail
|
|
|
+ );
|
|
|
+ this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
|
|
|
+ if (e.detail === item.value) {
|
|
|
+ item.selected = true;
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex].optsArr[index],
|
|
|
+ "selected",
|
|
|
+ true
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ item.selected = false;
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex].optsArr[index],
|
|
|
+ "selected",
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // this.problemList[this.problemListIndex].optsArr.forEach((item) => {
|
|
|
+ // if (e.detail.value === item.value) {
|
|
|
+ // item.selected = true;
|
|
|
+ // } else {
|
|
|
+ // item.selected = false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ changeCheckboxGroup(e) {
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex],
|
|
|
+ "userAnswer",
|
|
|
+ e.detail
|
|
|
+ );
|
|
|
+
|
|
|
+ this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
|
|
|
+ if (e.detail.includes(item.value)) {
|
|
|
+ item.selected = true;
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex].optsArr[index],
|
|
|
+ "selected",
|
|
|
+ true
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ item.selected = false;
|
|
|
+ this.$set(
|
|
|
+ this.problemList[this.problemListIndex].optsArr[index],
|
|
|
+ "selected",
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
changeGroup(e) {
|
|
|
+ console.log(e);
|
|
|
this.$set(
|
|
|
this.problemList[this.problemListIndex],
|
|
|
"userAnswer",
|
|
@@ -392,7 +619,25 @@ export default {
|
|
|
})
|
|
|
.then((res) => {
|
|
|
res.rows.forEach((element) => {
|
|
|
- element.optsArr = element.opts.split("-");
|
|
|
+ element.optsArr = [];
|
|
|
+ element.opts.split("-").forEach((item, index) => {
|
|
|
+ if (element.questionType == 3) {
|
|
|
+ element.optsArr.push({
|
|
|
+ selected: false,
|
|
|
+ value: item,
|
|
|
+ index: index,
|
|
|
+ isAnswer: element.answer.split("-").includes(item),
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ element.optsArr.push({
|
|
|
+ selected: false,
|
|
|
+ value: item,
|
|
|
+ index: index,
|
|
|
+ isAnswer: item === element.answer,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ element.isCompleted = false;
|
|
|
element.userAnswer = [];
|
|
|
});
|
|
|
that.problemListTotal = res.total;
|
|
@@ -419,11 +664,21 @@ export default {
|
|
|
|
|
|
components: {
|
|
|
navBar,
|
|
|
+ tabbar,
|
|
|
+ mRadio,
|
|
|
+ mRadioGroup,
|
|
|
+ mCheckbox,
|
|
|
+ mCheckboxGroup,
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.flex-all-center {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
.divider {
|
|
|
width: 100%;
|
|
|
height: 24rpx;
|