lido-player 0.0.2-beta-22-dev → 0.0.2-beta-24-dev

package/dist/collection/components/column/lido-col.js

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: '334206d6054442fec787cfb479a68ae164404730', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
+        return (h(Host, { key: 'b2ecb19a78feed7275d9e996255db4144d5e0153', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {
@@ -467,7 +467,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -486,7 +486,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "getter": false,
                 "setter": false,
@@ -505,7 +505,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -562,7 +562,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a CSS box-shadow to the component.\r\nAccepts any valid CSS box-shadow value.\r\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
+                    "text": "Applies a CSS box-shadow to the component.\nAccepts any valid CSS box-shadow value.\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
                 },
                 "getter": false,
                 "setter": false,
@@ -621,7 +621,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/container/lido-container.css

@@ -1,10 +1,34 @@
-.lido-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bgColor, transparent);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+.lido-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bgColor, transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Reuse the Flash Card attention treatment for generated Write Card arrows. */
+lido-container[template-id="writeCard"] #arrow {
+  box-sizing: border-box;
+  border: 10px solid transparent;
+  box-shadow: 0px 8px 0px 0px #8b310f;
+  animation: flash-card-next-attention 1.4s ease-in-out infinite;
+}
+
+lido-container[template-id="writeCard"] #arrow.fading {
+  opacity: 1 !important;
+}
+
+@keyframes flash-card-next-attention {
+  0%,
+  100% {
+    border-color: #ffc34d;
+    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
+  }
+  50% {
+    border-color: #fff1a8;
+    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
+  }
+}

package/dist/collection/components/container/lido-container.js

