选择音节-完成

src/components/Adult/preview/SelectTone.vue

@@ -1,21 +1,7 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes SelectTone" v-if="isShowTemp">
-    <h6
-      v-if="judgeAnswer == 'userAnswer' || judgeAnswer == 'studentAnswer'"
-      class="standardTitle"
-      style="margin: 10px 0 8px 24px"
-    >
-      {{ judgeAnswer == "userAnswer" ? "Your answer" : "Student answers" }}
-    </h6>
-    <h6
-      v-else-if="judgeAnswer == 'standardAnswer'"
-      class="standardTitle"
-      style="margin: 10px  0 8px 24px"
-    >
-      Standard answer
-    </h6>
-
+    <AnswerTitle :judgeAnswer="judgeAnswer" />
     <div
       class="aduioLine-box"
       v-if="
@@ -35,13 +21,8 @@
       />
     </div>
     <ul>
-      <li
-        v-for="(item, index) in curQue.option"
-        :key="index"
-        v-if="isShowOption(item, index)"
-      >
-        <!-- {{ judgeAnswer == "standardAnswer" && !item.answer }} 不显示 -->
-        <template>
+      <li v-for="(item, index) in curQue.option" :key="index">
+        <div v-if="isShowOption(item, index)">
           <a
             v-if="curQue.wordTime && curQue.wordTime.length > 0"
             :class="[
@@ -68,7 +49,7 @@
           >
             <img :src="itmes" />
           </a>
-        </template>
+        </div>
       </li>
     </ul>
   </div>
@@ -77,9 +58,10 @@
 <script>
 import Audio from "../preview/components/AudioRed.vue"; // 音频播放
 import AudioLine from "../preview/AudioLine.vue";
+import AnswerTitle from "../preview/components/AnswerTitle.vue";
 
 export default {
-  components: { Audio, AudioLine },
+  components: { Audio, AudioLine, AnswerTitle },
   props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
   data() {
     return {
@@ -292,7 +274,7 @@ export default {
     align-items: flex-start;
     padding: 24px 12px;
 
-    li {
+    div {
       width: 363px;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);

src/components/Adult/preview/SelectYinjie.vue

@@ -1,9 +1,9 @@
 <!--  -->
 <template>
-  <div
-    class="Big-Book-prev-Textdes SelectYinjie"
-    v-if="curQue && curQue.Bookanswer"
-  >
+  <div class="Big-Book-prev-Textdes SelectYinjie" v-if="isShowTemp">
+    <div>
+      <AnswerTitle :judgeAnswer="judgeAnswer" />
+    </div>
     <div
       class="aduioLine-box"
       v-if="
@@ -22,53 +22,61 @@
         @handleListenRead="handleListenRead"
       />
     </div>
-    <div class="item-box" v-for="(item, index) in curQue.option" :key="index">
-      <a
-        v-if="curQue.wordTime && curQue.wordTime.length > 0"
-        :class="[
-          'play-btn',
-          curTime >= curQue.wordTime[index].bg &&
-          curTime < curQue.wordTime[index].ed &&
-          stopAudio
-            ? 'active'
-            : '',
-        ]"
-        @click="
-          handleChangeTime(curQue.wordTime[index].bg, curQue.wordTime[index].ed)
-        "
-      ></a>
-      <b v-if="item.number">{{ item.number }}</b>
-      <div class="zijie-box">
-        <p
+    <div v-for="(item, index) in curQue.option" :key="index">
+      <div class="item-box" v-if="isShowOption(item, index)">
+        <a
+          v-if="curQue.wordTime && curQue.wordTime.length > 0"
+          :class="[
+            'play-btn',
+            curTime >= curQue.wordTime[index].bg &&
+            curTime < curQue.wordTime[index].ed &&
+            stopAudio
+              ? 'active'
+              : '',
+          ]"
+          @click="
+            handleChangeTime(
+              curQue.wordTime[index].bg,
+              curQue.wordTime[index].ed
+            )
+          "
+        ></a>
+        <b v-if="item.number">{{ item.number }}</b>
+        <div class="zijie-box">
+          <p
+            :class="[
+              !judgeAnswer ? 'exercise-model' : '',
+              lookanswerClass(index, indexs),
+            ]"
+            v-for="(items, indexs) in item.option"
+            :key="indexs"
+            @click="handleClick(index, indexs)"
+          >
+            {{ items.pinyin }}
+          </p>
+        </div>
+        <a
+          v-if="!judgeAnswer"
           :class="[
-            curQue.Bookanswer[index].indexOf(indexs) > -1 ? 'active' : '',
+            'clear-btn',
+            curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER'
+              ? 'active'
+              : '',
+            TaskModel == 'ANSWER' ? 'notAllow' : '',
           ]"
-          v-for="(items, indexs) in item.option"
-          :key="indexs"
-          @click="handleClick(index, indexs)"
-        >
-          {{ items.pinyin }}
-        </p>
+          @click="handleClear(index)"
+        ></a>
       </div>
-      <a
-        :class="[
-          'clear-btn',
-          curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER'
-            ? 'active'
-            : '',
-          TaskModel == 'ANSWER' ? 'notAllow' : '',
-        ]"
-        @click="handleClear(index)"
-      ></a>
     </div>
   </div>
 </template>
 
 <script>
 import AudioLine from "../preview/AudioLine.vue";
