| | |
| | | <template> |
| | | <div class="answer-container w-full h-full"> |
| | | <el-scrollbar> |
| | | <ExamInfo class="mb-5"></ExamInfo> |
| | | <ExamInfo class="mb-5" :questionIndex="currentIndex" :activeQuestion="activeQuestion"></ExamInfo> |
| | | |
| | | <div class="answer-content"> |
| | | <div class="answer-item flex" v-for="item, index in examInfo.answerList" @click="answerClick(item)" |
| | | <div class="answer-item flex" v-for="item, index in activeQuestion.questionItemList" @click="answerClick(item)" |
| | | :class="answerState(item)"> |
| | | <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.type }}</div> |
| | | <div class="answer-text text-gray-700">{{ item.text }}</div> |
| | | <div class="answer-icon flex flex-col justify-center items-center flex-shrink-0">{{ item.prefix }}</div> |
| | | <div class="answer-text text-gray-700">{{ item.content }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import ExamInfo from '@/components/ExamInfo/index.vue'; |
| | | import { useExamStore } from '@/store/index.js'; |
| | | |
| | | const examInfo = ref({ |
| | | qId: 1, |
| | | answerList: [ |
| | | { |
| | | type: 'A', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | { |
| | | type: 'B', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | { |
| | | type: 'C', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | { |
| | | type: 'D', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | { |
| | | type: 'E', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | { |
| | | type: 'F', |
| | | text: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试', |
| | | isActive: false |
| | | }, |
| | | ] |
| | | }); |
| | | const examStore = useExamStore(); |
| | | |
| | | const activeIndex = ref(null); |
| | | const { currentType, currentIndex } = storeToRefs(examStore); |
| | | |
| | | const activeQuestion = ref(examStore.getActiveQuestion); |
| | | |
| | | const answerClick = (item) => { |
| | | if(item) { |
| | | resetAnswer(); |
| | | item.isActive = true |
| | | if (item) { |
| | | // resetAnswer(); |
| | | item.isActive = !item.isActive; |
| | | const answerList = filterAnswer(); |
| | | examStore.setQuestionAnswer(currentType.value, currentIndex.value, answerList.join(',')); |
| | | |
| | | } |
| | | }; |
| | | |
| | |
| | | return { |
| | | active: item.isActive |
| | | }; |
| | | }; |
| | | |
| | | const filterAnswer = () => { |
| | | return activeQuestion.value.questionItemList.filter(item => item.isActive); |
| | | } |
| | | |
| | | const resetAnswer = () => { |
| | | examInfo.value.answerList.forEach(item => item.isActive = false); |
| | | } |
| | | |
| | | </script> |
| | | |
| | |
| | | |
| | | .active { |
| | | border-color: #409EFF !important; |
| | | |
| | | .answer-icon { |
| | | color: #ffffff !important; |
| | | border-color: #409EFF !important; |