参考答案与解析

src/views/book/courseware/create/components/question/character_structure/CharacterStructure.vue

@@ -208,7 +208,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .upload-file {
-  display: flex;
+  // display: flex;
   column-gap: 12px;
   align-items: center;
   margin: 8px 0;

src/views/book/courseware/create/components/question/image_text/ImageText.vue

@@ -565,7 +565,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .upload-file {
-  display: flex;
+  // display: flex;
   column-gap: 12px;
   align-items: center;
   margin: 8px 0;

src/views/book/courseware/create/components/question/table/Table.vue

@@ -97,7 +97,7 @@
       <template v-if="isEnable(data.has_identify)">
         <p class="tips">在需要作答的单元格内录入标准答案，多个填空答案用换行录入，同一个填空有多个答案用斜线“/”隔开</p>
         <div class="option-list">
-          <div v-for="(item, i) in data.answer_list" :key="i" class="table-node">
+          <div v-for="(item, i) in data.answer_lists" :key="i" class="table-node">
             <div v-for="(li, j) in item" :key="i + 'col' + j" class="table-item">
               <el-input v-model="li.answer" type="textarea" />
             </div>
@@ -174,12 +174,12 @@ export default {
       handler(val) {
         if (val < this.data.option_list.length) {
           this.data.option_list = this.data.option_list.slice(0, val);
-          this.data.answer_list = this.data.answer_list.slice(0, val);
+          this.data.answer_lists = this.data.answer_lists.slice(0, val);
         } else {
           const diff = val - this.data.option_list.length;
           for (let i = 0; i < diff; i++) {
             this.data.option_list.push(Array.from({ length: this.data.property.column_count }, getOption));
-            this.data.answer_list.push(Array.from({ length: this.data.property.column_count }, getAnswerOption));
+            this.data.answer_lists.push(Array.from({ length: this.data.property.column_count }, getAnswerOption));
           }
         }
       },
@@ -201,7 +201,7 @@ export default {
 
           return row.concat(Array.from({ length: diff }, getOption));
         });
-        this.data.answer_list = this.data.answer_list.map((row) => {
+        this.data.answer_lists = this.data.answer_lists.map((row) => {
           if (val < row.length) {
             return row.slice(0, val);
           }

src/views/book/courseware/data/table.js

@@ -78,7 +78,7 @@ export function getTableData() {
     title: '表格',
     option_list: Array.from({ length: 2 }, () => Array.from({ length: 3 }, getOption)),
     record_list: [],
-    answer_list: Array.from({ length: 2 }, () => Array.from({ length: 3 }, getAnswerOption)),
+    answer_lists: Array.from({ length: 2 }, () => Array.from({ length: 3 }, getAnswerOption)),
     mode: tableTypeList[0].value,
     vocabulary: '', // 用于选词的词汇
     word_list: [], // 选词列表

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -399,6 +399,7 @@
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
+        @closeAnswerAnalysis="closeAnswerAnalysis"
       />
     </div>
   </div>

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -157,33 +157,74 @@
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
-      />
-      <div v-if="isShowRightAnswer" class="right-answer">
-        <div class="title">{{ convertText('正确答案') }}</div>
-        <div class="one-box">
-          <div
-            v-for="(items, row) in data.option_list"
-            :key="'row' + row"
-            class="one"
-            :class="[!items.pinyin ? 'one_nopy' : '']"
-            :style="{ marginRight: (row + 1) % 3 == 0 ? '' : '16px' }"
-          >
+        @closeAnswerAnalysis="closeAnswerAnalysis"
+      >
+        <div slot="right-answer">
+          <div class="one-box">
             <div
-              class="number"
-              :style="{
-                background:
-                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#346CDA',
-              }"
+              v-for="(items, row) in data.option_list"
+              :key="'row' + row"
+              class="one"
+              :class="[!items.pinyin ? 'one_nopy' : '']"
+              :style="{ marginRight: (row + 1) % 3 == 0 ? '' : '16px' }"
             >
-              {{ row + 1 }}
-            </div>
-            <div class="hzpinyin">
-              <div v-if="isEnable(data.property.view_pinyin)" class="pinyin">
-                {{ items.pinyin }}
+              <div
+                class="number"
+                :style="{
+                  background:
+                    data.unified_attrib && data.unified_attrib.topic_color
+                      ? data.unified_attrib.topic_color
+                      : '#346CDA',
+                }"
+              >
+                {{ row + 1 }}
+              </div>
+              <div class="hzpinyin">
+                <div v-if="isEnable(data.property.view_pinyin)" class="pinyin">
+                  {{ items.pinyin }}
+                </div>
+                <template v-if="items.hz_info.length > 0">
+                  <div
+                    class="strockplay-newWord"
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346CDA',
+                    }"
+                  >
+                    <Strockplay
+                      class-name="adult-strockplay"
+                      :Book_text="items.hz_info[0].con"
+                      :play-storkes="true"
+                      :stroke-play-color="
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346CDA'
+                      "
+                      :stroke-color="'#000000'"
+                      :paly-width="'18px'"
+                      :BoxbgType="'0'"
+                      :cur-item="items.hz_info[0].hzDetail.hz_json"
+                      :target-div="'writeTops-item-right' + '-' + items.hz_info[0].con"
+                      class="writeTop-item"
+                      :style="{
+                        borderColor:
+                          data.unified_attrib && data.unified_attrib.topic_color
+                            ? data.unified_attrib.topic_color
+                            : '#346CDA',
+                      }"
+                    />
+                  </div>
+                </template>
+              </div>
+              <div class="image">
+                <img src="@/assets/drag-arrows.png" alt="" />
               </div>
-              <template v-if="items.hz_info.length > 0">
+              <div class="answer">
                 <div
-                  class="strockplay-newWord"
+                  class="option_one"
+                  :class="[items.is_example ? 'option_one_example' : '']"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color
@@ -191,59 +232,21 @@
                         : '#346CDA',
                   }"
                 >
-                  <Strockplay
-                    class-name="adult-strockplay"
-                    :Book_text="items.hz_info[0].con"
-                    :play-storkes="true"
-                    :stroke-play-color="
-                      data.unified_attrib && data.unified_attrib.topic_color
-                        ? data.unified_attrib.topic_color
-                        : '#346CDA'
+                  <img
+                    v-if="items.answer"
+                    :src="
+                      items.answer.length > 3
+                        ? data.file_list.find((p) => p.file_id === items.answer).file_url
+                        : require('@/assets/structure/structure-' + items.answer + '.png')
                     "
-                    :stroke-color="'#000000'"
-                    :paly-width="'18px'"
-                    :BoxbgType="'0'"
-                    :cur-item="items.hz_info[0].hzDetail.hz_json"
-                    :target-div="'writeTops-item-right' + '-' + items.hz_info[0].con"
-                    class="writeTop-item"
-                    :style="{
-                      borderColor:
-                        data.unified_attrib && data.unified_attrib.topic_color
-                          ? data.unified_attrib.topic_color
-                          : '#346CDA',
-                    }"
+                    alt=""
                   />
                 </div>
-              </template>
-            </div>
-            <div class="image">
-              <img src="@/assets/drag-arrows.png" alt="" />
-            </div>
-            <div class="answer">
-              <div
-                class="option_one"
-                :class="[items.is_example ? 'option_one_example' : '']"
-                :style="{
-                  borderColor:
-                    data.unified_attrib && data.unified_attrib.topic_color
-                      ? data.unified_attrib.topic_color
-                      : '#346CDA',
-                }"
-              >
-                <img
-                  v-if="items.answer"
-                  :src="
-                    items.answer.length > 3
-                      ? data.file_list.find((p) => p.file_id === items.answer).file_url
-                      : require('@/assets/structure/structure-' + items.answer + '.png')
-                  "
-                  alt=""
-                />
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </AnswerAnalysis>
     </div>
   </div>
 </template>

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

