图片模版-完成

src/components/Adult/inputModules/Picture.vue

@@ -204,7 +204,9 @@ export default {
     },
     //添加一个选项
     addOption(index) {
-      let obj = this.data_structure.option[0].option[0];
+      let obj = JSON.parse(
+        JSON.stringify(this.data_structure.option[0].option[0])
+      );
       this.curQue.option[index].option.push(obj);
     },
     //选择功能设置
@@ -238,18 +240,17 @@ export default {
       });
     },
     deleteOptionOne(index) {
-        this.$confirm("确定要删除吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        })
-        .then(() => {
-            if (this.curQue.option.length <= 1) {
-                this.$message.warning("至少要一个图片模板");
-                return;
-            }
-            this.curQue.option.splice(index, 1);
-        })
+      this.$confirm("确定要删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        if (this.curQue.option.length <= 1) {
+          this.$message.warning("至少要一个图片模板");
+          return;
+        }
+        this.curQue.option.splice(index, 1);
+      });
     },
     clearOption(type) {
       let option = JSON.parse(JSON.stringify(this.curQue.option));

src/components/Adult/preview/Picture.vue

@@ -1,28 +1,26 @@
 <!--  -->
 <template>
-  <div :class="['Big-Book-PictureBox']" v-if="curQue && curQue.Bookanswer">
+  <div :class="['Big-Book-PictureBox']" v-if="isShowTemp">
+    <AnswerTitle :judgeAnswer="judgeAnswer" />
     <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
     <li v-for="(items, indexs) in curQue.option" :key="indexs">
-        <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
-          <div
-            class="hanzi-box hanzi-box-top"
-            v-if="items.pinyin || items.hanzi"
+      <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
+        <div class="hanzi-box hanzi-box-top" v-if="items.pinyin || items.hanzi">
+          <span
+            v-if="
+              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
+            "
+            class="pinyin"
+            >{{ items.pinyin }}</span
           >
-            <span
-              v-if="
-                items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
-              "
-              class="pinyin"
-              >{{ items.pinyin }}</span
-            >
-            <p v-if="items.hanzi">{{ items.hanzi }}</p>
-            <span
-              v-if="items.pinyin && items.pinyinSite == 'bottom'"
-              class="pinyin"
-              >{{ items.pinyin }}</span
-            >
-          </div>
-        </template>
+          <p v-if="items.hanzi">{{ items.hanzi }}</p>
+          <span
+            v-if="items.pinyin && items.pinyinSite == 'bottom'"
+            class="pinyin"
+            >{{ items.pinyin }}</span
+          >
+        </div>
+      </template>
       <div v-for="(itemss, indexss) in items.img_list" :key="indexss">
         <el-image
           :src="itemss.id"
@@ -65,46 +63,91 @@
           ChildType == 'image_wordInput'
         "
       >
-        <input
-          class="singleInput"
-          v-model="curQue.Bookanswer[0].input[0]"
-          placeholder="输入"
-          @blur="handleInput('input', 0)"
-          :readonly="TaskModel == 'ANSWER'"
-          maxlength="200"
-        />
-      </template>
-      <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
-      <!-- 补齐输入 -->
-      <template v-if="ChildType == 'image_gdcy'">
-        <div class="fill-box">
-          <b v-if="items.hanzi">{{ items.hanzi }}</b>
+        <template v-if="judgeAnswer == 'standardAnswer'">
           <input
-            v-model="curQue.Bookanswer[0].input[0]"
+            v-model="curQue.correct[0].input[0]"
             placeholder="输入"
             @blur="handleInput('input', 0)"
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
+            :class="['singleInput', 'userRight', inputAnswerClass('input', 0)]"
           />
-        </div>
-      </template>
-      <!-- 双输入 -->
-      <template v-if="ChildType == 'image_dobleinput'">
-        <div class="DoubleInput-box">
+        </template>
+        <template v-else>
           <input
+            v-model="curQue.Bookanswer[0].input.input[0].value"
             placeholder="输入"
             @blur="handleInput('input', 0)"
-            v-model="curQue.Bookanswer[0].input[0]"
-            :readonly="TaskModel == 'ANSWER'"
-            maxlength="200"
-          />
-          <input
-            placeholder="输入"
-            @blur="handleInput('input', 1)"
-            v-model="curQue.Bookanswer[0].input[1]"
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
+            :class="['singleInput', inputAnswerClass('input', 0)]"
           />
+        </template>
+      </template>
+      <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
+      <!-- 补齐输入 -->
+      <template v-if="ChildType == 'image_gdcy'">
+        <div class="fill-box">
+          <b v-if="items.hanzi">{{ items.hanzi }}</b>
+          <template v-if="judgeAnswer == 'standardAnswer'">
+            <input
+              v-model="curQue.correct[0].input[0]"
+              placeholder="输入"
+              @blur="handleInput('input', 0)"
+              :readonly="true"
+              maxlength="200"
+              :class="inputAnswerClass('input', 0)"
+            />
+          </template>
+          <template v-else>
+            <input
+              v-model="curQue.Bookanswer[0].input.input[0].value"
+              placeholder="输入"
+              @blur="handleInput('input', 0)"
+              :readonly="TaskModel == 'ANSWER'"
+              maxlength="200"
+              :class="inputAnswerClass('input', 0)"
+            />
+          </template>
+        </div>
+      </template>
+      <!-- 双输入 -->
+      <template v-if="ChildType == 'image_dobleinput'">
+        <div class="DoubleInput-box">
+          <template v-if="judgeAnswer == 'standardAnswer'">
+            <input
+              placeholder="输入"
+              v-model="curQue.correct[0].input[0]"
+              :readonly="true"
+              maxlength="200"
+              :class="inputAnswerClass('input', 0)"
+            />
+            <input
+              placeholder="输入"
+              v-model="curQue.correct[0].input[1]"
+              :readonly="true"
+              maxlength="200"
+              :class="inputAnswerClass('input', 1)"
+            />
+          </template>
+          <template v-else>
+            <input
+              placeholder="输入"
+              @blur="handleInput('input', 0)"
+              v-model="curQue.Bookanswer[0].input.input[0].value"
+              :readonly="TaskModel == 'ANSWER'"
+              maxlength="200"
+              :class="inputAnswerClass('input', 0)"
+            />
+            <input
+              placeholder="输入"
+              @blur="handleInput('input', 1)"
+              v-model="curQue.Bookanswer[0].input.input[1].value"
+              :readonly="TaskModel == 'ANSWER'"
+              maxlength="200"
+              :class="inputAnswerClass('input', 1)"
+            />
+          </template>
         </div>
       </template>
       <!-- 判断 -->
@@ -114,17 +157,17 @@
             :class="[
               'right-btn',
               TaskModel != 'ANSWER' ? 'right-btn-hover' : '',
-              curQue.Bookanswer[0].judge == 'right' ? 'active' : '',
+              judgeAnswerClass('true'),
             ]"
