戏曲优化

闫增涛

2024-06-25 bdf32ad320fbeb09afeb144cf6f0f0fff314ec0e

戏曲优化

 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
            : "english")
            : "artAndDrama")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/artAndDrama/view/components/chapter002.vue

@@ -97,7 +97,7 @@
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p>
          <drag class="text" :question="dragQuestion" :page="16"/> 
          <drag  :question="dragQuestion" :page="16" class="drag-text"/> 
          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
        </div>
@@ -500,4 +500,9 @@
  height: 100%;
  background-color: red;
}
.drag-text {
  margin: 0 6%;
  font-family: "STKaiti";
  font-size: 19px;
}
</style>

 src/components/choice/choice.vue

@@ -1,455 +1,508 @@
<template>
    <div class="choice-question ">
        <!-- 题目内容及选项部分 -->
        <div class="question-content">
            <p>{{ currentQuestion.stem.stemTxt }}</p>
            <div class="all-options">
                <span v-for="(option, index) in currentQuestion.options" :key="index" class="option"
                    :class="{ 'selected': selectedOptions.includes(index) }"
                    @click="!isSubmitted && toggleOption(index)">
                    <svg v-if="selectedOptions.includes(index)" t="1718282810750" class="icon" viewBox="0 0 1355 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382"
                        xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170">
                        <path
                            d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
                    </svg>
                    <svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="170" height="170">
                        <path
                            d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
                    </svg>
                    <span class="option-text">{{ option.value }}、{{ option.txt }}</span>
                </span>
            </div>
        </div>
        <!-- 答案部分 -->
        <div v-if="showResult">
            <div style="display: flex;align-items: center; flex-direction: column;">
                <img class="face" :src="choiceData.isCorrect ? correctImg : incorrectImg" alt="Result" />
                <div>
                    <p class="center" v-if="choiceData.isCorrect">恭喜您：答对了</p>
                    <p class="center" v-else>答错了，加油哦</p>
                </div>
            </div>
            <div class="key">
                <p class="right-key">正确答案：{{ formatAnswer(currentQuestion.answer) }}</p>
                <p :class="{ 'correct-answer': isCorrectAnswer(), 'incorrect-answer': !isCorrectAnswer() }">
                    您的答案：{{ formatAnswer(getSelectedOptions()) }}</p>
            </div>
        </div>
        <!-- 题目按钮部分 -->
        <div class="btn-button">
            <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">上一题</button>
            <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">下一题</button>
            <button @click="resetQuestion" :style="mergedStyles">重做</button>
            <button @click="submitQuestion" :style="mergedStyles">提交</button>
        </div>
  <div class="choice-question">
    <!-- 题目内容及选项部分 -->
    <div class="question-content">
      <p>{{ currentQuestion.stem.stemTxt }}</p>
      <div class="all-options">
        <span
          v-for="(option, index) in currentQuestion.options"
          :key="index"
          class="option"
          :class="{ selected: selectedOptions.includes(index) }"
          @click="!isSubmitted && toggleOption(index)"
        >
          <svg
            v-if="selectedOptions.includes(index)"
            t="1718282810750"
            class="icon"
            viewBox="0 0 1355 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="87382"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="170"
            height="170"
          >
            <path
              d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
              fill="rgb(245, 130, 32)"
              :style="{ fill: primaryColor }"
              p-id="87383"
            ></path>
          </svg>
          <svg
            v-else
            t="1718282816195"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="87529"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="170"
            height="170"
          >
            <path
              d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
              fill="rgb(245, 130, 32)"
              :style="{ fill: primaryColor }"
              p-id="87530"
            ></path>
          </svg>
          <span class="option-text"  :style="{color:formatAnswer(getSelectedOptions()).indexOf(option.value ) > -1 ? '#fff' : '#000'}">{{ option.value }}、{{ option.txt }}</span>
        </span>
      </div>
    </div>
    <!-- 答案部分 -->
    <div v-if="showResult">
      <div style="display: flex; align-items: center; flex-direction: column">
        <img
          class="face"
          :src="choiceData.isCorrect ? correctImg : incorrectImg"
          alt="Result"
        />
        <div>
          <p class="center" v-if="choiceData.isCorrect">恭喜您：答对了</p>
          <p class="center" v-else>答错了，加油哦</p>
        </div>
      </div>
      <div class="key">
        <p class="right-key">
          正确答案：{{ formatAnswer(currentQuestion.answer) }}
        </p>
        <p
          :class="{
            'correct-answer': isCorrectAnswer(),
            'incorrect-answer': !isCorrectAnswer(),
          }"
        >
          您的答案：{{ formatAnswer(getSelectedOptions()) }}
        </p>
      </div>
    </div>
    <!-- 题目按钮部分 -->
    <div class="btn-button">
      <button
        v-if="currentIndex > 0"
        @click="prevQuestion"
        :style="mergedStyles"
      >
        上一题
      </button>
      <button
        v-if="currentIndex < questions.length - 1"
        @click="nextQuestion"
        :style="mergedStyles"
      >
        下一题
      </button>
      <button @click="resetQuestion" :style="mergedStyles">重做</button>
      <button @click="submitQuestion" :style="mergedStyles">提交</button>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            cloudaImg: require("../../assets/images/solid-cloud.svg"),
            cloudbImg: require("../../assets/images/hollow-cloud.svg"),
            correctImg: require("../../assets/images/smiling-face.svg"),
            incorrectImg: require("../../assets/images/crying-face.svg"),
            isActive: false, // 初始状态
            isSubmitted: false,
            // questions: [
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'C'],
            //         difficulty: 0,
            //         id: 47772,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "群居",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "社会性",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "独居",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "1、蚂蚁是典型的(  )昆虫。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'B'],
            //         difficulty: 0,
            //         id: 47773,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "明确的",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "奇怪的",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "有序的",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "2、蚂蚁内部又(  )分工。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'B'],
            //         difficulty: 0,
            //         id: 47774,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "团结的",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "优秀的",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "松散的",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "3、一个(  )群体少不了默契的配合。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            // ],
            currentIndex: 0, // 当前题目的索引  
            selectedOption: null, // 选中的选项索引  
            selectedOptions: [],
            showResult: false, // 是否显示结果 
            tips: false,
            // 是否回答正确  
            choiceData: {
                isCorrect: false,
            },
            isPrimary: true,
        };
  data() {
    return {
      cloudaImg: require("../../assets/images/solid-cloud.svg"),
      cloudbImg: require("../../assets/images/hollow-cloud.svg"),
      correctImg: require("../../assets/images/smiling-face.svg"),
      incorrectImg: require("../../assets/images/crying-face.svg"),
      isActive: false, // 初始状态
      isSubmitted: false,
      // questions: [
      //     {
      //         analysisCon: "undefined",
      //         answer: ['A', 'C'],
      //         difficulty: 0,
      //         id: 47772,
      //         isCollect: false,
      //         isComplete: false,
      //         isRight: null,
      //         isUnfold: "",
      //         isUserAnswer: false,
      //         number: 1,
      //         options: [
      //             {
      //                 "img": "",
      //                 "index": "3CA6",
      //                 "txt": "群居",
      //                 "value": "A"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "73EE",
      //                 "txt": "社会性",
      //                 "value": "B"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "6AEF",
      //                 "txt": "独居",
      //                 "value": "C"
      //             },
      //         ],
      //         optionStyle: "Image",
      //         questionType: "singleChoice",
      //         score: 2,
      //         stem: {
      //             "stemTxt": "1、蚂蚁是典型的(  )昆虫。(多选)"
      //         },
      //         stemStyle: "Txt",
      //         userAnswer: "",
      //         // 单选题这里的字段内容就是"单选题"
      //         type: 'multi'
      //     },
      //     {
      //         analysisCon: "undefined",
      //         answer: ['A', 'B'],
      //         difficulty: 0,
      //         id: 47773,
      //         isCollect: false,
      //         isComplete: false,
      //         isRight: null,
      //         isUnfold: "",
      //         isUserAnswer: false,
      //         number: 1,
      //         options: [
      //             {
      //                 "img": "",
      //                 "index": "3CA6",
      //                 "txt": "明确的",
      //                 "value": "A"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "73EE",
      //                 "txt": "奇怪的",
      //                 "value": "B"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "6AEF",
      //                 "txt": "有序的",
      //                 "value": "C"
      //             },
      //         ],
      //         optionStyle: "Image",
      //         questionType: "singleChoice",
      //         score: 2,
      //         stem: {
      //             "stemTxt": "2、蚂蚁内部又(  )分工。(多选)"
      //         },
      //         stemStyle: "Txt",
      //         userAnswer: "",
      //         // 单选题这里的字段内容就是"单选题"
      //         type: 'multi'
      //     },
      //     {
      //         analysisCon: "undefined",
      //         answer: ['A', 'B'],
      //         difficulty: 0,
      //         id: 47774,
      //         isCollect: false,
      //         isComplete: false,
      //         isRight: null,
      //         isUnfold: "",
      //         isUserAnswer: false,
      //         number: 1,
      //         options: [
      //             {
      //                 "img": "",
      //                 "index": "3CA6",
      //                 "txt": "团结的",
      //                 "value": "A"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "73EE",
      //                 "txt": "优秀的",
      //                 "value": "B"
      //             },
      //             {
      //                 "img": "",
      //                 "index": "6AEF",
      //                 "txt": "松散的",
      //                 "value": "C"
      //             },
      //         ],
      //         optionStyle: "Image",
      //         questionType: "singleChoice",
      //         score: 2,
      //         stem: {
      //             "stemTxt": "3、一个(  )群体少不了默契的配合。(多选)"
      //         },
      //         stemStyle: "Txt",
      //         userAnswer: "",
      //         // 单选题这里的字段内容就是"单选题"
      //         type: 'multi'
      //     },
      // ],
      currentIndex: 0, // 当前题目的索引
      selectedOption: null, // 选中的选项索引
      selectedOptions: [],
      showResult: false, // 是否显示结果
      tips: false,
      // 是否回答正确
      choiceData: {
        isCorrect: false,
      },
      isPrimary: true,
    };
  },
  props: {
    questions: {
      type: Array,
      required: true,
    },
    props: {
        questions: {
            type: Array,
            required: true
        },
        primaryColor: {
            type: String,
            default: "#F58220",
        },
        hoverBackgroundColor: {
            type: String,
            default: 'rgb(245, 130, 32)' // 默认值  
        },
        hoverColor: {
            type: String,
            default: 'white' // 默认值  
    primaryColor: {
      type: String,
      default: "#F58220",
    },
    hoverBackgroundColor: {
      type: String,
      default: "rgb(245, 130, 32)", // 默认值
    },
    hoverColor: {
      type: String,
      default: "white", // 默认值
    },
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex];
    },
    setHoverStyles() {
      return {
        "--hover-bg-color": this.hoverBackgroundColor,
        "--hover-color": this.hoverColor,
      };
    },
    mergedStyles() {
      // 合并直接样式和计算属性样式
      return {
        borderColor: this.primaryColor,
        ...this.setHoverStyles,
      };
    },
  },
  methods: {
    toggleOption(index) {
      if (this.currentQuestion.type === "single") {
        this.selectedOptions = [index]; // 单选时只选中一个
      } else {
        // 多选时切换选中状态
        console.log(this.selectedOptions, index);
        const isAlreadySelected = this.selectedOptions.includes(index);
        if (isAlreadySelected) {
          this.selectedOptions = this.selectedOptions.filter(
            (i) => i !== index
          );
        } else {
          this.selectedOptions.push(index);
        }
      }
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        },
        setHoverStyles() {
            return {
                '--hover-bg-color': this.hoverBackgroundColor,
                '--hover-color': this.hoverColor
            };
        },
        mergedStyles() {
            // 合并直接样式和计算属性样式  
            return {
                borderColor: this.primaryColor,
                ...this.setHoverStyles
            };
    getOptionColor(index) {
      // 根据选项是否被选中返回相应的颜色
      return this.optionColors[index] || this.defaultColor; // 如果没有设置颜色，则返回默认颜色
    },
    getSelectedOptions() {
      return this.selectedOptions.map((index) => {
        const selectedOption = this.currentQuestion.options[index];
        // 返回选项的文本（这里假设每个选项对象有一个 'value' 属性）
        return selectedOption.value;
      });
    },
    formatAnswer(answer) {
      // 格式化答案以便显示（例如，将索引转换为选项文本）
      if (Array.isArray(answer)) {
        return answer.join(", ");
      }
      return answer;
    },
    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.resetQuestion();
      }
      this.isSubmitted = false;
    },
    nextQuestion() {
      if (this.currentIndex < this.questions.length - 1) {
        this.currentIndex++;
        this.resetQuestion();
      }
      this.isSubmitted = false;
    },
    resetQuestion() {
      this.selectedOptions = [];
      this.showResult = false;
      this.isSubmitted = false;
    },
    submitQuestion() {
      const isCorrectAnswer = this.isCorrectAnswer();
      console.log(isCorrectAnswer);
      this.isCorrect = this.isCorrectAnswer();
      this.showResult = true;
      this.choiceData.isCorrect = this.isCorrect;
      // 播放音频的逻辑（如果需要）
      if (isCorrectAnswer) {
        // 播放“恭喜你，答对了”的音频
      } else {
        // 播放“答错了，加油哦”的音频
      }
      this.isSubmitted = true;
    },
    isCorrectAnswer() {
      // 检查答案是否正确
      if (this.currentQuestion.type === "single") {
        return (
          this.selectedOptions.length === 1 &&
          this.selectedOptions[0] === this.currentQuestion.answer
        );
      } else if (this.currentQuestion.type === "sort") {
        // 对于多选，需要比较两个数组是否相等（包含相同元素，并且顺序一致）
        const selectedValues = this.getSelectedOptions();
        const correctAnswers = this.currentQuestion.answer;
        // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中
        if (selectedValues.length === 0) {
          // alert('您还未选择任何选项！')
          return false;
        }
        // 如果两个数组的长度不一样，则直接返回false
        if (selectedValues.length !== correctAnswers.length) {
          // 弹出提示信息（可选）
          // alert('您选择的选项数量不正确！');
          return false;
        }
        // 使用JSON.stringify将数组转换为字符串，然后比较字符串是否相等
        // 注意：这种方法只适用于数组元素都是基本类型（如字符串、数字）的情况
        // 如果数组包含对象或复杂的数据结构，可能需要使用更复杂的比较方法
        if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
          // 弹出提示信息（可选）
          // alert('您选择的选项不正确！');
          return false;
        }
        // 如果以上所有条件都通过，那么可以认为选择是正确的
        return true;
      } else {
        // 对于多选，需要比较两个数组是否相等（或包含相同元素，具体取决于需求）
        //  这里需要将用户选择的索引转化为具体的value值
        const selectedValues = this.getSelectedOptions();
        const correctSet = new Set(this.currentQuestion.answer);
        // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中
        if (selectedValues.length === 0) {
          // alert('您还未选择任何选项！')
          return false;
        }
        // 如果两个数组的长度不一样，则直接返回false，因为没有任何选项被选中
        if (selectedValues.length !== correctSet.size) {
          // 弹出提示信息（可选）
          // alert('您选择的选项数量不正确！');
          return false;
        }
        return selectedValues.every((value) => correctSet.has(value));
      }
    },
    methods: {
        toggleOption(index) {
            if (this.currentQuestion.type === 'single') {
                this.selectedOptions = [index]; // 单选时只选中一个  
            } else {
                // 多选时切换选中状态 
                console.log(this.selectedOptions, index)
                const isAlreadySelected = this.selectedOptions.includes(index);
                if (isAlreadySelected) {
                    this.selectedOptions = this.selectedOptions.filter(i => i !== index);
                } else {
                    this.selectedOptions.push(index);
                }

            }
        },
        getOptionColor(index) {
            // 根据选项是否被选中返回相应的颜色  
            return this.optionColors[index] || this.defaultColor; // 如果没有设置颜色，则返回默认颜色  
        },
        getSelectedOptions() {
            return this.selectedOptions.map(index => {
                const selectedOption = this.currentQuestion.options[index];
                // 返回选项的文本（这里假设每个选项对象有一个 'value' 属性）  
                return selectedOption.value;
            }
            );
        },
        formatAnswer(answer) {
            // 格式化答案以便显示（例如，将索引转换为选项文本）  
            if (Array.isArray(answer)) {
                return answer.join(', ');
            }
            return answer;
        },
        prevQuestion() {
            if (this.currentIndex > 0) {
                this.currentIndex--;
                this.resetQuestion();
            }
            this.isSubmitted = false;
        },
        nextQuestion() {
            if (this.currentIndex < this.questions.length - 1) {
                this.currentIndex++;
                this.resetQuestion();
            }
            this.isSubmitted = false;
        },
        resetQuestion() {
            this.selectedOptions = [];
            this.showResult = false;
            this.isSubmitted = false;
        },
        submitQuestion() {
            const isCorrectAnswer = this.isCorrectAnswer();
            console.log(isCorrectAnswer)
            this.isCorrect = this.isCorrectAnswer();
            this.showResult = true;
            this.choiceData.isCorrect = this.isCorrect;
            // 播放音频的逻辑（如果需要）  
            if (isCorrectAnswer) {
                // 播放“恭喜你，答对了”的音频  
            } else {
                // 播放“答错了，加油哦”的音频  
            }
            this.isSubmitted = true;
        },
        isCorrectAnswer() {
            // 检查答案是否正确  
            if (this.currentQuestion.type === 'single') {
                return this.selectedOptions.length === 1 && this.selectedOptions[0] === this.currentQuestion.answer;
            } else if (this.currentQuestion.type === 'sort') {
                // 对于多选，需要比较两个数组是否相等（包含相同元素，并且顺序一致）  
                const selectedValues = this.getSelectedOptions();
                const correctAnswers = this.currentQuestion.answer;
                // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length === 0) {
                    // alert('您还未选择任何选项！')  
                    return false;
                }
                // 如果两个数组的长度不一样，则直接返回false  
                if (selectedValues.length !== correctAnswers.length) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项数量不正确！');  
                    return false;
                }
                // 使用JSON.stringify将数组转换为字符串，然后比较字符串是否相等  
                // 注意：这种方法只适用于数组元素都是基本类型（如字符串、数字）的情况  
                // 如果数组包含对象或复杂的数据结构，可能需要使用更复杂的比较方法  
                if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项不正确！');  
                    return false;
                }
                // 如果以上所有条件都通过，那么可以认为选择是正确的  
                return true;
            } else {
                // 对于多选，需要比较两个数组是否相等（或包含相同元素，具体取决于需求）
                //  这里需要将用户选择的索引转化为具体的value值  
                const selectedValues = this.getSelectedOptions();
                const correctSet = new Set(this.currentQuestion.answer);
                // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length === 0) {
                    // alert('您还未选择任何选项！')
                    return false;
                }
                // 如果两个数组的长度不一样，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length !== correctSet.size) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项数量不正确！');  
                    return false;
                }
                return selectedValues.every(value => correctSet.has(value));
            }
        },
    },
};  
  },
};
</script>

