|
|
@@ -3,20 +3,20 @@
|
|
|
<view class="text-30 text-fore-title font-bold">答题情况</view>
|
|
|
<view class="mt-20 flex items-center">
|
|
|
<view class="flex-1 text-center">
|
|
|
- <view class="text-40 text-fore-title font-bold">100</view>
|
|
|
- <view class="mt-5 text-28 text-fore-light">总题量</view>
|
|
|
+ <view class="text-40 text-fore-title font-bold">{{ questionList.length }}</view>
|
|
|
+ <view class="mt-5 text-28 text-fore-light">题量</view>
|
|
|
</view>
|
|
|
<view class="flex-1 text-center">
|
|
|
- <view class="text-40 text-fore-title font-bold">68</view>
|
|
|
- <view class="mt-5 text-28 text-fore-light">答对</view>
|
|
|
+ <view class="text-40 text-fore-title font-bold">{{ paperInfo.score }}</view>
|
|
|
+ <view class="mt-5 text-28 text-fore-light">总分</view>
|
|
|
</view>
|
|
|
<view class="flex-1 text-center">
|
|
|
- <view class="text-40 text-fore-title font-bold">68</view>
|
|
|
- <view class="mt-5 text-28 text-fore-light">答对</view>
|
|
|
+ <view class="text-40 text-fore-title font-bold">{{ getScore }}</view>
|
|
|
+ <view class="mt-5 text-28 text-fore-light">得分</view>
|
|
|
</view>
|
|
|
<view class="flex-1 text-center">
|
|
|
- <view class="text-40 text-fore-title font-bold">68</view>
|
|
|
- <view class="mt-5 text-28 text-fore-light">答对</view>
|
|
|
+ <view class="text-40 text-fore-title font-bold">{{ rightRate }}%</view>
|
|
|
+ <view class="mt-5 text-28 text-fore-light">正确率</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="h-1 bg-[#E6E6E6] my-20"></view>
|
|
|
@@ -29,14 +29,55 @@
|
|
|
<view class="text-20 text-fore-subtitle">答错</view>
|
|
|
</view>
|
|
|
<view class="mt-20 grid grid-cols-5 gap-x-10 gap-y-30 place-items-center">
|
|
|
- <view class="question-item" v-for="(item, index) in list" :key="item.id"
|
|
|
- :class="item.type === 0 ? 'unanswered' : item.type === 1 ? 'correct' : 'incorrect'">
|
|
|
+ <view class="question-item" v-for="(item, index) in questionList" :key="item.id"
|
|
|
+ :class="[item.isNotAnswer ? 'is-unanswered' : (item.isRight ? 'is-correct' : 'is-incorrect')]">
|
|
|
<view class="text-36 font-bold">{{ index + 1 }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
+import { EnumQuestionType } from '@/common/enum';
|
|
|
+import { Study } from '@/types';
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ data: Study.Examinee;
|
|
|
+}>();
|
|
|
+const paperInfo = computed(() => {
|
|
|
+ return props.data.paperInfo || {};
|
|
|
+});
|
|
|
+const rightTotal = computed(() => {
|
|
|
+ return questionList.value.filter(item => item.isRight).length;
|
|
|
+});
|
|
|
+const rightRate = computed(() => {
|
|
|
+ const { totalCount = 0, wrongCount = 0 } = props.data;
|
|
|
+ return Math.round((totalCount - wrongCount) / totalCount * 100) || 0;
|
|
|
+});
|
|
|
+const getScore = computed(() => {
|
|
|
+ return questionList.value.reduce((sum, item) => {
|
|
|
+ return sum + item.score || 0;
|
|
|
+ }, 0);
|
|
|
+})
|
|
|
+const wrongTotal = computed(() => {
|
|
|
+ return questionList.value.filter(item => !item.isRight).length;
|
|
|
+});
|
|
|
+const questionList = computed(() => {
|
|
|
+ return (props.data.questions || []).map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ isRight: judgeCorrect(item),
|
|
|
+ isNotAnswer: !item.answers.filter(item => item !== ' ').length
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+const judgeCorrect = (qs: Study.ExamineeQuestion) => {
|
|
|
+ if (qs.typeId === EnumQuestionType.SINGLE_CHOICE) {
|
|
|
+ return qs.answers.includes(qs.answer1);
|
|
|
+ } else if (qs.typeId === EnumQuestionType.MULTIPLE_CHOICE) {
|
|
|
+ const rightAnswers = qs.answer1.split('').filter(item => item !== ' ');
|
|
|
+ return rightAnswers.length === qs.answers.length && rightAnswers.every(item => qs.answers.includes(item));
|
|
|
+ }
|
|
|
+}
|
|
|
type QuestionItem = {
|
|
|
id: number;
|
|
|
type: number;
|
|
|
@@ -57,17 +98,17 @@ for (let i = 0; i < 100; i++) {
|
|
|
@apply w-80 h-80 rounded-full overflow-hidden flex items-center justify-center text-20 text-fore-subtitle;
|
|
|
}
|
|
|
|
|
|
-.unanswered {
|
|
|
+.is-unanswered {
|
|
|
background: #EEF4FA;
|
|
|
color: #B3B3B3;
|
|
|
}
|
|
|
|
|
|
-.correct {
|
|
|
+.is-correct {
|
|
|
background: #E7FCF8;
|
|
|
color: #2CC6A0;
|
|
|
}
|
|
|
|
|
|
-.incorrect {
|
|
|
+.is-incorrect {
|
|
|
background: #FEEDE9;
|
|
|
color: #FF5B5C;
|
|
|
}
|