-            @click="handleSelectJudge('right')"
+            @click="handleSelectJudge('true')"
           ></a>
           <a
             :class="[
               'error-btn',
               TaskModel != 'ANSWER' ? 'error-btn-hover' : '',
-              curQue.Bookanswer[0].judge == 'error' ? 'active' : '',
+              judgeAnswerClass('false'),
             ]"
-            @click="handleSelectJudge('error')"
+            @click="handleSelectJudge('false')"
           ></a>
         </div>
       </template>
@@ -135,45 +178,132 @@
           <div
             v-for="(itemss, indexss) in items.option"
             :key="'op' + indexss"
-            :class="['xxoption', 'option' + curQue.numberList.con]"
+            :class="[
+              'xxoption',
+              'option' + curQue.numberList.con,
+              singleAnswerClass(indexss),
+              checkBoxAnswerClass(indexss),
+            ]"
           >
-            <!-- 单选 -->
-            <template v-if="ChildType == 'image_single'">
-              <el-radio
-                v-model="curQue.Bookanswer[0].singleRadio"
-                :label="indexss"
-                :disabled="TaskModel == 'ANSWER'"
-                ><span></span
-              ></el-radio>
+            <template v-if="judgeAnswer == 'standardAnswer'">
+              <!-- 单选 -->
+              <template v-if="ChildType == 'image_single'">
+                <el-radio
+                  v-model="curQue.correct[0].single[0]"
+                  :label="indexss"
+                  :disabled="TaskModel == 'ANSWER'"
+                  @input="changeSingle"
+                >
+                  <div
+                    class="hanzi-box hanzi-box-top"
+                    v-if="itemss.pinyin || itemss.hanzi"
+                  >
+                    <span
+                      v-if="
+                        itemss.pinyin &&
+                        (!items.pinyinSite || items.pinyinSite == 'top')
+                      "
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
+                    <span
+                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                  </div>
+                </el-radio>
+              </template>
+              <!-- 复选 -->
+              <template v-if="ChildType == 'image_checkBox'">
+                <el-checkbox
+                  v-model="curQue.correct[0].checkBox"
+                  :label="indexss"
+                  :disabled="TaskModel == 'ANSWER'"
+                >
+                  <div
+                    class="hanzi-box hanzi-box-top"
+                    v-if="itemss.pinyin || itemss.hanzi"
+                  >
+                    <span
+                      v-if="
+                        itemss.pinyin &&
+                        (!items.pinyinSite || items.pinyinSite == 'top')
+                      "
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
+                    <span
+                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                  </div>
+                </el-checkbox>
+              </template>
             </template>