@@ -63,39 +63,41 @@
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"
       :analysis-list="data.analysis_list"
-    />
-    <div v-if="isShowRightAnswer" class="right-answer">
-      <div class="title">{{ convertText('正确答案') }}</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',
-        }"
-      >
+      @closeAnswerAnalysis="closeAnswerAnalysis"
+    >
+      <div slot="right-answer" class="right-answer">
         <div
-          v-for="(itemP, indexP) in data.input_list"
-          :key="'input' + indexP"
-          :class="['position-item position-item-input', 'active']"
+          v-if="image_url"
+          class="img-box"
           :style="{
-            width: itemP.width,
-            height: itemP.height,
-            left: itemP.x,
-            top: itemP.y,
+            background: 'url(' + image_url + ') center / contain no-repeat',
+            width: data.image_width + 'px',
+            height: data.image_height + 'px',
           }"
         >
-          <el-input
-            v-model="itemP.text"
-            :disabled="disabled"
-            type="textarea"
-            style="height: 100%"
-            :placeholder="convertText('请输入')"
-          />
+          <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="convertText('请输入')"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </AnswerAnalysis>
+
     <el-dialog
       v-if="mageazineDetailShow"
       :visible.sync="mageazineDetailShow"

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

@@ -213,218 +213,229 @@
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"
       :analysis-list="data.analysis_list"
