lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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

@@ -24,52 +24,52 @@ export const palEgraArrangePictures = {
 };
 function getContainerXml(args) {
     const drop_cells = args.images.map((img, index) => {
-        return `
-    <lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="20px">
-		<lido-text visible="true" id="label${index + 1}" tab-index="" value="" string="${img.id}" font-family="'Baloo Bhai 2'" width="72px" height="72px" font-color="#030028" font-size="landscape.60px, portrait.100px"  bg-color="#FFF5BB" onEntry="this.fontWeight='600'; this.border-radius='100%';">
-		</lido-text>
-		<lido-text visible="true" id="drop${index + 1}" tab-index="${11 + index}" value="${img.id}" string="" font-family="'Baloo Bhai 2'" width="222px" height="222px" font-color="#030028" bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; ">
-		</lido-text>
-	</lido-cell>
+        return `
+    <lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="20px">
+		<lido-text visible="true" id="label${index + 1}" tab-index="" value="" string="${img.id}" font-family="'Baloo Bhai 2'" width="72px" height="72px" font-color="#030028" font-size="landscape.60px, portrait.100px"  bg-color="#FFF5BB" onEntry="this.fontWeight='600'; this.border-radius='100%';">
+		</lido-text>
+		<lido-text visible="true" id="drop${index + 1}" tab-index="${11 + index}" value="${img.id}" string="" font-family="'Baloo Bhai 2'" width="222px" height="222px" font-color="#030028" bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; ">
+		</lido-text>
+	</lido-cell>
   `;
     }).join('');
     const shuffledOptions = [...args.images].sort(() => Math.random() - 0.5);
     const drag_cells = shuffledOptions.map((img, index) => {
-        return `
-      <lido-image  visible="true" id="drag${index + 1}" value="${img.id}" bg-color="transparent" width="240px" height="240px" src="${img.src}" type="drag"></lido-image>
+        return `
+      <lido-image  visible="true" id="drag${index + 1}" value="${img.id}" bg-color="transparent" width="240px" height="240px" src="${img.src}" type="drag"></lido-image>
   `;
     }).join('');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-<lido-container disable-speak="true" visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop"  is-allow-only-one-drop = "true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.images.map(img => img.id).join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}">
-	 <!-- Chimple Avatar -->
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.290px,portrait.378px" width="landscape.262px,portrait.382px"
-       x="landscape.87%, portrait.30%" y="landscape.40%, portrait.78%" 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}">
-        </lido-avatar>
-		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.248px, portrait.535px" altText="{shadowImage}"></lido-image>
-      </lido-cell>
-
-        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.95%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.102px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center';">
-            <!-- question cell -->				
-            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.104%, portrait.80%" height="auto" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700';" font-size="44px" font-color="#07004E" font-family="'Baloo Bhai 2'" padding="7px 0px 0px 0px">
-      		</lido-text>
-          
-
-          <!--drop cells -->
-	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 100px 0px 0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.85%,portrait.100%" bg-color="transparent">		
-            ${drop_cells}
-			</lido-cell>
-
-
-			<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 50px 0px 0px,portrait.0" onEntry=" this.justify-content='space-evenly';" height="landscape.auto,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
-                ${drag_cells}
-			</lido-cell>        
-             
-        </lido-cell>                  
-
-</lido-container>
-</main>
+    return `
+<main>
+<lido-container disable-speak="true" visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop"  is-allow-only-one-drop = "true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.images.map(img => img.id).join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.290px,portrait.378px" width="landscape.262px,portrait.382px"
+       x="landscape.87%, portrait.30%" y="landscape.40%, portrait.78%" 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}">
+        </lido-avatar>
+		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.248px, portrait.535px" altText="{shadowImage}"></lido-image>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.95%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.102px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center';">
+            <!-- question cell -->				
+            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.104%, portrait.80%" height="auto" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700';" font-size="44px" font-color="#07004E" font-family="'Baloo Bhai 2'" padding="7px 0px 0px 0px">
+      		</lido-text>
+          
+
+          <!--drop cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 100px 0px 0px,portrait.0" onEntry="" height="landscape.auto,portrait.35%" width="landscape.85%,portrait.100%" bg-color="transparent">		
+            ${drop_cells}
+			</lido-cell>
+
+
+			<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 50px 0px 0px,portrait.0" onEntry=" this.justify-content='space-evenly';" height="landscape.auto,portrait.35%" width="landscape.100%,portrait.100%" bg-color="transparent">
+                ${drag_cells}
+			</lido-cell>        
+             
+        </lido-cell>                  
+
+</lido-container>
+</main>
 `;
 }

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

