<template>
|
<div>
|
<div class="subject-content">
|
<div class="subject-title">
|
{{ index }}
|
<span class="subject-title-content" v-html="subjectInfo.subjectName" />
|
<span class="subject-title-content titlesss">
|
( 单选题 <span
|
v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
|
> {{ subjectInfo.score }}分 </span
|
>)
|
</span>
|
</div>
|
|
<ul
|
class="subject-options"
|
id="subjectOptions"
|
v-for="option in options"
|
:key="option.id"
|
>
|
<li class="subject-option">
|
<input
|
:disabled="currentAnswer"
|
class="toggle"
|
type="checkbox"
|
:checked="userAnswer === option.optionName"
|
:id="'option' + option.id"
|
@change="toggleOption(option)"
|
/>
|
<label :for="'option' + option.id">
|
<span class="subject-option-prefix"
|
>{{ option.optionName + "." }} </span
|
>
|
<span v-html="option.optionContent" class="subject-option-prefix" />
|
</label>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "Choices",
|
data() {
|
return {
|
subjectCount: 0,
|
subjectInfo: {
|
subjectName: "",
|
score: 0,
|
},
|
options: [],
|
userAnswer: "",
|
index: "",
|
currentAnswer: false,
|
};
|
},
|
methods: {
|
getAnswer() {
|
return this.userAnswer;
|
},
|
setAnswer(answer) {
|
this.userAnswer = answer;
|
},
|
setSubjectInfo(subject, subjectCount, index) {
|
this.currentAnswer = false;
|
this.subjectCount = subjectCount;
|
this.subjectInfo = subject;
|
if (subject.hasOwnProperty("examSubjectOptions")) {
|
this.options = subject.examSubjectOptions;
|
|
// console.log(this.options)
|
}
|
if (subject.hasOwnProperty("answer")) {
|
if (subject.answer) {
|
this.currentAnswer = true;
|
}
|
this.setAnswer(subject.answer);
|
}
|
this.index = index + ".";
|
|
// console.log(subject, subjectCount, index, this.options, 5656565656)
|
},
|
getSubjectInfo() {
|
this.subjectInfo.options = this.options;
|
return this.subjectInfo;
|
},
|
// 选中选项
|
toggleOption(option) {
|
this.userAnswer = option.optionName;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../assets/css/subject.scss";
|
.subject-options > li label {
|
line-height: 36px !important;
|
}
|
</style>
|