艺术戏剧（选择题）

user1

2024-06-26 d5997848e6c44537773781d92b6033e61730ea07

 src/components/choice/choice.vue

@@ -1,99 +1,91 @@
<template>
  <div class="choice-question">
    <!-- 题目内容及选项部分 -->
    <div style="display: flex; justify-content: space-around;">
    <div class="question-content">
        <p class="question-t"> <span>
            <span class="hs1">◇</span>请选出你认为正确的答案。</span><span>第{{ currentQuestion.id }}题 (共{{ questions.length}}题)</span></p>
      <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"
          >
          <span v-for="(option, index) in currentQuestion.options" :key="index" class="option"
            :class="{ selected: selectedOptions.includes(index) }" @click="!isSubmitted && toggleOption(index)">
            <!-- 空心云朵 -->
            <span>
              <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>
                  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"
          >
              <!-- 实心云朵 -->
              <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>
                  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"
        />
            <span class="symbol"> <!-- 对号 -->
              <svg v-if="showResult && handleQuestion(option.value)" t="1716986419862" class="icon1"
                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="10" height="10">
                <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="showResult && handleQuestion(option.value) == false" t="1716987085767" class="icon2"
                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="10" height="10">
                <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>
            <!-- 选项 -->
            <span class="option-text"
              :style="{ color: formatAnswer(getSelectedOptions()).indexOf(option.value) > -1 ? '#fff' : '#000' }">
              {{ option.value }}、{{ option.txt }}
            </span>
          </span>
          <div v-if="showResult" class="smiling-face">
            <div style="display: flex; align-items: center; flex-direction: column; width: 90px;">
              <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>
                <p class="center face-text" style="color: green;" v-if="choiceData.isCorrect">恭喜您：答对了</p>
                <p class="center face-text" v-else :class="{
                  'correct-answer': isCorrectAnswer(),
                  'incorrect-answer': !isCorrectAnswer(),
                }">答错了，加油哦</p>
        </div>
      </div>
          </div>
        </div>
      </div>

    </div>
    <div v-if="showResult">
      <div class="key">
        <p class="right-key">
          正确答案：{{ formatAnswer(currentQuestion.answer) }}
        </p>
        <p
          :class="{
        <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 v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">
        上一题
      </button>
      <button
        v-if="currentIndex < questions.length - 1"
        @click="nextQuestion"
        :style="mergedStyles"
      >
      <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">
        下一题
      </button>
      <button @click="resetQuestion" :style="mergedStyles">重做</button>
@@ -312,7 +304,7 @@
      return this.selectedOptions.map((index) => {
        const selectedOption = this.currentQuestion.options[index];
        // 返回选项的文本（这里假设每个选项对象有一个 'value' 属性）
        return selectedOption.value;
        return selectedOption.value.replace(/\s/g, ',');
      });
    },
    formatAnswer(answer) {
@@ -343,7 +335,6 @@
    },
    submitQuestion() {
      const isCorrectAnswer = this.isCorrectAnswer();
      console.log(isCorrectAnswer);
      this.isCorrect = this.isCorrectAnswer();
      this.showResult = true;
      this.choiceData.isCorrect = this.isCorrect;
@@ -354,6 +345,7 @@
        // 播放“答错了，加油哦”的音频
      }
      this.isSubmitted = true;
      // this.handleQuestion(0);
    },
    isCorrectAnswer() {
      // 检查答案是否正确
@@ -406,41 +398,115 @@
        return selectedValues.every((value) => correctSet.has(value));
      }
    },
    handleQuestion(data) {
      if (!this.showResult) return null;
      let flag = null
      const item = this.questions[this.currentIndex]
      let select = this.getSelectedOptions()
      select = Array.from(select)
      if (select.indexOf(data) > -1) {
        flag = item.answer.indexOf(data) > -1 ? true : false
      }
      // item.answer.some(citem =>{
      //   console.log(select.indexOf(citem)>-1 ? true: false)
      //   return select.indexOf(citem)>-1 ? true: false 
      // })
      // console.log(select.indexOf(data)>-1 ? true: false )
      // return select.indexOf(data)>-1 ? true: false 
      return flag
    }
  },
};
</script>

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

.all-options {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 250px;
  width: min-content;
}

/* 当屏幕宽度最大为600px时应用此样式 */
@media screen and (max-width: 420px) {
  .all-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

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

.option {
  position: relative;
  display: flex;
  flex-direction: row;
  //flex-wrap: nowrap;
  width: 170px;
  height: 250px;
  height: min-content;
}
// 这里是用来选中循环出来的某个盒子 2就代表第二个盒子
.option:nth-child(2) {
  //margin-top: 100px;
  align-self: flex-end;
  /* 使该元素在垂直方向上居下 */
}

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

.icon1 {
  position: absolute;
  z-index: 1;
  left: 60%;
  top: 3%;
  width: 50%;
  height: auto;
  min-width: 50px;
}

.icon2 {
  position: absolute;
  z-index: 1;
  left: 68%;
  top: 3%;
  width:30%;
  height: auto;
  min-width: 30px;
}

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

.option-text:nth-child(2) {
  top: 50%;
}

.option-text.selected {
  width: 180px;
  /* 当被选中时的样式 */
  color: white;
}
@@ -451,7 +517,7 @@

.btn-button {
  width: 70%;
  margin: 10px auto 0 auto;
  margin: 10px auto 10px auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
@@ -501,8 +567,19 @@
  /* 错误答案的字体颜色 */
}

.smiling-face{
  position: absolute;
  z-index: 1;
  bottom: 2% ;
  right: 0;
}
.face {
  width: 15%;
  width: 80%;
  height: auto;
}

.face-text {

  text-wrap: wrap;
}
</style>