front/src/components/MxPaper/mx-question-mixin.js

// author: hht 22.1.17
// 代码结构来自mx-app mx-question-content，
// web可以利用slot来实现很多抽象结构，所以这边的写法稍有调整
import consts from '@/common/mx-const'
import { formatDuration } from '@/utils/index'
import eventMixin from './mx-question-event-mixin'

export default {
  mixins: [eventMixin],
  props: {
    options: {
      type: Object,
      default: _ => ({
        question: {},
        allowAnswer: false,
        allowScore: false,
        examineeType: '',
        paperOptions: null
      })
    },
    deep: {
      // for question display override
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      optionCodes: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
      useMathJax: false // for override
    }
  },
  watch: {
    'question.questionId': {
      immediate: true,
      handler: function(newVal) {
        // for math jax auto update
        if (!this.useMathJax) return
        // console.log('watch question changed by id - call math jax format', this)
        this.$nextTick(_ => this.mxGlobal.MathQueue())
      }
    }
  },
  computed: {
    question() {
      return this.options.question
    },
    allowAnswer() {
      return this.options.allowAnswer
    },
    allowScore() {
      return this.options.allowScore
    },
    examineeType() {
      // examineeType.evaluation as default.
      return this.options.examineeType || consts.enum.paper.examineeType.evaluation
    },
    userWrong() {
      return this.sysAnswer && this.userAnswer != this.sysAnswer
    },
    userAnswer() {
      return this.question?.answer || ''
    },
    sysAnswer() {
      return this.question?.answers?.first() || ''
    },
    userAnswerConvert() {
      // 转成便于计算的数组
      return this.userAnswer && this.userAnswer.split(',') || []
    },
    sysAnswerConvert() {
      // 转成便于计算的数组
      return this.sysAnswer && this.sysAnswer.split(',') || []
    },
    useReadonlyMode() {
      return !this.allowAnswer && !this.allowScore
    },
    questionWithSeq() {
      const {seq, type, title} = this.question
      let prefix = seq ? seq + '、' : ''
      if (type) prefix += '[' + type + ']'
      if (title?.startsWith('<div')||title?.startsWith('<p')) {
        let tagBegin = /<(div|p)[^>]*>(\s|(&nbsp;))*/.exec(title)?.first()
        if (tagBegin) {
          const titleRest = title.substring(tagBegin.length)
          tagBegin = tagBegin.replaceAll('&nbsp;', '').replaceAll(' ', '')
          return tagBegin + prefix + titleRest
        }
      }
      return prefix + title
    },
    optionsVisible() {
      return this.question.options && this.question.options.length
    },
    optionsWithCode() {
      return this.question.options.map((opt, idx) => ({
        code: this.optionCodes[idx],
        option: this.optionCodes[idx] + '、' + opt
      }))
    },
    enableRememberAnswer() {
      const rememberTypes = [4,5,6,7]
      return rememberTypes.some(id => id == this.question.typeId)
    },
    useMultipleStyle() {
      // 子题都算主观题, 学生手写作答
      return this.deep == 0 && this.question.typeId == 3
    },
    useRadioStyle() {
      // 子题都算主观题, 学生手写作答
      const radioTypes = [1,6,7]
      return this.deep == 0 && radioTypes.some(id => id == this.question.typeId)
    },
    useViewOfLifeValuesPair() {
      // 人生价值观测评，此类题有两个选项，要求两个选项的得分之和为3
      return this.deep == 0 && this.question.typeId == 4
    },
    useViewOfLifeValuesQuadruplet() {
      // 人生价值观测评，此类题有四个选项，要求四个选项分别得3，2，1，0四种得分
      return this.deep == 0 && this.question.typeId == 5
    },
    useAnswerStyle() {
      // 主观题需要手写作答
      return this.allowAnswer &&
        !this.useRadioStyle && !this.useMultipleStyle &&
        !this.useViewOfLifeValuesPair && !this.useViewOfLifeValuesQuadruplet
    },
    useParseStyle() {
      // 答案/解析/评分
      return !this.allowAnswer
    },
    useBoardTextStyle() {
      return this.question._boardMode == consts.enum.paper.boardMode.text
    },
    useBoardImageStyle() {
      return this.question._boardMode == consts.enum.paper.boardMode.image
    },
    durationDisplay() {
      return formatDuration(this.question._duration, true)
    },
    useBoardParseStyle() {
      return this.question._parseMode == consts.enum.paper.parseMode.parse
    },
    useBoardScoreStyle() {
      return this.question._parseMode == consts.enum.paper.parseMode.score
    }
  },
  methods: {
    // question options display
    isWrong(code) {
      // 展示错误回答，标红
      if (!this.userWrong) return false
      return this.userAnswerConvert.includes(code) && !this.sysAnswerConvert.includes(code)
    },
    isHighlight(code) {
      // 显示正确答案，标绿
      // if (!this.userWrong) return false
      return this.sysAnswerConvert.includes(code)
    },

    // question board style
    setBoardTextStyle() {
      this.question._boardMode = consts.enum.paper.boardMode.text
    },
    setBoardImageStyle() {
      this.question._boardMode = consts.enum.paper.boardMode.image
    },
    setParseDefaultStyle() {
      this.question._parseMode = consts.enum.paper.parseMode.parse
    },
    setParseScoreStyle() {
      this.question._parseMode = consts.enum.paper.parseMode.score
    },
    setLocalDurationUp() {
      this.question._duration = this.question._duration + 1
    }
  }
}