@@ -22,60 +22,60 @@ function getContainerXml(args) {
     const word = args.question_word[0]; // "dance"
     const letters = [...word]; // ["d", "a", "n", "c", "e"]
     const drop_cells = letters.map((q, index) => {
-        return `
-    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" is-allow-only-one-drop="true" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
-	</lido-text>
+        return `
+    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" value="${q}" string="?" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" is-allow-only-one-drop="true" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
+	</lido-text>
   `;
     }).join('');
     const shuffledOptions = [...letters].sort(() => Math.random() - 0.5);
     const drag_cells = shuffledOptions.map((q, index) => {
-        return `
-    <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#FFFFFF" font-size="landscape.140px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='center';">
-	</lido-text>
+        return `
+    <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" width="173px" height="189px" font-color="#FFFFFF" font-size="landscape.140px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='center';">
+	</lido-text>
   `;
     }).join('');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-<lido-container disable-speak="true"  visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${letters}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}"
-custom-style = "#audioCell:active {
-  box-shadow: 0px 0px 0px !important;
-  transform: translateY(7px);
-}" >
-	   <!-- Chimple Avatar -->
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
-       x="landscape.79%, portrait.30%" y="landscape.61%, portrait.78%" 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}">
-        </lido-avatar>
-		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.280px, portrait.535px" altText="{shadowImage}"></lido-image>
-      </lido-cell>
-
-        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.82%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.94px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='73px';">
-            <!-- question cell -->				
-            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.93%, portrait.80%" height="60px" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700'; this.padding='50px';" font-size="60px" font-color="#07004E" font-family="'Baloo Bhai 2'">
-      		</lido-text>
-          
-
-          <!-- options cells -->
-	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-18px 91px 31px -100px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.80%,portrait.100%" bg-color="transparent">
-				    <lido-text visible="false" id="inventedAudio" string="${word}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
-          <lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
-            <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
-          </lido-cell>
-				
-              <!-- drop cells -->
-              <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px'; this.justifyContent='space-around'" height="landscape.239px,portrait.35%" width="landscape.80%,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px">
-                ${drop_cells}
-              </lido-cell>
-            </lido-cell>
-
-
-            <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-46px 0px 0px 0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="23px">
-                      ${drag_cells}
-            </lido-cell>        
-             
-        </lido-cell>
-</lido-container>
-</main>
+    return `
+<main>
+<lido-container disable-speak="true"  visible="true" id="lido-container" onEntry="lido-question.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" template-id="dragAndDrop" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${letters}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}"
+custom-style = "#audioCell:active {
+  box-shadow: 0px 0px 0px !important;
+  transform: translateY(7px);
+}" >
+	   <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.330px,portrait.378px" width="landscape.300px,portrait.382px"
+       x="landscape.79%, portrait.30%" y="landscape.61%, portrait.78%" 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}">
+        </lido-avatar>
+		<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="20px" x="landscape.-1px, portrait.-7px" y="landscape.280px, portrait.535px" altText="{shadowImage}"></lido-image>
+      </lido-cell>
+
+        <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.82%,portrait.150px" width="landscape.98%, portrait.80%" bg-Color="transparent" margin="landscape.94px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='73px';">
+            <!-- question cell -->				
+            <lido-text tab-index="111" visible="true" id="lido-question" width="landscape.93%, portrait.80%" height="60px" bg-color="#FFF5BB" string="${args.question_text}" border-radius="16px" onEntry="this.border='2px solid #FFB612'; this.fontWeight='700'; this.padding='50px';" font-size="60px" font-color="#07004E" font-family="'Baloo Bhai 2'">
+      		</lido-text>
+          
+
+          <!-- options cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-18px 91px 31px -100px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.auto,portrait.35%" width="landscape.80%,portrait.100%" bg-color="transparent">
+				    <lido-text visible="false" id="inventedAudio" string="${word}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
+          <lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
+            <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
+          </lido-cell>
+				
+              <!-- drop cells -->
+              <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px'; this.justifyContent='space-around'" height="landscape.239px,portrait.35%" width="landscape.80%,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px">
+                ${drop_cells}
+              </lido-cell>
+            </lido-cell>
+
+
+            <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.-46px 0px 0px 0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" gap="23px">
+                      ${drag_cells}
+            </lido-cell>        
+             
+        </lido-cell>
+</lido-container>
+</main>
 `;
 }

