|
|
@@ -1,6 +1,6 @@
|
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
|
<template>
|
|
|
- <div class="choosetone-preview">
|
|
|
+ <div v-if="show_preview" class="choosetone-preview">
|
|
|
<div class="stem">
|
|
|
<span class="question-number">{{ data.property.question_number }}.</span>
|
|
|
<span v-html="sanitizeHTML(data.stem)"></span>
|
|
|
@@ -11,12 +11,19 @@
|
|
|
<li v-for="(item, i) in data.option_list" :key="i" :class="['option-item']">
|
|
|
<span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
|
|
|
<AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
|
|
|
- <div class="option-content">
|
|
|
+ <div
|
|
|
+ class="option-content"
|
|
|
+ :class="[isJudgingRightWrong ? (con_preview[i].all_right ? 'all-right' : 'has-error') : '']"
|
|
|
+ >
|
|
|
<template v-if="data.property.answer_mode === 'select'">
|
|
|
<span
|
|
|
v-for="(itemc, indexc) in con_preview[i].item_con"
|
|
|
:key="indexc"
|
|
|
- :class="['item-con', active_index_str === i + '-' + indexc ? 'active' : '']"
|
|
|
+ :class="[
|
|
|
+ 'item-con',
|
|
|
+ active_index_str === i + '-' + indexc ? 'active' : '',
|
|
|
+ isJudgingRightWrong && !con_preview[i].user_answer[indexc].is_right ? 'error' : '',
|
|
|
+ ]"
|
|
|
@click="
|
|
|
con_preview[i].item_active_index = indexc;
|
|
|
active_index_str = i + '-' + indexc;
|
|
|
@@ -53,6 +60,11 @@
|
|
|
select_item_index === i
|
|
|
? 'active'
|
|
|
: '',
|
|
|
+ con_preview[i].user_answer[con_preview[i].item_active_index].right_answer === value &&
|
|
|
+ con_preview[i].user_answer[con_preview[i].item_active_index].select_tone !==
|
|
|
+ con_preview[i].user_answer[con_preview[i].item_active_index].right_answer
|
|
|
+ ? 'right'
|
|
|
+ : '',
|
|
|
]"
|
|
|
@click="chooseTone(con_preview[i], value, i)"
|
|
|
>
|
|
|
@@ -107,6 +119,7 @@ export default {
|
|
|
active_letter_index: 0, // 选择字母索引
|
|
|
select_item_index: 0, // 小题索引
|
|
|
show_tips: false, // 是否显示答题提示
|
|
|
+ show_preview: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -118,6 +131,13 @@ export default {
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
},
|
|
|
+ isJudgingRightWrong: {
|
|
|
+ handler(val) {
|
|
|
+ if (!val) return;
|
|
|
+ this.judgeRight();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
// this.handleData();
|
|
|
@@ -132,10 +152,8 @@ export default {
|
|
|
this.active_index_str = `${i}-${item.item_active_index}-${this.active_letter_index}`;
|
|
|
this.handleReplaceTone(this.active_letter + value);
|
|
|
setTimeout(() => {
|
|
|
- // item.item_con[item.item_active_index][this.active_letter_index] = this.final_con;
|
|
|
let new_con = item.item_con_yuan[item.item_active_index].split(this.active_letter);
|
|
|
item.item_con[item.item_active_index] = new_con[0] + this.final_con + new_con[1];
|
|
|
- // this.active_letter = this.final_con;
|
|
|
this.$forceUpdate();
|
|
|
this.answer.answer_list[i].value[item.item_active_index] =
|
|
|
new_con[0] + this.active_letter + value + new_con[1];
|
|
|
@@ -153,6 +171,7 @@ export default {
|
|
|
// 处理数据
|
|
|
handleData() {
|
|
|
this.con_preview = [];
|
|
|
+ this.show_preview = false;
|
|
|
if (!this.isJudgingRightWrong) {
|
|
|
this.answer.answer_list = [];
|
|
|
}
|
|
|
@@ -185,8 +204,10 @@ export default {
|
|
|
}
|
|
|
this.con_preview.push(obj);
|
|
|
});
|
|
|
+ this.show_preview = true;
|
|
|
+ console.log(this.con_preview);
|
|
|
},
|
|
|
- handleReplaceTone(e) {
|
|
|
+ handleReplaceTone(e, arr, index, resArr) {
|
|
|
this.$nextTick(() => {
|
|
|
let value = e;
|
|
|
this.resArr = [];
|
|
|
@@ -194,10 +215,28 @@ export default {
|
|
|
let reg = /\s+/g;
|
|
|
let valueArr = value.split(reg);
|
|
|
valueArr.forEach((item) => {
|
|
|
- this.handleValue(item);
|
|
|
+ this.handleValue(item, resArr);
|
|
|
});
|
|
|
let str = '';
|
|
|
setTimeout(() => {
|
|
|
+ if (resArr) {
|
|
|
+ resArr.forEach((item) => {
|
|
|
+ str += ' ';
|
|
|
+ item.forEach((sItem) => {
|
|
|
+ if (sItem.number && sItem.con) {
|
|
|
+ let number = Number(sItem.number);
|
|
|
+ let con = sItem.con;
|
|
|
+ let word = this.addTone(number, con);
|
|
|
+ str += word;
|
|
|
+ } else if (sItem.number) {
|
|
|
+ str += sItem.number;
|
|
|
+ } else if (sItem.con) {
|
|
|
+ str += ` ${sItem.con} `;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ arr[index] = str.trim();
|
|
|
+ }
|
|
|
this.resArr.forEach((item) => {
|
|
|
str += ' ';
|
|
|
item.forEach((sItem) => {
|
|
|
@@ -218,7 +257,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- handleValue(valItem) {
|
|
|
+ handleValue(valItem, resArr) {
|
|
|
let reg = /\d/;
|
|
|
let reg2 = /[A-Za-zü]+\d/g;
|
|
|
let numList = [];
|
|
|
@@ -242,7 +281,13 @@ export default {
|
|
|
} else {
|
|
|
numList = [];
|
|
|
}
|
|
|
- if (numList.length === 0) {
|
|
|
+ if (resArr) {
|
|
|
+ if (numList.length === 0) {
|
|
|
+ resArr.push([{ con: valItem }]);
|
|
|
+ } else {
|
|
|
+ resArr.push(numList);
|
|
|
+ }
|
|
|
+ } else if (numList.length === 0) {
|
|
|
this.resArr.push([{ con: valItem }]);
|
|
|
} else {
|
|
|
this.resArr.push(numList);
|
|
|
@@ -288,6 +333,54 @@ export default {
|
|
|
this.active_letter_index = indexi;
|
|
|
this.select_item_index = i;
|
|
|
},
|
|
|
+ // 判断对错
|
|
|
+ judgeRight() {
|
|
|
+ this.con_preview = [];
|
|
|
+ this.show_preview = false;
|
|
|
+ this.data.option_list.forEach((item, index) => {
|
|
|
+ let con_arr = JSON.parse(JSON.stringify(item.content_view));
|
|
|
+ let user_answer = [];
|
|
|
+ let user_select = [];
|
|
|
+ let user_res_arr = [];
|
|
|
+ con_arr.forEach((items, indexs) => {
|
|
|
+ user_answer.push({
|
|
|
+ select_tone: this.answer.answer_list[index].value[indexs],
|
|
|
+ select_letter: '',
|
|
|
+ select_index: '',
|
|
|
+ is_right:
|
|
|
+ this.answer.answer_list[index].value[indexs] === this.data.answer.answer_list[index].value[indexs],
|
|
|
+ right_answer: this.data.answer.answer_list[index].value[indexs],
|
|
|
+ });
|
|
|
+ user_res_arr.push([]);
|
|
|
+ user_select.push('');
|
|
|
+
|
|
|
+ this.handleReplaceTone(
|
|
|
+ items + this.answer.answer_list[index].value[indexs],
|
|
|
+ user_select,
|
|
|
+ indexs,
|
|
|
+ user_res_arr[indexs],
|
|
|
+ );
|
|
|
+ });
|
|
|
+ let obj = {
|
|
|
+ item_con: user_select,
|
|
|
+ item_con_yuan: JSON.parse(JSON.stringify(con_arr)),
|
|
|
+ mark: item.mark,
|
|
|
+ user_answer,
|
|
|
+ item_active_index: 0,
|
|
|
+ active_letter: '',
|
|
|
+ user_res_arr,
|
|
|
+ all_right:
|
|
|
+ JSON.stringify(this.answer.answer_list[index].value) ===
|
|
|
+ JSON.stringify(this.data.answer.answer_list[index].value),
|
|
|
+ };
|
|
|
+ this.con_preview.push(obj);
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.show_preview = true;
|
|
|
+ }, 100);
|
|
|
+
|
|
|
+ console.log(this.con_preview);
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -314,10 +407,20 @@ export default {
|
|
|
margin-right: 5%;
|
|
|
|
|
|
.option-content {
|
|
|
- padding: 12px 24px;
|
|
|
+ padding: 10px 22px;
|
|
|
color: #706f78;
|
|
|
background-color: $content-color;
|
|
|
+ border: 1px solid $content-color;
|
|
|
border-radius: 40px;
|
|
|
+
|
|
|
+ &.all-right {
|
|
|
+ background-color: $right-bc-color;
|
|
|
+ border-color: $right-bc-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.has-error {
|
|
|
+ border-color: $error-color;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.item-con,
|
|
|
@@ -326,6 +429,10 @@ export default {
|
|
|
color: #000;
|
|
|
cursor: pointer;
|
|
|
|
|
|
+ &.error {
|
|
|
+ color: $error-color;
|
|
|
+ }
|
|
|
+
|
|
|
&.active {
|
|
|
color: #2f6fec;
|
|
|
}
|
|
|
@@ -349,6 +456,12 @@ export default {
|
|
|
background: #dfe9fd;
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ color: $right-color;
|
|
|
+ background-color: $right-bc-color;
|
|
|
+ border-radius: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
natasha