src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -18,12 +18,9 @@
       <ul class="answer-list">
         <li v-for="(li, i) in data.answer.answer_list" :key="i" class="answer-item">
           <template v-for="(item, j) in li">
-            <span v-if="j === 0" :key="`${j}-${item.mark}`">
-              {{ computeOptionMethods[data.property.serial_number_type_list[j]](i) }}
-            </span>
-            <el-select v-else :key="`${j}-${item.mark}`" v-model="item.mark" placeholder="请选择">
+            <el-select :key="`${j}-${item.mark}`" v-model="item.mark" placeholder="请选择">
               <el-option
-                v-for="answer in answerList[j - 1]"
+                v-for="answer in answerList[j]"
                 :key="answer.value"
                 :label="answer.label"
                 :value="answer.value"
@@ -82,10 +79,10 @@ export default {
   },
   computed: {
     answerList() {
-      let list = Array.from({ length: this.data.property.column_num - 1 }, () => []);
+      let list = Array.from({ length: this.data.property.column_num }, () => []);
       for (let i = 0; i < this.data.option_list.length; i++) {
-        for (let j = 1; j < this.data.option_list[i].length; j++) {
-          list[j - 1].push({
+        for (let j = 0; j < this.data.option_list[i].length; j++) {
+          list[j].push({
             label: computeOptionMethods[this.data.property.serial_number_type_list[j]](i),
             value: this.data.option_list[i][j].mark,
           });

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

@@ -108,7 +108,7 @@ export const tone_data = [
  * @returns String
  */
 export function addTone(number, con) {
-  const zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'ü', 'A', 'O', 'E', 'I', 'U','n','m'];
+  const zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'ü', 'A', 'O', 'E', 'I', 'U', 'n', 'm'];
   let cons = con;
   if (number) {
     for (let i = 0; i < zmList.length; i++) {

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -72,7 +72,7 @@ export default {
         if (!val) return;
         let list = val.map((item) => {
           return item.map(({ mark }) => {
-            return { mark, preMark: '', nextMark: '' };
+            return { mark, preMark: [], nextMark: [] };
           });
         });
         this.$set(this, 'answerList', list);
@@ -82,56 +82,18 @@ export default {
     answerList: {
       handler(list) {
         let arr = [];
-        let column_number = this.data.property.column_num;
-        // 从前往后遍历，如果有 nextMark，就往后找，直到没有 nextMark
-        // 如果第一个选项的 nextMark 为空，则整个行都为空，等待后面的 preArr 填充
-        list.forEach((item, i) => {
-          let { mark, nextMark } = item[0];
-          arr[i] = nextMark ? [mark, nextMark] : new Array(column_number).fill('');
-          let _nextMark = nextMark;
-          while (_nextMark) {
-            let fMark = this.findMark(list, _nextMark, 'next');
-            if (column_number > arr[i].length) {
-              arr[i].push(fMark);
-            }
-            _nextMark = fMark;
-          }
-        });
-        let emptyStringArray = []; // 无数据的列的下标数组
-        arr.forEach((item, i) => {
-          item.every((li) => li.length <= 0) ? emptyStringArray.push(i) : '';
-        });
-        if (column_number === 2) {
-          this.answer.answer_list = arr;
-          return;
-        }
-        // 从后向前遍历，如果有 preMark，就往前找，直到没有 preMark，并过滤掉无数据的列
-        let preArr = [];
+
         list.forEach((item) => {
-          let { mark, preMark } = item[column_number - 1];
-          let _arr = new Array(column_number).fill('');
-          let back = column_number - 1;
-          let _preMark = preMark;
-          while (_preMark) {
-            _arr[back] = mark;
-            back -= 1;
-            _arr[back] = _preMark;
-            back -= 1;
-            let fMark = this.findMark(list, _preMark, 'pre');
-            if (back >= 0 && fMark) {
-              _arr[back] = fMark;
+          item.forEach(({ mark, preMark, nextMark }, j) => {
+            if (preMark.length === 0 && nextMark.length === 0) return;
+            if (nextMark.length > 0 && j === 0) {
+              nextMark.forEach((m) => {
+                arr.push([{ mark }, { mark: m }]);
+              });
             }
-            _preMark = fMark;
-          }
-          if (_arr.every((li) => li.length <= 0) || _arr.every((li) => li.length > 0)) return;
-          preArr.push(_arr);
-        });
-        // 将 preArr 中的数据填充到 arr 无数据的位置中
-        if (preArr.length > 0 && emptyStringArray.length > 0) {
-          preArr.forEach((item, i) => {
-            arr[emptyStringArray[i]] = item;
           });
-        }
+        });
+
         this.answer.answer_list = arr;
       },
       deep: true,
@@ -143,7 +105,7 @@ export default {
           this.circulateAnswerList();
         });
       } else {
-        this.clearLine();
+        // this.clearLine();
       }
     },
     isShowRightAnswer(cur) {
@@ -317,7 +279,7 @@ export default {
             });
           });
           this.curConnectionPoint = { i: cur.i, j: cur.j, mark };
-          const nextMark = isShowRightAnswer ? item[j + 1].mark : item[j + 1];
+          const nextMark = isShowRightAnswer ? item[j + 1].mark : item[j + 1].mark;
           this.createLine(nextMark, false, isShowRightAnswer);
         });
       });
@@ -384,7 +346,16 @@ export default {
      * @param {Boolean} isShowRightAnswer 是否是显示正确答案
      */
     computedCurConnectionPoint(isDrag = false, isShowRightAnswer = false) {
-      const { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
+      let { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
+      let type = Object.prototype.toString.call(mark);
+      if (type === '[object String]') {
+        type = 'string';
+      } else if (type === '[object Object]') {
+        type = 'object';
+      }
+      if (type === 'object') {
+        mark = mark.mark;
+      }
       const dom = document.getElementsByClassName(`${isShowRightAnswer ? 'answer-' : ''}item-${mark}`)[0];
 
       return {
@@ -406,6 +377,7 @@ export default {
     /**
      * 修改连接列表
      * @param {String} mark 选项标识
+     * @param {Number} j 当前选项索引
      * @param {Boolean} isDrag 是否是拖拽
      */
     changeConnectionList(mark, j, isDrag = false) {
@@ -419,45 +391,18 @@ export default {
      * @param {String} mark 选项标识
      */
     changeAnswerList(curMark, mark, isPre) {
-      let oldPointer = { mark: '', position: '' };
-      // 找到当前选项，修改 preMark 或 nextMark
       this.answerList.find((item) =>
         item.find((li) => {
           if (li.mark === curMark) {
-            if (isPre) {
-              if (li.nextMark) {
-                oldPointer = { mark: li.nextMark, position: 'next' };
-              }
-              li.nextMark = mark;
-            } else {
-              if (li.preMark) {
-                oldPointer = { mark: li.preMark, position: 'pre' };
-              }
-              li.preMark = mark;
+            if (isPre && !li.preMark.includes(mark)) {
+              li.nextMark.push(mark);
+            } else if (!isPre && !li.nextMark.includes(mark)) {
+              li.preMark.push(mark);
             }
             return true;
           }
         }),
       );
-      // 打开这个，一个只能连一个
-      // // 如果当前选项有 preMark 或 nextMark，则清除原来的连线
-      // if (!oldPointer.mark) return;
-      // document.querySelector(`svg.connection-line.svg-${curMark}-${oldPointer.mark}`)?.remove();
-      // document.querySelector(`svg.connection-line.svg-${oldPointer.mark}-${curMark}`)?.remove();
-
-      // // 找到原来的选项，清除 preMark 或 nextMark
-      // this.answerList.find((item) =>
-      //   item.find((li) => {
-      //     if (li.mark === oldPointer.mark) {
-      //       if (oldPointer.position === 'pre') {
-      //         li.nextMark = '';
-      //       } else {
-      //         li.preMark = '';
-      //       }
-      //       return true;
-      //     }
-      //   }),
-      // );
     },
     /**
      * 根据 mark 查找 nextMark 或 preMark
@@ -484,34 +429,40 @@ export default {
      */
     computedAnswerClass(mark) {
       if (!this.isJudgingRightWrong) return '';
-      let answer = this.data.answer.answer_list.find((item) => {
+      let answer = this.data.answer.answer_list.filter((item) => {
         return item.some((li) => li.mark === mark);
       });
-      return this.is2DArrayContains1DArray(this.answer.answer_list, answer) ? 'right' : 'wrong';
-    },
-    /**
-     * 判断二维数组是否包含一维数组
-     * @param {array} arr2D 二维数组
-     * @param {array} arr1D 一维数组
-     */
-    is2DArrayContains1DArray(arr2D, arr1D) {
-      for (let i = 0; i < arr2D.length; i++) {
-        const currentArray = arr2D[i];
-        if (currentArray.length !== arr1D.length) {
-          continue;
-        }
-        let found = true;
-        for (let j = 0; j < currentArray.length; j++) {
-          if (currentArray[j] !== arr1D[j].mark) {
-            found = false;
-            break;
+      let userAnswer = this.answer.answer_list.filter((item) => {
+        return item.some((li) => li.mark === mark);
+      });
+      if (answer.length === 0 && userAnswer.length === 0) return '';
+      if (answer.length === 0 || userAnswer.length === 0) return 'wrong';
+
+      let isRight = true;
+      userAnswer.forEach((item) => {
+        let len = item.length;
+        let index = item.findIndex((li) => li.mark === mark);
+        // 根据 mark 查找答案列表中对应的选项
+        let answerList = answer.filter((item) => {
+          return item.findIndex((li) => li.mark === mark) === index;
+        });
+
+        // 循环答案列表和用户答案，判断是否完全相等
+        for (let i = 0; i < answerList.length; i++) {
+          let isAllRight = true;
+          for (let j = 0; j < len; j++) {
+            if (j === index) continue;
+            let isEqual = item[j].mark === answerList[i][j].mark;
+            if (!isEqual) {
+              isAllRight = false;
+              break;
+            }
           }
+          isRight = isAllRight;
+          if (isRight) break;
         }
-        if (found) {
-          return true;
-        }
-      }
-      return false;
+      });
+      return isRight ? 'right' : 'wrong';
     },
   },
 };