lido-player 0.0.2-alpha-57-dev → 0.0.2-alpha-59-dev

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js

@@ -0,0 +1,76 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/wordBuildingwithimg',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        letter1: { control: 'text' },
+        letter2: { control: 'text' },
+        img: { control: 'file' },
+        word: { control: 'text' },
+        answer: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const wordBuildingwithimg = {
+    args: {
+        option1: "C",
+        option2: "W",
+        option3: "S",
+        option4: "P",
+        option5: "M",
+        img: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/image.png",
+        isAllowOnlyCorrect: true,
+        word: "CAT",
+        letter1: "A",
+        letter2: "T",
+        answer: "C",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+   <lido-container visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" onEntry="blank.z-index='12';">
+<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, 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>
+    <lido-text visible="false" z-index="0" tab-index="19"  audio="" id="inst" string="Choose the correct letter to form a word" ></lido-text>
+	<!--	<lido-text visible="true" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="144px"  bg-color="transparent" y="23%" x="-203px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>-->
+	<lido-cell visible="true" layout="col" height="84%" width="95%" bg-color="transparent" margin="5px -126px -107px 0px">
+		<lido-cell visible="true" id="xx" layout="row" height="auto" width="907px" bg-color="#FFF5BB" onEntry="this.align-items='center';this.justify-content='space-evenly';this.border='2px solid #FFB612';this.border-radius='16px';">
+			<lido-cell layout="row" id="blank" visible="true" z-index="2" height="200px" width="200px" onEntry="this.align-items='center';this.justify-content='center';">
+		
+			<lido-text visible="true" string="_" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			</lido-cell>
+			<lido-cell visible="true" height="330px" width="330px">
+			<lido-image visible="true" heigth="auto"  width="auto" src="${args.img}"></lido-image>		
+		</lido-cell>
+	</lido-cell>
+	<lido-cell visible="true" height="40%" width="79%"  layout="row" >
+		<lido-text visible="true" type="click" value="${args.option1}" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option4}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option5}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option5}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+				
+	</lido-cell>
+	
+	</lido-cell>
+</lido-container>
+  </main>`;
+}

package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js

@@ -0,0 +1,74 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/wordBuildingwithoutimg',
+    argTypes: {
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+        letter1: { control: 'text' },
+        letter2: { control: 'text' },
+        img: { control: 'file' },
+        word: { control: 'text' },
+        answer: { control: 'text' },
+    },
+};
+export default meta;
+export const wordBuildingwithoutimg = {
+    args: {
+        option1: "C",
+        option2: "W",
+        option3: "S",
+        option4: "P",
+        option5: "M",
+        isAllowOnlyCorrect: true,
+        word: "CAT",
+        letter1: "A",
+        letter2: "T",
+        answer: "C",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const { isAllowOnlyCorrect = true } = args;
+    return `<main>
+   <lido-container visible="true" id="lido-container" template-id="mcq"  objective="${args.answer}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/WordBuilding/bgImage.png"  onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';data.speak='true';this.sleep='1200';data.z-index='100'; data.boxShadow='0 0 40px #FFC107';this.sleep='300'; this.sleep='400'; data.boxShadow='none';this.sleep='2000';" is-continue-on-correct="${isAllowOnlyCorrect}" is-allow-only-correct="true" onEntry="inst.speak='true';blank.z-index='12';">
+<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape. 373px,portrait.402px" width="landscape.304px,portrait.398px" x="landscape.0%, portrait.28%" y="landscape.51%, 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>
+    <lido-text visible="false" z-index="0" tab-index="19"  audio="" id="inst" string="Choose the correct letter to form a word" ></lido-text>
+    <lido-text visible="false" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="146px"  bg-color="transparent" y="179px" x="55px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>
+	<!--	<lido-text visible="true" z-index="1" height="114px" id="data" string="${args.word}" font-family="'Baloo Bhai 2'" font-color="black" font-size="146px"  bg-color="transparent" y="179px" x="55px"	onEntry="this.fontWeight='700';this.position='relative';" ></lido-text>-->
+	<lido-cell visible="true" layout="col" height="84%" width="95%" bg-color="transparent" margin="5px -126px -107px 0px">
+		<lido-cell visible="true" id="xx" layout="row" height="300px" width="635px" bg-color="#FFF5BB" onEntry="this.align-items='center';this.justify-content='space-evenly';this.border='2px solid #FFB612';this.border-radius='16px';">
+			<lido-cell layout="row" id="blank" visible="true" z-index="2" height="200px" width="200px" onEntry="this.align-items='center';this.justify-content='center';">
+		
+			<lido-text visible="true" string="_" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			<lido-text visible="true" string="${args.letter2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" 	onEntry="this.fontWeight='700';" ></lido-text>
+			</lido-cell>
+			
+	</lido-cell>
+	<lido-cell visible="true" height="40%" width="79%"  layout="row" >
+		<lido-text visible="true" type="click" value="${args.option1}" id="option1" tab-index="8" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option1}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option2}" type="click" id="option2" tab-index="9" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option2}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option3}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option3}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option4}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option4}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				<lido-text visible="true" value="${args.option5}" type="click" id="option3" tab-index="10" bg-color="#FFAC4C" height="212.4px" width="210px" string="${args.option5}"  font-family="'Baloo Bhai 2'" font-color="black" font-size="140px" onEntry="this.fontWeight='700';this.border-radius='16px';"></lido-text>
+				
+				
+	</lido-cell>
+	
+	</lido-cell>
+</lido-container>
+  </main>`;
+}

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

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

package/dist/collection/utils/constants.js

@@ -19,6 +19,7 @@ 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 const TemplateID = 'template-id';
 export var TraceMode;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";
@@ -50,5 +51,5 @@ export var DropAction;
 export const exitUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg';
 export const prevUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg';
 export const nextUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg';
-export const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg';
+export const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png';
 export const fingerUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';

package/dist/collection/utils/utils.js

@@ -10,7 +10,7 @@ import { enableDraggingWithScaling, enableOptionArea, getElementScale, handleDro
 import { addClickListenerForClickType, onTouchListenerForOnTouch } from "./utilsHandlers/clickHandler";
 import { evaluate, isArray } from "mathjs";
 import { fillSlideHandle } from "./utilsHandlers/floatHandler";
-import { stopHighlightForSpeakingElement } from "./utilsHandlers/highlightHandler";
+import { highlightElement, stopHighlightForSpeakingElement } from "./utilsHandlers/highlightHandler";
 import { handleSolvedEquationSubmissionAndScoreUpdate } from "./utilsHandlers/lidoCalculatorHandler";
 import { handlingMatrix } from "./utilsHandlers/matrixHandler";
 import { balanceResult } from "./utilsHandlers/lidoBalanceHandler";
@@ -105,7 +105,7 @@ export const initEventsForElement = async (element, type) => {
 export const executeActions = async (actionsString, thisElement, element) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
-    body.style.pointerEvents = 'none';
+    // body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -549,12 +549,16 @@ export const countPatternWords = (pattern) => {
     }
     return wordCount;
 };
+export let countOfMistakes = 0;
 export const storingEachActivityScore = (flag) => {
     if (flag) {
         gameScore.rightMoves += 1;
+        countOfMistakes = 0;
+        highlightElement();
     }
     else {
         gameScore.wrongMoves += 1;
+        countOfMistakes += 1;
     }
     console.log('Right Moves : ', gameScore.rightMoves);
     console.log('Wrong Moves : ', gameScore.wrongMoves);
@@ -601,7 +605,7 @@ export async function onActivityComplete(dragElement, dropElement) {
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.backgroundColor = 'transparent'; // Reset background color**
+                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color**
                 }
                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                     otherElement.style.opacity = '0';
@@ -611,7 +615,7 @@ export async function onActivityComplete(dragElement, dropElement) {
         }
         else {
             if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                otherElement.style.backgroundColor = 'transparent'; // Reset background color**********
+                // otherElement.style.backgroundColor = 'transparent'; // Reset background color**********
             }
             if (otherElement.tagName.toLowerCase() === 'lido-image') {
                 otherElement.style.opacity = '1';
@@ -738,8 +742,10 @@ export const validateObjectiveStatus = async () => {
     }
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+        const onCorrect = container.getAttribute('onCorrect');
         if (!isContinueOnCorrect) {
             await calculateScore();
+            await executeActions(onCorrect, container);
             triggerNextContainer();
         }
         else {
@@ -1202,10 +1208,22 @@ export const animateBoxCells = async (element, value) => {
         await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
         cell.classList.remove('lido-box-highlight');
     }
-    // After all cells have come down, apply the bounce animation
-    for (const cell of boxCells) {
-        // play the text child inside cell
-        await AudioPlayer.getI().play(cell);
+    // checkout parent cell first then pick the first text child inside cell
+    const parentCell = document.getElementById(LidoContainer);
+    if (!parentCell)
+        return;
+    const firstTextChild = parentCell.querySelector('lido-text');
+    if (firstTextChild) {
+        // play the text child inside parent cell
+        await AudioPlayer.getI().play(firstTextChild);
+    }
+    // Now select each box cell's text child and play them one by one
+    for (const box of boxCells) {
+        const text = box.querySelector('lido-text');
+        console.log('box text', text);
+        if (!text)
+            continue;
+        await AudioPlayer.getI().play(text);
     }
 };
 export const questionBoxAnimation = async (element, value) => {
@@ -1232,15 +1250,6 @@ export const questionBoxAnimation = async (element, value) => {
         const dropVal = dropEl.getAttribute("value");
         if (dropVal && dropEl.innerText.trim() === "?") {
             dropEl.innerText = dropVal;
-            if (dropElements.length > 1 && check == false) {
-                if (window.innerWidth > window.innerHeight) {
-                    dropEl.style.marginRight = "-45px";
-                }
-                else {
-                    dropEl.style.marginRight = "-65px";
-                }
-                check = true;
-            }
         }
     });
 };
@@ -1250,9 +1259,9 @@ export const SumTogetherAnimation = async (element, value) => {
     if (!value)
         return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
-    const TopRow = Array.from(element.children)[1];
-    const questionRow = Array.from(element.children)[2];
-    const optionRow = Array.from(element.children)[3];
+    const TopRow = Array.from(element.children)[2];
+    const questionRow = Array.from(element.children)[3];
+    const optionRow = Array.from(element.children)[4];
     if (!TopRow || !questionRow || !optionRow)
         return;
     const topRowChildren = Array.from(TopRow.children);

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

@@ -4,6 +4,7 @@ import { LidoContainer, SelectedValuesKey } from "../constants";
 import { dispatchClickEvent } from "../customEvents";
 import tinycolor from "tinycolor2";
 import { setDraggingDisabled } from "./dragDropHandler";
+import { highlightElement } from "./highlightHandler";
 export function onTouchListenerForOnTouch(element) {
     if (!element)
         return;
@@ -104,6 +105,7 @@ export function addClickListenerForClickType(element) {
             if (!isInsideCalculator) {
                 storingEachActivityScore(isCorrect);
             }
+            highlightElement();
             handleShowCheck();
             return;
         }

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

@@ -3,7 +3,7 @@ import { updateBalanceOnDrop } from "./lidoBalanceHandler";
 import { AudioPlayer } from "../audioPlayer";
 import { DropLength, SelectedValuesKey, DropMode, DropToAttr, DropTimeAttr, LidoContainer, DropAction, } from "../constants";
 import { dispatchElementDropEvent } from "../customEvents";
-import { removeHighlight } from "./highlightHandler";
+import { highlightElement, removeHighlight } from "./highlightHandler";
 import { dragDropAnimation } from "./animationHandler";
 export function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
@@ -218,8 +218,8 @@ export function enableDraggingWithScaling(element) {
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                     if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        otherElement.style.border = ''; // Reset border
-                        otherElement.style.backgroundColor = 'transparent'; // Reset background color
+                        // otherElement.style.border = ''; // Reset border
+                        // otherElement.style.backgroundColor = 'transparent'; // Reset background color
                     }
                     if (otherElement.tagName.toLowerCase() === 'lido-image') {
                         otherElement.style.opacity = '0';
@@ -228,8 +228,8 @@ export function enableDraggingWithScaling(element) {
             }
             else {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.border = ''; // Reset border
-                    otherElement.style.backgroundColor = ''; // Reset background color
+                    // otherElement.style.border = ''; // Reset border
+                    // otherElement.style.backgroundColor = ''; // Reset background color
                 }
                 if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                     otherElement.style.opacity = '1';
@@ -239,8 +239,8 @@ export function enableDraggingWithScaling(element) {
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
             if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') {
-                mostOverlappedElement.style.border = '2px dashed #ff0000'; // Red dashed border
-                mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
+                // mostOverlappedElement.style.border = '2px dashed #ff0000'; // Red dashed border
+                // mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
             }
             else {
                 if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
@@ -278,8 +278,8 @@ export function enableDraggingWithScaling(element) {
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                         if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                            otherElement.style.border = ''; // Reset border
-                            otherElement.style.backgroundColor = 'transparent'; // Reset background color
+                            // otherElement.style.border = ''; // Reset border
+                            // otherElement.style.backgroundColor = 'transparent'; // Reset background color
                         }
                         else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
@@ -291,8 +291,8 @@ export function enableDraggingWithScaling(element) {
                 }
                 else {
                     if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        otherElement.style.border = ''; // Reset border
-                        otherElement.style.backgroundColor = ''; // Reset background color
+                        // otherElement.style.border = ''; // Reset border
+                        // otherElement.style.backgroundColor = ''; // Reset background color
                     }
                     if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                         otherElement.style.opacity = '1';
@@ -441,6 +441,7 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
         let prevDropItem = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === currentDrop);
         if (prevDropItem) {
             prevDropItem.isFull = false;
+            highlightElement();
             // container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
             const dropEl = document.getElementById(prevDropItem.drop);
             if (dropEl) {
@@ -473,7 +474,7 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.backgroundColor = 'transparent'; // Reset background color
+                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color
                 }
                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                     otherElement.style.opacity = '0';
@@ -483,7 +484,7 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
         }
         else {
             if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                otherElement.style.backgroundColor = 'transparent'; // Reset background color
+                // otherElement.style.backgroundColor = 'transparent'; // Reset background color
             }
             if (otherElement.tagName.toLowerCase() === 'lido-image') {
                 otherElement.style.opacity = '1';
@@ -492,6 +493,7 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
         }
     });
     handleShowCheck();
+    highlightElement();
 }
 export async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -606,6 +608,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
             if (isAllowOnlyOneDrop && isisFull) {
                 isisFull.isFull = true;
                 dropElement.setAttribute('is-full', 'true');
+                highlightElement();
             }
             else {
                 console.warn('No matching drop item found for', dropElement);
@@ -650,8 +653,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
                         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                    otherElement.style.border = ''; // Reset border
-                                    otherElement.style.backgroundColor = 'transparent'; // Reset background color
+                                    // otherElement.style.border = ''; // Reset border
+                                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color
                                 }
                                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                                     otherElement.style.opacity = '0';
@@ -660,8 +663,8 @@ export async function onElementDropComplete(dragElement, dropElement) {
                         }
                         else {
                             if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                otherElement.style.border = ''; // Reset border
-                                otherElement.style.backgroundColor = ''; // Reset background color
+                                // otherElement.style.border = ''; // Reset border
+                                // otherElement.style.backgroundColor = ''; // Reset background color
                             }
                             if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                                 otherElement.style.opacity = '1';
@@ -721,6 +724,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    highlightElement();
     await onActivityComplete(dragElement, dropElement);
 }
 export function updateDropBorder(element) {
@@ -786,10 +790,10 @@ export async function onClickDropOrDragElement(element, type) {
     `;
         document.head.appendChild(style);
     }
