From e922234787a6f412091a93a3be9a1b0913570eaa Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 29 Jul 2024 13:19:06 +0200 Subject: [PATCH] MOBILE-4587 quiz: Support filters in draggables --- .../ddimageortext/classes/ddimageortext.ts | 8 ++++++++ .../component/addon-qtype-ddimageortext.html | 3 ++- src/addons/qtype/ddmarker/classes/ddmarker.ts | 19 +++++++++++++++++++ .../component/addon-qtype-ddmarker.html | 3 ++- src/addons/qtype/ddwtos/classes/ddwtos.ts | 9 +++++++++ .../ddwtos/component/addon-qtype-ddwtos.html | 5 ++--- src/addons/qtype/ddwtos/component/ddwtos.scss | 8 ++++---- src/addons/qtype/ddwtos/component/ddwtos.ts | 4 +++- 8 files changed, 49 insertions(+), 10 deletions(-) diff --git a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts b/src/addons/qtype/ddimageortext/classes/ddimageortext.ts index 35ba19b53..7f7f6bbaa 100644 --- a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts +++ b/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); diff --git a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html index 1dc30c312..ede71fe99 100644 --- a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html +++ b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html @@ -17,6 +17,7 @@
+ [text]="question.ddArea" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" + (afterRender)="ddAreaRendered()" />
diff --git a/src/addons/qtype/ddmarker/classes/ddmarker.ts b/src/addons/qtype/ddmarker/classes/ddmarker.ts index 49fddf82d..112353571 100644 --- a/src/addons/qtype/ddmarker/classes/ddmarker.ts +++ b/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(); + }); + } + } /** diff --git a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html index d800948a9..563433642 100644 --- a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html +++ b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html @@ -17,6 +17,7 @@
+ [text]="question.ddArea" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" + (afterRender)="ddAreaRendered()" />
diff --git a/src/addons/qtype/ddwtos/classes/ddwtos.ts b/src/addons/qtype/ddwtos/classes/ddwtos.ts index 338217d2e..e34999889 100644 --- a/src/addons/qtype/ddwtos/classes/ddwtos.ts +++ b/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); diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html index 372986dbd..cd87af483 100644 --- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html +++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html @@ -15,9 +15,8 @@ [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" /> - -
+ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" + (afterRender)="answersRendered()" /> diff --git a/src/addons/qtype/ddwtos/component/ddwtos.scss b/src/addons/qtype/ddwtos/component/ddwtos.scss index a20501041..7b212ead1 100644 --- a/src/addons/qtype/ddwtos/component/ddwtos.scss +++ b/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 { diff --git a/src/addons/qtype/ddwtos/component/ddwtos.ts b/src/addons/qtype/ddwtos/component/ddwtos.ts index c3f8631d5..e8be5ddfb 100644 --- a/src/addons/qtype/ddwtos/component/ddwtos.ts +++ b/src/addons/qtype/ddwtos/component/ddwtos.ts @@ -69,7 +69,9 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent'; // Get the inputs where the answers will be stored and add them to the question text. const inputEls = Array.from(