-            <!-- 复选 -->
-            <template v-if="ChildType == 'image_checkBox'">
-              <el-checkbox
-                v-model="curQue.Bookanswer[0].singlechecked"
-                :label="indexss"
-                :disabled="TaskModel == 'ANSWER'"
-                ><span></span
-              ></el-checkbox>
+            <template v-else>
+              <!-- 单选 -->
+              <template v-if="ChildType == 'image_single'">
+                <el-radio
+                  v-model="curQue.Bookanswer[0].single[0].value"
+                  :label="indexss"
+                  :disabled="TaskModel == 'ANSWER'"
+                  @input="changeSingle"
+                >
+                  <div
+                    class="hanzi-box hanzi-box-top"
+                    v-if="itemss.pinyin || itemss.hanzi"
+                  >
+                    <span
+                      v-if="
+                        itemss.pinyin &&
+                        (!items.pinyinSite || items.pinyinSite == 'top')
+                      "
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
+                    <span
+                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                  </div>
+                </el-radio>
+              </template>
+              <!-- 复选 -->
+              <template v-if="ChildType == 'image_checkBox'">
+                <el-checkbox
+                  v-model="curQue.Bookanswer[0].checkBox[0].value"
+                  :label="indexss"
+                  :disabled="TaskModel == 'ANSWER'"
+                  @change="changeCheckBox"
+                >
+                  <div
+                    class="hanzi-box hanzi-box-top"
+                    v-if="itemss.pinyin || itemss.hanzi"
+                  >
+                    <span
+                      v-if="
+                        itemss.pinyin &&
+                        (!items.pinyinSite || items.pinyinSite == 'top')
+                      "
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
+                    <span
+                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
+                      class="pinyin"
+                      >{{ itemss.pinyin }}</span
+                    >
+                  </div>
+                </el-checkbox>
+              </template>
             </template>
-            <div
-              class="hanzi-box hanzi-box-top"
-              v-if="itemss.pinyin || itemss.hanzi"
-            >
-              <span
-                v-if="
-                  itemss.pinyin &&
-                  (!items.pinyinSite || items.pinyinSite == 'top')
-                "
-                class="pinyin"
-                >{{ itemss.pinyin }}</span
-              >
-              <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
-              <span
-                v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
-                class="pinyin"
-                >{{ itemss.pinyin }}</span
-              >
-            </div>
           </div>
         </div>
       </template>
