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

package/dist/collection/stories/Templates/writeWord/writeWord.stories.js

@@ -50,39 +50,39 @@ function getContainerXml(args) {
         console.error('Trace image is missing');
         return '';
     }
-    return `
-        <main>
-            <lido-container id="lido-container" tab-index="1" objective="writeWord" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20word.png" height="100%" width="100%" bg-color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
-
-                    <!-- Chimple Avatar -->
-                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1200px, portrait.450px" y="landscape.390px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                        <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                        </lido-avatar>
-                        <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
-                        </lido-image>
-                    </lido-cell>
-
-                    
-
-                    <lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
-                        <lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
-                            <!-- text-element -->
-                            <lido-cell layout="pos" display="flex" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.525px, portrait.525px" x="landscape.545px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" bg-color="transparent" visible="true"  onEntry="this.z-index='2'; this.align-items='center'; this.justify-content='center'; this.display='flex';">
-                                <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="525px" height="80px" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0'; this.fontWeight='600';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black"  color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
-                                </lido-text>                        
-                            </lido-cell>
-                        </lido-image>
-
-                        <lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">
-                        </lido-image>
-                    </lido-cell>
-
-                    <!-- trace element -->
-                    <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" height="landscape.500px, portrait.500px" width="landscape.550px, portrait.550px" x="landscape.510px, portrait.75px" y="landscape.305px, portrait.475px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="trace1.visibility='visible'; this.flex-shrink='0';">
-                        <lido-trace id="trace1"  audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/B.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/U.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/G.wav" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="this.sleep='2000'; txt1.speak='true';" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
-                        </lido-trace>
-                    </lido-cell>
-            </lido-container>
-        </main>
+    return `
+        <main>
+            <lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" objective="writeWord" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20word.png" height="100%" width="100%" bg-color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" after-drop="false">
+
+                    <!-- Chimple Avatar -->
+                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1200px, portrait.450px" y="landscape.390px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                        <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                        </lido-avatar>
+                        <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
+                        </lido-image>
+                    </lido-cell>
+
+                    
+
+                    <lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
+                        <lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
+                            <!-- text-element -->
+                            <lido-cell layout="pos" display="flex" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.525px, portrait.525px" x="landscape.545px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" bg-color="transparent" visible="true"  onEntry="this.z-index='2'; this.align-items='center'; this.justify-content='center'; this.display='flex';">
+                                <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="525px" height="80px" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0'; this.fontWeight='600';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black"  color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
+                                </lido-text>                        
+                            </lido-cell>
+                        </lido-image>
+
+                        <lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">
+                        </lido-image>
+                    </lido-cell>
+
+                    <!-- trace element -->
+                    <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" height="landscape.500px, portrait.500px" width="landscape.550px, portrait.550px" x="landscape.510px, portrait.75px" y="landscape.305px, portrait.475px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="trace1.visibility='visible'; this.flex-shrink='0';">
+                        <lido-trace id="trace1"  audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/B.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/U.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/G.wav" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="this.sleep='2000'; txt1.speak='true';" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
+                        </lido-trace>
+                    </lido-cell>
+            </lido-container>
+        </main>
     `;
 }

package/dist/collection/stories/components/flash-card.stories.js

@@ -10,21 +10,21 @@ export default meta;
 export const FrontTextBackCol = {
     args: {},
     render: _ => {
-        const xml = `<main>
-	<lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-		<lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-			<lido-flash-card x="50" y="200" width="220px" height="140px">
-				<lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
-				</lido-text>
-				<lido-col id="col5" slot="back" disable-edit="true" visible="true" width="300px" height="400px" bg-color="orange" type="" tab-index="6" dropAttr="diagonal" value="cat" onEntry="this.position='relative';" y="landscape.-50px,portrait.">
-					<lido-image visible="true" src="https://i0.wp.com/pixahive.com/wp-content/uploads/2021/02/Yellow-pattern-abstract-background-wallpaper-325431-pixahive.jpg?fit=778%2C435ssl=1" z="0" width="200px" height="300px" onEntry="">
-					</lido-image>
-					<lido-text width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-					</lido-text>
-				</lido-col>
-			</lido-flash-card>
-		</lido-row>
-	</lido-container>
+        const xml = `<main>
+	<lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+		<lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+			<lido-flash-card x="50" y="200" width="220px" height="140px">
+				<lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
+				</lido-text>
+				<lido-col id="col5" slot="back" disable-edit="true" visible="true" width="300px" height="400px" bg-color="orange" type="" tab-index="6" dropAttr="diagonal" value="cat" onEntry="this.position='relative';" y="landscape.-50px,portrait.">
+					<lido-image visible="true" src="https://i0.wp.com/pixahive.com/wp-content/uploads/2021/02/Yellow-pattern-abstract-background-wallpaper-325431-pixahive.jpg?fit=778%2C435ssl=1" z="0" width="200px" height="300px" onEntry="">
+					</lido-image>
+					<lido-text width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+					</lido-text>
+				</lido-col>
+			</lido-flash-card>
+		</lido-row>
+	</lido-container>
 	</main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -32,17 +32,17 @@ export const FrontTextBackCol = {
 export const BothText = {
     args: {},
     render: _ => {
-        const xml = `<main>
-      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-              <lido-flash-card x="50" y="200" width="220px" height="140px">
-                  <lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
-                  </lido-text>
-                      <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-                      </lido-text>
-              </lido-flash-card>
-          </lido-row>
-      </lido-container>
+        const xml = `<main>
+      <lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+              <lido-flash-card x="50" y="200" width="220px" height="140px">
+                  <lido-text slot="front" width="400px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="lion" visible="true" y="landscape.35px, portrait.15px" bg-color="red">
+                  </lido-text>
+                      <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="tiger" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+                      </lido-text>
+              </lido-flash-card>
+          </lido-row>
+      </lido-container>
       </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -50,17 +50,17 @@ export const BothText = {
 export const BothImages = {
     args: {},
     render: _ => {
-        const xml = `<main>
-      <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-              <lido-flash-card x="50" y="200" width="220px" height="140px">
-                          <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
-                      </lido-image>
-                      <lido-image visible="true" slot="back" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Boat.png" z="0" width="200px" height="300px" onEntry="">
-                      </lido-image>
-              </lido-flash-card>
-          </lido-row>
-      </lido-container>
+        const xml = `<main>
+      <lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+          <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+              <lido-flash-card x="50" y="200" width="220px" height="140px">
+                          <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
+                      </lido-image>
+                      <lido-image visible="true" slot="back" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Boat.png" z="0" width="200px" height="300px" onEntry="">
+                      </lido-image>
+              </lido-flash-card>
+          </lido-row>
+      </lido-container>
       </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },
@@ -68,17 +68,17 @@ export const BothImages = {
 export const FrontImageBackText = {
     args: {},
     render: _ => {
-        const xml = `<main>
-        <lido-container id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
-            <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
-                <lido-flash-card x="50" y="200" width="220px" height="140px">
-                            <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
-                        </lido-image>
-                    <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="Bird" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
-                      </lido-text>
-                </lido-flash-card>
-            </lido-row>
-        </lido-container>
+        const xml = `<main>
+        <lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer3" objective="lion,crocodile,cow" bg-color="#B1BEFD" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; this.removeClone='.cloned-element'" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" dropAttr="diagonal">
+            <lido-row visible="true" width="landscape.100%, portrait.338px" onEntry="" height="landscape.100%, portrait." y="landscape.340px, portrait.300px" x="landscape.,portrait.520px" direction="landscape.row, portrait.column">
+                <lido-flash-card x="50" y="200" width="220px" height="140px">
+                            <lido-image visible="true" slot="front" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/thumbnails/sticker/Bird_Blue.png" z="0" width="200px" height="300px" onEntry="">
+                        </lido-image>
+                    <lido-text slot="back" width="300px" height="200px" display="flex" onEntry="" font-family="" font-size="48px" z="1" font-color="black" fontWeight="bold" color="#000000" string="Bird" visible="true" y="landscape.35px, portrait.15px" bg-color="yellow">
+                      </lido-text>
+                </lido-flash-card>
+            </lido-row>
+        </lido-container>
         </main>`;
         return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
     },

