{"version":3,"file":"TaskBlockQuiz.4d2d6674.js","sources":["../../../../components/TaskBlock/TaskBlockQuiz/TaskBlockQuiz.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { storeToRefs } from 'pinia'\n  import { Ref } from 'vue'\n  import { computed, reactive, ref } from '#imports'\n  import { TaskBlockQuizData, TaskBlockTypeId } from '~/model/TaskBlockData/TaskBlockData'\n  import { UseBemProps } from '~/composables/Bem/BemFacetOptions'\n  import { GameTaskId } from '~/model/GameTask/GameTask'\n  import { useGameTaskStore } from '~/store/GameTask'\n  import useTranslation from '~/composables/Translation/Translation'\n  import useNotification from '~/composables/Notification/Notification'\n  import useBem from '~/composables/Bem/Bem'\n  import useMarkdown from '~/composables/Markdown/Markdown'\n  import { GameTaskStoreQuizEntry } from '~/model/GameTaskStore/GameTaskStore'\n  import {\n    QuizAnswerEntry,\n    QuizQuestionEntry,\n    QuizStoreAnswersDict,\n  } from '~/model/TaskQuiz/TaskQuiz'\n  import { OverlayContentModalFacet } from '~/components/OverlayContent/OverlayContentModal/OverlayContentModalFacet'\n  import { OverlayContentModalAction } from '~/components/OverlayContent/OverlayContentModal/OverlayContentModalAction'\n  import useModal from '~/composables/Modal/Modal'\n\n  interface Props extends TaskBlockQuizData, UseBemProps {\n    facets?: Array<string>\n    taskId: GameTaskId\n    type: TaskBlockTypeId\n    title: string\n    questionList: Array<QuizQuestionEntry>\n  }\n\n  const isMultipleChoice = (answerList: Array<QuizAnswerEntry>): boolean => {\n    return answerList.filter(({ correct }) => correct).length > 1\n  }\n\n  const gameTaskStore = useGameTaskStore()\n  const gameTaskStoreRefs = storeToRefs(gameTaskStore)\n\n  const props = defineProps<Props>()\n  const { t } = useTranslation()\n  const { openModal, closeModal } = useModal()\n  const { openNotification } = useNotification()\n  const { bemAdd, bemFacets } = useBem('c-task-block-quiz', props, {})\n  const { parseMarkdown } = useMarkdown()\n\n  const store = gameTaskStoreRefs[props.taskId] as Ref<GameTaskStoreQuizEntry>\n  const model = reactive<GameTaskStoreQuizEntry>({\n    id: props.taskId,\n    answers: props.questionList.reduce((acc, { id, answerList }) => {\n      const answers = store.value.answers ?? {}\n      acc[id] = answers[id] ?? (isMultipleChoice(answerList) ? [] : '')\n      return acc\n    }, {} as QuizStoreAnswersDict),\n    isCompleted: store.value.isCompleted,\n  })\n\n  const rootClasses = computed<Array<string>>(() => {\n    return [\n      ...bemFacets.value,\n      bemAdd(store.value.isCompleted ? 'is-completed' : ''),\n      bemAdd(store.value.isCompleted ? 'is-completed' : '', '', 's-task-block'),\n    ]\n  })\n  const activeQuestionIdx = ref<number>(0)\n  const activeQuestion = computed<QuizQuestionEntry>(() => {\n    return props.questionList[activeQuestionIdx.value]\n  })\n  const stepDisplay = computed<string>(() => {\n    return `${activeQuestionIdx.value + 1} / ${props.questionList.length}`\n  })\n\n  const isPrevDisabled = computed<boolean>(() => {\n    return activeQuestionIdx.value <= 0\n  })\n\n  const isNextDisabled = computed<boolean>(() => {\n    const isLast = activeQuestionIdx.value >= props.questionList.length - 1\n    const hasAnswer = hasAnswers(model.answers[activeQuestion.value.id])\n\n    return isLast || !hasAnswer\n  })\n\n  const isCompletedDisabled = computed<boolean>(() => {\n    return !hasAnswers(model.answers[activeQuestion.value.id])\n  })\n\n  const hasAnswers = (answers: string | Array<string>): boolean => {\n    if (Array.isArray(answers)) {\n      return answers.some(Boolean)\n    }\n\n    return !!answers\n  }\n\n  const checkSolution = (): boolean => {\n    const result = props.questionList.every(({ id, answerList }) => {\n      const answers = store.value.answers[id]\n      const solution = answerList.find(({ correct }) => correct)\n\n      if (isMultipleChoice(answerList)) {\n        return answerList.every(({ id, correct }) => {\n          const isIncluded = (answers as Array<string>).includes(id)\n          return isIncluded === !!correct\n        })\n      }\n\n      return (answers as string) === solution?.id\n    })\n\n    return result\n  }\n\n  const onRequestSave = () => {\n    store.value.answers = { ...model.answers }\n    store.value.isCompleted = model.isCompleted\n  }\n\n  const onRequestPrev = () => {\n    onRequestSave()\n    activeQuestionIdx.value = Math.max(0, activeQuestionIdx.value - 1)\n  }\n\n  const onRequestNext = () => {\n    onRequestSave()\n    activeQuestionIdx.value = Math.min(props.questionList.length - 1, activeQuestionIdx.value + 1)\n  }\n\n  const onRequestComplete = () => {\n    onRequestSave()\n    const isCorrect = checkSolution()\n\n    if (isCorrect) {\n      model.isCompleted = true\n      onRequestSave()\n      openNotification('overlay-notification-task-complete', 4000)\n    } else {\n      openModal('overlay-info-task-failed', {\n        props: {\n          facets: [OverlayContentModalFacet.Info],\n          actions: <Array<OverlayContentModalAction>>[\n            {\n              callback: closeModal,\n              label: t('overlay-info-task-failed.action-accept.label'),\n              btnFacets: ['primary', 'medium'],\n            },\n          ],\n        },\n      })\n    }\n  }\n</script>\n\n<template>\n  <div :class=\"rootClasses\" class=\"c-task-block-quiz s-task-block\">\n    <div class=\"s-task-block__box\">\n      <TaskBlockHeader :is-completed=\"store.isCompleted\" :title=\"title\" :type=\"type\" />\n\n      <div class=\"c-task-block-quiz__interactions s-task-block__interactions\">\n        <div class=\"c-task-block-quiz__header\">\n          <h2>{{ activeQuestionIdx + 1 }}. {{ activeQuestion.title }}</h2>\n        </div>\n        <div class=\"c-task-block-quiz__answers\">\n          <CheckboxList\n            v-if=\"isMultipleChoice(activeQuestion.answerList)\"\n            v-model=\"model.answers[activeQuestion.id]\"\n            :items=\"activeQuestion.answerList\"\n            class=\"c-task-block-quiz__answers-list\"\n          />\n          <RadioList\n            v-else\n            v-model=\"model.answers[activeQuestion.id]\"\n            :items=\"activeQuestion.answerList\"\n            class=\"c-task-block-quiz__answers-list\"\n          />\n        </div>\n        <div class=\"c-task-block-quiz__actions\">\n          <button\n            :disabled=\"isPrevDisabled ? true : null\"\n            class=\"btn btn--primary btn--medium\"\n            @click=\"onRequestPrev\"\n          >\n            {{ t('task-block-quiz.actions.prev') }}\n          </button>\n          <span class=\"c-task-block-quiz__step\">\n            {{ stepDisplay }}\n          </span>\n          <button\n            :disabled=\"isNextDisabled ? true : null\"\n            class=\"btn btn--primary btn--medium\"\n            @click=\"onRequestNext\"\n          >\n            {{ t('task-block-quiz.actions.next') }}\n          </button>\n          <button\n            v-if=\"activeQuestionIdx === questionList.length - 1 && !store.isCompleted\"\n            :disabled=\"isCompletedDisabled ? true : null\"\n            class=\"btn btn--primary btn--medium\"\n            @click=\"onRequestComplete\"\n          >\n            {{ t('task-block-quiz.actions.complete') }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use '@nirazul/scss-utils' as utils;\n  @use '/assets/scss/base/typography/typography' as type;\n  @use '/assets/scss/util/color/color' as col;\n  @use '/assets/scss/util/anaglyph/anaglyph' as anaglyph;\n  @use '/assets/scss/util/box' as box;\n\n  .c-task-block-quiz {\n    grid-column: 3 / 11;\n  }\n\n  .c-task-block-quiz--is-completed {\n    .c-task-block-quiz__answers {\n      pointer-events: none;\n    }\n  }\n\n  .c-task-block-quiz__interactions {\n    display: grid;\n    gap: 32px;\n  }\n\n  .c-task-block-quiz__answers {\n    display: grid;\n    grid-template-areas: '. answers-area .';\n    grid-template-columns: 1fr 6fr 1fr;\n  }\n\n  .c-task-block-quiz__answers-list {\n    grid-area: answers-area;\n  }\n\n  .c-task-block-quiz__actions {\n    display: flex;\n    justify-content: flex-end;\n    column-gap: 24px;\n  }\n\n  .c-task-block-quiz__step {\n    @include type.h4;\n    display: flex;\n    align-items: center;\n  }\n</style>\n"],"names":["isMultipleChoice","answerList","correct","gameTaskStore","useGameTaskStore","gameTaskStoreRefs","storeToRefs","t","useTranslation","openModal","closeModal","useModal","openNotification","useNotification","bemAdd","bemFacets","useBem","props","store","model","reactive","acc","id","answers","_a","_b","rootClasses","computed","activeQuestionIdx","ref","activeQuestion","stepDisplay","isPrevDisabled","isNextDisabled","isLast","hasAnswer","hasAnswers","isCompletedDisabled","checkSolution","solution","id2","onRequestSave","onRequestPrev","onRequestNext","onRequestComplete","OverlayContentModalFacet"],"mappings":"26CA8BEA,EAAAC,GACEA,EAAA,OAAA,CAAA,CAAA,QAAAC,CAAA,IAAAA,CAAA,EAAA,OAAA,EAGFC,EAAAC,IACAC,EAAAC,EAAAH,CAAA,EAGA,CAAA,EAAAI,GAAAC,IACA,CAAA,UAAAC,EAAA,WAAAC,CAAA,EAAAC,EAAA,EACA,CAAA,iBAAAC,GAAAC,KACA,CAAA,OAAAC,EAAA,UAAAC,CAAA,EAAAC,EAAA,oBAAAC,EAAA,CAAA,CAAA,EAGAC,EAAAb,EAAAY,EAAA,QACAE,EAAAC,EAAA,CAA+C,GAAAH,EAAA,OACnC,QAAAA,EAAA,aAAA,OAAA,CAAAI,EAAA,CAAA,GAAAC,EAAA,WAAArB,KAAA,SAER,MAAAsB,GAAAC,EAAAN,EAAA,MAAA,UAAA,KAAAM,EAAA,CAAA,EACA,OAAAH,EAAAC,IAAAG,EAAAF,EAAAD,KAAA,KAAAG,EAAAzB,EAAAC,CAAA,EAAA,GAAA,GACAoB,CAAO,EAAA,EAAA,EACoB,YAAAH,EAAA,MAAA,WACJ,CAAA,EAG3BQ,EAAAC,EAAA,IACE,CAAO,GAAAZ,EAAA,MACQD,EAAAI,EAAA,MAAA,YAAA,eAAA,EAAA,EACuCJ,EAAAI,EAAA,MAAA,YAAA,eAAA,GAAA,GAAA,cAAA,CACoB,CAC1E,EAEFU,EAAAC,EAAA,CAAA,EACAC,EAAAH,EAAA,IACEV,EAAA,aAAAW,EAAA,MAA4C,EAE9CG,EAAAJ,EAAA,IACE,GAAAC,EAAA,MAAA,OAAAX,EAAA,aAAA,QAA8D,EAGhEe,EAAAL,EAAA,IACEC,EAAA,OAAA,CAAkC,EAGpCK,EAAAN,EAAA,IAAA,CACE,MAAAO,EAAAN,EAAA,OAAAX,EAAA,aAAA,OAAA,EACAkB,EAAAC,EAAAjB,EAAA,QAAAW,EAAA,MAAA,GAAA,EAEA,OAAAI,GAAA,CAAAC,CAAkB,CAAA,EAGpBE,EAAAV,EAAA,IACE,CAAAS,EAAAjB,EAAA,QAAAW,EAAA,MAAA,GAAA,CAAyD,EAG3DM,EAAAb,GACE,MAAA,QAAAA,CAAA,EACEA,EAAA,KAAA,OAAA,EAGF,CAAA,CAAAA,EAGFe,EAAA,IACErB,EAAA,aAAA,MAAA,CAAA,CAAA,GAAAK,EAAA,WAAArB,KAAA,CACE,MAAAsB,EAAAL,EAAA,MAAA,QAAAI,GACAiB,EAAAtC,EAAA,KAAA,CAAA,CAAA,QAAAC,CAAA,IAAAA,CAAA,EAEA,OAAAF,EAAAC,CAAA,EACEA,EAAA,MAAA,CAAA,CAAA,GAAAuC,EAAA,QAAAtC,KACEqB,EAAA,SAAAiB,CAAA,IACA,CAAA,CAAAtC,CAAwB,EAI5BqB,KAAAgB,GAAA,YAAAA,EAAA,GAAyC,CAAA,EAM7CE,EAAA,IAAA,CACEvB,EAAA,MAAA,QAAA,CAAA,GAAAC,EAAA,OAAA,EACAD,EAAA,MAAA,YAAAC,EAAA,WAAgC,EAGlCuB,EAAA,IAAA,CACED,IACAb,EAAA,MAAA,KAAA,IAAA,EAAAA,EAAA,MAAA,CAAA,CAAiE,EAGnEe,EAAA,IAAA,CACEF,IACAb,EAAA,MAAA,KAAA,IAAAX,EAAA,aAAA,OAAA,EAAAW,EAAA,MAAA,CAAA,CAA6F,EAG/FgB,EAAA,IAAA,CACEH,IACAH,KAGEnB,EAAA,YAAA,GACAsB,IACA7B,EAAA,qCAAA,GAAA,GAEAH,EAAA,2BAAA,CAAsC,MAAA,CAC7B,OAAA,CAAAoC,GAAA,IAAA,EACiC,QAAA,CACK,CACzC,SAAAnC,EACY,MAAAH,EAAA,8CAAA,EAC6C,UAAA,CAAA,UAAA,QAAA,CACxB,CACjC,CACF,CACF,CAAA,CAEJ"}