<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>
|
</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,
|
};
|
},
|
props: {
|
questions: {
|
type: Array,
|
required: true
|
},
|
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);
|
}
|
|
}
|
},
|
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%;
|
}
|
|
.option {
|
position: relative;
|
/* 设置为相对定位容器 */
|
display: flex;
|
flex-wrap: wrap;
|
/* 使用 Flexbox 以便更好地控制布局和对齐 */
|
align-items: center;
|
/* 垂直居中对齐 */
|
|
|
}
|
|
.icon {
|
width: 80%;
|
height: auto;
|
min-width: 120px;
|
}
|
|
.option-text {
|
position: absolute;
|
z-index: 1;
|
left: 10%;
|
top: 52%;
|
}
|
|
.option-text.selected {
|
/* 当被选中时的样式 */
|
color: white;
|
}
|
|
.cloud-icon {
|
fill: rgb(245, 130, 32);
|
}
|
|
.btn-button {
|
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: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;
|
}
|
|
.key {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.right-key {
|
color: green;
|
}
|
|
.correct-answer {
|
color: green;
|
/* 正确答案的字体颜色 */
|
}
|
|
.incorrect-answer {
|
color: red;
|
/* 错误答案的字体颜色 */
|
}
|
|
.face {
|
width: 15%;
|
height: auto;
|
}
|
</style>
|
