多选题

src/features/OnlineExam/Examing/SingleQuestionView.vue → src/features/OnlineExam/Examing/ChoiceQuestionView.vue

@@ -63,17 +63,39 @@ function keyup(e: KeyboardEvent) {
         .includes(e.code)
     ) {
       _hmt.push(["_trackEvent", "答题页面", "快捷键", "ABCDE"]);
-      logger({ cnl: ["server"], act: "选择题键盘作答" });
+      logger({ cnl: ["server"], lvl: "debug", act: "选择题键盘作答" });
       const keyAns = newQuestionOptions.find((v) => v.name == e.code[3]);
-      if (keyAns) examQuestion.studentAnswer = keyAns.oldIndex;
+      if (keyAns) {
+        answerQuestion(keyAns.oldIndex);
+      }
     }
   }
 }
 
 function answerQuestion(studentAnswer: string) {
-  if (studentAnswer !== examQuestion.studentAnswer) {
-    store.updateExamQuestion({ order: examQuestion.order, studentAnswer });
+  if (examQuestion.questionType === "SINGLE_CHOICE") {
+    examQuestion.studentAnswer = studentAnswer;
+  } else {
+    // 多选题
+    const oldAns = examQuestion.studentAnswer;
+    if (oldAns) {
+      if (oldAns.includes(studentAnswer)) {
+        examQuestion.studentAnswer = oldAns.replace(studentAnswer, "");
+      } else {
+        examQuestion.studentAnswer = oldAns
+          .concat(studentAnswer)
+          .split("")
+          .sort()
+          .join("");
+      }
+    } else {
+      examQuestion.studentAnswer = studentAnswer;
+    }
   }
+  store.updateExamQuestion({
+    order: examQuestion.order,
+    studentAnswer: examQuestion.studentAnswer,
+  });
 }
 function toggleShowAnswer() {
   isShowAnswer = !isShowAnswer;
@@ -81,10 +103,7 @@ function toggleShowAnswer() {
 </script>
 
 <template>
-  <div
-    v-if="examQuestion.questionType === 'SINGLE_CHOICE'"
-    class="question-view"
-  >
+  <div class="question-view">
     <question-body :questionBody="examQuestion.body" />
     <div class="ops">
       <div class="stu-answer">{{ oldIndexToABCD }}</div>
@@ -98,25 +117,26 @@ function toggleShowAnswer() {
     >
       <div
         :class="
-          examQuestion.studentAnswer === option.oldIndex && 'row-selected'
+          examQuestion.studentAnswer?.includes(option.oldIndex) &&
+          'row-selected'
         "
-        style="display: flex"
+        class="tw-flex tw-items-start"
       >
         <div>
           <input
-            type="radio"
+            :type="
+              examQuestion.questionType === 'SINGLE_CHOICE'
+                ? 'radio'
+                : 'checkbox'
+            "
             name="question"
             :value="option.oldIndex"
-            :checked="examQuestion.studentAnswer === option.oldIndex"
-            style="margin-top: 3px; display: block"
+            :checked="examQuestion.studentAnswer?.includes(option.oldIndex)"
           />
         </div>
         <span style="padding: 0 10px">{{ optionName[index] }}: </span>
         <div v-if="option.value" class="question-options">
-          <question-body
-            :questionBody="option.value.body"
-            :examQuestion="examQuestion"
-          />
+          <question-body :questionBody="option.value.body" />
         </div>
       </div>
     </div>

src/features/OnlineExam/Examing/QuestionViewSingle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { store } from "@/store/store";
-import SingleQuestionView from "./SingleQuestionView.vue";
-// import MultipleQuestionView from "./MultipleQuestionView";
+import ChoiceQuestionView from "./ChoiceQuestionView.vue";
+// import MultipleQuestionView from "./MultipleQuestionView.vue";
 // import BooleanQuestionView from "./BooleanQuestionView";
 // import FillBlankQuestionView from "./FillBlankQuestionView";
 // import TextQuestionView from "./TextQuestionView";
@@ -17,23 +17,19 @@ const examQuestion = $computed(() => store.exam.currentQuestion);
       class="question-view"
     >
       <div style="margin-bottom: -45px">{{ examQuestion.inGroupOrder }}、</div>
-      <template v-if="examQuestion.questionType === 'SINGLE_CHOICE'">
-        <single-question-view :key="examQuestion.order" />
-      </template>
+      <ChoiceQuestionView
+        v-if="examQuestion.questionType === 'SINGLE_CHOICE'"
+        :key="examQuestion.order"
+      />
+      <ChoiceQuestionView
+        v-if="examQuestion.questionType === 'MULTIPLE_CHOICE'"
+        :key="examQuestion.order"
+      />
+      <!-- <MultipleQuestionView
+        v-if="examQuestion.questionType === 'MULTIPLE_CHOICE'"
+        :key="examQuestion.order"
+      /> -->
       <!-- <template
-        v-if="
-          question &&
-          question.questionType === 'MULTIPLE_CHOICE' &&
-          examQuestion.questionType === 'MULTIPLE_CHOICE'
-        "
-      >
-        <multiple-question-view
-          :key="examQuestion.order"
-          :question="question"
-          :examQuestion="examQuestion"
-        />
-      </template>
-      <template
         v-if="
           question &&
           question.questionType === 'TRUE_OR_FALSE' &&