-    />
-
-    <div v-if="isShowRightAnswer" class="right-answer">
-      <div class="title">{{ convertText('正确答案') }}</div>
-      <div class="box">
-        <div
-          v-for="(item, index) in data.option_list"
-          :key="index"
-          class="item-box"
-          :class="['item-box-' + data.property.model]"
-        >
+      @closeAnswerAnalysis="closeAnswerAnalysis"
+    >
+      <div slot="right-answer" class="right-answer">
+        <div class="box">
           <div
-            class="number-box"
-            :style="{
-              marginTop: isEnable(data.property.view_pinyin)
-                ? '30px'
-                : data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input'
-                  ? '52px'
-                  : '',
-            }"
+            v-for="(item, index) in data.option_list"
+            :key="index"
+            class="item-box"
+            :class="['item-box-' + data.property.model]"
           >
-            <span
-              class="number"
-              :style="{
-                background:
-                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-              }"
-              >{{ index + 1 }}</span
-            >
-          </div>
-          <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
             <div
-              v-if="isEnable(data.property.view_pinyin) && data.property.model === 'input' && item.is_common_pinyin"
-              class="pinyin"
+              class="number-box"
               :style="{
-                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                marginTop: isEnable(data.property.view_pinyin)
+                  ? '30px'
+                  : data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input'
+                    ? '52px'
+                    : '',
               }"
             >
-              {{ item.pinyin }}
-            </div>
-            <div
-              v-if="data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin"
-              class="inputdv pinyin-common"
-            >
-              <EditDiv
-                :id="'bz' + item.content + index"
-                v-model="item.answer_pinyin"
-                :can-edit="!item.is_example && !disabled"
-                :text-align="'center'"
+              <span
+                class="number"
                 :style="{
-                  fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                   background:
-                    data.unified_attrib && data.unified_attrib.assist_color
-                      ? data.unified_attrib.assist_color
-                      : '#deebff',
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                 }"
-                @input="changeAnswer(item, index)"
-              />
+                >{{ index + 1 }}</span
+              >
             </div>
-            <div class="items-flex">
+            <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
               <div
-                v-for="(items, indexs) in item.content_list"
-                :key="indexs"
-                class="items"
-                :class="[items.is_example ? 'items-example' : '']"
+                v-if="isEnable(data.property.view_pinyin) && data.property.model === 'input' && item.is_common_pinyin"
+                class="pinyin"
+                :style="{
+                  fontSize:
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                }"
               >
-                <div
-                  v-if="
-                    isEnable(data.property.view_pinyin) &&
-                    (data.property.model === 'miao' || (data.property.model === 'input' && !item.is_common_pinyin))
-                  "
-                  class="pinyin"
+                {{ item.pinyin }}
+              </div>
+              <div
+                v-if="
+                  data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin
+                "
+                class="inputdv pinyin-common"
+              >
+                <EditDiv
+                  :id="'bz' + item.content + index"
+                  v-model="item.answer_pinyin"
+                  :can-edit="!item.is_example && !disabled"
+                  :text-align="'center'"
                   :style="{
                     fontSize:
-                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
+                    background:
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
                   }"
-                >
-                  {{ items.pinyin }}
-                </div>
+                  @input="changeAnswer(item, index)"
+                />
+              </div>
+              <div class="items-flex">
                 <div
-                  v-if="
-                    data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
-                  "
-                  class="inputdv pinyin-common"
+                  v-for="(items, indexs) in item.content_list"
+                  :key="indexs"
+                  class="items"
+                  :class="[items.is_example ? 'items-example' : '']"
                 >
