nguyen van thai
311 lines
8.6 KiB
Vue
311 lines
8.6 KiB
Vue
<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>
|
|
<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>
|