NSG_PORTAL_V2/components/article/immerse/Quiz.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  !text-black-500">
    <h5 class="underline decoration-gray-500 font-bold mb-2">Câu đố: {{ data?.title }}</h5>

    <ul class="px-3 flex flex-col gap-3">
      <li v-for="(question, questionIndex) in data.questionGeneral" :key="questionIndex" class="mb-2">
        <h5 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ `${questionIndex + 1}. ${question.title}` }}</h5>

        <ul>
        <template v-if="question.type === 1">
          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
            <input :id="`answer-${questionIndex}-${answerIndex}`" type="radio" :value="answerIndex" class="peer opacity-0"  v-model="selectQuizAnswer[questionIndex]" />
            <label :for="`answer-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-50% before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-10px after:translate-y--50% after:border-#000 after:content-[''] after:inline-block after:w-10px after:h-10px after:rounded-full peer-checked:after:bg-primary peer-checked:before:border-primary ">{{ answer.title }}</label>
          </li>
        </template>
        <template v-else>
          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
            <input :id="`answer-${questionIndex}-${answerIndex}`" type="checkbox" :value="answerIndex" class="peer opacity-0"  v-model="selectQuizAnswer[questionIndex]" />
            <label :for="`answer-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-2px before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-6px after:translate-y--50% after:border-#000 after:content-['✔'] after:text-12px after:text-transparent after:inline-block after:w-14px after:h-14px  peer-checked:after:text-white peer-checked:before:border-primary peer-checked:before:bg-primary ">{{ answer.title }}</label>
          </li>
        </template>
        </ul>
      </li>
    </ul>

    <div class="flex justify-center">
    <button @click="submitSend" class="mx-auto px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Gửi câu trả lời</button>
    </div>
  </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'"
          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>