111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import "7.css/dist/7.scoped.css";
|
|
|
|
const props = defineProps<{
|
|
questionaries: BasicQuestion[] | null;
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
dataBasic: BasicQuestion[] | null;
|
|
dataAdvanced: AdvancedQuestion[] | null;
|
|
now: string | null | undefined;
|
|
}>();
|
|
|
|
const isBasic = computed(() => props.now == "basic");
|
|
const isAdvanced = computed(() => props.now == "advanced");
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center p-4 gap-10">
|
|
<div>
|
|
<button class="btn-major">Zakończ egzamin</button>
|
|
</div>
|
|
<div class="flex flex-row gap-6">
|
|
<div :class="isBasic ? '' : 'opacity-45'">
|
|
Pytania podstawowe
|
|
<div class="win7 *:!h-10 *:*:!h-10 *:*:*:h-10 text-lg">
|
|
<div
|
|
role="progressbar"
|
|
class="relative"
|
|
:class="isBasic ? 'animate' : ''"
|
|
>
|
|
<div :class="`w-full`">
|
|
<div
|
|
class="set-translate w-full text-center bg-blue-500 bg-opacity-60"
|
|
:class="isBasic ? 'font-semibold' : ''"
|
|
>
|
|
<span class="block set-translate w-full text-center"
|
|
>{{ countBasic + 1 }} / {{ dataBasic?.length }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :class="isAdvanced ? '' : 'opacity-45'">
|
|
Pytania specjalistyczne
|
|
<div class="win7 *:!h-10 *:*:!h-10 *:*:*:h-10 text-lg">
|
|
<div
|
|
role="progressbar"
|
|
class="relative"
|
|
:class="isAdvanced ? 'animate' : ''"
|
|
>
|
|
<div class="w-full">
|
|
<div
|
|
class="set-translate w-full text-center bg-blue-500 bg-opacity-60"
|
|
:class="isAdvanced ? 'font-semibold' : ''"
|
|
>
|
|
<span class="block set-translate w-full text-center">
|
|
{{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-xl">
|
|
Czas na zapoznanie się z pytaniem<br />
|
|
Czas na udzielenie odpowiedzi
|
|
|
|
<div class="flex flex-row items-stretch">
|
|
<div class="btn-major">START</div>
|
|
<div class="win7 flex-1 *:!h-[100%] *:*:!h-[100%]">
|
|
<div role="progressbar" class="relative min-h-6">
|
|
<div class="progressive !bg-orange-500">
|
|
<div class="set-translate w-full text-center text-3xl">10 s</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button @click="$emit('next-question')" class="btn-major">
|
|
Następne pytanie
|
|
</button>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="max-h-[150px] overflow-y-scroll">{{ questionaries }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.set-translate {
|
|
@apply absolute top-[50%] left-[50%];
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.progressive {
|
|
animation: progressZapoznanie 20s linear;
|
|
}
|
|
|
|
@keyframes progressZapoznanie {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|