连线题优化

闫增涛

2024-06-19 4be582eef716b2aa5fb243fbf19a9263083fa8e8

 src/components/matching/matching.vue

@@ -15,10 +15,9 @@
            :key="index"
            ref="left"
            @mousedown="(e) => touchstart(e, item, index)"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
            :style="{ backgroundColor: primaryColor }"
            v-html="item.label.txt"
          ></div>
        </div>
        <div class="answer-box">
          <div
@@ -26,10 +25,9 @@
            v-for="(item, index) in rightArr"
            :key="index"
            ref="right"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
            :style="{ backgroundColor: primaryColor }"
            v-html="item.label.txt"
          ></div>
        </div>
      </div>
      <canvas
@@ -48,17 +46,24 @@
    <!-- 按钮 -->
    <div class="btn-bottom">
      <el-button @click="submitData">提交</el-button>
      <el-button @click="saveData" :style="{borderColor:primaryColor}">保存</el-button>
      <el-button @click="redo" >重做</el-button>
      <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">查看答案</el-button>
      <el-button @click="saveData" :style="{ borderColor: primaryColor }"
        >保存</el-button
      >
      <el-button @click="redo">重做</el-button>
      <el-button @click="handleAnswer" :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
    </div>
    <!-- 解析 -->
    <ul class="show-answer" v-if="isShowAnswer">
      <li v-if="isRight !== null">答案结果：<span v-if="isRight" style="color: #83e089;">正确</span> <span v-if="isRight == false" style="color:#d81e06">错误</span></li>
      <li v-if="isRight !== null">
        答案结果：<span v-if="isRight" style="color: #83e089">正确</span>
        <span v-if="isRight == false" style="color: #d81e06">错误</span>
      </li>
      <li class="show-answer-box">
        <div>答案:</div>
        <div>
          <img :src="item.answerImg" alt="" class="w100">
          <img :src="question.answerImg" alt="" class="w100" />
        </div>
      </li>
    </ul>
