lido-player 0.0.2-alpha-61 → 0.0.2-alpha-62

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-9cf49b55.js');
+const utils = require('./utils-b13cba29.js');
 require('./index-baff5c15.js');
 
 

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-baff5c15.js');
-const utils = require('./utils-9cf49b55.js');
+const utils = require('./utils-b13cba29.js');
 
 var rive = {exports: {}};
 
@@ -9888,10 +9888,10 @@ const port = {
 };
 
 const instruction = {
-	dragAndDrop: "वस्तू योग्य ठिकाणी ओढून आणि सोडून जुळवा",
-	mcq: "दिलेल्या पर्यायांमधून योग्य उत्तर निवडा",
-	tracing: "रेषेचा काळजीपूर्वक मागोवा घेत आकृती काढा",
-	flashcards: "तुमचे शिक्षण मजबूत करण्यासाठी फ्लॅशकार्ड्स पाहा"
+	dragAndDrop: "वस्तू योग्य ठिकाणी ओढून आणि सोडून जुळवा.",
+	mcq: "दिलेल्या पर्यायांमधून योग्य उत्तर निवडा.",
+	tracing: "रेषेचा काळजीपूर्वक मागोवा घेत आकृती काढा.",
+	flashcards: "तुमचे शिक्षण मजबूत करण्यासाठी फ्लॅशकार्ड्स पाहा."
 };
 const ma = {
 	instruction: instruction

package/dist/cjs/{utils-9cf49b55.js → utils-b13cba29.js}

@@ -1309,7 +1309,7 @@ class AudioPlayer {
             try {
                 setDraggingDisabled(true);
                 highlightSpeakingElement(targetElement);
-                window.addEventListener('click', this.handleUserClick, true);
+                // window.addEventListener('click', this.handleUserClick, true);
                 await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
@@ -3242,9 +3242,9 @@ function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disable-speak') === 'true') {
-        return;
-    }
+    // if (container && container.getAttribute('disable-speak') === 'true') {
+    //   return;
+    // }
     // if (element.closest('[disableSpeak="true"]')) {
     //   return;
     // }
@@ -3253,13 +3253,16 @@ function onTouchListenerForOnTouch(element) {
     let onholdTriggered = false;
     const onholdTime = 1000;
     const playAudio = async () => {
+        if (container && container.getAttribute('disable-speak') === 'true') {
+            return;
+        }
         onholdTriggered = true;
         setDraggingDisabled(true);
         await AudioPlayer.getI().play(element);
         setDraggingDisabled(false);
     };
     const onPointerDown = (event) => {
-        // event.stopPropagation();
+        event.stopPropagation();
         onholdTriggered = false;
         onholdTimer = setTimeout(() => {
             playAudio();
@@ -3267,18 +3270,13 @@ function onTouchListenerForOnTouch(element) {
     };
     const onPointerUp = async (event) => {
         clearTimeout(onholdTimer);
-        // If long-press happened → do nothing else
-        if (onholdTriggered) {
-            setDraggingDisabled(false);
-            return;
-        }
-        // If an onTouch action is defined, execute it on tap.
-        if (onTouch) {
+        if (!onholdTriggered && onTouch) {
             await executeActions(onTouch, element);
         }
-        const type = element.getAttribute('type') || '';
-        if (['category', 'option', 'click'].includes(type)) {
-            element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        else if (!onTouch) {
+            if (['category', 'option'].includes(element.getAttribute('type') || '')) {
+                element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+            }
         }
         setDraggingDisabled(false);
     };
@@ -3298,6 +3296,7 @@ function addClickListenerForClickType(element) {
     }
     const onClick = async () => {
         var _a;
+        const container = document.getElementById(LidoContainer);
         const lido_buttons = element.getAttribute('id');
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
@@ -3307,7 +3306,6 @@ function addClickListenerForClickType(element) {
         if (hasValidAudio) {
             AudioPlayer.getI().stop();
         }
-        const container = document.getElementById(LidoContainer);
         const objective = container['objective'].split(',');
         const checkButton = document.querySelector('#lido-checkButton');
         const showCheck = container.getAttribute('show-check') === 'true';
@@ -3326,10 +3324,11 @@ function addClickListenerForClickType(element) {
             dispatchClickEvent(element, isCorrect);
             if (isCorrect || container.getAttribute('is-continue-on-correct') === 'false') {
                 const onCorrect = element.getAttribute('onCorrect');
-                if (!(element.id && element.id.startsWith('key-button'))) {
-                    element.style.pointerEvents = 'none';
-                }
-                document.body.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 {
@@ -3338,12 +3337,14 @@ function addClickListenerForClickType(element) {
                 // showWrongAnswerAnimation([element]);
             }
             // const calciEl=document.querySelector('#lidoCalculator') as any; 
-            const isInsideCalculator = element.closest('#lidoCalculator') !== null;
-            if (!isInsideCalculator) {
-                storingEachActivityScore(isCorrect);
-            }
+            // const isInsideCalculator = element.closest('#lidoCalculator') !== null;
+            // if(!isInsideCalculator){ 
+            // storingEachActivityScore(isCorrect);
+            // }
             highlightElement();
-            handleShowCheck();
+            if (!container.getAttribute("click-completed")) {
+                handleShowCheck();
+            }
             return;
         }
         if (showCheck) {
@@ -68953,7 +68954,7 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
-    body.style.pointerEvents = 'auto';
+    // body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -69241,6 +69242,7 @@ const storeActivityScore = (score) => {
 const handleShowCheck = () => {
     var _a, _b;
     const container = document.getElementById(LidoContainer);
+    container.setAttribute("click-completed", "true");
     const objectiveString = container['objective'];
     const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
     const checkButton = document.querySelector('#lido-checkButton');
@@ -69268,7 +69270,6 @@ const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
-const body = document.body;
 let res;
 const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -69334,6 +69335,7 @@ const validateObjectiveStatus = async () => {
         const onCorrect = container.getAttribute('onCorrect');
         if (!isContinueOnCorrect) {
             await calculateScore();
+            storingEachActivityScore(false);
             await executeActions(onCorrect, container);
             triggerNextContainer();
         }
@@ -69341,6 +69343,7 @@ const validateObjectiveStatus = async () => {
             const onInCorrect = container.getAttribute('onInCorrect');
             storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
+            container.removeAttribute("click-completed");
         }
     }
 };

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

@@ -33,7 +33,7 @@ function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
     return `<main>
-  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';" is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+  <lido-container disable-speak="true" id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';" is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.345px,portrait.401px" width="landscape.308px,portrait.401px" x="landscape.24%, portrait.24%" y="landscape.60%, 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>

package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js

@@ -34,7 +34,7 @@ export const numberIdentificationimageTotext = {
 function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
- <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+ <lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq" 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_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
 	 <!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.64%, 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/numberIdentification/numberIdentificationtextTotext.stories.js

@@ -30,7 +30,7 @@ export const numberIdentificationtextTotext = {
 function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
- <lido-container  visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/pal_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
+ <lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" 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_number_identification/bgImage.png" objective="${args.answer}"  is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="question.speak='true';text1.speak='true';text2.speak='true';text3.speak='true';text4.speak='true';">
 	 <!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.83%, portrait.28%" y="landscape.64%, 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/palEgmaCalculateSum/palEgmaMultiOption.stories.js

@@ -45,13 +45,14 @@ function getContainerXml(args) {
         .join('\n');
     const clickCells = options
         .map((digit, i) => `
-      <lido-text id="click-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="" onInCorrect="" >
+      <lido-text id="click-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='24px'; this.flex-shrink='0';" border-image="" onCorrect="" onInCorrect="" >
       </lido-text>
     `)
         .join('\n');
     return `
     <main>
-        <lido-container id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+    
+        <lido-container disable-speak="true" id="lido-container" objective="${objective}" tab-index="1" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="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.1310px, portrait.450px" y="landscape.418px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js

@@ -43,14 +43,15 @@ function getContainerXml(args) {
         .join('\n');
     const dragCells = options
         .map((digit, i) => `
-      <lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+      <lido-text id="drag-${digit}" disable-speak="true" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; this.flex-shrink='0';" 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="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.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'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+        <lido-container id="lido-container" disable-speak="true" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="${isAllowOnlyCorrect}"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.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'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="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.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
                 <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">

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

@@ -64,7 +64,7 @@ function getContainerXml(args) {
     }).join('');
     return `
 <main>
-<lido-container  visible="true" id="lido-container" template-id="mcq" 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-EGMA/Frame%2051.svg" objective="${(args.questions.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
+<lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq" 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-EGMA/Frame%2051.svg" objective="${(args.questions.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
         box-shadow: none !important;
         }" onEntry="questionText.speak='true'; pattern1.speak='true'; pattern2.speak='true'; pattern3.speak='true'; pattern4.speak='true'; pattern5.speak='true'">
 	 <!-- Chimple Avatar -->

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

@@ -30,7 +30,7 @@ function getContainerXml(args) {
     const objectiveArray = args.answer.split('');
     const dropCells = objectiveArray
         .map((cell, i) => `
-       <lido-text id="drop${i}" disable-edit="true" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px dashed #f34d08'" border-image="">
+       <lido-text id="drop${i}" disable-edit="true" tab-index="${10 + i}" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px dashed #f34d08'" border-image="">
       </lido-text>
       `)
         .join('\n');
@@ -38,7 +38,7 @@ function getContainerXml(args) {
     return `
 <main>
 
-  <lido-container id="lido-container" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
+  <lido-container id="lido-container" disable-speak="true" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
         box-shadow: none !important;
         }">
 

package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js

@@ -29,7 +29,7 @@ export const Default = {
 };
 function getContainerXml(args) {
     return `<main>
-        <lido-container objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';" custom-style = "#audioCell:active {
+        <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';" custom-style = "#audioCell:active {
   box-shadow: 0px 0px 0px !important;
   transform: translateY(7px);
 }" >

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

@@ -45,7 +45,7 @@ export const PalEgraMCQWithImage = {
 };
 function getContainerXml(args) {
     return `<main>
-		<lido-container id="lido-container" tab-index="1" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+		<lido-container disable-speak="true" id="lido-container" tab-index="1" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
 
 		<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1228px, portrait.273px" y="landscape.125px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
@@ -66,7 +66,7 @@ function getContainerXml(args) {
 			<!-- Options -->
 			<lido-cell layout="flex" visible="true" width="100%" height="90%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';" margin="landscape.-60px 0px -210px 0px, portrait.0px 0px 0px 0px">
 				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.85%, portrait.73%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.0px, portrait.55px" onEntry="">
-					<lido-cell tab-index="4" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="" onInCorrect="" audio='${args.audio1}' onTouch="this.speak='true';">
+					<lido-cell tab-index="4" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"   value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="" onInCorrect="" audio='${args.audio1}' onTouch="this.speak='true';">
 						<lido-image visible="true" src="${args.optionImg1}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
 					</lido-cell>
 					<lido-cell tab-index="5" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="" onInCorrect="" audio='${args.audio2}' onTouch="this.speak='true';">
@@ -80,8 +80,7 @@ function getContainerXml(args) {
 					</lido-cell>
 				</lido-cell>
 			</lido-cell>
-			
-			<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
+						<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
 				
 			</lido-cell>
 

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

@@ -36,7 +36,7 @@ export const PalEgraOptionWithAudio = {
 function getContainerXml(args) {
     const objective = `${args.option1.trim()},${args.option2.trim()},${args.option3.trim()},${args.option4.trim()}`;
     return `<main>
-		<lido-container id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+		<lido-container disable-speak="true" id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
 
 		<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.625px, portrait.273px" y="landscape.40px, portrait.1200px" aria-hidden="true" z="0" bg-color="transparent" type="" visible="true" audio="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
@@ -49,25 +49,24 @@ function getContainerXml(args) {
     <lido-text tab-index="2" id="invisibleText" value="play the audio first then drag the correct option into correct drop place" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="play the audio first then drag the correct option into correct drop place" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" >
     </lido-text>
 
-
 		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
 
       <!-- Question -->
 			<lido-cell layout="row" visible="true" width="100%" height="landscape.150px, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.125px 0px 60px 0px, portrait.0px 0px 0px 0px" gap="190px">
         <lido-image id="icon1" type="click" is-slice="true" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text1.speak='true';">
-          <lido-text id="text1" tab-index="3" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          <lido-text id="text1" disable-speak="true" tab-index="3" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
           </lido-text>
 			  </lido-image>
         <lido-image id="icon2" type="click" is-slice="true" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text2.speak='true';">
-          <lido-text id="text2" tab-index="4" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          <lido-text id="text2" tab-index="4" disable-speak="true" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
           </lido-text>
 			  </lido-image>
         <lido-image id="icon3" type="click" is-slice="true" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text3.speak='true';">
-          <lido-text id="text3" tab-index="5" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          <lido-text id="text3" disable-speak="true" tab-index="5" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
           </lido-text>
 			  </lido-image>
         <lido-image id="icon4" type="click" is-slice="true" disable-edit="true" value="image4" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text4.speak='true';">
-          <lido-text id="text4" tab-index="6" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          <lido-text disable-speak="true" id="text4" tab-index="6" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
           </lido-text>
 			  </lido-image>
 			</lido-cell>

package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js

@@ -25,7 +25,7 @@ export const Default = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
+    <lido-container disable-speak="true" id="lido-container" is-continue-on-correct="true" template-id="dragAndDrop" is-allow-only-correct="true" objective="${args.value1},${args.value2},${args.value3},${args.value4}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palStory/bgImage.png">
 
 	<!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.68%, portrait.28%" y="landscape.600px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">

package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js

@@ -31,7 +31,7 @@ export const Default = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';" custom-style = "#audioCell:active {
+    <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns)}" template-id="mcq" is-continue-on-correct="${args.PracticeMode}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="questionText.speak='true';" custom-style = "#audioCell:active {
   box-shadow: 0px 0px 0px !important;
   transform: translateY(10px);
 } ">

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

@@ -43,7 +43,7 @@ export const palEgraWordMatch = {
 function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
-        <lido-container   visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="inst.speak='true';">
+        <lido-container disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="inst.speak='true';">
 
             <!-- Chimple Avatar -->
             <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.395px,portrait.402px" width="landscape.330px,portrait.398px" x="landscape.640px, portrait.28%" y="landscape.350px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
@@ -52,6 +52,7 @@ function getContainerXml(args) {
                 <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="186px" height="40px" x="65px" y="310px" alt-text="{shadowImgae}">
 			    </lido-image>
             </lido-cell>
+            
 
             <lido-text visible="false" id="inst" tab-index="1" string="drag and drop the correct option to match the word given">
             </lido-text>

package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js

@@ -21,8 +21,8 @@ export const palEgra_OddOneOut = {
 function getContainerXml(args) {
     const option_cells = args.options.map((q, index) => {
         return `
-      <lido-cell layout="row" id="text${1 + index}" tab-index="${12 + index}" template-id="mcq" visible="true" margin="" onEntry="this.border-radius='14px'; this.justify-content='center'; this.alignItems='center';" height="landscape.280px,portrait.244px" width="landscape.328px,portrait.244px" bg-color="orange"  type="click" value="${q.startsWith('@') ? q.slice(1) : q}">
-        <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" string="${q.startsWith('@') ? q.slice(1) : q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.79px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='700';">
+      <lido-cell layout="row" id="text${1 + index}"  template-id="mcq" visible="true" margin="" onEntry="this.border-radius='14px'; this.justify-content='center'; this.alignItems='center';" height="landscape.280px,portrait.244px" width="landscape.328px,portrait.244px" bg-color="orange"  type="click" value="${q.startsWith('@') ? q.slice(1) : q}">
+        <lido-text visible="true" value="${q.startsWith('@') ? q.slice(1) : q}" tab-index="${13 + index}" string="${q.startsWith('@') ? q.slice(1) : q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.79px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='700';">
         </lido-text>
       </lido-cell>
   `;
@@ -30,7 +30,7 @@ function getContainerXml(args) {
     // ---------------------- FINAL XML ----------------------
     return `
 <main>
-<lido-container  visible="true" id="lido-container" template-id="mcq" 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/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
+<lido-container disable-speak="true"  visible="true" id="lido-container" template-id="mcq" 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/fb207af37ae5d938778718e0095fc36abef7c694.png" objective="${(args.options.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
         box-shadow: none !important;
         }" onEntry="questionText.speak='true';">
 	 <!-- Chimple Avatar -->

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

@@ -36,13 +36,13 @@ function getContainerXml(args) {
     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>
+      <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  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}">
+<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="">

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

@@ -37,7 +37,11 @@ function getContainerXml(args) {
     // ---------------------- FINAL XML ----------------------
     return `
 <main>
-<lido-container  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}" >
+<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.82%, portrait.30%" y="landscape.32%, portrait.78%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">

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

@@ -36,7 +36,11 @@ function getContainerXml(args) {
     // ---------------------- FINAL XML ----------------------
     return `
 <main>
-<lido-container  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}">
+<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="">

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

@@ -14,7 +14,7 @@ export const AmazingStories = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container 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='Success'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+    <lido-container disable-speak="true" 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"   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';">

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

@@ -53,7 +53,7 @@ function getContainerXml(args) {
     const { isAllowOnlyCorrect = true } = args;
     const { sentenceParts = [] } = args;
     return `<main>
-    <lido-container  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
+    <lido-container disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
 
     <!-- Chimple Avatar -->
     <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.85%, portrait.28%" y="landscape.21%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true">

package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js

@@ -49,10 +49,10 @@ function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
     return `<main>
-   <lido-container   visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
+   <lido-container  disable-speak="true"  visible="true" template-id="dragAndDrop" id="lido-container" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4},${args.answer5}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/palEgra-pictureWordMatch/bgImg.png" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" onEntry="">
 
 		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.94%, portrait.28%" y="landscape.61%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.84%, portrait.28%" y="landscape.61%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" >
 			<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>
@@ -73,7 +73,7 @@ function getContainerXml(args) {
     <lido-text type="drop" value="${args.answer4}" id="drop4" tab-index="11" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
     <lido-text type="drop" value="${args.answer5}" id="drop5" tab-index="12" visible="true" height="122px" width="225px" onEntry="this.border-radius='16px';"></lido-text>
   </lido-cell>
-  <lido-cell visible="true" layout="row"  height="270px" width="90%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';">
+  <lido-cell visible="true" layout="row"  height="270px" width="81%" bg-color="transparent" onEntry="this.align-items='center';this.justify-content='space-around';this.position='relative';" x="-34px">
     <lido-text visible="true" height="122px" disable-speak="true" width="225px" type="drag" id="drag1" tab-index="2" string="${args.option1}" value="${args.option1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" ></lido-text>
     <lido-text visible="true" height="122px" disable-speak="true" width="225px" type="drag" id="drag2" tab-index="3" string="${args.option2}" value="${args.option2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" ></lido-text>
     <lido-text visible="true" height="122px" disable-speak="true" width="225px" type="drag" id="drag3" tab-index="4" string="${args.option3}" value="${args.option3}" font-family="'Baloo Bhai 2'" font-color="black" font-size="80px"  bg-color="#FFAC4C" onEntry="this.font-weight='700';this.border-radius='16px';" ></lido-text>