完善输入+录音，

文本+输入+录音、句子填空、句子判断，错误正确字段增加， 及studentAnswer和standardAnswer预览实现

src/components/Adult/inputModules/Sentence.vue

@@ -196,7 +196,7 @@ export default {
               wordsList: [],
             },
             en: "", //英文
-            answer: [""],
+            answer: [],
             judge: true,
           },
         ],

src/components/Adult/preview/InputHasRecord.vue

@@ -124,14 +124,13 @@
         </div>
         <div class="inputInner">
           <el-input
-            :style="{ color: items.color }"
             :class="[
               'textarea',
               items.record ? '' : 'textareaNoRecord',
               'correct',
             ]"
             type="textarea"
-            v-model="curQue.option[indexs].answer"
+            v-model="items.answer"
             placeholder="输入"
             maxlength="200"
             :readonly="TaskModel == 'ANSWER'"
@@ -489,21 +488,23 @@ export default {
   methods: {
     changeuserAnswerJudge(index) {
       let _this = this;
-      if (
-        _this.curQue.option[index].answer ==
-        _this.curQue.Bookanswer[index].answer.trim()
-      ) {
-        _this.$set(
-          _this.curQue.Bookanswer[index],
-          "userAnswerJudge",
-          "[JUDGE##T##JUDGE]"
-        );
-      } else {
-        _this.$set(
-          _this.curQue.Bookanswer[index],
-          "userAnswerJudge",
-          "[JUDGE##F##JUDGE]"
-        );
+      if (_this.curQue.option[index].answer) {
+        if (
+          _this.curQue.option[index].answer ==
+          _this.curQue.Bookanswer[index].answer.trim()
+        ) {
+          _this.$set(
+            _this.curQue.Bookanswer[index],
+            "userAnswerJudge",
+            "[JUDGE##T##JUDGE]"
+          );
+        } else {
+          _this.$set(
+            _this.curQue.Bookanswer[index],
+            "userAnswerJudge",
+            "[JUDGE##F##JUDGE]"
+          );
+        }
       }
     },
     handleWav(list, tmIndex) {
@@ -545,17 +546,6 @@ export default {
             this.userErrList.push(obj);
           }
         });
-      } else if (this.judgeAnswer == "userAnswer") {
-        // 判断对错 颜色展示
-        // this.curQue.option.forEach((item, i) => {
-        //   if (this.Bookanswer[i].userAnswerJudge == "[JUDGE##F##JUDGE]") {
-        //     item.color = "#ED342D";
-        //   } else if (
-        //     this.Bookanswer[i].userAnswerJudge == "[JUDGE##T##JUDGE]"
-        //   ) {
-        //     item.color = "#2CA767";
-        //   }
-        // });
       }
     },
     //词和标点合一起

src/components/Adult/preview/SentenceInput.vue

@@ -3,7 +3,22 @@
   <div class="Big-Book-prev-Textdes" v-if="curQue">
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <ul>
-      <li v-for="(items, indexs) in curQue.option" :key="indexs">
+      <li
+        v-for="(items, indexs) in judgeAnswer == 'standardAnswer'
+          ? userErrList
+          : curQue.option"
+        :key="indexs"
+        :class="[
+          judgeAnswer == 'standardAnswer' ? 'standardAnswer' : '',
+          judgeAnswer == 'standardAnswer'
+            ? 'correct'
+            : curQue.Bookanswer[indexs].userAnswerJudge
+            ? curQue.Bookanswer[indexs].userAnswerJudge == '[JUDGE##F##JUDGE]'
+              ? 'error'
+              : 'correct'
+            : '',
+        ]"
+      >
         <b class="xuhao" v-if="items.number">{{ items.number }}</b>
         <p
           :class="[oldsrc == items.mp3_list[0].id ? palyClass : '']"
@@ -99,13 +114,27 @@
                   <!-- 
                     v-model="answerList[indexs].pinyin"
                    -->
-                  <p class="pinyin" :class="[conent.pinyin.indexOf('__')>-1?'pinyin-opacity':'']" v-if="conent.pinyin">
+                  <p
+                    class="pinyin"
+                    :class="[
+                      conent.pinyin.indexOf('__') > -1 ? 'pinyin-opacity' : '',
+                    ]"
+                    v-if="conent.pinyin"
+                  >
                     {{ conent.pinyin }}
                   </p>
                 </template>
