Markers

src/addons/filter/mathjaxloader/services/handlers/mathjaxloader.ts

@@ -246,6 +246,13 @@ export class AddonFilterMathJaxLoaderHandlerService extends CoreFilterDefaultHan
                     const equations = Array.from(container.querySelectorAll('.filter_mathjaxloader_equation'));
                     equations.forEach((node) => {
                         that.window.MathJax.Hub.Queue(['Typeset', that.window.MathJax.Hub, node], [that.fixUseUrls, node]);
+                        that.window.MathJax.Hub.Queue([(node: Element) => {
+                            // The notifyFilterContentRenderingComplete event takes an Array of NodeElements or a NodeList.
+                            // We cannot create a NodeList, so we use an HTMLElement[].
+                            CoreEvents.trigger(CoreEvents.FILTER_CONTENT_RENDERING_COMPLETE, {
+                                node,
+                            }, CoreSites.getCurrentSiteId());
+                        }, node]);
                     });
 
                     // Set the delay back to normal after processing.

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

@@ -15,7 +15,7 @@
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreCoordinates, CoreDom } from '@singletons/dom';
-import { CoreEventObserver } from '@singletons/events';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
 import { AddonQtypeDdMarkerQuestionData } from '../component/ddmarker';
 import { AddonQtypeDdMarkerGraphicsApi } from './graphics_api';
@@ -701,6 +701,62 @@ export class AddonQtypeDdMarkerQuestion {
                 this.redrawDragsAndDrops();
             });
 
+            CoreEvents.on(CoreEvents.FILTER_CONTENT_RENDERING_COMPLETE, (node: { node: HTMLElement }) => {
+                let currentFilteredItem = (node.node) as HTMLElement;
+                const parentIsMarker: boolean = (currentFilteredItem
+                    ?.parentNode as HTMLElement)
+                    ?.closest('span.marker') instanceof HTMLElement;
+                const isMarker: boolean = currentFilteredItem.classList.contains('marker');
+                const root = this.container;
+
+                // The filtered element or parent element should a drag or drop item.
+                if (!parentIsMarker && !isMarker) {
+                    return;
+                }
+                if (parentIsMarker) {
+                    currentFilteredItem = (currentFilteredItem?.parentNode as HTMLElement).closest('span.marker') as HTMLElement;
+                }
+                if (!root.contains(currentFilteredItem)) {
+                    // If the maker doesn't belong to this question
+                    // In case we have multiple questions in the same page.
+                    return;
+                }
+                const dragNo = this.getDragNo(currentFilteredItem);
+                const choiceNo = this.getChoiceNoFromElement(currentFilteredItem);
+                const listOfContainerToBeModifed: string[] = [
+                    'div.draghomes .marker:not(.dragplaceholder).dragno' + dragNo + '.choice' + choiceNo,
+                    'div.droparea .marker:not(.dragplaceholder).dragno' + dragNo + '.choice' + choiceNo,
+                    'div.draghomes .marker:not(.dragplaceholder).infinite.choice' + choiceNo,
+                    'div.droparea .marker:not(.dragplaceholder).infinite.choice' + choiceNo,
+                ];
+                const listOfModifiedDragDrop: HTMLElement[] = [];
+                const cloneElement = currentFilteredItem.cloneNode(true) as HTMLElement;
+                const that = this;
+                listOfContainerToBeModifed.forEach(function(selector: string) {
+                    const elm = root.querySelector(selector);
+                    if (elm === null) {
+                        return;
+                    }
+                    const originalClass = elm.getAttribute('class');
+                    const originalStyle = elm.getAttribute('style');
+                    // Replace the class and style of the maker we want to replace for the clone.
+                    if (originalClass) {
+                        cloneElement.setAttribute('class', originalClass);
+                    }
+                    if (originalStyle) {
+                        cloneElement.setAttribute('style', originalStyle);
+                    }
+                    if (!that.readOnly) {
+                        that.draggable(cloneElement);
+                    }
+                    elm.insertAdjacentElement('beforebegin', cloneElement);
+                    listOfModifiedDragDrop.push(elm as HTMLElement);
+                });
+                if (listOfModifiedDragDrop.length > 0) {
+                    listOfModifiedDragDrop.map(element => element.remove());
+                }
+            });
+
             this.afterImageLoadDone = true;
             this.question.loaded = true;
         };
@@ -719,6 +775,24 @@ export class AddonQtypeDdMarkerQuestion {
         }, 500);
     }
 
+    getDragNo(element: HTMLElement): number | null {
+        return this.getClassnameNumericSuffix(element, 'dragno');
+    }
+
+    getChoiceNoFromElement(element: HTMLElement): number | null {
+        return this.getClassnameNumericSuffix(element, 'choice');
+    }
+
+    getClassnameNumericSuffix(node: HTMLElement, prefix: string): number | null {
+        const classes = node.classList.value;
+        // Use regular expression to match the number after prefix
+        const regex = new RegExp(prefix + '(\\d+)');
+        const match = classes.match(regex);
+
+        // Extract the number from the matched substring
+        return match ? parseInt(match[1]) : null;
+    }
+
     /**
      * Redraw all draggables and drop zones.
      */

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"
+                          (afterRender)="ddAreaRendered()"/>
     </div>
 </div>

src/addons/qtype/ddmarker/component/ddmarker.scss

@@ -80,6 +80,9 @@ core-format-text ::ng-deep {
     div.ddarea {
         text-align: center;
         position: relative;
+        div.dd-original.d-none {
+            display: none;
+        }
     }
     div.ddarea .dropzones,
     div.ddarea .markertexts {

src/core/singletons/events.ts

@@ -116,6 +116,7 @@ export class CoreEvents {
     static readonly COMPLETE_REQUIRED_PROFILE_DATA_FINISHED = 'complete_required_profile_data_finished';
     static readonly MAIN_HOME_LOADED = 'main_home_loaded';
     static readonly FULL_SCREEN_CHANGED = 'full_screen_changed';
+    static readonly FILTER_CONTENT_RENDERING_COMPLETE = 'core_filters_content_rendering_complete';
 
     protected static logger = CoreLogger.getInstance('CoreEvents');
     protected static observables: { [eventName: string]: Subject<unknown> } = {};