@@ -212,19 +342,19 @@
 <script>
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 import Recorder from "js-audio-recorder"; //录音插件
+import AnswerTitle from "../preview/components/AnswerTitle.vue";
 export default {
-  components: { Soundrecord },
-  props: ["curQue", "ChildType", "TaskModel"],
+  components: { Soundrecord, AnswerTitle },
+  props: ["curQue", "ChildType", "TaskModel", "judgeAnswer"],
   data() {
     return {
       fn_list_obj: "",
       answer: [],
       userAnswer: {
-        input: [], // 输入
-        // dInput: ["", ""], //双输入
-        judge: "", // 判断
-        singleRadio: "",
-        singlechecked: [],
+        input: { input: [] }, //输入
+        judge: [], // 判断
+        single: [],
+        checkBox: [],
         recordList: [],
       }, // 记录用户答题内容
       recorder: new Recorder({
@@ -238,18 +368,224 @@ export default {
       audio: new window.Audio(),
       oldUrl: null, // 存储上个播放音频地址
       mp3Play: "", // 音频播放
+      userErrorNumberTotal: 0,
     };
   },
-  computed: {},
+  computed: {
+    isShowTemp() {
+      let _this = this;
+      let bool = false;
+      if (_this.curQue && _this.curQue.Bookanswer) {
+        if (_this.judgeAnswer == "standardAnswer") {
+          if (_this.userErrorNumberTotal > 0) {
+            bool = true;
+          } else {
+            bool = false;
+          }
+        } else {
+          bool = true;
+        }
+      }
+      return bool;
+    },
+    inputAnswerClass() {
+      return function (key, index) {
+        let _this = this;
+        let classname = "";
+        if (_this.judgeAnswer == "standardAnswer") {
+          classname = "userRight";
+        } else if (
+          _this.judgeAnswer == "studentAnswer" ||
+          _this.judgeAnswer == "userAnswer"
+        ) {
+          let answer = _this.curQue.Bookanswer[0].input.input[index].value;
+          let correct = _this.curQue.correct[0][key][index];
+          if (correct) {
+            if (answer == correct) {
+              classname = "userRight";
+            } else {
+              classname = "userError";
+            }
+          }
+        }
+        return classname;
+      };
+    },
+    judgeAnswerClass() {
+      return function (type) {
+        let _this = this;
+        let classname = "";
+        let answer = _this.curQue.Bookanswer[0].judge[0].value;
+        if (_this.judgeAnswer == "standardAnswer") {
+          if (answer == type) {
+            classname = "userRight_" + type;
+          }
+        } else if (
+          _this.judgeAnswer == "studentAnswer" ||
+          _this.judgeAnswer == "userAnswer"
+        ) {
+          if (answer == type) {
+            let correct = _this.curQue.correct[0].judge[0];
+            if (correct) {
+              if (answer == correct) {
+                classname = "userRight_" + type;
+              } else {
+                classname = "userError_" + type;
+              }
+            }
+          }
+        } else {
+          if (answer == type) {
+            classname = "active";
+          }
+        }
+        return classname;
+      };
+    },
+    singleModel() {
+      let _this = this;
+      let result =
+        _this.judgeAnswer == "standardAnswer"
+          ? _this.curQue.correct[0].single[0]
+          : _this.curQue.Bookanswer[0].single[0].value;
+      return result;
+    },
+    singleAnswerClass() {
+      return function (index) {
+        let _this = this;
+        let classname = "";
+        if (_this.ChildType == "image_single") {
+          let answer = _this.curQue.Bookanswer[0].single[0].value;
+          let correct = _this.curQue.correct[0].single[0];
+          if (_this.judgeAnswer == "standardAnswer") {
+            if ((correct || correct == 0) && index == correct) {
+              classname = "userRight";
+            }
+          } else if (
+            _this.judgeAnswer == "studentAnswer" ||
+            _this.judgeAnswer == "userAnswer"
+          ) {
+            if (correct || correct == 0) {
+              if (answer == correct) {
+                if (answer == index) {
+                  classname = "userRight";
+                }
+              } else {
+                if (answer == index) {
+                  classname = "userError";
+                }
+              }
+            }
+          }
+        }
+        return classname;
+      };
+    },
+    checkBoxAnswerClass() {
+      return function (index) {
+        let _this = this;
+        let classname = "";
+        if (_this.ChildType == "image_checkBox") {
+          let answer = _this.curQue.Bookanswer[0].checkBox[0].value;
+          let correct = _this.curQue.correct[0].checkBox;
+          if (_this.judgeAnswer == "standardAnswer") {
+            if (correct && correct.length > 0) {
+              if (correct.indexOf(index) > -1) {
+                classname = "userRight";
+              }
+            }
+          } else if (
+            _this.judgeAnswer == "studentAnswer" ||
+            _this.judgeAnswer == "userAnswer"
+          ) {
+            if (correct && correct.length > 0) {
+              if (correct.indexOf(index) > -1 && answer.indexOf(index) > -1) {
+                classname = "userRight";
+              } else if (
+                answer.indexOf(index) > -1 &&
+                correct.indexOf(index) < 0
+              ) {
+                classname = "userError";
+              }
+            }
+          }
+        }
+        return classname;
+      };
+    },
+  },
   watch: {},
   //方法集合
   methods: {
     handleFnList() {
-      if (!this.curQue.Bookanswer) {
-        this.$set(this.curQue, "Bookanswer", []);
+      let _this = this;
+      _this.userErrorNumberTotal = 0;
+      if (!_this.curQue.Bookanswer) {
+        _this.curQue.correct.forEach((item, index) => {
+          //单输入
+          if (_this.ChildType == "image_input") {
+            let obj = {
+              input: [{ value: "" }],
+              userAnswerJudge:
+                item.input[0] || item.input[0] === 0 ? "[JUDGE##F##JUDGE]" : "",
+            };
+            _this.userAnswer.input = JSON.parse(JSON.stringify(obj));
+          }
+          //双输入
+          if (_this.ChildType == "image_dobleinput") {
+            let obj = {
+              input: [{ value: "" }, { value: "" }],
+              userAnswerJudge:
+                item.input[0] ||
+                item.input[0] === 0 ||
+                item.input[1] ||
+                item.input[1] === 0
+                  ? "[JUDGE##F##JUDGE]"
+                  : "",
+            };
+            this.userAnswer.input = JSON.parse(JSON.stringify(obj));
+          }
+          //判断
+          if (_this.ChildType == "image_judge") {
+            let obj_judge = {
+              value: "",
+              userAnswerJudge: item.judge.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+            };
+            _this.userAnswer.judge.push(JSON.parse(JSON.stringify(obj_judge)));
+          }
+          //单选
+          if (_this.ChildType == "image_single") {
+            let obj_single = {
+              value: "",
+              userAnswerJudge:
+                item.single.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+            };
+            _this.userAnswer.single.push(
+              JSON.parse(JSON.stringify(obj_single))
+            );
+          }
+          //单选
+          if (_this.ChildType == "image_checkBox") {
+            let obj_box = {
+              value: [],
+              userAnswerJudge:
+                item.checkBox.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+            };
+            _this.userAnswer.checkBox.push(JSON.parse(JSON.stringify(obj_box)));
+          }
+        });
+        _this.$set(_this.curQue, "Bookanswer", []);
         this.curQue.Bookanswer.push(
           JSON.parse(JSON.stringify(this.userAnswer))
         );
+        console.log(_this.curQue.Bookanswer);
+      } else {
+        let BookanswerStr = JSON.stringify(_this.curQue.Bookanswer);
+        let errReg = /\[JUDGE##F##JUDGE\]/g;
+        if (errReg.test(BookanswerStr)) {
+          let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
+          _this.userErrorNumberTotal = errorArr.length;
+        }
       }
       let obj = "";
       this.curQue.fn_list.forEach((node) => {
@@ -278,13 +614,80 @@ export default {
     },
     // 去掉前后空格
     handleInput(key, indexs) {
-      if (indexs || indexs == 0) {
-        let res = this.curQue.Bookanswer[0][key][indexs].trim();
-        this.$set(this.curQue.Bookanswer[0][key], indexs, res);
+      if (indexs || indexs === 0) {
+        let res = this.curQue.Bookanswer[0][key].input[indexs].value.trim();
+        this.$set(this.curQue.Bookanswer[0][key].input[indexs], "value", res);
+        let hasError = false,
+          hasRight = false;
+        this.curQue.correct[0].input.forEach((item, index) => {
+          let answer = this.curQue.Bookanswer[0][key].input[index].value;
+          if (item) {
+            if (item != answer) {
+              hasError = true;
+            } else {
+              hasRight = true;
+            }
+          }
+        });
+        if (hasError) {
+          this.$set(
+            this.curQue.Bookanswer[0][key],
+            "userAnswerJudge",
+            "[JUDGE##F##JUDGE]"
+          );
+        }
+        if (!hasError && hasRight) {
+          this.$set(
+            this.curQue.Bookanswer[0][key],
+            "userAnswerJudge",
+            "[JUDGE##T##JUDGE]"
+          );
+        }
       } else {
         this.curQue.Bookanswer[0][key] = this.curQue.Bookanswer[0][key].trim();
       }
     },
+    changeSingle(value) {
+      let _this = this;
+      let correct = _this.curQue.correct[0].single[0];
+      if (correct || correct == 0) {
+        if (value == correct) {
+          this.$set(
+            this.curQue.Bookanswer[0].single[0],
+            "userAnswerJudge",
+            "[JUDGE##T##JUDGE]"
+          );
+        } else {
+          this.$set(
+            this.curQue.Bookanswer[0].single[0],
+            "userAnswerJudge",
+            "[JUDGE##F##JUDGE]"
+          );
+        }
+      }
+    },
+    changeCheckBox() {
+      let _this = this;
+      let value = _this.curQue.Bookanswer[0].checkBox[0].value;
+      let valueStr = value.sort().toString();
+      let correct = _this.curQue.correct[0].checkBox;
+      let correctStr = correct.sort().toString();
+      if (correct && correct.length > 0) {
+        if (valueStr == correctStr) {
+          this.$set(
+            this.curQue.Bookanswer[0].checkBox[0],
+            "userAnswerJudge",
+            "[JUDGE##T##JUDGE]"
+          );
+        } else {
+          this.$set(
+            this.curQue.Bookanswer[0].checkBox[0],
+            "userAnswerJudge",
+            "[JUDGE##F##JUDGE]"
+          );
+        }
+      }
+    },
     playmicrophone(url, type) {
       if (url) {
         let _this = this;
@@ -312,8 +715,26 @@ export default {
     },
     // 判断题选择
     handleSelectJudge(obj) {
-      if (this.TaskModel != "ANSWER") {
-        this.curQue.Bookanswer[0].judge = obj;
+      let _this = this;
+      if (_this.TaskModel != "ANSWER" || !judgeAnswer) {
+        _this.$set(_this.curQue.Bookanswer[0].judge[0], "value", obj);
+        let correct = _this.curQue.correct[0].judge[0];
+        if (correct) {
+          if (correct == obj) {
+            _this.$set(
+              _this.curQue.Bookanswer[0].judge[0],
+              "userAnswerJudge",
+              "[JUDGE##T##JUDGE]"
+            );
+          } else {
+            _this.$set(
+              _this.curQue.Bookanswer[0].judge[0],
+              "userAnswerJudge",
+              "[JUDGE##F##JUDGE]"
+            );
+          }
+        }
+        console.log(_this.curQue.Bookanswer[0].judge[0]);
       }
     },
     handleWav(list, tmIndex) {
@@ -386,6 +807,16 @@ export default {
         align-items: center;
         justify-content: center;
         margin-bottom: 8px;
+        border: 1px transparent solid;
+        border-radius: 4px;
+        &.userRight {
+          background: rgba(44, 167, 103, 0.1);
+          border-color: #2ca767;
+        }
+        &.userError {
+          background: rgba(237, 52, 45, 0.1);
+          border-color: #ed342d;
+        }
       }
       .option1 {
         width: 100%;
@@ -440,6 +871,12 @@ export default {
       &.singleInput {
         margin-top: 8px;
       }
+      &.userRight {
+        color: #2ca767;
+      }
+      &.userError {
+        color: #ed342d;
+      }
     }
     .luyinVoice-box {
       width: 100%;
@@ -545,16 +982,39 @@ export default {
           background-color: #e5fff0;
           border-color: #00c850;
         }
-      }
-      a.error-btn {
-        background: #f7f7f7 url("../../../assets/newImage/common/error-btn.png")
-          center no-repeat;
-        background-size: 24px;
-        margin-left: 4px;
-        &.error-btn-hover:hover,
-        &.active {
-          background-color: #ffe5e5;
-          border-color: #de4444;
+        &.error-btn {
+          background: #f7f7f7
+            url("../../../assets/newImage/common/error-btn.png") center
+            no-repeat;
+          background-size: 24px;
+          margin-left: 4px;
+          &.error-btn-hover:hover,
+          &.active {
+            background-color: #ffe5e5;
+            border-color: #de4444;
+          }
+        }
+        &.userRight_true {
+          background-color: rgba(44, 167, 103, 0.1);
+          border: 1px solid #2ca767;
+        }
+        &.userError_true {
+          border: 1px solid #ed342d;
+          background: rgba(237, 52, 45, 0.1)
+            url("../../../assets/newImage/common/judge-dui.png") center
+            no-repeat;
+          background-size: 24px;
+        }
+        &.userRight_false {
+          border: 1px solid #2ca767;
+          background: rgba(44, 167, 103, 0.1)
+            url("../../../assets/newImage/common/judge-cuo.png") center
+            no-repeat;
+          background-size: 24px;
+        }
+        &.userError_false {
+          background-color: rgba(237, 52, 45, 0.1);
+          border: 1px solid #ed342d;
         }
       }
     }
@@ -585,4 +1045,14 @@ li {
     padding: 0;
   }
 }
+.xxoption {
+  label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    > .el-radio__label {
+      margin-left: 8px;
+    }
+  }
+}
 </style>

src/components/Adult/preview/SelectTone.vue

@@ -22,7 +22,7 @@
     </div>
     <ul>
       <li v-for="(item, index) in curQue.option" :key="index">
-        <div v-if="isShowOption(item, index)">
+        <div class="op-li" v-if="isShowOption(item, index)">
           <a
             v-if="curQue.wordTime && curQue.wordTime.length > 0"
             :class="[
@@ -179,11 +179,7 @@ export default {
     },
     handleClick(index, indexs) {
       let _this = this;
-      if (
-        !_this.TaskModel ||
-        _this.TaskModel != "ANSWER" ||
-        !_this.judgeAnswer
-      ) {
+      if (!_this.TaskModel || _this.TaskModel != "ANSWER") {
         _this.$set(_this.curQue.Bookanswer[index], "value", indexs);
         if (_this.curQue.option[index].answer) {
           let answer = _this.curQue.option[index].answer - 1;
@@ -274,7 +270,7 @@ export default {
     align-items: flex-start;
     padding: 24px 12px;
 
-    div {
+    div.op-li {
       width: 363px;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);