-                <template v-if="conent.chs.indexOf('__')>-1">
-                    <!-- {{items.detail.resArr[conIndex].inputNumber}} -->
-                  <EditDiv class="input chs" v-model='curQue.Bookanswer[indexs].answerList[items.detail.resArr[conIndex].inputNumber].chs' :canEdit="TaskModel=='ANSWER'?false:true"></EditDiv>
+                <template v-if="conent.chs.indexOf('__') > -1">
+                  <!-- {{items.detail.resArr[conIndex].inputNumber}} -->
+                  <EditDiv
+                    class="input chs"
+                    v-model="
+                      curQue.Bookanswer[indexs].answerList[
+                        items.detail.resArr[conIndex].inputNumber
+                      ].chs
+                    "
+                    :canEdit="TaskModel == 'ANSWER' ? false : true"
+                  ></EditDiv>
                   <!-- <el-input
                     class="input chs"
                     type="textarea"
@@ -132,7 +161,13 @@
                     v-html="answerList[indexs].pinyin"
                     @change="changeAnswerList($event, indexs, 'pinyin')"
                   ></div> -->
-                  <p class="pinyin" :class="[conent.pinyin.indexOf('__')>-1?'pinyin-opacity':'']" v-if="conent.pinyin">
+                  <p
+                    class="pinyin"
+                    :class="[
+                      conent.pinyin.indexOf('__') > -1 ? 'pinyin-opacity' : '',
+                    ]"
+                    v-if="conent.pinyin"
+                  >
                     {{ conent.pinyin }}
                   </p>
                 </template>
@@ -140,27 +175,52 @@
             </div>
           </template>
         </div>
-        <template v-if="dataType.indexOf('sentence_answer_chs') > -1 || dataType.indexOf('sentence_input_chs') > -1">
+        <template
+          v-if="
+            dataType.indexOf('sentence_answer_chs') > -1 ||
+            dataType.indexOf('sentence_input_chs') > -1
+          "
+        >
           <input
             @input="handleInput"
             :class="['item-input']"
-            v-model="curQue.Bookanswer[indexs].answer"
+            v-model="
+              judgeAnswer == 'standardAnswer'
+                ? items.answer[0]
+                : curQue.Bookanswer[indexs].answer
+            "
             placeholder="输入"
+            @change="changeuserAnswerJudge(indexs)"
           />
         </template>
         <template v-if="dataType.indexOf('sentence_judge_chs') > -1">
-          <div class="judge-box" :class="[TaskModel == 'ANSWER'?'notAllow':'']">
+          <div
+            class="judge-box"
+            :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']"
+          >
             <a
               :class="[
                 'right-btn',
-                curQue.Bookanswer[indexs].answer == 'right' ? 'active' : '',
+                judgeAnswer == 'standardAnswer'
+                  ? items.judge
+                    ? 'active active-right-btn'
+                    : ''
+                  : curQue.Bookanswer[indexs].answer == 'right'
+                  ? 'active active-right-btn'
+                  : '',
               ]"
               @click="handleSelectJudge('right', indexs)"
             ></a>
             <a
               :class="[
                 'error-btn',
-                curQue.Bookanswer[indexs].answer == 'error' ? 'active' : '',
+                judgeAnswer == 'standardAnswer'
+                  ? items.judge
+                    ? ''
+                    : 'active active-error-btn'
+                  : curQue.Bookanswer[indexs].answer == 'error'
+                  ? 'active active-error-btn'
+                  : '',
               ]"
               @click="handleSelectJudge('error', indexs)"
             ></a>
@@ -175,7 +235,7 @@
               :TaskModel="TaskModel"
               type="normal"
               v-if="items.IsRecord"
-              :style="{marginLeft:'8px'}"
+              :style="{ marginLeft: '8px' }"
             />
           </template>
           <template v-else>
@@ -187,7 +247,7 @@
               type="mini"
               class="luyin-box"
               v-if="items.IsRecord"
-              :style="{marginLeft:'8px'}"
+              :style="{ marginLeft: '8px' }"
             />
           </template>
         </template>
