109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import type { BasicQuestion } from "@/types/basic";
|
||
|
|
|
||
|
|
import "7.css/dist/7.scoped.css";
|
||
|
|
|
||
|
|
useHead({
|
||
|
|
title: "Pytanie 1/20",
|
||
|
|
});
|
||
|
|
|
||
|
|
const { data, error, status } = await useFetch<BasicQuestion[]>("/api/basic");
|
||
|
|
|
||
|
|
const count = ref(0);
|
||
|
|
|
||
|
|
const tak_nie_model = ref();
|
||
|
|
|
||
|
|
async function next() {
|
||
|
|
if (count.value + 1 < data.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 = "";
|
||
|
|
count.value++;
|
||
|
|
useHead({
|
||
|
|
title: `Pytanie ${count.value + 1}/${data.value?.length}`,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// await navigateTo("/advanced");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const question = computed(() => data.value?.at(count.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="status === '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="data"
|
||
|
|
:count="count"
|
||
|
|
@next-question="next()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else-if="status === 'error'">Error: {{ error }}</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>
|