-                  <EditDiv
-                    :id="'cz' + items.con + index + indexs"
-                    v-model="items.answer_pinyin"
-                    :can-edit="!items.is_example && !disabled"
-                    :text-align="'center'"
+                  <div
+                    v-if="
+                      isEnable(data.property.view_pinyin) &&
+                      (data.property.model === 'miao' || (data.property.model === 'input' && !item.is_common_pinyin))
+                    "
+                    class="pinyin"
                     :style="{
                       fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size
-                          ? data.unified_attrib.pinyin_size
-                          : '16px',
-                      background:
-                        data.unified_attrib && data.unified_attrib.assist_color
-                          ? data.unified_attrib.assist_color
-                          : '#deebff',
+                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                     }"
-                    @input="changeAnswer(item, index, indexs)"
-                  />
-                </div>
-                <div class="items-content">
-                  <template v-if="items && items.type === 'img'">
-                    <el-image
-                      v-if="items.file_list[0]"
-                      class="items-image"
-                      :src="items.file_list[0].file_url"
-                      fit="contain"
+                  >
+                    {{ items.pinyin }}
+                  </div>
+                  <div
+                    v-if="
+                      data.answer_type.indexOf('pinyin') > -1 &&
+                      data.property.model === 'input' &&
+                      !item.is_common_pinyin
+                    "
+                    class="inputdv pinyin-common"
+                  >
+                    <EditDiv
+                      :id="'cz' + items.con + index + indexs"
+                      v-model="items.answer_pinyin"
+                      :can-edit="!items.is_example && !disabled"
+                      :text-align="'center'"
+                      :style="{
+                        fontSize:
+                          data.unified_attrib && data.unified_attrib.pinyin_size
+                            ? data.unified_attrib.pinyin_size
+                            : '16px',
+                        background:
+                          data.unified_attrib && data.unified_attrib.assist_color
+                            ? data.unified_attrib.assist_color
+                            : '#deebff',
+                      }"
+                      @input="changeAnswer(item, index, indexs)"
+                    />
+                  </div>
+                  <div class="items-content">
+                    <template v-if="items && items.type === 'img'">
+                      <el-image
+                        v-if="items.file_list[0]"
+                        class="items-image"
+                        :src="items.file_list[0].file_url"
+                        fit="contain"
+                        :style="{
+                          borderColor:
+                            data.unified_attrib && data.unified_attrib.topic_color
+                              ? data.unified_attrib.topic_color
+                              : '',
+                        }"
+                      />
+                    </template>
+                    <template v-else-if="items && items.type === 'lian'">
+                      <span
+                        class="items-lian"
+                        :style="{
+                          color:
+                            data.unified_attrib && data.unified_attrib.topic_color
+                              ? data.unified_attrib.topic_color
+                              : '',
+                        }"
+                        >{{ items.con }}</span
+                      >
+                    </template>
+                    <Strockplayredline
+                      v-if="items && items.type === 'hanzi'"
+                      :Book_text="items.con"
+                      :play-storkes="isEnable(data.property.is_enable_play_structure)"
+                      :cur-item="
+                        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"
+                      :target-div="'newWordTemplatez' + items.con + index + indexs + randomId"
+                      :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 &&
+                        item.content_list[indexs + 1].type !== 'lian'
+                          ? 'NoborderRight'
+                          : '',
+                      ]"
                       :style="{
                         borderColor:
                           data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                       }"
+                      :play-color="
+                        data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                      "
+                      bg-type="tian"
                     />
-                  </template>
-                  <template v-else-if="items && items.type === 'lian'">
-                    <span
-                      class="items-lian"
+                  </div>
+                  <div v-if="data.property.model === 'miao'" class="inputdv">
+                    <EditDiv
+                      v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
+                      :id="'az' + items.con + index + indexs"
+                      v-model="items.answer"
+                      :can-edit="!items.is_example && !disabled"
+                      :text-align="'center'"
                       :style="{
-                        color:
-                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                        fontSize:
+                          data.unified_attrib && data.unified_attrib.pinyin_size
+                            ? data.unified_attrib.pinyin_size
+                            : '16px',
+                        background:
+                          data.unified_attrib && data.unified_attrib.assist_color
+                            ? data.unified_attrib.assist_color
+                            : '#deebff',
                       }"
