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

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

@@ -9,6 +9,7 @@ const meta = {
         backSlot: { control: 'select', options: ['front', 'back'], name: 'Flash Card Back Slot' },
         frontText: { control: 'text', name: 'Flash Card Front Text' },
         backText: { control: 'text', name: 'Flash Card Back Text' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
     args: {
         traceImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/hindi_aa.svg'],
@@ -18,6 +19,7 @@ const meta = {
         backSlot: 'back',
         frontText: 'Unicorn is cute and shy',
         backText: 'I am a colour. I am mentioned in the poem along with Yellow and Blue. My name starts with the letter "R". Who am I?',
+        isAllowOnlyCorrect: true,
     },
 };
 export default meta;
@@ -34,6 +36,7 @@ export const WriteCard = {
     }
 };
 function getContainerXml(args) {
+    var _a;
     const traceImage = args.traceImage[0];
     const traceMode = args.traceMode;
     const flashCardImage = args.flashCardImage[0];
@@ -41,67 +44,68 @@ function getContainerXml(args) {
     const backSlot = args.backSlot;
     const frontText = args.frontText;
     const backText = args.backText;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     if (!traceImage || !flashCardImage) {
         console.error('Trace image or flash card image is missing');
         return '';
     }
-    return `
-        <main>
-
-            <lido-container  id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" height="100%" width="100%" bg-Color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
-
-                <!-- Chimple Avatar -->
-                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.360px, portrait.1025px" aria-hidden="true" z="1" bg-Color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
-                    </lido-avatar>
-                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" alt-text="{shadowImage}">
-                    </lido-image>
-                </lido-cell>
-
-                <!-- parent cell -->
-                <lido-cell  layout="landscape.row, portrait.col" visible="true" width="100%" height="100%" bg-color="transparent">
-                    <lido-cell  layout="col" visible="true" width="landscpae.27.5% , portrait.100%" height="landscpae.100% , portrait.27.5%" bg-color="transparent">
-                    </lido-cell>
-
-                    <lido-cell tab-index="2" layout="col" show-speak-icon="true" audio="" visible="true" width="landscape.725px, portrait.725px"  height="landscape.725px, portrait.725px" bg-color="#0A2C45"  onEntry="this.border-radius='6px'; this.flex-shrink='0';">
-                        <lido-trace id="image2" tab-index="3" value="a" visible="true" svg-source="${traceImage}" onCorrect="this.speak='true';"  mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.700px,portrait.700px" height="landscape.700px,portrait.700px" alt-text="{backgroundImage}">
-                        </lido-trace>
-                    </lido-cell>
-
-                    <lido-cell  layout="col" visible="true" width="landscpae.27.5% , portrait.100%" height="landscpae.100% , portrait.27.5%" bg-color="transparent">
-                    </lido-cell>
-                </lido-cell>
-            </lido-container>
-            
-
-
-            <lido-container id="lido-container" objective="writeCard" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" bg-color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
-
-                <!-- Chimple Avatar -->
-                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
-                    </lido-avatar>
-                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" alt-text="{shadowImage}">
-                    </lido-image>
-                </lido-cell>
-
-                <!-- flash-card element -->
-                <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" x="landscape.519px, portrait.73px" y="landscape.127px, portrait.172px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-flash-card x="50" y="100" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="transparent" onEntry="this.border-radius='32px';" onTouch="">
-                        <lido-cell layout="col" show-speak-icon="true" audio="" id="col1" slot="${frontSlot}" disable-edit="true" visible="true" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="2" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.5px,portrait.10px">
-                            <lido-image visible="true" src="${flashCardImage}" z="1" width="landscape.578px, portrait.738px" height="landscape.578px, portrait.738px" onEntry="this.flex-shrink='0';" border-radius="24px 24px 6px 6px" alt-text="{image1}">
-                            </lido-image>
-                            <lido-text id="txt1" width="553px" height="80px" display="flex" onEntry="this.textAlign='center'; this.flexDirection='column'; this.justifyContent='center'; this.alignItems='center'; this.flexShrink='0';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#303030" string="${frontText}" visible="true" y="landscape.15px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
-                            </lido-text>
-                        </lido-cell>
-                        <lido-cell layout="col" id="col2" show-speak-icon="true" audio="" slot="${backSlot}" disable-edit="true" visible="true"  width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="3" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.,portrait.">
-                            <lido-text id="txt2" height="480px" width="495px" display="flex" onEntry="this.textAlign='left'; this.lineHeight='1.5';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#000000" string="${backText}" visible="true" y="landscape.35px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
-                            </lido-text>
-                        </lido-cell>
-                    </lido-flash-card>
-                </lido-cell>
-
-            </lido-container>
-        </main>
+    return `
+        <main>
+
+            <lido-container  id="lido-container" disableSpeak="true" objective="writeLetter" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" height="100%" width="100%" bg-Color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" 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}" after-drop="false">
+
+                <!-- Chimple Avatar -->
+                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.360px, portrait.1025px" aria-hidden="true" z="1" bg-Color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
+                    </lido-avatar>
+                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" alt-text="{shadowImage}">
+                    </lido-image>
+                </lido-cell>
+
+                <!-- parent cell -->
+                <lido-cell  layout="landscape.row, portrait.col" visible="true" width="100%" height="100%" bg-color="transparent">
+                    <lido-cell  layout="col" visible="true" width="landscpae.27.5% , portrait.100%" height="landscpae.100% , portrait.27.5%" bg-color="transparent">
+                    </lido-cell>
+
+                    <lido-cell tab-index="2" layout="col" show-speak-icon="true" audio="" visible="true" width="landscape.725px, portrait.725px"  height="landscape.725px, portrait.725px" bg-color="#0A2C45"  onEntry="this.border-radius='6px'; this.flex-shrink='0';">
+                        <lido-trace id="image2" tab-index="3" value="a" visible="true" svg-source="${traceImage}" onCorrect="this.speak='true';"  mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.700px,portrait.700px" height="landscape.700px,portrait.700px" alt-text="{backgroundImage}">
+                        </lido-trace>
+                    </lido-cell>
+
+                    <lido-cell  layout="col" visible="true" width="landscpae.27.5% , portrait.100%" height="landscpae.100% , portrait.27.5%" bg-color="transparent">
+                    </lido-cell>
+                </lido-cell>
+            </lido-container>
+            
+
+
+            <lido-container id="lido-container" objective="writeCard" tab-index="1"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png"  height="1600px" width="900px" bg-color="transparent"  visible="true"   onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" 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}" after-drop="false">
+
+                <!-- Chimple Avatar -->
+                <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.-24px, portrait.465px" y="landscape.385px, portrait.983px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
+                    </lido-avatar>
+                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" alt-text="{shadowImage}">
+                    </lido-image>
+                </lido-cell>
+
+                <!-- flash-card element -->
+                <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" x="landscape.519px, portrait.73px" y="landscape.127px, portrait.172px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-flash-card x="50" y="100" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="transparent" onEntry="this.border-radius='32px';" onTouch="">
+                        <lido-cell layout="col" show-speak-icon="true" audio="" id="col1" slot="${frontSlot}" disable-edit="true" visible="true" width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="2" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.5px,portrait.10px">
+                            <lido-image visible="true" src="${flashCardImage}" z="1" width="landscape.578px, portrait.738px" height="landscape.578px, portrait.738px" onEntry="this.flex-shrink='0';" border-radius="24px 24px 6px 6px" alt-text="{image1}">
+                            </lido-image>
+                            <lido-text id="txt1" width="553px" height="80px" display="flex" onEntry="this.textAlign='center'; this.flexDirection='column'; this.justifyContent='center'; this.alignItems='center'; this.flexShrink='0';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#303030" string="${frontText}" visible="true" y="landscape.15px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
+                            </lido-text>
+                        </lido-cell>
+                        <lido-cell layout="col" id="col2" show-speak-icon="true" audio="" slot="${backSlot}" disable-edit="true" visible="true"  width="landscape.594px, portrait.754px" height="landscape.725px, portrait.925px" bg-color="white" type="" tab-index="3" dropAttr="diagonal" onEntry="this.border-radius=32px; this.padding='8px 8px 16px 8px';" y="landscape.,portrait.">
+                            <lido-text id="txt2" height="480px" width="495px" display="flex" onEntry="this.textAlign='left'; this.lineHeight='1.5';" font-family="'Baloo Bhai 2'" font-size="52px" z="1" font-color="black" font-weight="500" color="#000000" string="${backText}" visible="true" y="landscape.35px, portrait.15px" bg-color="white" margin="landscape.45px 0px 45px 0px, portrait.45px 0px 45px 0px">
+                            </lido-text>
+                        </lido-cell>
+                    </lido-flash-card>
+                </lido-cell>
+
+            </lido-container>
+        </main>
     `;
 }

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

@@ -9,6 +9,7 @@ const meta = {
         textDisplayImage: { control: 'file', name: 'Top Display Image URL', multiple: true },
         spanType: { control: 'select', options: ['letters', 'words'], name: 'Text Highlight Type' },
         stars: { control: 'number', name: 'Number of Stars', min: 0, max: 10, step: 1 },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
     },
     args: {
         traceImage1: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/svgs/Numbers/1.svg'],
@@ -18,6 +19,7 @@ const meta = {
         textDisplayImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/top_display_image.svg'],
         spanType: 'letters',
         stars: 10,
+        isAllowOnlyCorrect: true,
     }
 };
 export default meta;
@@ -33,6 +35,7 @@ export const WriteNumber = {
     },
 };
 function getContainerXml(args) {
+    var _a;
     const traceImage1 = args.traceImage1[0];
     const traceImage2 = args.traceImage2[0];
     const traceMode = args.traceMode;
@@ -40,6 +43,7 @@ function getContainerXml(args) {
     const textDisplayImage = args.textDisplayImage[0];
     const spanType = args.spanType;
     const stars = args.stars;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     if (!traceImage1 || !traceImage2) {
         console.error('Trace image is missing');
         return '';
@@ -49,48 +53,48 @@ function getContainerXml(args) {
     const starList = Array.from({ length: stars }, (_, i) => i + 1);
     const starCells = starList
         .map((index) => {
-        return `
-        <lido-image id="star${index}" tab-index="${tabCounter++}" audio="" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
-        </lido-image>
+        return `
+        <lido-image id="star${index}" tab-index="${tabCounter++}" audio="" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/fly1%201.png" width="landscape.100px, portrait.140px" visible="true" height="landscape.75px, portrait.92px">
+        </lido-image>
       `;
     })
         .join('');
