thainv-dev: tạo lại cấu trúc folder và làm UI
This commit is contained in:
nguyen van thai
@@ -1,56 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { usePollStore } from '~/stores/poll'
|
||||
import { usePollOptionStore } from '~/stores/poll-option'
|
||||
import type { Poll } from '~/server/models/poll';
|
||||
import { usePollStore } from "~/stores/poll";
|
||||
import { usePollOptionStore } from "~/stores/poll-option";
|
||||
import { usePollResponseStore } from "~/stores/poll-response";
|
||||
import type { Poll } from "~/server/models/poll";
|
||||
import type { PollResponse } from "~/server/models/poll-response";
|
||||
import type { PollOption } from "~/server/models/poll-option";
|
||||
const props = defineProps<{ dataId?: string }>();
|
||||
|
||||
const store = reactive({
|
||||
poll: usePollStore(),
|
||||
pollOptions: usePollOptionStore()
|
||||
})
|
||||
pollOptions: usePollOptionStore(),
|
||||
pollResponse: usePollResponseStore(),
|
||||
});
|
||||
const { currentPoll } = storeToRefs(store.poll);
|
||||
const { currentPollOptions } = storeToRefs(store.pollOptions);
|
||||
const { currentPollResponses } = storeToRefs(store.pollResponse);
|
||||
const poll = reactive<Poll | any>({});
|
||||
const options = ref<PollOption[]>();
|
||||
async function loadData() {
|
||||
await store.poll.fetchById(String(props.dataId));
|
||||
await store.pollOptions.fetchByPollId(String(props.dataId));
|
||||
await store.pollResponse.fetchByPollId(String(props.dataId));
|
||||
assignData();
|
||||
}
|
||||
|
||||
const poll = reactive<Poll>(await store.poll.fetchById((String(props.dataId))))
|
||||
const options = ref<any []>(await store.pollOptions.fetchByPollId((String(props.dataId))))
|
||||
function assignData() {
|
||||
Object.assign(poll, currentPoll.value);
|
||||
options.value = currentPollOptions.value;
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
const selectedOption = ref<any>(null);
|
||||
const showResult = ref(false);
|
||||
const alreadyVoted = ref(false);
|
||||
const canShowResult = computed(() => {
|
||||
switch (poll.settings?.resultPublication) {
|
||||
case 0:
|
||||
return false;
|
||||
case 1:
|
||||
return true;
|
||||
case 2:
|
||||
return alreadyVoted.value;
|
||||
case 3:
|
||||
return alreadyVoted.value && (!poll.endTime || new Date() > new Date(poll.endTime));
|
||||
}
|
||||
});
|
||||
|
||||
function submitVote () {
|
||||
console.log(selectedOption, 'id')
|
||||
async function submitVote() {
|
||||
if (selectedOption.value) {
|
||||
let option = options.value?.find((option: PollOption) => option.id === selectedOption.value);
|
||||
if(option) {
|
||||
option.responsesCount = Number(option.responsesCount) + 1
|
||||
|
||||
}
|
||||
const totalResponses = options.value?.reduce((sum, option) => sum + Number(option.responsesCount ?? 0), 0);
|
||||
// const result = await store.pollResponse.create({ optionId: selectedOption.value });
|
||||
// if (result) {
|
||||
// alreadyVoted.value = true;
|
||||
// if (options.value) {
|
||||
// let option = options.value.find((option: PollOption) => option.id === selectedOption.value);
|
||||
// // if (option) option?.responsesCount += 1;
|
||||
// // options.value.filter((option) => {
|
||||
// // option.votePercentage = (option.responsesCount / currentPollResponses.value.length) * 100;
|
||||
// // });
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
const toggleResults = () => {
|
||||
if (canShowResult.value) showResult.value = !showResult.value;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
|
||||
<span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
|
||||
<span class="block">
|
||||
<span class="underline decoration-gray-500 font-bold">
|
||||
{{ poll?.title }}
|
||||
</span>
|
||||
<!-- <button v-if="showResult && canShowResult" type="button" class="underline text-blue-400" @click="toggleResults">
|
||||
Câu hỏi
|
||||
</button>
|
||||
<button class="underline text-blue-400" v-if="!showResult && canShowResult" type="button" @click="toggleResults">
|
||||
Kết quả
|
||||
</button> -->
|
||||
<button v-if="showResult && canShowResult" type="button" class="underline text-blue-400" @click="toggleResults">Câu hỏi</button>
|
||||
<button class="underline text-blue-400" v-if="!showResult && canShowResult" type="button" @click="toggleResults">Kết quả</button>
|
||||
</span>
|
||||
|
||||
<span class="p-1 block">
|
||||
<span v-for="(option, index) in options" :key="index" class="block">
|
||||
<label class="flex gap-2 m-2">
|
||||
<input type="radio" :value="option.id" v-model="selectedOption" />
|
||||
<span class="font-semibold">{{ option?.title }}</span>
|
||||
</label>
|
||||
</span>
|
||||
<button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn </button>
|
||||
<span v-if="!showResult" class="p-1 block">
|
||||
<span v-for="(option, index) in options" :key="index" class="block">
|
||||
<label class="flex gap-2 m-2">
|
||||
<input type="radio" :value="option.id" v-model="selectedOption" />
|
||||
<span class="font-semibold">{{ option?.title }}</span>
|
||||
</label>
|
||||
</span>
|
||||
<button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn</button>
|
||||
</span>
|
||||
|
||||
<!-- <span v-else class="block">
|
||||
<span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
|
||||
<span v-else class="block">
|
||||
hoàn thành
|
||||
<!-- <span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
|
||||
<span class="absolute top-0 start-0 bottom-0 bg-gradient-to-r from-sky-500 to-indigo-500"
|
||||
:style="{ width: `${calculatePercentage(answer?.voteCount)}%` }"></span>
|
||||
<span class="block relative z-0 ps-1">
|
||||
<span>{{ calculatePercentage(answer?.voteCount).toFixed(2) }}%</span>
|
||||
<span class="">({{ answer?.voteCount }})</span>
|
||||
</span>
|
||||
</span>
|
||||
</span> -->
|
||||
</span> -->
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,299 @@
|
||||
<script setup lang="ts">
|
||||
import { useSurveyStore } from "~/stores/survey";
|
||||
import type { Survey } from "~/server/models/survey";
|
||||
|
||||
const props = defineProps<{ dataId?: string }>();
|
||||
|
||||
const store = reactive({
|
||||
survey: useSurveyStore(),
|
||||
});
|
||||
|
||||
const { currentSurvey } = storeToRefs(store.survey);
|
||||
|
||||
const survey = reactive<Survey>({});
|
||||
|
||||
async function loadData() {
|
||||
await store.survey.fetchById(Number(props.dataId));
|
||||
|
||||
assignData();
|
||||
}
|
||||
|
||||
function assignData() {
|
||||
Object.assign(survey, currentSurvey.value);
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
const dataSurvey = {
|
||||
"articles": null,
|
||||
"questionGeneral": [
|
||||
{
|
||||
"answers": [
|
||||
{
|
||||
"id": 85,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 84,
|
||||
"title": "Không",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": false,
|
||||
"order": 2,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"id": 84,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 84,
|
||||
"title": "Có",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": true,
|
||||
"order": 1,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
}
|
||||
],
|
||||
"responses": null,
|
||||
"id": 84,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"title": "Bạn có chọn xe công nghệ để di chuyển trong giờ cao điểm không?",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 0,
|
||||
"order": 3,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"answers": [
|
||||
{
|
||||
"id": 83,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 83,
|
||||
"title": "Xe bus",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": false,
|
||||
"order": 3,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"id": 82,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 83,
|
||||
"title": "Xe đạp",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": false,
|
||||
"order": 2,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"id": 81,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 83,
|
||||
"title": "Xe máy",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": true,
|
||||
"order": 1,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
}
|
||||
],
|
||||
"responses": null,
|
||||
"id": 83,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"title": "Bạn thường di chuyển bằng phương tiện gì?",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"order": 2,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"answers": [
|
||||
{
|
||||
"id": 80,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 82,
|
||||
"title": "21 lần trở lên",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": false,
|
||||
"order": 3,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"id": 79,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 82,
|
||||
"title": "14 - 21 lần",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": false,
|
||||
"order": 0,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
},
|
||||
{
|
||||
"id": 78,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"questionId": 82,
|
||||
"title": "7 lần",
|
||||
"thumbnail": "",
|
||||
"description": "",
|
||||
"type": 1,
|
||||
"isCorrect": true,
|
||||
"order": 1,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
}
|
||||
],
|
||||
"responses": null,
|
||||
"id": 82,
|
||||
"siteId": 1,
|
||||
"surveyId": 10,
|
||||
"title": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
|
||||
"thumbnail": "",
|
||||
"description": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
|
||||
"type": 1,
|
||||
"order": 1,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.794056",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
}
|
||||
],
|
||||
"responses": null,
|
||||
"id": 10,
|
||||
"siteId": 1,
|
||||
"title": "Thói quen di chuyển trong giờ cao điểm",
|
||||
"code": "thoi-quen-di-chuyen-trong-gio-cao-diem",
|
||||
"type": 0,
|
||||
"startTime": "2024-06-04T17:18:00",
|
||||
"endTime": "2024-06-20T00:00:00",
|
||||
"settings": {
|
||||
"participantType": 3,
|
||||
"resultPublication": 2
|
||||
},
|
||||
"features": "Feature",
|
||||
"taxonomy": "Biên tập",
|
||||
"keywords": "thoiquendichuyen;giocaodiem",
|
||||
"thumbnail": "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/thoiquendichuyentronggiocaodiem-20240604100659862.png",
|
||||
"description": "Thói quen di chuyển trong giờ cao điểm",
|
||||
"order": 1,
|
||||
"status": 6,
|
||||
"createdBy": 3,
|
||||
"createdOn": "2024-06-04T17:13:45.653177",
|
||||
"updatedBy": null,
|
||||
"updatedOn": null
|
||||
};
|
||||
|
||||
|
||||
const selectSurveyAnswer = ref<any>([])
|
||||
|
||||
dataSurvey.questionGeneral.forEach((question) => {
|
||||
switch (question.type) {
|
||||
case 0:
|
||||
selectSurveyAnswer.value.push([])
|
||||
break;
|
||||
case 1:
|
||||
selectSurveyAnswer.value.push(0)
|
||||
break;
|
||||
case 2:
|
||||
selectSurveyAnswer.value.push([])
|
||||
break;
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
async function submitSend() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
Survey
|
||||
</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">Khảo sát: {{ dataSurvey?.title }}</h5>
|
||||
|
||||
<ul class="px-3">
|
||||
<li v-for="(question, questionIndex) in dataSurvey.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-survey-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectSurveyAnswer[questionIndex]">
|
||||
<label :for="`answer-survey-${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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:root {
|
||||
--before-width: 0%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user