@zykjcommon/questions 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykjcommon/questions",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "main": "src/components/questions/entry.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/questions/zykjcommon-questions.scss

@@ -348,8 +348,8 @@ $greenItemFontSize:0.14rem;
     width: 10rem;
     height: 100%;
     position: relative;
-    background: url("../../img/classify-bg-seaworld.png") no-repeat center;
-    background-size: 100% 100%;
+    /*background: url("../../img/classify-bg-seaworld.png") no-repeat center;*/
+    /*background-size: 100% 100%;*/
     overflow: auto;
     .box{
       padding: 0 0.8rem;
@@ -363,8 +363,8 @@ $greenItemFontSize:0.14rem;
       height: 4.4rem;
       display: flex;
       flex-direction: column;
-      background: url("../../img/classify-boxitem-bg.png") no-repeat center;
-      background-size: 100% 100%;
+      /*background: url("../../img/classify-boxitem-bg.png") no-repeat center;*/
+      /*background-size: 100% 100%;*/
     }
     .main-block{
       margin:0.38rem auto 0;
@@ -374,6 +374,11 @@ $greenItemFontSize:0.14rem;
       border: 1px dashed #ffffff;
       border-radius: 0.11rem;
       flex-shrink: 0;
+      img{
+        width: 100%;
+        height: 100%;
+        border-radius: 0.11rem;
+      }
     }
     .main-content{
       padding: 0 0.28rem 0.15rem 0.35rem;
@@ -389,8 +394,8 @@ $greenItemFontSize:0.14rem;
       }
     }
     .append-item{
-      background: url("../../img/classify-green-item.png") no-repeat center;
-      background-size: 100% 100%;
+      /*background: url("../../img/classify-green-item.png") no-repeat center;
+      background-size: 100% 100%;*/
       width: 1.3rem;
       height: 1.3rem;
       margin-right: 0.1rem;
@@ -424,8 +429,8 @@ $greenItemFontSize:0.14rem;
       left:50%;
       margin-left: -4.5rem;
       width: 9rem;
-      background: url("../../img/classify-list-bg.png") no-repeat center;
-      background-size: 100% 100%;
+      /*background: url("../../img/classify-list-bg.png") no-repeat center;*/
+      /*background-size: 100% 100%;*/
       .list{
         height: 1.5rem;
         display: flex;
@@ -463,8 +468,8 @@ $greenItemFontSize:0.14rem;
       }
     }
     .list-item{
-      background: url("../../img/classify-green-item.png") no-repeat center;
-      background-size: 100% 100%;
+      /*background: url("../../img/classify-green-item.png") no-repeat center;
+      background-size: 100% 100%;*/
       width: 1.3rem;
       height: 1.3rem;
       margin-right: 0.1rem;
@@ -572,8 +577,8 @@ $greenItemFontSize:0.14rem;
 }
 .question-classify-moveDiv{
   position: fixed;
-  background: url("../../img/classify-green-item.png") no-repeat center;
-  background-size: 100% 100%;
+  /*background: url("../../img/classify-green-item.png") no-repeat center;
+  background-size: 100% 100%;*/
   width: 1.3rem;
   height: 1.3rem;
   margin-right: 0.1rem;

package/src/components/questions/Question_Classify.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="zykjcommon-question" style="width: 100%;height: 100%;">
-    <div class="question-classify">
+    <div class="question-classify" :style="bigBgCss">
       <div class="box">
-        <div class="box-item">
-          <div class="main-block"></div>
-          <div class="main-content">
-            <div class="main-append">
-<!--              <div class="append-item"></div>-->
-            </div>
+        <div class="box-item"
+             :style="item.bgUrlCss"
+             v-for="(item,index) in bigBoxItemList" :key="index">
+          <div class="main-block">
+            <img :src="item.imgUrl" alt="">
           </div>
-        </div>
-        <div class="box-item">
-          <div class="main-block"></div>
           <div class="main-content">
             <div class="main-append">
+<!--              <div class="append-item"></div>-->
             </div>
           </div>
         </div>
       </div>
-      <div class="list-outter">
+      <div class="list-outter" :style="bottomBgCss">
         <div class="prev">
           <div class="prev-main"></div>
         </div>
@@ -26,8 +23,12 @@
           <div class="next-main"></div>
         </div>
         <div class="list">
-          <div class="list-item" v-for="(item,index) in list" :key="index">
-            <div class="list-item-text">{{item.name}}</div>
+          <div class="list-item"
+               :idx="index+1"
+               :style="item.bgUrlCss"
+               v-for="(item,index) in optionList"
+               :key="index">
+            <div class="list-item-text">{{item.content}}</div>
           </div>
         </div>
       </div>
@@ -52,6 +53,14 @@ export default {
     mode: {
       type: String,
       default: 'exam'
+    },
+    screenRepairH:{
+      type: Number,
+      default: 0
+    },
+    screenScale:{
+      type: Number,
+      default: 0
     }
   },
   created() {
@@ -66,23 +75,27 @@ export default {
   },
   mounted() {
     this.init()
-    this.$watch('list',(nv)=>{
+    this.$watch('optionList',(nv)=>{
       if(nv && nv.length){
         this.$nextTick(()=>{
           this.dothings()
         })
       }
-    })
-    setTimeout(()=>{
-      this.list = [{name:'每年春夏秋冬季节变化'},{name:'音乐播放10次'},{name:'把10个梨子放进篮子'},{name:'音乐播放9次'},{name:'把9个梨子放进篮子'},{name:'音乐播放8次'},{name:'把8个梨子放进篮子'},{name:'音乐播放6次'}]
-    },500)
+    },{immediate:true,deep:true})
+    // setTimeout(()=>{
+    //   this.optionList = [{name:'每年春夏秋冬季节变化'},{name:'音乐播放10次'},{name:'把10个梨子放进篮子'},{name:'音乐播放9次'},{name:'把9个梨子放进篮子'},{name:'音乐播放8次'},{name:'把8个梨子放进篮子'},{name:'音乐播放6次'}]
+    // },500)
   },
   data() {
     return {
       analyCorrectAnswer:'',
-      exam_options_data:[],
+      classify_question_info:{},
       answerMap:{},
-      list:[],
+      optionList:[],
+      bigBoxItemList:[],
+      bigBgCss:'',
+      bottomBgCss:'',
+      listItemBgCss:'',
       env,
       p1:{},//存mousedown相关
       p2:{},//存mousemove相关
@@ -98,19 +111,90 @@ export default {
     };
   },
   watch: {
+    questionInfo:{
+      handler(nv,ov){
+        let self = this
+        if(nv){
+          console.log(nv,33);
+          this.parseLists(nv)
+          //回显答案
+          if(nv.answerMap){
+            if(this.mode === 'analysis'){
 
+            }
+            // this.$emit('optionChange', {orderIndex:this.orderIndex,isAnswered:this.isAnswered()})
+          }
+        }
+      },
+      immediate:true
+    }
   },
   computed:{
   },
   methods: {
+    getAnswer(){
+      let result = []
+      $(this.$el).find('.box-item').each(function(index,item){
+        let cur = $(this)
+        let small_type_index_list = []
+        cur.find('.append-item').each((subIndex,subItem)=>{
+          small_type_index_list.push(Number($(subItem).attr('idx')))
+        })
+        result.push({
+          big_type_index:index+1,
+          small_type_index_list
+        })
+      })
+      return result
+    },
+    isAnswered(){
+      let len = $(this.$el).find('.list .list-item').length
+      let answerd = len === 0
+      return answerd
+    },
+    isCorrect(){
+      let correct = this.questionInfo.answerMap.is_correct === '1' ? true : false
+      return correct
+    },
+    parseLists(nv){
+      this.classify_question_info = nv.classify_question_info
+      this.answerMap = nv.answerMap
+
+      this.bigBgCss = `background: url(${this.classify_question_info.background_file.file_url}) no-repeat center;background-size: 100% 100%`
+      this.bottomBgCss = `background: url(${this.classify_question_info.bottom_img_file.file_url}) no-repeat center;background-size: 100% 100%`
+
+      let optionList = []
+      this.classify_question_info.small_type_option_list.forEach((item)=>{
+        optionList.push({
+          content:item.option_content,
+          bgUrlCss:`background: url(${item.file_url}) no-repeat center;background-size: 100% 100%`
+        })
+      })
+      this.optionList = optionList
+      this.listItemBgCss = !optionList[0]?'':optionList[0].bgUrlCss
+
+      let bigBoxItemList = []
+      let big_type_box_image_list = this.classify_question_info.big_type_box_image_list
+      let big_type_option_list = this.classify_question_info.big_type_option_list
+      big_type_box_image_list.forEach((item,index)=>{
+        bigBoxItemList.push({
+          imgUrl:big_type_option_list[index].file_url,
+          bgUrl:item.file_url,
+          bgUrlCss:`background: url(${item.file_url}) no-repeat center;background-size: 100% 100%`
+        })
+      })
+      this.bigBoxItemList = bigBoxItemList
+    },
     setRootFontSize() {
-      setRemFixedHeight(1000,140,1.08)
+      // setRemFixedHeight(1000,140,1.08)
+      setRemFixedHeight(1000,this.screenRepairH,this.screenScale)
     },
     unmountedDo(){
       window.removeEventListener('resize',this.setRootFontSize)
       document.removeEventListener('gesturestart', this.gesturestartListener)
-      $('.question-classify .append-item').off(this.mousedown)
-      $('.question-classify .list-item').off(this.mousedown)
+      this.$el
+      $(this.$el).find('.question-classify .append-item').off(this.mousedown)
+      $(this.$el).find('.question-classify .list-item').off(this.mousedown)
       $(document).off(this.mouseup)
       let html = document.getElementsByTagName("html")[0];
       html.style.fontSize = "";
@@ -131,7 +215,7 @@ export default {
       let moveDivLeftEnd = moveDivLeft + self.moveDiv.width()
       let moveDivTop = self.moveDiv.offset().top
       let moveDivTopEnd = moveDivTop + self.moveDiv.height()
-      $('.box-item').each((index,item)=>{
+      $(this.$el).find('.box-item').each((index,item)=>{
         let boxItem = $(item)
         let boxLeft = boxItem.offset().left
         let boxLeftEnd = boxLeft + boxItem.width()
@@ -161,8 +245,8 @@ export default {
         self.listItem.addClass('drag')
         self.p1.moveX = self.listItem.offset().left;
         self.p1.moveY = self.listItem.offset().top - 30;
-        console.log(this.p1);
-        self.moveDiv = $(`<div class="question-classify-moveDiv"><div class="list-item-text">${self.listItem.find('.list-item-text').text()}</div></div>`)
+        let idx = self.listItem.attr('idx')
+        self.moveDiv = $(`<div class="question-classify-moveDiv" idx="${idx}" style="${self.listItemBgCss}"><div class="list-item-text">${self.listItem.find('.list-item-text').text()}</div></div>`)
         self.moveDiv.css({left:`${self.p1.moveX}px`,top:`${self.p1.moveY}px`})
         $('body').append(self.moveDiv)
         $(document).on(self.mousemove,function(e2){
@@ -184,7 +268,8 @@ export default {
     appendMoveDiv(options){
       let self = this
       self.listItem.remove()
-      let appendItem = $(`<div class="${options.appendItemClassName}"><div class="list-item-text">${self.moveDiv.find('.list-item-text').text()}</div></div>`)
+      let idx = self.moveDiv.attr('idx')
+      let appendItem = $(`<div class="${options.appendItemClassName}" idx="${idx}" style="${self.listItemBgCss}"><div class="list-item-text">${self.moveDiv.find('.list-item-text').text()}</div></div>`)
       appendItem.css({opacity:0})
       options.targetList.append(appendItem)
       options.targetList[options.scrollDirection](self.scrollDistance)
@@ -207,20 +292,21 @@ export default {
       })
     },
     bindNextPrevEvent(type){
-      $(`.question-classify .${type}`).on('click',function(e){
+      let self = this
+      $(this.$el).find(`.question-classify .${type}`).on('click',function(e){
         e.stopPropagation()
         e.preventDefault()
-        let listItem = $('.question-classify .list-item')
-        let list = $('.question-classify .list')
+        let listItem = $(self.$el).find('.question-classify .list-item')
+        let list = $(self.$el).find('.question-classify .list')
         let w = listItem.outerWidth() * (type === 'next' ? 1 : -1)
         let scrollLeft = list.scrollLeft()
         console.log(scrollLeft);
-        $('.question-classify .list').stop(true).animate({scrollLeft:scrollLeft + w},500)
+        $(self.$el).find('.question-classify .list').stop(true).animate({scrollLeft:scrollLeft + w},500)
       })
     },
     dothings(){
       let self = this
-      self.bindDragDomEvent($('.question-classify .list-item'),'go')
+      self.bindDragDomEvent($(this.$el).find('.question-classify .list-item'),'go')
       $(document).on(self.mouseup,function(e){
         // e.preventDefault()
         if(self.dragWay === 'go'){
@@ -252,7 +338,7 @@ export default {
             //0说明都不在两个框内 1说明在其中一个框内
             if(specArr.length === 0){
               self.appendMoveDiv({
-                targetList:$('.question-classify .list'),
+                targetList:$(self.$el).find('.question-classify .list'),
                 appendItemClassName:'list-item',
                 op:'go',
                 scrollDirection:'scrollLeft'

package/src/main.ts

@@ -174,14 +174,14 @@ vueInstance.use(validationPlugin)
 
 
 
-// import ZYKJQuestionsPlugin from "@src/components/questions/developmentEntry.js"
+import ZYKJQuestionsPlugin from "@src/components/questions/developmentEntry.js"
 // vueInstance.use((ZYKJQuestionsPlugin as any)(store))
-
 // import ZYKJQuestionsPlugin from "../dist/zykjcommon-questions.umd.min"
-import ZYKJQuestionsPlugin from "@zykjcommon/questions"
+// import ZYKJQuestionsPlugin from "@zykjcommon/questions"
 vueInstance.use((ZYKJQuestionsPlugin as any)(store))
-import '@zykjcommon/questions/src/assets/scss/questions/zykjcommon-questions.scss';
-// import '@src/assets/scss/questions/zykjcommon-questions.scss';
+// import '@zykjcommon/questions/src/assets/scss/questions/zykjcommon-questions.scss';
+import '@src/assets/scss/questions/zykjcommon-questions.scss';
+
 
 // console.log(ZYKJQuestionsPlugin,111);
 

package/src/views/exam/FullScreen.vue

@@ -5,9 +5,11 @@
       <component :is="responsiveObj.curQuestionInfo.questionComponent"
                  :bus="eventBus"
                  :questionInfo="responsiveObj.curQuestionInfo"
+                 :screenRepairH="140"
+                 :screenScale="1.08"
                  :ref="'question'"/>
     </div>
-    <div class="footer"></div>
+    <div class="footer" @click="submit"></div>
   </div>
 </template>
 
@@ -110,123 +112,162 @@ export default defineComponent({
             "question_list": [
               {
                 "question_type_str": "分类题",
-                "data_mode": 1,
-                "correct_judge": "",
+                "is_need_judge": "",
+                "read_audio_url": "",
                 "is_auto_check": "",
-                "content": "[{\"<>\":\"p\",\"text\":\"He arrived here ________. The teacher felt ________.\"}]",
-                "correct_subjective_answer": "",
-                "auto_check": true,
-                "options_data": [
-                  {
-                    "file_url": "",
-                    "content_type": 1,
-                    "file_type": 0,
-                    "name": "",
-                    "id": 0,
-                    "thumbnail_url": "",
-                    "option_content": "late, angry"
-                  },
-                  {
-                    "file_url": "",
-                    "content_type": 1,
-                    "file_type": 0,
-                    "name": "",
-                    "id": 0,
-                    "thumbnail_url": "",
-                    "option_content": "lately, angrily"
-                  },
-                  {
-                    "file_url": "",
-                    "content_type": 1,
-                    "file_type": 0,
-                    "name": "",
-                    "id": 0,
-                    "thumbnail_url": "",
-                    "option_content": " late, angrily"
-                  },
-                  {
-                    "file_url": "",
-                    "content_type": 1,
-                    "file_type": 0,
-                    "name": "",
-                    "id": 0,
-                    "thumbnail_url": "",
-                    "option_content": "lately, angry"
-                  }
-                ],
-                "score": "1.00",
+                "is_correct": "",
+                "options_data": [],
+                "score": "100",
                 "sub_questions": [],
-                "style_type": "SELECT_R-T",
+                "correct_gap_data": [],
+                "keyword_set": [],
                 "template_file_full_url": "",
-                "question_name": "He arrived here ________. The teacher felt ________.",
-                "correct_rate": "",
-                "knowledge_name": "词汇",
+                "match_rule": "",
+                "coverage_rate": "",
+                "knowledge_name": "编程环境",
+                "keyword_percent_set": [],
+                "create_date": "2023-08-05 11:21:50",
                 "page_location_list": [],
                 "code_type": 0,
-                "difficulty_level": "1",
+                "template_file": "",
+                "read_language": "",
                 "question_index": "",
-                "correct_single_index": 0,
-                "question_type": "17",
                 "media_resources": [],
+                "link_answer_data": [],
                 "analysis": "",
-                "question_id": "13091",
                 "difficulty_level_str": "简单",
-                "update_date": "",
-                "exam_options_data": [
-                  {
-                    "data": {
-                      "file_url": "",
-                      "content_type": 1,
-                      "file_type": 0,
-                      "name": "",
-                      "id": 0,
+                "update_date": "2023-08-12 11:38:15",
+                "content_model_list": [],
+                "reference_answer": "",
+                "word_id_list": [],
+                "exam_link_answer_data": [],
+                "reference_file_full_url": "",
+                "hint": "分类题",
+                "word_list": [],
+                "judge_advice_list": [],
+                "reference_file": "",
+                "data_mode": 1,
+                "correct_judge": "",
+                "read_pass_score": "",
+                "content": "[]",
+                "correct_subjective_answer": "",
+                "draw_img_url": "",
+                "auto_check": true,
+                "style_type": "",
+                "question_name": "",
+                "correct_rate": "",
+                "correct_sort_index_list": [],
+                "difficulty_level": "1",
+                "read_type": "",
+                "correct_single_index": 0,
+                "question_type": "17",
+                "question_id": "13898",
+                "classify_question_info": {
+                  "background_file": {
+                    "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/29cdf38b5917b0943858e922901a79666cakkharx0kgw1x0.png-quality_80",
+                    "content_type": 2,
+                    "file_type": 1,
+                    "name": "bg",
+                    "id": 3485,
+                    "thumbnail_url": "",
+                    "option_content": "3485"
+                  },
+                  "small_type_option_list": [
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/3629e13ac107f35a57a43f23155c6203u27fvk1q7jvlnc07.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "sss",
+                      "id": 3489,
                       "thumbnail_url": "",
-                      "option_content": "late, angry"
+                      "option_content": "3489"
                     },
-                    "index": 1
-                  },
-                  {
-                    "data": {
-                      "file_url": "",
-                      "content_type": 1,
-                      "file_type": 0,
-                      "name": "",
-                      "id": 0,
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/3629e13ac107f35a57a43f23155c6203u27fvk1q7jvlnc07.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "sss",
+                      "id": 3489,
                       "thumbnail_url": "",
-                      "option_content": "lately, angrily"
+                      "option_content": "3489"
                     },
-                    "index": 2
-                  },
-                  {
-                    "data": {
-                      "file_url": "",
-                      "content_type": 1,
-                      "file_type": 0,
-                      "name": "",
-                      "id": 0,
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/3629e13ac107f35a57a43f23155c6203u27fvk1q7jvlnc07.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "sss",
+                      "id": 3489,
                       "thumbnail_url": "",
-                      "option_content": " late, angrily"
+                      "option_content": "3489"
                     },
-                    "index": 3
-                  },
-                  {
-                    "data": {
-                      "file_url": "",
-                      "content_type": 1,
-                      "file_type": 0,
-                      "name": "",
-                      "id": 0,
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/3629e13ac107f35a57a43f23155c6203u27fvk1q7jvlnc07.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "sss",
+                      "id": 3489,
+                      "thumbnail_url": "",
+                      "option_content": "3489"
+                    }
+                  ],
+                  "big_type_option_list": [
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/b191bacd49ada74213e3e4830b46e7be7nmqoddfu5y2q657.gif",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "loading",
+                      "id": 3478,
                       "thumbnail_url": "",
-                      "option_content": "lately, angry"
+                      "option_content": "3478"
                     },
-                    "index": 4
-                  }
-                ],
-                "exam_link_answer_data": [],
-                "reference_file_full_url": "",
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/656bfb1a38a8be8e1c724593080c26d5no3bb3l9m6mnmxhi.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "DCA0F46E-2A91-42ee-A4AE-B34CCCBC5F53",
+                      "id": 3316,
+                      "thumbnail_url": "",
+                      "option_content": "3316"
+                    }
+                  ],
+                  "big_type_box_image_list": [
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/283752fd11f2a5796a7d7d61dfd1caa3x5q7j62u97twhudl.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "type-border",
+                      "id": 3486,
+                      "thumbnail_url": "",
+                      "option_content": "3486"
+                    },
+                    {
+                      "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/283752fd11f2a5796a7d7d61dfd1caa3x5q7j62u97twhudl.png-quality_80",
+                      "content_type": 2,
+                      "file_type": 1,
+                      "name": "type-border",
+                      "id": 3486,
+                      "thumbnail_url": "",
+                      "option_content": "3486"
+                    }
+                  ],
+                  "bottom_img_file": {
+                    "file_url": "https://dev-resource.thedeer.cn/pre/resource-media/image/426778e9f51977601953390f824b9b40x7fuaf0246ghxjlp.png-quality_80",
+                    "content_type": 2,
+                    "file_type": 1,
+                    "name": "矩形",
+                    "id": 3488,
+                    "thumbnail_url": "",
+                    "option_content": "3488"
+                  },
+                  "correct_mapping_list": []
+                },
+                "exam_options_data": [],
+                "draw_img": null,
                 "correct_multiple_index_set": [],
-                "hint": "Multiple choice.1",
-                "knowledge_id": "2"
+                "correct_link_list": [],
+                "judge_percent": "",
+                "knowledge_id": "367",
+                "read_content": ""
               }
             ],
             "examination_duration": 5400,
@@ -264,10 +305,17 @@ export default defineComponent({
     }
 
 
+    function submit(){
+      let component = _this.$refs['question']
+      console.log(component.isAnswered());
+      console.log(component.getAnswer());
+    }
+
     return {
       ...toRefs(data),
       responsiveObj,
-      quitQuestion
+      quitQuestion,
+      submit
     }
   }
 })