package/dist/collection/stories/components/keyboard.stories.js

@@ -24,15 +24,15 @@ export const Keyboard = {
     },
 };
 const getContainerXml = args => {
-    return `<main>
-            <lido-container objective="${args.objective}" is-continue-on-correct="true" drop-action="infinite-drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-              <!-- Chimple Avatar -->
-              <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-                  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-                  </lido-avatar>
-              </lido-cell>
-              ${args.type === 'drag' ? `<lido-text visible="true" string="Drag the letters to this boxes." font-family="'Baloo Bhai 2'" font-size="36px" bg-color="transparent" margin="0 0 20px 0" type="drop"></lido-text>` : ""}
-              <lido-keyboard visible="true" keys="${args.keys}" type="${args.type}" width="1000px" height="300px" keyboard-input="${args.keyboardInput === "enable" ? "true" : "false"}"></lido-keyboard>
-            </lido-container>
+    return `<main>
+            <lido-container highlight-word-by-word="true" objective="${args.objective}" is-continue-on-correct="true" drop-action="infinite-drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+              <!-- Chimple Avatar -->
+              <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+                  <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+                  </lido-avatar>
+              </lido-cell>
+              ${args.type === 'drag' ? `<lido-text visible="true" string="Drag the letters to this boxes." font-family="'Baloo Bhai 2'" font-size="36px" bg-color="transparent" margin="0 0 20px 0" type="drop"></lido-text>` : ""}
+              <lido-keyboard visible="true" keys="${args.keys}" type="${args.type}" width="1000px" height="300px" keyboard-input="${args.keyboardInput === "enable" ? "true" : "false"}"></lido-keyboard>
+            </lido-container>
           </main>`;
 };

package/dist/collection/stories/components/slider.stories.js

@@ -32,9 +32,9 @@ export const QuestionAndOptions = {
 };
 function getContainerXml(args) {
     const { src, fillPercentage, fillDirection, min, max, division, numberType } = args;
-    return `<main>
-    <lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="..." aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="black" visible="true">
-      <lido-slide-fill fill="${fillPercentage}" width="500px" src="${src}" fillDirection="${fillDirection}" numberType="${numberType}" min="${min}" max="${max}" division="${division}" ></lido-slider-fill>
-    </lido-container>
+    return `<main>
+    <lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer1" objective="..." aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="black" visible="true">
+      <lido-slide-fill fill="${fillPercentage}" width="500px" src="${src}" fillDirection="${fillDirection}" numberType="${numberType}" min="${min}" max="${max}" division="${division}" ></lido-slider-fill>
+    </lido-container>
   </main>`;
 }

