<template>
|
<div class="option-content">
|
<div class="option-show" >
|
<el-radio-group style="margin: 20px;"
|
v-model="mobilequestion.paper[mobilequestion.questionIndex].userAnswer"
|
v-if="mobilequestion.type == '单选题'" @change="singleChange">
|
<el-radio
|
v-for="(item, index) in mobilequestion.paper[mobilequestion.questionIndex].options.sort((a, b) => a.sequenceno - b.sequenceno)"
|
:label="item.qkey" size="large">
|
<template #default>
|
<div class="radio-div">
|
<span>{{ item.qkey }}</span>
|
<WangEditorShow :content="item.qvalue" />
|
<!-- <div v-html="item.qvalue" class="radio-content"></div> -->
|
</div>
|
</template>
|
</el-radio>
|
</el-radio-group>
|
<el-radio-group style="margin: 20px; display: inline-block;"
|
v-model="mobilequestion.paper[mobilequestion.questionIndex].userAnswer"
|
v-if="mobilequestion.type == '判断题'" @change="judgeChange">
|
<el-radio label="T" size="large">正确</el-radio>
|
<el-radio style="margin-left: 20px;" label="F" size="large">错误</el-radio>
|
</el-radio-group>
|
<el-checkbox-group style="margin: 20px;"
|
v-model="mobilequestion.paper[mobilequestion.questionIndex].userAnswer"
|
v-if="mobilequestion.type == '多选题'" @change="multipleChange">
|
<el-checkbox
|
v-for="(item, index) in mobilequestion.paper[mobilequestion.questionIndex].options.sort((a, b) => a.sequenceno - b.sequenceno)"
|
:label="item.qkey" size="large">
|
<template #default>
|
<div class="radio-div">
|
<span>{{ item.qkey }}</span>
|
<WangEditorShow :content="item.qvalue" />
|
</div>
|
</template>
|
</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import { getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, ref } from "vue";
|
import { useBasicInfoStore } from "../../../store/basicInfo"
|
import { useMobileQurstionStore } from "../../../store/mobilequestion"
|
import WangEditorShow from './wangeditorshow.vue';
|
|
|
export default {
|
name: "option",
|
components: { WangEditorShow },
|
setup() {
|
let { proxy } = getCurrentInstance();
|
const useStore = useBasicInfoStore()
|
const mobilequestion = useMobileQurstionStore()
|
const state = reactive({
|
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
|
const Init = () => {
|
};
|
|
const singleChange = (val) => {
|
mobilequestion.paper[mobilequestion.questionIndex].userAnswer = val
|
if (val == mobilequestion.paper[mobilequestion.questionIndex].answers[0].qkey) {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "true"
|
} else {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "false"
|
}
|
}
|
|
const judgeChange = (val) => {
|
mobilequestion.paper[mobilequestion.questionIndex].userAnswer = val
|
if (val == mobilequestion.paper[mobilequestion.questionIndex].answers[0].qkey) {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "true"
|
} else {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "false"
|
}
|
}
|
|
const multipleChange = (val) => {
|
mobilequestion.paper[mobilequestion.questionIndex].userAnswer = val.sort()
|
let answerArr = []
|
let answerKey = mobilequestion.paper[mobilequestion.questionIndex].answers.sort((a, b) => a.sequenceno - b.sequenceno)
|
for (let i = 0; i < answerKey.length; i++) {
|
answerArr.push(answerKey[i].qkey)
|
}
|
if (JSON.stringify(answerArr) == JSON.stringify(val.sort())) {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "true"
|
} else {
|
mobilequestion.paper[mobilequestion.questionIndex].userStatus = "false"
|
}
|
}
|
|
|
return {
|
...toRefs(state),
|
icon,
|
mobilequestion,
|
singleChange,
|
judgeChange,
|
multipleChange
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//justify-content: center;
|
}
|
|
.option-content {
|
@extend .center;
|
background-color: #f5f5f5;
|
overflow: auto;
|
width: 100%;
|
}
|
|
.option-show {
|
width: 95vw;
|
// height: 300px;
|
overflow: auto;
|
border-radius: 10px;
|
background-color: #fff;
|
|
//padding: 30px;
|
::v-deep .el-radio-group {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
}
|
|
::v-deep .el-radio.el-radio--large {
|
height: auto;
|
margin: 0px;
|
}
|
|
::v-deep .el-checkbox-group {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
margin: 10px;
|
}
|
|
::v-deep .el-checkbox.el-checkbox--large {
|
height: auto;
|
margin: 0px;
|
}
|
}
|
|
.radio-div {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
|
.radio-content {
|
// text-overflow: ellipsis;
|
white-space: normal;
|
line-height: 18px;
|
// vertical-align: middle;
|
// display: inline-block;
|
margin-left: 10px;
|
}
|
</style>
|