-    element === null || element === void 0 ? void 0 : element.classList.add('highlight');
+    element === null || element === void 0 ? void 0 : element.classList.add('highlight-element');
     element.ariaPressed = 'true';
-    const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight");
-    const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight");
+    const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
+    const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
     if (!selectedDropElement) {
         onClickDragElement(element);
     }

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

@@ -1,4 +1,6 @@
-import { executeActions } from "../utils";
+import { LidoContainer } from "../constants";
+import { countOfMistakes, executeActions } from "../utils";
+import { buildDropHasDragFromDOM } from "./dragDropHandler";
 export function showWrongAnswerAnimation(elements) {
     const styleId = '#wrong-answer-animation-style';
     executeActions("tryAgain.speak='true'", document.querySelector('#tryAgain'));
@@ -45,7 +47,7 @@ export function showWrongAnswerAnimation(elements) {
     });
 }
 export function removeHighlight(element) {
-    element.classList.remove('highlight');
+    element.classList.remove('highlight-element');
     element.ariaPressed = 'false';
 }
 // Function to highlight the speaking element
@@ -101,3 +103,49 @@ export function stopHighlightForSpeakingElement(element) {
     // element.style.boxShadow = '';
     // element.style.border = '';
 }
+export function highlightElement() {
+    const container = document.querySelector(LidoContainer);
+    if (!container)
+        return;
+    const dropElements = buildDropHasDragFromDOM();
+    let firstFalse = Object.values(dropElements).find(item => !item.isFull);
+    if (firstFalse) {
+        const dropEls = container.querySelectorAll(`[type="drop"]`);
+        dropEls.forEach(dropEl => {
+            dropEl.classList.remove('highlight-element');
+        });
+        const dropEle = container.querySelector(`#${firstFalse.drop}`);
+        if (dropEle) {
+            dropEle.classList.add('highlight-element');
+        }
+        // Highlight corresponding drag elements if mistakes are more than 2
+        const dragElements = container.querySelectorAll(`[type="drag"]`);
+        if (countOfMistakes > 2) {
+            dragElements.forEach(dragEl => {
+                dragEl.classList.remove('highlight-element');
+                if (dragEl.getAttribute('value') === dropEle.getAttribute('value')) {
+                    dragEl.classList.add('highlight-element');
+                    dragEl.classList.remove('drag-element');
+                }
+            });
+        }
+        else {
+            dragElements.forEach(dragEl => {
+                dragEl.classList.remove('highlight-element');
+                dragEl.classList.add('drag-element');
+            });
+        }
+    }
+    else {
+        if (countOfMistakes <= 2)
+            return;
+        const clickTemplate = container.querySelectorAll("[type='click']");
+        clickTemplate.forEach(clickEl => {
+            if (clickEl.getAttribute('value') === container.getAttribute('objective')) {
+                if (!clickEl.classList.contains('highlight-element')) {
+                    clickEl.classList.add('highlight-element');
+                }
+            }
+        });
+    }
+}

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 null;
+        return 0;
     if (operation === "count") {
         return elements.length;
     }
@@ -46,17 +46,18 @@ 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 = balanceEl.leftVal;
-    const rightVal = balanceEl.rightVal;
+    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 hasLeft = !isNaN(leftVal);
     const hasRight = !isNaN(rightVal);
-    if (leftVal == null || rightVal == null) {
+    if (!hasLeft || !hasRight) {
         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-0712a27e.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3513b1f3.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-0a41b2f8.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-99fcbae4.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-21852d55.js';
+import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-5eeaccab.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-c4739621.js';
+import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-aff68c41.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-882b291d.js';
+import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-ad0f335e.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-f3bc4577.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-33b83222.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-eab0ebb7.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-f9426cbe.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-d1b5079b.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-5c990168.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-480f708a.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-6819005f.js';
 
 const LidoFlashCard = LidoFlash;
 const defineCustomElement = defineCustomElement$1;