生字 模拟作答

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -35,10 +35,11 @@
           >
             <EditDiv
               :id="'b' + item.content + index"
-              :canEdit="!item.is_example"
+              :canEdit="!item.is_example && !disabled"
               v-model="userAnswer[index].answer_pinyin"
               :textAlign="'center'"
               @input="changeAnswer(item, index)"
+              :class="[classNameJudge(userAnswer[index].answer_pinyin, item.answer_pinyin, item.is_example)]"
             />
           </div>
           <div class="items-flex">
@@ -65,10 +66,13 @@
               >
                 <EditDiv
                   :id="'c' + items.con + index + indexs"
-                  :canEdit="!items.is_example"
+                  :canEdit="!items.is_example && !disabled"
                   v-model="userAnswer[index].item[indexs].answer_pinyin"
                   :textAlign="'center'"
                   @input="changeAnswer(item, index, indexs)"
+                  :class="[
+                    classNameJudge(userAnswer[index].item[indexs].answer_pinyin, items.answer_pinyin, items.is_example),
+                  ]"
                 />
               </div>
               <div class="items-content">
@@ -107,16 +111,18 @@
                       : '',
                     item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
                   ]"
+                  bgType="tian"
                 />
               </div>
               <div class="inputdv" v-if="data.property.model === 'miao'">
                 <EditDiv
                   v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
                   :id="'a' + items.con + index + indexs"
-                  :canEdit="!items.is_example"
+                  :canEdit="!items.is_example && !disabled"
                   v-model="userAnswer[index].item[indexs].answer"
                   :textAlign="'center'"
                   @input="changeAnswer(items, index, indexs)"
+                  :class="[classNameJudge(userAnswer[index].item[indexs].answer, items.answer, items.is_example)]"
                 />
               </div>
             </div>
@@ -124,16 +130,158 @@
           <div class="inputdv en-common" v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'">
             <EditDiv
               :id="'d' + item.content + index"
-              :canEdit="!item.is_example"
+              :canEdit="!item.is_example && !disabled"
               v-model="userAnswer[index].answer_en"
               :textAlign="'center'"
               @input="changeAnswer(item, index)"
+              :class="[classNameJudge(userAnswer[index].answer_en, item.answer_en, item.is_example)]"
             />
           </div>
           <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
         </div>
       </div>
     </div>
