图片文本 模拟作答

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -40,7 +40,7 @@
       <div
         v-for="(itemP, indexP) in data.input_list"
         :key="'input' + indexP"
-        :class="['position-item position-item-input', 'active']"
+        :class="['position-item position-item-input', 'active', ...computedAnswerClass(indexP)]"
         :style="{
           width: itemP.width,
           height: itemP.height,
@@ -48,7 +48,45 @@
           top: itemP.y,
         }"
       >
-        <el-input v-model="answer.answer_list[indexP].text" type="textarea" style="height: 100%" placeholder="请输入" />
+        <el-input
+          v-model="answer.answer_list[indexP].text"
+          :disabled="disabled"
+          type="textarea"
+          style="height: 100%"
+          placeholder="请输入"
+        />
+      </div>
+    </div>
+    <div v-if="isShowRightAnswer" class="right-answer">
+      <div class="title">正确答案</div>
+      <div
+        v-if="image_url"
+        class="img-box"
+        :style="{
+          background: 'url(' + image_url + ') center / contain no-repeat',
+          width: data.image_width + 'px',
+          height: data.image_height + 'px',
+        }"
+      >
+        <div
+          v-for="(itemP, indexP) in data.input_list"
+          :key="'input' + indexP"
+          :class="['position-item position-item-input', 'active']"
+          :style="{
+            width: itemP.width,
+            height: itemP.height,
+            left: itemP.x,
+            top: itemP.y,
+          }"
+        >
+          <el-input
+            v-model="itemP.text"
+            :disabled="disabled"
+            type="textarea"
+            style="height: 100%"
+            placeholder="请输入"
+          />
+        </div>
       </div>
     </div>
     <el-dialog
@@ -147,6 +185,27 @@ export default {
         });
       });
     },
+    /**
+     * 计算答题对错选项字体颜色
+     * @param {string} mark 选项标识
+     */
+    computedAnswerClass(i) {
+      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
+        return '';
+      }
+      let answerOption = this.data.input_list[i] ? this.data.input_list[i].text : '';
+      let selectValue = this.answer.answer_list[i].text ? this.answer.answer_list[i].text.trim() : '';
+      let classList = [];
+      let isRight = answerOption && answerOption === selectValue;
+      if (this.isJudgingRightWrong && answerOption) {
+        isRight ? classList.push('right') : classList.push('wrong');
+      }
+
+      if (this.isShowRightAnswer && !isRight) {
+        classList.push('show-right-answer');
+      }
+      return classList;
+    },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
       this.getSentIndex(this.curTime);
@@ -204,10 +263,27 @@ export default {
 
   &.position-item-input {
     border-color: #f90;
+
+    &.right {
+      border-color: $right-color;
+
+      :deep .el-textarea__inner {
+        color: $right-color;
+      }
+    }
+
+    &.wrong {
+      border-color: $error-color;
+
+      :deep .el-textarea__inner {
+        color: $error-color;
+      }
+    }
   }
 
   :deep .el-textarea__inner {
     height: 100%;
+    padding: 5px;
     font-family: 'League', '楷体';
     text-align: center;
     resize: none;
@@ -220,6 +296,12 @@ export default {
   position: relative;
   margin: 20px auto;
 }
+
+.right-answer {
+  .title {
+    margin: 24px 0;
+  }
+}
 </style>
 <style lang="scss">
 .magazine-detail-dialog {

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -304,6 +304,8 @@ export default {
           this.$set(this.multilingualTextList, item.type, chunkedArr);
         });
       }
+      if (!this.isJudgingRightWrong) {
+      }
     },
     computedAnswerText(item, i, j) {
       if (!this.isShowRightAnswer) return '';
@@ -311,7 +313,7 @@ export default {
         this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
       let answerOptionList = answerOption.split('\n');
       if (!item) return '';
-      let selectValue = item.value;
+      let selectValue = item.value ? item.value.trim() : '';
       let answerValue = answerOptionList[item.inputIndex] ? answerOptionList[item.inputIndex].split('/') : '';
       let isRight = answerValue && answerValue.includes(selectValue);
       if (isRight || !answerValue) return '';
@@ -329,7 +331,7 @@ export default {
         this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
       let answerOptionList = answerOption.split('\n');
       if (!item) return '';
-      let selectValue = item.value;
+      let selectValue = item.value ? item.value.trim() : '';
       let answerValue = answerOptionList[item.inputIndex] ? answerOptionList[item.inputIndex].split('/') : '';
       let classList = [];
       let isRight = answerValue && answerValue.includes(selectValue);