95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
result: ResultEndType;
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
dataBasic: BasicQuestion[] | null;
|
|
dataAdvanced: AdvancedQuestion[] | null;
|
|
now: string | null | undefined;
|
|
ending: boolean;
|
|
}>();
|
|
|
|
const isBasic = computed(() => props.now == "basic");
|
|
const isAdvanced = computed(() => props.now == "advanced");
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-stretch p-4 gap-10 border-l border-slate-300 bg-slate-100"
|
|
>
|
|
<button @click="$emit('end-exam')" class="btn btn-warning btn-xl">
|
|
Zakończ egzamin
|
|
</button>
|
|
<div class="flex flex-row gap-6 *:flex-1 w-full">
|
|
<div class="flex flex-col gap-1" :class="isBasic ? '' : 'opacity-45'">
|
|
<span class="text-lg">Pytania podstawowe</span>
|
|
<div
|
|
class="info-little-box w-full text-center"
|
|
:class="isBasic ? 'font-semibold' : ''"
|
|
>
|
|
{{ countBasic + 1 }} / {{ dataBasic?.length }}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1" :class="isAdvanced ? '' : 'opacity-45'">
|
|
<span class="text-lg">Pytania specjalistyczne</span>
|
|
<div
|
|
class="info-little-box w-full text-center"
|
|
:class="isAdvanced ? 'font-semibold' : ''"
|
|
>
|
|
{{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-xl flex flex-col gap-2">
|
|
<span>Czas na zapoznanie się z pytaniem</span>
|
|
<div class="flex flex-row items-stretch gap-2">
|
|
<div class="btn btn-primary">START</div>
|
|
<div class="h-full flex-1 relative">
|
|
<progress
|
|
class="progress progress-warning w-full h-full"
|
|
value="50"
|
|
max="100"
|
|
></progress>
|
|
<span class="block set-translate z-10 text-black text-2xl">20s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-xl flex flex-col gap-2">
|
|
<span>Czas na udzielenie odpowiedzi</span>
|
|
<div class="h-9 relative">
|
|
<progress
|
|
class="progress progress-warning w-full h-full"
|
|
value="50"
|
|
max="100"
|
|
></progress>
|
|
<span class="block set-translate z-10 text-black text-2xl">15s</span>
|
|
</div>
|
|
</div>
|
|
<div class="max-h-[150px] overflow-y-scroll">
|
|
{{ result }}
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button
|
|
@click="$emit('next-question')"
|
|
class="btn btn-warning btn-xl"
|
|
:disabled="ending"
|
|
>
|
|
Następne pytanie
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.progressive {
|
|
animation: progressZapoznanie 20s linear;
|
|
}
|
|
|
|
@keyframes progressZapoznanie {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|