From 0a945a92ee0c133a6d7b71b35a705d9764d94f3b Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 11 七月 2024 10:57:05 +0800
Subject: [PATCH] 英语（第一单元题集）
---
src/components/choice/choice.vue | 926 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 530 insertions(+), 396 deletions(-)
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index ae0c421..711d7aa 100644
--- a/src/components/choice/choice.vue
+++ b/src/components/choice/choice.vue
@@ -1,455 +1,589 @@
<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 class="choice-question">
+ <!-- 棰樼洰鍐呭鍙婇�夐」閮ㄥ垎 -->
+ <div style="display: flex; flex-direction: column;">
+ <div class="question-t">
+ <span style="display: flex; "><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</span>
+ <span>绗瑊{ currentQuestion.id }}棰� (鍏眥{ questions.length}}棰�)</span>
+ </div>
+ <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)">
+ <!-- 绌哄績浜戞湹 -->
+ <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="130" 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="130"
+ 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>
+ <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" @click="(e)=>{
+ e.preventDefault()
+ }"
+ :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 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 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>
+
</div>
+ <div v-if="showResult">
+ <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.replace(/\s/g, ',');
+ });
+ },
+ 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();
+ this.isCorrect = this.isCorrectAnswer();
+ this.showResult = true;
+ this.choiceData.isCorrect = this.isCorrect;
+ // 鎾斁闊抽鐨勯�昏緫锛堝鏋滈渶瑕侊級
+ if (isCorrectAnswer) {
+ // 鎾斁鈥滄伃鍠滀綘锛岀瓟瀵逛簡鈥濈殑闊抽
+ } else {
+ // 鎾斁鈥滅瓟閿欎簡锛屽姞娌瑰摝鈥濈殑闊抽
+ }
+ this.isSubmitted = true;
+ // this.handleQuestion(0);
+ },
+ 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;
}
+ // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse
+ if (selectedValues.length !== correctAnswers.length) {
+ // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
+ // alert('鎮ㄩ�夋嫨鐨勯�夐」鏁伴噺涓嶆纭紒');
+ return false;
+ }
+ // 浣跨敤JSON.stringify灏嗘暟缁勮浆鎹负瀛楃涓诧紝鐒跺悗姣旇緝瀛楃涓叉槸鍚︾浉绛�
+ // 娉ㄦ剰锛氳繖绉嶆柟娉曞彧閫傜敤浜庢暟缁勫厓绱犻兘鏄熀鏈被鍨嬶紙濡傚瓧绗︿覆銆佹暟瀛楋級鐨勬儏鍐�
+ // 濡傛灉鏁扮粍鍖呭惈瀵硅薄鎴栧鏉傜殑鏁版嵁缁撴瀯锛屽彲鑳介渶瑕佷娇鐢ㄦ洿澶嶆潅鐨勬瘮杈冩柟娉�
+ if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
+ // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
+ // alert('鎮ㄩ�夋嫨鐨勯�夐」涓嶆纭紒');
+ return false;
+ }
+ // 濡傛灉浠ヤ笂鎵�鏈夋潯浠堕兘閫氳繃锛岄偅涔堝彲浠ヨ涓洪�夋嫨鏄纭殑
+ return true;
+ } else {
+ // 瀵逛簬澶氶�夛紝闇�瑕佹瘮杈冧袱涓暟缁勬槸鍚︾浉绛夛紙鎴栧寘鍚浉鍚屽厓绱狅紝鍏蜂綋鍙栧喅浜庨渶姹傦級
+ // 杩欓噷闇�瑕佸皢鐢ㄦ埛閫夋嫨鐨勭储寮曡浆鍖栦负鍏蜂綋鐨剉alue鍊�
+ const selectedValues = this.getSelectedOptions();
+ const correctSet = new Set(this.currentQuestion.answer);
+ // 濡傛灉selectedValues涓虹┖鏁扮粍锛屽垯鐩存帴杩斿洖false锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
+ if (selectedValues.length === 0) {
+ // alert('鎮ㄨ繕鏈�夋嫨浠讳綍閫夐」锛�')
+ return false;
+ }
+ // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
+ 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;
- }
- // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse
- if (selectedValues.length !== correctAnswers.length) {
- // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
- // alert('鎮ㄩ�夋嫨鐨勯�夐」鏁伴噺涓嶆纭紒');
- return false;
- }
- // 浣跨敤JSON.stringify灏嗘暟缁勮浆鎹负瀛楃涓诧紝鐒跺悗姣旇緝瀛楃涓叉槸鍚︾浉绛�
- // 娉ㄦ剰锛氳繖绉嶆柟娉曞彧閫傜敤浜庢暟缁勫厓绱犻兘鏄熀鏈被鍨嬶紙濡傚瓧绗︿覆銆佹暟瀛楋級鐨勬儏鍐�
- // 濡傛灉鏁扮粍鍖呭惈瀵硅薄鎴栧鏉傜殑鏁版嵁缁撴瀯锛屽彲鑳介渶瑕佷娇鐢ㄦ洿澶嶆潅鐨勬瘮杈冩柟娉�
- if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
- // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
- // alert('鎮ㄩ�夋嫨鐨勯�夐」涓嶆纭紒');
- return false;
- }
- // 濡傛灉浠ヤ笂鎵�鏈夋潯浠堕兘閫氳繃锛岄偅涔堝彲浠ヨ涓洪�夋嫨鏄纭殑
- return true;
- } else {
- // 瀵逛簬澶氶�夛紝闇�瑕佹瘮杈冧袱涓暟缁勬槸鍚︾浉绛夛紙鎴栧寘鍚浉鍚屽厓绱狅紝鍏蜂綋鍙栧喅浜庨渶姹傦級
- // 杩欓噷闇�瑕佸皢鐢ㄦ埛閫夋嫨鐨勭储寮曡浆鍖栦负鍏蜂綋鐨剉alue鍊�
- const selectedValues = this.getSelectedOptions();
- const correctSet = new Set(this.currentQuestion.answer);
- // 濡傛灉selectedValues涓虹┖鏁扮粍锛屽垯鐩存帴杩斿洖false锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
- if (selectedValues.length === 0) {
- // alert('鎮ㄨ繕鏈�夋嫨浠讳綍閫夐」锛�')
- return false;
- }
- // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
- if (selectedValues.length !== correctSet.size) {
- // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
- // alert('鎮ㄩ�夋嫨鐨勯�夐」鏁伴噺涓嶆纭紒');
- return false;
- }
- 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>
+.question-t {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ margin-top: 10px;
+}
+
.all-options {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ min-height: 250px;
+ width: min-content;
+}
+
+/* 褰撳睆骞曞搴︽渶澶т负600px鏃跺簲鐢ㄦ鏍峰紡 */
+@media screen and (max-width: 430px) {
+ .all-options {
display: flex;
- justify-content: space-between;
- margin-left: 10%;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+ }
+
+ .option {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ height: min-content;
+ }
}
.option {
- position: relative;
- /* 璁剧疆涓虹浉瀵瑰畾浣嶅鍣� */
- display: flex;
- flex-wrap: wrap;
- /* 浣跨敤 Flexbox 浠ヤ究鏇村ソ鍦版帶鍒跺竷灞�鍜屽榻� */
- align-items: center;
- /* 鍨傜洿灞呬腑瀵归綈 */
-
-
+ 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%;
- height: auto;
- min-width: 120px;
+ 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%;
+ position: absolute;
+ z-index: 1;
+ left: 14%;
+ top: 47%;
+}
+
+.option-text:nth-child(2) {
+ top: 50%;
}
.option-text.selected {
- /* 褰撹閫変腑鏃剁殑鏍峰紡 */
- color: white;
+ width: 180px;
+ /* 褰撹閫変腑鏃剁殑鏍峰紡 */
+ 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 10px 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;
+ 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);
+ // 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;
+.smiling-face{
+ position: absolute;
+ z-index: 1;
+ bottom: -2% ;
+ right: 4%;
}
-</style>
\ No newline at end of file
+.face {
+ width: 80%;
+ height: auto;
+}
+
+.face-text {
+ text-wrap: nowrap;
+}
+</style>
--
Gitblit v1.9.1