@@ -169,6 +169,32 @@ export class LidoContainer {
         this.speakFlag = false;
         this.handleWindowResize = () => this.scaleContainer(this.el);
         this.handleWindowLoad = () => this.scaleContainer(this.el);
+        this.isWriteCardContainer = () => this.templateId === 'writeCard';
+        this.syncWriteCardArrowHighlight = () => {
+            if (!this.isWriteCardContainer())
+                return;
+            const arrow = this.el.querySelector('#arrow');
+            if (!arrow)
+                return;
+            const style = window.getComputedStyle(arrow);
+            const hidden = style.display === 'none' ||
+                style.visibility === 'hidden' ||
+                style.opacity === '0';
+            arrow.classList.toggle('flash-card-next-glowing', !hidden);
+        };
+        this.observeWriteCardArrow = () => {
+            var _a;
+            if (!this.isWriteCardContainer())
+                return;
+            (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.writeCardArrowObserver = new MutationObserver(() => this.syncWriteCardArrowHighlight());
+            this.writeCardArrowObserver.observe(this.el, {
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class', 'style', 'visible'],
+            });
+            this.syncWriteCardArrowHighlight();
+        };
     }
     cleanupInteractionHandlers() {
         this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach(element => {
@@ -414,10 +440,12 @@ export class LidoContainer {
             setTimeout(() => {
                 this.el.setAttribute("onEntry", `${this.templateId}.speak='${!this.speakFlag}'; ` + this.el.getAttribute("onEntry"));
                 initEventsForElement(this.el, this.type);
+                this.observeWriteCardArrow();
             }, 100);
         }
         else {
             initEventsForElement(this.el, this.type);
+            this.observeWriteCardArrow();
         }
         if (this.customStyle) {
             const styleElement = document.createElement('style');
@@ -433,9 +461,12 @@ export class LidoContainer {
         Timer.getI().start();
     }
     disconnectedCallback() {
+        var _a;
         this.cleanupInteractionHandlers();
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.writeCardArrowObserver = undefined;
         document.body.style.backgroundColor = '';
         document.body.style.backgroundImage = '';
         resetFloatState();
@@ -452,7 +483,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: '1862e30fedda58726edc107f81fae1f63e96d009', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
+        return (h(Host, { key: '403faa36329230b28c8c0e3a627c20b48fc1a9d0', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '683740c0a8495c875c988b41b8281a362f7713b8', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '743c0652d70b294513dcdb3cfdd9674b694cd2e8' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -579,7 +610,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
                 },
                 "getter": false,
                 "setter": false,
@@ -1019,7 +1050,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1059,7 +1090,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1079,7 +1110,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1098,7 +1129,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1117,7 +1148,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1136,7 +1167,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/flashCard/lido-flash-card.css

@@ -1,46 +1,72 @@
-
-
-.card {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.6s ease;
-  cursor: pointer;
-}
-
-.card.flipped {
-  transform: rotateY(180deg);
-}
-
-.card-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card-back {
-  transform: rotateY(180deg);
-}
-
-/* Flash Card's local next button is positioned against the 1600x900 Lido
-   canvas, rather than against the viewport or the global navigation bar. */
-lido-container[template-id="flashcardtemplate"] #arrow {
-  position: absolute !important;
-  left: auto !important;
-  top: 50% !important;
-  right: 13.3% !important;
-  transform: translateY(-50%);
-  z-index: 4 !important;
-  overflow: visible;
-}
-
-@media (orientation: portrait) {
-  lido-container[template-id="flashcardtemplate"] #arrow {
-    right: -4.3% !important;
-  }
-}
+
+
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.6s ease;
+  cursor: pointer;
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+}
+
+.card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}
+
+/* Flash Card's local next button is positioned against the 1600x900 Lido
+   canvas, rather than against the viewport or the global navigation bar. */
+lido-container[template-id="flashcardtemplate"] #arrow {
+  position: absolute !important;
+  left: auto !important;
+  top: 50% !important;
+  right: 13.3% !important;
+  transform: translateY(-50%);
+  z-index: 4 !important;
+  overflow: visible;
+  box-sizing: border-box;
+  border: 10px solid transparent;
+  box-shadow: 0px 8px 0px 0px #8b310f !important;
+}
+
+lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing {
+  animation: flash-card-next-attention 1.4s ease-in-out infinite;
+}
+
+@keyframes flash-card-next-attention {
+  0%,
+  100% {
+    border-color: #ffc34d;
+    filter: drop-shadow(0 0 0 rgba(255, 195, 77, 0));
+  }
+  50% {
+    border-color: #fff1a8;
+    filter: drop-shadow(0 0 10px rgba(255, 195, 77, 0.95));
+  }
+}
+
+/* Match the shared top Next arrow's raised press behavior without changing
+   the Flash Card arrow's existing size or right-side positioning. */
+lido-container[template-id="flashcardtemplate"] #arrow:active {
+  transform: translateY(calc(-50% + 8px)) !important;
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+@media (orientation: portrait) {
+  lido-container[template-id="flashcardtemplate"] #arrow {
+    right: -4.3% !important;
+  }
+}

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -84,16 +84,49 @@ export class LidoFlash {
          */
         this.flipped = false;
         this.autoFlipAfter = 4500;
+        this.narrationTarget = null;
+        this.narrationHandled = false;
         this.instructionDone = false;
-        this.onAudioEnded = (event) => {
+        this.instructionStarted = false;
+        this.onAudioStarted = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            if (target === this.instructionText())
+                this.instructionStarted = true;
+            if (target && target === this.narrationTarget && !this.narrationHandled) {
+                if (this.narrationGraceTimer)
+                    window.clearTimeout(this.narrationGraceTimer);
+                this.narrationGraceTimer = undefined;
+            }
+        };
+        this.onAudioPlaying = (event) => {
+            const detail = event.detail;
+            const target = detail === null || detail === void 0 ? void 0 : detail.target;
+            if ((target === null || target === void 0 ? void 0 : target.id) !== 'lido-avatar')
+                return;
+            if (detail.playbackContext !== this.goodJobPlaybackContext)
+                return;
+            const arrow = this.nextArrow();
+            if (!arrow || !this.flipped)
+                return;
+            this.goodJobPlaybackId = detail.playbackId;
+            arrow.classList.add('flash-card-next-glowing');
+        };
+        this.onAudioEnded = (event) => {
+            var _a, _b, _c;
+            const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
             const instruction = this.instructionText();
             if (!target || (target !== instruction && target.id !== 'lido-avatar' && !this.el.contains(target)))
                 return;
+            if (target === this.narrationTarget && !this.narrationHandled) {
+                this.finishNarration(target);
+                return;
+            }
+            if (this.narrationHandled && target === this.narrationTarget)
+                return;
             if (target === this.instructionText()) {
                 this.instructionDone = true;
-                window.setTimeout(() => {
+                this.frontStartTimer = window.setTimeout(() => {
                     this.speakFront();
                 }, 1200);
             }
@@ -112,6 +145,11 @@ export class LidoFlash {
                     this.showArrow();
             }
             else if (target.id === 'lido-avatar') {
+                const playbackId = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.playbackId;
+                const playbackContext = (_c = event.detail) === null || _c === void 0 ? void 0 : _c.playbackContext;
+                if (playbackContext !== this.goodJobPlaybackContext || playbackId !== this.goodJobPlaybackId)
+                    return;
+                this.goodJobPlaybackId = undefined;
                 executeActions("this.avatarAnimate='Idle'", target);
             }
         };
@@ -151,13 +189,15 @@ export class LidoFlash {
             if (this.autoFlipTimer)
                 window.clearTimeout(this.autoFlipTimer);
             AudioPlayer.getI().stop();
+            this.clearNarrationTimers();
             const goingBack = !this.flipped;
             this.flipped = !this.flipped;
+            this.stopGoodJobGlow();
             this.setArrowVisible(false);
             if (goingBack) {
                 const text = this.backText();
                 if (text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
-                    executeActions("this.speak='true'", text);
+                    this.startNarration(text);
                 else
                     this.showArrow();
             }
@@ -165,40 +205,113 @@ export class LidoFlash {
                 this.speakFront();
             }
         };
-        this.instructionText = () => { var _a; return document.getElementById(((_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id')) || ''); };
+        this.instructionText = () => {
+            const container = this.el.closest('lido-container');
+            const id = container === null || container === void 0 ? void 0 : container.getAttribute('template-id');
+            return id ? container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`) : null;
+        };
         this.frontText = () => this.el.querySelector('.card-front lido-text');
         this.backText = () => this.el.querySelector('.card-back lido-text');
-        this.speakFront = () => {
+        this.nextArrow = () => { var _a; return (_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.querySelector('#arrow'); };
+        this.stopGoodJobGlow = () => {
             var _a;
+            this.goodJobPlaybackId = undefined;
+            this.goodJobPlaybackContext = undefined;
+            (_a = this.nextArrow()) === null || _a === void 0 ? void 0 : _a.classList.remove('flash-card-next-glowing');
+        };
+        this.speakFront = () => {
+            var _a, _b;
             const text = this.frontText();
             if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
-                executeActions("this.speak='true'", text);
+                this.startNarration(text);
+            }
+            else if (this.instructionDone && !this.flipped && (!text || !((_b = text.textContent) === null || _b === void 0 ? void 0 : _b.trim()))) {
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
             }
         };
+        this.clearNarrationTimers = () => {
+            if (this.narrationGraceTimer)
+                window.clearTimeout(this.narrationGraceTimer);
+            this.narrationGraceTimer = undefined;
+            this.narrationTarget = null;
+            this.narrationHandled = false;
+        };
+        this.continueAfterNarration = (target) => {
+            if (target === this.instructionText()) {
+                this.instructionDone = true;
+                this.frontStartTimer = window.setTimeout(() => this.speakFront(), 1200);
+            }
+            else if (target === this.frontText()) {
+                if (this.flipped)
+                    return;
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
+            }
+            else if (target === this.backText()) {
+                if (this.flipped)
+                    this.showArrow();
+            }
+        };
+        this.finishNarration = (target) => {
+            if (target !== this.narrationTarget || this.narrationHandled)
+                return;
+            this.narrationHandled = true;
+            if (this.narrationGraceTimer)
+                window.clearTimeout(this.narrationGraceTimer);
+            this.narrationGraceTimer = undefined;
+            this.continueAfterNarration(target);
+        };
+        this.startNarration = (target) => {
+            this.clearNarrationTimers();
+            this.narrationTarget = target;
+            this.narrationGraceTimer = window.setTimeout(() => {
+                if (!this.narrationHandled)
+                    this.finishNarration(target);
+            }, LidoFlash.narrationStartGrace);
+            executeActions("this.speak='true'", target);
+        };
         this.showArrow = () => {
             if (!this.flipped)
                 return;
-            const arrow = document.getElementById('arrow');
+            const container = this.el.closest('lido-container');
+            if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) !== 'flashcardtemplate')
+                return;
+            const arrow = this.nextArrow();
             if (!arrow)
                 return;
             // Existing ZIPs may not have the newer template onTouch action. Reuse
             // the same direct nextBtn action as the shared home arrow for them.
             if (!arrow.getAttribute('onTouch'))
                 arrow.setAttribute('onTouch', "this.nextBtn='true';");
-            const mascot = document.getElementById('lido-avatar');
+            const mascot = container.querySelector('#lido-avatar');
             const scaffoldAudio = arrow.getAttribute('audio');
             if (mascot && scaffoldAudio) {
                 mascot.setAttribute('audio', scaffoldAudio);
-                arrow.removeAttribute('audio');
             }
             this.setArrowVisible(true);
+            // Keep the next action highlighted after mascot audio ends.
+            arrow.classList.add('flash-card-next-glowing');
             if (mascot) {
+                this.goodJobPlaybackContext = {};
+                this.goodJobPlaybackId = undefined;
                 executeActions("this.avatarAnimate='Idle speak'", mascot);
-                AudioPlayer.getI().play(mascot, true);
+                AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext);
             }
         };
         this.setArrowVisible = (visible) => {
-            const arrow = document.getElementById('arrow');
+            const container = this.el.closest('lido-container');
+            if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) !== 'flashcardtemplate')
+                return;
+            const arrow = container.querySelector('#arrow');
             if (!arrow)
                 return;
             arrow.visible = visible;
@@ -209,6 +322,7 @@ export class LidoFlash {
             arrow.style.display = visible ? 'block' : 'none';
             arrow.style.visibility = visible ? 'visible' : 'hidden';
             arrow.style.opacity = visible ? '1' : '0';
+            arrow.style.pointerEvents = visible ? 'auto' : 'none';
             const arrowImage = arrow.querySelector('lido-image');
             if (arrowImage) {
                 arrowImage.style.display = visible ? 'flex' : 'none';
@@ -231,21 +345,47 @@ export class LidoFlash {
         window.addEventListener('load', this.updateStyles);
     }
     componentDidLoad() {
+        var _a;
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
+        window.addEventListener('lidoAudioStarted', this.onAudioStarted);
+        window.addEventListener('lidoAudioPlaying', this.onAudioPlaying);
         window.addEventListener('lidoAudioEnded', this.onAudioEnded);
+        const container = this.el.closest('lido-container');
+        if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'flashcardtemplate') {
+            (_a = container.querySelector('#lido-avatar')) === null || _a === void 0 ? void 0 : _a.setAttribute('disable-speak', 'true');
+            this.instructionStartTimer = window.setTimeout(() => {
+                if (!this.instructionStarted && !this.instructionDone) {
+                    const instruction = this.instructionText();
+                    if (instruction)
+                        this.startNarration(instruction);
+                }
+            }, 150);
+        }
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
     disconnectedCallback() {
         window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        window.removeEventListener('lidoAudioPlaying', this.onAudioPlaying);
+        window.removeEventListener('lidoAudioStarted', this.onAudioStarted);
         if (this.autoFlipTimer)
             window.clearTimeout(this.autoFlipTimer);
+        if (this.instructionStartTimer)
+            window.clearTimeout(this.instructionStartTimer);
+        if (this.frontStartTimer)
+            window.clearTimeout(this.frontStartTimer);
+        this.clearNarrationTimers();
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '8d65b494352e0c0aefb3815c87a798967ccb65aa', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'db3d4fce4f9f54437485ab1274b1f9bd3b3486bc', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'd37770b0b08eac533265d7f8049c598df047aa37', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '2f8431017cfed9f9adb679442be833a65704d41e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: '57b9dc5ecf618dc381a58e107fa2990b84f5517a', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
+                var _a, _b;
+                if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '#lido-avatar'))
+                    return;
+                this.handleFlip();
+            }, "disable-speak": this.disableSpeak }, h("div", { key: '3712fc66e33323bdd55e0abb747370ee461dc808', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'eb8af2e445393592c0e8a3e4c5934c71dcab4b4e', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'efa14cc7ea506714342151b12a9724bdcdb1eba8', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -612,7 +752,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -688,7 +828,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the card is flipped (back side visible).\r\n`mutable` lets the component toggle itself on click;\r\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
+                    "text": "Whether the card is flipped (back side visible).\n`mutable` lets the component toggle itself on click;\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
                 },
                 "getter": false,
                 "setter": false,
@@ -728,7 +868,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -791,3 +931,4 @@ export class LidoFlash {
             }];
     }
 }
+LidoFlash.narrationStartGrace = 800;