lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

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

@@ -26,12 +26,11 @@ export const OrderTractor = {
     },
 };
 function getContainerXml(args) {
-    // ${args.answer1, args.answer2, args.answer3, args.answer4, args.answer5}
     return `
     <main>
 	<lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${[args.answer1, args.answer2, args.answer3, args.answer4, args.answer5].join(',')}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2,#drop3,#drop4,#drop5{border: none !important;}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'; this.sleep='1000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
 				<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.50px,portrait.10px" y="landscape.120px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.animation='rightToPlace 2.5s linear';">
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.110px,portrait.10px" y="landscape.80px,portrait.230px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="this.animation='rightToPlace 2.5s linear';">
 				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">
 				</lido-avatar>
 		</lido-cell>
@@ -44,7 +43,7 @@ function getContainerXml(args) {
 				<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
 			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.0px -36px 0px -130px,portrait.0px 10px 0px 30px"  >
 
-				<lido-image visible="true" id="drop1" tab-index="1" type="drop" value="${args.answer1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" id="drop1" tab-index="1" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" value="${args.answer1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
@@ -56,7 +55,7 @@ function getContainerXml(args) {
 
 			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.30px -31px 0px -198px,portrait.20px 10px 0px -40px" padding="0px" >
 
-				<lido-image visible="true" id="drop2" tab-index="2" type="drop" value="${args.answer2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" id="drop2" tab-index="2" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" value="${args.answer2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
@@ -67,7 +66,7 @@ function getContainerXml(args) {
 
 			<lido-cell visible="true" layout="col" bg-color="transparent" margin=" landscape.50px -44px 0px -205px,portrait.40px 0px 0px -40px" >
 
-				<lido-image visible="true" id="drop3" tab-index="3" type="drop" value="${args.answer3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" id="drop3" tab-index="3" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" value="${args.answer3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
 				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px 0px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
@@ -78,7 +77,7 @@ function getContainerXml(args) {
 
 			<lido-cell visible="true" layout="col" bg-color="transparent" margin="landscape.70px 0px 0px -207px,portrait.60px 0px 0px -40px" >
 
-				<lido-image visible="true" id="drop4" tab-index="4" type="drop" value="${args.answer4}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png"  margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px"
+				<lido-image visible="true" id="drop4" tab-index="4" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" value="${args.answer4}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png"  margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px"
 				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
 				width="landscape.200px,portrait.160px" background="transparent"></lido-image>
@@ -89,7 +88,7 @@ function getContainerXml(args) {
 
 			<lido-cell visible="true" layout="col" bg-color="transparent" padding="0" margin="landscape.90px 0px 0px -238px,portrait.80px 0px 0px -26px" >
 
-				<lido-image visible="true" id="drop5" tab-index="5" type="drop" value="${args.answer5}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
+				<lido-image visible="true" id="drop5" tab-index="5" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'" value="${args.answer5}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/box_answer_soundtrain_trans.png" margin="landscape.200px 0px -90px 0px,portrait.50px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_upper.png" margin="landscape.-5px 0px 0px 0px,portrait.-70px 0px 0px 0px"  
 		        width="landscape.200px,portrait.160px" background="transparent"></lido-image>
 				<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/trolly_drop_soundtrain_base%20(1).png" margin="landscape.-175px 0px -150px 0px,portrait.-140px 0px 0px 0px" width="landscape.200px,portrait.160px" background="transparent"></lido-image>

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

@@ -0,0 +1,158 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/questionBoard',
+    argTypes: {
+        questionBoardImage: { control: 'file', name: 'Question Board Image URL', multiple: true },
+        questionBoardText: { control: 'text', name: 'Question Board Text' },
+        backgroundImagePlusSign1: { control: 'file', name: 'Background Image 1 URL for (+,- sign)', multiple: true },
+        backgroundImagePlusSign2: { control: 'file', name: 'Background Image 2 URL for (+,- sign)', multiple: true },
+        backgroundImageMultiplicationSign: { control: 'file', name: 'Background Image URL for (x sign)', multiple: true },
+        expressionText: { control: 'text', name: 'Expression Text' },
+        options: { control: 'object', name: 'Options' },
+        optionText: { control: 'text', name: 'Option Text' },
+        objective: { control: 'text', name: 'Objective', description: 'Objective to achieve the task. (E.g. 5)' },
+    },
+    args: {
+        questionBoardImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/question-board/wordwindow_frame_question.png'],
+        questionBoardText: 'The library has 5 more tables than the school office. The school office has 2 tables. How many tables does the library have?',
+        backgroundImagePlusSign1: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Categorize/insect3.png'],
+        backgroundImagePlusSign2: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Categorize/insect3.png'],
+        backgroundImageMultiplicationSign: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Categorize/insect3.png'],
+        expressionText: '5 + 2 = 7',
+        options: [5, 7, 12, 18],
+        optionText: 'tables',
+        objective: '7',
+    }
+};
+export default meta;
+export const QuestionBoard = {
+    args: {
+        questionBoardText: "The library has 5 more tables than the school office. The school office has 2 tables. How many tables does the library have?",
+        optionText: "tables",
+        options: [5, 7, 12, 18]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+const parseExpression = (expressionText) => {
+    // Clean up input
+    const text = expressionText.trim();
+    console.log('Expression Text:', text);
+    const [left, right] = text.split('=').map(part => part.trim());
+    console.log('Left:', left);
+    console.log('Right:', right);
+    // Determine which side contains the result
+    const isLeftResult = right.trim().includes('+') || right.trim().includes('-') || right.trim().includes('x') || right.trim().includes('X') || right.trim().includes('*');
+    const isRightResult = left.trim().includes('+') || left.trim().includes('-') || left.trim().includes('x') || left.trim().includes('X') || left.trim().includes('*');
+    console.log('isLeftResult:', isLeftResult);
+    console.log('isRightResult:', isRightResult);
+    const result = isLeftResult ? left.trim().replace(/[<>]/g, '') : isRightResult ? right.trim().replace(/[<>]/g, '') : '';
+    console.log('Result:', result);
+    if (isLeftResult) {
+        const operatorMatch = right.match(/(\+|-|x|X|\*)/);
+        const operator = operatorMatch ? operatorMatch[1] : '';
+        console.log('Operator:', operator);
+        const [rawNum1, rawNum2] = right.split(/(\+|-|x|X|\*)/).filter(v => !['+', '-', 'x', 'X', '*'].includes(v)).map(v => v.trim());
+        const num1 = rawNum1 ? rawNum1.replace(/[<>]/g, '').trim() : '';
+        const num2 = rawNum2 ? rawNum2.replace(/[<>]/g, '').trim() : '';
+        console.log('Num1:', num1);
+        console.log('Num2:', num2);
+        return { num1, num2, operator, result };
+    }
+    if (isRightResult) {
+        const operatorMatch = left.match(/(\+|-|x|X|\*)/);
+        const operator = operatorMatch ? operatorMatch[1] : '';
+        console.log('Operator:', operator);
+        const [rawNum1, rawNum2] = left.split(/(\+|-|x|X|\*)/).filter(v => !['+', '-', 'x', 'X', '*'].includes(v)).map(v => v.trim());
+        const num1 = rawNum1 ? rawNum1.replace(/[<>]/g, '').trim() : '';
+        const num2 = rawNum2 ? rawNum2.replace(/[<>]/g, '').trim() : '';
+        console.log('Num1:', num1);
+        console.log('Num2:', num2);
+        return { num1, num2, operator, result };
+    }
+};
+function getContainerXml(args) {
+    const questionBoardImage = args.questionBoardImage[0];
+    const questionBoardText = args.questionBoardText;
+    const backgroundImagePlusSign1 = args.backgroundImagePlusSign1[0];
+    const backgroundImagePlusSign2 = args.backgroundImagePlusSign2[0];
+    const backgroundImageMultiplicationSign = args.backgroundImageMultiplicationSign[0];
+    const expressionText = args.expressionText;
+    const optionText = args.optionText;
+    const objective = args.objective;
+    const options = args.options;
+    const optionsCell = options.map((option) => {
+        return `
+        <lido-text id="${option}" tab-index="${option}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+            <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
+            </lido-text>
+        </lido-text>
+        `;
+    }).join('');
+    const plus_minus_animation = expressionText.includes('+') || expressionText.includes('-');
+    const multiplication_animation = expressionText.includes('X') || expressionText.includes('x') || expressionText.includes('*');
+    const expressionAnimation = plus_minus_animation ? `
+        background-animation-plus-minus-1.opacity='1'; background-animation-plus-minus-2.opacity='1';
+    ` : multiplication_animation ? `
+        background-animation-multiplication.opacity='1';
+    ` : ``;
+    console.log('Expression Animation: ', expressionAnimation);
+    const { num1, num2, operator, result } = parseExpression(expressionText);
+    // Escape angular brackets for invisible text
+    const escapedExpressionText = expressionText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    let val1 = parseInt(num1) <= 10 ? '1' : '2';
+    let val2 = parseInt(num2) <= 10 ? '1' : '2';
+    console.log('Expression Text: ', escapedExpressionText);
+    return `
+        <main>
+            	<lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1"  value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" >
+
+                    <!-- Chimple Avatar -->
+                    <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='2';">
+                        <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                        </lido-avatar>
+                    </lido-cell>
+
+                    <!-- Question Section -->
+                    <lido-cell layout="pos" id="pos2" disableEdit="true" value="pos2" height="landscape.850px, portrait.710px" width="landscape.1225px, portrait.900px" x="landscape.155px, portrait.0px" y="landscape.60px, portrait.85px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                        <lido-image visible="true" id="question-board-image" width="100%" height="67%" bg-color="transparent" src="${questionBoardImage}" altText="{questionBoardImage}"  onEntry="">
+                        </lido-image>
+                    </lido-cell>
+
+                    <lido-text visible="false" id="txt1" audio="" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
+                    </lido-text>
+
+                    <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
+                        <lido-text visible="true" id="question-board-text" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Options Section -->
+                    <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.95%, portrait.75%" bg-Color="transparent" margin="landscape.625px 0px 0px -70px,portrait.50px 0px 130px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.175px,portrait.65px">
+                        ${optionsCell}
+                    </lido-cell>
+                    
+                    <!-- Invisible Text for Animation -->
+                    <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
+                        <lido-text id="txt2" audio="" tab-index="6" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px"  bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Background animation -->
+                    <lido-cell layout="pos" id="background-animation-plus-minus-1" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.-110px,portrait.-80px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val1}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num1}" matrix-image="${backgroundImagePlusSign1}"></lido-math-matrix>
+                    </lido-cell>
+                    <lido-cell layout="pos" id="background-animation-plus-minus-2" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.130px, portrait.75px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num2}" matrix-image="${backgroundImagePlusSign2}"></lido-math-matrix>
+                    </lido-cell>
+
+                    <lido-cell layout="pos" id="background-animation-multiplication" value="pos5" height="600px" width="600px" x="landscape.530px, portrait.125px" y="landscape.50px, portrait.15px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="${num1}" cols="${num2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${result}" matrix-image="${backgroundImageMultiplicationSign}"></lido-math-matrix>
+                    </lido-cell>
+
+                </lido-container>
+        </main>
+    `;
+}

package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js

@@ -0,0 +1,102 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/SequenceBox1',
+    argTypes: {
+        missingNumber: { control: 'text', name: 'missing number' },
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        number4: { control: 'text', name: 'Number 4' },
+        options: { control: 'object', name: 'digits' },
+    },
+    args: {
+        missingNumber: '84',
+        number1: '80',
+        number2: '82',
+        number4: '86',
+        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+    },
+};
+export default meta;
+export const SequenceBox = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const missingNumber = args.missingNumber;
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const number4 = args.number4;
+    const options = args.options;
+    const objectiveString = `${missingNumber.split('').join(',')}`;
+    const objectiveArray = missingNumber.split('');
+    const dropCells = objectiveArray
+        .map((cell, i) => `
+        <lido-text id="${cell}" tab-index="${i}" disable-edit="true" height="landscape.165px, portrait.125px" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+        </lido-text>
+      `)
+        .join('\n');
+    const dragCells = options
+        .map((digit, i) => `
+      <lido-text id="${i}" tab-index="${i}" height="landscape.170px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
+      </lido-text>
+    `)
+        .join('\n');
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" show-drop-border="false"  is-allow-only-correct="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+              <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+              </lido-avatar>
+              <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
+              </lido-image>
+            </lido-cell>
+
+            <!-- drop cells -->
+            <lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
+
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  ${dropCells}
+                </lido-image>
+              </lido-cell>
+              <lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+                </lido-image>
+                <lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+                  <lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+                  </lido-text>
+                </lido-image>
+              </lido-cell>
+            </lido-cell>
+
+            <!-- answers drag cell -->
+            <lido-cell layout="landscape.wrap, portrait.wrap" aria-hidden="true" visible="true" height="landscape.40%,portrait.40%" width="95%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.55px 0px 125px 0px" onEntry="this.z-index='1'; this.grid-template-columns='repeat(auto-fill, minmax(140px, auto))'; this.gridTemplateRows='repeat(auto-fit, 145px)'; this.flexWrap='wrap'; this.justify-content='center';" gap="5px">
+              ${dragCells}
+            </lido-cell>
+          </lido-container>
+
+    </main>
+  `;
+}

