86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import "7.css/dist/7.scoped.css";
|
|
|
|
defineProps<{
|
|
questionaries: BasicQuestion[] | null;
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
dataBasic: BasicQuestion[] | null;
|
|
dataAdvanced: AdvancedQuestion[] | null;
|
|
}>();
|
|
</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>
|
|
Pytania podstawowe
|
|
<div class="win7">
|
|
<div
|
|
role="progressbar"
|
|
class="animate relative min-h-6"
|
|
aria-valuemin="0"
|
|
:aria-valuemax="dataBasic?.length"
|
|
:aria-valuenow="countBasic + 1"
|
|
>
|
|
<div :class="`w-${countBasic + 1}/${dataBasic?.length}`">
|
|
<div class="absolute top-0 w-full text-center font-semibold">
|
|
{{ countBasic + 1 }} / {{ dataBasic?.length }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Pytania specjalistyczne
|
|
<div class="win7">
|
|
<div
|
|
role="progressbar"
|
|
class="animate relative min-h-6"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-valuenow="80"
|
|
>
|
|
<div class="w-[60%]">
|
|
<div class="absolute top-0 w-full text-center">
|
|
{{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Czas na zapoznanie się z treścią pytania<br />
|
|
Czas na odpowiedź
|
|
<div class="btn-major">START</div>
|
|
<div class="win7">
|
|
<div
|
|
role="progressbar"
|
|
class="animate relative min-h-6"
|
|
aria-valuemin="0"
|
|
aria-valuemax="30"
|
|
aria-valuenow="10"
|
|
>
|
|
<div class="w-[60%]">
|
|
<div class="absolute top-0 w-full text-center font-semibold">
|
|
10 sekund
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button @click="$emit('next-question')" class="btn-major">
|
|
Następne pytanie
|
|
</button>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="max-h-[300px] overflow-y-scroll">{{ questionaries }}</div>
|
|
</div>
|
|
</template>
|