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

<template>
  <div v-if="isSyncState" class="question-view">
    <question-body
      :question-body="question.body"
      :exam-question="examQuestion"
    ></question-body>
    <div class="ops">
      <div class="stu-answer">
        {{ { true: "正确", false: "错误" }[studentAnswer] }}
      </div>
      <div class="score">({{ examQuestion.questionScore }}分)</div>
    </div>
    <div
      :class="[studentAnswer === 'true' && 'row-selected', 'option']"
      @click="() => answerQuestion('true')"
    >
      <input
        type="radio"
        name="question"
        value="true"
        :checked="studentAnswer === 'true'"
        style="margin-top:3px;display:block"
      />
      <span class="question-options">正确</span>
    </div>
    <div
      :class="[studentAnswer === 'false' && 'row-selected', 'option']"
      @click="() => answerQuestion('false')"
    >
      <input
        type="radio"
        name="question"
        value="false"
        :checked="studentAnswer === 'false'"
        style="margin-top:3px;display:block"
      />
      <span class="question-options">错误</span>
    </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>{{ { true: "正确", false: "错误" }[question.rightAnswer] }}</div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "BooleanQuestionView",
  components: {
    QuestionBody,
  },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isShowAnswer: false,
    };
  },
  computed: {
    isSyncState() {
      return this.examQuestion.order == this.$route.params.order;
    },
    studentAnswer: vm => vm.examQuestion.studentAnswer,
  },
  watch: {
    // examQuestion: function() {
    //   this.studentAnswer = this.examQuestion.studentAnswer;
    // },
    // question(question) {
    //   this.questionBody = question.body;
    // }
  },
  created: function() {
    window.addEventListener("keyup", this.keyup);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.keyup);
  },
  methods: {
    ...mapMutations(["updateExamQuestion"]),
    ...mapGetters(["examShouldShowAnswer"]),
    keyup(e) {
      // console.log(e);
      // console.log(document.activeElement.type);
      if (
        ["BODY", "A", "BUTTON", "DIV"].includes(
          document.activeElement.tagName
        ) ||
        (["INPUT"].includes(document.activeElement.tagName) &&
          ["checkbox", "radio"].includes(document.activeElement.type))
      ) {
        window._hmt.push(["_trackEvent", "正在考试页面", "快捷键", "YN"]);
        if ("KeyY" === e.code) {
          this.answerQuestion("true");
        }
        if ("KeyN" === e.code) {
          this.answerQuestion("false");
        }
      }
    },
    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;
}

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

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

.question-options {
  text-align: left;
  margin-left: 10px;
}
</style>