Adaptive learning: Change gif in instructor help in competencies view to video

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

@@ -24,7 +24,14 @@ <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetenc
             <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph3"></p>
             <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph4"></p>
             <div class="explanation-model-gif">
-                <img src="public/videos/course-competencies/create-competencies.gif" alt="How to create a course competency" />
+                <video controls preload="metadata" aria-label="Tutorial: Creating course competencies" poster="public/videos/course-competencies/create-competencies-poster.jpg">
+                    <source src="public/videos/course-competencies/create-competencies.mp4" type="video/mp4" />
+                    <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.first"></p>
+                    <a href="public/videos/course-competencies/create-competencies.mp4"
+                        ><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.link"></p
+                    ></a>
+                    <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.last"></p>
+                </video>
             </div>
             <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyCreation.paragraph5" [translateValues]="{ link: DOCUMENTATION_LINK }"></p>
         </div>
@@ -37,7 +44,19 @@ <h5 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetenc
             <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph3"></p>
             <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.paragraph4"></p>
             <div class="explanation-model-gif">
-                <img src="public/videos/course-competencies/create-course-competency-relations.gif" alt="How to create a course competency" />
+                <video
+                    controls
+                    preload="metadata"
+                    aria-label="Tutorial: Creating course competency relations"
+                    poster="public/videos/course-competencies/create-course-competency-relations-poster.jpg"
+                >
+                    <source src="public/videos/course-competencies/create-course-competency-relations.mp4" type="video/mp4" />
+                    <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.first"></p>
+                    <a href="public/videos/course-competencies/create-competencies.mp4"
+                        ><p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.link"></p
+                    ></a>
+                    <p jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationVideoParagraph.last"></p>
+                </video>
             </div>
             <div class="mt-3">
                 <h6 jhiTranslate="artemisApp.courseCompetency.featureExplanation.courseCompetencyRelations.relationTitle1"></h6>

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

@@ -1,4 +1,4 @@
-.explanation-model-gif {
+.explanation-model-gif video {
     display: block;
     max-width: 800px;
     margin: 0 auto; // Centers the container horizontally

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

@@ -305,6 +305,11 @@
                     "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 Fenster „Beziehungen bearbeiten“. In diesem Fenster 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.",
+                    "relationVideoParagraph": {
+                        "first": "Ihr Browser unterstützt kein HTML5-Video. Hier ist ein ",
+                        "link": "Link zum Video",
+                        "last": " stattdessen."
+                    },
                     "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:",

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

@@ -305,6 +305,11 @@
                     "paragraph2": "In summary:",
                     "paragraph3": "MATCH is about equivalency between two skills.<br />EXTEND is about building on an existing skill.<br />REQUIRE means one skill is a prerequisite for another.",
                     "paragraph4": "To create these relationships, open the 'Edit Relations' window. In this window, you can either select the related competencies or click on each one consecutively. After that, choose the desired relation type and create the relationship. To update or delete a relation, simply click on the specific relation and either update the relation type in the form or delete it.",
+                    "relationVideoParagraph": {
+                        "first": "Your browser doesn't support HTML5 video. Here is a ",
+                        "link": "link to the video",
+                        "last": " instead."
+                    },
                     "relationTitle1": "1. MATCH",
                     "relationParagraph1": "This relationship implies that two competencies are at the same level, covering the same skills and requirements. If you have one, you already have the other, and they can be considered interchangeable.",
                     "exampleLabel": "Example:",