lido-player 0.0.2-alpha-53-dev → 0.0.2-alpha-56-dev

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

@@ -40,7 +40,6 @@ function getContainerXml(args) {
     const options = args.options;
     const objective = answer;
     const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
-    let tabCounter = 2;
     const numberMap = {
         1: "one",
         2: "two",
@@ -61,6 +60,7 @@ function getContainerXml(args) {
       </lido-image>
     `;
     }).join('\n');
+    let tabCounter = 8;
     const dragCells = options
         .map((digit, i) => {
         return `
@@ -86,16 +86,16 @@ function getContainerXml(args) {
 
             <!-- question row-->
             <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.185px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.90px,portrait.40px">
-                <lido-text id="${number1}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                <lido-text id="num-${number1}" tab-index="2" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
                 </lido-text>
-                <lido-text id="operator-${sign}" tab-index="${tabCounter++}" height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                <lido-text id="operator-${sign}" tab-index="3" height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
                 </lido-text>
-                <lido-text id="${number2}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                <lido-text id="num-${number2}" tab-index="4" height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
                 </lido-text>
-                <lido-text id="equal" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                <lido-text id="equal" tab-index="5" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
                 </lido-text>
-                <lido-image id="${answer}" tab-index="${tabCounter++}" is-slice="true" height="225px" width="175px" value="${answer}" string="?" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" type="drop" onEntry="this.opacity='0';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
-                  <lido-text height="245px" width="175px" visible="true" value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';">
+                <lido-image is-slice="true" height="225px" width="175px" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png" onEntry="this.opacity='0';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';">
+                  <lido-text id="number-${answer}" height="225px" width="175px" visible="true" tab-index="6" value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px" type="drop" bg-color="transparent" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';">
                   </lido-text>
                 </lido-image>
             </lido-cell>
@@ -107,7 +107,7 @@ function getContainerXml(args) {
             </lido-cell>
 
             <!-- speaking element-->
-            <lido-text id="speak-text" tab-index="5" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px"  bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
+            <lido-text id="speak-text" tab-index="20" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px"  bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
             </lido-text>
         </lido-container>
     </main>

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

@@ -0,0 +1,144 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/TenBox',
+    argTypes: {
+        num1: { control: 'number' },
+        num2: { control: 'number' },
+        num3: { control: 'number' },
+        operator: { control: 'select', options: ['+', '-'] },
+    }
+};
+export default meta;
+export const TenBoxTemplate = {
+    args: {
+        num1: 13,
+        num2: 15,
+        // num3: 2,
+        operator: '+',
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    }
+};
+const answerNumbers = (num1, num2, operator, num3) => {
+    let answer = 0;
+    if (operator === '+') {
+        answer = num1 + num2;
+        if (num3 !== undefined) {
+            answer += num3;
+        }
+    }
+    else if (operator === '-') {
+        answer = num1 - num2;
+        if (num3 !== undefined) {
+            answer -= num3;
+        }
+    }
+    return answer;
+};
+const renderDropBoxes = (numOfDrops) => {
+    const digits = numOfDrops.toString().split('');
+    return digits.map((digit, index) => {
+        return `<lido-text visible="true" id="drop${index}" string="?" tab-index="${index}" font-size="150px" font-color="#facf50" bg-color="#000000a5" type="drop" height="165px" width="115px" border-radius="15px" value="${digit}" onEntry="this.fontWeight='bold';"></lido-text>`;
+    }).join('');
+};
+const renderDragCells = () => {
+    let html = "";
+    for (let i = 0; i < 10; i++) {
+        html += `
+      <lido-text 
+        visible="true" 
+        id="drag${i}" 
+        type="drag" 
+        string="${i}" 
+        value="${i}" 
+        font-size="150px" 
+        font-color="#3d1d0c" 
+        height="165px" 
+        width="115px" 
+        bg-color="#f5f098" 
+        border-radius="15px" 
+        onEntry="this.fontWeight='bold';">
+      </lido-text>
+    `;
+    }
+    return html;
+};
+const getContainerXml = (args) => {
+    const answer = answerNumbers(args.num1, args.num2, args.operator, args.num3);
+    return `
+    <main>
+    <lido-container visible="true" objective="${answer.toString().split("").join(",")}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/tenbox.png" is-continue-on-correct="true" onCorrect="this.sleep='1500';" drop-action="infinite-drop" id="lido-container" >
+	<lido-cell visible="true" layout="col" height="100%" width="100%" bg-color="transparent">
+		<lido-cell visible="true" layout="landscape.row, portrait.col" height="53%" width="auto" gap="20px" bg-color="transparent">
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				${!args.num3 && args.num1 >= 10 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+					</lido-cell>
+					` : ``}
+
+				${!args.num3 && args.num1 === 20 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox1" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox1.display='flex';" defualt-fill="10" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+					</lido-cell>
+					` : `<lido-math-matrix visible="${args.num1 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num1 > 10 ? args.num1 - 10 : args.num1}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>`}
+				
+
+				
+
+			</lido-cell>
+
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				${!args.num3 && args.num2 >= 10 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox2" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox2.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
+					</lido-cell>
+					` : ``}
+				
+
+				${!args.num3 && args.num2 === 20 ? `
+					<lido-cell visible="true" height="50%" width="100%" layout="row">
+						<lido-text id="tenBox3" visible="false" font-size="150px" bg-color="#fbd061" width="100%" height="70%" onEntry="this.border='4px solid #c86d29';" border-radius="20px">
+							<lido-image visible="true" is-slice="true" width="35%" height="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/sunflower.png">
+								<lido-text visible="true" string="10" font-size="145px" bg-color="transparent" onEntry="this.fontWeight='700';"></lido-text>
+							</lido-image>
+						</lido-text>
+						<lido-math-matrix visible="true" height="100%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" onEntry="this.sleep='1000'; this.display='none'; tenBox3.display='flex';" defualt-fill="10" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>
+					</lido-cell>
+					` : `<lido-math-matrix visible="${args.num2 !== 10 ? true : false}" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num2 > 10 ? args.num2 - 10 : args.num2}" clickable="false" matrix-image="${args.operator === "+" ? `https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png` : 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Tenbox/apple%20outline.png'}"></lido-math-matrix>`}
+			</lido-cell>
+			${args.num3 ? `
+			<lido-cell visible="true" layout="col" height="100%" width="500px" bg-color="transparent">
+				<lido-math-matrix visible="true" height="50%" width="100%" rows="5" cols="2" border="2px solid orange" border-radius="7px" active-bg-color="white" deactive-bg-color="white" defualt-fill="${args.num3}" clickable="false" matrix-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png"></lido-math-matrix>
+			</lido-cell>` : ``}
+		</lido-cell>
+		<lido-cell visible="true" layout="row" height="20%" width="auto" gap="20px" bg-color="transparent">
+			<lido-text visible="true" string="${args.num1}${args.operator}${args.num2}${args.num3 ? args.operator + args.num3 : ""} = " font-size="150px" font-color="white" onEntry="this.fontWeight='bold';" onTouch="this.fontSize='20px'; this.visibility='hidden';"></lido-text>
+			${renderDropBoxes(answer)}
+		</lido-cell>
+		<lido-cell visible="true" layout="landscape.row, portrait.flex" height="landscpae.20%, portrait.30%" gap="landscape.0, portrait.80px" width="100%" bg-color="transparent">
+			
+			${renderDragCells()}
+
+		</lido-cell>
+	</lido-cell>
+</lido-container>
+</main>`;
+};

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

@@ -48,7 +48,7 @@ function getContainerXml(args) {
         console.error('Trace image is missing');
         return '';
     }
-    let tabCounter = 4;
+    let tabCounter = 7;
     // Make a list [1,2,3,...,stars]
     const starList = Array.from({ length: stars }, (_, i) => i + 1);
     const starCells = starList
@@ -61,7 +61,7 @@ function getContainerXml(args) {
         .join('');
     return `
         <main>
-            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20number.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20number.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
 
                 <!-- Chimple Avatar -->
                 <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1035px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
@@ -71,9 +71,13 @@ function getContainerXml(args) {
                     </lido-image>
                 </lido-cell>
 
+
+                <lido-text id="invisible-text" tab-index="2" audio="" width="297px" height="80px" display="flex" onEntry="this.speak='true';" font-size="12px" z="1" font-color="black" value="trace the number as shown by pointing the figure and count the rockets." string="trace the number as shown by pointing the figure and count the rockets." visible="false" bg-color="transparent">
+                </lido-text>   
+
                 <!-- text-element -->
                 <lido-cell layout="pos" id="pos2" disable-edit="true" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.645px, portrait.300px" y="landscape.90px, portrait.105px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.font-weight='600';">
-                    <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
+                    <lido-text id="txt1" tab-index="3" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
                     </lido-text>                        
                 </lido-cell>
 
@@ -85,7 +89,7 @@ function getContainerXml(args) {
 
                 <!-- trace cell -->
                 <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px"  height="landscape.477px, portrait.477px" bg-color="transparent"  onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.275px">
-                    <lido-trace id="image2" tab-index="3" value="a" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/2.wav" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
+                    <lido-trace id="image2" tab-index="4" value="10" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/1.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/2.wav" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
                     </lido-trace>
                 </lido-cell>
 

package/dist/collection/utils/constants.js

@@ -17,6 +17,8 @@ export const DropToAttr = 'drop-to';
 export const DropTimeAttr = 'drop-time';
 export const LidoContainer = 'lido-container';
 export const LangChangeEvent = 'languageChanged';
+export const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
+export const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
 export var TraceMode;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";

package/dist/collection/utils/customEvents.js

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

package/dist/collection/utils/utils.js

@@ -575,6 +575,8 @@ export async function onActivityComplete(dragElement, dropElement) {
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
         const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        // storing each activity score based on isCorrect for (all drag-drop events)
+        storingEachActivityScore(isCorrect);
         if (isCorrect) {
             const onCorrect = dropElement.getAttribute('onCorrect');
             if (onCorrect) {
@@ -721,6 +723,7 @@ export const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
+            storingEachActivityScore(true);
             await executeActions(onCorrect, container);
         }
         if (container.getAttribute('dropAttr') === 'EnableAnimation') {
@@ -736,12 +739,12 @@ export const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
-            triggerNextContainer();
             await calculateScore();
             triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
+            storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
         }
     }
@@ -764,6 +767,9 @@ export function convertUrlToRelative(url) {
     if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
+    if (url.startsWith('/Lido-CommonAudios/')) {
+        return url;
+    }
     if (baseUrl) {
         const newUrl = url.startsWith('/') ? url.slice(1) : url;
         if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))

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

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

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

@@ -9,7 +9,7 @@ export function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disableSpeak') === 'true') {
+    if (container && container.getAttribute('disable-speak') === 'true') {
         return;
     }
     // if (element.closest('[disableSpeak="true"]')) {

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

@@ -281,9 +281,12 @@ export function enableDraggingWithScaling(element) {
                             otherElement.style.border = ''; // Reset border
                             otherElement.style.backgroundColor = 'transparent'; // Reset background color
                         }
-                        if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
                         }
+                        else {
+                            otherElement.style.opacity = '1';
+                        }
                     }
                 }
                 else {
@@ -490,7 +493,6 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
     });
     handleShowCheck();
 }
-const tempVanishedValues = [];
 export async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const container = document.getElementById(LidoContainer);
@@ -717,7 +719,6 @@ export async function onElementDropComplete(dragElement, dropElement) {
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
     // storingEachActivityScore(isCorrect);
     dragElement.style.opacity = '1';
-    await onActivityComplete(dragElement, dropElement);
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
     await onActivityComplete(dragElement, dropElement);

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

@@ -14,7 +14,7 @@ export function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -46,18 +46,17 @@ function calculateValue(elements, operation) {
     }
 }
 export function balanceResult(container, objectiveString) {
-    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
-    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
+    const leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
     const hasLeft = !isNaN(leftVal);
     const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';

package/dist/components/index.js

@@ -1 +1 @@
-export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-511377d2.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-0712a27e.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-df1af62c.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-0a41b2f8.js';
 
 const LidoAvatar = LidoAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-balance.js

@@ -1,4 +1,4 @@
-import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-09b3b152.js';
+import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-21852d55.js';
 
 const LidoBalance = LidoBalance$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-calculator.js

@@ -1,4 +1,4 @@
-import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-004adc43.js';
+import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-c4739621.js';
 
 const LidoCalculator = LidoCalculator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-canvas.js

@@ -1,4 +1,4 @@
-import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-567983a9.js';
+import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-882b291d.js';
 
 const LidoCanvas = LidoCanvas$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-cell.js

@@ -1,4 +1,4 @@
-import { L as LidoCell$1, d as defineCustomElement$1 } from './p-d2fe2bb6.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-f3bc4577.js';
 
 const LidoCell = LidoCell$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-col.js

@@ -1,4 +1,4 @@
-import { L as LidoCol$1, d as defineCustomElement$1 } from './p-3f0e4436.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-eab0ebb7.js';
 
 const LidoCol = LidoCol$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-container.js

@@ -1,4 +1,4 @@
-import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-9ea1a67d.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-d1b5079b.js';
 
 const LidoContainer = LidoContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-flash-card.js

@@ -1,4 +1,4 @@
-import { L as LidoFlash, d as defineCustomElement$1 } from './p-8774f517.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-480f708a.js';
 
 const LidoFlashCard = LidoFlash;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-float.js

@@ -1,4 +1,4 @@
-import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-d568d595.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-17f84b2f.js';
 
 const LidoFloat = LidoFloat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-home.js

@@ -1,4 +1,4 @@
-import { L as LidoHome$1, d as defineCustomElement$1 } from './p-057fb7b8.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-e1ba0c44.js';
 
 const LidoHome = LidoHome$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-image.js

@@ -1,4 +1,4 @@
-import { L as LidoImage$1, d as defineCustomElement$1 } from './p-6beee44b.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-ff801ba1.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-keyboard.js

@@ -1,4 +1,4 @@
-import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-71ded596.js';
+import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-330caab8.js';
 
 const LidoKeyboard = LidoKeyboard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-math-matrix.js

@@ -1,4 +1,4 @@
-import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-23549651.js';
+import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-ffc40642.js';
 
 const LidoMathMatrix = LidoMathMatrix$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-pos.js

@@ -1,4 +1,4 @@
-import { L as LidoPos$1, d as defineCustomElement$1 } from './p-cca545f9.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-4d332eab.js';
 
 const LidoPos = LidoPos$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-random.js

@@ -1,4 +1,4 @@
-import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-875c1411.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-9104d427.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-root.js

@@ -1,26 +1,26 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-511377d2.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-0712a27e.js';
 import { i as instance } from './p-73e3f0f4.js';
-import { d as defineCustomElement$m } from './p-df1af62c.js';
-import { d as defineCustomElement$l } from './p-09b3b152.js';
-import { d as defineCustomElement$k } from './p-004adc43.js';
-import { d as defineCustomElement$j } from './p-567983a9.js';
-import { d as defineCustomElement$i } from './p-d2fe2bb6.js';
-import { d as defineCustomElement$h } from './p-3f0e4436.js';
-import { d as defineCustomElement$g } from './p-9ea1a67d.js';
-import { d as defineCustomElement$f } from './p-8774f517.js';
-import { d as defineCustomElement$e } from './p-d568d595.js';
-import { d as defineCustomElement$d } from './p-057fb7b8.js';
-import { d as defineCustomElement$c } from './p-6beee44b.js';
-import { d as defineCustomElement$b } from './p-71ded596.js';
-import { d as defineCustomElement$a } from './p-23549651.js';
-import { d as defineCustomElement$9 } from './p-cca545f9.js';
-import { d as defineCustomElement$8 } from './p-875c1411.js';
-import { d as defineCustomElement$7 } from './p-561908ec.js';
-import { d as defineCustomElement$6 } from './p-0733b277.js';
-import { d as defineCustomElement$5 } from './p-90f7dd48.js';
-import { d as defineCustomElement$4 } from './p-b3e67e7f.js';
-import { d as defineCustomElement$3 } from './p-3e8ae1c5.js';
-import { d as defineCustomElement$2 } from './p-92b9ae9e.js';
+import { d as defineCustomElement$m } from './p-0a41b2f8.js';
+import { d as defineCustomElement$l } from './p-21852d55.js';
+import { d as defineCustomElement$k } from './p-c4739621.js';
+import { d as defineCustomElement$j } from './p-882b291d.js';
+import { d as defineCustomElement$i } from './p-f3bc4577.js';
+import { d as defineCustomElement$h } from './p-eab0ebb7.js';
+import { d as defineCustomElement$g } from './p-d1b5079b.js';
+import { d as defineCustomElement$f } from './p-480f708a.js';
+import { d as defineCustomElement$e } from './p-17f84b2f.js';
+import { d as defineCustomElement$d } from './p-e1ba0c44.js';
+import { d as defineCustomElement$c } from './p-ff801ba1.js';
+import { d as defineCustomElement$b } from './p-330caab8.js';
+import { d as defineCustomElement$a } from './p-ffc40642.js';
+import { d as defineCustomElement$9 } from './p-4d332eab.js';
+import { d as defineCustomElement$8 } from './p-9104d427.js';
+import { d as defineCustomElement$7 } from './p-2829c82c.js';
+import { d as defineCustomElement$6 } from './p-cca36777.js';
+import { d as defineCustomElement$5 } from './p-f2b53e8e.js';
+import { d as defineCustomElement$4 } from './p-7ab0a273.js';
+import { d as defineCustomElement$3 } from './p-b9875116.js';
+import { d as defineCustomElement$2 } from './p-4e041807.js';
 
 const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
     constructor() {

package/dist/components/lido-row.js

@@ -1,4 +1,4 @@
-import { L as LidoRow$1, d as defineCustomElement$1 } from './p-561908ec.js';
+import { L as LidoRow$1, d as defineCustomElement$1 } from './p-2829c82c.js';
 
 const LidoRow = LidoRow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-shape.js

@@ -1,4 +1,4 @@
-import { L as LidoShape$1, d as defineCustomElement$1 } from './p-0733b277.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-cca36777.js';
 
 const LidoShape = LidoShape$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-slide-fill.js

@@ -1,4 +1,4 @@
-import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-90f7dd48.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-f2b53e8e.js';
 
 const LidoSlideFill = LidoSlideFill$1;
 const defineCustomElement = defineCustomElement$1;