Step through circle
This commit is contained in:
parent
3686924cfe
commit
500ed0f111
|
|
@ -41,7 +41,7 @@ const block = computed(() => {
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-blue"
|
class="btn-blue"
|
||||||
@click="circleStore.continueToNextLearningContent()"
|
@click="circleStore.continueFromLearningContent()"
|
||||||
>
|
>
|
||||||
Abschliessen und weiter
|
Abschliessen und weiter
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ const someFinished = computed(() => {
|
||||||
<div
|
<div
|
||||||
v-for="learningUnit in learningSequence.learningUnits"
|
v-for="learningUnit in learningSequence.learningUnits"
|
||||||
:key="learningUnit.id"
|
:key="learningUnit.id"
|
||||||
class="py-3"
|
class="pt-3"
|
||||||
>
|
>
|
||||||
<div class="pb-3 flex gap-4" v-if="learningUnit.title">
|
<div class="pb-3 flex gap-4" v-if="learningUnit.title">
|
||||||
<div class="font-bold">{{ learningUnit.title }}</div>
|
<div class="font-bold">{{ learningUnit.title }}</div>
|
||||||
|
|
@ -94,7 +94,7 @@ const someFinished = computed(() => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="-mx-4 text-gray-500">
|
<hr v-if="!learningUnit.last" class="-mx-4 text-gray-500">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,29 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import * as log from 'loglevel';
|
import * as log from 'loglevel';
|
||||||
import {computed} from 'vue';
|
import {computed, reactive} from 'vue';
|
||||||
import {useCircleStore} from '@/stores/circle';
|
import {useCircleStore} from '@/stores/circle';
|
||||||
|
|
||||||
log.debug('LearningContent.vue setup');
|
log.debug('LearningContent.vue setup');
|
||||||
|
|
||||||
const circleStore = useCircleStore();
|
const circleStore = useCircleStore();
|
||||||
|
|
||||||
const questions = computed(() => circleStore.currentSelfEvaluation?.children);
|
const state = reactive({
|
||||||
let questionIndex = 0;
|
questionIndex: 0,
|
||||||
const currentQuestion = computed(() => questions.value[questionIndex]);
|
});
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -37,7 +51,7 @@ const currentQuestion = computed(() => questions.value[questionIndex]);
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-blue"
|
class="btn-blue"
|
||||||
@click="circleStore.continueToNextLearningContent()"
|
@click="handleContinue()"
|
||||||
>
|
>
|
||||||
Weiter
|
Weiter
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -46,7 +60,7 @@ const currentQuestion = computed(() => questions.value[questionIndex]);
|
||||||
|
|
||||||
<div class="mx-auto max-w-6xl px-8 py-4">
|
<div class="mx-auto max-w-6xl px-8 py-4">
|
||||||
|
|
||||||
<div class="mt-8 text-gray-700">Schritt {{ questionIndex + 1 }} von {{ questions.length }}</div>
|
<div class="mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
|
||||||
|
|
||||||
<p class="text-xl mt-4">
|
<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>
|
Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ function createEmptyLearningUnit(parentLearningSequence: LearningSequence): Lear
|
||||||
minutes: 0,
|
minutes: 0,
|
||||||
parentLearningSequence: parentLearningSequence,
|
parentLearningSequence: parentLearningSequence,
|
||||||
children: [],
|
children: [],
|
||||||
|
last: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -26,6 +27,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
|
||||||
if (child.type === 'learnpath.LearningSequence') {
|
if (child.type === 'learnpath.LearningSequence') {
|
||||||
if (learningSequence) {
|
if (learningSequence) {
|
||||||
if (learningUnit) {
|
if (learningUnit) {
|
||||||
|
learningUnit.last = true;
|
||||||
learningSequence.learningUnits.push(learningUnit);
|
learningSequence.learningUnits.push(learningUnit);
|
||||||
}
|
}
|
||||||
result.push(learningSequence);
|
result.push(learningSequence);
|
||||||
|
|
@ -74,6 +76,7 @@ export function parseLearningSequences (children: CircleChild[]): LearningSequen
|
||||||
|
|
||||||
if (learningUnit && learningSequence) {
|
if (learningUnit && learningSequence) {
|
||||||
// TypeScript does not get it here...
|
// TypeScript does not get it here...
|
||||||
|
learningUnit.last = true;
|
||||||
(learningSequence as LearningSequence).learningUnits.push(learningUnit);
|
(learningSequence as LearningSequence).learningUnits.push(learningUnit);
|
||||||
result.push(learningSequence);
|
result.push(learningSequence);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -104,17 +104,42 @@ export const useCircleStore = defineStore({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
},
|
||||||
,
|
continueFromLearningContent() {
|
||||||
continueToNextLearningContent() {
|
|
||||||
if (this.currentLearningContent) {
|
if (this.currentLearningContent) {
|
||||||
this.markCompletion(this.currentLearningContent, true);
|
this.markCompletion(this.currentLearningContent, true);
|
||||||
if (this.currentLearningContent.nextLearningContent) {
|
|
||||||
|
const nextLearningContent = this.currentLearningContent.nextLearningContent;
|
||||||
|
const currentParent = this.currentLearningContent.parentLearningUnit;
|
||||||
|
const nextParent = nextLearningContent?.parentLearningUnit;
|
||||||
|
|
||||||
|
if (
|
||||||
|
currentParent && currentParent.id &&
|
||||||
|
currentParent.id !== nextParent?.id &&
|
||||||
|
currentParent.children.length > 0
|
||||||
|
) {
|
||||||
|
// go to self evaluation
|
||||||
|
this.openSelfEvaluation(currentParent);
|
||||||
|
} else if (this.currentLearningContent.nextLearningContent) {
|
||||||
this.openLearningContent(this.currentLearningContent.nextLearningContent);
|
this.openLearningContent(this.currentLearningContent.nextLearningContent);
|
||||||
|
} else {
|
||||||
|
this.closeLearningContent();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
log.error('currentLearningContent is undefined');
|
log.error('currentLearningContent is undefined');
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
continueFromSelfEvaluation() {
|
||||||
|
if (this.currentSelfEvaluation) {
|
||||||
|
const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
|
||||||
|
if (nextContent) {
|
||||||
|
this.openLearningContent(nextContent);
|
||||||
|
} else {
|
||||||
|
this.closeSelfEvaluation();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
log.error('currentSelfEvaluation is undefined');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@ export interface LearningUnit extends LearningWagtailPage {
|
||||||
minutes: number;
|
minutes: number;
|
||||||
parentLearningSequence?: LearningSequence;
|
parentLearningSequence?: LearningSequence;
|
||||||
children: LearningUnitQuestion[];
|
children: LearningUnitQuestion[];
|
||||||
|
last?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LearningSequence extends LearningWagtailPage {
|
export interface LearningSequence extends LearningWagtailPage {
|
||||||
|
|
|
||||||
|
|
@ -114,6 +114,10 @@ Fachspezialisten bei.
|
||||||
title="Ich bin in der Lage, mit geeigneten Fragestellungen die Deckung von Versicherungen zu erfassen.",
|
title="Ich bin in der Lage, mit geeigneten Fragestellungen die Deckung von Versicherungen zu erfassen.",
|
||||||
parent=lu
|
parent=lu
|
||||||
)
|
)
|
||||||
|
LearningUnitQuestionFactory(
|
||||||
|
title="Zweite passende Frage zu 'Absicherung der Familie'",
|
||||||
|
parent=lu
|
||||||
|
)
|
||||||
LearningContentFactory(
|
LearningContentFactory(
|
||||||
title='Ermittlung des Kundenbedarfs',
|
title='Ermittlung des Kundenbedarfs',
|
||||||
parent=circe_analyse,
|
parent=circe_analyse,
|
||||||
|
|
@ -137,7 +141,11 @@ Fachspezialisten bei.
|
||||||
)
|
)
|
||||||
|
|
||||||
LearningSequenceFactory(title='Anwenden', parent=circe_analyse, icon='it-icon-ls-apply')
|
LearningSequenceFactory(title='Anwenden', parent=circe_analyse, icon='it-icon-ls-apply')
|
||||||
LearningUnitFactory(title='Prämien einsparen', parent=circe_analyse)
|
lu = LearningUnitFactory(title='Prämien einsparen', parent=circe_analyse)
|
||||||
|
LearningUnitQuestionFactory(
|
||||||
|
title="Passende Frage zu Anwenden",
|
||||||
|
parent=lu
|
||||||
|
)
|
||||||
LearningContentFactory(
|
LearningContentFactory(
|
||||||
title='Versicherungsbedarf für Familien',
|
title='Versicherungsbedarf für Familien',
|
||||||
parent=circe_analyse,
|
parent=circe_analyse,
|
||||||
|
|
@ -151,7 +159,11 @@ Fachspezialisten bei.
|
||||||
contents=[('exercise', ExerciseBlockFactory())]
|
contents=[('exercise', ExerciseBlockFactory())]
|
||||||
)
|
)
|
||||||
|
|
||||||
LearningUnitFactory(title='Sich selbständig machen', parent=circe_analyse)
|
lu = LearningUnitFactory(title='Sich selbständig machen', parent=circe_analyse)
|
||||||
|
LearningUnitQuestionFactory(
|
||||||
|
title="Passende Frage zu 'Sich selbständig machen'",
|
||||||
|
parent=lu
|
||||||
|
)
|
||||||
LearningContentFactory(
|
LearningContentFactory(
|
||||||
title='GmbH oder AG',
|
title='GmbH oder AG',
|
||||||
parent=circe_analyse,
|
parent=circe_analyse,
|
||||||
|
|
@ -165,7 +177,11 @@ Fachspezialisten bei.
|
||||||
contents=[('exercise', ExerciseBlockFactory())]
|
contents=[('exercise', ExerciseBlockFactory())]
|
||||||
)
|
)
|
||||||
|
|
||||||
LearningUnitFactory(title='Auto verkaufen', parent=circe_analyse)
|
lu = LearningUnitFactory(title='Auto verkaufen', parent=circe_analyse)
|
||||||
|
LearningUnitQuestionFactory(
|
||||||
|
title='Passende Frage zu "Auto verkaufen"',
|
||||||
|
parent=lu
|
||||||
|
)
|
||||||
LearningContentFactory(
|
LearningContentFactory(
|
||||||
title='Motorfahrzeugversicherung',
|
title='Motorfahrzeugversicherung',
|
||||||
parent=circe_analyse,
|
parent=circe_analyse,
|
||||||
|
|
@ -192,7 +208,11 @@ Fachspezialisten bei.
|
||||||
)
|
)
|
||||||
|
|
||||||
LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice')
|
LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice')
|
||||||
LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse)
|
lu = LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse)
|
||||||
|
LearningUnitQuestionFactory(
|
||||||
|
title='Passende Frage zu "Kind zieht von zu Hause aus"',
|
||||||
|
parent=lu
|
||||||
|
)
|
||||||
LearningContentFactory(
|
LearningContentFactory(
|
||||||
title='Hausrat',
|
title='Hausrat',
|
||||||
parent=circe_analyse,
|
parent=circe_analyse,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue