答题器优化

闫增涛

2024-06-20 f109a7f75ddc1bbec14df4b92efc01bae208ad8c

答题器优化

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "artAndDrama")
            : "mathBook")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/mathBook/view/components/chapter001.vue

@@ -564,8 +564,9 @@
          </p>
          <div class="bj">
            <examinations
              :cardList="questionData"
              :cardList="questionData[9]"
              :hideCollect="true"
              sourceType="json"
              inputBc="#d3edfa"
              v-if="questionData"
              :isReal="false"
@@ -827,6 +828,9 @@
      type: Array,
      default: [],
    },
    questionData:{
      type:Object
    }
  },
  mounted() {
    const data = localStorage.getItem("math-chapterData");
@@ -834,7 +838,7 @@
      this.chapterData = JSON.parse(data);
    }
    this.getPath();
    this.getQuestionData();
    // this.getQuestionData();
  },
  data() {
    return {
@@ -849,7 +853,6 @@
      thinkingDialog: false,
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex: 1,
      chapterData: {
@@ -896,40 +899,40 @@
        "a28cd862d61b5df2201406b76e9f01b0"
      );
    },
    getQuestionData() {
      axios
        .get(this.config.activeBook.resourceUrl + "/question.json")
        .then((res) => {
          let oldAnswer = localStorage.getItem(
            this.config.activeBook.name + "oldAnswerData"
          );
          if (oldAnswer) {
            oldAnswer = JSON.parse(oldAnswer);
            console.log("旧数据", oldAnswer);
            if (oldAnswer[9]) {
              for (let index = 0; index < res.data.data.length; index++) {
                const item = res.data.data[index];
                if (item.infoList.length) {
                  for (
                    let cindex = 0;
                    cindex < item.infoList.length;
                    cindex++
                  ) {
                    const citem = item.infoList[cindex];
                    const question = oldAnswer[9].find(
                      (ditem) => ditem.id == citem.id
                    );
                    if (question) {
                      citem.userAnswer = question.userAnswer;
                    }
                  }
                }
              }
            }
          }
          this.questionData = res.data.data;
        });
    },
    // getQuestionData() {
    //   axios
    //     .get(this.config.activeBook.resourceUrl + "/question.json")
    //     .then((res) => {
    //       let oldAnswer = localStorage.getItem(
    //         this.config.activeBook.name + "oldAnswerData"
    //       );
    //       if (oldAnswer) {
    //         oldAnswer = JSON.parse(oldAnswer);
    //         console.log("旧数据", oldAnswer);
    //         if (oldAnswer[9]) {
    //           for (let index = 0; index < res.data.data.length; index++) {
    //             const item = res.data.data[index];
    //             if (item.infoList.length) {
    //               for (
    //                 let cindex = 0;
    //                 cindex < item.infoList.length;
    //                 cindex++
    //               ) {
    //                 const citem = item.infoList[cindex];
    //                 const question = oldAnswer[9].find(
    //                   (ditem) => ditem.id == citem.id
    //                 );
    //                 if (question) {
    //                   citem.userAnswer = question.userAnswer;
    //                 }
    //               }
    //             }
    //           }
    //         }
    //       }
    //       this.questionData = res.data.data;
    //     });
    // },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;

 src/books/mathBook/view/components/index.vue

@@ -18,13 +18,14 @@
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
      ></chapterOne>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chapter002.vue";
@@ -38,8 +39,9 @@
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import getQuestionList from "@/assets/methods/examination";
export default {
  name:"pageContent",
  name: "pageContent",
  data() {
    return {
      catalogLength: 2, // 总章节数
@@ -54,6 +56,8 @@
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      questionId: {},
      collectId:[]
    };
  },
  computed: {
@@ -188,6 +192,10 @@
    //   txtIndex: 57
    // });
    // }, 5000);

    // 获取题目id列表
    this.getQuestionId();
    this.getCollect()
  },
  methods: {
    // setZoom1() {
@@ -309,7 +317,10 @@
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
@@ -537,30 +548,14 @@
            // 添加页码
            this.loadPageList.push(Number(page));
            const catalog = catalogDom.getAttribute("num");
            // if (!this.questionDataMap[page]) {
            //   if (testData && testData[catalog]) {
            //     if (testData[catalog][page]) {
            //       if (Array.isArray(testData[catalog][page])) {
            //         this.questionDataMap[page] = await getQuestionList(
            //           page,
            //           testData[catalog][page],
            //           this.config.activeBook
            //         );
            //       } else {
            //         const obj = {};
            //         for (let key in testData[catalog][page]) {
            //           obj[key] = await getQuestionList(
            //             [],
            //             testData[catalog][page][key],
            //             this.config.activeBook
            //           );
            //         }
            //         this.questionDataMap[page] = obj;
            //       }
            //       console.log("题目", this.questionDataMap);
            //     }
            //   }
            // }
            if (!this.questionDataMap[page]) {
              if (this.questionId && this.questionId[catalog]) {
                if (this.questionId[catalog][page]) {
                  this.questionDataMap[page] = await this.getQuestion(catalog, page);
                  console.log("题目", this.questionDataMap);
                }
              }
            }
            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
@@ -574,7 +569,10 @@
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
@@ -618,23 +616,19 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true
          observeParents: true,
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -657,12 +651,8 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -681,8 +671,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },
@@ -726,7 +716,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -758,7 +748,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -772,7 +762,10 @@
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
@@ -813,6 +806,93 @@
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 获取题目列表
    getQuestionId() {
      axios
        .get(this.config.activeBook.resourceUrl + "/question-list.json")
        .then((res) => {
          this.questionId = res.data.list;
        });
    },
    // 获取题目收藏id列表
    getCollect() {
      this.MG.identity
        .getUserKey({
          domain: "collectData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const collect = JSON.parse(res[0].value);
            if (collect.length) {
              this.collectId = collect.find(item => item.type == 'json').collectList
              console.log('收藏列表',this.collectId);
            }
          } catch (error) {
            console.log("暂无数据");
          }
        }).catch(res => {
          console.log('index 请求题目收藏id报错');
        })
    },
    // 获取章节题目
    async getQuestion(num, page) {
      let cardList = [
        {
          catalogName: "单选题",
          infoList: [],
        },
        {
          catalogName: "判断题",
          infoList: [],
        },
        {
          catalogName: "多选题",
          infoList: [],
        },
        {
          catalogName: "填空题",
          infoList: [],
        },
        {
          catalogName: "简答题",
          infoList: [],
        },
      ];
      if (this.questionId) {
        if (this.questionId[num] && this.questionId[num][page]) {
          const res = await axios.get(
            this.config.activeBook.resourceUrl + "/question-" + num + ".json"
          );
          if (!res.data.data) return [];
          for (let index = 0; index < res.data.data.length; index++) {
            const item = res.data.data[index];
              item.isCollect = this.collectId.indexOf(item.id) > -1 ? true :false
            console.log(item.id ,this.collectId.indexOf(item.id));
            if (this.questionId[num][page].indexOf(item.id) > -1) {
              if (item.type && item.type == "material") {
                cardList.push(item);
              } else {
                if (item.questionType == "judge") {
                  cardList[1].infoList.push(item);
                } else if (item.questionType == "singleChoice") {
                  cardList[0].infoList.push(item);
                } else if (item.questionType == "multipleChoice") {
                  cardList[2].infoList.push(item);
                } else if (item.questionType == "completion") {
                  cardList[3].infoList.push(item);
                } else if (item.questionType == "shortAnswer") {
                  cardList[4].infoList.push(item);
                }
              }
            }
          }
          return cardList.filter((item) => item.infoList.length > 0);
        }
      } else {
        return [];
      }
    },
  },
  components: {
    pageHeader,

 src/components/examinations/index.vue

@@ -79,7 +79,7 @@
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{backgroundColor:inputBc}"
                    :style="{ backgroundColor: inputBc }"
                  />
                  <!-- &nbsp; -->
                </span>
@@ -92,7 +92,13 @@
                v-cloak
              ></p>
            </div>
            <img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png" @click="handleCollect(nindex,index)" v-if="!(hideCollect && value.questionType == 'shortAnswer')" >
            <img
              :src="value.isCollect ? isHeart : heart"
              alt=""
              class="collect-png"
              @click="setCollect(nindex, index)"
              v-if="!(hideCollect && value.questionType == 'shortAnswer')"
            />
            <!-- 收藏 -->
          </div>
          <div class="questionContent">
@@ -293,41 +299,41 @@
                      <!-- 正确错误图标 -->
                      <span class="mr-10">
                        <svg
                        v-if="value.isRight"
                        t="1716986419862"
                        class="icon"
                        viewBox="0 0 1820 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="18767"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="40"
                        height="20"
                      >
                        <path
                          d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                          fill="#1AFA29"
                          p-id="18768"
                        ></path>
                      </svg>
                      <svg
                        v-if="value.isRight == false"
                        t="1716987085767"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="25745"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                          fill="#d81e06"
                          p-id="25746"
                        ></path>
                      </svg>
                          v-if="value.isRight"
                          t="1716986419862"
                          class="icon"
                          viewBox="0 0 1820 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="18767"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40"
                          height="20"
                        >
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29"
                            p-id="18768"
                          ></path>
                        </svg>
                        <svg
                          v-if="value.isRight == false"
                          t="1716987085767"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="25745"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>

                      <div class="headerConent sitgBox">
@@ -475,7 +481,7 @@
</template>

<script>
import { Message } from 'element-ui';
import { Message } from "element-ui";
export default {
  name: "examination-option",
  props: {
@@ -500,10 +506,14 @@
      type: String,
      default: "#fff",
    },
    hideCollect:{
      type:Boolean,
      default:false
    }
    hideCollect: {
      type: Boolean,
      default: false,
    },
    sourceType: {
      type: String,
      default: "bits",
    },
  },
  data() {
    return {
@@ -511,8 +521,30 @@
      loading: false,
      cardData: [],
      loading: true,
      heart:require("@/assets/images/heart.png"),
      isHeart:require("@/assets/images/heart-check.png"),
      heart: require("@/assets/images/heart.png"),
      isHeart: require("@/assets/images/heart-check.png"),
      collectList: [],
      allCollect: [
        {
          type: "bits",
          collectList: [],
        },
        {
          type: "json",
          collectList: [],
        },
      ],
      errorList: [],
      allError: [
        {
          type: "bits",
          errorList: [],
        },
        {
          type: "json",
          errorList: [],
        },
      ],
    };
  },
  watch: {
@@ -531,6 +563,8 @@
    // this.cardData = this.cardList
    // console.log('this.cardList',this.cardList);
    // console.log('this.cardData',this.cardData);
    this.getCollectIdList();
    this.getErrorList()
  },
  methods: {
    // 数组转为字符串方法
@@ -590,6 +624,7 @@
    },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      let errorId = []
      const list = this.cardData;
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
@@ -633,10 +668,33 @@
              }
            }
          }
          if(citem.isRight == false) {
            errorId.push(citem.id)
          }
        }
      }
      this.cardData = list;
      console.log(this.cardData);
      let oldErrodId = this.allError.find(item => item.type == this.sourceType).errorList
      for (let index = 0; index < errorId.length; index++) {
        const item = errorId[index];
        if(oldErrodId.indexOf(item == -1)) {
          oldErrodId.push(item)
        }
      }
      this.allError[1].errorList = oldErrodId
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: 'errorData',
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allError)
            }
          ]
        })
        .then((res) => {
          console.log('错题已保存',this.allError)
        })
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
@@ -681,7 +739,7 @@
          this.config.activeBook.name + "oldAnswerData",
          JSON.stringify(oldData)
        );
        Message.success('保存成功')
        Message.success("保存成功");
      }

      // if(oldData[this.chapter]) {