package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js

@@ -21,60 +21,60 @@ export const palEgraWordFormation = {
 function getContainerXml(args) {
     const calculatedWidth = (168 * args.options.length) + (23 * args.options.length);
     const drop_cells = args.options.map((q, index) => {
-        return `
-    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" disable-speak="true" value="${q}" string="?" font-family="'Baloo Bhai 2'" width="160px" height="175px" is-allow-only-one-drop="true" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
-	</lido-text>
+        return `
+    <lido-text visible="true" id="drop${index + 1}" tab-index="${12 + index}" disable-speak="true" value="${q}" string="?" font-family="'Baloo Bhai 2'" width="160px" height="175px" is-allow-only-one-drop="true" font-color="#030028" font-size="landscape.140px, portrait.100px"  bg-color="#FFFFFF"  type="drop" onEntry="this.fontWeight='700'; this.border-radius='16px';">
+	</lido-text>
   `;
     }).join('');
     const shuffledOptions = [...args.options].sort(() => Math.random() - 0.5);
     const drag_cells = shuffledOptions.map((q, index) => {
-        return `
-      <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" width="160px" height="175px" font-color="#030028" font-size="landscape.120px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='baseline';">
-	  </lido-text>
+        return `
+      <lido-text visible="true" id="drag${index + 1}" tab-index="${16 + index}" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" width="160px" height="175px" font-color="#030028" font-size="landscape.120px, portrait.100px"  bg-color="#A05730"  type="drag" onEntry="this.fontWeight='700'; this.border-radius='16px'; this.justifyContent='center'; this.alignItems='baseline';">
+	  </lido-text>
   `;
     }).join('');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-<lido-container disable-speak="true"  visible="true" id="lido-container" template-id="dragAndDrop" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.options.join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}"
-custom-style = "#audioCell:active {
-  box-shadow: 0px 0px 0px !important;
-  transform: translateY(7px);
-}" >
-	  <!-- Chimple Avatar -->
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.378px" width="landscape.280px,portrait.382px"
-       x="landscape.68%, portrait.30%" y="landscape.3%, portrait.78%" 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}">
-        </lido-avatar>
-      </lido-cell>
-
-        <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.46px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='space-between'; this.alignItems='center'; this.gap='73px';">
-            <!-- image cell -->
-          <lido-cell layout="landscape.row, portrait.col" tab-index="11" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border='11px solid #FFFFFF'; this.justify-content='center'; this.align-items='center';" height="landscape.590px,portrait.42%" width="landscape.590px,portrait.100%" bg-color="#FFF5BB">				
-            <lido-image type="text" margin="landscape.0px,portrait.0px 0px 0px 0px" id="" visible="true" src="${args.image}" width="100%" height="100%" onTouch="this.speak='true'">
-			      </lido-image>  
-          </lido-cell>
-
-          
-	      	<lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.138px 51px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.80%,portrait.35%" width="landscape.51%,portrait.100%" bg-color="transparent">
-            <lido-text visible="false" id="inventedAudio" string="${args.options.join('')}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
-            <lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'" margin="-113px 289px 0px 0px">
-              <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
-            </lido-cell>
-                <!-- drop cells -->
-                <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.${calculatedWidth}px,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px">
-                  ${drop_cells}
-                </lido-cell>
-
-                  <!-- drag cells -->
-                <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" padding="0px 13px 0px 17px" gap="23px">
-                  ${drag_cells}
-                </lido-cell>          
-            </lido-cell>
-        </lido-cell>
-                  
-
-</lido-container>
-</main>
+    return `
+<main>
+<lido-container disable-speak="true"  visible="true" id="lido-container" template-id="dragAndDrop" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemp6_bg.png" objective="${args.options.join(',')}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}"
+custom-style = "#audioCell:active {
+  box-shadow: 0px 0px 0px !important;
+  transform: translateY(7px);
+}" >
+	  <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.378px" width="landscape.280px,portrait.382px"
+       x="landscape.68%, portrait.30%" y="landscape.3%, portrait.78%" 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}">
+        </lido-avatar>
+      </lido-cell>
+
+        <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.100%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.46px 0px 0px 0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='space-between'; this.alignItems='center'; this.gap='73px';">
+            <!-- image cell -->
+          <lido-cell layout="landscape.row, portrait.col" tab-index="11" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border='11px solid #FFFFFF'; this.justify-content='center'; this.align-items='center';" height="landscape.590px,portrait.42%" width="landscape.590px,portrait.100%" bg-color="#FFF5BB">				
+            <lido-image type="text" margin="landscape.0px,portrait.0px 0px 0px 0px" id="" visible="true" src="${args.image}" width="100%" height="100%" onTouch="this.speak='true'">
+			      </lido-image>  
+          </lido-cell>
+
+          
+	      	<lido-cell layout="landscape.col, portrait.col" visible="true" margin="landscape.138px 51px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.80%,portrait.35%" width="landscape.51%,portrait.100%" bg-color="transparent">
+            <lido-text visible="false" id="inventedAudio" string="${args.options.join('')}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
+            <lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'" margin="-113px 289px 0px 0px">
+              <lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
+            </lido-cell>
+                <!-- drop cells -->
+                <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.${calculatedWidth}px,portrait.100%" bg-color="#FFFFFF99" padding="0px 13px 0px 17px">
+                  ${drop_cells}
+                </lido-cell>
+
+                  <!-- drag cells -->
+                <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px,portrait.0" onEntry="this.border-radius='16px';" height="landscape.239px,portrait.35%" width="landscape.auto,portrait.100%" bg-color="transparent" padding="0px 13px 0px 17px" gap="23px">
+                  ${drag_cells}
+                </lido-cell>          
+            </lido-cell>
+        </lido-cell>
+                  
+
+</lido-container>
+</main>
 `;
 }

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

