lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

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

@@ -61,68 +61,68 @@ export const QuestionAndOptions = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
- <lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
-
-	<!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="250px" width="250px" x="landscape.0, portrait.670px" y="landscape.105px, portrait.1315px" 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="165px" height="40px" x="40px" y="205px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-
-	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
-
-		<!-- Question -->
-		<lido-text tab-index="1" show-speak-icon="true" visible="true" width="landscape.70%, portrait.62%" height="10%" string="${args.question}" audio="${args.questionAudio}" font-size="36px" onEntry=" this.padding='0px 45px';this.fontWeight='600'; " bg-color="transparent"></lido-text>
-
-		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="80%" bg-color="transparent">
-
-			<!-- Question Image -->
-      ${args.questionImg === '' || args.questionImg.length <= 0 ? '' : `<lido-image visible="true" height="30%" bg-color="white" src="${args.questionImg}"></lido-image>`}
-			
-			<!-- Slide Elements -->
-			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.64%, portrait.26%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.flex-shrink='0';this.padding='60px 40px';this.gap='37px';">
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-          ${args.option1Img === '' || args.option1Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option1Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option1}" audio="${args.option1Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0'; this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option2Img === '' || args.option2Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option2Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option2}" audio="${args.option2Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry=" this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option3Img === '' || args.option3Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option3Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option3}" audio="${args.option3Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-				
-				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
-					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
-						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
-					</lido-cell>
-					${args.option4Img === '' || args.option4Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option4Img}"></lido-image>`}
-					
-					<lido-text visible="true" string="${args.option4}" audio="${args.option4Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
-				</lido-cell>
-			</lido-cell>
-		</lido-cell>
-	</lido-cell>
-</lido-container>
+    return `<main>
+ <lido-container visible="true" objective="${args.correctObjective.toLowerCase()}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
+
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="250px" width="250px" x="landscape.0, portrait.670px" y="landscape.105px, portrait.1315px" 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="165px" height="40px" x="40px" y="205px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+
+	<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+		<lido-text visible="true" width="70%" height="landscape.10%, portrait.5%" bg-color="transparent"></lido-text>
+
+		<!-- Question -->
+		<lido-text tab-index="1" show-speak-icon="true" visible="true" width="landscape.70%, portrait.62%" height="10%" string="${args.question}" audio="${args.questionAudio}" font-size="36px" onEntry=" this.padding='0px 45px';this.fontWeight='600'; " bg-color="transparent"></lido-text>
+
+		<lido-cell visible="true" layout="landscape.col, portrait.row" flex-direction="landscape., portrait.row-reverse" align-items="landscape.center, portrait.start" width="100%" height="80%" bg-color="transparent">
+
+			<!-- Question Image -->
+      ${args.questionImg === '' || args.questionImg.length <= 0 ? '' : `<lido-image visible="true" height="30%" bg-color="white" src="${args.questionImg}"></lido-image>`}
+			
+			<!-- Slide Elements -->
+			<lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.64%, portrait.26%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.flex-shrink='0';this.padding='60px 40px';this.gap='37px';">
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+          ${args.option1Img === '' || args.option1Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option1Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option1}" audio="${args.option1Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0'; this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option2Img === '' || args.option2Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option2Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option2}" audio="${args.option2Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry=" this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option3Img === '' || args.option3Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option3Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option3}" audio="${args.option3Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+				
+				<lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
+					<lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
+						<lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
+					</lido-cell>
+					${args.option4Img === '' || args.option4Img.length <= 0 ? '' : `<lido-image visible="true" width="landscape., portrait.100%" src="${args.option4Img}"></lido-image>`}
+					
+					<lido-text visible="true" string="${args.option4}" audio="${args.option4Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
+				</lido-cell>
+			</lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-container>
   </main>`;
 }

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

