@zykjcommon/questions 0.0.12 → 0.0.14

package/src/components/questions/Question_BriefAnswer.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="zykjcommon-question">
+    <div v-if="!isSub" class="question-type">{{questionInfo.questionIndex}}、{{questionInfo.hint ? questionInfo.hint : questionInfo.question_type_str}}<span v-if="questionInfo.score!=='null'"><!--（{{questionInfo.score}}分）--></span>
+      <span class="score fr" v-if="mode==='analysis'">得分：{{questionInfo.answerMap ? questionInfo.answerMap.user_score : '-'}}分</span>
+    </div>
+    <div class="question-box">
+      <!--      <div class="question-stem">{{questionInfo.hint}}</div>-->
+      <div class="editor-content" v-html="questionInfo.htmlContent"></div>
+
+      <!--      <div class="editor-tit">样例输入</div>
+            <div class="editor-output" style="margin-bottom: 0.3rem">
+              哇哈哈哈哈哈
+            </div>
+            <div class="editor-tit">样例输出</div>-->
+      <TextAreaEditor @getTextareaStr="getTextareaStr"
+                      :disabled="mode === 'review'"
+                      v-if="mode === 'exam' || mode === 'review'"
+                      :value="textareaStr"
+                      :placeHolder="'请在此输入答案'"></TextAreaEditor>
+      <div class="editor-output" style="margin-bottom: 0.3rem;"  v-if="mode === 'analysis'">
+        <div class="editor-tit">【你的答案】:</div>
+        <div class="output-main" v-html="answerMap.subjective_answer">
+        </div>
+      </div>
+      <div ></div>
+      <div class="question-analysis" v-if="mode === 'analysis'">
+        <div class="triangle-top"></div>
+        <div class="question-analysis-item">
+          <span class="txt">【正确答案】：</span>
+          <div class="txt-box" v-html="analyCorrectAnswer"></div>
+        </div>
+        <div class="question-analysis-item" v-if="questionInfo.analysis">
+          <span class="txt">【本题解析】：</span>
+          <div class="txt-box">
+            <span class="analysis-txt" v-html="questionInfo.analysisHtmlContent"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--
+    兼容性写法，两个都写
+    vue2支持.sync
+    vue3支持v-model:
+    :visible.sync="visible"
+    v-model:visible="visible"
+    -->
+    <MediaLooker :visible.sync="visible"
+                 v-model:visible="visible"
+                 v-if="visible"
+                 :mediaCount="curMediaCount"
+                 :mediaLookerList="mediaLookerList"></MediaLooker>
+  </div>
+</template>
+<script>
+
+import {commonData,doMediaLookerSome} from './mixin'
+import MediaLooker from '../common/MediaLooker.vue'
+import TextAreaEditor from '../common/TextAreaEditor.vue'
+export default {
+  name: 'Question_BriefAnswer',
+  props: {
+    isSub:{
+      type: Boolean,
+      default: false
+    },
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    bus: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  mounted() {
+    doMediaLookerSome(this)
+  },
+  data() {
+    return {
+      textareaHtml:'',
+      textareaStr:'',
+      analyCorrectAnswer:'',
+      answerMap:{},
+      ...JSON.parse(commonData)
+    };
+  },
+  watch: {
+    questionInfo:{
+      handler(nv,ov){
+        if(nv){
+          this.answerMap = nv.answerMap
+          if(this.questionInfo.answerMap){
+            if(this.mode === 'analysis'){
+              this.analyCorrectAnswer = this.questionInfo.correct_subjective_answer
+            }
+            let subjective_answer = this.questionInfo.answerMap.subjective_answer
+            if(subjective_answer!==undefined && subjective_answer!==null && subjective_answer!==''){
+              //带br的转成纯字符串
+              this.textareaStr = subjective_answer.replace(/<br>/img,'\n')
+            }
+          }
+        }
+      },
+      immediate:true
+    }
+  },
+  computed:{
+  },
+  methods: {
+    getAnswer(){
+      let subjective_answer = this.textareaHtml
+      return {subjective_answer}
+    },
+    isAnswered(){
+      let brReg = /<br>/img
+      let spaceReg = /\s+/img
+      let str = this.textareaHtml.replace(brReg,'')
+      str = str.replace(spaceReg,'')
+      let answerd = str.length > 0
+      return answerd
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    },
+    getTextareaStr(str){
+      let reg = /\n/ig
+      this.textareaHtml = str.replace(reg, '<br>')
+      let answered = this.isAnswered()
+      this.$emit('getIsAnswered',answered)
+      this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+        questionIndex:this.questionInfo.questionIndex - 1,
+        answered
+      })
+    }
+  },
+  components:{
+    TextAreaEditor,
+    MediaLooker
+  }
+};
+</script>