@@ -15,23 +15,23 @@ export const AmazingStories = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-    <lido-container disable-speak="true" highlight-word-by-word="${args.highlightWord}"  show-prev-button="false" show-next-button="true" id="lido-container" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-		<lido-cell layout="row" id="cell1" visible="true" margin="99px 164px 0px 0px"  value="cell1" width="landscape.87%,portrait.86%" height="landscape.76%,portrait.80%" x="50px" y="50px" bg-color="transparent"  onEntry="" >
-				
-			<lido-text id="text1" tab-index="1" audio="${args.audioURL}"  value="text1" visible="true" width="landscape.100%,portrait.90%" height="100%" bg-color="#FFF5BB" font-family="Baloo Bhai 2" font-size="60px" font-color="#000" string='${args.content}' onEntry="this.border='2px solid #FFB612'; this.fontWeight='600';this.padding='20px 28px'; this.boxShadow='unset'; this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
-			</lido-text>
-		</lido-cell>
-			
-		<!-- below is the code for avatar -->
-
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.373px,portrait.401px" width="landscape.344px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.59%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.73px,portrait.111px" y="landscape.302px,portrait.344px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	</lido-container> 
-
+    return `<main>
+    <lido-container disable-speak="true" highlight-word-by-word="${args.highlightWord}"  show-prev-button="false" show-next-button="true" id="lido-container" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+		<lido-cell layout="row" id="cell1" visible="true" margin="99px 164px 0px 0px"  value="cell1" width="landscape.87%,portrait.86%" height="landscape.76%,portrait.80%" x="50px" y="50px" bg-color="transparent"  onEntry="" >
+				
+			<lido-text id="text1" tab-index="1" audio="${args.audioURL}"  value="text1" visible="true" width="landscape.100%,portrait.90%" height="100%" bg-color="#FFF5BB" font-family="Baloo Bhai 2" font-size="60px" font-color="#000" string='${args.content}' onEntry="this.border='2px solid #FFB612'; this.fontWeight='600';this.padding='20px 28px'; this.boxShadow='unset'; this.border-radius='16px'; this.textAlign='start'; this.speak='true';">
+			</lido-text>
+		</lido-cell>
+			
+		<!-- below is the code for avatar -->
+
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.373px,portrait.401px" width="landscape.344px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.59%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.73px,portrait.111px" y="landscape.302px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	</lido-container> 
+
 	</main>`;
 }

package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js

