Merge pull request #2156 from dpalou/MOBILE-3173

MOBILE-3173 qtype: Fix dd questions broken by filters patch

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

@@ -7,7 +7,7 @@
             <ion-icon name="information-circle"></ion-icon>
             {{ 'core.question.howtodraganddrop' | translate }}
         </p>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
+        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()"></core-format-text></p>
-        <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" [text]="question.ddArea" [filter]="false" (afterRender)="questionRendered()"></core-format-text>
+        <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"></core-format-text>
     </ion-item>
 </section>

src/addon/qtype/ddimageortext/component/ddimageortext.ts

@@ -30,6 +30,8 @@ export class AddonQtypeDdImageOrTextComponent extends CoreQuestionBaseComponent
     protected questionInstance: AddonQtypeDdImageOrTextQuestion;
     protected drops: any[]; // The drop zones received in the init object of the question.
     protected destroyed = false;
+    protected textIsRendered = false;
+    protected ddAreaisRendered = false;
 
     constructor(protected loggerProvider: CoreLoggerProvider, injector: Injector, element: ElementRef) {
         super(loggerProvider, 'AddonQtypeDdImageOrTextComponent', injector);
@@ -84,10 +86,30 @@ export class AddonQtypeDdImageOrTextComponent extends CoreQuestionBaseComponent
         this.question.loaded = false;
     }
 
+    /**
+     * The question ddArea has been rendered.
+     */
+    ddAreaRendered(): void {
+        this.ddAreaisRendered = true;
+        if (this.textIsRendered) {
+            this.questionRendered();
+        }
+    }
+
+    /**
+     * The question text has been rendered.
+     */
+    textRendered(): void {
+        this.textIsRendered = true;
+        if (this.ddAreaisRendered) {
+            this.questionRendered();
+        }
+    }
+
     /**
      * The question has been rendered.
      */
-    questionRendered(): void {
+    protected questionRendered(): void {
         if (!this.destroyed) {
             // Create the instance.
             this.questionInstance = new AddonQtypeDdImageOrTextQuestion(this.loggerProvider, this.domUtils, this.element,

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

@@ -7,7 +7,7 @@
             <ion-icon name="information-circle"></ion-icon>
             {{ 'core.question.howtodraganddrop' | translate }}
         </p>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" #questiontext [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
+        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" #questiontext [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()"></core-format-text></p>
-        <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" [text]="question.ddArea" [filter]="false" (afterRender)="questionRendered()"></core-format-text>
+        <core-format-text *ngIf="question.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" [text]="question.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"></core-format-text>
     </ion-item>
 </section>

src/addon/qtype/ddmarker/component/ddmarker.ts

@@ -35,6 +35,8 @@ export class AddonQtypeDdMarkerComponent extends CoreQuestionBaseComponent imple
     protected dropZones: any[]; // The drop zones received in the init object of the question.
     protected imgSrc: string; // Background image URL.
     protected destroyed = false;
+    protected textIsRendered = false;
+    protected ddAreaisRendered = false;
 
     constructor(protected loggerProvider: CoreLoggerProvider, injector: Injector, element: ElementRef,
             protected sitesProvider: CoreSitesProvider, protected urlUtils: CoreUrlUtilsProvider,
@@ -101,10 +103,30 @@ export class AddonQtypeDdMarkerComponent extends CoreQuestionBaseComponent imple
         this.question.loaded = false;
     }
 
+    /**
+     * The question ddArea has been rendered.
+     */
+    ddAreaRendered(): void {
+        this.ddAreaisRendered = true;
+        if (this.textIsRendered) {
+            this.questionRendered();
+        }
+    }
+
+    /**
+     * The question text has been rendered.
+     */
+    textRendered(): void {
+        this.textIsRendered = true;
+        if (this.ddAreaisRendered) {
+            this.questionRendered();
+        }
+    }
+
     /**
      * The question has been rendered.
      */
-    questionRendered(): void {
+    protected questionRendered(): void {
         if (!this.destroyed) {
             // Download background image (3.6+ sites).
             let promise = null;

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

@@ -7,8 +7,8 @@
             <ion-icon name="information-circle"></ion-icon>
             {{ 'core.question.howtodraganddrop' | translate }}
         </p>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext></core-format-text></p>
+        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()"></core-format-text></p>
-        <core-format-text *ngIf="question.answers" [component]="component" [componentId]="componentId" [text]="question.answers" [filter]="false" (afterRender)="questionRendered()"></core-format-text>
+        <core-format-text *ngIf="question.answers" [component]="component" [componentId]="componentId" [text]="question.answers" [filter]="false" (afterRender)="answersRendered()"></core-format-text>
         <div class="drags"></div>
     </ion-item>
 </section>

src/addon/qtype/ddwtos/component/ddwtos.ts

@@ -31,6 +31,8 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme
     protected questionInstance: AddonQtypeDdwtosQuestion;
     protected inputIds: string[] = []; // Ids of the inputs of the question (where the answers will be stored).
     protected destroyed = false;
+    protected textIsRendered = false;
+    protected answerAreRendered = false;
 
     constructor(protected loggerProvider: CoreLoggerProvider, injector: Injector, element: ElementRef) {
         super(loggerProvider, 'AddonQtypeDdwtosComponent', injector);
@@ -85,10 +87,30 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme
         this.question.loaded = false;
     }
 
+    /**
+     * The question answers have been rendered.
+     */
+    answersRendered(): void {
+        this.answerAreRendered = true;
+        if (this.textIsRendered) {
+            this.questionRendered();
+        }
+    }
+
+    /**
+     * The question text has been rendered.
+     */
+    textRendered(): void {
+        this.textIsRendered = true;
+        if (this.answerAreRendered) {
+            this.questionRendered();
+        }
+    }
+
     /**
      * The question has been rendered.
      */
-    questionRendered(): void {
+    protected questionRendered(): void {
         if (!this.destroyed) {
             this.domUtils.waitForImages(this.questionTextEl.nativeElement).then(() => {
                 // Create the instance.