-                      >{{ items.con }}</span
-                    >
-                  </template>
-                  <Strockplayredline
-                    v-if="items && items.type === 'hanzi'"
-                    :Book_text="items.con"
-                    :play-storkes="isEnable(data.property.is_enable_play_structure)"
-                    :cur-item="
-                      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"
-                    :target-div="'newWordTemplatez' + items.con + index + indexs + randomId"
-                    :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 &&
-                      item.content_list[indexs + 1].type !== 'lian'
-                        ? 'NoborderRight'
-                        : '',
-                    ]"
-                    :style="{
-                      borderColor:
-                        data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
-                    }"
-                    :play-color="
-                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
-                    "
-                    bg-type="tian"
-                  />
-                </div>
-                <div v-if="data.property.model === 'miao'" class="inputdv">
-                  <EditDiv
-                    v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
-                    :id="'az' + items.con + index + indexs"
-                    v-model="items.answer"
-                    :can-edit="!items.is_example && !disabled"
-                    :text-align="'center'"
-                    :style="{
-                      fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size
-                          ? data.unified_attrib.pinyin_size
-                          : '16px',
-                      background:
-                        data.unified_attrib && data.unified_attrib.assist_color
-                          ? data.unified_attrib.assist_color
-                          : '#deebff',
-                    }"
-                    @input="changeAnswer(items, index, indexs)"
-                  />
+                      @input="changeAnswer(items, index, indexs)"
+                    />
+                  </div>
                 </div>
               </div>
+              <div
+                v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'"
+                class="inputdv en-common"
+              >
+                <EditDiv
+                  :id="'dz' + item.content + index"
+                  v-model="item.answer_en"
+                  :can-edit="!item.is_example && !disabled"
+                  :text-align="'center'"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
+                    background:
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
+                  }"
+                  @input="changeAnswer(item, index)"
+                />
+              </div>
+              <div v-if="data.property.model === 'input'" class="en-common">{{ convertText(item.shiyi) }}</div>
             </div>
-            <div
-              v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'"
-              class="inputdv en-common"
-            >
-              <EditDiv
-                :id="'dz' + item.content + index"
-                v-model="item.answer_en"
-                :can-edit="!item.is_example && !disabled"
-                :text-align="'center'"
-                :style="{
-                  fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
-                  background:
-                    data.unified_attrib && data.unified_attrib.assist_color
-                      ? data.unified_attrib.assist_color
-                      : '#deebff',
-                }"
-                @input="changeAnswer(item, index)"
-              />
-            </div>
-            <div v-if="data.property.model === 'input'" class="en-common">{{ convertText(item.shiyi) }}</div>
           </div>
         </div>
       </div>