@@ -26,57 +26,57 @@ function getContainerXml(args) {
     const { text1, options = [], answers = [], isAllowOnlyCorrect } = args;
     const trolleyCells = answers
         .map((answer) => {
-        return `
-		<!-- drop and trolley -->
-		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
-			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="${isAllowOnlyCorrect}" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
-			</lido-text>
-			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
-			</lido-image>
-		</lido-cell>
+        return `
+		<!-- drop and trolley -->
+		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
+			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="${isAllowOnlyCorrect}" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
+			</lido-text>
+			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
+			</lido-image>
+		</lido-cell>
       `;
     })
         .join('');
     const optionCells = options
         .map((option) => {
-        return `
-		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="this.speak='true';"  >
-		</lido-text>
+        return `
+		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="this.speak='true';"  >
+		</lido-text>
       `;
     })
         .join('');
-    return `
-    <main>
-	<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Phonic%20tractor.png"  bg-color="transparent" objective="${answers.join(',')}" height="100%" width="100%" visible="true" show-check="false" is-continue-on-correct="true" after-drop="false" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1000';  b1.animation='placeToLeft 2s linear'; this.sleep='2000';"  onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="${isAllowOnlyCorrect}"> 
-
-	    <!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.576px" y="landscape.591px, portrait.236px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
-			<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-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="186px" height="20px" x="landscape.7px, portrait.77px" y="landscape.305px, portrait.365px" alt-text="{shadowImage}">
-			</lido-image>
-		</lido-cell>
-		<!-- parent cell -->
-		<lido-cell layout="col" visible="true" width="100%" height="100%"  bg-color="transparent" margin="landscape.-38px 0px -122px 0px, portrait.0px 0px 0px 0px">
-			<!-- question -->
-			<lido-image visible="true" onTouch="this.speak='true';" id="img1" height="140px" width="361px"  disable-edit="true" is-slice="true" bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/board.png" margin="landscape.42px 0px -126px 0px, portrait.-58px 0px 60px 0px"  >
-				<lido-text id="heading"  tab-index="1" height="100px"  visible="true" string="${text1}" font-family="'Baloo Bhai 2'" font-color="white" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';"   margin="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 0px" >
-				</lido-text>
-			</lido-image>
-			<!-- tractor -->
-			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
-				<!-- tractor head -->
-				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
-				</lido-image>
-				${trolleyCells}
-			</lido-cell>
-			<!-- options -->
-			<lido-cell layout="landscape.row,portrait.wrap" width="80%" height="landscpe.275px, portrait.150px" visible="true" delay-visible="3000" bg-color="transparent" onEntry="this.gap=35px; this.justify-content='center';" >
-				${optionCells}				
-			</lido-cell>	
-		</lido-cell>	
-
-    </lido-container>
-    </main>
+    return `
+    <main>
+	<lido-container id="lido-container" appendToDropOnCompletion="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Phonic%20tractor.png"  bg-color="transparent" objective="${answers.join(',')}" height="100%" width="100%" visible="true" show-check="false" is-continue-on-correct="true" after-drop="false" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1000';  b1.animation='placeToLeft 2s linear'; this.sleep='2000';"  onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-allow-only-correct="${isAllowOnlyCorrect}"> 
+
+	    <!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.576px" y="landscape.591px, portrait.236px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+			<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-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="186px" height="20px" x="landscape.7px, portrait.77px" y="landscape.305px, portrait.365px" alt-text="{shadowImage}">
+			</lido-image>
+		</lido-cell>
+		<!-- parent cell -->
+		<lido-cell layout="col" visible="true" width="100%" height="100%"  bg-color="transparent" margin="landscape.-38px 0px -122px 0px, portrait.0px 0px 0px 0px">
+			<!-- question -->
+			<lido-image visible="true" onTouch="this.speak='true';" id="img1" height="140px" width="361px"  disable-edit="true" is-slice="true" bg-color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/board.png" margin="landscape.42px 0px -126px 0px, portrait.-58px 0px 60px 0px"  >
+				<lido-text id="heading"  tab-index="1" height="100px"  visible="true" string="${text1}" font-family="'Baloo Bhai 2'" font-color="white" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';"   margin="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 0px" >
+				</lido-text>
+			</lido-image>
+			<!-- tractor -->
+			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
+				<!-- tractor head -->
+				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
+				</lido-image>
+				${trolleyCells}
+			</lido-cell>
+			<!-- options -->
+			<lido-cell layout="landscape.row,portrait.wrap" width="80%" height="landscpe.275px, portrait.150px" visible="true" delay-visible="3000" bg-color="transparent" onEntry="this.gap=35px; this.justify-content='center';" >
+				${optionCells}				
+			</lido-cell>	
+		</lido-cell>	
+
+    </lido-container>
+    </main>
   `;
 }