-    return `
-        <main>
-            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  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="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true">
-
-                <!-- Chimple Avatar -->
-                <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1010px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
-                    </lido-avatar>
-                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" alt-text="{shadowImage}">
-                    </lido-image>
-                </lido-cell>
-
-                <!-- text-element -->
-                <lido-cell layout="pos" id="pos2" disable-edit="true" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.645px, portrait.300px" y="landscape.90px, portrait.105px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.font-weight='600';">
-                    <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
-                    </lido-text>                        
-                </lido-cell>
-
-                <!-- text-image -->
-                <lido-cell layout="pos" id="pos2" visible="true" bg-color="transparent" onEntry="this.padding='4px 0px 16px 0px';" x="landscape.595px, portrait.255px" y="landscape.30px, portrait.45px">
-                    <lido-image visible="true" src="${textDisplayImage}" z="1" width="landscape.375px, portrait.375px" height="landscape.175px, portrait.175px" onEntry="this.flex-shrink='0';" alt-text="image1">
-                    </lido-image>
-                </lido-cell>
-
-                <!-- trace cell -->
-                <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px"  height="landscape.477px, portrait.477px" bg-color="transparent"  onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.315px">
-                    <lido-trace id="image2" tab-index="3" value="a" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
-                    </lido-trace>
-                </lido-cell>
-
-
-                <lido-cell layout="wrap" id="star-row" width="landscape.50%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.225px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fill, minmax(135px, auto))'; this.justify-content='center'; this.align-items='center';">
-                    ${starCells}
-                </lido-cell>
-
-            </lido-container>
-        </main>
+    return `
+        <main>
+            <lido-container id="lido-container" objective="writeNumber" tab-index="1"  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="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}">
+
+                <!-- Chimple Avatar -->
+                <lido-cell layout="pos" id="pos1" disable-edit="true" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1279px, portrait.230px" y="landscape.375px, portrait.1010px" ariaHidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                    <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" onEntry="">
+                    </lido-avatar>
+                    <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.535px" alt-text="{shadowImage}">
+                    </lido-image>
+                </lido-cell>
+
+                <!-- text-element -->
+                <lido-cell layout="pos" id="pos2" disable-edit="true" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.645px, portrait.300px" y="landscape.90px, portrait.105px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.font-weight='600';">
+                    <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
+                    </lido-text>                        
+                </lido-cell>
+
+                <!-- text-image -->
+                <lido-cell layout="pos" id="pos2" visible="true" bg-color="transparent" onEntry="this.padding='4px 0px 16px 0px';" x="landscape.595px, portrait.255px" y="landscape.30px, portrait.45px">
+                    <lido-image visible="true" src="${textDisplayImage}" z="1" width="landscape.375px, portrait.375px" height="landscape.175px, portrait.175px" onEntry="this.flex-shrink='0';" alt-text="image1">
+                    </lido-image>
+                </lido-cell>
+
+                <!-- trace cell -->
+                <lido-cell layout="pos" id="pos3" visible="true" width="landscape.740px, portrait.740px"  height="landscape.477px, portrait.477px" bg-color="transparent"  onEntry="this.border-radius='6px'; this.flex-shrink='0';" x="landscape.430px, portrait.75px" y="landscape.205px, portrait.315px">
+                    <lido-trace id="image2" tab-index="3" value="a" visible="true" highlightTextId="txt1" svgSource="${traceImage1}; ${traceImage2}" onCorrect="star-row.highlightStarsAndDisapper='true';"  mode="${traceMode}" z="1" x="" y="" width="740px" height="477px" alt-text="{backgroundImage}">
+                    </lido-trace>
+                </lido-cell>
+
+
+                <lido-cell layout="wrap" id="star-row" width="landscape.50%, portrait.80%" height="landscape.160px, portrait.200px" visible="true" bg-color="transparent" y="landscape.500px, portrait.485px" margin="landscape.560px 0px -100px 0px, portrait.225px 0px -100px 0px" onEntry="this.grid-template-columns='repeat(auto-fill, minmax(135px, auto))'; this.justify-content='center'; this.align-items='center';">
+                    ${starCells}
+                </lido-cell>
+
+            </lido-container>
+        </main>
     `;
 }

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

@@ -3,12 +3,16 @@ const meta = {
     title: 'Templates/writeSet',
     argTypes: {
         questions: { control: 'object' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+        isContinueOnCorrect: { control: 'boolean' },
     },
 };
 export default meta;
 export const writeSet = {
     args: {
-        questions: ["26"]
+        questions: ["26"],
+        isAllowOnlyCorrect: true,
+        isContinueOnCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -17,39 +21,39 @@ export const writeSet = {
 };
 function getContainerXml(args) {
     let tabCounter = 1;
-    const { questions = [] } = args;
+    const { questions = [], isAllowOnlyCorrect = true, isContinueOnCorrect = true } = args;
     const QuestionCells = questions.map(question => {
-        return `
-		<!-- Questions --> 	
-		<lido-cell visible="true" id=""  layout="" height="93px" width="368px" bg-Color="transparent" onEntry="" justify-content="space-evenly" margin="landscape.0px 0px 0px -78px,portrait.44px">
-			<lido-text visible="true" id="number" audio="" onTouch="" tab-index="${tabCounter++}" height="100%" width="100%" bg-Color="#FFE99B" margin="" onEntry="this.border='5px solid #FFC805'" string="${question}" font-size="76px" font-weight="500" font-family="'Baloo Bhai 2'" onCorrect="this.speak='true'">
-			</lido-text>
-		</lido-cell>
+        return `
+		<!-- Questions --> 	
+		<lido-cell visible="true" id="question"  layout="" height="93px" width="368px" bg-Color="transparent" onEntry="" justify-content="space-evenly" margin="landscape.0px 0px 0px -78px,portrait.44px">
+			<lido-text visible="true" id="number" audio="" value="${question}" onTouch="" tab-index="${tabCounter++}" height="100%" width="100%" bg-Color="#FFE99B" margin="" onEntry="this.border='5px solid #FFC805'" string="${question}" font-size="76px" font-weight="500" font-family="'Baloo Bhai 2'" onCorrect="this.speak='true'">
+			</lido-text>
+		</lido-cell>
       `;
     }).join('');
