thainv-dev: tạo lại cấu trúc folder và làm UI
This commit is contained in:
nguyen van thai
@@ -1,6 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import { useQuizStore } from "~/stores/quiz";
|
||||
import type { Quiz } from "~/server/models/quiz";
|
||||
|
||||
const props = defineProps<{ dataId?: string }>();
|
||||
|
||||
const store = reactive({
|
||||
quiz: useQuizStore(),
|
||||
});
|
||||
|
||||
const { currentQuiz } = storeToRefs(store.quiz);
|
||||
|
||||
const quiz = reactive<Quiz>({});
|
||||
|
||||
async function loadData() {
|
||||
await store.quiz.fetchById(Number(props.dataId));
|
||||
|
||||
assignData();
|
||||
}
|
||||
|
||||
function assignData() {
|
||||
Object.assign(quiz, currentQuiz.value);
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
const prevQuestion = () => {
|
||||
if (step.value) {
|
||||
step.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const nextQuestion = () => {
|
||||
if (step.value < 3) {
|
||||
step.value++;
|
||||
}
|
||||
};
|
||||
|
||||
const data = {
|
||||
articles: null,
|
||||
questionGeneral: [
|
||||
{
|
||||
answers: [
|
||||
{
|
||||
id: 260,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 511,
|
||||
title: "Con ếch 1",
|
||||
thumbnail: "",
|
||||
description: "Con ếch 1",
|
||||
type: 0,
|
||||
isCorrect: true,
|
||||
order: 1,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
id: 259,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 511,
|
||||
title: "Con ếch 2",
|
||||
thumbnail: "",
|
||||
description: "Con ếch 2",
|
||||
type: 0,
|
||||
isCorrect: false,
|
||||
order: 1,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
id: 258,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 511,
|
||||
title: "Con ếch 3",
|
||||
thumbnail: "",
|
||||
description: "Con ếch 3",
|
||||
type: 0,
|
||||
isCorrect: false,
|
||||
order: 3,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
],
|
||||
responses: null,
|
||||
id: 511,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
title: "Con ếch bạn chọn sẽ tiết lộ bí quyết làm giàu",
|
||||
thumbnail: "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/caudo1-1717486185.jpg",
|
||||
description: "Con ếch bạn chọn sẽ tiết lộ bí quyết làm giàu",
|
||||
type: 1,
|
||||
order: 1,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
answers: [
|
||||
{
|
||||
id: 257,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 510,
|
||||
title: "Băng zôn",
|
||||
thumbnail: "",
|
||||
description: "Băng zôn",
|
||||
type: 1,
|
||||
isCorrect: true,
|
||||
order: 1,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
id: 256,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 510,
|
||||
title: "Người đàn ông",
|
||||
thumbnail: "",
|
||||
description: "Người đàn ông",
|
||||
type: 1,
|
||||
isCorrect: true,
|
||||
order: 2,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
id: 255,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 510,
|
||||
title: "Bánh sinh nhật",
|
||||
thumbnail: "",
|
||||
description: "Bánh sinh nhật",
|
||||
type: 1,
|
||||
isCorrect: false,
|
||||
order: 3,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
{
|
||||
id: 254,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
questionId: 510,
|
||||
title: "Khác",
|
||||
thumbnail: "",
|
||||
description: "Khác",
|
||||
type: 2,
|
||||
isCorrect: false,
|
||||
order: 4,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
],
|
||||
responses: null,
|
||||
id: 510,
|
||||
siteId: 1,
|
||||
quizId: 4,
|
||||
title: "Những điều khả nghi nào trong bức hình này?",
|
||||
thumbnail: "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/câu-đố-2-1717486529.jpg",
|
||||
description: "Đâu là điều khả nghi nhất trong bức hình này",
|
||||
type: 2,
|
||||
order: 2,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T15:27:05.641243",
|
||||
updatedBy: null,
|
||||
updatedOn: null,
|
||||
},
|
||||
],
|
||||
responses: null,
|
||||
id: 4,
|
||||
siteId: 1,
|
||||
title: "câu đố tháng 6",
|
||||
code: "cau-do-thang-6",
|
||||
type: 0,
|
||||
startTime: "2024-06-04T15:00:00",
|
||||
endTime: "2024-06-10T00:00:00",
|
||||
settings: {
|
||||
participantType: 3,
|
||||
resultPublication: 1,
|
||||
},
|
||||
features: "Important;Feature",
|
||||
taxonomy: "Biên tập",
|
||||
keywords: "câu đố;tháng 6;e",
|
||||
thumbnail: "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/ret-20240603042609106.jpg",
|
||||
description: "câu đố tháng 6 e",
|
||||
order: 1,
|
||||
status: 6,
|
||||
createdBy: 3,
|
||||
createdOn: "2024-06-04T14:40:08.617253",
|
||||
updatedBy: 3,
|
||||
updatedOn: "2024-06-04T15:23:59.964931",
|
||||
};
|
||||
|
||||
const step = ref(0);
|
||||
const beforeWidth = computed(() => (100 / Number(data.questionGeneral.length - 1)) * step.value);
|
||||
|
||||
const selectQuizAnswer = ref<any>([]);
|
||||
|
||||
data.questionGeneral.forEach((question) => {
|
||||
switch (question.type) {
|
||||
case 0:
|
||||
selectQuizAnswer.value.push([]);
|
||||
break;
|
||||
case 1:
|
||||
selectQuizAnswer.value.push(0);
|
||||
break;
|
||||
case 2:
|
||||
selectQuizAnswer.value.push([]);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
async function submitSend() {}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
quiz
|
||||
</template>
|
||||
<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black">
|
||||
<h5 class="underline decoration-gray-500 font-bold mb-2">Câu đố: {{ data?.title }}</h5>
|
||||
|
||||
<ul class="px-3">
|
||||
<li v-for="(question, questionIndex) in data.questionGeneral" :key="questionIndex" class="mb-2">
|
||||
<h5 class="mb-1 font-700 text-black">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
|
||||
|
||||
<ul>
|
||||
<li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
|
||||
<input :id="`answer-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectQuizAnswer[questionIndex]" />
|
||||
<label :for="`answer-${questionIndex}-${answerIndex}`" class="font-semibold">{{ answer.title }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<h5 class="text-black text-18px font-700">{{ data?.title }}</h5>
|
||||
<template v-if="data.questionGeneral.length > 1">
|
||||
<ul
|
||||
:style="{ '--before-width': beforeWidth + '%' }"
|
||||
class="progress flex items-center justify-between relative after:content-[''] after:absolute after:top-50% after:translate-y--50% after:w-full after:h-1 after:bg-gray-200 before:content-[''] before:absolute before:top-50% before:translate-y--50% before:h-1 before:bg-primary-500 before:z-2 before:transition-all before:ease-linear before:duration-300"
|
||||
>
|
||||
<li
|
||||
v-for="(index, item) in data.questionGeneral.length"
|
||||
:key="index"
|
||||
:class="step >= index - 1 ? 'bg-primary-500 text-white transition-all delay-300' : 'bg-white text-primary-500'"
|
||||
class="relative z-3 w-7 h-7 rounded-full flex items-center justify-center border-2 border-solid border-primary-500"
|
||||
>
|
||||
<template template v-if="step > index - 1"><Icon name="material-symbols:check-rounded" class="text-22px" /></template>
|
||||
<template v-else>{{ item }}</template>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<template v-for="(item, index) in data.questionGeneral" :key="index">
|
||||
<div v-show="step === index">
|
||||
{{ item.title }} => {{ index }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<button class="bg-primary-500 text-white px-2 py-2 rounded-4px" @click="prevQuestion()">Câu trước</button>
|
||||
<button class="bg-primary-500 text-white px-2 py-2 rounded-4px" @click="nextQuestion()">Câu tiếp theo</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:root {
|
||||
--before-width: 0%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
&::before {
|
||||
width: var(--before-width);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user