Merge branch 'gcj'

# Conflicts:
#	src/views/courseView.vue

src/components/Adult/preview/SelectTone.vue

@@ -1,11 +1,27 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes SelectTone" v-if="curQue">
+  <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>
+
     <div
       class="aduioLine-box"
       v-if="
         curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
       "
+      :style="{ height: judgeAnswer == 'standardAnswer' ? '0px' : 'auto' }"
     >
       <AudioLine
         audioId="sentenceListenAudio"
@@ -19,32 +35,40 @@
       />
     </div>
     <ul>
-      <li v-for="(item, index) in curQue.option" :key="index">
-        <a
-          :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>
-        <!-- <Audio
-          :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
-          :themeColor="themeColor"
-          class="audio-play"
-        /> -->
-        <div v-html="item.con" class="con"></div>
-        <a
-          v-for="(itmes, indexs) in toneList"
-          :key="indexs"
-          :class="['tone-item', curQue.Bookanswer[index] === indexs ? 'active' : '']"
-          @click="handleClick(index, indexs)"
-        >
-          <img :src="itmes" />
-        </a>
+      <li
+        v-for="(item, index) in curQue.option"
+        :key="index"
+        v-if="isShowOption(item, index)"
+      >
+        <!-- {{ judgeAnswer == "standardAnswer" && !item.answer }} 不显示 -->
+        <template>
+          <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>
+          <div v-html="item.con" class="con"></div>
+          <a
+            v-for="(itmes, indexs) in toneList"
+            :key="indexs"
+            :class="['tone-item', lookanswerClass(index, indexs)]"
+            @click="handleClick(index, indexs)"
+          >
+            <img :src="itmes" />
+          </a>
+        </template>
       </li>
     </ul>
   </div>
@@ -56,7 +80,7 @@ import AudioLine from "../preview/AudioLine.vue";
 
 export default {
   components: { Audio, AudioLine },
-  props: ["curQue", "themeColor","TaskModel"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
   data() {
     return {
       toneList: [
@@ -71,63 +95,167 @@ export default {
       stopAudio: false,
       timer: null,
       ed: null,
+      userErrorNumberTotal: 0,
     };
   },
-  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 _this = this;
-      let userSelect = [];
-      _this.curQue.option.forEach((item) => {
-        userSelect.push("");
-      });
-      if (!this.curQue.Bookanswer) {
-          this.$set(this.curQue, "Bookanswer", userSelect);
+      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'){
-            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]"
+            );
+          }
         }
+      }
     },