package/dist/collection/stories/components/trace.stories.js

@@ -20,10 +20,10 @@ export const QuestionAndOptions = {
 function getContainerXml(args) {
     let svgText = args.svgFile[0];
     let mode = args.mode;
-    return `<main>
-	<lido-container id="lido-container" tab-index="1" value="mainContainer1" objective="D-6ba518e3,D-5a192ba3,D-b686f882,D-9095b74f,D-e0a32c78,D-1e4e88f1" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-		<lido-trace id="image1" tab-index="2" value="image1" visible="true" svgSource="${svgText}" mode="${mode}" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
-		</lido-trace>
-	</lido-container>
+    return `<main>
+	<lido-container highlight-word-by-word="true" id="lido-container" tab-index="1" value="mainContainer1" objective="D-6ba518e3,D-5a192ba3,D-b686f882,D-9095b74f,D-e0a32c78,D-1e4e88f1" aria-label="" height="100vh" width="100vw" x="0" y="0" z="0" bg-color="#FFB742" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-trace id="image1" tab-index="2" value="image1" visible="true" svgSource="${svgText}" mode="${mode}" z="0" width="1600px" height="900px" onEntry="" alt-text="{backgroundImage}">
+		</lido-trace>
+	</lido-container>
 	</main>`;
 }

package/dist/collection/utils/audioPlayer.js

@@ -115,7 +115,7 @@ export class AudioPlayer {
             return el;
         return el.closest('lido-text');
     }
-    async play(targetElement, suppressHighlight = false, playbackContext) {
+    async play(targetElement, suppressHighlight = false, playbackContext, fallbackAudio) {
         this.registerVisibilityEvents();
         this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
@@ -218,7 +218,12 @@ export class AudioPlayer {
                     };
                 });
             }
-            catch (error) { }
+            catch (error) {
+                if (fallbackAudio && fallbackAudio !== audioUrl) {
+                    targetElement.setAttribute('audio', fallbackAudio);
+                    await this.play(targetElement, suppressHighlight, playbackContext);
+                }
+            }
             finally {
                 this.audioElement.onended = null;
                 this.audioElement.onloadedmetadata = null;

package/dist/collection/utils/constants.js

@@ -20,6 +20,12 @@ export const LidoContainer = 'lido-container';
 export const LangChangeEvent = 'languageChanged';
 export const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
 export const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
+export const GOOD_JOB_AUDIO_FILE = 'goodJob.mp3';
+export const resolveCommonAudioPath = (basePath, fileName) => {
+    if (!basePath || !fileName)
+        return undefined;
+    return `${basePath}/${fileName}`;
+};
 export const LIDO_INTERACTION_CLEANUP_EVENT = 'lido:interaction-cleanup';
 export const TemplateID = 'template-id';
 export const CalculatorOk = 'calculator-ok';

package/dist/collection/utils/utils.js

@@ -1,4 +1,4 @@
-import { ActivityScoreKey, DragMapKey, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, CalculatorOk } from "./constants";
+import { ActivityScoreKey, DragMapKey, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, CalculatorOk, LIDO_COMMON_AUDIO_PATH, resolveCommonAudioPath, GOOD_JOB_AUDIO_FILE } from "./constants";
 import { dispatchActivityEndEvent, dispatchGameCompletedEvent, dispatchLessonEndEvent, dispatchNextContainerEvent, dispatchPrevContainerEvent } from "./customEvents";
 import GameScore from "./constants";
 import { RiveService } from "./rive-service";
@@ -17,6 +17,44 @@ import { handlingMatrix } from "./utilsHandlers/matrixHandler";
 import { balanceResult } from "./utilsHandlers/lidoBalanceHandler";
 import { ACTIVYTY_TIME_SPEND_ARRAY, Timer } from "./utilsHandlers/timer";
 const gameScore = new GameScore();
+const GOOD_JOB_TEMPLATES = new Set(['flashcardtemplate', 'writeCard', 'drawShape', 'storyTale']);
+export const isGoodJobAudioTarget = (element) => {
+    var _a;
+    const templateId = (_a = element === null || element === void 0 ? void 0 : element.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id');
+    if (!GOOD_JOB_TEMPLATES.has(templateId || ''))
+        return false;
+    if ((element === null || element === void 0 ? void 0 : element.id) === 'arrow')
+        return true;
+    return templateId === 'storyTale' && (element === null || element === void 0 ? void 0 : element.id) === 'arrow1' && !!element.closest('#arrow');
+};
+export const resetGoodJobAudioTracking = (home) => {
+    home.__lidoGoodJobTemplates = new Set();
+};
+export const shouldPlayGoodJobAudio = (element) => {
+    var _a;
+    if (!isGoodJobAudioTarget(element))
+        return false;
+    // Standalone templates and editor previews have no lesson host. Preserve
+    // their existing behavior rather than making them depend on lido-home.
+    const home = element.closest('lido-home');
+    if (!home)
+        return true;
+    const templateId = (_a = element.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id');
+    if (!templateId)
+        return true;
+    const played = home.__lidoGoodJobTemplates || (home.__lidoGoodJobTemplates = new Set());
+    if (played.has(templateId))
+        return false;
+    played.add(templateId);
+    return true;
+};
+export const getGoodJobAudio = (element) => {
+    if (!element)
+        return undefined;
+    if (!isGoodJobAudioTarget(element))
+        return undefined;
+    return resolveCommonAudioPath(window[LIDO_COMMON_AUDIO_PATH], GOOD_JOB_AUDIO_FILE);
+};
 export function buildDragSelectedMapFromDOM() {
     const map = {};
     const draggedEls = document.querySelectorAll(`[${DropToAttr}]`);
@@ -240,7 +278,21 @@ export const executeActions = async (actionsString, thisElement, element, option
                     const val = (action.value || '').toString().trim().toLowerCase();
                     if (val === 'true' || val === '1' || val === 'yes') {
                         try {
-                            await AudioPlayer.getI().play(targetElement);
+                            if (isGoodJobAudioTarget(targetElement) && !shouldPlayGoodJobAudio(targetElement))
+                                break;
+                            const isGoodJobTarget = isGoodJobAudioTarget(targetElement);
+                            const currentAudio = targetElement.getAttribute('audio') || undefined;
+                            const originalAudio = isGoodJobTarget
+                                ? (targetElement.getAttribute('data-lido-original-audio') || currentAudio)
+                                : currentAudio;
+                            const localizedAudio = getGoodJobAudio(targetElement);
+                            if (localizedAudio) {
+                                if (currentAudio && !targetElement.hasAttribute('data-lido-original-audio')) {
+                                    targetElement.setAttribute('data-lido-original-audio', currentAudio);
+                                }
+                                targetElement.setAttribute('audio', localizedAudio);
+                            }
+                            await AudioPlayer.getI().play(targetElement, false, undefined, originalAudio);
                         }
                         catch (err) {
                             console.error('Error playing audio for speak action:', err);
@@ -486,11 +538,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             if (!sourcePlaceholder) {
                 dragElement.replaceWith(dummyElement);
             }
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = sourcePlaceholder

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -970,14 +970,14 @@ export async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }

package/dist/collection/utils/utilsHandlers/highlightHandler.js

@@ -8,32 +8,32 @@ export function showWrongAnswerAnimation(elements) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-          @keyframes enhanced-shake {
-              0% { left: 0; }
-              10% { left: -8px; }
-              20% { left: 8px; }
-              30% { left: -8px; }
-              40% { left: 8px; }
-              50% { left: -6px; }
-              60% { left: 6px; }
-              70% { left: -4px; }
-              80% { left: 4px; }
-              90% { left: -2px; }
-              100% { left: 0; }
-          }
-
-          
-          .wrong-answer {
-              position: relative; /* Enable relative positioning to move the element */
-              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
-              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
-
-              border: 4px solid red;
-          }
-
-          
+        style.innerHTML = `
+          @keyframes enhanced-shake {
+              0% { left: 0; }
+              10% { left: -8px; }
+              20% { left: 8px; }
+              30% { left: -8px; }
+              40% { left: 8px; }
+              50% { left: -6px; }
+              60% { left: 6px; }
+              70% { left: -4px; }
+              80% { left: 4px; }
+              90% { left: -2px; }
+              100% { left: 0; }
+          }
+
+          
+          .wrong-answer {
+              position: relative; /* Enable relative positioning to move the element */
+              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
+              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
+
+              border: 4px solid red;
+          }
+
+          
       `;
         document.head.appendChild(style);
     }
@@ -61,34 +61,34 @@ export function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }

package/dist/collection/utils/utilsHandlers/sortHandler.js

@@ -163,11 +163,11 @@ export function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -390,11 +390,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');