lido-player 0.0.2-beta-18-dev → 0.0.2-beta-19-dev

package/dist/collection/stories/Templates/gridGame/grid-game.stories.js

@@ -38,62 +38,62 @@ export const DefaultGame = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Grid.png" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
-
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.591px, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="${args.avatarSrc}" alt-text="{chimpleCharacterRive}"></lido-avatar>
-	</lido-cell>
-
-	<lido-cell id="main-layout-wrapper" layout="landscape.row, portrait.col" width="100%" height="100%" visible="true" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignItems='center'; this.gap='20px'; this.padding='10px';">
-
-		<lido-cell id="game-board" width="landscape.50%, portrait.90%" height="landscape.60%, portrait.40%" aspectRatio="1" maxHeight="landscape.90vh, portrait.auto" maxWidth="portrait.90vw, landscape.auto" visible="true" bg-color="#F5D482" onEntry="this.display='flex'; this.flexDirection='column'; this.padding='15px'; this.gap='10px'; this.borderRadius='20px'; this.boxShadow='0 8px 16px rgba(0,0,0,0.1)';">
-
-			<!-- TOP ROW: Column Headers -->
-			<lido-cell id="top-row" flex="1" bg-color="transparent" onEntry="this.display='flex'; this.flex='0 0 15%';">
-				<lido-cell id="blank-space" width="5%" visible="true" onEntry="this.flex='0 0 15%';" bg-color="transparent"></lido-cell>
-				<lido-cell id="column-headers" width="85%" visible="true" flex="1" bg-color="transparent" padding-left="45%" onEntry="this.display='flex'; this.justifyContent='space-around'; this.alignItems='center'; this.margin-left='-9vh' this.gap='10vh';">
-					<lido-text string="${args.colHeader1Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)'; "></lido-text>
-					<lido-text string="${args.colHeader2Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)'; "></lido-text>
-					<lido-text string="${args.colHeader3Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
-				</lido-cell>
-			</lido-cell>
-
-			<!-- BOTTOM ROW: Row Labels and Drop Grid -->
-			<lido-cell id="bottom-row" flex="1" visible="true" bg-color="transparent" onEntry="this.display='flex'; this.flex='0 0 15%';">
-				<lido-cell id="row-labels" height="50vh" onEntry="this.display='flex'; this.flexDirection='column'; this.flex='0 0 15%'; this.justifyContent='space-around'; this.alignItems='center';" bg-color="transparent">
-					<lido-text string="${args.rowLabel1Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
-					<lido-text string="${args.rowLabel2Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
-					<lido-text string="${args.rowLabel3Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
-				</lido-cell>
-
-				<lido-cell id="drop-grid" flex="1" visible="true" width="100%" bg-color="#E7CFAA" onEntry="this.display='grid'; this.gridTemplateColumns='repeat(3, 1fr)'; this.gridTemplateRows='repeat(3, 1fr)'; this.gap='15px'; this.padding='15px'; this.borderRadius='10px';">
-					<lido-text id="drop_mug"  tab-index="1" visible="true" type="drop" value="${args.dropTarget1Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_mad" tab-index="2" visible="true" type="drop" value="${args.dropTarget2Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_mop" tab-index="3" visible="true" type="drop" value="${args.dropTarget3Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_chug" tab-index="4" visible="true" type="drop" value="${args.dropTarget4Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_chad" tab-index="5" visible="true" type="drop" value="${args.dropTarget5Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_chop" tabIndex="6" visible="true" type="drop" value="${args.dropTarget6Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_dug" tab-index="7" visible="true" type="drop" value="${args.dropTarget7Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_dad" tab-index="8" visible="true" type="drop" value="${args.dropTarget8Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-					<lido-text id="drop_dop" tab-index="9" visible="true" type="drop" value="${args.dropTarget9Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
-				</lido-cell>
-			</lido-cell>
-		</lido-cell>
-
-		<!-- Draggable Words Container -->
-		<lido-cell id="draggable-area" visible="true" bg-color="transparent" width="landscape.12%, portrait.43%" height="landscape.90vh, portrait.33%" overflow="hidden" onEntry="this.display='flex'; this.flexWrap='wrap'; this.justifyContent='center'; this.alignContent='center'; this.gap='10px';">
-			<lido-text type="drag" id="drad_mug" tab-index="11" value="${args.draggable1Word}" string="${args.draggable1Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5"  font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.display='grid'; this.placeItems='center'; this.bg-color='red' this.cursor='grab';" />
-			<lido-text type="drag" id="drag_mad" tab-index="12" value="${args.draggable2Word}" string="${args.draggable2Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_mop" tab-index="13" value="${args.draggable3Word}" string="${args.draggable3Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_chug" tab-index="14" value="${args.draggable4Word}" string="${args.draggable4Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_chad" tab-index="15" value="${args.draggable5Word}" string="${args.draggable5Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_chop" tab-index="16" value="${args.draggable6Word}" string="${args.draggable6Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_dug" tab-index="17" value="${args.draggable7Word}" string="${args.draggable7Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_dad" tab-index="18" value="${args.draggable8Word}" string="${args.draggable8Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-			<lido-text type="drag" id="drag_dop" tab-index="19" value="${args.draggable9Word}" string="${args.draggable9Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+    return `<main>
+<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Grid.png" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.591px, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="${args.avatarSrc}" alt-text="{chimpleCharacterRive}"></lido-avatar>
+	</lido-cell>
+
+	<lido-cell id="main-layout-wrapper" layout="landscape.row, portrait.col" width="100%" height="100%" visible="true" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignItems='center'; this.gap='20px'; this.padding='10px';">
+
+		<lido-cell id="game-board" width="landscape.50%, portrait.90%" height="landscape.60%, portrait.40%" aspectRatio="1" maxHeight="landscape.90vh, portrait.auto" maxWidth="portrait.90vw, landscape.auto" visible="true" bg-color="#F5D482" onEntry="this.display='flex'; this.flexDirection='column'; this.padding='15px'; this.gap='10px'; this.borderRadius='20px'; this.boxShadow='0 8px 16px rgba(0,0,0,0.1)';">
+
+			<!-- TOP ROW: Column Headers -->
+			<lido-cell id="top-row" flex="1" bg-color="transparent" onEntry="this.display='flex'; this.flex='0 0 15%';">
+				<lido-cell id="blank-space" width="5%" visible="true" onEntry="this.flex='0 0 15%';" bg-color="transparent"></lido-cell>
+				<lido-cell id="column-headers" width="85%" visible="true" flex="1" bg-color="transparent" padding-left="45%" onEntry="this.display='flex'; this.justifyContent='space-around'; this.alignItems='center'; this.margin-left='-9vh' this.gap='10vh';">
+					<lido-text string="${args.colHeader1Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)'; "></lido-text>
+					<lido-text string="${args.colHeader2Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)'; "></lido-text>
+					<lido-text string="${args.colHeader3Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#EEB565" onEntry="this.backgroundColor='#EEB565'; this.width='40%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
+				</lido-cell>
+			</lido-cell>
+
+			<!-- BOTTOM ROW: Row Labels and Drop Grid -->
+			<lido-cell id="bottom-row" flex="1" visible="true" bg-color="transparent" onEntry="this.display='flex'; this.flex='0 0 15%';">
+				<lido-cell id="row-labels" height="50vh" onEntry="this.display='flex'; this.flexDirection='column'; this.flex='0 0 15%'; this.justifyContent='space-around'; this.alignItems='center';" bg-color="transparent">
+					<lido-text string="${args.rowLabel1Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
+					<lido-text string="${args.rowLabel2Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
+					<lido-text string="${args.rowLabel3Text}" font-size="clamp(24px, 4vw, 48px)" visible="true" font-weight="700" font-family="'Baloo Bhai 2', serif" font-color="#654321" onEntry="this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)';"></lido-text>
+				</lido-cell>
+
+				<lido-cell id="drop-grid" flex="1" visible="true" width="100%" bg-color="#E7CFAA" onEntry="this.display='grid'; this.gridTemplateColumns='repeat(3, 1fr)'; this.gridTemplateRows='repeat(3, 1fr)'; this.gap='15px'; this.padding='15px'; this.borderRadius='10px';">
+					<lido-text id="drop_mug"  tab-index="1" visible="true" type="drop" value="${args.dropTarget1Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_mad" tab-index="2" visible="true" type="drop" value="${args.dropTarget2Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_mop" tab-index="3" visible="true" type="drop" value="${args.dropTarget3Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_chug" tab-index="4" visible="true" type="drop" value="${args.dropTarget4Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_chad" tab-index="5" visible="true" type="drop" value="${args.dropTarget5Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_chop" tabIndex="6" visible="true" type="drop" value="${args.dropTarget6Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_dug" tab-index="7" visible="true" type="drop" value="${args.dropTarget7Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_dad" tab-index="8" visible="true" type="drop" value="${args.dropTarget8Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+					<lido-text id="drop_dop" tab-index="9" visible="true" type="drop" value="${args.dropTarget9Value}" bg-color="transparent" is-allow-only-correct="true" onEntry="this.borderRadius='10px';"></lido-text>
+				</lido-cell>
+			</lido-cell>
+		</lido-cell>
+
+		<!-- Draggable Words Container -->
+		<lido-cell id="draggable-area" visible="true" bg-color="transparent" width="landscape.12%, portrait.43%" height="landscape.90vh, portrait.33%" overflow="hidden" onEntry="this.display='flex'; this.flexWrap='wrap'; this.justifyContent='center'; this.alignContent='center'; this.gap='10px';">
+			<lido-text type="drag" id="drad_mug" tab-index="11" value="${args.draggable1Word}" string="${args.draggable1Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5"  font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.display='grid'; this.placeItems='center'; this.bg-color='red' this.cursor='grab';" />
+			<lido-text type="drag" id="drag_mad" tab-index="12" value="${args.draggable2Word}" string="${args.draggable2Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_mop" tab-index="13" value="${args.draggable3Word}" string="${args.draggable3Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_chug" tab-index="14" value="${args.draggable4Word}" string="${args.draggable4Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_chad" tab-index="15" value="${args.draggable5Word}" string="${args.draggable5Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_chop" tab-index="16" value="${args.draggable6Word}" string="${args.draggable6Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_dug" tab-index="17" value="${args.draggable7Word}" string="${args.draggable7Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_dad" tab-index="18" value="${args.draggable8Word}" string="${args.draggable8Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+			<lido-text type="drag" id="drag_dop" tab-index="19" value="${args.draggable9Word}" string="${args.draggable9Word}" visible="true" onTouch="this.speak='true'" width="clamp(100px, 25vw, 150px)" height="auto" aspectRatio="2.5" bg-color="#fcf3b1" font-size="clamp(24px, 5vw, 32px)" onEntry="this.borderRadius='15px'; this.backgroundColor='#EEB565'; this.width='60%'; this.font-size='clamp(24px, 4vw, 48px)'; this.textAlign='center'; this.display='grid'; this.placeItems='center'; this.cursor='grab';" />
+		</lido-cell>
+	</lido-cell>
+</lido-container>
 </main>`;
 }

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

@@ -32,49 +32,49 @@ export const imageMatch = {
 function getContainerXml(args) {
     let tabCounter = 1;
     const { isAllowOnlyCorrect = true } = args;
-    return `<main>
-  <lido-container disable-speak="true" id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';" is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.345px,portrait.401px" width="landscape.308px,portrait.401px" x="landscape.24%, portrait.24%" y="landscape.60%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
-		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
-		</lido-avatar>
-		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.57px,portrait.111px" y="landscape.285px,portrait.344px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-  <lido-text visible="false" id="inst" string="choose the correct option"></lido-text>
-    <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
-
-    
-          
-			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.92%,portrait.90%" height="18%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-7%" onEntry="this.position='relative';this.fontWeight='500';this.padding='0px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start'; ">
-			</lido-text>
-		  
-   <lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.109%,portrait.90%" height="68%" margin="landscape.40px 0px -31px 0px,portrait.-107px 0px 0px 0px">
-		
-			<lido-cell visible="true" height="landscape.400px,portrait.62%" width="landscape.400px,portrait.681px" border-radius="7px"
-          bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
-          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
-			<lido-image visible="true"
-            width="landscape.400px,portrait.100%"
-            height="landscape.400px,portrait.100%"
-            border-radius="7px" bg-color="white"
-            src="${args.image}">
-          </lido-image>
-		  </lido-cell>
-		
-		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='24px';">
-            <lido-text visible="true" disable-speak="true" audio="" onCorrect="" onInCorrect=""  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true"  id="option2" onCorrect="" onInCorrect="" font-family="'Baloo Bhai 2'" tab-index="3" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true"  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="54px" onCorrect="" onInCorrect="" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px'; this.line-height='1';">
-            </lido-text>
-			<lido-text visible="true" audio="" disable-speak="true"  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="54px" border-radius="12px" font-color="black" height="120px" onCorrect="" onInCorrect="" width="873px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
-            </lido-text>
-		</lido-cell>
-
-	</lido-cell>
-	</lido-cell>
-
-</lido-container>
+    return `<main>
+  <lido-container disable-speak="true" id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Quiz%20literacy.png"  onEntry="text1.speak='true';" is-allow-only-correct="${args.PracticeMode}" is-Continue-On-Correct="${args.PracticeMode}" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.345px,portrait.401px" width="landscape.308px,portrait.401px" x="landscape.24%, portrait.24%" y="landscape.60%, portrait.83%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
+		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
+		</lido-avatar>
+		<lido-image id="image1" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp1/Shadow.png" bg-color="transparent" width="203px" height="32px" x="landscape.57px,portrait.111px" y="landscape.285px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+  <lido-text visible="false" id="inst" string="choose the correct option"></lido-text>
+    <lido-cell layout="col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+
+    
+          
+			<lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.92%,portrait.90%" height="18%" bg-color="#FFF5BB" font-family="'Baloo 2', serif" font-size="60px" font-color="#000" string="${args.questionText}" y="-7%" onEntry="this.position='relative';this.fontWeight='500';this.padding='0px';this.border='2px solid #FFB612'; this.boxShadow='unset';this.border-radius='16px'; this.textAlign='start'; ">
+			</lido-text>
+		  
+   <lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.109%,portrait.90%" height="68%" margin="landscape.40px 0px -31px 0px,portrait.-107px 0px 0px 0px">
+		
+			<lido-cell visible="true" height="landscape.400px,portrait.62%" width="landscape.400px,portrait.681px" border-radius="7px"
+          bg-color="white" margin="landscape.0px 0px 0px 0px, portrait.-149px 0px 25px 0px"
+          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+			<lido-image visible="true"
+            width="landscape.400px,portrait.100%"
+            height="landscape.400px,portrait.100%"
+            border-radius="7px" bg-color="white"
+            src="${args.image}">
+          </lido-image>
+		  </lido-cell>
+		
+		<lido-cell layout="col" visible="true"  width="landscape.53%,portrait.108%" height="216px" bg-Color="transparent" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 0px 0px" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='24px';">
+            <lido-text visible="true" disable-speak="true" audio="" onCorrect="" onInCorrect=""  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true"  id="option2" onCorrect="" onInCorrect="" font-family="'Baloo Bhai 2'" tab-index="3" font-size="54px" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true"  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="54px" onCorrect="" onInCorrect="" border-radius="12px" font-color="black" height="120px" width="873px" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px'; this.line-height='1';">
+            </lido-text>
+			<lido-text visible="true" audio="" disable-speak="true"  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="54px" border-radius="12px" font-color="black" height="120px" onCorrect="" onInCorrect="" width="873px" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='12px 19px';this.line-height='1';">
+            </lido-text>
+		</lido-cell>
+
+	</lido-cell>
+	</lido-cell>
+
+</lido-container>
   </main>`;
 }

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

@@ -29,53 +29,53 @@ export const QuestionAndOptions = {
 function getContainerXml(args) {
     const dropCellsXml = args.cells
         .map((cell, index) => cell.type === 'drop'
-        ? `
-      <lido-text visible="true" tab-index="${index}" id="drop${index}" 
-        width="120px" height="120px" type="drop" value="${cell.value.toLowerCase()}" 
-        bg-color="rgb(83 44 50 / 40%)" border-radius="10px">
-      </lido-text>
+        ? `
+      <lido-text visible="true" tab-index="${index}" id="drop${index}" 
+        width="120px" height="120px" type="drop" value="${cell.value.toLowerCase()}" 
+        bg-color="rgb(83 44 50 / 40%)" border-radius="10px">
+      </lido-text>
       `
-        : `<lido-text visible="true" width="auto" height="120px" 
-        value="${cell.value}" string="${cell.value}" font-size="80px" bg-color="#5F1A29" 
-        font-color="white" padding="0 20px" border-radius="10px" 
-        onEntry="this.fontWeight='600';"
-        >
+        : `<lido-text visible="true" width="auto" height="120px" 
+        value="${cell.value}" string="${cell.value}" font-size="80px" bg-color="#5F1A29" 
+        font-color="white" padding="0 20px" border-radius="10px" 
+        onEntry="this.fontWeight='600';"
+        >
       </lido-text>`)
         .join('');
     const objective = args.cells
         .filter(cell => cell.type === 'drop')
         .map(cell => cell.value.toLowerCase())
         .join(',');
-    return `<main>
-    <lido-container id="lido-container" visible="true" objective="${objective}" 
-      onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" 
-      onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';"
-      is-continue-on-correct="false" bg-color="transparent" 
-      bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" 
-      drop-action="infinite-drop" is-allow-only-correct="${args.PracticeMode}">
-
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" 
-        height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px" 
-        x="landscape.1275px,portrait.230px" y="landscape.90px, portrait.0px" 
-        aria-hidden="true" z="9999" 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-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-        <lido-text visible="true" width="100%" height="landscape.20%,portrait.30%"></lido-text>
-        <lido-cell visible="true" layout="row" width="landscape.80%, portrait.90%" height="landscape.50%, portrait.30%" bg-color="transparent" onEntry="this.alignItems='flex-start';">
-          <lido-cell visible="true" id="sentenceText" tab-index="1" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/fill-upAudio.mp3" layout="flex" width="auto" height="auto" gap="20px">
-            ${dropCellsXml}
-          </lido-cell>
-        </lido-cell>
-        <lido-keyboard visible="true" bg-color="#5F1A29" font-color="white" font-size="80px" 
-          keys="${args.buttons}" width="90%" height="landscape.45%,portrait.35%" 
-          type="drag" border-radius="10px" columns="landscape.10, portrait.7">
-        </lido-keyboard>
-      </lido-cell>
-    </lido-container>
+    return `<main>
+    <lido-container id="lido-container" visible="true" objective="${objective}" 
+      onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" 
+      onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';"
+      is-continue-on-correct="false" bg-color="transparent" 
+      bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" 
+      drop-action="infinite-drop" is-allow-only-correct="${args.PracticeMode}">
+
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" 
+        height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px" 
+        x="landscape.1275px,portrait.230px" y="landscape.90px, portrait.0px" 
+        aria-hidden="true" z="9999" 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-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+        <lido-text visible="true" width="100%" height="landscape.20%,portrait.30%"></lido-text>
+        <lido-cell visible="true" layout="row" width="landscape.80%, portrait.90%" height="landscape.50%, portrait.30%" bg-color="transparent" onEntry="this.alignItems='flex-start';">
+          <lido-cell visible="true" id="sentenceText" tab-index="1" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/fill-upAudio.mp3" layout="flex" width="auto" height="auto" gap="20px">
+            ${dropCellsXml}
+          </lido-cell>
+        </lido-cell>
+        <lido-keyboard visible="true" bg-color="#5F1A29" font-color="white" font-size="80px" 
+          keys="${args.buttons}" width="90%" height="landscape.45%,portrait.35%" 
+          type="drag" border-radius="10px" columns="landscape.10, portrait.7">
+        </lido-keyboard>
+      </lido-cell>
+    </lido-container>
   </main>`;
 }