@zykjcommon/questions 0.0.1

package/src/components/questions/Question_SingleChoice.vue

@@ -0,0 +1,208 @@
+<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="questionInfo.hint">{{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="questionInfo.htmlContent" 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" :style="(!questionInfo.htmlContent && !questionInfo.hint)?{'margin-top':0}:{}">
+        <div class="question-option" v-for="(item,index) in exam_options_data">
+          <div class="radio-box" :class="{'checked':radio == item.index}">
+            <input type="radio"
+                   :disabled="mode === 'analysis' || mode === 'review'"
+                   class="radio"
+                   v-model="radio"
+                   name="judge"
+                   :id="'radio-'+questionInfo.questionIndex+'-'+index"
+                   :value="item.index">
+            <div class="radio-bg"></div>
+          </div>
+          <div class="label-box">
+            <!--判断-->
+            <label v-if="questionInfo.question_type==3" :for="'radio-'+questionInfo.questionIndex+'-'+index">{{item.data.name}}</label>
+            <!--单选-->
+            <label v-if="questionInfo.question_type==1"
+                   :for="'radio-'+questionInfo.questionIndex+'-'+index">
+              <!--file_type: 0.不带图片得文本选项-->
+              <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>
+      <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>
+    <!--
+    兼容性写法，两个都写
+    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.js'
+import MediaLooker from '../common/MediaLooker.vue'
+import bus from "../../assets/js/bus";
+import fun from "../../assets/js/fun";
+
+export default {
+  name: 'Question_singleChoice',
+  props: {
+    isSub:{
+      type: Boolean,
+      default: false
+    },
+    orderIndex:{
+      type: Number,
+      default: 0
+    },
+    questionInfo: {
+      type: Object,
+      default: {}
+    },
+    mode: {
+      type: String,
+      default: 'exam'
+    }
+  },
+  mounted() {
+    doMediaLookerSome(this)
+    this.$watch('radio',(nv)=>{
+      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
+    })
+  },
+  data() {
+    return {
+      radio:0,
+      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){
+            let {question_type} = nv
+            if(this.mode === 'analysis'){
+              if(question_type == 3){
+                this.analyCorrectAnswer = nv.correct_judge === '1' ? '正确':'错误'
+              }else{
+                this.analyCorrectAnswer = fun.indexToEnIndex(nv.correct_single_index)
+              }
+            }
+            if(question_type == 3){
+              let judge = nv.answerMap.judge
+              if(judge!==undefined && judge!==null && judge!==''){
+                this.radio = judge ? 1 : 2
+              }
+            }else{
+              let single_index = nv.answerMap.single_index
+              if(single_index!==undefined && single_index!==null && single_index!==''){
+                this.radio = single_index
+              }
+            }
+          }
+        }
+      },
+      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:{
+  },
+  methods: {
+    getAnswer(){
+      let questionInfo = this.questionInfo
+      let question_type = questionInfo.question_type
+      if(question_type == 3){
+        let radio = this.radio == 1 ? true : false
+        return {judge:radio}
+      }else{
+        return {single_index:this.radio}
+      }
+    },
+    isAnswered(){
+      let answerd = this.radio !== 0
+      return answerd
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    }
+  },
+  components:{
+    MediaLooker
+  }
+};
+</script>

package/src/components/questions/buildEntry.js

@@ -0,0 +1,12 @@
+/**
+ * Created by Allen Liu on 2023/7/14.
+ */
+//此文件作为打包入口，打包后的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
+}

package/src/components/questions/developmentEntry.js

@@ -0,0 +1,11 @@
+/**
+ * Created by Allen Liu on 2023/7/14.
+ */
+//给VUE2用是编译前的文件，和vue2项目一起打包构建
+import Question_SingleChoice from './Question_SingleChoice.vue'
+export default {
+  install(Vue){
+    Vue.component('Question_SingleChoice',Question_SingleChoice)
+  },
+  Question_SingleChoice
+}

package/src/components/questions/mixin.js

