@zykjcommon/questions 0.0.12 → 0.0.14

package/src/components/questions/Question_Programming.vue

@@ -0,0 +1,285 @@
+<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">{{questionInfo.hint}}</div>-->
+      <div class="editor-content" v-html="questionInfo.htmlContent"></div>
+      <button class="bcdt-btn"
+              v-if="(mode==='exam' && !oss_temp_url) || mode==='review'"
+              @click="startCode('1')">进入{{codeTypeMap[questionInfo.code_type]}}答题</button>
+
+      <div class="question-analysis" v-if="mode==='exam' && oss_temp_url">
+        <div class="triangle-top"></div>
+        <div class="question-analysis-item">
+          <span class="txt">【你的答案】：</span>
+          <div class="img-box" @click="startCode('2')">
+            <img :src="codeTypeImgMap[questionInfo.code_type]">
+            <div class="mask-text-box">
+              <div class="mask"></div>
+              <div class="mask-text">去修改</div>
+            </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="img-box" @click="startCode('3')">
+            <img :src="codeTypeImgMap[questionInfo.code_type]">
+          </div>
+        </div>
+        <div class="question-analysis-item">
+          <span class="txt">【正确答案】：</span>
+          <div class="img-box" @click="startCode('4')">
+            <img :src="codeTypeImgMap[questionInfo.code_type]">
+          </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>
+    <IframeComponent :iframeUrl="iframeUrl"
+                     @uploadCodingFileSuccess="uploadCodingFileSuccess"
+                     @close="closeIframe"
+                     @closeAndSave="closeAndSave"
+                     @saveCodeOnly="saveCodeOnly"
+                     @iframeLoaded="iframeLoaded"
+                     @getQuestionInfo="getQuestionInfo"
+                     v-if="showFrame"></IframeComponent>
+    <Loading :loading="loading"></Loading>
+  </div>
+</template>
+<script>
+
+import {commonData,doMediaLookerSome} from './mixin'
+import MediaLooker from '../common/MediaLooker.vue'
+import IframeComponent from "../common/IframeComponent.vue";
+import Loading from "../common/Loading.vue";
+import {mapActions, mapState} from "vuex";
+
+export default {
+  name: 'Question_Programming',
+  props: {
+    urlQuery:{
+      type: String,
+      default: ''
+    },
+    isSub:{
+      type: Boolean,
+      default: false
+    },
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    bus: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  mounted() {
+    doMediaLookerSome(this)
+    this.$watch('oss_temp_url',(nv)=>{
+      if(nv){
+        let answered = this.isAnswered()
+        this.$emit('getIsAnswered',answered)
+        this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+          questionIndex:this.questionInfo.questionIndex - 1,
+          answered
+        })
+      }
+    },{
+      immediate:true
+    })
+  },
+  data() {
+    return {
+      iframe:null,
+      showFrame:false,
+      analyCorrectAnswer:'',
+      iframeUrl:'',
+      code_file_oss_temp_path:'',
+      oss_temp_url:'',
+      scratch_answer_json:'',
+      loading:false,
+      enterCode:false,
+      codeTypeMap:{
+        1:'Scratch',
+        2:'Python',
+        3:'PyGame',
+        4:'C++'
+      },
+      codeTypeImgMap:{
+        1:require('../../assets/img/sb3-bg.png'),
+        2:require('../../assets/img/py-bg.png'),
+        3:require('../../assets/img/pygame-bg.png'),
+        4:require('../../assets/img/cpp-bg.png')
+      },
+      answerMap:{},
+      ...JSON.parse(commonData)
+    };
+  },
+  watch: {
+    questionInfo:{
+      handler(nv,ov){
+        if(nv){
+          this.answerMap = nv.answerMap
+          //回显答案
+          let answerMap = nv.answerMap
+          if(answerMap){
+            this.code_file_oss_temp_path = answerMap.code_file_oss_temp_path
+            this.oss_temp_url = answerMap.oss_temp_url
+          }
+        }
+      },
+      immediate:true
+    }
+  },
+  computed:{
+    ...mapState('zykjcommonQuestions',['pythonCodeWebPath','scratchCodeWebPath','cplusCodeWebPath'])
+  },
+  methods: {
+    ...mapActions('zykjcommonQuestions',['getEditorUrlActions']),
+    getAnswer(){
+      return {
+        code_file_oss_temp_path:this.code_file_oss_temp_path,
+        oss_temp_url:this.oss_temp_url,
+        scratch_answer_json:this.scratch_answer_json
+      }
+    },
+    isAnswered(){
+      let answered = this.oss_temp_url !== ''
+      return answered
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    },
+    getCodeWebPath(cb){
+      if(this.pythonCodeWebPath || this.scratchCodeWebPath || this.cplusCodeWebPath){
+        cb && cb()
+      }else{
+        this.loading = true
+        this.getEditorUrlActions().then(()=>{
+          this.loading = false
+          cb && cb()
+        },()=>{
+          this.loading = false
+        })
+      }
+    },
+    startCode(type){
+      //mapper_type 1.开始做题  2.修改  3.结果页你的答案  4.结果页正确答案
+      // code_type：1-sb3 2-python 3-pyGame 4-C++
+      let self = this
+      if(this.loading){
+        return
+      }
+      this.getCodeWebPath(function(){
+        let mapper = {
+          '1':self.questionInfo.template_file_full_url,
+          '2':self.oss_temp_url,
+          '3':self.oss_temp_url,
+          '4':self.questionInfo.reference_file_full_url
+        }
+        let url = ''
+        let code_type = self.questionInfo.code_type
+        let fileUrl = mapper[type]
+        let baseQueryStr = self.urlQuery + `&codeUrl=${fileUrl}`
+        switch (code_type){
+          case 1:
+            url = `${self.scratchCodeWebPath}/?${baseQueryStr}`
+            break
+          case 2:
+            url = `${self.pythonCodeWebPath}/?${baseQueryStr}`
+            break
+          case 3:
+            url = `${self.pythonCodeWebPath}/?${baseQueryStr}&pygame=true`
+            break
+          case 4:
+            url = `${self.cplusCodeWebPath}/?${baseQueryStr}`
+            break
+        }
+        // console.log(url,'url');
+        self.iframeUrl = url
+      })
+      this.showFrame = true
+    },
+    getQuestionInfo(){
+      let self = this
+      let obj = {type:'getQuestionInfo',data:self.questionInfo.htmlContent}
+      this.iframe && this.iframe.contentWindow.postMessage(JSON.stringify(obj),'*')
+    },
+    submitCodeQuestionByTimeover(){
+      let obj = {type:'submitCodeQuestionByTimeover'}
+      this.iframe && this.iframe.contentWindow.postMessage(JSON.stringify(obj),'*')
+    },
+    iframeLoaded(node){
+      this.iframe = node
+      //用于浮动倒计时样式
+      this.enterCode = true
+      this.bus.$emit('enterCode',true)
+    },
+    //只关闭iframe不保存（考试已经结束）
+    closeIframe(){
+      this.enterCode = false
+      this.bus.$emit('enterCode',false)
+      this.showFrame = false
+    },
+    //关闭iframe并且保存（考试中）
+    closeAndSave(res){
+      this.saveCodeOnly(res)
+      this.closeIframe()
+      this.$emit('closeAndSave')
+    },
+    saveCodeOnly(res){
+      let self = this
+      this.code_file_oss_temp_path = res.codeFileOssTempPath
+      this.oss_temp_url = res.ossTempUrl
+      this.scratch_answer_json = res.scratch_answer_json
+      this.bus.$emit('submitQuestion',{saveType:1,submitRequestAutoQuit:false,needSubmitRequest:false})
+      let answered = this.isAnswered()
+      this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+        questionIndex:self.questionInfo.questionIndex - 1,
+        answered
+      })
+      this.$emit('saveCodeOnly')
+    },
+    uploadCodingFileSuccess(res){
+      this.code_file_oss_temp_path = res.codeFileOssTempPath
+      this.oss_temp_url = res.ossTempUrl
+      this.scratch_answer_json = res.scratch_answer_json
+      this.bus.$emit('uploadCodingFileSuccess')
+    }
+  },
+  components:{
+    IframeComponent,
+    MediaLooker,
+    Loading
+  }
+};
+</script>

