125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import ResultModal from '~/components/ResultModal.vue';
|
|
|
|
definePageMeta({ middleware: ['result'] });
|
|
|
|
const examStore = useExamStore();
|
|
|
|
const points = ref<number>(0);
|
|
|
|
examStore.result.basic.forEach((answer) => {
|
|
if (answer.chosen_is_correct) {
|
|
points.value += answer.question?.weight ?? 0;
|
|
}
|
|
});
|
|
examStore.result.advanced.forEach((answer) => {
|
|
if (answer.chosen_is_correct) {
|
|
points.value += answer.question?.weight ?? 0;
|
|
}
|
|
});
|
|
|
|
const resultTrueFalse = ref(points.value >= 68 ? 'pozytywny' : 'negatywny');
|
|
|
|
useHead({
|
|
title: `${
|
|
String(resultTrueFalse.value[0]).toUpperCase() +
|
|
String(resultTrueFalse.value).slice(1)
|
|
} (${points.value}/74)`,
|
|
});
|
|
|
|
const countBasic = ref(0);
|
|
const countAdvanced = ref(0);
|
|
|
|
const resultQuestionBasic = computed<ResultType<BasicQuestion> | undefined>(
|
|
() => examStore.result.basic.at(countBasic.value),
|
|
);
|
|
const resultQuestionAdvanced = computed<
|
|
ResultType<AdvancedQuestion> | undefined
|
|
>(() => examStore.result.advanced.at(countAdvanced.value));
|
|
|
|
const questionBasic = computed<BasicQuestion | undefined>(
|
|
() => resultQuestionBasic.value?.question,
|
|
);
|
|
const questionAdvanced = computed<AdvancedQuestion | undefined>(
|
|
() => resultQuestionAdvanced.value?.question,
|
|
);
|
|
|
|
const now = ref('basic');
|
|
|
|
const question = computed(() => {
|
|
if (now.value === 'basic') {
|
|
return questionBasic.value;
|
|
} else if (now.value === 'advanced') {
|
|
return questionAdvanced.value;
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const resultQuestion = computed(() => {
|
|
if (now.value === 'basic') {
|
|
return resultQuestionBasic.value;
|
|
} else if (now.value === 'advanced') {
|
|
return resultQuestionAdvanced.value;
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const answer = computed(() => resultQuestion.value?.chosen_answer);
|
|
|
|
function changeNow(to: string) {
|
|
now.value = to;
|
|
}
|
|
|
|
function changeCount(num: number) {
|
|
if (now.value === 'basic') {
|
|
countBasic.value = num;
|
|
} else if (now.value === 'advanced') {
|
|
countAdvanced.value = num;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ResultModal>
|
|
<template #title>Egzamin teorytyczny</template>
|
|
<template #category>{{ examStore.category }}</template>
|
|
<template #points>{{ points }}</template>
|
|
<template #resultTrueFalse>{{ resultTrueFalse }}</template>
|
|
</ResultModal>
|
|
<div>
|
|
<div class="grid grid-cols-4 min-h-dvh">
|
|
<div class="col-span-3 flex flex-col gap-4">
|
|
<BarTop :points="question?.weight" :category="examStore.category" />
|
|
<Media :media="question?.media_url" />
|
|
<QuestionBasic
|
|
v-if="now === 'basic'"
|
|
v-model="answer"
|
|
:question="questionBasic"
|
|
class="select-none z-[-1]"
|
|
/>
|
|
<QuestionAdvanced
|
|
v-else-if="now === 'advanced'"
|
|
v-model="answer"
|
|
:question="questionAdvanced"
|
|
class="select-none z-[-1]"
|
|
/>
|
|
</div>
|
|
|
|
<BarRightResult
|
|
:result="examStore.result"
|
|
:count-basic="countBasic"
|
|
:count-advanced="countAdvanced"
|
|
:now="now"
|
|
@change-now="changeNow"
|
|
@change-count="changeCount"
|
|
>
|
|
<template #points>{{ points }}</template>
|
|
<template #resultTrueFalse>{{ resultTrueFalse }}</template>
|
|
</BarRightResult>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|