-    return `<main>
- <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" objective="${questions.join(',')}" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true';  this.sleep='2000';">
-
-    <!-- Audio -->
-    <lido-text visible="false" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>
-		
-    <!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.346px,portrait.310px" width="landscape.263px,portrait.276px" x="landscape.82%, portrait.72%" y="landscape.68%, portrait.82%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
-			</lido-avatar>
-	</lido-cell>
-		
-		
-	<lido-cell visible="true" id="xx"  layout="landscape.row,portrait.col" height="100%" width="100%" bg-Color="transparent" margin="landscape.78px 0px -16px 0px,portrait.0px" onEntry="this.justifyContent='center'">
-
-		<lido-cell visible="true" id="xx"  layout="" height="landscape.92%,portrait.72%" width="landscape.80%,portrait.96%" bg-Color="transparent" margin="landscape.-16px 0px 0px -56px,portrait.0px 50px 0px 0px" onEntry="this.justifyContent='center'">
-			<lido-math-matrix id="matrix" visible="true" width="landscape.100%,portrait.1000px" height="landscape.860px,portrait.1700px" x="800px" y="23px" rows="landscape.12,portrait.10" cols="landscape.10,portrait.12" top-index="true" left-index="true" bottom-index="true" active-only-visible="false" defualtFill="0" border="1px solid black" border-radius="0" active-bg-color="#5D44BD" clickable="true" type="checkerBlock" font-color="#182A4F" deactive-bg-color="aliceblue" font-family="'Baloo Bhai 2'">
-			</lido-math-matrix>	
-		</lido-cell>
-
-		${QuestionCells}
-	
-	</lido-cell>		
-</lido-container>
+    return `<main>
+ <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true';  this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
+
+    <!-- Audio -->
+    <lido-text visible="false" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>
+		
+    <!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.346px,portrait.310px" width="landscape.263px,portrait.276px" x="landscape.82%, portrait.72%" y="landscape.68%, portrait.82%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+	</lido-cell>
+		
+		
+	<lido-cell visible="true" id=""  layout="landscape.row,portrait.col" height="100%" width="100%" bg-Color="transparent" margin="landscape.78px 0px -16px 0px,portrait.0px" onEntry="this.justifyContent='center'">
+
+		<lido-cell visible="true" id=""  layout="" height="landscape.92%,portrait.72%" width="landscape.80%,portrait.96%" bg-Color="transparent" margin="landscape.-16px 0px 0px -56px,portrait.0px 50px 0px 0px" onEntry="this.justifyContent='center'">
+			<lido-math-matrix id="mat1" visible="true" width="landscape.100%,portrait.1000px" height="landscape.860px,portrait.1700px" x="800px" y="23px" rows="landscape.12,portrait.10" cols="landscape.10,portrait.12" top-index="true" left-index="true" bottom-index="true" active-only-visible="false" defualtFill="0" border="1px solid black" border-radius="0" active-bg-color="#5D44BD" clickable="true" type="checkerBlock" font-color="#182A4F" deactive-bg-color="aliceblue" font-family="'Baloo Bhai 2'">
+			</lido-math-matrix>	
+		</lido-cell>
+
+		${QuestionCells}
+	
+	</lido-cell>		
+</lido-container>
 </main>`;
 }

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

@@ -10,6 +10,7 @@ const meta = {
         topDisplayImage: { control: 'file', name: 'Top Display Image URL', multiple: true },
         bottomDisplayImage: { control: 'file', name: 'Bottom Display Image URL', multiple: true },
         spanType: { control: 'select', options: ['letters', 'words'], name: 'Text Highlight Type' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'Allow Only Correct' },
     },
     args: {
         traceImage1: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/hindi_aa.svg'],
@@ -20,6 +21,7 @@ const meta = {
         topDisplayImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/questionBg.png'],
         bottomDisplayImage: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/tracing%20bg.png'],
         spanType: 'letters',
+        isAllowOnlyCorrect: true,
     }
 };
 export default meta;
@@ -34,6 +36,7 @@ export const WriteWord = {
     },
 };
 function getContainerXml(args) {
+    var _a;
     const traceImage1 = args.traceImage1[0];
     const traceImage2 = args.traceImage2[0];
     const traceImage3 = args.traceImage3[0];
@@ -42,43 +45,44 @@ function getContainerXml(args) {
     const topDisplayImage = args.topDisplayImage[0];
     const bottomDisplayImage = args.bottomDisplayImage[0];
     const spanType = args.spanType;
+    const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
     if (!traceImage1 || !traceImage2 || !traceImage3) {
         console.error('Trace image is missing');
         return '';
     }
     console.log("SVG Source:", `${traceImage1}; ${traceImage2}; ${traceImage3}`);
-    return `
-        <main>
-            <lido-container id="lido-container" tab-index="1" objective="writeWord" 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="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
-
-                    <!-- Chimple Avatar -->
-                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1200px, portrait.450px" y="landscape.390px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
-                        <lido-avatar id="lido-avatar" disable-edit="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" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
-                        </lido-image>
-                    </lido-cell>
-
-                    <!-- text-element -->
-                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.650px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="">
-                        <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
-                        </lido-text>                        
-                    </lido-cell>
-
-                    <lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
-                        <lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
-                        </lido-image>
-
-                        <lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">
-                        </lido-image>
-                    </lido-cell>
-
-                    <!-- trace element -->
-                    <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" height="landscape.500px, portrait.500px" width="landscape.550px, portrait.550px" x="landscape.510px, portrait.75px" y="landscape.305px, portrait.475px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="trace1.visibility='visible'; this.flex-shrink='0';">
-                        <lido-trace id="trace1"  audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/B.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/U.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/G.wav" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="this.sleep='2000'; txt1.speak='true';" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
-                        </lido-trace>
-                    </lido-cell>
-            </lido-container>
-        </main>
+    return `
+        <main>
+            <lido-container id="lido-container" tab-index="1" objective="writeWord" 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="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" 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}" after-drop="false">
+
+                    <!-- Chimple Avatar -->
+                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1200px, portrait.450px" y="landscape.390px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                        <lido-avatar id="lido-avatar" disable-edit="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" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
+                        </lido-image>
+                    </lido-cell>
+
+                    <!-- text-element -->
+                    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.650px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="">
+                        <lido-text id="txt1" tab-index="2" span-type="${spanType}"  audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
+                        </lido-text>                        
+                    </lido-cell>
+
+                    <lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
+                        <lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
+                        </lido-image>
+
+                        <lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">
+                        </lido-image>
+                    </lido-cell>
+
+                    <!-- trace element -->
+                    <lido-cell layout="pos" id="pos2" disable-edit="true" value="pos2" height="landscape.500px, portrait.500px" width="landscape.550px, portrait.550px" x="landscape.510px, portrait.75px" y="landscape.305px, portrait.475px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="trace1.visibility='visible'; this.flex-shrink='0';">
+                        <lido-trace id="trace1"  audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/B.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/U.wav; https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Audios/G.wav" animationTrace="true" highlightTextId="txt1" tab-index="3" value="a" visible="true" svg-source="${traceImage1}; ${traceImage2}; ${traceImage3}" onCorrect="this.sleep='2000'; txt1.speak='true';" mode="${traceMode}" z="1" x="25px" y="25px" width="landscape.500px, portrait.675px" height="landscape.500px, portrait.500px" altText="{backgroundImage}">
+                        </lido-trace>
+                    </lido-cell>
+            </lido-container>
+        </main>
     `;
 }