@@ -85,8 +90,8 @@
      checkItemIndex: null,
      isShowAnswer: false,
      isRight: null,
      value:[],
      pageNum:null
      value: [],
      pageNum: null,
    };
  },
  props: {
@@ -99,16 +104,16 @@
        };
      },
    },
    item: {
    question: {
      type: Object,
      default: () => {
        return [];
      },
    },
    primaryColor:{
      type:String,
      default:"#0bab87"
    }
    primaryColor: {
      type: String,
      default: "#0bab87",
    },
  },
  watch: {
    rawData: {
@@ -120,7 +125,7 @@
  },
  mounted() {
    // 获取当前页码，用于匹配本次存储题目数据
    this.pageNum = this.handlePage()
    this.pageNum = this.handlePage();
    // 添加滚动事件 监听 解决因为滚动引起的拖动线不对的问题
    window.addEventListener(
      "scroll",
@@ -142,7 +147,7 @@
    this.$nextTick(() => {
      this.drawing();
    });
    this.getAnswer()
    this.getAnswer();
  },
  methods: {
    init() {
@@ -182,14 +187,15 @@
    // 触摸结束
    touchend(e, index) {
      this.isDragging = false;
      if (this.item.showAnswer) {
      if (this.question.showAnswer) {
        return false;
      }
      // let event = e.changedTouches[0];
      // document.elementFromPoint 重点，根据x,y坐标 取当前元素 所有能运行的逻辑 都依托于这里。
      let dom = (
        this.container ? this.container : document
      ).elementFromPoint(e.pageX, e.pageY);
      let dom = (this.container ? this.container : document).elementFromPoint(
        e.pageX,
        e.pageY
      );
      // 右边的dom是哪个
      let right = this.rightDom.find((r) => r.bom === dom);
      // 不管是哪个都清除掉 底部的线
@@ -220,7 +226,7 @@
        })
        .filter((r) => r.right !== undefined);
      this.$emit("input", model);
      this.item.userChoise = model;
      this.question.userChoise = model;
      // console.log(JSON.stringify(model));
    },
    // 触摸开始
@@ -239,7 +245,7 @@
    // touchmove(e, item) {
    //     if(!this.isDragging) return false
    //     console.log('移动',e);
    //     if (this.item.showAnswer) {
    //     if (this.question.showAnswer) {
    //         return false;
    //     }
    //     // let event = e.targetTouches[0];
@@ -251,7 +257,7 @@
    // 移动中
    mousemove(e) {
      if (!this.isDragging) return false;
      if (this.item.showAnswer) {
      if (this.question.showAnswer) {
        return false;
      }
      this.checkItem.line[2] = e.pageX;
@@ -329,10 +335,10 @@
    // 提交
    submitData() {
      const answerArr = [];
      const values = this.item.options.values;
      const values = this.question.options.values;
      for (let index = 0; index < values.length; index++) {
        const item = values[index];
        const rightIndex = this.item.options.linkValues.findIndex(
        const rightIndex = this.question.options.linkValues.findIndex(
          (citem) => citem.oldId == item.oldId
        );
        answerArr.push({
@@ -340,28 +346,21 @@
          right: rightIndex,
        });
      }
      this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
      this.item.showAnswer = true
      // console.log(
      //   "答案",
      //   answerArr,
      //   this.item.userChoise,
      //   this.isRight 
      // );
      this.isRight = this.areArraysEqual(this.question.userChoise, answerArr);
      this.isShowAnswer = true;
    },
    // 获取当前页码
    handlePage() {
      let pageNum = null
      let pageNum = null;
      const element = (
        this.container ? this.container : document
      ).querySelector("matching");
      if (element) {
        pageNum = this.getParentWithClass(
          element,
          "page-box"
        ).getAttribute("page");
        pageNum = this.getParentWithClass(element, "page-box").getAttribute(
          "page"
        );
      }
      return pageNum
      return pageNum;
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
@@ -373,30 +372,38 @@
    },
    // 获取本地存储题目答案
    getAnswer() {
      const data =  localStorage.getItem(this.config.activeBook.name + '-matching-' + this.pageNum)
      if(data) {
       this.value = JSON.parse(data)
      const data = localStorage.getItem(
        this.config.activeBook.name + "-matching-" + this.pageNum
      );
      if (data) {
        this.value = JSON.parse(data);
      }
    },
    // 保存
    saveData() {
      if(this.item.userChoise.length)
      localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
      if (this.question.userChoise.length)
        localStorage.setItem(
          this.config.activeBook.name + "-matching-" + this.pageNum,
          JSON.stringify(this.question.userChoise)
        );
      // console.log('保存成功',this.config.activeBook.name,this.pageNum);
    },
    // 重做
    redo() {
      this.item.showAnswer = false
      localStorage.removeItem(this.config.activeBook.name + '-matching-' + this.pageNum)
      this.value = []
      this.question.showAnswer = false;
      localStorage.removeItem(
        this.config.activeBook.name + "-matching-" + this.pageNum
      );
      this.value = [];
      for (let index = 0; index < this.leftArr.length; index++) {
        const item = this.leftArr[index];
        item.value = []
        item.line = []
        item.value = [];
        item.line = [];
      }
      this.leftArr
      this.drawing()
    }
      this.leftArr;
      this.drawing();
      this.isShowAnswer = false;
    },
  },
};
</script>
@@ -464,7 +471,7 @@
  height: min-content;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  li {
    padding:10px
    padding: 10px;
  }
}
.btn-bottom {
@@ -472,10 +479,26 @@
  margin: 70px auto 0 auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  .el-button {
    margin-top: 10px;
  }
}
.el-button {
  height:30px;
  padding:7px;
  min-width: 78px
  height: 30px;
  padding: 7px;
  min-width: 78px;
}
.answer-box-item {
  /deep/ .un1 {
    -webkit-text-emphasis-style: dot;
    -moz-text-emphasis-style: dot;
    -ms-text-emphasis-style: dot;
    text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
    -moz-text-emphasis-position: under;
    -ms-text-emphasis-position: under;
    text-emphasis-position: under;
  }
}
</style>