排序 横排

src/views/exercise_questions/preview/SortPreview.vue

@@ -13,7 +13,7 @@
         group: { name: 'itxst', pull: 'clone' },
       }"
       :sort="task_model == 'ANSWER' ? false : true"
-      class="content-box"
+      :class="['content-box', 'content-box-' + data.property.layout_type]"
       @start="onStart($event)"
       @end="onEnd($event)"
     >
@@ -23,8 +23,19 @@
           :key="indexNode"
           :class="['drag-item', itemNode.correct == 'correct' ? 'correct' : 'error']"
         >
-          <SvgIcon class="drag-icon" :size="20" icon-class="draggable" />
+          <SvgIcon
+            v-if="data.property.layout_type === 'vertical'"
+            class="drag-icon"
+            :size="20"
+            icon-class="draggable"
+          />
           <span class="drag-content" v-html="sanitizeHTML(itemNode.content)"></span>
+          <SvgIcon
+            v-if="data.property.layout_type === 'horizontal'"
+            class="drag-icon"
+            :size="20"
+            icon-class="draggable"
+          />
         </div>
       </transition-group>
     </draggable>
@@ -54,20 +65,26 @@ export default {
         this.answer_list = val.map(({ mark }) => {
           return mark;
         });
-        console.log(this.answer_list);
       },
       deep: true,
     },
   },
   created() {
-    console.log(this.data);
     this.handleData();
   },
   mounted() {},
   methods: {
     // 初始化数据
     handleData() {
-      this.move_list = this.shuffle(JSON.parse(JSON.stringify(this.data.option_list)));
+      let sort_list = this.shuffle(JSON.parse(JSON.stringify(this.data.option_list)));
+      sort_list.forEach((item, index) => {
+        if (item.mark === this.data.option_list[index].mark) {
+          item.correct = true;
+        } else {
+          item.correct = false;
+        }
+      });
+      this.move_list = sort_list;
     },
     // 随机打乱数组顺序
     shuffle(arr) {
@@ -88,7 +105,13 @@ export default {
     },
     // 判断对错
     changeuserAnswerJudge() {
-      let flag = true;
+      this.move_list.forEach((item, index) => {
+        if (item.mark === this.data.option_list[index].mark) {
+          item.correct = true;
+        } else {
+          item.correct = false;
+        }
+      });
     },
   },
 };
@@ -126,6 +149,30 @@ export default {
         margin: 0;
       }
     }
+
+    &-horizontal {
+      > span {
+        display: flex;
+        column-gap: 8px;
+      }
+
+      .drag-item {
+        display: block;
+      }
+
+      .drag-content {
+        display: block;
+        width: max-content;
+        padding: 8px 16px;
+        background: #f9f8f9;
+        border-radius: 4px;
+      }
+
+      .drag-icon {
+        display: block;
+        margin: 16px auto 0;
+      }
+    }
   }
 }
 </style>