+import AnswerTitle from "../preview/components/AnswerTitle.vue";
 
 export default {
-  components: { AudioLine },
+  components: { AudioLine, AnswerTitle },
   props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
   data() {
     return {
@@ -78,34 +86,152 @@ export default {
       ed: null,
     };
   },
-  computed: {},
+  computed: {
+    lookanswerClass() {
+      return function (index, indexs) {
+        let _this = this;
+        let className = "";
+        let userAnswer = this.curQue.Bookanswer[index].value.toString();
+        if (this.curQue.option[index].answer) {
+          let answer = (this.curQue.option[index].answer - 1).toString();
+          if (_this.judgeAnswer == "standardAnswer") {
+            if (indexs.toString() === answer) {
+              className = "userRight";
+            } else {
+              className = "";
+            }
+          } else if (
+            _this.judgeAnswer == "userAnswer" ||
+            _this.judgeAnswer == "studentAnswer"
+          ) {
+            if (indexs.toString() === userAnswer) {
+              if (answer === userAnswer) {
+                className = "userRight";
+              } else {
+                className = "userError";
+              }
+            } else {
+              className = "";
+            }
+          }
+        }
+
+        if (!_this.judgeAnswer && userAnswer == indexs.toString()) {
+          className = "active";
+        }
+
+        return className;
+      };
+    },
+    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;
+    },
+    isShowOption() {
+      return function (item, index) {
+        let _this = this;
+        let bool = true;
+        if (_this.judgeAnswer == "standardAnswer") {
+          if (!item.answer) {
+            bool = false;
+          } else if (
+            _this.curQue.Bookanswer[index].userAnswerJudge ==
+            "[JUDGE##T##JUDGE]"
+          ) {
+            bool = false;
+          }
+        }
+        return bool;
+      };
+    },
+  },
   watch: {},
   //方法集合
   methods: {
+    // 处理数据
     handleData() {
-      let userList = [];
-      this.curQue.option.forEach((item) => {
-        userList.push([]);
+      let _this = this;
+      let option = JSON.parse(JSON.stringify(_this.curQue.option));
+      option.forEach((item, index) => {
+        item.answer = null;
+        for (let i = 0; i < item.option.length; i++) {
+          let oItem = item.option[i];
+          if (oItem.isAnswer) {
+            item.answer = i + 1;
+            break;
+          }
+        }
       });
-      if (!this.curQue.Bookanswer) {
-        this.$set(this.curQue, "Bookanswer", userList);
+      _this.$set(_this.curQue, "option", JSON.parse(JSON.stringify(option)));
+      if (!_this.curQue.Bookanswer) {
+        let userSelect = [];
+        _this.curQue.option.forEach((item) => {
+          let obj = {
+            value: "",
+            userAnswerJudge: item.answer ? "[JUDGE##F##JUDGE]" : "",
+          };
+          userSelect.push(JSON.parse(JSON.stringify(obj)));
+        });
+        _this.$set(this.curQue, "Bookanswer", userSelect);
+      } 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;
+        }
       }
     },
     handleClick(index, indexs) {
-      if (!this.TaskModel || this.TaskModel != "ANSWER") {
-        if (this.curQue.Bookanswer[index].indexOf(indexs) > -1) {
-          this.curQue.Bookanswer[index].splice(
-            this.curQue.Bookanswer[index].indexOf(indexs),
-            1
-          );
-        } else {
-          // this.userList[index].push(indexs);
-          this.$set(this.curQue.Bookanswer, index, [indexs]);
+      let _this = this;
+      if (
+        !_this.TaskModel ||
+        _this.TaskModel != "ANSWER" ||
+        !_this.judgeAnswer
+      ) {
+        _this.$set(_this.curQue.Bookanswer[index], "value", indexs);
+        if (_this.curQue.option[index].answer) {
+          let answer = _this.curQue.option[index].answer - 1;
+          if (indexs.toString() === answer.toString()) {
+            _this.$set(
+              _this.curQue.Bookanswer[index],
+              "userAnswerJudge",
+              "[JUDGE##T##JUDGE]"
+            );
+          } else {
+            _this.$set(
+              _this.curQue.Bookanswer[index],
+              "userAnswerJudge",
+              "[JUDGE##F##JUDGE]"
+            );
+          }
         }
       }
     },
     handleClear(index) {
-      this.$set(this.curQue.Bookanswer, index, []);
+      let _this = this;
+      _this.$set(_this.curQue.Bookanswer[index], "value", "");
+      let userAnswerJudge = _this.curQue.option[index].answer
+        ? "[JUDGE##F##JUDGE]"
+        : "";
+      _this.$set(
+        _this.curQue.Bookanswer[index],
+        "userAnswerJudge",
+        userAnswerJudge
+      );
     },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
@@ -204,13 +330,7 @@ export default {
         cursor: pointer;
         font-family: "GB-PINYINOK-B";
         overflow: hidden;
-        &:hover {
-          background: rgba(0, 0, 0, 0.05)
-            url("../../../assets/NPC/selectYinjie-hover.png") right bottom
-            no-repeat;
-          background-size: 11px;
-          border: 1px solid rgba(0, 0, 0, 0.1);
-        }
+
         &.active {
           background: rgba(0, 188, 75, 0.05)
             url("../../../assets/NPC/selectYinjie-active.png") right bottom
@@ -218,6 +338,23 @@ export default {
           background-size: 11px;
           border: 1px solid #00bc4b;
         }
+        &.userRight {
+          background: rgba(44, 167, 103, 0.1);
+          border-color: #2ca767;
+        }
+        &.userError {
+          background: rgba(237, 52, 45, 0.1);
+          border-color: #ed342d;
+        }
+      }
+      .exercise-model {
+        &:hover {
+          background: rgba(0, 0, 0, 0.05)
+            url("../../../assets/NPC/selectYinjie-hover.png") right bottom
+            no-repeat;
+          background-size: 11px;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+        }
       }
     }
     .clear-btn {

src/views/courseView.vue

@@ -109,7 +109,8 @@ export default {
           ],
         },
       ],
-      bookAnswerContent: "",
+      bookAnswerContent:
+        '[{"table_list":[[{"data":{"Bookanswer":[{"value":0,"userAnswerJudge":"[JUDGE##F##JUDGE]"},{"value":1,"userAnswerJudge":""},{"value":0,"userAnswerJudge":"[JUDGE##T##JUDGE]"}]}}]]}]',
       TaskModel: "", // TEST 考试模式； PRACTICE 练习模式； ANSWER 查看答案模式； 空 预览模式
       category: "",
       FatherTreeData: null,