lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-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="${args.bgImage}" 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="${args.bgImage}" 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/jumpSentence/jumpSentence.stories.js

@@ -27,53 +27,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="true" 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="true">
-
-      <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="true" 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="true">
+
+      <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>`;
 }