Adaptive learning: Explain course competency view (#9511)

src/main/webapp/app/course/competencies/competency-management/competency-management.component.html

@@ -1,7 +1,12 @@
 <div>
     <div class="d-flex flex-wrap mt-4">
-        <h2 jhiTranslate="artemisApp.competency.manage.title"></h2>
-        <jhi-documentation-button [type]="documentationType" />
+        <div class="d-flex justify-content-center align-items-center">
+            <h2 class="m-0" jhiTranslate="artemisApp.competency.manage.title"></h2>
+            <button class="ms-3 btn btn-sm btn-warning" (click)="openCourseCompetencyExplanation()">
+                <fa-icon [icon]="faCircleQuestion" />
+                <span jhiTranslate="artemisApp.courseCompetency.manage.helpButton"></span>
+            </button>
+        </div>
         <div class="ms-auto justify-content-end">
             @if (irisCompetencyGenerationEnabled) {
                 <a class="btn btn-primary" id="generateButton" [routerLink]="['/course-management', courseId, 'competency-management', 'generate']">

src/main/webapp/app/course/competencies/competency-management/competency-management.component.ts

@@ -13,7 +13,7 @@ import {
 } from 'app/entities/competency.model';
 import { onError } from 'app/shared/util/global.utils';
 import { Subject, Subscription } from 'rxjs';
-import { faFileImport, faPencilAlt, faPlus, faRobot, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion, faFileImport, faPencilAlt, faPlus, faRobot, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentationType } from 'app/shared/components/documentation-button/documentation-button.component';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
@@ -28,6 +28,7 @@ import {
     ImportAllCourseCompetenciesResult,
 } from 'app/course/competencies/components/import-all-course-competencies-modal/import-all-course-competencies-modal.component';
 import { CourseCompetencyApiService } from 'app/course/competencies/services/course-competency-api.service';
+import { CourseCompetencyExplanationModalComponent } from 'app/course/competencies/components/course-competency-explanation-modal/course-competency-explanation-modal.component';
 
 @Component({
     selector: 'jhi-competency-management',
@@ -53,28 +54,34 @@ export class CompetencyManagementComponent implements OnInit, OnDestroy {
     protected readonly faTrash = faTrash;
     protected readonly faPencilAlt = faPencilAlt;
     protected readonly faRobot = faRobot;
+    protected readonly faCircleQuestion = faCircleQuestion;
 
     // other constants
     readonly getIcon = getIcon;
     readonly documentationType: DocumentationType = 'Competencies';
     readonly CourseCompetencyType = CourseCompetencyType;
 
     // Injected services
-    private readonly activatedRoute: ActivatedRoute = inject(ActivatedRoute);
-    private readonly courseCompetencyApiService: CourseCompetencyApiService = inject(CourseCompetencyApiService);
-    private readonly alertService: AlertService = inject(AlertService);
-    private readonly modalService: NgbModal = inject(NgbModal);
-    private readonly profileService: ProfileService = inject(ProfileService);
-    private readonly irisSettingsService: IrisSettingsService = inject(IrisSettingsService);
-    private readonly translateService: TranslateService = inject(TranslateService);
-    private readonly featureToggleService: FeatureToggleService = inject(FeatureToggleService);
+    private readonly activatedRoute = inject(ActivatedRoute);
+    private readonly courseCompetencyApiService = inject(CourseCompetencyApiService);
+    private readonly alertService = inject(AlertService);
+    private readonly modalService = inject(NgbModal);
+    private readonly profileService = inject(ProfileService);
+    private readonly irisSettingsService = inject(IrisSettingsService);
+    private readonly translateService = inject(TranslateService);
+    private readonly featureToggleService = inject(FeatureToggleService);
 
     ngOnInit(): void {
         this.activatedRoute.parent!.params.subscribe(async (params) => {
             this.courseId = Number(params['courseId']);
             await this.loadData();
             this.loadIrisEnabled();
         });
+        const lastVisit = sessionStorage.getItem('lastTimeVisitedCourseCompetencyExplanation');
+        if (!lastVisit) {
+            this.openCourseCompetencyExplanation();
+        }
+        sessionStorage.setItem('lastTimeVisitedCourseCompetencyExplanation', Date.now().toString());
         this.standardizedCompetencySubscription = this.featureToggleService.getFeatureToggleActive(FeatureToggle.StandardizedCompetencies).subscribe((isActive) => {
             this.standardizedCompetenciesEnabled = isActive;
         });
@@ -229,4 +236,12 @@ export class CompetencyManagementComponent implements OnInit, OnDestroy {
         this.relations = this.relations.filter((relation) => relation.tailCompetency?.id !== competencyId && relation.headCompetency?.id !== competencyId);
         this.courseCompetencies = this.competencies.concat(this.prerequisites);
     }
+
+    openCourseCompetencyExplanation(): void {
+        this.modalService.open(CourseCompetencyExplanationModalComponent, {
+            size: 'xl',
+            backdrop: 'static',
+            windowClass: 'course-competency-explanation-modal',
+        });
+    }
 }

src/main/webapp/app/course/competencies/components/course-competency-explanation-modal/course-competency-explanation-modal.component.html

@@ -0,0 +1,59 @@
+<div class="course-competency-explanation-modal">
+    <div class="col p-3">
+        <div class="row m-0">
+            <span class="col p-0 h5 m-0 align-self-center" jhiTranslate="artemisApp.courseCompetency.featureExplanation.title"></span>
+            <fa-icon id="close-button" (click)="closeModal()" [icon]="closeIcon" class="col-md-auto h5 clickable m-0 p-1 pe-0" />
+        </div>
+    </div>
+    <hr class="m-0" />
+    <div class="h-100 p-3">
+        <div>
+            <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.title1"></h5>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.paragraph1"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.paragraph2"></p>
+
+            <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.title2"></h5>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.paragraph3"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.adaptiveLearning.paragraph4"></p>
+        </div>
+        <hr />
+        <div>
+            <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.title"></h5>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph1"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph2"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph3"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph4"></p>
+            <img src="public/videos/course-competencies/create-competencies.gif" alt="How to create a course competency" />
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph5" [translateValues]="{ link: DOCUMENTATION_LINK }"></p>
+        </div>
+        <hr />
+        <div>
+            <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.title"></h5>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph1"></p>
+
+            <strong><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph2"></p> </strong>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph3"></p>
+            <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph4"></p>
+            <img src="public/videos/course-competencies/create-course-competency-relations.gif" alt="How to create a course competency" />
+
+            <div class="mt-3">
+                <h6 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationTitle1"></h6>
+                <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph1"></p>
+                <strong><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.exampleLabel"></p> </strong>
+                <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph2"></p>
+            </div>
+            <div>
+                <h6 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationTitle2"></h6>
+                <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph3"></p>
+                <strong><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.exampleLabel"></p> </strong>
+                <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph4"></p>
+            </div>
+            <div>
+                <h6 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationTitle3"></h6>
+                <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph5"></p>
+                <strong><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.exampleLabel"></p> </strong>
+                <p class="mb-0" jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationParagraph6"></p>
+            </div>
+        </div>
+    </div>
+</div>

src/main/webapp/app/course/competencies/components/course-competency-explanation-modal/course-competency-explanation-modal.component.ts

@@ -0,0 +1,24 @@
+import { Component, inject } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { CompetencyGraphComponent } from 'app/course/learning-paths/components/competency-graph/competency-graph.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+
+@Component({
+    selector: 'jhi-course-competency-explanation-modal',
+    standalone: true,
+    imports: [CompetencyGraphComponent, TranslateDirective, FontAwesomeModule],
+    templateUrl: './course-competency-explanation-modal.component.html',
+})
+export class CourseCompetencyExplanationModalComponent {
+    protected readonly closeIcon = faXmark;
+
+    protected readonly DOCUMENTATION_LINK = 'https://docs.artemis.cit.tum.de/user/adaptive-learning/';
+
+    private readonly activeModal = inject(NgbActiveModal);
+
+    protected closeModal(): void {
+        this.activeModal.close();
+    }
+}

src/main/webapp/i18n/de/competency.json

@@ -172,6 +172,7 @@
             "softDueDate": "Empfohlen bis",
             "masteryThreshold": "Schwellwert zum Erreichen der Kompetenz",
             "manage": {
+                "helpButton": "Hilfe",
                 "importAllButton": "Alles eines Kurses importieren"
             },
             "importSettings": {
@@ -240,6 +241,42 @@
                     "noOfParticipants": "Anzahl der Teilnehmenden",
                     "participationRate": "Teilnahmerate"
                 }
+            },
+            "featureExplanation": {
+                "title": "Einführung in Kurskompetenzen",
+                "adaptiveLearning": {
+                    "title1": "Was bedeutet adaptives Lernen?",
+                    "paragraph1": "Adaptives Lernen schneidet die Lerninhalte auf die individuellen Bedürfnisse jedes einzelnen Studierenden zu und passt sie in Echtzeit an seine Leistungen an. Durch personalisierte Unterstützung und Herausforderungen hilft es den Studierenden, effizienter zu lernen, sich zu engagieren und den Lernstoff in ihrem eigenen Tempo zu bewältigen.",
+                    "paragraph2": "Im Artemis bilden Kompetenzen die Grundlage für Adaptives Lernen. Sie sind übergreifende Lernziele, die durch die Interaktion mit verschiedenen Vorlesungen und Übungen erreicht werden können. Basierend auf diesen Kompetenzmodellen kann Artemis den Studierenden personalisierte Lernpfade anbieten, die ihren individuellen Bedürfnissen entsprechen.",
+                    "title2": "Warum?",
+                    "paragraph3": "Der kompetenzbasierte Unterricht ermöglicht es den Studierenden, sich die Fähigkeiten in ihrem eigenen Tempo anzueignen, was echte Fortschritte und Selbstvertrauen gewährleistet. Sie schafft eine personalisierte, ansprechende Lernerfahrung, die zu besseren Ergebnissen und langfristigem Erfolg führt. Auch ohne Lernpfade profitieren die Studierenden von der Möglichkeit, ihre Fortschritte zu verfolgen.",
+                    "paragraph4": "Durch Lernpfade erhalten die Studierenden Empfehlungen zur Unterstützung ihrer Lernanstrengungen. So wird es für sie einfacher, alle erforderlichen Kompetenzen eines Kurses zu beherrschen."
+                },
+                "courseCompetencyCreation": {
+                    "title": "Wie erstellt man eine Kurskompetenz?",
+                    "paragraph1": "Im Allgemeinen unterscheiden wir zwischen einer Kompetenz und einer Voraussetzung.",
+                    "paragraph2": "Um eine Kompetenz zu erstellen, klicke auf die Schaltfläche „Kompetenz erstellen“ am oberen Rand der Kompetenzseite. Auf der Erstellungsseite kann eindeutiger Name und eine passende Beschreibung für die Kompetenz angeben werden. Außerdem gibt es die Möglichkeit, ein empfohlenes Abschlussdatum festzulegen, das den Lernenden anzeigt, bis wann sie die verbundenen Lernobjekte beherrschen sollten.",
+                    "paragraph3": "Im Kompetenzbereich kann auch eine Taxonomie hinzugefügt werden, um den Studierenden einen besseren Einblick in den Zweck des Kompetenzbereichs zu geben. Wenn bestimmte Lernobjekte innerhalb dieses Kompetenzbereichs optional sind, kann eine Schwelle festgelegt werden, ab der der Kompetenzbereich als beherrscht gilt. Es gibt auch die Möglichkeit, den gesamten Kompetenzbereich als optional zu kennzeichnen.",
+                    "paragraph4": "Außerdem können Vorlesungseinheiten direkt mit dem Kompetenzbereich verknüpft werden. Es können zwar auch Übungen mit einem Kompetenzbereich verknüpft werden, dies muss jedoch in der Ansicht zur Bearbeitung/Erstellung von Übungen geschehen.",
+                    "paragraph5": "Neben der Möglichkeit, Kompetenzen oder Voraussetzungen selbst zu erstellen, besteht auch die Möglichkeit, diese aus anderen Kursen zu importieren oder standardisierte Kompetenzen zu verwenden. Weitere Informationen zu diesem Prozess enthält das <a href={{ link }} target=\"_blank\">Benutzerhandbuch für Artemis.</a>"
+                },
+                "courseCompetencyRelations": {
+                    "title": "Was sind Relationen zwischen Kurskompetenzen?",
+                    "paragraph1": "Lernkompetenzen können aufeinander aufbauen oder voneinander abhängig sein, weshalb Sie verschiedene Arten von Beziehungen zwischen ihnen herstellen können. Die Kompetenzen können sich entweder \"Stimmt überein mit\", \"Erweitert\" oder \"Setzt voraus\". Im Folgenden werden diese Beziehungen ausführlich beschrieben.",
+                    "paragraph2": "Zusammenfassend:",
+                    "paragraph3": "Bei \"Stimmt überein mit\" geht es um die Gleichwertigkeit zweier Fähigkeiten.<br />\"Erweitert\" bedeutet, dass man auf einer vorhandenen Fähigkeit aufbaut.<br />\"Setzt voraus\" bedeutet, dass eine Fähigkeit Voraussetzung für eine andere ist.",
+                    "paragraph4": "Um diese Beziehungen zu erstellen, öffne das Modal „Beziehungen bearbeiten“. In diesem Modal kann man die verbundenen Kompetenzen auswählen oder nacheinander auf jede einzelne klicken. Danach kann der gewünschte Beziehungstyp gewählt und die Beziehung erstellt werden. Um eine Beziehung zu aktualisieren oder zu löschen, klicke einfach auf die betreffende Beziehung und aktualisiere entweder den Beziehungstyp im Formular oder lösche ihn.",
+                    "relationTitle1": "1. Stimmt überein mit",
+                    "relationParagraph1": "Diese Beziehung impliziert, dass zwei Kompetenzen auf demselben Niveau sind und dieselben Fähigkeiten und Anforderungen abdecken. Wenn man die eine hat, hat man auch schon die andere, und sie können als austauschbar betrachtet werden.",
+                    "exampleLabel": "Beispiel:",
+                    "relationParagraph2": "Kompetenz A: Balancieren auf einem stationären Fahrrad. Kompetenz B: Auf einem Bein stehen (balancieren, ohne sich zu bewegen). Hier könnte das Balancieren auf einem stationären Fahrrad „stimmt überein mit“ mit dem Balancieren auf einem Bein sein, da beide die gleiche grundlegende Fähigkeit des Gleichgewichts erfordern. Wenn du das eine kannst, kannst du höchstwahrscheinlich auch das andere, da die Kernkompetenz (Gleichgewicht) in beiden Szenarien dieselbe ist.",
+                    "relationTitle2": "2. Erweitert",
+                    "relationParagraph3": "Diese Beziehung bedeutet, dass eine Kompetenz auf einer anderen aufbaut, indem sie komplexer oder umfangreicher wird. Mit anderen Worten: Wenn du eine Kompetenz beherrschst, kannst du zur Beherrschung der erweiterten Kompetenz übergehen, die diese Fähigkeit weiter ausbaut.",
+                    "relationParagraph4": "Kompetenz A: Mit dem Fahrrad in einer geraden Linie fahren. Kompetenz B: Mit dem Fahrrad um Kurven und Abbiegungen fahren. Das Fahren in einer geraden Linie ist die grundlegende Fähigkeit, die sich auf das Fahren in Kurven und beim Abbiegen ausweitet. Kompetenz B erweitert Kompetenz A um die Notwendigkeit, Richtungsänderungen zu bewältigen und dabei das Gleichgewicht und die Kontrolle zu behalten. Sobald du in einer geraden Linie fahren kannst, bist du bereit, diese Fähigkeit auf komplexere Fahrszenarien auszuweiten.",
+                    "relationTitle3": "3. Setzt voraus",
+                    "relationParagraph5": "Diese Beziehung impliziert, dass eine Kompetenz davon abhängt, dass eine andere bereits beherrscht wird. Um die fortgeschrittenere Kompetenz ausüben zu können, muss der Lernende zunächst die zugrunde liegende Fähigkeit oder das Wissen besitzen.",
+                    "relationParagraph6": "Kompetenz A: Sicheres Fahren mit dem Fahrrad in flachem Gelände. Kompetenz B: Mit dem Fahrrad bergauf fahren. Das Fahren mit dem Fahrrad bergauf setzt voraus, dass der Lernende bereits das Fahren auf ebenem Gelände beherrscht. Die Beherrschung des Fahrens in der Ebene ist eine Voraussetzung, da das Fahren bergauf einen größeren Widerstand darstellt und zusätzliche Kraft und Technik erfordert. Ohne die Beherrschung der grundlegenden Fähigkeiten des Fahrens in der Ebene ist der Lernende nicht in der Lage, das Fahren bergauf in Angriff zu nehmen."
+                }
             }
         },
         "prerequisite": {