115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import * as log from 'loglevel';
|
|
import {computed, reactive} from 'vue';
|
|
import {useCircleStore} from '@/stores/circle';
|
|
|
|
log.debug('LearningContent.vue setup');
|
|
|
|
const circleStore = useCircleStore();
|
|
|
|
const state = reactive({
|
|
questionIndex: 0,
|
|
});
|
|
|
|
const questions = computed(() => circleStore.currentSelfEvaluation!.children);
|
|
const currentQuestion = computed(() => questions.value[state.questionIndex]);
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<nav
|
|
class="
|
|
px-4 lg:px-8
|
|
py-4
|
|
flex justify-between items-center
|
|
border-b border-gray-500
|
|
"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn-text inline-flex items-center px-3 py-2 font-normal"
|
|
@click="circleStore.closeSelfEvaluation()"
|
|
>
|
|
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
|
|
<span class="hidden lg:inline">zurück zum Circle</span>
|
|
</button>
|
|
|
|
<h1 class="text-xl hidden lg:block">{{ circleStore.currentSelfEvaluation.title }}</h1>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn-blue"
|
|
@click="handleContinue()"
|
|
>
|
|
Weiter
|
|
</button>
|
|
</nav>
|
|
|
|
|
|
<div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">
|
|
|
|
<div class="mt-2 lg:mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
|
|
|
|
<p class="text-xl mt-4">
|
|
Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
|
|
Lies die folgende Aussage und bewerte sie:
|
|
</p>
|
|
|
|
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
|
|
<h2 class="heading-2">{{ currentQuestion.title }}</h2>
|
|
|
|
<div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
|
|
<button
|
|
@click="circleStore.markCompletion(currentQuestion, true)"
|
|
class="flex-1 inline-flex items-center text-left p-4 border"
|
|
:class="{
|
|
'border-green-500': currentQuestion.completed,
|
|
'border-2': currentQuestion.completed,
|
|
'border-gray-500': !currentQuestion.completed,
|
|
}"
|
|
>
|
|
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
|
|
<span class="font-bold text-xl">
|
|
Ja, ich kann das.
|
|
</span>
|
|
</button>
|
|
<button
|
|
@click="circleStore.markCompletion(currentQuestion, false)"
|
|
class="flex-1 inline-flex items-center text-left p-4 border"
|
|
:class="{
|
|
'border-orange-500': currentQuestion.completed === false,
|
|
'border-2': currentQuestion.completed === false,
|
|
'border-gray-500': currentQuestion.completed === true || currentQuestion.completed === undefined,
|
|
}"
|
|
>
|
|
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
|
|
<span class="font-bold text-xl">
|
|
Das muss ich nochmals anschauen.
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 lg:mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|