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

package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js

@@ -0,0 +1,184 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/shapePair',
+    argTypes: {
+        question: { control: 'text' },
+        questionAudio: { control: {
+                type: 'file',
+                accept: '.mp3, .wav, .ogg, audio/*'
+            } },
+        dropimg1: { control: 'file' },
+        droptext1: { control: 'text' },
+        dropimg2: { control: 'file' },
+        droptext2: { control: 'text' },
+        dropimg3: { control: 'file' },
+        droptext3: { control: 'text' },
+        dropimg4: { control: 'file' },
+        droptext4: { control: 'text' },
+        dropimg5: { control: 'file' },
+        droptext5: { control: 'text' },
+        dragimg1: { control: 'file' },
+        dragtext1: { control: 'text' },
+        dragimg2: { control: 'file' },
+        dragtext2: { control: 'text' },
+        dragimg3: { control: 'file' },
+        dragtext3: { control: 'text' },
+        dragimg4: { control: 'file' },
+        dragtext4: { control: 'text' },
+        dragimg5: { control: 'file' },
+        dragtext5: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        correct1: { control: 'text' },
+        correct2: { control: 'text' },
+        correct3: { control: 'text' },
+        correct4: { control: 'text' },
+        correct5: { control: 'text' },
+    },
+};
+export default meta;
+export const NumberPair = {
+    args: {
+        question: 'Drag the cards with the same shape together.',
+        dropimg1: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_triangle_level1_large.png',
+        droptext1: '',
+        dropimg2: '',
+        droptext2: 'rectangle',
+        dropimg3: '',
+        droptext3: 'circle',
+        dropimg4: '',
+        droptext4: 'square',
+        dragimg1: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_triangle_level1_large.png',
+        dragtext1: '',
+        dragimg2: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_rectangle_1_large.png',
+        dragtext2: '',
+        dragimg3: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_circle_1_large.png',
+        dragtext3: '',
+        dragimg4: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/matchinggame_square_1_large.png',
+        dragtext4: "",
+        correct1: 'triangle',
+        correct2: 'rectangle',
+        correct3: 'circle',
+        correct4: 'square',
+        option1: 'triangle',
+        option2: 'rectangle',
+        option3: 'circle',
+        option4: 'square',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation" custom-style="#heading,#drag1,#drag2,#drag3,#drag4,#drag5,#drag6,#drag7,#drop1,#drop2,#drop3,#drop4,#drop5,#drop6,#drop7{box-shadow: none !important;}">
+				<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
+				<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>
+			<!-- heading -->
+			<lido-text id="heading" audio="" width="landscape.auto,portrait.70%" tabIndex="20" visible="true" string="${args.question}" font-family="'Baloo Bhai 2'" fontColor="#323232" font-size="landscape.36px,portrait.36px" bg-Color="transparent" onEntry="this.padding='0px 45px';this.fontWeight='600';this.speak='true'"  margin="landscape.120px 0px -25px 0px, portrait.160px 0px -39px 0px">
+			</lido-text>
+		<lido-cell visible="true" flex-direction="landscape., portrait.row-reverse" bg-color="transparent" layout="portrait.row,landscape.col" width="100%" height="100%" onEntry="">
+			
+			<lido-cell visible="true" margin="20px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.50%,portrait.96%" width="landscape.100%,portrait.100%" onEntry="this.gap='10px';">
+				
+				${(args.dropimg1.length === 0 && args.droptext1.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image1" audio="" value="${args.correct1}" tab-index="1" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; this.borderRadius='8px';" 
+						>
+							${!args.dropimg1 || args.dropimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg1}"></lido-image>`}
+
+							${!args.droptext1 || args.droptext1 === "" ? '' : `<lido-text id="drop1" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+							
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg2.length === 0 && args.droptext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell id="image2" class="boxShadow" audio="" value="${args.correct2}" tab-index="2" isAllowOnlyOneDrop="true" disable-edit="true" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="this.speak='true'">
+							${!args.dropimg2 || args.dropimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg2}"></lido-image>`}
+
+							${!args.droptext2 || args.droptext2 === "" ? '' : `<lido-text id="drop2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dropimg3.length === 0 && args.droptext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.50px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='5px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell type="drop" audio="" id="image3" tab-index="3" isAllowOnlyOneDrop="true" disable-edit="true" value="${args.correct3}" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" layout="col" visible="true" bg-Color="white" 
+						onEntry="this.padding='0px';this.borderRadius='8px';" onCorrect="this.speak='true'">
+							${!args.dropimg3 || args.dropimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg3}"></lido-image>`}
+
+							${!args.droptext3 || args.droptext3 === "" ? '' : `<lido-text id="drop3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+
+				${(args.dropimg4.length === 0 && args.droptext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='6px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell id="image4" audio="" value="${args.correct4}" isAllowOnlyOneDrop="true" disable-edit="true" tab-index="4" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drop" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.borderRadius='8px';"
+						onCorrect="this.speak='true'">
+							${!args.dropimg4 || args.dropimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dropimg4}"></lido-image>`}
+
+							${!args.droptext4 || args.droptext4 === "" ? '' : `<lido-text id="drop4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.droptext4}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+
+
+
+
+			<lido-cell visible="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" bg-color="transparent" layout="landscape.row,portrait.col" height="landscape.40%,portrait.96%" width="100%" onEntry="">
+				${(args.dragimg1.length === 0 && args.dragtext1.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent">
+						<lido-cell border-radius="8px" class="boxShadow" audio="" id="option1" value="${args.option1}" tab-index="6" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg1 || args.dragimg1.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg1}"></lido-image>`}
+
+							${!args.dragtext1 || args.dragtext1 === "" ? '' : `<lido-text id="drag1" class="boxShadow" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext1}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg2.length === 0 && args.dragtext2.length === 0) ? '' : `<lido-cell layout="row" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="">
+						<lido-cell border-radius="8px" audio="" id="option2" value="${args.option2}" tab-index="7" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';this.justifyContent='center'; ">
+							${!args.dragimg2 || args.dragimg2.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg2}"></lido-image>`}
+
+							${!args.dragtext2 || args.dragtext2 === "" ? '' : `<lido-text id="drag2" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext2}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg3.length === 0 && args.dragtext3.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option3" audio="" value="${args.option3}" tab-index="8" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px'; ">
+							${!args.dragimg3 || args.dragimg3.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg3}"></lido-image>`}
+
+							${!args.dragtext3 || args.dragtext3 === "" ? '' : `<lido-text id="drag3" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext3}" bg-Color="transparent" onEntry="this.fontWeight='600';" ></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+
+				${(args.dragimg4.length === 0 && args.dragtext4.length === 0) ? '' : `<lido-cell layout="row" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" visible="true" bg-color="transparent" height="landscape.100%,portrait.20%" width="landscape.20%,portrait.100%" onEntry="this.border-radius='2px';">
+					<lido-cell layout="random" visible="true" width="100%" height="100%" bg-color="transparent" onEntry="this.display='flex';">
+						<lido-cell border-radius="8px" id="option4" audio="" value="${args.option4}" tab-index="9" height="landscape.268px,portrait.240px" width="landscape.268px,portrait.240px" type="drag" layout="col" visible="true" bg-Color="white" onEntry="this.padding='0px';">
+							${!args.dragimg4 || args.dragimg4.length === 0 ? '' : `<lido-image border-radius="8px 8px 0px 0px" margin="0px 0px 0px 0px"  visible="true" width="landscape.126%,portrait.126%" height="landscape.100%,portrait.100%" bg-color="transparent" src="${args.dragimg4}"></lido-image>`}
+
+							${!args.dragtext4 || args.dragtext4 === "" ? '' : `<lido-text id="drag4" visible="true" height="100%" font-family="'Baloo Bhai 2'" font-size="landscape.60px,portrait.55px" string="${args.dragtext4}" bg-Color="transparent" onEntry="this.fontWeight='600';"></lido-text>`}
+						</lido-cell>
+					</lido-cell>
+				</lido-cell>`}
+			</lido-cell>
+		</lido-cell>
+	</lido-container>
+	</main>`;
+}

package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js

@@ -0,0 +1,213 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/shapeTractor',
+    argTypes: {
+        options: { control: 'object' },
+        blocks: { control: 'object' },
+    },
+};
+export default meta;
+export const ShapeTractor = {
+    args: {
+        blocks: [
+            [
+                { id: 'img1', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img2', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'img3', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img4', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'drop1', type: 'drop', value: 'rectangle' },
+                { id: 'drop2', type: 'drop', value: 'rhombus' }
+            ]
+        ],
+        options: [
+            { id: 'drg1', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+            { id: 'drg2', type: 'drag', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' },
+            { id: 'drg3', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' }
+        ]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+export const ShapeTractorOne = {
+    args: {
+        blocks: [
+            [
+                { id: 'drop1', type: 'drop', value: 'rectangle' },
+                { id: 'drop2', type: 'drop', value: 'rhombus' }
+            ],
+            [
+                { id: 'img1', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img2', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'img3', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img4', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ]
+        ],
+        options: [
+            { id: 'drg1', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+            { id: 'drg2', type: 'drag', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' },
+            { id: 'drg3', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' }
+        ]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+export const ShapeTractorTwo = {
+    args: {
+        blocks: [
+            [
+                { id: 'img1', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img2', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'drop1', type: 'drop', value: 'rectangle' },
+                { id: 'drop2', type: 'drop', value: 'rhombus' }
+            ],
+            [
+                { id: 'img3', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img4', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ]
+        ],
+        options: [
+            { id: 'drg1', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+            { id: 'drg2', type: 'drag', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' },
+            { id: 'drg3', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' }
+        ]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+export const ShapeTractorThree = {
+    args: {
+        blocks: [
+            [
+                { id: 'img1', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'drop2', type: 'drop', value: 'rhombus' }
+            ],
+            [
+                { id: 'drop1', type: 'drop', value: 'rectangle' },
+                { id: 'img2', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'img3', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img4', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ]
+        ],
+        options: [
+            { id: 'drg1', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+            { id: 'drg2', type: 'drag', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' },
+            { id: 'drg3', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' }
+        ]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+export const ShapeTractorFour = {
+    args: {
+        blocks: [
+            [
+                { id: 'drop1', type: 'drop', value: 'rectangle' },
+                { id: 'img2', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ],
+            [
+                { id: 'img1', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'drop2', type: 'drop', value: 'rhombus' }
+            ],
+            [
+                { id: 'img3', type: '', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+                { id: 'img4', type: '', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' }
+            ]
+        ],
+        options: [
+            { id: 'drg1', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' },
+            { id: 'drg2', type: 'drag', value: 'rhombus', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047094.png' },
+            { id: 'drg3', type: 'drag', value: 'rectangle', src: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/Group%2047093.png' }
+        ]
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function createLidoImage({ id, type, value, src, tabIndex }) {
+    const dropSrc = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/box_answer_soundtrain_trans.png";
+    const finalSrc = type === "drop" ? dropSrc : src || "";
+    return `
+    <lido-image
+      id="${id}"
+      ${tabIndex ? `tab-index="${tabIndex}"` : ""}
+      value="${value || ""}"
+      src="${finalSrc}"
+      visible="true"
+      type="${type || ""}"
+      width="landscape.140px,portrait.120px"
+      ${type === "drop" ? `onCorrect="lido-avatar.avatarAnimate='Success'" onInCorrect="lido-avatar.avatarAnimate='Fail'"` : ""}
+    ></lido-image>
+  `;
+}
+function getContainerXml({ blocks, options }) {
+    let tabCounter = 1;
+    const dropValues = blocks
+        .flat()
+        .filter(b => b.type === 'drop')
+        .map(b => b.value)
+        .join(',');
+    const truckBlocks = blocks
+        .map((block, i) => {
+        const images = block.map(img => createLidoImage(Object.assign(Object.assign({}, img), { tabIndex: tabCounter++ }))).join("");
+        return `
+        <lido-cell id="block${i + 1}" visible="true" width="landscape.400px,portrait.250px" layout="col" bg-color="transparent" margin="landscape.0px 0px 0px -65px,portrait.97px 0px 0px 0px"  >
+				<lido-cell visible="true" layout="row" bg-color="transparent" margin="landscape.180px 0px -130px 0px,portrait.95px 0px 0px 0px" gap="15px">
+				  ${images}
+          </lido-cell>
+          <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/trolly_drop_soundtrain_2block.png" width="landscape.350px,portrait.350"></lido-image>
+        </lido-cell>
+      `;
+    })
+        .join("");
+    const optionCells = options
+        .map(option => createLidoImage(Object.assign(Object.assign({}, option), { tabIndex: tabCounter++ })))
+        .join("");
+    return `
+    <main>
+     <lido-container id="lido-container" is-allow-only-correct="true" show-Check="false" is-Continue-On-Correct="true" after-Drop="false" objective="${dropValues}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/Spring.png" custom-style="#drop1, #drop2{border: none !important;}"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; answer.visible='false';  lido-avatar.animation='placeToLeft 2.5s linear'; answer.animation='placeToLeft 2.5s linear';  truck.animation='placeToLeft 2.5s linear'; trainAudio.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail';" >
+			<!-- Chimple Avatar -->
+		<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>
+
+        <lido-cell visible="true" id="truck" layout="row" height="landscape.60%, portrait.60%" width="landscape.100%, portrait.100%" bg-color="transparent"  onEntry=" this.animation='rightToPlace 2.5s linear';" onCorrect="" >
+		  	<lido-text id="question" visible="false" string="complete the pattern using the blocks given below" value="complete the pattern using the blocks given below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
+			<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="row" bg-color="transparent" gap="0px"   margin="landscape.220px 0px 0px 0px,portrait.977px 0px 0px -200px">
+			
+			<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Shape%20Tractor/truck_bg_soundtrain.png" width="landscape.220px,portrait.250px" padding="0px" margin="72px 0px 0px 0px"></lido-image>
+			${truckBlocks}
+          </lido-cell>
+        </lido-cell>
+
+        <lido-cell visible="true" id="answer" layout="row" height="landscape.40%,portrait.40%" width="landscape.50%,portrait.50%" bg-color="transparent" onEntry="this.alignItems='center';this.justify-content='space-around';this.animation='rightToPlace 2.5s linear'">
+          ${optionCells}
+        </lido-cell>
+      </lido-container>
+
+      
+     
+    </main>
+  `;
+}

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

@@ -0,0 +1,109 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/sumTogether',
+    argTypes: {
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        answer: { control: 'text', name: 'answer' },
+        sign: { control: 'text', name: 'sign', multiple: true },
+        options: { control: 'object', name: 'digits' },
+    },
+    args: {
+        number1: '10',
+        number2: '9',
+        answer: '1',
+        sign: '-',
+        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+    },
+};
+export default meta;
+export const SumTogether = {
+    args: {
+        number1: "10",
+        number2: "9",
+        answer: "1",
+        sign: "-"
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    }
+};
+function getContainerXml(args) {
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const answer = args.answer;
+    const sign = args.sign;
+    const options = args.options;
+    const objective = answer;
+    let tabCounter = 2;
+    const numberMap = {
+        1: "one",
+        2: "two",
+        3: "three",
+        4: "four",
+        5: "five",
+        6: "six",
+        7: "seven",
+        8: "eight",
+        9: "nine",
+        10: "ten",
+    };
+    const topImageCells = options
+        .map((cell, i) => {
+        const val = numberMap[i + 1];
+        return `
+      <lido-image id="image-${i}" visible="true" width="105px" height="200px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/SumTogether/sum_together_${val}.png" onEntry="this.opacity='0';">
+      </lido-image>
+    `;
+    }).join('\n');
+    const dragCells = options
+        .map((digit, i) => {
+        return `
+        <lido-text id="option-${i}" tab-index="${tabCounter++}" type="drag" height="195px" width="120px" visible="true"   value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="white" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+        </lido-text>
+        `;
+    }).join('\n');
+    return `
+    <main>
+        
+        <lido-container id="sum-together" disable-speak="true" show-drop-border="false" objective="${objective}" tab-index="1"  value="questionBoard" bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.sumTogetherAnimation='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" showCheck="false" isAllowOnlyCorrect="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.-80px, portrait.195px" y="landscape.175px, portrait.1085px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='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-cell>
+
+            <!-- top section -->
+            <lido-cell layout="landscape.row,portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.100%, portrait.106%" bg-Color="transparent" margin="landscape.100px 0px 0px 0px,portrait.-130px -65px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.35px,portrait.5px">
+                ${topImageCells}
+            </lido-cell>
+
+            <!-- question row-->
+            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.185px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.90px,portrait.40px">
+                <lido-text id="${number1}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="operator-${sign}" tab-index="${tabCounter++}" height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="195px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="${number2}" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="equal" tab-index="${tabCounter++}" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="">
+                </lido-text>
+                <lido-text id="${answer}" tab-index="${tabCounter++}" type="drop" height="245px" width="175px" visible="true"  value="${answer}" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="150px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='0';" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/sequence-box/card-slot_empty.png">
+                </lido-text>
+            </lido-cell>
+
+
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='0';" gap="landscape.20px,portrait.5px">
+                ${dragCells}
+            </lido-cell>
+
+            <!-- speaking element-->
+            <lido-text id="speak-text" tab-index="5" height="100%" width="100%" visible="false" string="solve the problem by counting the teddys above and drag the correct answer" font-family="'Baloo Bhai 2'" font-color="red" font-size="75px"  bg-color="transparent" onInCorrect="" onEntry="this.opacity='0'; this.speak='true';" border-image="">
+            </lido-text>
+        </lido-container>
+    </main>
+  `;
+}

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/total',
+    argTypes: {
+        questionText: { control: 'text' },
+        images: { control: 'object' },
+        answer: { control: 'text' },
+    },
+};
+export default meta;
+export const total = {
+    args: {
+        questionText: 'How many??',
+        images: [
+            'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/total/stone_01.png',
+            'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/total/stone_02.png',
+            'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/total/stone_03.png',
+            'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/total/stone_04.png',
+            'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/total/stone_05.png',
+        ],
+        answer: '5',
+    },
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const margins = ['0px 100px 0px 0px', '0px 80px 0px 0px', '-80px -214px 0px 0px', '-66px 367px 0px 0px', '0px -180px 0px 0px',];
+    return `
+  <main>
+    <lido-container  visible="true"  id="lido-container"  onInCorrect="lido-avatar.avatarAnimate='Fail';"  onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='1000'; ${args.images.map((_, i) => `i${i + 1}.revealImageValue='true'; this.sleep='1000';`).join('')} this.sleep='2000';"
+    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" objective="${args.answer}" is-continue-on-correct="true" show-Check="false" >
+<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.37%, portrait.-4%" y="landscape.48%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+		</lido-avatar>
+	</lido-cell>
+
+      <!-- Main Layout -->
+      <lido-cell layout="landscape.row,portrait.col" visible="true" width="90%" height="90%" bg-color="transparent">
+        <!-- Left column: images -->
+        <lido-cell layout="col" visible="true" margin="landscape.0px 117px 0px -117px,portrait.0px" onEntry="this.animation='topToPlace 1.5s linear';" height="751px" width="500px" bg-color="transparent">
+          ${args.images
+        .map((img, i) => `
+              <lido-image id="i${i + 1}" value="${i + 1}" type="text" visible="true" src="${img}" height="120px" width="120px"  margin="${margins[i % margins.length]}" ></lido-image>`)
+        .join('')}
+        </lido-cell>
+
+        <!-- Right column: text + calculator -->
+        <lido-cell layout="col" visible="true" margin="landscape.0px,portrait.0px -184px 0px 0px" height="751px" width="500px" bg-color="transparent">
+          <lido-text visible="true" bg-color="#60DADA" height="100px" width="456px" margin="0px" string="${args.questionText}" onEntry="this.border='5px solid #029A9A'; this.border-radius='10px'; this.font-size='40px'; this.font-weight='600';"></lido-text>
+          <lido-calculator visible="true" height="650px" y="26px" width="456px" onEntry="this.position='relative';"></lido-calculator>
+        </lido-cell>
+      </lido-cell>
+    </lido-container>
+  </main>
+  `;
+}