108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { range } from "lodash";
|
|
|
|
const props = defineProps<{
|
|
result: ResultEndType;
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
question: BasicQuestion | AdvancedQuestion | undefined;
|
|
questionBasic: BasicQuestion | undefined;
|
|
questionAdvanced: AdvancedQuestion | undefined;
|
|
now: string | null | undefined;
|
|
}>();
|
|
|
|
const isBasic = computed(() => props.now == "basic");
|
|
const isAdvanced = computed(() => props.now == "advanced");
|
|
|
|
const boxesAmount = computed(() => {
|
|
if (isBasic.value) {
|
|
return 20;
|
|
} else if (isAdvanced.value) {
|
|
return 12;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
const countSwitchable = computed(() => {
|
|
if (isBasic.value) {
|
|
return props.countBasic;
|
|
} else if (isAdvanced.value) {
|
|
return props.countAdvanced;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-stretch p-4 gap-6 border-l border-slate-300 bg-slate-100"
|
|
>
|
|
<button @click="$emit('nav', '/')" class="btn btn-warning btn-xl">
|
|
Wróć na stronę główną
|
|
</button>
|
|
<div class="flex flex-row gap-4 *:flex-1 w-full flex-wrap">
|
|
<button class="btn btn-info btn-lg" @click="$emit('change-now', 'basic')">
|
|
Pytania podstawowe
|
|
</button>
|
|
<button
|
|
class="btn btn-info btn-lg"
|
|
@click="$emit('change-now', 'advanced')"
|
|
>
|
|
Pytania specjalistyczne
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
|
|
>
|
|
<input
|
|
type="radio"
|
|
:aria-label="(num + 1).toString()"
|
|
class="btn btn-lg"
|
|
:name="`${now}-chooser`"
|
|
v-for="num in range(0, boxesAmount)"
|
|
@click="$emit('change-count', num)"
|
|
:class="`${
|
|
isBasic
|
|
? result.basic[num].question?.poprawna_odp.toLowerCase() ==
|
|
result.basic[num].chosen_answer
|
|
? 'btn-success'
|
|
: 'btn-error'
|
|
: ''
|
|
}${
|
|
isAdvanced
|
|
? result.advanced[num].question?.poprawna_odp.toLowerCase() ==
|
|
result.advanced[num].chosen_answer
|
|
? 'btn-success'
|
|
: 'btn-error'
|
|
: ''
|
|
}`"
|
|
:checked="countSwitchable == num"
|
|
:key="`choose-${num}-${now}`"
|
|
/>
|
|
</div>
|
|
<div class="text-center text-4xl flex flex-col gap-5">
|
|
<span class="block">Poprawna odpowiedź</span>
|
|
<span class="block">{{ question?.poprawna_odp }}</span>
|
|
<span class="block">Zaznaczona odpowiedź</span>
|
|
<span class="block">
|
|
{{
|
|
isBasic
|
|
? result.basic[countBasic].chosen_answer.trim() == ""
|
|
? "BrakBasic"
|
|
: result.basic[countBasic].chosen_answer
|
|
: isAdvanced
|
|
? result.advanced[countAdvanced].chosen_answer.trim() == ""
|
|
? "BrakAdvanced"
|
|
: result.advanced[countAdvanced].chosen_answer
|
|
: "Błąd"
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button @click="$emit('nav', '/exam')" class="btn btn-warning btn-xl">
|
|
Rozpocznij jeszcze raz
|
|
</button>
|
|
</div>
|
|
</template>
|