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

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

@@ -11,6 +11,7 @@ const meta = {
         options: { control: 'object', name: 'Options' },
         optionText: { control: 'text', name: 'Option Text' },
         objective: { control: 'text', name: 'Objective', description: 'Objective to achieve the task. (E.g. 5)' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
     },
     args: {
         questionBoardImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/question-board/wordwindow_frame_question.png'],
@@ -22,6 +23,7 @@ const meta = {
         options: [5, 7, 12, 18],
         optionText: 'tables',
         objective: '7',
+        isAllowOnlyCorrect: true,
     }
 };
 export default meta;
@@ -74,6 +76,7 @@ const parseExpression = (expressionText) => {
     }
 };
 function getContainerXml(args) {
+    var _a;
     const questionBoardImage = args.questionBoardImage[0];
     const questionBoardText = args.questionBoardText;
     const backgroundImagePlusSign1 = args.backgroundImagePlusSign1[0];
@@ -82,21 +85,22 @@ function getContainerXml(args) {
     const expressionText = args.expressionText;
     const optionText = args.optionText;
     const objective = args.objective;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     const options = args.options;
     const optionsCell = options.map((option) => {
-        return `
-        <lido-text id="${option}" tab-index="${option}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
-            <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
-            </lido-text>
-        </lido-text>
+        return `
+        <lido-text id="${option}" tab-index="${option}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
+            <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
+            </lido-text>
+        </lido-text>
         `;
     }).join('');
     const plus_minus_animation = expressionText.includes('+') || expressionText.includes('-');
     const multiplication_animation = expressionText.includes('X') || expressionText.includes('x') || expressionText.includes('*');
-    const expressionAnimation = plus_minus_animation ? `
-        background-animation-plus-minus-1.opacity='1'; background-animation-plus-minus-2.opacity='1';
-    ` : multiplication_animation ? `
-        background-animation-multiplication.opacity='1';
+    const expressionAnimation = plus_minus_animation ? `
+        background-animation-plus-minus-1.opacity='1'; background-animation-plus-minus-2.opacity='1';
+    ` : multiplication_animation ? `
+        background-animation-multiplication.opacity='1';
     ` : ``;
     console.log('Expression Animation: ', expressionAnimation);
     const { num1, num2, operator, result } = parseExpression(expressionText);
@@ -105,54 +109,54 @@ function getContainerXml(args) {
     let val1 = parseInt(num1) <= 10 ? '1' : '2';
     let val2 = parseInt(num2) <= 10 ? '1' : '2';
     console.log('Expression Text: ', escapedExpressionText);
-    return `
-        <main>
-            	<lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1"  value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" >
-
-                    <!-- Chimple Avatar -->
-                    <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='2';">
-                        <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
-                        </lido-avatar>
-                    </lido-cell>
-
-                    <!-- Question Section -->
-                    <lido-cell layout="pos" id="pos2" disableEdit="true" value="pos2" height="landscape.850px, portrait.710px" width="landscape.1225px, portrait.900px" x="landscape.155px, portrait.0px" y="landscape.60px, portrait.85px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                        <lido-image visible="true" id="question-board-image" width="100%" height="67%" bg-color="transparent" src="${questionBoardImage}" altText="{questionBoardImage}"  onEntry="">
-                        </lido-image>
-                    </lido-cell>
-
-                    <lido-text visible="false" id="txt1" audio="" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
-                    </lido-text>
-
-                    <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
-                        <lido-text visible="true" id="question-board-text" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
-                        </lido-text>
-                    </lido-cell>
-
-                    <!-- Options Section -->
-                    <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.95%, portrait.75%" bg-Color="transparent" margin="landscape.625px 0px 0px -70px,portrait.50px 0px 130px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.175px,portrait.65px">
-                        ${optionsCell}
-                    </lido-cell>
-                    
-                    <!-- Invisible Text for Animation -->
-                    <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
-                        <lido-text id="txt2" audio="" tab-index="6" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px"  bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
-                        </lido-text>
-                    </lido-cell>
-
-                    <!-- Background animation -->
-                    <lido-cell layout="pos" id="background-animation-plus-minus-1" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.-110px,portrait.-80px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="10" cols="${val1}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num1}" matrix-image="${backgroundImagePlusSign1}"></lido-math-matrix>
-                    </lido-cell>
-                    <lido-cell layout="pos" id="background-animation-plus-minus-2" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.130px, portrait.75px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="10" cols="${val2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num2}" matrix-image="${backgroundImagePlusSign2}"></lido-math-matrix>
-                    </lido-cell>
-
-                    <lido-cell layout="pos" id="background-animation-multiplication" value="pos5" height="600px" width="600px" x="landscape.530px, portrait.125px" y="landscape.50px, portrait.15px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
-                        <lido-math-matrix visible="true" rows="${num1}" cols="${num2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${result}" matrix-image="${backgroundImageMultiplicationSign}"></lido-math-matrix>
-                    </lido-cell>
-
-                </lido-container>
-        </main>
+    return `
+        <main>
+            	<lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1"  value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png"  height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
+
+                    <!-- Chimple Avatar -->
+                    <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.z-index='2';">
+                        <lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                        </lido-avatar>
+                    </lido-cell>
+
+                    <!-- Question Section -->
+                    <lido-cell layout="pos" id="pos2" disableEdit="true" value="pos2" height="landscape.850px, portrait.710px" width="landscape.1225px, portrait.900px" x="landscape.155px, portrait.0px" y="landscape.60px, portrait.85px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                        <lido-image visible="true" id="question-board-image" width="100%" height="67%" bg-color="transparent" src="${questionBoardImage}" altText="{questionBoardImage}"  onEntry="">
+                        </lido-image>
+                    </lido-cell>
+
+                    <lido-text visible="false" id="txt1" audio="" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
+                    </lido-text>
+
+                    <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
+                        <lido-text visible="true" id="question-board-text" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Options Section -->
+                    <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.40%,portrait.20%" width="landscape.95%, portrait.75%" bg-Color="transparent" margin="landscape.625px 0px 0px -70px,portrait.50px 0px 130px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.175px,portrait.65px">
+                        ${optionsCell}
+                    </lido-cell>
+                    
+                    <!-- Invisible Text for Animation -->
+                    <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
+                        <lido-text id="txt2" audio="" tab-index="6" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px"  bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
+                        </lido-text>
+                    </lido-cell>
+
+                    <!-- Background animation -->
+                    <lido-cell layout="pos" id="background-animation-plus-minus-1" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.-110px,portrait.-80px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val1}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num1}" matrix-image="${backgroundImagePlusSign1}"></lido-math-matrix>
+                    </lido-cell>
+                    <lido-cell layout="pos" id="background-animation-plus-minus-2" value="pos5" height="600px" width="600px" x="landscape.475px, portrait.85px" y="landscape.130px, portrait.75px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="10" cols="${val2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${num2}" matrix-image="${backgroundImagePlusSign2}"></lido-math-matrix>
+                    </lido-cell>
+
+                    <lido-cell layout="pos" id="background-animation-multiplication" value="pos5" height="600px" width="600px" x="landscape.530px, portrait.125px" y="landscape.50px, portrait.15px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.opacity='0';">
+                        <lido-math-matrix visible="true" rows="${num1}" cols="${num2}" top-index="false" left-index="false" bottom-index="false" clickable="false" active-only-visible="true" active-bg-color="yellow" inactive-bg-color="black" defualt-fill="${result}" matrix-image="${backgroundImageMultiplicationSign}"></lido-math-matrix>
+                    </lido-cell>
+
+                </lido-container>
+        </main>
     `;
 }

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

@@ -28,59 +28,59 @@ export const quizLiteracy = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.72%, portrait.31%" y="landscape.10%, portrait.80%" 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="30px" x="landscape.54px,portrait.109px" y="landscape.239px,portrait.314px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="53%" margin="landscape.-177px 0px 0px 0px,portrait.-467px 0px -149px">
-		<lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
-  onEntry="this.align-items='center'; this.justify-content='center';">
-
+    return `<main>
+   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.364px" width="landscape.278px,portrait.386px" x="landscape.72%, portrait.31%" y="landscape.10%, portrait.80%" 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="30px" x="landscape.54px,portrait.109px" y="landscape.239px,portrait.314px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="53%" margin="landscape.-177px 0px 0px 0px,portrait.-467px 0px -149px">
+		<lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
+  onEntry="this.align-items='center'; this.justify-content='center';">
+
   ${args.text && args.text.length > 0
-        ? `<lido-text visible="true" id="answer${tabCounter}"  
-        tab-index="${tabCounter++}" font-size="140px"
-        bg-color="#FFF5BB" audio="" border-radius="12px"
-        font-color="black" height="200px" width="auto"
-        string="${args.text}" margin="landscape.0px,portrait.-131px 0px 0px 0px" 
-        value="${args.text}" type="text"
-        onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
+        ? `<lido-text visible="true" id="answer${tabCounter}"  
+        tab-index="${tabCounter++}" font-size="140px"
+        bg-color="#FFF5BB" audio="" border-radius="12px"
+        font-color="black" height="200px" width="auto"
+        string="${args.text}" margin="landscape.0px,portrait.-131px 0px 0px 0px" 
+        value="${args.text}" type="text"
+        onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
      </lido-text>`
         : args.image && args.image.length > 0
-            ? `<lido-cell visible="true" height="200px" value="${args.answers}" width="200px" border-radius="7px"
-        bg-color="white" margin="landscape.12px 0px 0px 0px, portrait.0px 0px 0px 0px"
-        onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';this.border='4px solid #FFB612';">
-        <lido-image audio="" visible="true"
-          width="landscape.200px,portrait.200px"
-          height="landscape.200px,portrait.200px"
-          border-radius="7px" bg-color="white"
-          src="${Array.isArray(args.image) ? args.image[0] : args.image}">
-        </lido-image>
+            ? `<lido-cell visible="true" height="200px" value="${args.answers}" width="200px" border-radius="7px"
+        bg-color="white" margin="landscape.12px 0px 0px 0px, portrait.0px 0px 0px 0px"
+        onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';this.border='4px solid #FFB612';">
+        <lido-image audio="" visible="true"
+          width="landscape.200px,portrait.200px"
+          height="landscape.200px,portrait.200px"
+          border-radius="7px" bg-color="white"
+          src="${Array.isArray(args.image) ? args.image[0] : args.image}">
+        </lido-image>
      </lido-cell>`
-            : ''}
-   
-
-</lido-cell>
-
-
-		<lido-cell layout="landscape.wrap,portrait.col" visible="true"  margin="landscape.0px,portrait.0px 0px 0px 0px" width="landscape.88%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-             
-            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"   id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-            
-			
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
+            : ''}
+   
+
+</lido-cell>
+
+
+		<lido-cell layout="landscape.wrap,portrait.col" visible="true"  margin="landscape.0px,portrait.0px 0px 0px 0px" width="landscape.88%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+             
+            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+              <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';" onInCorrect="this.vibrate='horizontal-shake';"   id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="100px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+            
+			
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
   </main>`;
 }

package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js

@@ -22,41 +22,41 @@ export const quizLiteracyImageWithText = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.306px,portrait.401px" width="landscape.307px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.77%, 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="165px" height="30px" x="landscape.54px,portrait.111px" y="landscape.239px,portrait.344px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
-		
-			<lido-cell visible="true" height="landscape.98%,portrait.62%" width="landscape.600px,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.100%,portrait.100%"
-            height="landscape.100%,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='40px';">
-            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
-
-
+    return `<main>
+  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answer}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.306px,portrait.401px" width="landscape.307px,portrait.401px" x="landscape.82%, portrait.24%" y="landscape.77%, 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="165px" height="30px" x="landscape.54px,portrait.111px" y="landscape.239px,portrait.344px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="landscape.row,portrait.col" visible="true" bg-Color="transparent" width="landscape.100%,portrait.90%" height="68%" margin="landscape.0px,portrait.-107px 0px 0px 0px">
+		
+			<lido-cell visible="true" height="landscape.98%,portrait.62%" width="landscape.600px,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.100%,portrait.100%"
+            height="landscape.100%,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='40px';">
+            <lido-text visible="true" audio="" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';"  id="option1" font-family="'Baloo Bhai 2'" tab-index="2" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option2" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-family="'Baloo Bhai 2'" tab-index="3" font-size="62px" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option3" font-family="'Baloo Bhai 2'" tab-index="4" font-size="62px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" border-radius="12px" font-color="black" height="120px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+			<lido-text visible="true" audio=""  id="option4" font-family="'Baloo Bhai 2'" tab-index="5" font-size="62px" border-radius="12px" font-color="black" height="120px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
+
+
   </main>`;
 }

package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js

@@ -22,48 +22,48 @@ export const quizLiteracyImageWord = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    return `<main>
-   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" 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="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.108px" y="landscape.239px,portrait.361px" alt-text="{shadowImgae}">
-		</lido-image>
-	</lido-cell>
-	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
-		<lido-cell layout="flex" margin="landscape.0px,portrait.-215px 0px 0px 0px" visible="true" width="100%" height="300px" bg-Color="transparent"
-  onEntry="this.align-items='center'; this.justify-content='center';">
-
-        <lido-cell visible="true" height="400px" width="400px" value="${args.answers}" border-radius="7px"
-          bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
-          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
-          <lido-image visible="true"
-            width="landscape.400px,portrait.400px"
-            height="landscape.400px,portrait.400px"
-            border-radius="7px" bg-color="white"
-            src="${args.image}">
-          </lido-image>
-        </lido-cell>
-   
-
-</lido-cell>
-
-
-		<lido-cell layout="landscape.wrap,portrait.col" visible="true" margin="landscape.0px,portrait.214px 0px 271px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry=" this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
-            
-            <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" height="148px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
-            </lido-text>
-            
-			
-		</lido-cell>
-
-	</lido-cell>
-</lido-container>
+    return `<main>
+   <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png"  onEntry="" is-Continue-On-Correct="true" 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.290px,portrait.434px" width="landscape.278px,portrait.437px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.75%" 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="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.108px" y="landscape.239px,portrait.361px" alt-text="{shadowImgae}">
+		</lido-image>
+	</lido-cell>
+	<lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
+		<lido-cell layout="flex" margin="landscape.0px,portrait.-215px 0px 0px 0px" visible="true" width="100%" height="300px" bg-Color="transparent"
+  onEntry="this.align-items='center'; this.justify-content='center';">
+
+        <lido-cell visible="true" height="400px" width="400px" value="${args.answers}" border-radius="7px"
+          bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
+          onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
+          <lido-image visible="true"
+            width="landscape.400px,portrait.400px"
+            height="landscape.400px,portrait.400px"
+            border-radius="7px" bg-color="white"
+            src="${args.image}">
+          </lido-image>
+        </lido-cell>
+   
+
+</lido-cell>
+
+
+		<lido-cell layout="landscape.wrap,portrait.col" visible="true" margin="landscape.0px,portrait.214px 0px 271px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry=" this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';this.align-items='center'; this.justify-content='center'; this.gap='40px';">
+            
+            <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" height="148px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+             <lido-text visible="true" audio=""  id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" onCorrect="this.border='5px solid green';this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
+            </lido-text>
+            
+			
+		</lido-cell>
+
+	</lido-cell>
+</lido-container>
   </main>`;
 }