student-client/src/features/OnlineExam/Examing/SingleQuestionView.vue

<template>
  <div
    v-if="isSyncState && examQuestion.questionType === 'SINGLE_CHOICE'"
    class="question-view"
  >
    <question-body
      :question-body="questionBody"
      :exam-question="examQuestion"
    ></question-body>
    <div class="ops">
      <div class="stu-answer">{{ oldIndexToABCD }}</div>
      <div class="score">({{ examQuestion.questionScore }}分)</div>
    </div>
    <div
      v-for="(option, index) in newQuestionOptions"
      :key="index"
      class="option"
      @click="
        () => {
          answerQuestion(option.oldIndex);
        }
      "
    >
      <div
        :class="studentAnswer === option.oldIndex && 'row-selected'"
        style="display: flex"
      >
        <div>
          <input
            type="radio"
            name="question"
            :value="option.oldIndex"
            :checked="studentAnswer === option.oldIndex"
            style="margin-top: 3px; display: block"
          />
        </div>
        <span style="padding: 0 10px">{{ optionName[index] }}: </span>
        <div v-if="option.value" class="question-options">
          <question-body
            :question-body="option.value.body"
            :exam-question="examQuestion"
          ></question-body>
        </div>
      </div>
    </div>
    <div class="reset">
      <!-- <i-button type="warning" size="large" @click="() => answerQuestion(null)">
        重置答案
      </i-button> -->
      <span v-if="examShouldShowAnswer()">
        &nbsp;&nbsp;&nbsp;<i-button
          type="info"
          size="large"
          @click="showAnswer"
        >
          显示答案
        </i-button>
      </span>
      <div v-if="examShouldShowAnswer() && isShowAnswer">
        正确答案：
        <div>{{ rightAnswerTransform }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import QuestionBody from "./QuestionBody";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapGetters } =
  createNamespacedHelpers("examingHomeModule");

const optionName = "ABCDEFGHIJ".split("");
export default {
  name: "SingleQuestionView",
  components: {
    QuestionBody,
  },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      questionBody: this.question.body,
      optionName,
      studentAnswer: this.examQuestion.studentAnswer,
      isShowAnswer: false,
    };
  },
  computed: {
    isSyncState() {
      return this.examQuestion.order == this.$route.params.order;
    },
    newQuestionOptions() {
      return this.question.questionOptionList.map((v, i) => {
        return {
          value:
            this.question.questionOptionList[
              this.examQuestion.optionPermutation[i]
            ],
          oldIndex: "" + this.examQuestion.optionPermutation[i],
          name: optionName[i],
        };
      });
    },
    oldIndexToABCD() {
      return (
        this.examQuestion.studentAnswer &&
        this.newQuestionOptions
          .filter((v) => this.examQuestion.studentAnswer.includes(v.oldIndex))
          .map((v) => v.name)
          .join("")
      );
    },
    rightAnswerTransform() {
      return (
        this.question.rightAnswer &&
        this.newQuestionOptions
          .filter((v) => this.question.rightAnswer.includes(v.oldIndex))
          .map((v) => v.name)
          .join("")
      );
    },
  },
  watch: {
    examQuestion: function (examQuestion) {
      this.studentAnswer = examQuestion.studentAnswer;
    },
    question(question) {
      this.questionBody = question.body;
    },
  },
  created: function () {
    window.addEventListener("keyup", this.keyup);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.keyup);
  },
  beforeUpdate() {
    this.answerQuestion(this.studentAnswer);
  },
  methods: {
    ...mapMutations(["updateExamQuestion"]),
    ...mapGetters(["examShouldShowAnswer"]),
    keyup(e) {
      if (
        ["BODY", "A", "BUTTON", "DIV"].includes(
          document.activeElement.tagName
        ) ||
        (["INPUT"].includes(document.activeElement.tagName) &&
          ["checkbox", "radio"].includes(document.activeElement.type))
      ) {
        if (
          optionName
            .map((v) => "Key" + v)
            .slice(0, this.question.questionOptionList.length)
            .includes(e.code)
        ) {
          window._hmt.push(["_trackEvent", "答题页面", "快捷键", "ABCDE"]);
          this.studentAnswer = this.newQuestionOptions.find(
            (v) => v.name == e.code[3]
          ).oldIndex;
        }
      }
    },
    async answerQuestion(studentAnswer) {
      if (this.isSyncState === false) {
        console.log("更新答案时，问题与答案的号码不一致。");
        return;
      }
      if (studentAnswer !== this.examQuestion.studentAnswer) {
        this.updateExamQuestion({
          order: this.examQuestion.order,
          studentAnswer,
        });
      }
    },
    showAnswer() {
      this.isShowAnswer = !this.isShowAnswer;
    },
  },
};
</script>

<style scoped>
.question-view {
  display: grid;
  grid-row-gap: 10px;
}

.question-body {
  font-size: 18px;
  /* margin-bottom: 10px; */
}

.ops {
  display: flex;
  align-items: flex-end;
}

.stu-answer {
  width: 100px;
  border-bottom: 1px solid black;
  text-align: center;
  height: 20px;
}

.option {
  display: flex;
  cursor: pointer;
  padding-top: 10px;
  border-radius: 5px;
}

.question-options {
  flex: 1;
}

.option:hover {
  background-color: aliceblue;
}

.row-selected {
  background-color: aliceblue;
  width: 100%;
}

.question-options > .question-body {
  text-align: left;
  font-size: 16px !important;
}
</style>