176 lines
4 KiB
Vue
176 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { onKeyStroke } from '@vueuse/core';
|
|
|
|
const props = defineProps<{
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
now: string | null | undefined;
|
|
ending: boolean;
|
|
setBasic: boolean;
|
|
time: number;
|
|
phase: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
endExam: [];
|
|
nextQuestion: [];
|
|
nextTime: [];
|
|
showEndModal: [];
|
|
}>();
|
|
|
|
function tryEndExam() {
|
|
if (props.ending == false) {
|
|
emit('showEndModal');
|
|
} else {
|
|
emit('endExam');
|
|
}
|
|
}
|
|
|
|
const startButton = useTemplateRef('start-button');
|
|
|
|
onKeyStroke(['S', 's'], () => {
|
|
startButton.value?.click();
|
|
});
|
|
|
|
const nextButton = useTemplateRef('next-button');
|
|
|
|
onKeyStroke(['D', 'd'], () => {
|
|
nextButton.value?.click();
|
|
});
|
|
|
|
const endButton = useTemplateRef('end-button');
|
|
|
|
onKeyStroke(['X', 'x'], () => {
|
|
endButton.value?.click();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-stretch p-4 gap-10 border-l border-base-300 bg-base-100"
|
|
>
|
|
<button
|
|
ref="end-button"
|
|
class="btn btn-warning btn-xl"
|
|
@click="tryEndExam()"
|
|
>
|
|
Zakończ egzamin
|
|
</button>
|
|
|
|
<div class="flex flex-row gap-6 *:flex-1 w-full">
|
|
<CurrentQuestionCount
|
|
:class="now === 'basic' ? 'font-semibold' : 'opacity-45'"
|
|
>
|
|
<template #title> Pytania podstawowe </template>
|
|
<template #count> {{ countBasic + 1 }} / 20 </template>
|
|
</CurrentQuestionCount>
|
|
|
|
<CurrentQuestionCount
|
|
:class="now === 'advanced' ? 'font-semibold' : 'opacity-45'"
|
|
>
|
|
<template #title> Pytania specjalistyczne </template>
|
|
<template #count> {{ countAdvanced + 1 }} / 12 </template>
|
|
</CurrentQuestionCount>
|
|
</div>
|
|
|
|
<div
|
|
v-if="phase == 'set-basic'"
|
|
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
|
|
ref="start-button"
|
|
class="btn btn-primary"
|
|
@click="emit('nextTime')"
|
|
>
|
|
START
|
|
</div>
|
|
<div class="h-full flex-1 relative">
|
|
<progress
|
|
class="progress progress-warning w-full h-full"
|
|
:value="time"
|
|
max="20"
|
|
></progress>
|
|
<span class="block set-translate z-10 text-black text-2xl">
|
|
{{ time >= 0 ? time : 0 }}s
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else 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="time"
|
|
:max="phase == 'start-basic' ? 15 : 45"
|
|
></progress>
|
|
<span class="block set-translate z-10 text-black text-2xl">
|
|
{{ time >= 0 ? time : 0 }}s
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<span class="text-xl">Skróty klawiszowe</span>
|
|
<table class="table table-sm">
|
|
<tbody>
|
|
<tr>
|
|
<td>S</td>
|
|
<td>niebieski przycisk start</td>
|
|
</tr>
|
|
<tr>
|
|
<td>D</td>
|
|
<td>następne pytanie</td>
|
|
</tr>
|
|
<tr>
|
|
<td>X</td>
|
|
<td>zakończ egzamin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>T / Y</td>
|
|
<td>Tak</td>
|
|
</tr>
|
|
<tr>
|
|
<td>N</td>
|
|
<td>Nie</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>A</td>
|
|
</tr>
|
|
<tr>
|
|
<td>B</td>
|
|
<td>B</td>
|
|
</tr>
|
|
<tr>
|
|
<td>C</td>
|
|
<td>C</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button
|
|
ref="next-button"
|
|
class="btn btn-warning btn-xl"
|
|
:disabled="ending || setBasic"
|
|
@click="emit('nextQuestion')"
|
|
>
|
|
Następne pytanie
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.progressive {
|
|
width: calc(100% / v-bind('time'));
|
|
transition: all 1s linear;
|
|
}
|
|
|
|
progress[value]::-webkit-progress-value {
|
|
transition: width 0.5s;
|
|
}
|
|
</style>
|