package/src/components/questions/Question_Reading.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="zykjcommon-question">
+    <div 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 editor-content-bor" v-html="questionInfo.htmlContent"></div>
+      <div class="question-tabs">
+        <div class="question-tab-item"
+             :class="{'cur':curTab===index}"
+             @click="clickTab(index)"
+             :key="index"
+             v-for="(item,index) in tabsArr">
+          {{index+1}}
+          <div class="tab-mark" v-if="item.answered"></div>
+        </div>
+      </div>
+      <div v-for="(item,index) in questionInfo.sub_questions"
+           v-show="curTab === index"
+           class="reading-question-item"
+           :id="'question'+ (questionInfo.questionIndex - 1) + '-' + index">
+        <component :is="item.questionComponent"
+                   @optionChange="optionChange"
+                   :mode="mode"
+                   :bus="bus"
+                   :isSub="true"
+                   :questionInfo="item"
+                   :orderIndex="index"
+                   :key="'question'+ (questionInfo.questionIndex - 1) + '-' + index"
+                   :ref="'question'+ (questionInfo.questionIndex - 1) + '-' + index"/>
+      </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'
+export default {
+  name: 'Question_Reading',
+  props: {
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    bus: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  created() {
+    let self = this
+    this.bus.$on('optionChange',()=>{
+      let answered = this.isAnswered()
+      this.$emit('getIsAnswered',answered)
+      this.mode === 'exam' && this.bus.$emit('questionCardChange',{
+        questionIndex:self.questionInfo.questionIndex - 1,
+        answered
+      })
+    })
+  },
+  mounted() {
+    let self = this
+    doMediaLookerSome(this)
+  },
+  data() {
+    return {
+      curTab:0,
+      radio:0,
+      analyCorrectAnswer:'',
+      exam_options_data:[],
+      answerMap:{},
+      tabsArr:[],
+      ...JSON.parse(commonData)
+    };
+  },
+  watch: {
+    questionInfo:{
+      handler(nv,ov){
+        if(nv){
+          this.exam_options_data = nv.exam_options_data
+          this.answerMap = nv.answerMap
+
+          let sub_questions = nv.sub_questions
+          if(sub_questions && sub_questions.length){
+            sub_questions.forEach((item,index)=>{
+              let temp = {
+                answered:false,
+                questionComponent:item.questionComponent,
+                refName:`question${nv.questionIndex - 1}-${index}`
+              }
+              this.tabsArr.push(temp)
+            })
+            console.log(this.tabsArr,333);
+
+          }
+
+        }
+      },
+      immediate:true,
+      deep:true
+    }
+  },
+  computed:{
+  },
+  methods: {
+    getAnswer(){
+      let result = []
+      let refs = this.$refs
+      Object.keys(refs).forEach((key)=>{
+        let item = refs[key][0]
+        result.push({
+          answer:item.getAnswer(),
+          question_id:item.questionInfo.question_id
+        })
+      })
+      return result
+    },
+    isAnswered(){
+      let refs = this.$refs
+      let arr = []
+      Object.keys(refs).forEach((key)=>{
+        let item = refs[key][0]
+        arr.push(item.isAnswered())
+      })
+      let answerd = arr.every((item)=>{
+        return item === true
+      })
+      return answerd
+    },
+    isCorrect(){
+      let refs = this.$refs
+      let arr = []
+      Object.keys(refs).forEach((key)=>{
+        let item = refs[key][0]
+        arr.push(item.isCorrect())
+      })
+      let correct = arr.every((item)=>{
+        return item === true
+      })
+      return correct
+    },
+    clickTab(index){
+      this.curTab = index
+    },
+    optionChange(obj){
+      let index = obj.orderIndex
+      console.log(obj,'obj');
+      this.tabsArr[index].answered = obj.isAnswered
+    }
+  },
+  components:{
+    MediaLooker
+  }
+};
+</script>

package/src/components/questions/Question_SingleChoice.vue

@@ -75,7 +75,7 @@
 </template>
 <script>
 
-import {commonData,doMediaLookerSome} from './mixin.js'
+import {commonData,doMediaLookerSome} from './mixin'
 import MediaLooker from '../common/MediaLooker.vue'
 import fun from "../../assets/js/fun";
 
@@ -117,7 +117,7 @@ export default {
         })
       }else{
         this.mode === 'exam' && this.bus.$emit('optionChange')
-        this.mode === 'exam' && this.emit('optionChange', {orderIndex:this.orderIndex,isAnswered:self.isAnswered()})
+        this.mode === 'exam' && this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:self.isAnswered()})
       }
     },{
       immediate:true
@@ -152,36 +152,22 @@ export default {
               let judge = nv.answerMap.judge
               if(judge!==undefined && judge!==null && judge!==''){
                 this.radio = judge ? 1 : 2
+                // analysis的时候在这里标记tab已读，因为改变的时候限定了exam了
+                this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:this.isAnswered()})
               }
             }else{
               let single_index = nv.answerMap.single_index
               if(single_index!==undefined && single_index!==null && single_index!==''){
                 this.radio = single_index
+                // analysis的时候在这里标记tab已读，因为改变的时候限定了exam了
+                this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:this.isAnswered()})
               }
             }
           }
         }
       },
       immediate:true