-    </div>
+    </AnswerAnalysis>
   </div>
 </template>
 

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -155,53 +155,54 @@
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
-      />
-      <div v-if="isShowRightAnswer && data.property.fun_type === 'input'" class="right-answer">
-        <div class="title" style="margin: 10px 0">{{ convertText('正确答案') }}</div>
-        <div
-          class="content-box"
-          :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"
-        >
-          <div class="first-con">
-            <AudioPlay
-              v-if="data.audio_file_id && data.property.audio_position === 'front'"
-              :file-id="data.audio_file_url"
-              :theme-color="
-                data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
-              "
-            />
-            <div
-              class="option-content"
-              :style="{
-                fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
-              }"
-            >
-              <span v-if="data.content_hz" class="items-hz">{{ convertText(data.content_hz) }}</span>
-              <!-- 拼音输入 -->
-              <template v-if="data.property.fun_type === 'input'">
-                <span
-                  v-for="(itemc, indexc) in con_preview"
-                  :key="indexc"
-                  :class="['item-con', itemc.type === 'input' ? 'right' : '']"
-                >
-                  <el-input
-                    v-if="itemc.type === 'input'"
-                    v-model="itemc.answer"
-                    :disabled="true"
-                    :style="[{ width: Math.max(20, itemc.con.length * 10) + 'px' }]"
-                    class="item-input"
-                  />
-                  <span v-else>{{ itemc.con }}</span>
-                </span>
-              </template>
+        @closeAnswerAnalysis="closeAnswerAnalysis"
+      >
+        <div slot="right-answer" v-if="data.property.fun_type === 'input'" class="right-answer">
+          <div
+            class="content-box"
+            :class="[data.property.arrange_type === 'horizontal' ? 'content-box-flex' : 'content-box-vertical']"
+          >
+            <div class="first-con">
+              <AudioPlay
+                v-if="data.audio_file_id && data.property.audio_position === 'front'"
+                :file-id="data.audio_file_url"
+                :theme-color="
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                "
+              />
+              <div
+                class="option-content"
+                :style="{
+                  fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+                }"
+              >
+                <span v-if="data.content_hz" class="items-hz">{{ convertText(data.content_hz) }}</span>
+                <!-- 拼音输入 -->
+                <template v-if="data.property.fun_type === 'input'">
+                  <span
+                    v-for="(itemc, indexc) in con_preview"
+                    :key="indexc"
+                    :class="['item-con', itemc.type === 'input' ? 'right' : '']"
+                  >
+                    <el-input
+                      v-if="itemc.type === 'input'"
+                      v-model="itemc.answer"
+                      :disabled="true"
+                      :style="[{ width: Math.max(20, itemc.con.length * 10) + 'px' }]"
+                      class="item-input"
+                    />
+                    <span v-else>{{ itemc.con }}</span>
+                  </span>
+                </template>
+              </div>
+              <AudioPlay
+                v-if="data.audio_file_id && data.property.audio_position === 'back'"
+                :file-id="data.audio_file_url"
+              />
             </div>
-            <AudioPlay
-              v-if="data.audio_file_id && data.property.audio_position === 'back'"
-              :file-id="data.audio_file_url"
-            />
           </div>
         </div>
-      </div>
+      </AnswerAnalysis>
     </div>
   </div>
 </template>

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -32,6 +32,7 @@
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
+        @closeAnswerAnalysis="closeAnswerAnalysis"
       />
     </div>
   </div>

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

@@ -204,13 +204,6 @@
                             @handleWav="handleMiniWav($event, item)"
                           />
                         </template>
-                        <span
-                          v-show="computedAnswerText(item, i, j).length > 0"
-                          :key="`answer-${j}`"
-                          class="right-answer"
-                        >
-                          {{ convertText(computedAnswerText(item, i, j)) }}
-                        </span>
                       </template>
                     </div>
                   </template>
@@ -234,7 +227,247 @@
         :visible.sync="visibleAnswerAnalysis"
         :answer-list="data.answer_list"
         :analysis-list="data.analysis_list"