@@ -4,6 +4,8 @@ const meta = {
     argTypes: {
         options: { control: 'object' },
         answers: { control: 'object' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+        isContinueOnCorrect: { control: 'boolean' },
         colors: {
             control: 'object',
             description: 'Array of colors for numbers',
@@ -17,6 +19,8 @@ export const rowBlock = {
         numbers: ["970", "971", "972", "973", "@974", "975", "976", "977", "@978", "979", "980", "981", "982", "@983", "984", "985", "986", "@987", "988", "989", "990", "991", "992", "993", "@994", "995", "996", "997", "@998", "999",],
         answers: ["974", "978", "983", "987", "994", "998"],
         dragColors: ['#CF1565', '#AD3184', '#F55376', '#81C127', '#5D44BD'],
+        isAllowOnlyCorrect: true,
+        isContinueOnCorrect: true,
         numColors: ['#FFE99B', '#FBCAB5'],
     },
     render: args => {
@@ -26,67 +30,67 @@ export const rowBlock = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    const { answers = [], numbers = [] } = args;
+    const { answers = [], numbers = [], isAllowOnlyCorrect = true, isContinueOnCorrect = true } = args;
     const DragCells = answers
         .map((option, index) => {
         const pickedColors = args.dragColors;
         const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
-        return `
-			<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px" isAllowOnlyCorrect="true" onTouch="this.speak='true';" onCorrect="this.speak='true';" ></lido-text>
+        return `
+			<lido-text visible="true" id="drag${tabCounter}" tab-index="${tabCounter++}" width="140px" height="86px" value="${option}" string="${option}" font-color="white" font-size="76px" font-family="Baloo Bhai 2" bg-color="${color}" border-radius="8px" onEntry="this.border='5px solid ${color}'; this.font-weight='500'; this.sleep='100';this.animation='rightToPlace 3s linear';" type="drag" margin="${index % 2 == 0 ? 'landscape.196px 0px 0px -52px' : 'landscape.-56px 28px 0px -60px'}, portrait.0px 0px 0px 0px"  onTouch="this.speak='true';" onCorrect="this.speak='true';" ></lido-text>
       `;
     })
         .join('');
-    return `
-<main>
-
-    <lido-container id="lido-container" visible="true" objective="${answers.join(',')}" onEntry="audio12.speak='true';"
-        onCorrect="lido-avatar.avatarAnimate='Success';  sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RowBlocks/Sky%207.png" custom-style= ".dropping {
-        border: 5px dashed #2C3836 !important;
-        background-color: #6D8C87 !important;
-        }" is-allow-only-correct="true">
-
-        <!-- Audio -->
-        <lido-text visible="false" id="audio12" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
-        
-        <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">
-                <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="404px" width="302px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-                </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="165px" height="30px" x="landscape.70px,portrait.125px" y="landscape.320px,portrait.400px" alt-text="{shadowImage}">
-            </lido-image>
-        </lido-cell>
-
-            
-        <lido-cell visible="true" layout="landscape.col, portrait.row" width="landscape.98%, portrait.860px" height="landscape.712px,portrait.1032px" padding="landscape.20px 42px, portrait.60px 10px" bg-Color="#234838" margin="landscape.90px 0px 0px 0px, portrait.-136px 0px 0px 0px" onEntry="this.animation='topToPlace 1s linear';" border-radius="10px">
-            <lido-cell id="numberBlocks" visible="true" audio="" width="lanscape.102%, portrait.55%" height="landscape.40%, portrait.100%" layout="landscape.col, portrait.row" bg-color="transparent" gap="landscape.10px, portrait.20px" margin="landscape.16px -46px 0px 0px, portrait.0px 0px 0px 0px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 30px">
-                <!-- drop elements -->
-                <lido-cell bg-color="transparent" height="landscape.32%, portrait.102%" width="landscape.103%, portrait.33%" 
-                    visible="true" onEntry="this.display='flex'; this.alignItems='center'; this.justify-content='flex-start';  this.flexWrap='wrap';" margin="landscape.-214px 0px 0px 0px, portrait.40px 5px 40px -258px" layout="landscape.row,portrait.col" gap="landscape.14px, portrait.12px">
+    return `
+<main>
+
+    <lido-container id="lido-container" visible="true" objective="${answers.join(',')}" onEntry="audio12.speak='true';"
+        onCorrect="lido-avatar.avatarAnimate='Success';  sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/RowBlocks/Sky%207.png" custom-style= ".dropping {
+        border: 5px dashed #2C3836 !important;
+        background-color: #6D8C87 !important;
+        }" is-allow-only-correct="${isAllowOnlyCorrect}">
+
+        <!-- Audio -->
+        <lido-text visible="false" id="audio12" onEntry="this.display='none';" string="Drag the missing number to its correct place and complete the number puzzle."></lido-text>
+        
+        <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" x="landscape.1432px,portrait.330px" y="landscape.612px, portrait.1338px" aria-hidden="true" z="9999" bg-color="transparent" visible="true" onEntry="" margin="-104px 0px 0px -54px">
+                <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="404px" width="302px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+                </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="165px" height="30px" x="landscape.70px,portrait.125px" y="landscape.320px,portrait.400px" alt-text="{shadowImage}">
+            </lido-image>
+        </lido-cell>
+
+            
+        <lido-cell visible="true" layout="landscape.col, portrait.row" width="landscape.98%, portrait.860px" height="landscape.712px,portrait.1032px" padding="landscape.20px 42px, portrait.60px 10px" bg-Color="#234838" margin="landscape.90px 0px 0px 0px, portrait.-136px 0px 0px 0px" onEntry="this.animation='topToPlace 1s linear';" border-radius="10px">
+            <lido-cell id="numberBlocks" visible="true" audio="" width="lanscape.102%, portrait.55%" height="landscape.40%, portrait.100%" layout="landscape.col, portrait.row" bg-color="transparent" gap="landscape.10px, portrait.20px" margin="landscape.16px -46px 0px 0px, portrait.0px 0px 0px 0px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 30px">
+                <!-- drop elements -->
+                <lido-cell bg-color="transparent" height="landscape.32%, portrait.102%" width="landscape.103%, portrait.33%" 
+                    visible="true" onEntry="this.display='flex'; this.alignItems='center'; this.justify-content='flex-start';  this.flexWrap='wrap';" margin="landscape.-214px 0px 0px 0px, portrait.40px 5px 40px -258px" layout="landscape.row,portrait.col" gap="landscape.14px, portrait.12px">
                     ${args.numbers.map((opt, index) => {
         const color = args.numColors;
         const cleanValue = opt.substring(1); // removes the first character (@)
         if (opt.startsWith('@')) {
-            return `
-                    <lido-text visible="true" class="dropping" id="drop${tabCounter}" tab-index="${tabCounter++}" width="138px" height="86px" value="${cleanValue}" string="" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="#6D8C87" border-radius="8px" onEntry="this.border='5px solid #2C3836'; this.speak='true';" type="drop" layout="row"></lido-text>
+            return `
+                    <lido-text visible="true" class="dropping" id="drop${tabCounter}" tab-index="${tabCounter++}" width="138px" height="86px" value="${cleanValue}" string="" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="#6D8C87" border-radius="8px" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='1000';" onEntry="this.border='5px solid #2C3836'; this.speak='true';" type="drop" layout="row"></lido-text>
                     `;
         }
-        return `
-                    <lido-text visible="true" id="num${tabCounter}" tab-index="${tabCounter++}" width="140px" height="94px" value="${opt}" string="${opt}" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="${index % 2 !== 0 ? color[0] : color[1]}" border-radius="8px" onEntry="this.font-weight='500'" onTouch="this.speak='true';" margin="0px 1px 0px 0px"></lido-text>
+        return `
+                    <lido-text visible="true" id="num${tabCounter}" tab-index="${tabCounter++}" width="140px" height="94px" value="${opt}" string="${opt}" font-color="#182A4F" font-size="76px" font-family="Baloo Bhai 2" bg-color="${index % 2 !== 0 ? color[0] : color[1]}" border-radius="8px" onEntry="this.font-weight='500'" onTouch="this.speak='true';" margin="0px 1px 0px 0px"></lido-text>
                     `;
-    }).join('')}
-                </lido-cell>
-            </lido-cell>		
-
-            <!--drag elements-->
-            <lido-cell id="numberBlocks" visible="true" tab-index="32" audio="" width="landscape.90%, portrait.50%" height="landscape.50%, portrait.100%" onEntry="this.animation='rightToPlace 2.5s linear'" layout="landscape.col, portrait.col" bg-color="transparent" display="flex" flex-direction="landscape.row, portrait.col" margin="landscape.0px 0px 0px -130px, portrait.0px 0px 0px 0px" gap="landscape.0px, portrait.10px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 20px">
-                    ${DragCells}				    
-            </lido-cell>
-
-
-
-        </lido-cell>
-        
-    </lido-container>
-
+    }).join('')}
+                </lido-cell>
+            </lido-cell>		
+
+            <!--drag elements-->
+            <lido-cell id="numberBlocks" visible="true" tab-index="32" audio="" width="landscape.90%, portrait.50%" height="landscape.50%, portrait.100%" onEntry="this.animation='rightToPlace 2.5s linear'" layout="landscape.col, portrait.col" bg-color="transparent" display="flex" flex-direction="landscape.row, portrait.col" margin="landscape.0px 0px 0px -130px, portrait.0px 0px 0px 0px" gap="landscape.0px, portrait.10px" padding="landscape.0px 0px 0px 0px, portrait.0px 0px 0px 20px">
+                    ${DragCells}				    
+            </lido-cell>
+
+
+
+        </lido-cell>
+        
+    </lido-container>
+
 </main>`;
 }

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

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