package/src/components/questions/Question_FillBlank.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="zykjcommon-question">
+    <div class="question-type" v-if="!isSub">{{questionInfo.questionIndex}}、{{questionInfo.hint ? questionInfo.hint :questionInfo.question_type_str}}<span v-if="questionInfo.score!=='null'"><!--（{{questionInfo.score}}分）--></span>
+      <span class="score fr" v-if="mode==='analysis'">得分：{{questionInfo.answerMap ? questionInfo.answerMap.user_score : '-'}}分</span>
+    </div>
+    <div class="question-box">
+      <div class="editor-content"
+           style="line-height: 40px;"
+           v-if="questionInfo.htmlContent" v-html="questionInfo.htmlContent"></div>
+
+    </div>
+    <!--
+    兼容性写法，两个都写
+    vue2支持.sync
+    vue3支持v-model:
+    :visible.sync="visible"
+    v-model:visible="visible"
+    -->
+    <MediaLooker :visible.sync="visible"
+                 v-model:visible="visible"
+                 v-if="visible"
+                 :mediaCount="curMediaCount"
+                 :mediaLookerList="mediaLookerList"></MediaLooker>
+  </div>
+</template>
+<script>
+
+import {commonData,doMediaLookerSome} from './mixin'
+import MediaLooker from '../common/MediaLooker.vue'
+let filerRegs = [
+  {reg:/&lt;/ig,val:'<'},
+  {reg:/&gt;/ig,val:'>'}
+]
+export default {
+  name: 'Question_FillBlank',
+  props: {
+    bus: {
+      type: Object,
+      default: {}
+    },
+    isSub:{
+      type: Boolean,
+      default: false
+    },
+    orderIndex:{
+      type: Number,
+      default: 0
+    },
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  mounted() {
+    let self = this
+    doMediaLookerSome(this)
+    this.$watch('questionInfo',(nv)=>{
+      if(nv){
+        this.answerMap = nv.answerMap
+        let fillBlank = jQuery(this.$el).find('.fill-blank')
+        fillBlank.replaceWith(jQuery(`<span class="fill-blank" contenteditable="${self.mode==='exam'?'true':'false'}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>`))
+        jQuery(this.$el).find('.fill-blank').bind('input',function(e){
+          let ipt = jQuery(e.target)
+          let iptValue = ipt.html()
+          iptValue = self.getIptValue(iptValue)
+          if(iptValue.length <= 0){
+            ipt.html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
+          }
+          let answered = self.isAnswered()
+          self.$emit('getIsAnswered',answered)
+          self.mode === 'exam' && self.bus.$emit('questionCardChange',{
+            questionIndex:self.questionInfo.questionIndex - 1,
+            answered
+          })
+        })
+        if(nv.answerMap){
+          if(this.mode === 'analysis'){
+            this.analyCorrectAnswer = this.questionInfo.correct_gap_data
+          }
+          let gap_data = nv.answerMap.gap_data
+          jQuery(this.$el).find('.fill-blank').each((index,item)=>{
+            let val = gap_data[index]
+            if(val){
+              filerRegs.forEach((filterItem)=>{
+                let reg = filterItem.reg
+                if(reg.test(val)){
+                  let replaceVal = filterItem.val
+                  val = val.replace(reg,replaceVal)
+                }
+              })
+              jQuery(item).text(val)
+              this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+                questionIndex:self.questionInfo.questionIndex - 1,
+                answered:true
+              })
+            }
+          })
+        }
+
+        let answered = self.isAnswered()
+        self.$emit('getIsAnswered',answered)
+      }
+    },{
+      immediate:true
+    })
+  },
+  data() {
+    return {
+      analyCorrectAnswer:'',
+      answerMap:{},
+      ...JSON.parse(commonData)
+    };
+  },
+  watch: {},
+  computed:{
+  },
+  methods: {
+    getAnswer(){
+      let fillBlank = jQuery(this.$el).find('.fill-blank')
+      let gap_data = []
+      fillBlank.each((index,item)=>{
+        let iptValue = jQuery(item).html()
+        iptValue = this.getIptValue(iptValue)
+        gap_data.push(iptValue)
+      })
+      return {gap_data}
+    },
+    isAnswered(){
+      let answerResult = this.getAnswer().gap_data
+      let answered = answerResult.some((item)=>{
+        return item !== ''
+      })
+      return answered
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    },
+    getIptValue(str){
+      return str.replace(/&nbsp;/ig,'').replace(/^\s+/ig,'').replace(/\s+$/ig,'')
+    }
+  },
+  components:{
+    MediaLooker
+  }
+};
+</script>

