From 2e2384bb96792ea5c87d7fd31f5ef493dcafef84 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期二, 25 六月 2024 17:26:52 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/components/choice/choice.vue | 853 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 453 insertions(+), 400 deletions(-)
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index ae0c421..6860268 100644
--- a/src/components/choice/choice.vue
+++ b/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;
}
+ // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎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));
- }
- },
- },
-};
+ },
+};
</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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1