-    },
-    /*radio:{
-      handler(nv,ov){
-        debugger
-        let self = this
-        let isSub = this.isSub
-        if(!isSub){
-          let answered = this.isAnswered()
-          this.mode === 'exam' && bus.$emit('questionCardChange',{
-            questionIndex:this.questionInfo.questionIndex - 1,
-            answered
-          })
-        }else{
-          this.mode === 'exam' && bus.$emit('optionChange')
-          this.mode === 'exam' && this.emit('optionChange', {orderIndex:this.orderIndex,isAnswered:self.isAnswered()})
-        }
-      },
-      immediate:true
-    }*/
+    }
   },
   computed:{
   },

package/src/components/questions/buildEntry.js

@@ -4,10 +4,135 @@
 //此文件作为打包入口，打包后的dist文件给vue3用
 import '../../assets/scss/questions/index.scss';
 import Question_SingleChoice from './Question_SingleChoice.vue'
-export default {
-  install(Vue){
-    Vue.component('Question_SingleChoice',Question_SingleChoice)
-  },
-  Question_SingleChoice
+import Question_MultipleChoice from './Question_MultipleChoice.vue'
+import Question_Reading from './Question_Reading.vue'
+import Question_BriefAnswer from './Question_BriefAnswer.vue'
+import Question_FillBlank from './Question_FillBlank.vue'
+import Question_Programming from './Question_Programming.vue'
+import {questionMapper} from "./const";
+import fun from "../../assets/js/fun";
+import storeOptions from './store'
+export default function(store){
+  //动态注册store
+  store.registerModule('zykjcommonQuestions',storeOptions)
+  return {
+    install(Vue){
+      let version = fun.getVueVersion()
+      Vue.mixin({
+        methods: {
+          //公共解析questionItem方法
+          parseQuestionListItem(mode,question_list,answer_map,parentIndex = undefined){
+            function parseContent(arr,contentWidth){
+              arr.forEach((item)=>{
+                if(item['<>'] === 'img'){
+                  if(item.hasOwnProperty('width')){
+                    let width = Number(item.width)
+                    if(width > contentWidth){
+                      item.width = Math.floor(contentWidth)
+                      item.height && delete item.height
+                    }
+                  }
+                }
+                if(item.html && item.html.length){
+                  parseContent(item.html,contentWidth)
+                }
+              })
+            }
+            question_list.forEach((item,index)=>{
+              item.questionComponent = questionMapper[item.question_type]
+              // item.questionIndex = index + 1
+              if(parentIndex === undefined){
+                item.questionIndex = index + 1
+              }else{
+                item.questionIndex = (parentIndex + 1) + '-' + (index + 1)
+                item.questionIndex2 = index + 1
+              }
+              if(answer_map && answer_map.hasOwnProperty(item.question_id)){
+                item.answerMap = answer_map[item.question_id]
+                if(mode === 'analysis'){
+                  //analysis页面特殊处理
+                  if(item.answerMap.user_coding_file){
+                    item.answerMap.oss_temp_url = item.answerMap.user_coding_file
+                  }
+                  //analysis页面特殊处理score字段为 answerMap.question_max_score
+                  item.score = item.answerMap.question_max_score
+                  //预览接口学生答案以user_开头，为适配考试的学生答案，做处理
+                  let answerMapKeys = Object.keys(item.answerMap)
+                  let reg = /^user_/ig
+                  answerMapKeys.forEach((answerMapKeysItem)=>{
+                    if(reg.test(answerMapKeysItem)){
+                      let newProp = answerMapKeysItem.replace(reg,'')
+                      item.answerMap[newProp] = item.answerMap[answerMapKeysItem]
+                    }
+                  })
+                }
+              }else{
+                item.answerMap = null
+              }
+              let question_type = item.question_type
+              if(question_type == 3){
+                //判断题手动构造选项数组
+                item.exam_options_data = [
+                  {
+                    index:1,data:{
+                      name:'正确'
+                    }
+                  },
+                  {
+                    index:2,data:{
+                      name:'错误'
+                    }
+                  }
+                ]
+              }else{
+                if(item.exam_options_data && item.exam_options_data.length){
+                  item.exam_options_data.forEach((subItem,subIndex)=>{
+                    subItem.enIndex = fun.indexToEnIndex(subIndex+1)
+                  })
+                }
+              }
+              //转化content富文本
+              try{
+
+                let contentArr = JSON.parse(item.content)
+                let contentWidth = jQuery('.question-list').width() - 30
+                //图片宽度超出框架的时候把宽度设置成框架大小
+                parseContent(contentArr,contentWidth)
+                item.htmlContent = $.json2html({}, contentArr);
+              }catch(e){
+                item.htmlContent = item.content
+              }
+              //转化analysis富文本
+              try{
+                if(item.analysis){
+                  item.analysisHtmlContent = $.json2html({}, JSON.parse(item.analysis));
+                }else{
+                  item.analysisHtmlContent = ''
+                }
+              }catch(e){
+                item.analysisHtmlContent = item.analysis
+              }
+              //如果是阅读题要递归解析
+              if(item.sub_questions && item.sub_questions.length){
+                this.parseQuestionListItem(mode,item.sub_questions,answer_map,index)
+              }
+            })
+          }
+        }
+      })
+      Vue.component('Question_SingleChoice',Question_SingleChoice)
+      Vue.component('Question_MultipleChoice',Question_MultipleChoice)
+      Vue.component('Question_Reading',Question_Reading)
+      Vue.component('Question_BriefAnswer',Question_BriefAnswer)
+      Vue.component('Question_FillBlank',Question_FillBlank)
+      Vue.component('Question_Programming',Question_Programming)
+    },
+    Question_SingleChoice,
+    Question_MultipleChoice,
+    Question_Reading,
+    Question_BriefAnswer,
+    Question_FillBlank,
+    Question_Programming
+  }
 }
 

package/src/components/questions/const.js

@@ -0,0 +1,15 @@
+
+
+/**
+ * Created by Allen Liu on 2022/4/22.
+ */
+//全局用常量
+export let questionMapper = {
+  '1':'Question_SingleChoice',//单选
+  '2':'Question_MultipleChoice',//多选
+  '3':'Question_SingleChoice',//判断
+  '7':'Question_BriefAnswer',//简答
+  '16':'Question_Programming',//编程
+  '11':'Question_Reading',//阅读
+  '4':'Question_FillBlank'//填空
+}