|
|
@@ -1,12 +1,13 @@
|
|
|
<template>
|
|
|
- <scroll-view scroll-y class="question-item">
|
|
|
- <view class="h-20"></view>
|
|
|
- <view class="question-type">{{ questionTypeDesc[question.typeId as EnumQuestionType] }}</view>
|
|
|
- <view class="question-content">
|
|
|
- <uv-parse :content="question.title"></uv-parse>
|
|
|
- </view>
|
|
|
- <view class="question-options">
|
|
|
- <view v-if="question.subQuestions.length === 0">
|
|
|
+ <view class="question-item">
|
|
|
+ <view class="is-main-question">
|
|
|
+ <view v-if="question.typeId && !isSubQuestion" class="question-type">
|
|
|
+ {{ questionTypeDesc[question.typeId as EnumQuestionType] }}
|
|
|
+ </view>
|
|
|
+ <view class="question-content" :class="{ 'mt-30': isSubQuestion }">
|
|
|
+ <uv-parse :content="getQuestionTitle"></uv-parse>
|
|
|
+ </view>
|
|
|
+ <view class="question-options">
|
|
|
<view class="question-option" v-for="option in question.options"
|
|
|
:class="{ 'question-option-selected': isSelected(option) }" :key="option.id" @click="handleSelect(option)">
|
|
|
<view class="question-option-index">{{ option.no }}</view>
|
|
|
@@ -14,20 +15,21 @@
|
|
|
<uv-parse :content="option.name"></uv-parse>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="question-option" :class="{ 'question-option-not-know': question.isNotKnow }"
|
|
|
- @click="handleNotKnow">
|
|
|
+ <view v-if="question.options.length" class="question-option"
|
|
|
+ :class="{ 'question-option-not-know': question.isNotKnow }" @click="handleNotKnow">
|
|
|
<view class="question-option-index">
|
|
|
<uv-icon name="info-circle" :color="question.isNotKnow ? '#31A0FC' : '#999'" size="18" />
|
|
|
</view>
|
|
|
<view class="question-option-content text-fore-light">不会</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-else class="">
|
|
|
- <question-item :question="subQuestion" v-for="subQuestion in question.subQuestions" :key="subQuestion.id" />
|
|
|
- </view>
|
|
|
</view>
|
|
|
- <view class="h-20"></view>
|
|
|
- </scroll-view>
|
|
|
+ <view v-if="question.subQuestions.length" class="is-sub-question">
|
|
|
+ <question-item :question="subQuestion" v-for="subQuestion in question.subQuestions" :key="subQuestion.id"
|
|
|
+ :is-sub-question="true" @update:question="emit('update:question', $event)" @select="handleSelectOption"
|
|
|
+ @notKnow="handleSelectNotKnow" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
@@ -38,6 +40,7 @@ import { NEXT_QUESTION, PREV_QUESTION, NEXT_QUESTION_QUICKLY, PREV_QUESTION_QUIC
|
|
|
const { questionTypeDesc } = useExam();
|
|
|
const props = defineProps<{
|
|
|
question: Study.Question;
|
|
|
+ isSubQuestion?: boolean;
|
|
|
}>();
|
|
|
const nextQuestion = inject(NEXT_QUESTION);
|
|
|
const prevQuestion = inject(PREV_QUESTION);
|
|
|
@@ -45,15 +48,28 @@ const nextQuestionQuickly = inject(NEXT_QUESTION_QUICKLY);
|
|
|
const prevQuestionQuickly = inject(PREV_QUESTION_QUICKLY);
|
|
|
const emit = defineEmits<{
|
|
|
(e: 'update:question', question: Study.Question): void;
|
|
|
+ (e: 'select', question: Study.Question): void;
|
|
|
+ (e: 'notKnow', question: Study.Question): void;
|
|
|
}>();
|
|
|
+const getQuestionTitle = computed(() => {
|
|
|
+ if (props.isSubQuestion) {
|
|
|
+ return `[${questionTypeDesc[props.question.typeId as EnumQuestionType]}] ${props.question.title}`;
|
|
|
+ }
|
|
|
+ return props.question.title;
|
|
|
+});
|
|
|
+
|
|
|
const handleNotKnow = () => {
|
|
|
// console.log('handleNotKnow')
|
|
|
+ props.question.answers = [];
|
|
|
props.question.isNotKnow = !props.question.isNotKnow;
|
|
|
+ checkIsDone();
|
|
|
emit('update:question', props.question);
|
|
|
- nextQuestion?.();
|
|
|
+ // emit('notKnow', props.question);
|
|
|
+ // nextQuestion?.();
|
|
|
+ handleSelectNotKnow();
|
|
|
}
|
|
|
const handleSelect = (option: Study.QuestionOption) => {
|
|
|
- // console.log('handleSelect', option)
|
|
|
+ // console.log('handleSelect', isDone.value)
|
|
|
if ([
|
|
|
EnumQuestionType.JUDGMENT,
|
|
|
EnumQuestionType.SINGLE_CHOICE,
|
|
|
@@ -63,8 +79,8 @@ const handleSelect = (option: Study.QuestionOption) => {
|
|
|
EnumQuestionType.ANALYSIS
|
|
|
].includes(props.question.typeId)) {
|
|
|
props.question.answers = [option.no];
|
|
|
- // props.question.answers.push(option.no);
|
|
|
- nextQuestion?.();
|
|
|
+ // nextQuestion?.();
|
|
|
+
|
|
|
} else if (props.question.typeId === EnumQuestionType.MULTIPLE_CHOICE) {
|
|
|
if (props.question.answers.includes(option.no)) {
|
|
|
props.question.answers = props.question.answers.filter(item => item !== option.no);
|
|
|
@@ -72,9 +88,34 @@ const handleSelect = (option: Study.QuestionOption) => {
|
|
|
props.question.answers.push(option.no);
|
|
|
}
|
|
|
}
|
|
|
+ props.question.isNotKnow = false;
|
|
|
+ checkIsDone();
|
|
|
emit('update:question', props.question);
|
|
|
+
|
|
|
// props.question.answer = option.no;
|
|
|
+ if (props.isSubQuestion) {
|
|
|
+ emit('select', props.question);
|
|
|
+ } else {
|
|
|
+ handleSelectOption();
|
|
|
+ }
|
|
|
+}
|
|
|
+const checkIsDone = () => {
|
|
|
+ if (props.question.subQuestions.length > 0) {
|
|
|
+ props.question.isDone = props.question.subQuestions.every(q => q.answers.length > 0 || q.isNotKnow);
|
|
|
+ }
|
|
|
+ props.question.isDone = props.question.answers.length > 0 || props.question.isNotKnow;
|
|
|
+}
|
|
|
+const handleSelectOption = () => {
|
|
|
+ if (props.question.isDone) {
|
|
|
+ nextQuestion?.();
|
|
|
+ }
|
|
|
}
|
|
|
+const handleSelectNotKnow = () => {
|
|
|
+ if (props.question.isDone) {
|
|
|
+ nextQuestion?.();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const isSelected = (option: Study.QuestionOption) => {
|
|
|
const { typeId, answers } = props.question;
|
|
|
if ([
|
|
|
@@ -94,19 +135,36 @@ const isSelected = (option: Study.QuestionOption) => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.question-item {
|
|
|
- @apply h-full box-border;
|
|
|
+.is-sub-question {
|
|
|
+ @apply px-0;
|
|
|
+
|
|
|
+ .question-options {
|
|
|
+ @apply mt-0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.is-main-question {
|
|
|
+ @apply px-40;
|
|
|
+
|
|
|
+ >.question-options {
|
|
|
+ @apply mt-40;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.question-item {
|
|
|
.question-type {
|
|
|
- @apply px-40 my-20 text-32 text-fore-subtitle font-bold;
|
|
|
+ @apply my-20 text-32 text-fore-subtitle font-bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-question-type {
|
|
|
+ @apply text-28 text-fore-light font-bold;
|
|
|
}
|
|
|
|
|
|
.question-content {
|
|
|
- @apply px-40 mt-20 text-32 text-fore-title;
|
|
|
+ @apply text-32 text-fore-title;
|
|
|
}
|
|
|
|
|
|
.question-options {
|
|
|
- @apply mt-40 px-40;
|
|
|
|
|
|
.question-option {
|
|
|
@apply flex items-center px-30 py-30 bg-back rounded-10;
|