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

<template>
  <div v-if="isSyncState" class="question-view">
    <question-body
      :question-body="questionBody"
      :exam-question="examQuestion"
    ></question-body>
    <div class="ops">
      <div class="score">({{ examQuestion.questionScore }}分)</div>
    </div>
    <div
      v-for="(option, index) in studentAnswer.split('##')"
      :key="examQuestion.questionId + index"
      class="option"
    >
      <span class="question-options">{{ index + 1 }}. </span>
      <input
        type="text"
        maxlength="5000"
        name="question"
        class="input-answer"
        :value="option"
        @input="inputAnswer"
      />
    </div>
    <div class="reset">
      <!-- <i-button type="warning" size="large" @click="resetAnswer">
        重置答案
      </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 class="right-answer-section" v-html="rightAnswerTransform"></div>
      </div>
    </div>
  </div>
</template>

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

/**
 * 1. 进入页面，this.studentAnswer从examQuestion.studentAnswer获得数据
 * 2. 输入答案，this.studentAnswer更新，同时questionbody更新，但不提交答案
 * 3. 输入框失去焦点，提交答案
 * 4. 切换页面，this.studentAnswer从examQuestion获得数据
 *
 * */

export default {
  name: "FillBlankQuestionView",
  components: {
    QuestionBody,
  },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      studentAnswer: "",
      questionBody: "",
      isShowAnswer: false,
    };
  },
  computed: {
    isSyncState() {
      return this.examQuestion.order == this.$route.params.order;
    },
    rightAnswerTransform() {
      // if (
      //   this.question.rightAnswer &&
      //   !this.question.rightAnswer.join("").includes("##")
      // ) {
      //   return this.question.rightAnswer;
      // }
      return (
        this.question.rightAnswer &&
        this.question.rightAnswer
          .join("")
          .split("##")
          .map((v, i) => `${i + 1}、${v}<br>`)
          .join("")
      );
    },
  },
  watch: {
    // examQuestion: function() {
    //   this.prepareData();
    // },
    question(question) {
      this.questionBody = question.body;
      this.prepareData();
    },
    studentAnswer() {
      let realAnswer = null;
      if (this.studentAnswer && this.studentAnswer.replace(/##/g, "").trim()) {
        // 如果有实际内容
        realAnswer = this.studentAnswer
          .replace(/</gi, "&lt;")
          .replace(/>/gi, "&gt;");
        // console.log("answers to store:", realAnswer);
      }
      if (realAnswer !== this.examQuestion.studentAnswer) {
        this.updateExamQuestion({
          order: this.examQuestion.order,
          studentAnswer: realAnswer,
        });
      }
    },
  },
  created() {
    this.prepareData();
  },
  methods: {
    ...mapMutations(["updateExamQuestion"]),
    ...mapGetters(["examShouldShowAnswer"]),
    prepareData() {
      const questionNumber = this.question.body.split(/_{5,}/).length - 1;

      this.studentAnswer =
        this.examQuestion.studentAnswer || "##".repeat(questionNumber - 1);

      const answers = this.studentAnswer
        .replace(/</gi, "&lt;")
        .replace(/>/gi, "&gt;")
        .split("##");
      this.questionBody = this.question.body.replace(
        /_{5,}/g,
        () =>
          "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
          (answers.shift() || questionNumber - answers.length) +
          "</span>"
      );
    },
    inputAnswer: function() {
      const questionNumber = this.question.body.split(/_{5,}/).length - 1;
      let ans = "";
      document
        .querySelectorAll(".option input")
        .forEach(e => (ans += e.value + "##"));
      this.studentAnswer = ans.slice(0, -2);
      const answers = this.studentAnswer
        .replace(/</gi, "&lt;")
        .replace(/>/gi, "&gt;")
        .split("##");
      // console.log("answers: ", answers);
      this.questionBody = this.question.body.replace(
        /_{5,}/g,
        () =>
          "<span style='display: inline-block; min-width: 80px; border-bottom: 1px solid black; text-align: center'>" +
          (answers.shift() || questionNumber - answers.length) +
          "</span>"
      );
    },
    resetAnswer() {
      this.updateExamQuestion({
        order: this.examQuestion.order,
        studentAnswer: null,
      });
      this.examQuestion.studentAnswer = null;
      this.prepareData();
    },
    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;
}

.option {
  display: flex;
  line-height: 24px;
}
.input-answer {
  width: 400px;
}
.question-options {
  padding-right: 10px;
}
</style>

<style>
div.right-answer-section > p {
  display: inline;
}
</style>