-    handleChangeTime(time,edTime) {
+    handleChangeTime(time, edTime) {
       let _this = this;
-    //   if(!_this.stopAudio){
-    //       _this.timer = setInterval(() => {
-    //         if(_this.curTime >= edTime){
-    //             _this.stopAudio = false
-    //             _this.$refs.audioLine.onTimeupdateTime(_this.curTime / 1000, false);
-    //             clearInterval(_this.timer);
-    //         }
-    //     }, 200);
-    //   }
+      //   if(!_this.stopAudio){
+      //       _this.timer = setInterval(() => {
+      //         if(_this.curTime >= edTime){
+      //             _this.stopAudio = false
+      //             _this.$refs.audioLine.onTimeupdateTime(_this.curTime / 1000, false);
+      //             clearInterval(_this.timer);
+      //         }
+      //     }, 200);
+      //   }
       _this.curTime = time;
-      _this.stopAudio = true
+      _this.stopAudio = true;
       _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      _this.ed = edTime
+      _this.ed = edTime;
     },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
     handleListenRead(playFlag) {
       this.stopAudio = playFlag;
-      if(this.timer){
-          clearInterval(this.timer);
+      if (this.timer) {
+        clearInterval(this.timer);
       }
     },
-    emptyEd(){
-        this.ed = null;
-    }
+    emptyEd() {
+      this.ed = null;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      if(this.timer){
-          clearInterval(this.timer);
-      }
-      this.handleData()
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -136,14 +264,14 @@ export default {
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {
-      if(this.timer){
-          clearInterval(this.timer);
-      }
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
   }, //生命周期 - 销毁之前
   destroyed() {
-      if(this.timer){
-          clearInterval(this.timer);
-      }
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
   }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -199,9 +327,19 @@ export default {
       a {
         margin-left: 8px;
         font-size: 0;
+        border: 1px #fff solid;
+        border-radius: 4px;
         &.active {
           background: #98d1eb;
-          border-radius: 4px;
+          border-color: #98d1eb;
+        }
+        &.userRight {
+          background: rgba(44, 167, 103, 0.1);
+          border-color: #2ca767;
+        }
+        &.userError {
+          background: rgba(237, 52, 45, 0.1);
+          border-color: #ed342d;
         }
         img {
           width: 24px;

src/components/Adult/preview/SelectYinjie.vue

@@ -1,44 +1,48 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes SelectYinjie" v-if="curQue">
-      <div
-        class="aduioLine-box"
-        v-if="
-            curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
-        "
-        >
-        <AudioLine
-            audioId="SelectYinjieAudio"
-            :mp3="curQue.mp3_list[0].id"
-            :getCurTime="getCurTime"
-            :themeColor="themeColor"
-            :ed="ed"
-            type="audioLine"
-            ref="audioLine"
-            @handleListenRead="handleListenRead"
-        />
+  <div
+    class="Big-Book-prev-Textdes SelectYinjie"
+    v-if="curQue && curQue.Bookanswer"
+  >
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
+      "
+      :style="{ height: judgeAnswer == 'standardAnswer' ? '0px' : 'auto' }"
+    >
+      <AudioLine
+        audioId="SelectYinjieAudio"
+        :mp3="curQue.mp3_list[0].id"
+        :getCurTime="getCurTime"
+        :themeColor="themeColor"
+        :ed="ed"
+        type="audioLine"
+        ref="audioLine"
+        @handleListenRead="handleListenRead"
+      />
     </div>
     <div class="item-box" v-for="(item, index) in curQue.option" :key="index">
-      <!-- <Audio
-        :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
-        :themeColor="themeColor"
-        class="audio-play"
-      /> -->
       <a
+        v-if="curQue.wordTime && curQue.wordTime.length > 0"
         :class="[
-        'play-btn',
-        curTime >= curQue.wordTime[index].bg &&
-        curTime < curQue.wordTime[index].ed &&
-        stopAudio
+          'play-btn',
+          curTime >= curQue.wordTime[index].bg &&
+          curTime < curQue.wordTime[index].ed &&
+          stopAudio
             ? 'active'
             : '',
         ]"
-        @click="handleChangeTime(curQue.wordTime[index].bg,curQue.wordTime[index].ed)"
+        @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="[curQue.Bookanswer[index].indexOf(indexs) > -1 ? 'active' : '']"
+          :class="[
+            curQue.Bookanswer[index].indexOf(indexs) > -1 ? 'active' : '',
+          ]"
           v-for="(items, indexs) in item.option"
           :key="indexs"
           @click="handleClick(index, indexs)"
@@ -47,7 +51,13 @@
         </p>
       </div>
       <a
-        :class="['clear-btn', curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER' ? 'active' : '',TaskModel == 'ANSWER'?'notAllow':'']"
+        :class="[
+          'clear-btn',
+          curQue.Bookanswer[index].length > 0 && TaskModel != 'ANSWER'
+            ? 'active'
+            : '',
+          TaskModel == 'ANSWER' ? 'notAllow' : '',
+        ]"
         @click="handleClear(index)"
       ></a>
     </div>
@@ -59,13 +69,13 @@ import AudioLine from "../preview/AudioLine.vue";
 
 export default {
   components: { AudioLine },
-  props: ["curQue", "themeColor","TaskModel"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
   data() {
     return {
       userList: [],
       curTime: 0,
       stopAudio: false,
-      ed:null,
+      ed: null,
     };
   },
   computed: {},
@@ -78,18 +88,21 @@ export default {
         userList.push([]);
       });
       if (!this.curQue.Bookanswer) {
-          this.$set(this.curQue, "Bookanswer", userList);
+        this.$set(this.curQue, "Bookanswer", userList);
       }
     },
     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]);
-            }
+      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]);
         }
