121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import "7.css/dist/7.scoped.css";
|
|
|
|
useHead({
|
|
title: "Pytanie 1/20",
|
|
});
|
|
|
|
const {
|
|
data: dataBasic,
|
|
error: errorBasic,
|
|
status: statusBasic,
|
|
} = await useFetch<BasicQuestion[]>("/api/basic");
|
|
|
|
const {
|
|
data: dataAdvanced,
|
|
error: errorAdvanced,
|
|
status: statusAdvanced,
|
|
} = await useFetch<AdvancedQuestion[]>("/api/advanced");
|
|
|
|
const countBasic = ref(0);
|
|
const countAdvanced = ref(-1);
|
|
|
|
const tak_nie_model = ref();
|
|
|
|
async function next() {
|
|
if (countBasic.value + 1 < dataBasic.value?.length!) {
|
|
questionaries.value.push({
|
|
nr_pytania: question.value?.nr_pytania,
|
|
chosen_answer: tak_nie_model.value ?? "",
|
|
correct_answer: question.value?.poprawna_odp?.toLowerCase(),
|
|
chosen_is_correct:
|
|
tak_nie_model.value == question.value?.poprawna_odp?.toLowerCase(),
|
|
liczba_pkt: question.value?.liczba_pkt,
|
|
});
|
|
tak_nie_model.value = "";
|
|
countBasic.value++;
|
|
useHead({
|
|
title: `Pytanie ${countBasic.value + 1}/${dataBasic.value?.length}`,
|
|
});
|
|
} else {
|
|
// await navigateTo("/advanced");
|
|
}
|
|
}
|
|
|
|
const question = computed(() => dataBasic.value?.at(countBasic.value));
|
|
const media = computed(() => {
|
|
const mediaSplit = question.value?.media?.split(".");
|
|
return {
|
|
fileType: mediaSplit?.pop()?.toLowerCase(),
|
|
fileName: mediaSplit?.join("."),
|
|
};
|
|
});
|
|
|
|
const questionaries: Ref<Array<any>> = ref([]);
|
|
|
|
// onMounted(() => {
|
|
// const progresInterval = setInterval(() => {
|
|
// progres.value.value = +progres.value.value + 1;
|
|
// if (progres.value.value >= 100) {
|
|
// clearInterval(progresInterval);
|
|
// }
|
|
// }, 100);
|
|
// });
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="statusBasic === 'success'">
|
|
<div class="grid grid-cols-4 min-h-dvh">
|
|
<div class="col-span-3 flex flex-col gap-4 p-4">
|
|
<TopBar
|
|
:points="question?.liczba_pkt"
|
|
:category="`B`"
|
|
:time-remaining="`25:00`"
|
|
/>
|
|
<Media :media="media" />
|
|
<BasicQuestionBlock :question="question" v-model="tak_nie_model" />
|
|
</div>
|
|
|
|
<RightBar
|
|
:questionaries="questionaries"
|
|
:data-basic="dataBasic"
|
|
:data-advanced="dataAdvanced"
|
|
:count-basic="countBasic"
|
|
:count-advanced="countAdvanced"
|
|
@next-question="next()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="statusBasic === 'error' || statusAdvanced === 'error'">
|
|
An API error occurred: {{ errorBasic }} {{ errorAdvanced }}
|
|
</div>
|
|
<div v-else>Loading...</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.btn {
|
|
@apply box-border text-white font-bold p-3 rounded-md w-fit cursor-pointer border-[4px] transition duration-100;
|
|
}
|
|
|
|
.btn-answer {
|
|
@apply btn bg-blue-500 text-xl;
|
|
}
|
|
|
|
.btn-answer:hover {
|
|
@apply bg-blue-300;
|
|
}
|
|
|
|
.btn-answer:active {
|
|
@apply bg-blue-400 duration-0;
|
|
}
|
|
|
|
.btn-major {
|
|
@apply btn bg-orange-400 text-base;
|
|
}
|
|
|
|
.info-little-box {
|
|
@apply inline-block px-[15px] py-[8px] bg-blue-500 text-white font-bold;
|
|
}
|
|
</style>
|