| | |
|---|
| | | <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"> |
|---|
| | | <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> |
|---|
| | | 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">{{ option.value }}、{{ option.txt }}</span> |
|---|
| | | <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 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> |
|---|
| | | <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 |
|---|
| | | 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> |
|---|
| | |
|---|
| | | props: { |
|---|
| | | questions: { |
|---|
| | | type: Array, |
|---|
| | | required: true |
|---|
| | | required: true, |
|---|
| | | }, |
|---|
| | | primaryColor: { |
|---|
| | | type: String, |
|---|
| | |
|---|
| | | }, |
|---|
| | | hoverBackgroundColor: { |
|---|
| | | type: String, |
|---|
| | | default: 'rgb(245, 130, 32)' // 默认值 |
|---|
| | | default: "rgb(245, 130, 32)", // 默认值 |
|---|
| | | }, |
|---|
| | | hoverColor: { |
|---|
| | | type: String, |
|---|
| | | default: 'white' // 默认值 |
|---|
| | | } |
|---|
| | | default: "white", // 默认值 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | currentQuestion() { |
|---|
| | |
|---|
| | | }, |
|---|
| | | setHoverStyles() { |
|---|
| | | return { |
|---|
| | | '--hover-bg-color': this.hoverBackgroundColor, |
|---|
| | | '--hover-color': this.hoverColor |
|---|
| | | "--hover-bg-color": this.hoverBackgroundColor, |
|---|
| | | "--hover-color": this.hoverColor, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mergedStyles() { |
|---|
| | | // 合并直接样式和计算属性样式 |
|---|
| | | return { |
|---|
| | | borderColor: this.primaryColor, |
|---|
| | | ...this.setHoverStyles |
|---|
| | | ...this.setHoverStyles, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | toggleOption(index) { |
|---|
| | | if (this.currentQuestion.type === 'single') { |
|---|
| | | if (this.currentQuestion.type === "single") { |
|---|
| | | this.selectedOptions = [index]; // 单选时只选中一个 |
|---|
| | | } else { |
|---|
| | | // 多选时切换选中状态 |
|---|
| | | console.log(this.selectedOptions, index) |
|---|
| | | console.log(this.selectedOptions, index); |
|---|
| | | const isAlreadySelected = this.selectedOptions.includes(index); |
|---|
| | | if (isAlreadySelected) { |
|---|
| | | this.selectedOptions = this.selectedOptions.filter(i => i !== index); |
|---|
| | | 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 => { |
|---|
| | | 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.join(", "); |
|---|
| | | } |
|---|
| | | return answer; |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | submitQuestion() { |
|---|
| | | const isCorrectAnswer = this.isCorrectAnswer(); |
|---|
| | | console.log(isCorrectAnswer) |
|---|
| | | console.log(isCorrectAnswer); |
|---|
| | | this.isCorrect = this.isCorrectAnswer(); |
|---|
| | | this.showResult = true; |
|---|
| | | this.choiceData.isCorrect = this.isCorrect; |
|---|
| | |
|---|
| | | }, |
|---|
| | | isCorrectAnswer() { |
|---|
| | | // 检查答案是否正确 |
|---|
| | | if (this.currentQuestion.type === 'single') { |
|---|
| | | return this.selectedOptions.length === 1 && this.selectedOptions[0] === this.currentQuestion.answer; |
|---|
| | | } else if (this.currentQuestion.type === 'sort') { |
|---|
| | | 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; |
|---|
| | |
|---|
| | | // alert('您选择的选项数量不正确！'); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | return selectedValues.every(value => correctSet.has(value)); |
|---|
| | | return selectedValues.every((value) => correctSet.has(value)); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | |
|---|
| | | /* 使用 Flexbox 以便更好地控制布局和对齐 */ |
|---|
| | | align-items: center; |
|---|
| | | /* 垂直居中对齐 */ |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon { |
|---|