@@ -198,10 +258,10 @@
 
 <script>
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
-import EditDiv from "../preview/EditDiv.vue"
+import EditDiv from "../preview/EditDiv.vue";
 export default {
   components: { Soundrecord, EditDiv },
-  props: ["curQue","TaskModel"],
+  props: ["curQue", "TaskModel", "judgeAnswer"],
   data() {
     return {
       audio: new Audio(),
@@ -211,12 +271,38 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
       answerList: [],
+      userErrList: [],
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    // 判断对错
+    changeuserAnswerJudge(index) {
+      if (this.dataType.indexOf("sentence_judge_chs") != -1) {
+        // 判断题
+        if (
+          this.curQue.Bookanswer[index].answer == "right" &&
+          this.curQue.option[index].judge
+        ) {
+          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##T##JUDGE]";
+        } else {
+          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##F##JUDGE]";
+        }
+      } else if (this.dataType.indexOf("sentence_input_chs") != -1) {
+        // 填空题
+        if (this.curQue.option[index].answer.length > 0) {
+          let userAnswerJudge = "[JUDGE##F##JUDGE]";
+          this.curQue.option[index].answer.forEach((item) => {
+            if (this.curQue.Bookanswer[index].answer == item) {
+              userAnswerJudge = "[JUDGE##T##JUDGE]";
+            }
+          });
+          this.curQue.Bookanswer[index].userAnswerJudge = userAnswerJudge;
+        }
+      }
+    },
     // input 输入时
     handleInput(e) {
       e.target.value = e.target.value ? e.target.value.trim() : "";
@@ -249,22 +335,30 @@ export default {
         }
       });
       if (!this.curQue.Bookanswer) {
-        let answerList = []
+        let answerList = [];
         let curCorrect = [];
         this.curQue.option.forEach((item) => {
-        if (this.dataType.indexOf("sentence_input_chs") != -1) {
-            answerList = []
+          if (this.dataType.indexOf("sentence_input_chs") != -1) {
+            answerList = [];
             item.answer.forEach((it) => {
-                answerList.push({
-                    chs: "",
-                    pinyin: "",
-                });
+              answerList.push({
+                chs: "",
+                pinyin: "",
+              });
             });
-        }
-        curCorrect.push({
+          }
+          let userAnswerJudge = "";
+          if (this.dataType.indexOf("sentence_judge_chs") != -1) {
+            // 判断题
+            userAnswerJudge = "[JUDGE##F##JUDGE]";
+          } else if (this.dataType.indexOf("sentence_input_chs") != -1) {
+            userAnswerJudge = item.answer.length > 0 ? "[JUDGE##F##JUDGE]" : "";
+          }
+          curCorrect.push({
             answer: "",
             recordList: [],
-            answerList: answerList
+            answerList: answerList,
+            userAnswerJudge,
           });
         });
         this.$set(this.curQue, "Bookanswer", curCorrect);
@@ -272,23 +366,34 @@ export default {
       let curQue = JSON.parse(JSON.stringify(this.curQue));
       curQue.option.forEach((dItem, dIndex) => {
         let paraArr = [];
-        let inputNumber = 0
+        let inputNumber = 0;
         dItem.detail.wordsList.forEach((sItem, sIndex) => {
           this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
           let obj = {
             pinyin: sItem.pinyin,
             chs: sItem.chs,
             isShow: sItem.isShow,
-            inputNumber: sItem.chs.indexOf('__')>-1?inputNumber:''
+            inputNumber: sItem.chs.indexOf("__") > -1 ? inputNumber : "",
           };
           paraArr.push(obj);
-          if(sItem.chs.indexOf('__')>-1){
-              inputNumber++
+          if (sItem.chs.indexOf("__") > -1) {
+            inputNumber++;
           }
         });
         this.$set(_this.curQue.option[dIndex].detail, "resArr", paraArr);
       });
-        console.log(_this.curQue.option)
+      console.log(_this.curQue.option);
+
+      // 把错误的答案挑出来
+      if (this.judgeAnswer == "standardAnswer") {
+        this.userErrList = [];
+        this.curQue.Bookanswer.forEach((item, i) => {
+          if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
+            let obj = JSON.parse(JSON.stringify(this.curQue.option[i]));
+            this.userErrList.push(obj);
+          }
+        });
+      }
     },
     //词和标点合一起
     mergeWordSymbol(sItem, wItem, curIndex) {
@@ -303,13 +408,14 @@ export default {
     },
     // 判断题选择
     handleSelectJudge(obj, index) {
-        if(!this.TaskModel||this.TaskModel!='ANSWER'){
-            this.curQue.Bookanswer[index].answer = obj
-        }
+      if (!this.TaskModel || this.TaskModel != "ANSWER") {
+        this.curQue.Bookanswer[index].answer = obj;
+      }
+      this.changeuserAnswerJudge(index);
     },
     handleWav(list, tmIndex) {
-        tmIndex = tmIndex ? tmIndex : 0;
-        this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
     },
     handleDatas(str, type) {
       str = str.trim();
@@ -321,14 +427,16 @@ export default {
     },
     changeAnswerList(e, index, type, indexs) {
       if (type == "pinyin") {
-        this.curQue.Bookanswer[index].answerList[indexs].pinyin += e.target.innerHTML;
+        this.curQue.Bookanswer[index].answerList[indexs].pinyin +=
+          e.target.innerHTML;
       } else {
-        this.curQue.Bookanswer[index].answerList[indexs].chs += e.target.innerHTML;
+        this.curQue.Bookanswer[index].answerList[indexs].chs +=
+          e.target.innerHTML;
       }
     },
-    handleFalse(){
-        return false;
-    }
+    handleFalse() {
+      return false;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -358,6 +466,35 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
+.error {
+  .active-right-btn {
+    background: #fff url("../../../assets/newImage/common/error-right-btn.png")
+      center no-repeat !important;
+    background-size: 24px !important;
+  }
+  .active {
+    background-color: #ffe5e5 !important;
+    border-color: #de4444 !important;
+  }
+  input {
+    color: #ed342d !important;
+  }
+}
+
+.correct {
+  .active-error-btn {
+    background: #fff url("../../../assets/newImage/common/correct-error-btn.png")
+      center no-repeat !important;
+    background-size: 24px !important;
+  }
+  .active {
+    background-color: #e5fff0 !important;
+    border-color: #00c850 !important;
+  }
+  input {
+    color: #2ca767 !important;
+  }
+}
 .Big-Book-prev-Textdes {
   width: 100%;
   h2 {
@@ -398,13 +535,13 @@ export default {
         width: 16px;
         height: 16px;
         cursor: pointer;
-        background: url("../../../assets/NPC/play-red.png") left
-          center no-repeat;
+        background: url("../../../assets/NPC/play-red.png") left center
+          no-repeat;
         background-size: 16px;
         margin: 0px 8px 0 0;
         &.active {
-          background: url("../../../assets/NPC/icon-voice-play-red.png")
-            left center no-repeat;
+          background: url("../../../assets/NPC/icon-voice-play-red.png") left
+            center no-repeat;
           background-size: 16px;
         }
       }
@@ -428,8 +565,8 @@ export default {
             line-height: 130%;
             color: rgba(0, 0, 0, 0.6);
             margin-top: 8px;
-            &-opacity{
-                opacity: 0;
+            &-opacity {
+              opacity: 0;
             }
           }
           .chs {
@@ -506,10 +643,11 @@ export default {
       .judge-box {
         display: flex;
         justify-content: center;
-        &.notAllow{
-            a,a.error-btn{
-                cursor: not-allowed;
-            }
+        &.notAllow {
+          a,
+          a.error-btn {
+            cursor: not-allowed;
+          }
         }
         a {
           width: 32px;
@@ -547,33 +685,33 @@ export default {
 }
 .NPC-Big-Book-preview-green {
   .Big-Book-prev-Textdes {
-    ul{
-        li{
-            >p{
-                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;
-                }
-            }
+    ul {
+      li {
+        > p {
+          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;
+          }
         }
+      }
     }
   }
 }
 .NPC-Big-Book-preview-brown {
   .Big-Book-prev-Textdes {
-    ul{
-        li{
-            >p{
-                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;
-                }
-            }
+    ul {
+      li {
+        > p {
+          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;
+          }
         }
+      }
     }
   }
 }

src/components/Adult/preview/TextInputRecord.vue

@@ -21,7 +21,16 @@
       />
     </div>
     <ul>
-      <li v-for="(items, indexs) in curQue.option" :key="indexs">
+      <li
+        v-for="(items, indexs) in judgeAnswer == 'standardAnswer'
+          ? userErrList
+          : curQue.option"
+        :key="indexs"
+        :class="[
+          judgeAnswer == 'standardAnswer' ? 'correct' : '',
+          YouranswerClass(items, indexs),
+        ]"
+      >
         <!-- <Audio
           :mp3="items.mp3_list.length > 0 ? items.mp3_list[0].url : ''"
           :themeColor="themeColor"
@@ -53,12 +62,14 @@
         >
         <input
           @blur="handleInput"
-          :class="['item-input',items.Inputfont]"
-          v-model="curQue.Bookanswer[indexs].answer"
+          :class="['item-input', items.Inputfont]"
+          v-model="judgeAnswer == 'standardAnswer'
+          ? items.answer: curQue.Bookanswer[indexs].answer"
           @keyup.enter="handleReplaceTone($event, indexs)"
           placeholder="输入"
           maxlength="200"
-          :readonly="TaskModel=='ANSWER'"
+          :readonly="TaskModel == 'ANSWER'"
+          @change="changeuserAnswerJudge(indexs)"
         />
         <template v-if="items.IsRecord">
           <Soundrecord
@@ -82,7 +93,7 @@ import AudioLine from "../preview/AudioLine.vue";
 
 export default {
   components: { Soundrecord, Audio, AudioLine },
-  props: ["curQue", "themeColor","TaskModel"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
   data() {
     return {
       resArr: [],
@@ -102,12 +113,27 @@ export default {
       curTime: null,
       stopAudio: false,
       ed: null,
+      userErrList: [],
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    YouranswerClass(item, index) {
+      if (this.judgeAnswer == "studentAnswer") {
+        let clss = "error";
+        if (item.answer == this.curQue.Bookanswer[index].answer) {
+          clss = "correct";
+        }
+        if (!item.answer) {
+          clss = "";
+        }
+        return clss;
+      } else {
+        return "";
+      }
+    },
     handleChangeTime(time, edTime) {
       let _this = this;
       _this.curTime = time;
@@ -133,16 +159,39 @@ export default {
           curCorrect.push({
             answer: "",
             recordList: [],
+            userAnswerJudge: item.answer ? "[JUDGE##F##JUDGE]" : "",
           });
         });
         this.$set(this.curQue, "Bookanswer", curCorrect);
       }
+      // 把错误的答案挑出来
+      if (this.judgeAnswer == "standardAnswer") {
+        this.userErrList = [];
+        this.curQue.Bookanswer.forEach((item, i) => {
+          if (item.userAnswerJudge == "[JUDGE##F##JUDGE]") {
+            let obj = JSON.parse(JSON.stringify(this.curQue.option[i]));
+            this.userErrList.push(obj);
+          }
+        });
+      }
     },
     handleWav(list, tmIndex) {
       tmIndex = tmIndex ? tmIndex : 0;
       this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
       console.log(this.curQue.Bookanswer);
     },
+    changeuserAnswerJudge(index) {
+      if (this.curQue.option[index].answer) {
+        if (
+          this.curQue.Bookanswer[index].answer ==
+          this.curQue.option[index].answer
+        ) {
+          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##T##JUDGE]";
+        } else {
+          this.curQue.Bookanswer[index].userAnswerJudge = "[JUDGE##F##JUDGE]";
+        }
+      }
+    },
     handleReplaceTone(e, index) {
       let _this = this;
       _this.resArr = [];
@@ -259,6 +308,24 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
+.error {
+  background: rgba(237, 52, 45, 0.1) !important;
+  /* 错误颜色 */
+
+  border: 1px solid #ed342d !important;
+  input {
+    color: #ed342d !important;
+  }
+}
+.correct {
+  background: rgba(44, 167, 103, 0.1) !important;
+  /* 正确答案 */
+
+  border: 1px solid #2ca767 !important;
+  input {
+    color: #2ca767 !important;
+  }
+}
 .Big-Book-prev-Textdes {
   width: 100%;
   // margin-top: 16px;