-      />
+        @closeAnswerAnalysis="closeAnswerAnalysis"
+      >
+        <div
+          slot="right-answer"
+          class="table-box"
+          :style="{
+            width: isMobile ? '100%' : data.property.width + 'px',
+
+            height: data.property.height + 'px',
+          }"
+        >
+          <table
+            :style="{
+              width: isMobile ? '100%' : table_width + 'px',
+
+              height: data.property.height + 'px',
+            }"
+          >
+            <colgroup>
+              <col v-for="(item, i) in data.col_width" :key="`col-${i}`" :style="{ width: `${item.value}px` }" />
+            </colgroup>
+            <tr v-for="(row, i) in data.option_list" :key="`tr-${i}`">
+              <template v-for="(col, j) in row">
+                <td
+                  :key="col.mark"
+                  :style="{
+                    borderTop: i === 0 ? '1px solid ' + data.property.border_color : '',
+                    borderBottom: '1px solid ' + data.property.border_color,
+
+                    borderLeft:
+                      i === 0 && data.property.first_line_color
+                        ? '1px solid ' + data.property.border_color
+                        : j === 0
+                          ? '2px solid ' +
+                            (data.property.decoration_color
+                              ? data.property.decoration_color
+                              : data.property.border_color)
+                          : '1px dotted ' + data.property.border_color,
+                    borderRight:
+                      i === 0 && data.property.first_line_color
+                        ? '1px solid ' + data.property.border_color
+                        : j === row.length - 1
+                          ? '2px solid ' +
+                            (data.property.decoration_color
+                              ? data.property.decoration_color
+                              : data.property.border_color)
+                          : '1px dotted ' + data.property.border_color,
+                    borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
+                    background:
+                      i === 0 && data.property.first_line_color
+                        ? data.property.first_line_color
+                        : j === 0
+                          ? data.property.first_column_color
+                          : data.mode === 'short' && data.styles.bgColor
+                            ? data.styles.bgColor
+                            : '',
+                  }"
+                >
+                  <div :style="[tdStyle, computedRichStyle(col.content)]" class="cell-wrap">
+                    <template v-if="isEnable(data.property.view_pinyin)">
+                      <div
+                        v-for="(item, index) in col.model_pinyin"
+                        :key="index"
+                        class="pinyin-text"
+                        :class="[index === 0 ? 'pinyin-text-left' : '']"
+                      >
+                        <template v-if="item.type === 'input'">
+                          <template v-if="data.property.fill_type === fillTypeList[0].value">
+                            <el-input
+                              :key="index"
+                              v-model="item.value"
+                              :disabled="disabled"
+                              :class="[...computedAnswerClass(item, i, j)]"
+                              :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
+                            />
+                          </template>
+                          <template v-else-if="data.property.fill_type === fillTypeList[1].value">
+                            <el-popover :key="index" placement="top" trigger="click">
+                              <div class="word-list">
+                                <span
+                                  v-for="{ content, mark } in data.word_list"
+                                  :key="mark"
+                                  class="word-item"
+                                  @click="handleSelectWord(content, mark, item)"
+                                >
+                                  {{ convertText(content) }}
+                                </span>
+                              </div>
+
+                              <el-input
+                                slot="reference"
+                                v-model="item.value"
+                                :readonly="true"
+                                :class="[...computedAnswerClass(item, i, j)]"
+                                :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
+                              />
+                            </el-popover>
+                          </template>
+
+                          <template v-else-if="data.property.fill_type === fillTypeList[2].value">
+                            <span :key="j" class="write-click" @click="handleWriteClick(item)">
+                              <img
+                                v-show="item.write_base64"
+                                style="background-color: #f4f4f4"
+                                :src="item.write_base64"
+                                alt="write-show"
+                              />
+                            </span>
+                          </template>
+
+                          <template v-else-if="data.property.fill_type === fillTypeList[3].value">
+                            <SoundRecordBox
+                              ref="record"
+                              :key="j"
+                              type="mini"
+                              :many-times="false"
+                              class="record-box"
+                              :answer-record-list="data.audio_answer_list"
+                              :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+                              :attrib="data.unified_attrib"
+                              @handleWav="handleMiniWav($event, item)"
+                            />
+                          </template>
+                          <span v-if="data.property.pinyin_position === 'bottom'" class="pinyin">&nbsp;</span>
+                        </template>
+                        <template v-else>
+                          <span v-if="data.property.pinyin_position === 'top'" class="pinyin">
+                            {{ item.pinyin.replace(/\s+/g, '') }}
+                          </span>
+                          <span :style="{ ...item.activeTextStyle }">
+                            {{ convertText(item.text) }}
+                          </span>
+                          <span v-if="data.property.pinyin_position === 'bottom'" class="pinyin">{{
+                            item.pinyin.replace(/\s+/g, '')
+                          }}</span>
+                        </template>
+                        <span
+                          v-show="computedAnswerText(item, i, j).length > 0"
+                          :key="`answer-${j}`"
+                          class="right-answer"
+                        >
+                          {{ convertText(computedAnswerText(item, i, j)) }}
+                        </span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div v-for="(item, index) in col.model_essay" :key="index" :style="[tdStyle]">
+                        <span
+                          v-if="item.type === 'text'"
+                          :key="index"
+                          :style="{
+                            fontSize:
+                              data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+                            fontFamily: data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
+                          }"
+                          v-html="convertText(sanitizeHTML(item.value))"
+                        ></span>
+                        <template v-if="item.type === 'input'">
+                          <template v-if="data.property.fill_type === fillTypeList[0].value">
+                            <el-input
+                              :key="index"
+                              v-model="item.value"
+                              :disabled="disabled"
+                              :class="[...computedAnswerClass(item, i, j)]"
+                              :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
+                            />
+                          </template>
+                          <template v-else-if="data.property.fill_type === fillTypeList[1].value">
+                            <el-popover :key="index" placement="top" trigger="click">
+                              <div class="word-list">
+                                <span
+                                  v-for="{ content, mark } in data.word_list"
+                                  :key="mark"
+                                  class="word-item"
+                                  @click="handleSelectWord(content, mark, item)"
+                                >
+                                  {{ convertText(content) }}
+                                </span>
+                              </div>
+
+                              <el-input
+                                slot="reference"
+                                v-model="item.value"
+                                :readonly="true"
+                                :class="[...computedAnswerClass(item, i, j)]"
+                                :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
+                              />
+                            </el-popover>
+                          </template>
+
+                          <template v-else-if="data.property.fill_type === fillTypeList[2].value">
+                            <span :key="j" class="write-click" @click="handleWriteClick(item)">
+                              <img
+                                v-show="item.write_base64"
+                                style="background-color: #f4f4f4"
+                                :src="item.write_base64"
+                                alt="write-show"
+                              />
+                            </span>
+                          </template>
+
+                          <template v-else-if="data.property.fill_type === fillTypeList[3].value">
+                            <SoundRecordBox
+                              ref="record"
+                              :key="j"
+                              type="mini"
+                              :many-times="false"
+                              class="record-box"
+                              :answer-record-list="data.audio_answer_list"
+                              :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+                              :attrib="data.unified_attrib"
+                              @handleWav="handleMiniWav($event, item)"
+                            />
+                          </template>
+                          {{ computedAnswerText(item, i, j) }}
+                          <span
+                            v-show="computedAnswerText(item, i, j).length > 0"
+                            :key="`answer-${j}`"
+                            class="right-answer"
+                          >
+                            {{ convertText(computedAnswerText(item, i, j)) }}
+                          </span>
+                        </template>
+                      </div>
+                    </template>
+                  </div>
+                  <span v-if="showLang" class="multilingual" :style="[tdStyle, computedRichStyle(col.content)]">
+                    {{
+                      multilingualTextList[getLang()] &&
+                      multilingualTextList[getLang()][i] &&
+                      multilingualTextList[getLang()][i][j]
+                        ? multilingualTextList[getLang()][i][j]
+                        : ''
+                    }}
+                  </span>
+                </td>
+              </template>
+            </tr>
+          </table>
+        </div>
+      </AnswerAnalysis>
     </div>
     <WriteDialog :visible.sync="writeVisible" @confirm="handleWriteConfirm" />
   </div>