package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js

@@ -0,0 +1,94 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/SequenceBox2',
+    argTypes: {
+        missingNumber: { control: 'text', name: 'missing number' },
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        number4: { control: 'text', name: 'Number 4' },
+        options: { control: 'object', name: 'digits' },
+    },
+    args: {
+        missingNumber: '555',
+        number1: '535',
+        number2: '545',
+        number4: '565',
+        options: ['777', '666', '555', '444'],
+    },
+};
+export default meta;
+export const SequenceBox = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const missingNumber = args.missingNumber;
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const number4 = args.number4;
+    const options = args.options;
+    const dragCells = options
+        .map((digit, i) => `
+        <lido-text id="${i}" tab-index="${i}" height="landscape.130px, portrait.130px" width="landscape.225px, portrait.200px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFF4CD"  onEntry="this.fontWeight='800'; this.borderRadius='10px';" border-image="">
+        </lido-text>
+    `)
+        .join('\n');
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${missingNumber}" tab-index="1" show-drop-border="false" is-continue-on-correct="true" is-allow-only-correct="true" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='20000';" drop-action="infinite-drop" show-check="false">
+
+			<!-- Chimple Avatar -->
+			<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.600px, portrait.230px" y="landscape.45px, portrait.1010px" ariaHidden="true" z="1" bgColor="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+				</lido-avatar>
+				<lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" altText="{shadowImage}">
+				</lido-image>
+			</lido-cell>
+
+			<!-- drop cells -->
+			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.45%,portrait.40%" width="landscape.85%, portrait.95%" bg-Color="transparent" margin="landscape.385px 0px -545px 0px,portrait.55px 0px -73px 0px" onEntry="this.z-index='1'; this.boxAnimationOneByOne='true';">
+
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="20" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px">
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image0" disable-edit="true" tab-index="21" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number1}" tab-index="${number1}" disable-edit="true" height="landscape.130px, portrait.100px" width="200px" visible="true" value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="23" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image1" disable-edit="true" tab-index="24" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number2}" tab-index="${number2}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="this.boxAnimate='true';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="26" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image2" disable-edit="true" tab-index="27" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${missingNumber}" tab-index="${missingNumber}" disable-edit="true" height="landscape.155px, portrait.125px" width="295px" visible="true" value="${missingNumber}" string="?" font-family="'Baloo Bhai 2'" font-color="#FFC805" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px';';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+				<lido-cell layout="col" visible="true" type="box" height="landscape.90%,portrait.41%" width="20%" bg-Color="transparent" onEntry="this.z-index='1';">
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="30" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_top1.png" height="landscape.150px, portrait.150px" width="landscape.315px, portrait.200px" margin="landscape.-180px 0px -525px 0px, portrait.-200px 0px -715px 0px" >
+					</lido-image>
+					<lido-image is-slice="true" bg-color="transparent" id="drop-image3" disable-edit="true" tab-index="31" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/tressure_bottom1.png" height="landscape.250px, portrait.200px" width="landscape.315px, portrait.200px" margin="landscape.0px 0px -145px 0px, portrait.0px 0px -275px 0px" >
+						<lido-text id="${number4}" tab-index="${number4}" disable-edit="true" height="landscape.130px, portrait.100px" width="125px" visible="true" value="${number4}" string="${number4}" font-family="'Baloo Bhai 2'" font-color="#FFC805" font-size="landscape.130px, portrait.100px"  bg-color="transparent"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.margin-top='65px'; this.margin-right='15px';">
+						</lido-text>
+					</lido-image>
+				</lido-cell>
+			</lido-cell>
+
+			<!-- answers drag cell -->
+			<lido-cell layout="row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.60%, portarit.90%" bg-Color="transparent" margin="landscape.530px 0px 0px 0px,portrait.-135px 0px 290px 0px" onEntry="this.z-index='1';" gap="landscape.5px, portrait.10px">
+				${dragCells}
+			</lido-cell>
+		</lido-container>
+    </main>
+  `;
+}