Activate hidden sections with specified delay

docs/release-notes-editor.md

@@ -23,6 +23,8 @@ Editor
 - Möglichkeit, die maximale Zeichenanzahl von Eingabefeldern zu begrenzen
 - Im TextEditor können nun Bereiche markiert werden, die dann im Navigationsknopf
   über die Aktion "Textabschnitt hervorheben" ausgewählt werden können.
+- Ermöglicht die Angabe einer Verzögerung (in Millisekunden)
+  für Aktivieren von verborgenen Abschnitten  
 
 ### Verbesserungen
 - Ermöglicht für Eingabebereiche die dynamische Anpassung der Anzahl von Zeilen

docs/release-notes-player.md

@@ -17,6 +17,7 @@ Player
   Text über die Zwischenablage eingefügt werden
 - Vordefinierte markierte Bereiche in Texten können gezielt über vordefinierte Klicks auf 
   Navigationsknöpfe für 30 Sekunden farblich hervorgehoben werden
+- Aktiviert verborgene Abschnitten mit der angegebenen Verzögerung (in Millisekunden)
 
 ### Verbesserungen
 - Verbessert die Performanz von GeoGebra-Elementen

docs/unit_definition_changelog.txt

@@ -58,6 +58,7 @@ iqb-aspect-definition@1.0.0
 - Remove drop-list-simple as cloze child; is now a drop-list
 - ButtonElement: action +highlightText
                  param +string
+- Section: +activeAfterIdDelay: number
 
 3.9.0
 - DropListElement: +deleteDroppedItemWithSameID

projects/common/models/section.ts

@@ -16,6 +16,7 @@ export class Section {
   gridColumnSizes: string = '1fr 1fr';
   gridRowSizes: string = '1fr';
   activeAfterID: string | null = null;
+  activeAfterIdDelay: number = 0;
 
   constructor(section?: Partial<Section>) {
     if (section?.height) this.height = section.height;
@@ -26,6 +27,7 @@ export class Section {
     if (section?.gridColumnSizes !== undefined) this.gridColumnSizes = section.gridColumnSizes;
     if (section?.gridRowSizes !== undefined) this.gridRowSizes = section.gridRowSizes;
     if (section?.activeAfterID) this.activeAfterID = section.activeAfterID;
+    if (section?.activeAfterIdDelay) this.activeAfterIdDelay = section.activeAfterIdDelay;
     this.elements =
       section?.elements?.map(element => ElementFactory.createElement({
         ...element,

projects/editor/src/app/components/canvas/section-menu.component.ts

@@ -54,8 +54,15 @@ import { SelectionService } from '../../services/selection.service';
                (click)="$any($event).stopPropagation()"
                (change)="updateModel('activeAfterID', $any($event.target).value)">
       </mat-form-field>
+      <mat-form-field appearance="fill">
+        <mat-label>{{'section-menu.activeAfterIdDelay' | translate }}</mat-label>
+        <input matInput type="number" step="1000" min="0"
+               [disabled]="!section.activeAfterID"
+               [value]="$any(section.activeAfterIdDelay)"
+               (click)="$any($event).stopPropagation()"
+               (change)="updateModel('activeAfterIdDelay', $any($event.target).value)">
+      </mat-form-field>
     </mat-menu>
-
     <button mat-mini-fab [matMenuTriggerFor]="layoutMenu"
             [matTooltip]="'Layout'" [matTooltipPosition]="'left'">
       <mat-icon>space_dashboard</mat-icon>

projects/editor/src/assets/i18n/de.json

@@ -270,7 +270,8 @@
     "width": "Breite",
     "fraction": "Anteile",
     "pixel": "Bildpunkte",
-    "activeAfterID": "Sichtbar nach A/V-ID"
+    "activeAfterID": "Sichtbar nach A/V-ID",
+    "activeAfterIdDelay": "Verzögerung der Sichtbarkeit"
   },
   "Bitte kopierten Abschnitt einfügen": "Bitte kopierten Abschnitt einfügen",
   "Doppelte IDs festgestellt. Weiter mit neu generierten IDs?": "Doppelte IDs festgestellt. Weiter mit neu generierten IDs?",

projects/player/src/app/directives/section-visibility-handling.directive.ts

 import { Directive, ElementRef, Input } from '@angular/core';
-import { Subject } from 'rxjs';
+import { delay, Subject } from 'rxjs';
 import { Section } from 'common/models/section';
 import { takeUntil } from 'rxjs/operators';
 
@@ -27,7 +27,9 @@ export class SectionVisibilityHandlingDirective {
 
     if (this.mediaStatusChanged) {
       this.mediaStatusChanged
-        .pipe(takeUntil(this.ngUnsubscribe))
+        .pipe(
+          takeUntil(this.ngUnsubscribe),
+          delay(this.section.activeAfterIdDelay))
         .subscribe((id: string): void => this.setActiveAfterID(id));
     }
   }