序号样式

src/views/book/courseware/create/components/base/rich_text/RichTextSetting.vue

@@ -44,7 +44,7 @@
       <el-form-item label="读音">
         <el-switch v-model="property.is_enable_voice" active-value="true" inactive-value="false" />
       </el-form-item>
-      <el-form-item label="读音" v-if="property.is_enable_voice === 'true'">
+      <el-form-item v-if="property.is_enable_voice === 'true'" label="读音">
         <el-select v-model="property.audio_generation_method" placeholder="请选择">
           <el-option v-for="{ value, label } in audioGenerationMethodList" :key="value" :label="label" :value="value" />
         </el-select>
@@ -113,6 +113,7 @@ import { GetTextToAudioConfParamList } from '@/api/app';
 export default {
   name: 'RichTextSetting',
   mixins: [SettingMixin],
+  inject: ['getBookUnifiedTitleList'],
   data() {
     return {
       isEnable,
@@ -130,7 +131,6 @@ export default {
       speedRatioList,
     };
   },
-  inject: ['getBookUnifiedTitleList'],
   created() {
     if (typeof this.getBookUnifiedTitleList === 'function') this.titleList = this.getBookUnifiedTitleList() || [];
     this.getTextToAudioConfParamList();

src/views/book/courseware/create/components/question/sort/Sort.vue

@@ -34,7 +34,7 @@
               :class="{
                 'text-center': data.property.arrange_direction === arrangeTypeList[0].value,
               }"
-              placeholder="输入序号"
+              placeholder="多个答案用 / 分隔"
               @input="handleCustomSerialNumber(item)"
             />
           </div>

src/views/book/courseware/data/3dModel.js

@@ -1,8 +1,10 @@
-import { commonSetProperty } from '@/views/book/courseware/data/common';
+import { commonSetProperty, serialNumberStyleList } from '@/views/book/courseware/data/common';
 
 export function get3DModelProperty() {
   return {
     ...commonSetProperty,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
   };
 }
 

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

@@ -6,6 +6,7 @@ import {
   switchOption,
   pinyinPositionList,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 
 export { arrangeTypeList, switchOption };
@@ -54,6 +55,8 @@ export function getFillProperty() {
     fill_type: fillTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     arrange_type: arrangeTypeList[1].value,
     audio_position: audioPositionList[0].value,
     audio_generation_method: audioGenerationMethodList[0].value,

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

@@ -6,6 +6,7 @@ import {
   isEnable,
   pinyinPositionList,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
@@ -24,6 +25,8 @@ export function getJudgeProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     option_type_list: [option_type_list[0].value, option_type_list[1].value, option_type_list[2].value],
     is_view_incertitude: switchOption[1].value,
     option_serial_type: serialNumberTypeList[2].value,

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

@@ -4,6 +4,7 @@ import {
   serialNumberPositionList,
   pinyinPositionList,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
@@ -21,6 +22,8 @@ export function getMatchingProperty(column_num = 2) {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     serial_number_type_list: serialNumberTypeList.slice(0, column_num).map((item) => item.value),
     row_num: 2, // 行数
     column_num, // 列数 2 ~ 3

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

@@ -5,6 +5,7 @@ import {
   arrangeTypeList,
   pinyinPositionList,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 
@@ -24,6 +25,8 @@ export function getSelectProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     arrange_type: arrangeTypeList[0].value,
     select_type: selectTypeList[0].value,
     option_serial_type: serialNumberTypeList[2].value,

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

@@ -5,6 +5,7 @@ import {
   displayList,
   pinyinPositionList,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 export { arrangeTypeList };
@@ -35,6 +36,8 @@ export function getSortProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     option_count: 3,
     arrange_direction: arrangeTypeList[0].value,
     order_type: orderTypeList[0].value,

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

@@ -4,6 +4,7 @@ import {
   serialNumberPositionList,
   switchOption,
   commonComponentProperty,
+  serialNumberStyleList,
 } from '@/views/book/courseware/data/common';
 import { getRandomNumber } from '@/utils';
 export { switchOption };
@@ -21,6 +22,8 @@ export function getVoiceMatrixProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[1].value,
+    sn_style: serialNumberStyleList[0].value,
+    sn_background_color: '#ea3232', // 序号背景色
     align: alignTypeList[0].value, // 对齐方式
     is_enable_row_play: switchOption[0].value, // 是否开启行播放
     is_enable_column_play: switchOption[0].value, // 是否开启列播放

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -54,20 +54,22 @@
       :analysis-list="data.analysis_list"
       @closeAnswerAnalysis="closeAnswerAnalysis"
     >
-      <ul slot="right-answer" class="option-list">
-        <draggable v-model="right_answer_list" animation="300" :disabled="true">
-          <transition-group
-            class="group"
-            :style="{
-              flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
-            }"
-          >
-            <li v-for="(item, i) in right_answer_list" :key="i" :class="['drag-item']">
-              <span class="rich-text" v-html="convertText(sanitizeHTML(item.content))"></span>
-            </li>
-          </transition-group>
-        </draggable>
-      </ul>
+      <div slot="right-answer" class="right-answer">
+        <ul v-for="(li, i) in rightAnswerList" :key="i" class="option-list">
+          <draggable :value="li" :disabled="true">
+            <transition-group
+              class="group"
+              :style="{
+                flexDirection: data.property.arrange_direction === arrangeTypeList[0].value ? 'row' : 'column',
+              }"
+            >
+              <li v-for="(item, j) in li" :key="j" :class="['drag-item']">
+                <span class="rich-text" v-html="convertText(sanitizeHTML(item.content))"></span>
+              </li>
+            </transition-group>
+          </draggable>
+        </ul>
+      </div>
     </AnswerAnalysis>
   </div>
 </template>
@@ -88,13 +90,27 @@ export default {
       data: getSortData(),
       arrangeTypeList,
       move_list: [], // 移动后的数组
-      right_answer_list: [], // 正确答案列表
       drag: false,
       clickIndexList: [], // 点击选中的索引
       is_all_right: false, // 是否全对
       orderTypeList,
     };
   },
+  computed: {
+    rightAnswerList() {
+      const optionList = this.data.option_list;
+      if (!optionList.length) return [];
+      const rightNumber = optionList[0].custom_serial_number.split('/').length;
+      return Array.from({ length: rightNumber }, (_, i) => {
+        return optionList
+          .map((item) => ({
+            ...item,
+            custom_serial_number: item.custom_serial_number.split('/')[i],
+          }))
+          .sort((a, b) => Number(a.custom_serial_number) - Number(b.custom_serial_number));
+      });
+    },
+  },
   watch: {
     move_list: {
       handler(val) {
@@ -110,24 +126,6 @@ export default {
         this.move_list = this.answer.answer_list.map((mark) =>
           this.data.option_list.find((item) => item.mark === mark),
         );
-        const rightAnswerNum = this.move_list[0].custom_serial_number.split('/').length; // 正确答案组数
-        let correctSerial = 0; // 目前是第几组是正确答案
-        for (let i = 0; i < rightAnswerNum; i++) {
-          let isRight = this.move_list.every(
-            ({ custom_serial_number }, index) => index + 1 === Number(custom_serial_number.split('/')[i]),
-          );
-          if (isRight) {
-            this.is_all_right = isRight;
-            correctSerial = i;
-            break;
-          }
-        }
-
-        this.right_answer_list = this.data.option_list.toSorted(
-          (a, b) =>
-            Number(a.custom_serial_number.split('/')[correctSerial]) -
-            Number(b.custom_serial_number.split('/')[correctSerial]),
-        );
       },
       immediate: true,
     },
@@ -252,5 +250,17 @@ export default {
     line-height: 24px;
     color: #000;
   }
+
+  .right-answer {
+    .option-list {
+      margin-bottom: 16px;
+
+      .group {
+        .drag-item {
+          cursor: default;
+        }
+      }
+    }
+  }
 }
 </style>