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

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

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     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.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\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.\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.\r\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.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -562,7 +562,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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)\""
+                    "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)\""
                 },
                 "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.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { convertUrlToRelative, initEventsForElement, calculateScale } from "../../utils/utils";
+import { convertUrlToRelative, initEventsForElement, calculateScale, initializePlayModeDragDropElements } from "../../utils/utils";
 import i18next from "../../utils/i18n";
 import { highlightElement } from "../../utils/utilsHandlers/highlightHandler";
 import { LIDO_INTERACTION_CLEANUP_EVENT, TemplateID } from "../../utils/constants";
@@ -169,6 +169,33 @@ export class LidoContainer {
         this.speakFlag = false;
         this.handleWindowResize = () => this.scaleContainer(this.el);
         this.handleWindowLoad = () => this.scaleContainer(this.el);
+        this.shouldInitializePlayModeDragDrop = false;
+        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 => {
@@ -179,6 +206,17 @@ export class LidoContainer {
         const langToApply = newLang || this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
     }
+    canplayChanged(newValue, oldValue) {
+        if (this.templateId !== 'foodJar' || !newValue || oldValue !== false)
+            return;
+        this.shouldInitializePlayModeDragDrop = true;
+    }
+    componentDidRender() {
+        if (!this.shouldInitializePlayModeDragDrop || !this.canplay)
+            return;
+        this.shouldInitializePlayModeDragDrop = false;
+        void initializePlayModeDragDropElements(this.el);
+    }
     componentWillLoad() {
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
@@ -414,10 +452,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 +473,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 +495,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: '9dd374c6cdfcc88a5b18e7dc7fec527c853a4719', 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: '8295782a74ce6ef8ca9a623de8a28b539d9f6d4f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'eb3c995b777986e07dcb6aa935ef38d41aa1e7e7' })));
+        return (h(Host, { key: '1ec8ce95f69ad27bc534b5cb5b3ccc19e8e1880d', 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: '4124095c478efa28590e9dc40a7e87831bf719fb', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c078309c288e41c03828c3768d6033d2fae981cd' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -579,7 +622,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
                 },
                 "getter": false,
                 "setter": false,
@@ -1019,7 +1062,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1059,7 +1102,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1079,7 +1122,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1098,7 +1141,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1117,7 +1160,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1136,7 +1179,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1276,6 +1319,9 @@ export class LidoContainer {
         return [{
                 "propName": "Lang",
                 "methodName": "languageChanged"
+            }, {
+                "propName": "canplay",
+                "methodName": "canplayChanged"
             }];
     }
 }

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

@@ -1,72 +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;
-  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;
-  }
-}
+
+
+.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

@@ -4,8 +4,9 @@
  *  controllable `flipped` prop.
  * ------------------------------------------------------------------*/
 import { Host, h } from "@stencil/core";
-import { parseProp, initEventsForElement, setVisibilityWithDelay, executeActions } from "../../utils/utils";
+import { parseProp, initEventsForElement, setVisibilityWithDelay, executeActions, getGoodJobAudio, shouldPlayGoodJobAudio } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
+import { TemplateID } from "../../utils/constants";
 export class LidoFlash {
     constructor() {
         /* ---------- Generic Lido props (mirrors lido‑row) ---------- */
@@ -88,6 +89,7 @@ export class LidoFlash {
         this.narrationHandled = false;
         this.instructionDone = false;
         this.instructionStarted = false;
+        this.shouldPlayTemplateInstruction = true;
         this.onAudioStarted = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
@@ -113,7 +115,7 @@ export class LidoFlash {
             arrow.classList.add('flash-card-next-glowing');
         };
         this.onAudioEnded = (event) => {
-            var _a, _b, _c, _d;
+            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)))
@@ -150,7 +152,6 @@ export class LidoFlash {
                 if (playbackContext !== this.goodJobPlaybackContext || playbackId !== this.goodJobPlaybackId)
                     return;
                 this.goodJobPlaybackId = undefined;
-                (_d = this.nextArrow()) === null || _d === void 0 ? void 0 : _d.classList.remove('flash-card-next-glowing');
                 executeActions("this.avatarAnimate='Idle'", target);
             }
         };
@@ -221,11 +222,19 @@ export class LidoFlash {
             (_a = this.nextArrow()) === null || _a === void 0 ? void 0 : _a.classList.remove('flash-card-next-glowing');
         };
         this.speakFront = () => {
-            var _a;
+            var _a, _b;
             const text = this.frontText();
             if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
                 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)
@@ -286,16 +295,20 @@ export class LidoFlash {
             if (!arrow.getAttribute('onTouch'))
                 arrow.setAttribute('onTouch', "this.nextBtn='true';");
             const mascot = container.querySelector('#lido-avatar');
-            const scaffoldAudio = arrow.getAttribute('audio');
-            if (mascot && scaffoldAudio) {
+            const originalAudio = (mascot === null || mascot === void 0 ? void 0 : mascot.getAttribute('audio')) || undefined;
+            const scaffoldAudio = getGoodJobAudio(arrow) || originalAudio;
+            const shouldPlayGoodJob = shouldPlayGoodJobAudio(arrow);
+            if (mascot && scaffoldAudio && shouldPlayGoodJob) {
                 mascot.setAttribute('audio', scaffoldAudio);
             }
             this.setArrowVisible(true);
-            if (mascot) {
+            // Keep the next action highlighted after mascot audio ends.
+            arrow.classList.add('flash-card-next-glowing');
+            if (mascot && shouldPlayGoodJob) {
                 this.goodJobPlaybackContext = {};
                 this.goodJobPlaybackId = undefined;
                 executeActions("this.avatarAnimate='Idle speak'", mascot);
-                AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext);
+                AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
             }
         };
         this.setArrowVisible = (visible) => {
@@ -336,7 +349,7 @@ export class LidoFlash {
         window.addEventListener('load', this.updateStyles);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
         window.addEventListener('lidoAudioStarted', this.onAudioStarted);
@@ -344,9 +357,17 @@ export class LidoFlash {
         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');
+            const home = container.closest('lido-home');
+            const playedTemplates = ((_a = home === null || home === void 0 ? void 0 : home.getAttribute(TemplateID)) === null || _a === void 0 ? void 0 : _a.split(',').map(value => value.trim()).filter(Boolean)) || [];
+            this.shouldPlayTemplateInstruction = !playedTemplates.includes('flashcardtemplate');
+            (_b = container.querySelector('#lido-avatar')) === null || _b === void 0 ? void 0 : _b.setAttribute('disable-speak', 'true');
             this.instructionStartTimer = window.setTimeout(() => {
                 if (!this.instructionStarted && !this.instructionDone) {
+                    if (!this.shouldPlayTemplateInstruction) {
+                        this.instructionDone = true;
+                        this.speakFront();
+                        return;
+                    }
                     const instruction = this.instructionText();
                     if (instruction)
                         this.startNarration(instruction);
@@ -369,14 +390,37 @@ export class LidoFlash {
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
+    async replayGoodJobAudio() {
+        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();
+        const mascot = container.querySelector('#lido-avatar');
+        if (!arrow || !mascot)
+            return;
+        const arrowVisible = arrow.getAttribute('visible') === 'true'
+            || arrow.style.visibility === 'visible';
+        if (!arrowVisible)
+            return;
+        const originalAudio = mascot.getAttribute('audio') || undefined;
+        const localizedAudio = getGoodJobAudio(arrow);
+        const replayAudio = localizedAudio || originalAudio;
+        if (!replayAudio)
+            return;
+        mascot.setAttribute('audio', replayAudio);
+        this.goodJobPlaybackContext = {};
+        this.goodJobPlaybackId = undefined;
+        executeActions("this.avatarAnimate='Idle speak'", mascot);
+        await AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
+    }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '9098ad4c1f41ac70e6737438209f2f3027153b3b', 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) => {
+        return (h(Host, { key: 'b6012ba4855d142b6fdbad9dcfd7251bfcbb932b', 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: 'b235e008f35e29db21991d76bd83fccac471ba75', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '7b2306efdc5a4dac6edfe5004ae34ef486b73dd5', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '3d164fa2faa72b7ffcbaf20482bfea2148aeaaf4', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+            }, "disable-speak": this.disableSpeak }, h("div", { key: 'fecb100c8ac0f227d8bd685d02f8314e9018fe02', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'e89512323ad8eb884548a1dead734f635c096c8f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '82820aaf5b5febcf8247f96faca59976b8fade8e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -743,7 +787,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -819,7 +863,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -859,7 +903,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -914,6 +958,31 @@ export class LidoFlash {
             "style": {}
         };
     }
+    static get methods() {
+        return {
+            "replayGoodJobAudio": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{