@@ -0,0 +1,64 @@
+import {getCurrentInstance, onMounted} from "vue";
+
+/**
+ * Created by Allen Liu on 2022/4/22.
+ */
+//共用commonData存在引用一个地址问题
+export let commonData = JSON.stringify({
+  mediaLookerList:[],
+  mediaCount:0,
+  curMediaCount:0,
+  visible:false
+})
+
+export function doMediaLookerSome(_this){
+  let nodeParser = {
+    img(child){
+      // console.log(child.getAttribute('src'));
+      let url = child.getAttribute('src')
+      child.setAttribute('media-index',_this.mediaCount+'')
+      _this.mediaCount ++;
+      _this.mediaLookerList.push({
+        url,
+        mediaType:1
+      })
+      child.addEventListener('click',(e)=>{
+        let target = e.target
+        let mediaIndex = Number(target.getAttribute('media-index'))
+        _this.curMediaCount = mediaIndex
+        openMediaLooker()
+      })
+    }
+  }
+  function openMediaLooker(){
+    _this.visible = true
+  }
+
+  function mountDo(){
+    let editorContent =  _this.$el.querySelector('.question-box')
+    _this.$nextTick(()=>{
+      fn(editorContent)
+    })
+    function fn(node){
+      let childs = node.childNodes
+      childs.forEach(function(child){
+        if(child.nodeType === 1){
+          let nodeName = child.nodeName.toLowerCase()
+          if(nodeName === 'img'){
+            // console.log(child,'ccc');
+            nodeParser[nodeName](child)
+          }else{
+            //解析里面的图片不找
+            if(child.className.indexOf('question-analysis') < 0){
+              if(child.childNodes && child.childNodes.length){
+                fn(child)
+              }
+            }
+          }
+        }
+      })
+    }
+  }
+  mountDo()
+
+}

package/src/main.ts

@@ -0,0 +1,176 @@
+window.vm = {}
+import {createApp,h} from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import setRem from '@src/assets/js/rem'
+import Loading from '@src/components/common/Loading.vue'
+import ContentDialog from '@src/components/common/ContentDialog.vue'
+import fun from "@src/assets/js/fun.js";
+import bus from "@/assets/js/bus";
+// window.onerror = (fun as any).fbError
+//引入表单验证指令
+import validationPlugin from '@src/assets/js/validation'
+
+import QuestionReader from '@src/components/questions/QuestionReader.js'
+
+
+
+
+// 禁止右键菜单
+document.oncontextmenu = function(){
+  return false
+}
+//禁止选中
+// document.onselectstart = function(){
+//   return false
+// }
+//禁止复制
+document.oncopy = function(){
+  return false
+}
+
+// console.log(QuestionReader,'QuestionReader');
+setRem()
+//应用中所有音频存放的容器
+window.audiosContainer = []
+window.contentDialogs = []
+
+import '@src/assets/js/arms'
+
+let vueInstance = createApp(App)
+
+import zykj_question_plugin from "../dist/zykjcommon-questions.umd.min"
+vueInstance.use(zykj_question_plugin as any)
+import '../dist/zykjcommon-questions.css';
+
+
+vueInstance.component('remote-js', {
+  render() {
+    let self = this;
+    let attrs:any = {
+      type: 'text/javascript'
+    };
+    self.async && (attrs.async = self.async);
+    self.defer && (attrs.defer = self.defer);
+    //虚拟节点不受BOM控制，模拟延迟效果
+    if (self.start) {
+      attrs.src = self.src;
+    }
+    let node = h('script', attrs);
+    return node;
+  },
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    async: {
+      type: Boolean,
+      default: false
+    },
+    defer: {
+      type: Boolean,
+      default: false
+    },
+    start: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    start(newValue) {
+      let self = this;
+      if (newValue) {
+        self.$el.src = self.src;
+      }
+    }
+  }
+})
+vueInstance.component('remote-css', {
+  render() {
+    return h('link', {
+      type: 'type="text/css"',
+      rel: "stylesheet",
+      href: this.href
+    });
+  },
+  props: {
+    href: {
+      type: String,
+      required: true
+    }
+  }
+})
+vueInstance.component('Loading',Loading)
+vueInstance.component('ContentDialog',ContentDialog)
+//全局注册题型组件
+// Object.keys(QuestionReader).forEach((key)=>{
+//   let component = (QuestionReader as any)[key]
+//   vueInstance.component(key,component)
+// })
+
+
+
+
+
+
+
+function eleClick(){
+  (document.querySelector('.content-outter') as HTMLElement).scrollTop = 0
+}
+function scrollerScroll(btn:any,scroller:any){
+  return function(e:any){
+    let scrollTop = scroller.scrollTop
+    if(scrollTop > 300){
+      btn.style.display = 'block'
+    }else{
+      btn.style.display = 'none'
+    }
+  }
+}
+function setReturnTopBtnLeft(ele:any){
+  return function(){
+    let contentLeft = jQuery('.content-left')
+    let w = contentLeft.width()
+    console.log(w,33);
+    let ofl = contentLeft.offset().left
+    let left = ofl + w
+    //设置回到顶部按钮离左边距离
+    ele.style.left = left + 'px'
+  }
+}
+vueInstance.directive('returnTop',{
+  mounted(ele:HTMLElement, binding:any,vNode){
+    if(ele){
+      ele.addEventListener('click',eleClick);
+      let scroller = (document.querySelector('.content-outter') as HTMLElement);
+      scroller.addEventListener('scroll',scrollerScroll(ele,scroller))
+      //todo iframe里获取contentLeft的宽度 offsetLeft那些有问题，这里先用timeout解决
+      setTimeout(()=>{
+        setReturnTopBtnLeft(ele)()
+        ele.style.display = 'none'
+      },100)
+
+      window.addEventListener('resize',setReturnTopBtnLeft(ele))
+
+    }
+  },
+  unmounted(ele:HTMLElement){
+    ele.removeEventListener('click',eleClick)
+    let scroller = (document.querySelector('.content-outter') as HTMLElement);
+    if(scroller){
+      scroller.removeEventListener('scroll',scrollerScroll(null,null))
+    }
+    window.removeEventListener('resize',setReturnTopBtnLeft)
+  }
+})
+
+vueInstance.use(validationPlugin)
+vueInstance.use(store).use(router(store)).mount('#app')
+window.vm.$store = store

