lido-player 0.0.2-alpha-26 → 0.0.2-alpha-28

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-dc70b21f.js');
+const utils = require('./utils-0c09d26d.js');
 require('./index-fe562525.js');
 
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-dc70b21f.js');
+const utils = require('./utils-0c09d26d.js');
 
 var rive = {exports: {}};
 
@@ -7124,7 +7124,7 @@ const LidoHome = class {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 utils.dispatchGameCompletedEvent();
-                this.currentContainerIndex = 0;
+                // this.currentContainerIndex = 0;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];

package/dist/cjs/{utils-dc70b21f.js → utils-0c09d26d.js}

@@ -1029,12 +1029,13 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     dragElement.classList.remove('dropped');
     const container = document.getElementById(LidoContainer);
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
-    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item);
+    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped'));
     dragElement.style.transition = 'transform 0.5s ease';
     if (cloneDragElement) {
         animateDragToTarget(dragElement, cloneDragElement, container);
         setTimeout(() => {
             if (container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop) {
+                dragElement.removeAttribute('hasDummy');
                 dragElement.style.width = cloneDragElement.style.width;
                 dragElement.style.height = cloneDragElement.style.height;
             }
@@ -1052,7 +1053,6 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     }
     let currentDrop = dragToDropMap.get(dragElement);
     if (currentDrop) {
-        dragElement.removeAttribute(DropToAttr);
         dragToDropMap.delete(dragElement);
         updateDropBorder(currentDrop);
         if (((_a = currentDrop === null || currentDrop === void 0 ? void 0 : currentDrop.getAttribute('drop-attr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Stretch) {
@@ -1080,19 +1080,13 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     }
     if (dragSelectedData) {
         let dragSelected = JSON.parse(dragSelectedData);
-        let dropSelected = JSON.parse(dropSelectedData);
-        for (const key in dragSelected) {
-            if (dragSelected[key].includes(dragElement['value'])) {
-                for (const key in dropSelected) {
-                    if (dropSelected[key].includes(dragElement.id)) {
-                        delete dropSelected[key];
-                    }
-                }
-                delete dragSelected[key];
-            }
+        const dragPreDropElement = container.querySelector(`#${dragElement.getAttribute(DropToAttr)}`);
+        if (dragPreDropElement) {
+            delete dragSelected[dragPreDropElement.getAttribute('tab-index')];
         }
         localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
-        // localStorage.setItem(DragMapKey, JSON.stringify(dropSelected));
+        dragElement.removeAttribute(DropToAttr);
+        updateDropBorder(currentDrop);
     }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
@@ -1126,16 +1120,16 @@ async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c;
     const selectedValueData = localStorage.getItem(SelectedValuesKey) || '';
     const dragSelectedData = localStorage.getItem(DragSelectedMapKey);
-    const dropSelectedData = localStorage.getItem(DragMapKey);
+    localStorage.getItem(DragMapKey);
     let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
     const container = document.getElementById(LidoContainer);
     if (!dropElement) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
     if ((_a = dropHasDrag[dropTabIndex]) === null || _a === void 0 ? void 0 : _a.isFull) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
@@ -1143,10 +1137,10 @@ async function onElementDropComplete(dragElement, dropElement) {
         if (!dropElement) {
             dragElement.style.transition = 'transform 0.5s ease';
             dragElement.style.transform = 'translate(0, 0)';
-            handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+            handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
-        const isCorrect = dropElement['value'].includes(dragElement['value']);
+        const isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         if (!isCorrect) {
             const localStorageKey = `${LidoContainer}_dropData`;
             dragElement.style.transition = 'transform 0.5s ease';
@@ -1161,7 +1155,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                     delete stored[oldDropIndex];
                     localStorage.setItem(localStorageKey, JSON.stringify(stored));
                 }
-                handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+                handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             }, 100);
             if (dragElement['type'] === 'option') {
                 const childs = Array.from(container.querySelectorAll(`[value="${dragElement['value']}"]`));
@@ -1184,7 +1178,7 @@ async function onElementDropComplete(dragElement, dropElement) {
                     div.classList.add('after-drop-popup-container');
                     const hasType = dragElement.nextElementSibling;
                     // Remove from old parents
-                    if (hasType && hasType.getAttribute("type") === 'drag') {
+                    if (hasType && hasType.getAttribute('type') === 'drag') {
                         dragElement.remove();
                         dropElement.remove();
                     }
@@ -1229,7 +1223,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             const dragWidth = dragElement.offsetWidth;
             dropElement.style.width = `${dragWidth}px`;
         }
-        dragElement.classList.add('dropped');
         if (!(((_b = dropElement.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
             if (isisFull) {
@@ -1242,12 +1235,13 @@ async function onElementDropComplete(dragElement, dropElement) {
             if (dragSelectedData) {
                 let dragSelected = JSON.parse(dragSelectedData);
                 for (const key in dragSelected) {
-                    if (dragSelected[key].includes(dragElement['value'])) {
+                    if (dragSelected[key].includes(dragElement['value']) && dragElement.classList.contains('dropped')) {
                         delete dragSelected[key];
                     }
                 }
                 localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
+            dragElement.classList.add('dropped');
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_c = dropHasDrag[dropTabIndex]) === null || _c === void 0 ? void 0 : _c.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement(dragElement, 'drag');
@@ -1287,7 +1281,7 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
     }
     if (!dropElement) {
-        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
+        handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
     if (dragSelectedData) {
@@ -1347,7 +1341,7 @@ async function onElementDropComplete(dragElement, dropElement) {
     allDropElements.forEach(el => updateDropBorder(el));
 }
 function updateDropBorder(element) {
-    if (!element.classList.contains('drop-element'))
+    if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -1477,16 +1471,22 @@ const appendingDragElementsInDrop = () => {
             const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
             else {
                 if (drop['value'].includes(drag['value'])) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
         });
@@ -1510,6 +1510,32 @@ const reduceSizeToOriginal = () => {
         }
     });
 };
+const resizeDragAndDropElementsForRocket = (drag, drop, width, height) => {
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    const Rocket = document.getElementById("fullRrocket");
+    if (!Rocket)
+        return;
+    // Get the scale of the container
+    const containerScale = getElementScale(container);
+    // Hide child image inside lido-image
+    const childImage = drop.querySelector('img');
+    if (childImage) {
+        // Set the opacity to 1 for the drop element
+        drop.style.opacity = '1';
+        // Hide child image inside lido-image
+        childImage.remove(); // remove the child image
+        // Ensure dropped lido-text remains visible
+        const childText = drop.querySelector('lido-text');
+        if (childText) {
+            childText.style.opacity = '1';
+        }
+        //  Ensure dropped text retains its original size
+        drag.style.width = `${width / containerScale}px`;
+        drag.style.height = `${height}px`;
+    }
+};
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
 const slideAnimation = async () => {
@@ -67925,6 +67951,8 @@ const executeActions = async (actionsString, thisElement, element) => {
                     else {
                         dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
                     }
+                    if (dragElement.getAttribute("hasDummy") === "true")
+                        return;
                     afterDropDragHandling(dragElement, dropElement);
                     break;
                 }
@@ -68018,15 +68046,13 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
             if (isInfinite) {
-                const allDummy = container.querySelectorAll(`[id=${dragElement.id}]`);
-                if (allDummy.length === 1) {
-                    dummyElement = cloneElementWithComputedStyles(dragElement);
-                    dummyElement.classList.remove('dropped');
-                    dummyElement.removeAttribute('drop-to');
-                    dummyElement.removeAttribute('drop-time');
-                    dragElement.style.width = dropElement.style.width;
-                    dragElement.style.height = dropElement.style.height;
-                }
+                dummyElement = cloneElementWithComputedStyles(dragElement);
+                dummyElement.classList.remove('dropped');
+                dummyElement.removeAttribute('drop-to');
+                dummyElement.removeAttribute('drop-time');
+                dragElement.style.width = dropElement.style.width;
+                dragElement.style.height = dropElement.style.height;
+                dragElement.setAttribute("hasDummy", "true");
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -68065,7 +68091,6 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     }
 };
 function cloneElementWithComputedStyles(originalEl) {
-    console.log(originalEl.outerHTML);
     let clone = document.createElement('div');
     clone.innerHTML = originalEl.outerHTML;
     clone = clone.firstChild;

package/dist/collection/components/home/lido-home.js

@@ -38,7 +38,7 @@ export class LidoHome {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
                 dispatchGameCompletedEvent();
-                this.currentContainerIndex = 0;
+                // this.currentContainerIndex = 0;
             }
             // Reset the containers array to trigger a re-render
             this.containers = [...this.containers];

package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js

@@ -115,7 +115,7 @@ function getContainerXml(args) {
         .join('');
     return `
   <main> 
-      <lido-container id="lido-container" objective="${args.correct1}, ${args.correct2}, ${args.correct3}" appendToDropOnCompletion="true" show-drop-border="false" tab-index="1" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s linear'; this.sleep='2000';" show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false">
+      <lido-container id="lido-container" objective="${args.correct1}, ${args.correct2}, ${args.correct3}" appendToDropOnCompletion="true" show-drop-border="false" tab-index="1" is-allow-only-correct="true" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 3s linear'; this.sleep='2000';" show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false">
           <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.-60px, portrait.250px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
               <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
               </lido-avatar>

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

@@ -49,7 +49,7 @@ function getContainerXml(args) {
       onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" 
       is-continue-on-correct="true" bg-color="transparent" 
       bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" 
-      drop-action="infinite-drop">
+      drop-action="infinite-drop" is-allow-only-correct="true">
 
       <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" 
         height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px" 

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

@@ -20,24 +20,25 @@ export const PhonicTractor = {
     },
 };
 function getContainerXml(args) {
+    let tabCounter = 1;
     const { text1, options = [], answers = [] } = args;
     const trolleyCells = answers
-        .map((answer, index) => {
+        .map((answer) => {
         return `
 		<!-- drop and trolley -->
 		<lido-cell height="237px" width="200px" visible="true" bg-color="transparent" layout="col" >
-			<lido-text id="t${index + 1}" type="drop" tab-index="${index + 2}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="true" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';">
+			<lido-text id="drop${tabCounter}" type="drop" tab-index="${tabCounter++}" bg-color="transparent" height="132px" width="132px" value="${answer}" is-allow-only-one-drop="true" margin="-25px 0px 16px 0px" onEntry=" this.borderRadius='6px';this.display='flex'; this.alignItems='center'; this.justifyContent='center';">
 			</lido-text>
-			<lido-image id="img${index + 4}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
+			<lido-image id="img${tabCounter}" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_holder.png" height="97px" width="220px" >
 			</lido-image>
 		</lido-cell>
       `;
     })
         .join('');
     const optionCells = options
-        .map((option, index) => {
+        .map((option) => {
         return `
-		<lido-text id="option${index + 1}" tab-index="${index + 5}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="" show-speak-icon="true" >
+		<lido-text id="option${tabCounter}" tab-index="${tabCounter++}" width="132px"  height="132px" value="${option}"  visible="true" string="${option}" font-family="'Baloo Bhai 2'" font-color="white" type="drag" font-size="landscape.96px, portrait.96px" bg-color="transparent" onEntry="  this.fontWeight='600';this.borderRadius='10px';"  margin="landscape.150px 0px 112px 0px, portrait.0px 0px 0px 0px"  border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/box.png" onTouch="" show-speak-icon="true" >
 		</lido-text>
       `;
     })
@@ -63,7 +64,7 @@ function getContainerXml(args) {
 			<!-- tractor -->
 			<lido-cell layout="row" id="b1" visible="true" width="landscape.100%, portrait.850px" height="landscape.245px, portrait.30%" bg-color="transparent" onEntry="this.align-items='center'; this.animation='rightToPlace 3s linear'; this.justifyContent='center';" margin="landscape.215px 0px 0px 0px, portrait.0px 0px 0px 0px">
 				<!-- tractor head -->
-				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.80px 0px 0px 0px, portrait.80px 0px 0px 0px" >
+				<lido-image id="img2" visible="true"  disable-edit="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/phonictractor_tractor_head.png" height="landscape.154px, portrait.154px" width="197px" onEntry="" margin="landscape.86px -11px 0px 89px, portrait.80px 0px 0px 0px" >
 				</lido-image>
 				${trolleyCells}
 			</lido-cell>

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

@@ -13,12 +13,12 @@ const meta = {
 export default meta;
 export const quizLiteracy = {
     args: {
-        option1: "n",
-        option2: "a",
-        option3: "f",
-        option4: "b",
-        text: "n",
-        answers: "n",
+        option1: "Tiger",
+        option2: "Horse",
+        option3: "Sloth",
+        option4: "Whale",
+        text: "Tiger",
+        answers: "Tiger",
         image: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png",
     },
     render: args => {
@@ -30,10 +30,10 @@ function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
    <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.476px" width="landscape.278px,portrait.467px" x="landscape.64%, portrait.24%" y="landscape.228px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.64%, portrait.63%" y="landscape.228px, portrait.-1%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
 		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="165px" height="30px" x="landscape.54px,portrait.125px" y="landscape.239px,portrait.400px" alt-text="{shadowImgae}">
+		<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="165px" height="30px" x="landscape.54px,portrait.109px" y="landscape.239px,portrait.314px" alt-text="{shadowImgae}">
 		</lido-image>
 	</lido-cell>
 	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
@@ -66,7 +66,7 @@ function getContainerXml(args) {
 </lido-cell>
 
 
-		<lido-cell layout="flex" visible="true"  margin="landscape.0px,portrait.-424px 0px 407px 0px" width="landscape.100%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+		<lido-cell layout="landscape.row,portrait.col" visible="true"  margin="landscape.0px,portrait.0px 0px 0px 0px" width="landscape.140%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
              
             <lido-text visible="true" audio=""  show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
             </lido-text>

package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js

@@ -8,10 +8,10 @@ const meta = {
 export default meta;
 export const quizLiteracyImageWord = {
     args: {
-        option1: "Elephant",
-        option2: "Fish",
-        option3: "Egg",
-        option4: "Nest",
+        option1: "Hippopotamus",
+        option2: "Elephant",
+        option3: "Grandmother",
+        option4: "Sunflower",
         answers: "Elephant",
         image: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/LetterPair/Cat.png'],
     },
@@ -24,10 +24,10 @@ function getContainerXml(args) {
     let tabCounter = 1;
     return `<main>
    <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.476px" width="landscape.278px,portrait.467px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
 		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.125px" y="landscape.239px,portrait.400px" alt-text="{shadowImgae}">
+		<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="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.108px" y="landscape.239px,portrait.361px" alt-text="{shadowImgae}">
 		</lido-image>
 	</lido-cell>
 	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
@@ -49,7 +49,7 @@ function getContainerXml(args) {
 </lido-cell>
 
 
-		<lido-cell layout="flex" visible="true" margin="landscape.0px,portrait.-34px 0px 364px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+		<lido-cell layout="landscape.wrap,portrait.col" visible="true" margin="landscape.0px,portrait.214px 0px 271px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry=" this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
             
             <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
             </lido-text>

package/dist/collection/utils/utils.js

@@ -94,6 +94,8 @@ export const executeActions = async (actionsString, thisElement, element) => {
                     else {
                         dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
                     }
+                    if (dragElement.getAttribute("hasDummy") === "true")
+                        return;
                     afterDropDragHandling(dragElement, dropElement);
                     break;
                 }
@@ -187,15 +189,13 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
             if (isInfinite) {
-                const allDummy = container.querySelectorAll(`[id=${dragElement.id}]`);
-                if (allDummy.length === 1) {
-                    dummyElement = cloneElementWithComputedStyles(dragElement);
-                    dummyElement.classList.remove('dropped');
-                    dummyElement.removeAttribute('drop-to');
-                    dummyElement.removeAttribute('drop-time');
-                    dragElement.style.width = dropElement.style.width;
-                    dragElement.style.height = dropElement.style.height;
-                }
+                dummyElement = cloneElementWithComputedStyles(dragElement);
+                dummyElement.classList.remove('dropped');
+                dummyElement.removeAttribute('drop-to');
+                dummyElement.removeAttribute('drop-time');
+                dragElement.style.width = dropElement.style.width;
+                dragElement.style.height = dropElement.style.height;
+                dragElement.setAttribute("hasDummy", "true");
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -234,7 +234,6 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     }
 };
 function cloneElementWithComputedStyles(originalEl) {
-    console.log(originalEl.outerHTML);
     let clone = document.createElement('div');
     clone.innerHTML = originalEl.outerHTML;
     clone = clone.firstChild;

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

@@ -376,12 +376,13 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
     dragElement.classList.remove('dropped');
     const container = document.getElementById(LidoContainer);
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
-    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item);
+    const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item && !item.classList.contains('dropped'));
     dragElement.style.transition = 'transform 0.5s ease';
     if (cloneDragElement) {
         animateDragToTarget(dragElement, cloneDragElement, container);
         setTimeout(() => {
             if (container.getAttribute('drop-action') === DropAction.InfiniteDrop) {
+                dragElement.removeAttribute('hasDummy');
                 dragElement.style.width = cloneDragElement.style.width;
                 dragElement.style.height = cloneDragElement.style.height;
             }
@@ -399,7 +400,6 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
     }
     let currentDrop = dragToDropMap.get(dragElement);
     if (currentDrop) {
-        dragElement.removeAttribute(DropToAttr);
         dragToDropMap.delete(dragElement);
         updateDropBorder(currentDrop);
         if (((_a = currentDrop === null || currentDrop === void 0 ? void 0 : currentDrop.getAttribute('drop-attr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Stretch) {
@@ -427,19 +427,13 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
     }
     if (dragSelectedData) {
         let dragSelected = JSON.parse(dragSelectedData);
-        let dropSelected = JSON.parse(dropSelectedData);
-        for (const key in dragSelected) {
-            if (dragSelected[key].includes(dragElement['value'])) {
-                for (const key in dropSelected) {
-                    if (dropSelected[key].includes(dragElement.id)) {
-                        delete dropSelected[key];
-                    }
-                }
-                delete dragSelected[key];
-            }
+        const dragPreDropElement = container.querySelector(`#${dragElement.getAttribute(DropToAttr)}`);
+        if (dragPreDropElement) {
+            delete dragSelected[dragPreDropElement.getAttribute('tab-index')];
         }
         localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
-        // localStorage.setItem(DragMapKey, JSON.stringify(dropSelected));
+        dragElement.removeAttribute(DropToAttr);
+        updateDropBorder(currentDrop);
     }
     const allElements = document.querySelectorAll("[type='drop']");
     allElements.forEach(otherElement => {
@@ -493,7 +487,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
             handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
             return;
         }
-        const isCorrect = dropElement['value'].includes(dragElement['value']);
+        const isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         if (!isCorrect) {
             const localStorageKey = `${LidoContainer}_dropData`;
             dragElement.style.transition = 'transform 0.5s ease';
@@ -531,7 +525,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
                     div.classList.add('after-drop-popup-container');
                     const hasType = dragElement.nextElementSibling;
                     // Remove from old parents
-                    if (hasType && hasType.getAttribute("type") === 'drag') {
+                    if (hasType && hasType.getAttribute('type') === 'drag') {
                         dragElement.remove();
                         dropElement.remove();
                     }
@@ -576,7 +570,6 @@ export async function onElementDropComplete(dragElement, dropElement) {
             const dragWidth = dragElement.offsetWidth;
             dropElement.style.width = `${dragWidth}px`;
         }
-        dragElement.classList.add('dropped');
         if (!(((_b = dropElement.getAttribute('dropAttr')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
             if (isisFull) {
@@ -589,12 +582,13 @@ export async function onElementDropComplete(dragElement, dropElement) {
             if (dragSelectedData) {
                 let dragSelected = JSON.parse(dragSelectedData);
                 for (const key in dragSelected) {
-                    if (dragSelected[key].includes(dragElement['value'])) {
+                    if (dragSelected[key].includes(dragElement['value']) && dragElement.classList.contains('dropped')) {
                         delete dragSelected[key];
                     }
                 }
                 localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
+            dragElement.classList.add('dropped');
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_c = dropHasDrag[dropTabIndex]) === null || _c === void 0 ? void 0 : _c.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement(dragElement, 'drag');
@@ -694,7 +688,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
     allDropElements.forEach(el => updateDropBorder(el));
 }
 export function updateDropBorder(element) {
-    if (!element.classList.contains('drop-element'))
+    if (!element || !element.classList.contains('drop-element'))
         return;
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -824,16 +818,22 @@ export const appendingDragElementsInDrop = () => {
             const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
             if (isAllowOnlyCorrect === true) {
                 if (drop['value'] === drag['value']) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
             else {
                 if (drop['value'].includes(drag['value'])) {
+                    // Get original dimensions of the drag element
+                    const originalWidth = drag.offsetWidth;
+                    const originalHeight = drag.offsetHeight;
                     drag.style.transform = 'translate(0,0)';
                     drop.appendChild(drag);
-                    //  drag.style.boxShadow = 'none';
+                    resizeDragAndDropElementsForRocket(drag, drop, originalWidth, originalHeight);
                 }
             }
         });
@@ -857,3 +857,29 @@ export const reduceSizeToOriginal = () => {
         }
     });
 };
+export const resizeDragAndDropElementsForRocket = (drag, drop, width, height) => {
+    const container = document.getElementById(LidoContainer);
+    if (!container)
+        return;
+    const Rocket = document.getElementById("fullRrocket");
+    if (!Rocket)
+        return;
+    // Get the scale of the container
+    const containerScale = getElementScale(container);
+    // Hide child image inside lido-image
+    const childImage = drop.querySelector('img');
+    if (childImage) {
+        // Set the opacity to 1 for the drop element
+        drop.style.opacity = '1';
+        // Hide child image inside lido-image
+        childImage.remove(); // remove the child image
+        // Ensure dropped lido-text remains visible
+        const childText = drop.querySelector('lido-text');
+        if (childText) {
+            childText.style.opacity = '1';
+        }
+        //  Ensure dropped text retains its original size
+        drag.style.width = `${width / containerScale}px`;
+        drag.style.height = `${height}px`;
+    }
+};

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-06985aa0.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-c1df8ab6.js';