lido-player 0.0.2-alpha-52-dev → 0.0.2-alpha-55-dev

package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js

@@ -35,13 +35,14 @@ function getContainerXml(args) {
     const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     const dragCells = options
         .map((digit, i) => `
-        <lido-text id="${i}" tab-index="${i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px';" border-image="">
+        <lido-text id="drag-${i}" tab-index="${100 + i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
+        onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
         </lido-text>
     `)
         .join('\n');
     return `
     <main>
-        <lido-container id="lido-container" objective="${missingNumber}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='20000';" drop-action="infinite-drop" show-check="false">
+        <lido-container id="lido-container" objective="${missingNumber}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sequence%20box.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='20000';" drop-action="infinite-drop" show-check="false">
 
 			<!-- Chimple Avatar -->
 			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0';">
@@ -58,7 +59,7 @@ function getContainerXml(args) {
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
 					</lido-image>
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						<lido-text id="drop-${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
 						</lido-text>
 					</lido-image>
 				</lido-cell>
@@ -66,7 +67,7 @@ function getContainerXml(args) {
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
 					</lido-image>
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						<lido-text id="drop-${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
 						</lido-text>
 					</lido-image>
 				</lido-cell>
@@ -74,7 +75,7 @@ function getContainerXml(args) {
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
 					</lido-image>
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+						<lido-text id="drop-${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
 						</lido-text>
 					</lido-image>
 				</lido-cell>
@@ -82,7 +83,7 @@ function getContainerXml(args) {
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
 					</lido-image>
 					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
-						<lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						<lido-text id="drop-${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
 						</lido-text>
 					</lido-image>
 				</lido-cell>

package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js

@@ -79,7 +79,7 @@ export const ShapePair = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
+    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="${args.isAllowOnlyCorrect}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Shape%20pair.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}" is-continue-on-correct="${args.isContinueOnCorrect}">
 				<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
 				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">

package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js

@@ -183,31 +183,35 @@ function getContainerXml({ blocks, options }) {
         .join("");
     return `
     <main>
-     <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2{border: none !important;}"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
-			<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry=" this.animation='rightToPlace 2.5s linear';">
-				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
-				</lido-avatar>
-		</lido-cell>
+      <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Shape%20tractor.png" custom-style="#drop1, #drop2{border: none !important;}"  onCorrect="drg1.disableType='true'; drg2.disableType='true'; drg3.disableType='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false'; lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear'; truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" > 
 
-        <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
-		  	<lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
-			<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
-			
-		  <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px"   margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
-			
-			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px"></lido-image>
-			${truckBlocks}
+          <!-- Chimple Avatar -->
+          <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry=" this.animation='rightToPlace 2.5s linear';">
+              <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
+              </lido-avatar>
           </lido-cell>
-        </lido-cell>
 
-        <lido-cell visible="true" id="answer" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
-          ${optionCells}
-        </lido-cell>
-      </lido-container>
+          <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
+
+            <lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';">
+            </lido-text>
+            <lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';">
+            </lido-text>
+            
+            <lido-cell visible="true" layout="row" bg-color="transparent" gap="0px"   margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
+            
+              <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px">
+              </lido-image>
 
-      
-     
+              ${truckBlocks}
+                
+            </lido-cell>
+          </lido-cell>
+
+          <lido-cell visible="true" id="answer" delay-visible="2650" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
+            ${optionCells}
+          </lido-cell>
+        </lido-container>     
     </main>
   `;
 }

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

@@ -24,7 +24,7 @@ function getContainerXml(args) {
     let tabCounter = 1;
     const correctSequence = args.options.filter(opt => opt.startsWith('#') || opt.startsWith('@')).map(opt => opt.slice(1)).join('');
     return `<main>
-    	<lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/spelldoor/Background_Spring.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success';  correctWord.speak='true';  this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
+    	<lido-container id="lido-container" is-allow-only-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Spell%20door.png" objective="${drops.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect=" lido-avatar.avatarAnimate='Success';  correctWord.speak='true';  this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
 				<lido-text visible="false" id="correctWord" onEntry="this.display='none';" string="${correctSequence}" ></lido-text>
 		<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" value="pos2" height="305px" width="227px" x="landscape.81%, portrait.60%" y="landscape.12%, portrait.20%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">

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

@@ -64,14 +64,14 @@ function getContainerXml(args) {
     const dragCells = options
         .map((digit, i) => {
         return `
-        <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true"   value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="white" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+        <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true" onInCorrect="this.speak='true';" onCorrect="this.speak='true';" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="white" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
         </lido-text>
         `;
     }).join('\n');
     return `
     <main>
         
-        <lido-container id="sum-together" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1"  value="sum-together" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+        <lido-container id="lido-container" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1"  value="sum-together" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Sum%20together.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
 
             <!-- Chimple Avatar -->
             <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.-80px, portrait.195px" y="landscape.175px, portrait.1085px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='0';">
@@ -80,7 +80,7 @@ function getContainerXml(args) {
             </lido-cell>
 
             <!-- top section -->
-            <lido-cell layout="landscape.row,portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
+            <lido-cell layout="landscape.row,portrait.wrap" id="top-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
                 ${topImageCells}
             </lido-cell>
 
@@ -94,13 +94,15 @@ function getContainerXml(args) {
                 </lido-text>
                 <lido-text id="equal" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
                 </lido-text>
-                <lido-text id="${answer}" tab-index="${tabCounter++}" type="drop" height="245px" width="175px" visible="true"  value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
-                </lido-text>
+                <lido-image id="${answer}" tab-index="${tabCounter++}" is-slice="true" height="225px" width="175px" value="${answer}" string="?" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" type="drop" onEntry="this.opacity='0';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
+                  <lido-text height="245px" width="175px" visible="true" value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';">
+                  </lido-text>
+                </lido-image>
             </lido-cell>
 
 
             <!-- option row-->
-            <lido-cell layout="landscape.row, portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='0';" gap="landscape.20px,portrait.5px">
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='0';" gap="landscape.20px,portrait.5px">
                 ${dragCells}
             </lido-cell>
 

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

@@ -30,7 +30,7 @@ function getContainerXml(args) {
     return `
   <main>
     <lido-container  visible="true"  id="lido-container"  onInCorrect="lido-avatar.avatarAnimate='Fail';"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000'; ${args.images.map((_, i) => `i${i + 1}.revealImageValue='true'; this.sleep='1000';`).join('')} this.sleep='2000';"
-    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
+    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Total.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
 <!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.402px,portrait.402px" width="landscape.302px,portrait.398px" x="landscape.84%, portrait.-4%" y="landscape.58%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">

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

@@ -42,7 +42,7 @@ function getContainerXml(args) {
     return `
         <main>
 
-            <lido-container id="lido-container" objective="" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" 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" show-next-button="true">
+            <lido-container id="lido-container" objective="" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20card.png"  height="1600px" width="900px" 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" show-next-button="true">
 
                 <!-- 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.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">

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

@@ -52,7 +52,7 @@ function getContainerXml(args) {
     return `
         <main>
 
-            <lido-container  id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.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">
+            <lido-container  id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20letter.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.-24px, portrait.465px" y="landscape.360px, portrait.1025px" aria-hidden="true" z="1" bg-Color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
@@ -79,7 +79,7 @@ function getContainerXml(args) {
             
 
 
-            <lido-container id="lido-container" objective="writeCard" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" 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">
+            <lido-container id="lido-container" objective="writeCard" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20letter.png"  height="1600px" width="900px" 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.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">

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

@@ -54,17 +54,17 @@ function getContainerXml(args) {
     const starCells = starList
         .map((index) => {
         return `
-        <lido-image id="star${index}" tab-index="${tabCounter++}" audio="" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
+        <lido-image id="star${index}" tab-index="${tabCounter++}" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
         </lido-image>
       `;
     })
         .join('');
     return `
         <main>
-            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.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';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20number.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';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
 
                 <!-- Chimple Avatar -->
-                <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1010px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1035px" ariaHidden="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" alt-text="{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.535px" alt-text="{shadowImage}">
@@ -84,13 +84,13 @@ function getContainerXml(args) {
                 </lido-cell>
 
                 <!-- trace cell -->
-                <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px"  height="landscape.477px, portrait.477px" bg-color="transparent"  onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.315px">
-                    <lido-trace id="image2" tab-index="3" value="a" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
+                <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px"  height="landscape.477px, portrait.477px" bg-color="transparent"  onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.275px">
+                    <lido-trace id="image2" tab-index="3" value="a" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/2.wav" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
                     </lido-trace>
                 </lido-cell>
 
 
-                <lido-cell layout="wrap" id="star-row" width="landscape.50%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.225px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fill, minmax(135px, auto))'; this.justify-content='center'; this.align-items='center';">
+                <lido-cell layout="wrap" id="star-row" width="landscape.85%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.95px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fit, minmax(125px, auto))'; this.justify-content='center'; this.align-items='center';">
                     ${starCells}
                 </lido-cell>
 

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

@@ -32,7 +32,7 @@ function getContainerXml(args) {
       `;
     }).join('');
     return `<main>
- <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true';  this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
+ <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true';  this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
 
     <!-- Audio -->
     <lido-text visible="false" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>

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

@@ -53,7 +53,7 @@ function getContainerXml(args) {
     console.log("SVG Source:", `${traceImage1}; ${traceImage2}; ${traceImage3}`);
     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/trace/Underwater.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">
+            <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';">
@@ -63,14 +63,15 @@ function getContainerXml(args) {
                         </lido-image>
                     </lido-cell>
 
-                    <!-- text-element -->
-                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.650px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="">
-                        <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
-                        </lido-text>                        
-                    </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}">

package/dist/collection/utils/customEvents.js

@@ -1,5 +1,6 @@
 import { ActivityChangeKey, ActivityEndKey, ElementClickKey, ElementDropKey, GameCompletedKey, GameExitKey, LessonEndKey, NextContainerKey, PrevContainerKey } from "./constants";
 function dispatchCustomEvent(eventName, detail) {
+    console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
     window.dispatchEvent(event);
 }

package/dist/collection/utils/utils.js

@@ -105,6 +105,7 @@ export const initEventsForElement = async (element, type) => {
 export const executeActions = async (actionsString, thisElement, element) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
+    body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -135,7 +136,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     const container = document.getElementById(LidoContainer);
                     const containerScale = getElementScale(container);
                     dragElement.style.transform = 'translate(0,0)';
-                    console.log("logg alinmatch");
+                    console.log('logg alinmatch');
                     const dropRect = dropElement.getBoundingClientRect();
                     const dragRect = dragElement.getBoundingClientRect();
                     const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -189,7 +190,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
                     }
-                    validateObjectiveStatus();
+                    await validateObjectiveStatus();
                     break;
                 }
                 case 'prevBtn': {
@@ -343,7 +344,9 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     break;
                 }
                 case 'updateCalculatorAnswer': {
-                    updateCalculatorAnswer();
+                    if (targetElement) {
+                        updateCalculatorAnswer(targetElement);
+                    }
                     break;
                 }
                 default: {
@@ -353,6 +356,7 @@ export const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
+    body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -571,6 +575,8 @@ export async function onActivityComplete(dragElement, dropElement) {
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
         const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        // storing each activity score based on isCorrect for (all drag-drop events)
+        storingEachActivityScore(isCorrect);
         if (isCorrect) {
             const onCorrect = dropElement.getAttribute('onCorrect');
             if (onCorrect) {
@@ -669,6 +675,7 @@ export const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
+const body = document.body;
 let res;
 export const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -733,6 +740,7 @@ export const validateObjectiveStatus = async () => {
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
+            triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -755,16 +763,16 @@ export const triggerPrevcontainer = () => {
 export function convertUrlToRelative(url) {
     const container = document.getElementById(LidoContainer);
     const baseUrl = container.getAttribute('baseUrl');
-    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
+    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
-    else if (baseUrl) {
-        const newUrl = !url.startsWith('/') ? url : url.substring(1);
-        return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
-    }
-    else {
-        return getAssetPath(url);
+    if (baseUrl) {
+        const newUrl = url.startsWith('/') ? url.slice(1) : url;
+        if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
+            return newUrl;
+        return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
     }
+    return getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -1237,9 +1245,6 @@ export const SumTogetherAnimation = async (element, value) => {
         return;
     if (!value)
         return;
-    const container = document.getElementById(LidoContainer);
-    if (!container)
-        return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
     const TopRow = Array.from(element.children)[1];
     const questionRow = Array.from(element.children)[2];
@@ -1383,15 +1388,13 @@ function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr)
     dragElement.style.width = "auto";
     dragElement.style.height = "auto";
 }
-export const updateCalculatorAnswer = () => {
+export const updateCalculatorAnswer = (el) => {
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
     const calci = document.querySelector('#lidoCalculator');
     if (!calci)
         return;
-    const answerText = container.querySelector('#answer');
     const value = calci.getAttribute('value');
-    console.log("😀😀😀😀😀😀😀", value);
-    answerText.setAttribute('string', value);
+    el.setAttribute('string', value);
 };

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

@@ -0,0 +1,58 @@
+import { NextContainerKey, SelectedValuesKey } from "../constants";
+import { calculateScore, executeActions } from "../utils";
+const tempVanishedValues = [];
+export function dragDropAnimation(container, dragElement, dropElement) {
+    container.style.pointerEvents = "none";
+    setTimeout(() => {
+        var _a, _b, _c;
+        const div = document.createElement('div');
+        container.append(div);
+        div.classList.add('after-drop-popup-container');
+        dragElement.style.scale = `1`;
+        dropElement.style.scale = `1`;
+        const allDragElements = container.querySelectorAll('[type="drag"]');
+        const dragParents = Array.from(allDragElements).map(el => el.parentElement);
+        const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
+        const selectedValues = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
+        const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+        if (vanishedValue) {
+            tempVanishedValues.push(vanishedValue);
+        }
+        // Remove from old parents
+        if (allSameParent) {
+            dragElement.remove();
+            dropElement.remove();
+        }
+        else {
+            dragElement.parentElement.parentElement.remove();
+            dropElement.parentElement.parentElement.remove();
+        }
+        // Add animation and popup classes
+        dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
+        dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
+        div.appendChild(dragElement);
+        div.appendChild(dropElement);
+        dropElement.classList.remove('empty');
+        setTimeout(() => {
+            dragElement.classList.remove('zoom-fade-in');
+            dropElement.classList.remove('zoom-fade-in');
+            dragElement.classList.add('zoom-fade-out');
+            dropElement.classList.add('zoom-fade-out');
+            setTimeout(() => {
+                div.remove();
+                container.style.pointerEvents = 'auto';
+                const objective = container.getAttribute('objective');
+                if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
+                    (async () => {
+                        // isCorrect=true;
+                        const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
+                        await executeActions(onCorrect, container);
+                        window.dispatchEvent(new CustomEvent(NextContainerKey));
+                        calculateScore();
+                        tempVanishedValues.length = 0;
+                    })();
+                }
+            }, 800); // match animation duration
+        }, 2000); // stay for 2 seconds
+    }, 250);
+}

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

@@ -88,7 +88,10 @@ export function addClickListenerForClickType(element) {
             dispatchClickEvent(element, isCorrect);
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
-                // element.style.pointerEvents = 'none';
+                if (!(element.id && element.id.startsWith('key-button'))) {
+                    element.style.pointerEvents = 'none';
+                }
+                document.body.style.pointerEvents = 'none';
                 await executeActions(onCorrect, element);
             }
             else {
@@ -145,6 +148,7 @@ export function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
+            AudioPlayer.getI().stop();
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
                 await executeActions(onCorrect, element);