@@ -300,7 +533,7 @@ export default {
     },
     isJudgingRightWrong(val) {
       if (!val) return;
-      this.data.answer_list = this.answer.answer_list;
+      this.data.answer_lists = this.answer.answer_list;
       // this.answer.answer_list.forEach(({ mark, value }) => {
       //   this.modelEssay.forEach((item) => {
       //     item.forEach((li) => {
@@ -336,13 +569,13 @@ export default {
         this.$set(this.multilingualTextList, item.type, chunkedArr);
       });
       if (!this.isJudgingRightWrong) {
-        this.answer.answer_list = this.data.answer_list;
+        this.answer.answer_list = this.data.answer_lists;
       }
     },
     computedAnswerText(item, i, j) {
       if (!this.isShowRightAnswer) return '';
       let answerOption =
-        this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
+        this.data.answer_lists[i] && this.data.answer_lists[i][j] ? this.data.answer_lists[i][j].answer : '';
       let answerOptionList = answerOption.split('\n');
       if (!item) return '';
       let selectValue = item.value ? item.value.trim() : '';
@@ -360,7 +593,7 @@ export default {
         return '';
       }
       let answerOption =
-        this.data.answer_list[i] && this.data.answer_list[i][j] ? this.data.answer_list[i][j].answer : '';
+        this.data.answer_lists[i] && this.data.answer_lists[i][j] ? this.data.answer_lists[i][j].answer : '';
       let answerOptionList = answerOption.split('\n');
       if (!item) return '';
       let selectValue = item.value ? item.value.trim() : '';

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -30,6 +30,7 @@
       :visible.sync="visibleAnswerAnalysis"
       :answer-list="data.answer_list"
       :analysis-list="data.analysis_list"
+      @closeAnswerAnalysis="closeAnswerAnalysis"
     />
     <el-dialog
       v-if="visible"