MOBILE-4587 quiz: Support filters in draggables

src/addons/qtype/ddimageortext/classes/ddimageortext.ts

@@ -16,6 +16,8 @@ import { CoreDom } from '@singletons/dom';
 import { CoreEventObserver } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
 import { AddonModQuizDdImageOrTextQuestionData } from '../component/ddimageortext';
+import { CoreLinkDirective } from '@directives/link';
+import { ElementRef } from '@angular/core';
 
 /**
  * Class to make a question of ddimageortext type work.
@@ -857,6 +859,12 @@ export class AddonQtypeDdImageOrTextQuestionDocStructure {
         divDrag.setAttribute('dragitemno', String(dragItemNo));
         divDrag.setAttribute('tabindex', '0');
 
+        Array.from(divDrag.querySelectorAll('a')).forEach((anchor) => {
+            const linkDir = new CoreLinkDirective(new ElementRef(anchor));
+            linkDir.capture = true;
+            linkDir.ngOnInit();
+        });
+
         // Insert the new drag after the dragHome.
         dragHome.parentElement?.insertBefore(divDrag, dragHome.nextSibling);
 

src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html

@@ -17,6 +17,7 @@
     </ion-item>
     <div class="fake-ion-item ion-text-wrap" [class.readonly]="question.readOnly" [hidden]="!question.loaded">
         <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
-            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()" />
+            [text]="question.ddArea" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
+            (afterRender)="ddAreaRendered()" />
     </div>
 </div>

src/addons/qtype/ddmarker/classes/ddmarker.ts

@@ -22,6 +22,8 @@ import { AddonQtypeDdMarkerGraphicsApi } from './graphics_api';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CoreExternalContentDirective } from '@directives/external-content';
+import { CoreLinkDirective } from '@directives/link';
+import { ElementRef } from '@angular/core';
 
 /**
  * Class to make a question of ddmarker type work.
@@ -97,6 +99,8 @@ export class AddonQtypeDdMarkerQuestion {
         drag.classList.remove('dragplaceholder'); // In case it has it.
         dragHome.classList.add('dragplaceholder');
 
+        this.treatAnchors(drag);
+
         // Insert the new drag after the dragHome.
         dragHome.parentElement?.insertBefore(drag, dragHome.nextSibling);
         if (!this.readOnly) {
@@ -252,6 +256,7 @@ export class AddonQtypeDdMarkerQuestion {
             // Marker text already exists. Update it or remove it if empty.
             if (markerText !== '') {
                 existingMarkerText.innerHTML = markerText;
+                this.treatAnchors(existingMarkerText);
             } else {
                 existingMarkerText.remove();
             }
@@ -262,6 +267,7 @@ export class AddonQtypeDdMarkerQuestion {
 
             span.className = classNames;
             span.innerHTML = markerText;
+            this.treatAnchors(span);
 
             markerTexts.appendChild(span);
         }
@@ -896,6 +902,19 @@ export class AddonQtypeDdMarkerQuestion {
         }
     }
 
+    /**
+     * Treat anchors inside an element, adding the core-link directive.
+     *
+     * @param el Element to treat.
+     */
+    protected treatAnchors(el: HTMLElement): void {
+        Array.from(el.querySelectorAll('a')).forEach((anchor) => {
+            const linkDir = new CoreLinkDirective(new ElementRef(anchor));
+            linkDir.capture = true;
+            linkDir.ngOnInit();
+        });
+    }
+
 }
 
 /**

src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html

@@ -17,6 +17,7 @@
     </ion-item>
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
         <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
-            [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()" />
+            [text]="question.ddArea" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
+            (afterRender)="ddAreaRendered()" />
     </div>
 </div>

src/addons/qtype/ddwtos/classes/ddwtos.ts

@@ -20,6 +20,8 @@ import { CoreEventObserver } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
 import { AddonModQuizDdwtosQuestionData } from '../component/ddwtos';
 import { CoreWait } from '@singletons/wait';
+import { CoreLinkDirective } from '@directives/link';
+import { ElementRef } from '@angular/core';
 
 /**
  * Class to make a question of ddwtos type work.
@@ -69,6 +71,13 @@ export class AddonQtypeDdwtosQuestion {
         drag.style.visibility = 'visible';
         drag.style.position = 'absolute';
 
+        Array.from(drag.querySelectorAll('a')).forEach((anchor) => {
+            // Cloning the item doesn't clone its directives. Add core-link to the anchors.
+            const linkDir = new CoreLinkDirective(new ElementRef(anchor));
+            linkDir.capture = true;
+            linkDir.ngOnInit();
+        });
+
         const container = this.container.querySelector(this.selectors.dragContainer());
         container?.appendChild(drag);
 

src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html

@@ -15,9 +15,8 @@
                 [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />
 
             <core-format-text *ngIf="question.answers" [component]="component" [componentId]="componentId" [text]="question.answers"
-                [filter]="false" (afterRender)="answersRendered()" />
+                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-
+                (afterRender)="answersRendered()" />
-            <div class="drags"></div>
         </div>
     </div>
 </div>

src/addons/qtype/ddwtos/component/ddwtos.scss

@@ -23,7 +23,6 @@ core-format-text ::ng-deep, .drags ::ng-deep {
     }
 
     .draghome {
-        margin-bottom: 1em;
         max-width: calc(100%);
     }
 
@@ -47,6 +46,10 @@ core-format-text ::ng-deep, .drags ::ng-deep {
         white-space: normal;
         overflow: visible;
         word-wrap: break-word;
+        margin-bottom: 1em;
+        border-radius: 5px;
+        line-height: 25px;
+        cursor: var(--cursor);
     }
     .draghome, .drag.unplaced{
         border: 1px solid var(--core-dd-question-border);
@@ -56,9 +59,6 @@ core-format-text ::ng-deep, .drags ::ng-deep {
     }
     .drag {
         z-index: 2;
-        border-radius: 5px;
-        line-height: 25px;
-        cursor: var(--cursor);
     }
     .drag.selected,
     .drop.selected {

src/addons/qtype/ddwtos/component/ddwtos.ts

@@ -69,7 +69,9 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent<AddonMo
         }
 
         this.question.readOnly = answerContainer.classList.contains('readonly');
-        this.question.answers = answerContainer.outerHTML;
+        // Add the drags container inside the answers so it's rendered inside core-format-text,
+        // otherwise some styles could be different between the drag homes and the draggables.
+        this.question.answers = answerContainer.outerHTML + '<div class="drags"></div>';
 
         // Get the inputs where the answers will be stored and add them to the question text.
         const inputEls = Array.from(