@@ -692,10 +750,100 @@
      // }
      // console.log(oldData);
    },
    handleCollect(infoNum,num) {
      console.log(this.cardData[infoNum].infoList[num]      );
      this.cardData[infoNum].infoList[num].isCollect = !this.cardData[infoNum].infoList[num].isCollect
    }
    handleCollect(infoNum, num) {
      this.cardData[infoNum].infoList[num].isCollect =
        !this.cardData[infoNum].infoList[num].isCollect;
    },
    // 题目收藏按钮,收藏和取消同一接口，取消数组减去该项id
    setCollect(num, number) {
      const item = this.cardData[num].infoList[number];
      item.isCollect = !item.isCollect;
      if (this.cardData.length == 0) {
        this.collectList.push(item.id);
      } else {
        const isShow = this.collectList.findIndex((citem) => citem == item.id);
        if (isShow == -1) {
          this.collectList.push(item.id);
        } else {
          this.collectList = this.collectList.filter(
            (citem) => citem != item.id
          );
        }
      }
      const list = this.collectList;
      for (let index = 0; index < this.allCollect.length; index++) {
        const item = this.allCollect[index];
        if (item.type == this.sourceType) item.collectList = this.collectList;
      }
      console.log(this.allCollect, this.collectList, list);
      this.MG.identity
        .setUserKey({
          setKeyRequests: [
            {
              domain: "collectData",
              key: this.config.activeBook.bookId,
              value: JSON.stringify(this.allCollect),
            },
          ],
        })
        .then((res) => {
          console.log("收藏/取消成功");
        });
    },
    // 获取收藏id列表
    getCollectIdList() {
      this.MG.identity
        .getUserKey({
          domain: "collectData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const collect = JSON.parse(res[0].value);
            if (collect.length) {
              this.collectList = collect.find(
                (citem) => citem.type == this.sourceType
              ).collectList;
              this.allCollect[0].collectList = collect.find(
                (citem) => citem.type == "bits"
              ).collectList;
              this.allCollect[1].collectList = collect.find(
                (citem) => citem.type == "json"
              ).collectList;
            }
          } catch (error) {
            console.log("暂无数据");
          }
        })
        .catch((res) => {
          console.log("答题器请求题目收藏id报错");
        });
    },
    // 获取错题id列表
    getErrorList() {
      this.MG.identity
        .getUserKey({
          domain: "errorData",
          keys: [this.config.activeBook.bookId],
        })
        .then((res) => {
          try {
            const error = JSON.parse(res[0].value);
            if (error.length) {
              this.errorList = error.find(
                (citem) => citem.type == this.sourceType
              ).errorList;
              this.allError[0].errorList = error.find(
                (citem) => citem.type == "bits"
              ).errorList;
              this.allError[1].errorList = error.find(
                (citem) => citem.type == "json"
              ).errorList;
            }
          } catch (error) {}
          console.log('错题列表',this.allError);
        });
    },
  },
};
</script>
@@ -837,7 +985,7 @@
        width: 140px;
        height: 24px;
        border: 0;
        outline: none; 
        outline: none;
        border-bottom: 1px solid #15c0f2;
      }
      /deep/ .el-textarea.is-disabled .el-textarea__inner {

 src/components/matching/matching.vue

@@ -341,11 +341,13 @@
        const rightIndex = this.question.options.linkValues.findIndex(
          (citem) => citem.oldId == item.oldId
        );

        answerArr.push({
          left: index,
          right: rightIndex,
        });
      }
      console.log(this.question.userChoise,answerArr);
      this.isRight = this.areArraysEqual(this.question.userChoise, answerArr);
      this.isShowAnswer = true;
    },