+      }
     },
     handleClear(index) {
       this.$set(this.curQue.Bookanswer, index, []);
@@ -98,19 +111,19 @@ export default {
       this.curTime = curTime * 1000;
     },
     //点击播放某个句子
-    handleChangeTime(time,edTime) {
+    handleChangeTime(time, edTime) {
       let _this = this;
       _this.curTime = time;
-      _this.stopAudio = true
+      _this.stopAudio = true;
       _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      _this.ed = edTime
+      _this.ed = edTime;
     },
     handleListenRead(playFlag) {
       this.stopAudio = playFlag;
     },
-    emptyEd(){
-        this.ed = null;
-    }
+    emptyEd() {
+      this.ed = null;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -136,8 +149,8 @@ export default {
   box-sizing: border-box;
   border-radius: 8px;
   padding: 24px;
-  .aduioLine-box{
-      margin-bottom: 8px;
+  .aduioLine-box {
+    margin-bottom: 8px;
   }
   .item-box {
     display: flex;
@@ -163,16 +176,16 @@ export default {
       line-height: 16px;
     }
     .play-btn {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        background: url("../../../assets/NPC/play-red.png") center no-repeat;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      background: url("../../../assets/NPC/play-red.png") center no-repeat;
+      background-size: cover;
+      &.active {
+        background-image: url("../../../assets/NPC/icon-voice-play-red.png");
         background-size: cover;
-        &.active {
-          background-image: url("../../../assets/NPC/icon-voice-play-red.png");
-          background-size: cover;
-        }
       }
+    }
     .zijie-box {
       flex: 1;
       display: flex;
@@ -191,15 +204,19 @@ 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);
+        &: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 no-repeat;
+          background: rgba(0, 188, 75, 0.05)
+            url("../../../assets/NPC/selectYinjie-active.png") right bottom
+            no-repeat;
           background-size: 11px;
-          border: 1px solid #00BC4B;
+          border: 1px solid #00bc4b;
         }
       }
     }
@@ -214,8 +231,8 @@ export default {
           center no-repeat;
         background-size: 100%;
       }
-      &.notAllow{
-          cursor: not-allowed;
+      &.notAllow {
+        cursor: not-allowed;
       }
     }
   }
@@ -223,34 +240,34 @@ export default {
 .NPC-Big-Book-preview-green {
   .SelectYinjie {
     .item-box {
-        b {
-          background: #24b99e;
-        }
-        .play-btn {
-          background: url("../../../assets/NPC/play-green.png") center no-repeat;
+      b {
+        background: #24b99e;
+      }
+      .play-btn {
+        background: url("../../../assets/NPC/play-green.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-green.png");
           background-size: cover;
-          &.active {
-            background-image: url("../../../assets/NPC/icon-voice-play-green.png");
-            background-size: cover;
-          }
         }
+      }
     }
   }
 }
 .NPC-Big-Book-preview-brown {
   .SelectYinjie {
     .item-box {
-        b {
-          background: #bd8865;
-        }
-        .play-btn {
-          background: url("../../../assets/NPC/play-brown.png") center no-repeat;
+      b {
+        background: #bd8865;
+      }
+      .play-btn {
+        background: url("../../../assets/NPC/play-brown.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
           background-size: cover;
-          &.active {
-            background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
-            background-size: cover;
-          }
         }
+      }
     }
   }
 }

src/views/courseView.vue

@@ -109,8 +109,7 @@ export default {
           ],
         },
       ],
-      bookAnswerContent:
-        '[{"table_list":[[{"data":{"Bookanswer":[{"answer":"我的名字叫马大为。","recordList":[],"userAnswerJudge":"[JUDGE##F##JUDGE]"},{"answer":"哈哈哈","recordList":[],"userAnswerJudge":"[JUDGE##F##JUDGE]"}]}}]]}]',
+      bookAnswerContent: "",
       TaskModel: "", // TEST 考试模式； PRACTICE 练习模式； ANSWER 查看答案模式； 空 预览模式
       category: "",
       FatherTreeData: null,