package/src/components/questions/Question_MultipleChoice.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="zykjcommon-question">
+    <div class="question-type" v-if="!isSub">{{questionInfo.questionIndex}}、{{questionInfo.hint ? questionInfo.hint : questionInfo.question_type_str}}<span v-if="questionInfo.score!=='null'"><!--（{{questionInfo.score}}分）--></span>
+      <span class="score fr" v-if="mode==='analysis'">得分：{{questionInfo.answerMap ? questionInfo.answerMap.user_score : '-'}}分</span>
+    </div>
+    <div class="question-box">
+      <!--      <div class="question-stem" v-if="!isSub">{{questionInfo.hint}}</div>-->
+      <div class="question-stem" v-if="isSub"><span v-if="questionInfo.hint">{{questionInfo.questionIndex2}}、</span>{{questionInfo.hint}}</div>
+      <div class="editor-content" v-if="!isSub" v-html="questionInfo.htmlContent"></div>
+      <div class="editor-content" style="display: flex" v-if="isSub">
+        <span v-if="!questionInfo.hint">{{questionInfo.questionIndex2}}、</span><div style="display: inline-block;flex:1;" v-html="questionInfo.htmlContent"></div>
+      </div>
+      <div class="question-option-list">
+        <div class="question-option" v-for="(item,index) in exam_options_data">
+          <div class="checkbox-box" :class="{'checked':checkboxList.indexOf(item.index) > -1}">
+            <input type="checkbox"
+                   :disabled="mode === 'analysis' || mode === 'review'"
+                   v-model="checkboxList"
+                   :id="'checkbox-'+questionInfo.questionIndex+'-'+index"
+                   class="checkbox"
+                   :value="item.index">
+            <div class="checkbox-bg"></div>
+          </div>
+          <div class="label-box">
+            <label :for="'checkbox-'+questionInfo.questionIndex+'-'+index">
+              <span>{{item.enIndex}}.<span v-if="item.data.file_type == 0">{{item.data.option_content}}</span></span>
+              <div class="img-box" v-if="item.data.file_type != 0">
+                <img :src="item.data.file_url">
+              </div>
+            </label>
+          </div>
+        </div>
+        <div class="question-analysis" v-if="mode === 'analysis'">
+          <div class="triangle-top"></div>
+          <div class="question-analysis-item">
+            <span class="txt">【你的回答】：</span>
+            <div class="txt-box">
+              <span :class="{'wrong':questionInfo.answerMap.is_correct !== '1','right':questionInfo.answerMap.is_correct === '1'}">{{questionInfo.answerMap.is_correct !== '1'?'错误':'正确'}}</span>
+            </div>
+          </div>
+          <div class="question-analysis-item">
+            <span class="txt">【正确答案】：</span>
+            <div class="txt-box">
+              <span>{{analyCorrectAnswer}}</span>
+            </div>
+          </div>
+          <div class="question-analysis-item" v-if="questionInfo.analysis">
+            <span class="txt">【本题解析】：</span>
+            <div class="txt-box">
+              <span class="analysis-txt" v-html="questionInfo.analysisHtmlContent"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--
+    兼容性写法，两个都写
+    vue2支持.sync
+    vue3支持v-model:
+    :visible.sync="visible"
+    v-model:visible="visible"
+    -->
+    <MediaLooker :visible.sync="visible"
+                 v-model:visible="visible"
+                 v-if="visible"
+                 :mediaCount="curMediaCount"
+                 :mediaLookerList="mediaLookerList"></MediaLooker>
+  </div>
+</template>
+<script>
+
+import {commonData,doMediaLookerSome} from './mixin'
+import MediaLooker from '../common/MediaLooker.vue'
+import fun from "../../assets/js/fun";
+
+export default {
+  name: 'Question_MultipleChoice',
+  props: {
+    isSub:{
+      type: Boolean,
+      default: false
+    },
+    orderIndex:{
+      type: Number,
+      default: 0
+    },
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    bus: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  mounted() {
+    doMediaLookerSome(this)
+    this.$watch('checkboxList',(nv)=>{
+      let self = this
+      let isSub = this.isSub
+      let answered = this.isAnswered()
+      this.$emit('getIsAnswered',answered)
+      if(!isSub){
+        this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+          questionIndex:this.questionInfo.questionIndex - 1,
+          answered
+        })
+      }else{
+        this.mode === 'exam' && this.bus.$emit('optionChange')
+        this.mode === 'exam' && this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:self.isAnswered()})
+      }
+    },{
+      immediate:true
+    })
+  },
+  data() {
+    return {
+      checkboxList:[],
+      analyCorrectAnswer:'',
+      exam_options_data:[],
+      answerMap:{},
+      ...JSON.parse(commonData)
+    };
+  },
+  watch: {
+    questionInfo:{
+      handler(nv,ov){
+        if(nv){
+          this.exam_options_data = nv.exam_options_data
+          this.answerMap = nv.answerMap
+          //回显答案
+          if(nv.answerMap){
+            if(this.mode === 'analysis'){
+              this.analyCorrectAnswer = this.getCorrectStr(this.questionInfo.correct_multiple_index_set)
+            }
+            let multiple_index_set = this.questionInfo.answerMap.multiple_index_set
+            if(multiple_index_set && multiple_index_set.length){
+              this.checkboxList = JSON.parse(JSON.stringify(multiple_index_set))
+              // analysis的时候在这里标记tab已读，因为改变的时候限定了exam了
+              this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:this.isAnswered()})
+            }
+          }
+        }
+      },
+      immediate:true
+    }
+  },
+  computed:{
+  },
+  methods: {
+    getAnswer(){
+      let self = this
+      return {multiple_index_set:self.checkboxList}
+    },
+    isAnswered(){
+      let answerd = this.checkboxList.length !== 0
+      return answerd
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    },
+    getCorrectStr(correct_multiple_index_set){
+      let str = ''
+      correct_multiple_index_set.forEach((item,index)=>{
+        str += `${fun.indexToEnIndex(item)}${index === correct_multiple_index_set.length -1?'':'、'}`
+      })
+      return str
+    }
+  },
+  components:{
+    MediaLooker
+  }
+};
+</script>