package/src/router/exam.ts

@@ -0,0 +1,50 @@
+/**
+ * Created by Allen Liu on 2020/4/11.
+ */
+const ExamIndex = () =>
+    import(/* webpackChunkName: "exam" */ "@src/views/exam/Exam.vue");
+const Analysis = () =>
+    import(/* webpackChunkName: "exam" */ "@src/views/exam/Analysis.vue");
+const ReviewPaper = () =>
+    import(/* webpackChunkName: "exam" */ "@src/views/exam/ReviewPaper.vue");
+const ReviewQuestion = () =>
+    import(/* webpackChunkName: "exam" */ "@src/views/exam/ReviewQuestion.vue");
+
+export default [
+  {
+    path: "index",
+    name: "examIndex",
+    component: ExamIndex,
+    meta: {
+      title: "考试页",
+      keepAlive: false
+    }
+  },
+  {
+    path: "analysis",
+    name: "analysis",
+    component: Analysis,
+    meta: {
+      title: "解析页",
+      keepAlive: false
+    }
+  },
+  {
+    path: "reviewPaper",
+    name: "reviewPaper",
+    component: ReviewPaper,
+    meta: {
+      title: "预览试卷",
+      keepAlive: false
+    }
+  },
+  {
+    path: "reviewQuestion",
+    name: "reviewQuestion",
+    component: ReviewQuestion,
+    meta: {
+      title: "预览试题",
+      keepAlive: false
+    }
+  }
+]

package/src/router/index.ts

@@ -0,0 +1,33 @@
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
+import {createNamespacedHelpers} from 'vuex-composition-helpers';
+import helper from '@src/assets/js/helper'
+const Exam = () =>
+    import(/* webpackChunkName: "exam" */ "@/views/exam/Default.vue");
+import exam from './exam'
+
+
+export default function(store:any){
+  const routes: Array<RouteRecordRaw> = [
+    {
+      path: "/",
+      redirect: "/exam/index"
+    },
+    {
+      path: "/exam",
+      component: Exam,
+      redirect: "/exam/index",
+      children: [
+        ...exam
+      ]
+    }
+  ]
+
+  const router = createRouter({
+    history: createWebHistory('/'),
+    routes
+  })
+
+  window.vm.$router = router
+
+  return router
+}