119 lines
4.2 KiB
Vue
119 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { useCircleStore } from "@/stores/circle";
|
|
import type { LearningUnit } from "@/types";
|
|
import * as log from "loglevel";
|
|
|
|
import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
|
|
import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { computed, reactive } from "vue";
|
|
import LearningContentNavigation from "./LearningContentNavigation.vue";
|
|
|
|
log.debug("LearningContent.vue setup");
|
|
|
|
const circleStore = useCircleStore();
|
|
const courseSession = useCourseSessionsStore();
|
|
|
|
const state = reactive({
|
|
questionIndex: 0,
|
|
});
|
|
|
|
const props = defineProps<{
|
|
learningUnit: LearningUnit;
|
|
}>();
|
|
|
|
const questions = computed(() => props.learningUnit?.children);
|
|
const currentQuestion = computed(() => questions.value[state.questionIndex]);
|
|
const showBackButton = computed(() => state.questionIndex != 0);
|
|
|
|
function handleContinue() {
|
|
log.debug("handleContinue");
|
|
if (state.questionIndex + 1 < questions.value.length) {
|
|
log.debug("increment questionIndex", state.questionIndex);
|
|
state.questionIndex += 1;
|
|
} else {
|
|
log.debug("continue to next learning content");
|
|
circleStore.continueFromSelfEvaluation(props.learningUnit);
|
|
}
|
|
}
|
|
|
|
function handleBack() {
|
|
log.debug("handleBack");
|
|
if (state.questionIndex > 0 && state.questionIndex < questions.value.length) {
|
|
state.questionIndex -= 1;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="learningUnit">
|
|
<LearningContentContainer
|
|
:title="$t('selfEvaluation.title', { title: learningUnit.title })"
|
|
:next-button-text="$t('learningContent.completeAndContinue')"
|
|
:show-border="false"
|
|
@exit="circleStore.closeSelfEvaluation(props.learningUnit)"
|
|
@next="circleStore.closeSelfEvaluation(props.learningUnit)"
|
|
>
|
|
<div class="container-medium h-full">
|
|
<div class="mt-8 lg:mt-40">
|
|
<h2 class="heading-2">
|
|
{{ currentQuestion.competence_id }} {{ currentQuestion.title }}
|
|
</h2>
|
|
|
|
<div
|
|
class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
|
|
>
|
|
<button
|
|
class="inline-flex flex-1 items-center border p-4 text-left"
|
|
:class="{
|
|
'border-green-500': currentQuestion.completion_status === 'success',
|
|
'border-2': currentQuestion.completion_status === 'success',
|
|
}"
|
|
data-cy="success"
|
|
@click="circleStore.markCompletion(currentQuestion, COMPLETION_SUCCESS)"
|
|
>
|
|
<it-icon-smiley-happy class="mr-4 h-16 w-16"></it-icon-smiley-happy>
|
|
<span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}.</span>
|
|
</button>
|
|
<button
|
|
class="inline-flex flex-1 items-center border p-4 text-left"
|
|
:class="{
|
|
'border-orange-500':
|
|
currentQuestion.completion_status === COMPLETION_FAILURE,
|
|
'border-2': currentQuestion.completion_status === COMPLETION_FAILURE,
|
|
}"
|
|
data-cy="fail"
|
|
@click="circleStore.markCompletion(currentQuestion, 'fail')"
|
|
>
|
|
<it-icon-smiley-thinking class="mr-4 h-16 w-16"></it-icon-smiley-thinking>
|
|
<span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}.</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 lg:mt-12">
|
|
{{ $t("selfEvaluation.progressText") }}
|
|
<router-link
|
|
:to="courseSession.courseSessionForRoute?.competence_url || '/'"
|
|
class="text-primary-500 underline"
|
|
>
|
|
{{ $t("selfEvaluation.progressLink") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<LearningContentNavigation
|
|
:show-next-button="
|
|
questions.length > 1 && state.questionIndex + 1 < questions.length
|
|
"
|
|
:show-back-button="showBackButton"
|
|
:question-index="state.questionIndex"
|
|
:max-question-index="questions.length"
|
|
@back="handleBack"
|
|
@continue="handleContinue"
|
|
></LearningContentNavigation>
|
|
</div>
|
|
</LearningContentContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|