+
+    <div v-if="isShowRightAnswer" class="right-answer">
+      <div class="title">正确答案</div>
+      <div class="box">
+        <div
+          class="item-box"
+          :class="['item-box-' + data.property.model]"
+          v-for="(item, index) in data.option_list"
+          :key="index"
+        >
+          <div
+            class="number-box"
+            :style="{
+              marginTop: isEnable(data.property.is_enable_pinyin)
+                ? '30px'
+                : data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input'
+                  ? '52px'
+                  : '',
+            }"
+          >
+            <span class="number">{{ index + 1 }}</span>
+          </div>
+          <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
+            <div
+              v-if="
+                isEnable(data.property.is_enable_pinyin) && data.property.model === 'input' && item.is_common_pinyin
+              "
+              class="pinyin"
+            >
+              {{ item.pinyin }}
+            </div>
+            <div
+              class="inputdv pinyin-common"
+              v-if="data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin"
+            >
+              <EditDiv
+                :id="'bz' + item.content + index"
+                :canEdit="!item.is_example && !disabled"
+                v-model="item.answer_pinyin"
+                :textAlign="'center'"
+                @input="changeAnswer(item, index)"
+              />
+            </div>
+            <div class="items-flex">
+              <div
+                class="items"
+                :class="[items.is_example ? 'items-example' : '']"
+                v-for="(items, indexs) in item.content_list"
+                :key="indexs"
+              >
+                <div
+                  v-if="
+                    isEnable(data.property.is_enable_pinyin) &&
+                    (data.property.model === 'miao' || (data.property.model === 'input' && !item.is_common_pinyin))
+                  "
+                  class="pinyin"
+                >
+                  {{ items.pinyin }}
+                </div>
+                <div
+                  class="inputdv pinyin-common"
+                  v-if="
+                    data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
+                  "
+                >
+                  <EditDiv
+                    :id="'cz' + items.con + index + indexs"
+                    :canEdit="!items.is_example && !disabled"
+                    v-model="items.answer_pinyin"
+                    :textAlign="'center'"
+                    @input="changeAnswer(item, index, indexs)"
+                  />
+                </div>
+                <div class="items-content">
+                  <template v-if="items && items.type === 'img'">
+                    <el-image
+                      class="items-image"
+                      v-if="items.file_list[0]"
+                      :src="items.file_list[0].file_url"
+                      fit="contain"
+                    ></el-image>
+                  </template>
+                  <template v-else-if="items && items.type === 'lian'">
+                    <span class="items-lian">{{ items.con }}</span>
+                  </template>
+                  <Strockplayredline
+                    v-if="items && items.type === 'hanzi'"
+                    :Book_text="items.con"
+                    :playStorkes="isEnable(data.property.is_enable_play_structure)"
+                    :curItem="
+                      isEnable(data.property.is_enable_high_strokes)
+                        ? data.property.model === 'input'
+                          ? items.high_strokes
+                          : items
+                        : null
+                    "
+                    :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
+                    :targetDiv="'newWordTemplatez' + items.con + index + indexs"
+                    :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    class="hanzi-storck"
+                    :class="[
+                      item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',
+
+                      item.content_list.length > 1 && indexs == item.content_list.length - 1 ? 'rightBorderRadius' : '',
+                      item.content_list.length > 1 && indexs != item.content_list.length - 1 && indexs != 0
+                        ? 'NoborderRadius'
+                        : '',
+                      item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
+                    ]"
+                    bgType="tian"
+                  />
+                </div>
+                <div class="inputdv" v-if="data.property.model === 'miao'">
+                  <EditDiv
+                    v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
+                    :id="'az' + items.con + index + indexs"
+                    :canEdit="!items.is_example && !disabled"
+                    v-model="items.answer"
+                    :textAlign="'center'"
+                    @input="changeAnswer(items, index, indexs)"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="inputdv en-common"
+              v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'"
+            >
+              <EditDiv
+                :id="'dz' + item.content + index"
+                :canEdit="!item.is_example && !disabled"
+                v-model="item.answer_en"
+                :textAlign="'center'"
+                @input="changeAnswer(item, index)"
+              />
+            </div>
+            <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -217,6 +365,21 @@ export default {
         this.answer.answer_list = this.userAnswer;
       }
     },
+    classNameJudge(userAnswer, answer, isExample) {
+      let classname = '';
+      if ((!this.isJudgingRightWrong && !this.isShowRightAnswer) || isExample) {
+        return '';
+      }
+      if (answer && this.isJudgingRightWrong) {
+        if (answer === userAnswer) {
+          classname = 'right';
+        } else {
+          classname = 'wrong';
+        }
+      }
+
+      return classname;
+    },
   },
 };
 </script>
@@ -296,11 +459,27 @@ export default {
     :deep .edit-div {
       min-height: 32px;
       font-size: 16px;
-      line-height: 32px;
+      line-height: 30px;
       color: #000;
       background-color: #deebff;
+      border: 1px solid #deebff;
       border-radius: 8px;
     }
+
+    .right {
+      :deep .edit-div {
+        color: $right-color;
+        background-color: #e9f7f2;
+        border-color: #e9f7f2;
+      }
+    }
+
+    .wrong {
+      :deep .edit-div {
+        color: $error-color;
+        border-color: $error-color;
+      }
+    }
   }
 
   .items-example,
@@ -355,5 +534,15 @@ export default {
     // text-align: center;
     word-break: break-word;
   }
+
+  .right-answer {
+    margin-top: 15px;
+
+    .box {
+      display: flex;
+      flex-flow: wrap;
+      gap: 30px;
+    }
+  }
 }
 </style>