<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"
|
v-for="(option, index) in options"
|
:key="option.id"
|
>
|
<li class="subject-option pbox">
|
<span class="num" @click="selectCheckbox($event, option)">
|
{{ userAnswer[index].value }}
|
</span>
|
|
<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: "MultipleChoices",
|
data() {
|
return {
|
subjectCount: 0,
|
subjectInfo: {
|
subjectName: "",
|
score: 0,
|
},
|
options: [],
|
userAnswer: [],
|
index: "",
|
};
|
},
|
watch: {},
|
methods: {
|
getAnswer() {
|
return this.userAnswer;
|
},
|
setAnswer(answer, option) {
|
// console.log(answer);
|
if (answer != "") {
|
this.userAnswer = answer;
|
} else {
|
this.userAnswer = [];
|
option.forEach((item) => {
|
this.userAnswer.push({ key: item.optionName, value: "" });
|
});
|
}
|
},
|
setSubjectInfo(subject, subjectCount, index) {
|
this.subjectCount = subjectCount;
|
this.subjectInfo = subject;
|
if (subject.hasOwnProperty("examSubjectOptions")) {
|
this.options = subject.examSubjectOptions;
|
}
|
if (subject.hasOwnProperty("answer")) {
|
this.setAnswer(subject.answer, subject.examSubjectOptions);
|
}
|
this.index = index + ".";
|
},
|
getSubjectInfo() {
|
this.subjectInfo.options = this.options;
|
return this.subjectInfo;
|
},
|
|
selectCheckbox($event, option) {
|
var flag = false;
|
|
this.userAnswer.forEach((item) => {
|
if (item.value != "") {
|
flag = true;
|
}
|
});
|
|
this.userAnswer;
|
|
if (flag == true) {
|
// 其中最少有一个有值的
|
var onlyFlag = false;
|
var onlyValue = "";
|
var ind = 0;
|
this.userAnswer.forEach((item) => {
|
if (item.value != "" && item.value > ind) {
|
ind = item.value;
|
}
|
});
|
|
this.userAnswer.forEach((item) => {
|
if (item.key == option.optionName) {
|
if (item.value != "") {
|
onlyValue = item.value;
|
onlyFlag = true;
|
item.value = "";
|
} else {
|
item.value = ind + 1;
|
}
|
}
|
});
|
|
this.userAnswer.forEach((item) => {
|
if (onlyFlag == true) {
|
if (item.value > onlyValue) {
|
item.value -= 1;
|
}
|
}
|
});
|
} else {
|
// 全部都为空
|
this.userAnswer.forEach((item) => {
|
if (item.key == option.optionName) {
|
item.value = 1;
|
}
|
});
|
}
|
|
// console.log(this.userAnswer, 123);
|
for (var k in this.userAnswer) {
|
// console.log(this.userAnswer[k]);
|
}
|
},
|
|
isChecked(optionName) {
|
return this.userAnswer.includes(optionName);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../../assets/css/subject.scss";
|
|
.pbox .num {
|
// margin: 2px;
|
// text-align: center;
|
// vertical-align: middle;
|
// display: inline-block;
|
// width: 20px;
|
// height: 20px;
|
// border: 1px solid #999;
|
width: 26px;
|
height: 26px;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
margin: auto 0;
|
// opacity: 0;
|
text-align: center;
|
font-size: 18px;
|
font-weight: bold;
|
border: 1px solid #cfcfcf;
|
background-color: #ff9;
|
cursor: pointer;
|
}
|
|
.subject-options > li label {
|
line-height: 36px !important;
|
}
|
.pbox.checked {
|
border: 1px solid #99f;
|
background-color: #ccf;
|
}
|
.pbox.checked .num {
|
border: 1px solid #ff0;
|
background-color: #ff9;
|
}
|
</style>
|
