x

package.json

@@ -19,7 +19,7 @@
   ],
   "scripts": {
     "ng": "ng",
-    "start": "ionic serve --browser=$MOODLE_APP_BROWSER --ssl",
+    "start": "ionic serve --browser=$MOODLE_APP_BROWSER",
     "serve:test": "NODE_ENV=testing ionic serve --no-open",
     "build": "NODE_OPTIONS=--max-old-space-size=8192 ionic build --configuration=development",
     "build:prod": "NODE_ENV=production ionic build --prod",

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

@@ -17,7 +17,7 @@ import { CoreTextUtils } from '@services/utils/text';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreDirectivesRegistry } from '@singletons/directives-registry';
 import { CoreCoordinates, CoreDom } from '@singletons/dom';
-import { CoreEventObserver } from '@singletons/events';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
 import { AddonModQuizDdwtosQuestionData } from '../component/ddwtos';
 
@@ -48,7 +48,7 @@ export class AddonQtypeDdwtosQuestion {
         protected inputIds: string[],
     ) {
         this.logger = CoreLogger.getInstance('AddonQtypeDdwtosQuestion');
-
+        this.handleFilterItems();
         this.initializer();
     }
 
@@ -212,6 +212,87 @@ export class AddonQtypeDdwtosQuestion {
         });
     }
 
+    handleFilterItems(): void {
+        const size = {};
+        CoreEvents.on(CoreEvents.FILTER_CONTENT_RENDERING_COMPLETE, (node: { node: HTMLElement }) => {
+            let currentFilteredItem = (node.node) as HTMLElement;
+            const parentIsDD = (currentFilteredItem?.parentNode as HTMLElement)?.closest('span')?.classList.contains('placed') ||
+                (currentFilteredItem?.parentNode as HTMLElement)?.closest('span')?.classList.contains('draghome');
+            const isDD: boolean = currentFilteredItem.classList.contains('placed') ||
+                currentFilteredItem.classList.contains('draghome');
+            if (!parentIsDD && !isDD) {
+                return;
+            }
+            if (parentIsDD) {
+                currentFilteredItem = (currentFilteredItem?.parentNode as HTMLElement)?.closest('span') as HTMLElement;
+            }
+            const root = this.container;
+            if (!root.contains(currentFilteredItem)) {
+                // If the DD item doesn't belong to this question
+                // In case we have multiple questions in the same page.
+                return;
+            }
+            const group = this.getGroup(currentFilteredItem);
+            const choice = this.getChoice(currentFilteredItem);
+
+            const listOfModifiedDragDrop: Element[] = [];
+            const nodeList = root.querySelectorAll('.addon-qtype-ddwtos-container .group' + group + '.choice' + choice);
+            nodeList.forEach(nodex => {
+                // Same modified item, skip it.
+                if (nodex === currentFilteredItem) {
+                    return;
+                }
+                const originalClass = (nodex as HTMLElement).getAttribute('class');
+                const originalStyle = (nodex as HTMLElement).getAttribute('style');
+                // We want to keep all the handler and event for filtered item, so using clone is the only choice.
+                const filteredDragDropClone = currentFilteredItem.cloneNode(true) as HTMLElement;
+                // Replace the class and style of the drag drop item we want to replace for the clone.
+                if (originalClass !== null) {
+                    filteredDragDropClone.setAttribute('class', originalClass);
+                }
+                if (originalStyle !== null) {
+                    filteredDragDropClone.setAttribute('style', originalStyle);
+                }
+                if (!this.readOnly) {
+                    this.makeDraggable(filteredDragDropClone);
+                }
+                // Insert into DOM.
+                nodex.insertAdjacentElement('beforebegin', filteredDragDropClone);
+                // Add the item has been replaced to a list so we can remove it later.
+                listOfModifiedDragDrop.push(nodex);
+            });
+
+            const xxxList = document.querySelectorAll('.addon-qtype-ddwtos-container .drag.group' + group);
+
+            xxxList.forEach(element => {
+                if (size[group ?? 0] === undefined) {
+                    size[group ?? 0] = { width: 0, height: 0 };
+                }
+                size[group ?? 0].width =  Math.max(
+((node.node) as HTMLElement).offsetWidth,
+                    size[group ?? 0]?.width ?? 0,
+);
+                size[group ?? 0].height =  Math.max(
+((node.node) as HTMLElement).offsetHeight,
+                    size[group ?? 0]?.height ?? 0,
+);
+            });
+
+            document.querySelectorAll('.addon-qtype-ddwtos-container .group' + group).forEach(element => {
+                (element as HTMLElement).style.width = size[group ?? 0].width + 'px';
+                (element as HTMLElement).style.height = size[group ?? 0].height + 'px';
+            });
+
+            if (listOfModifiedDragDrop.length > 0) {
+                listOfModifiedDragDrop.map(function(node) {
+                    node.remove();
+                });
+            }
+
+            this.positionDragItems();
+        });
+    }
+
     /**
      * Initialize drag items, putting them in their initial place.
      */
@@ -414,6 +495,7 @@ export class AddonQtypeDdwtosQuestion {
      */
     positionDragItems(): void {
         const drags = Array.from(this.container.querySelectorAll<HTMLElement>(this.selectors.drags()));
+        console.log(drags);
         drags.forEach((drag) => {
             this.positionDragItem(drag);
         });
@@ -480,9 +562,9 @@ export class AddonQtypeDdwtosQuestion {
             return;
         }
 
-        groupItems.forEach((item) => {
-            item.innerHTML = CoreTextUtils.decodeHTML(item.innerHTML);
-        });
+        // groupItems.forEach((item) => {
+        //     item.innerHTML = CoreTextUtils.decodeHTML(item.innerHTML);
+        // });
 
         // Wait to render in order to calculate size.
         if (groupItems[0].parentElement) {
@@ -494,6 +576,8 @@ export class AddonQtypeDdwtosQuestion {
             await CoreUtils.nextTicks(5);
         }
 
+        console.log('xxx', groupItems);
+
         // Find max height and width.
         let maxWidth = 0;
         let maxHeight = 0;

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

@@ -14,7 +14,7 @@
                 [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" (afterRender)="answersRendered()" />
 
             <div class="drags"></div>
         </div>

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

@@ -30,7 +30,10 @@ core-format-text ::ng-deep, .drags ::ng-deep {
         cursor: pointer;
     }
     .draghome, .drag {
-        display: inline-block;
+        // display: inline-block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         text-align: center;
         background: transparent;
         border: 0;
@@ -71,6 +74,12 @@ core-format-text ::ng-deep, .drags ::ng-deep {
         cursor: default;
     }
 
+    .answercontainer > div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+    }
+
     span.incorrect {
         background-color: var(--core-question-incorrect-color-bg);
     }

src/core/singletons/dom.ts

@@ -67,6 +67,10 @@ export class CoreDom {
         // Get the top, left coordinates of two elements
         const elementRectangle = element.getBoundingClientRect();
         const parentRectangle = parent.getBoundingClientRect();
+        // console.log(element);
+        // console.log(elementRectangle);
+        // console.log(parent);
+        // console.log(parentRectangle);
 
         // Calculate the top and left positions.
         return {