<style lang="less" scoped>
.all-options {
    display: flex;
    justify-content: space-between;
    margin-left: 10%;
  display: flex;
  justify-content: space-between;
  margin-left: 10%;
}

.option {
    position: relative;
    /* 设置为相对定位容器 */
    display: flex;
    flex-wrap: wrap;
    /* 使用 Flexbox 以便更好地控制布局和对齐 */
    align-items: center;
    /* 垂直居中对齐 */


  position: relative;
  /* 设置为相对定位容器 */
  display: flex;
  flex-wrap: wrap;
  /* 使用 Flexbox 以便更好地控制布局和对齐 */
  align-items: center;
  /* 垂直居中对齐 */
}

.icon {
    width: 80%;
    height: auto;
    min-width: 120px;
  width: 80%;
  height: auto;
  min-width: 120px;
}

.option-text {
    position: absolute;
    z-index: 1;
    left: 10%;
    top: 52%;
  position: absolute;
  z-index: 1;
  left: 10%;
  top: 52%;
}

.option-text.selected {
    /* 当被选中时的样式 */
    color: white;
  /* 当被选中时的样式 */
  color: white;
}

.cloud-icon {
    fill: rgb(245, 130, 32);
  fill: rgb(245, 130, 32);
}

.btn-button {
    width: 70%;
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  width: 70%;
  margin: 10px auto 0 auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.btn-button>button {
    width: 80px;
    height: 30px;
    margin-top: 10px;
    border: 1px solid rgb(245, 130, 32);
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
.btn-button > button {
  width: 80px;
  height: 30px;
  margin-top: 10px;
  border: 1px solid rgb(245, 130, 32);
  background-color: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.btn-button>button:hover {
    // background-color: rgb(245, 130, 32);
    // /* 鼠标悬停时背景色变为红色 */
    // color: white;
    // /* 鼠标悬停时字体颜色变为白色 */
    // /* 其他你想要的悬停样式... */
    background-color: var(--hover-bg-color);
    color: var(--hover-color);
.btn-button > button:hover {
  // background-color: rgb(245, 130, 32);
  // /* 鼠标悬停时背景色变为红色 */
  // color: white;
  // /* 鼠标悬停时字体颜色变为白色 */
  // /* 其他你想要的悬停样式... */
  background-color: var(--hover-bg-color);
  color: var(--hover-color);
}

.active {
    color: white;
    transition: color 0.3s;
  color: white;
  transition: color 0.3s;
}

.key {
    display: flex;
    justify-content: space-around;
  display: flex;
  justify-content: space-around;
}

.right-key {
    color: green;
  color: green;
}

.correct-answer {
    color: green;
    /* 正确答案的字体颜色 */
  color: green;
  /* 正确答案的字体颜色 */
}

.incorrect-answer {
    color: red;
    /* 错误答案的字体颜色 */
  color: red;
  /* 错误答案的字体颜色 */
}

.face {
    width: 15%;
    height: auto;
  width: 15%;
  height: auto;
}
</style>
</style>

 src/components/dragQuestion/index.vue

@@ -212,7 +212,7 @@
      this.moveDom = e.toElement;
      this.parentDom = this.getParentWithClass(e.toElement, "question-box");
      this.questionIndex = this.parentDom.getAttribute("num");
      this.getSpaceInfo(this.parentDom);
      if(!this.spaceList.length) this.getSpaceInfo(this.parentDom);
      const parentInfo = this.parentDom.getBoundingClientRect();
      this.parentX = parentInfo.x;
      this.parentY = parentInfo.y;
@@ -241,6 +241,7 @@
              e.y <= item.maxY
            ) {
              if(!this.isLift) return false
              this.spaceList = this.spaceList.filter(citem => citem !== item)
              this.$set(
                this.drageQuestion[this.questionIndex].userAnswer,
                index,
@@ -406,6 +407,7 @@
  text-align: center;
  min-width: 60px !important;
  min-height: 15px !important;
  text-indent: 0em;
}
.option-box {
  display: flex;
@@ -415,6 +417,7 @@
  cursor: pointer;
}
.stem {
  text-indent: 2em;
  line-height: 2em;
}
.drag-bottom-btn {