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

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

@@ -27,73 +27,73 @@ function getContainerXml(args) {
         const actualValue = isHidden ? q.slice(1) : q;
         const spokenString = isHidden ? '_' : q;
         const showComma = index < args.questions.length - 1;
-        return `
-  <lido-text id="pattern${1 + index}"
-    visible="true"
-    tab-index="${1 + index}"
-    value="${actualValue}"
-    string="${spokenString}"
-    font-family="'Baloo Bhai 2'"
-    font-color="#07004E"
-    font-size="landscape.130px, portrait.100px"
-    bg-color=""
-    onEntry="this.fontWeight='800';">
-  </lido-text>
-
-  ${showComma ? `
-    <lido-text onEntry="this.fontWeight='800';"
-      visible="true"
-      value=","
-      string=","
-      speak="false"
-      font-family="'Baloo Bhai 2'"
-      font-color="#07004E"
-      font-size="landscape.130px, portrait.100px"
-      bg-color="" >
-    </lido-text>
-  ` : ''}
+        return `
+  <lido-text id="pattern${1 + index}"
+    visible="true"
+    tab-index="${1 + index}"
+    value="${actualValue}"
+    string="${spokenString}"
+    font-family="'Baloo Bhai 2'"
+    font-color="#07004E"
+    font-size="landscape.130px, portrait.100px"
+    bg-color=""
+    onEntry="this.fontWeight='800';">
+  </lido-text>
+
+  ${showComma ? `
+    <lido-text onEntry="this.fontWeight='800';"
+      visible="true"
+      value=","
+      string=","
+      speak="false"
+      font-family="'Baloo Bhai 2'"
+      font-color="#07004E"
+      font-size="landscape.130px, portrait.100px"
+      bg-color="" >
+    </lido-text>
+  ` : ''}
 `;
     }).join('');
     const option_cells = args.options.map((q, index) => {
-        return `
-      <lido-cell layout="row" id="text${1 + index}" visible="true" margin="" onEntry="this.border-radius='14px';" height="landscape.270px,portrait.244px" width="landscape.270px,portrait.244px" bg-color="orange"  type="click" value="${q}">
-        <lido-text visible="true" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='800';">
-        </lido-text>
-      </lido-cell>
+        return `
+      <lido-cell layout="row" id="text${1 + index}" visible="true" margin="" onEntry="this.border-radius='14px';" height="landscape.270px,portrait.244px" width="landscape.270px,portrait.244px" bg-color="orange"  type="click" value="${q}">
+        <lido-text visible="true" value="${q}" string="${q}" disable-speak="true" font-family="'Baloo Bhai 2'" font-color="black" font-size="landscape.130px, portrait.100px"  bg-color="orange" onEntry="this.fontWeight='800';">
+        </lido-text>
+      </lido-cell>
   `;
     }).join('');
-    return `
-<main>
-<lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Frame%2051.svg" objective="${(args.questions.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
-        box-shadow: none !important;
-        }" onEntry="questionText.speak='true'; pattern1.speak='true'; pattern2.speak='true'; pattern3.speak='true'; pattern4.speak='true'; pattern5.speak='true'">
-	 <!-- Chimple Avatar -->
-      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.328px,portrait.378px" width="landscape.284px,portrait.382px" x="landscape.87%, portrait.30%" y="landscape.68%, portrait.78%" 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 layout="landscape.col, portrait.col" visible="true" margin="landscape.30px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.90%,portrait.42%" width="landscape.96%,portrait.100%" bg-color="transparent">
-        <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.140px,portrait.42%" width="landscape.80%,portrait.100%" bg-color=" transparent">
-            <lido-text id="questionText" visible="true" tab-index="112" value="${args.questions[0]}" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="landscape.80px, portrait.100px"  bg-color="" onEntry="this.fontWeight='800'; this.fontWeight='800';">
-			      </lido-text>
-        </lido-cell>
-
-        <!-- question cells -->
-          <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='5px solid #6D8600'" height="landscape.290px,portrait.42%" width="landscape.90%,portrait.100%" bg-color="#FFFFFF99">				
-            ${question_cells}
-          </lido-cell>
-
-        <!-- options cells -->
-	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.86%,portrait.100%" bg-color="transparent">
-            ${option_cells}
-          </lido-cell>
-
-          
-    </lido-cell>
-
-</lido-container>
-</main>
+    return `
+<main>
+<lido-container disable-speak="true" visible="true" id="lido-container" template-id="mcq" onInCorrect="lido-avatar.avatarAnimate='Fail';this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2300';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/Frame%2051.svg" objective="${(args.questions.find(q => q.startsWith('@')) || '').slice(1)}" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" custom-style= "#text {
+        box-shadow: none !important;
+        }" onEntry="questionText.speak='true'; pattern1.speak='true'; pattern2.speak='true'; pattern3.speak='true'; pattern4.speak='true'; pattern5.speak='true'">
+	 <!-- Chimple Avatar -->
+      <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.328px,portrait.378px" width="landscape.284px,portrait.382px" x="landscape.87%, portrait.30%" y="landscape.68%, portrait.78%" 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 layout="landscape.col, portrait.col" visible="true" margin="landscape.30px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.90%,portrait.42%" width="landscape.96%,portrait.100%" bg-color="transparent">
+        <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px';" height="landscape.140px,portrait.42%" width="landscape.80%,portrait.100%" bg-color=" transparent">
+            <lido-text id="questionText" visible="true" tab-index="112" value="${args.questions[0]}" string="${args.question_text}" font-family="'Baloo Bhai 2'" font-color="#07004E" font-size="landscape.80px, portrait.100px"  bg-color="" onEntry="this.fontWeight='800'; this.fontWeight='800';">
+			      </lido-text>
+        </lido-cell>
+
+        <!-- question cells -->
+          <lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 0px 0px 0px,portrait.-168px 0px 0px 0px" onEntry="this.border-radius='26px'; this.border='5px solid #6D8600'" height="landscape.290px,portrait.42%" width="landscape.90%,portrait.100%" bg-color="#FFFFFF99">				
+            ${question_cells}
+          </lido-cell>
+
+        <!-- options cells -->
+	      	<lido-cell layout="landscape.row, portrait.col" visible="true" margin="landscape.0px 38px 0px 0px,portrait.0" onEntry="this.border-radius='26px';" height="landscape.290px,portrait.35%" width="landscape.86%,portrait.100%" bg-color="transparent">
+            ${option_cells}
+          </lido-cell>
+
+          
+    </lido-cell>
+
+</lido-container>
+</main>
 `;
 }

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

@@ -22,55 +22,55 @@ export const palEgmaWordProblem1 = {
 };
 function getContainerXml(args) {
     const dragCells = args.options
-        .map((digit, i) => `
-      <lido-text id="drag${i}" disable-speak="true" tab-index="${11 + i}" height="landscape.190px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
-      </lido-text>
+        .map((digit, i) => `
+      <lido-text id="drag${i}" disable-speak="true" tab-index="${11 + i}" height="landscape.190px, portrait.125px" width="landscape.125px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
+      </lido-text>
     `)
         .join('\n');
     const objectiveArray = args.answer.split('');
     const dropCells = objectiveArray
-        .map((cell, i) => `
-       <lido-text id="drop${i}" disable-edit="true" tab-index="${10 + i}" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px dashed #f34d08'" border-image="">
-      </lido-text>
+        .map((cell, i) => `
+       <lido-text id="drop${i}" disable-edit="true" tab-index="${10 + i}" height="landscape.190px, portrait.auto" width="125px" visible="true" value="${cell}" string="?" font-family="'Baloo Bhai 2'" font-color="black" type="drop" font-size="landscape.130px, portrait.100px"  bg-color="white"  onEntry="this.fontWeight='800'; this.borderRadius='20px'; this.border='4px dashed #f34d08'" border-image="">
+      </lido-text>
       `)
         .join('\n');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-
-  <lido-container id="lido-container" disable-speak="true" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
-        box-shadow: none !important;
-        }">
-
-            <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.82%, portrait.28%" y="landscape.36%, portrait.77%" 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 id="question11" layout="row" visible="true" margin="44px 0px 0px 0px" height="landscape.330px,portrait.70%" 
-            width="landscape.95%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center';" onTouch="this.speak='true'">
-                <lido-text id="question" tab-index="111" visible="true" value="${args.answer}" string="${args.question2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="50px" bg-color="transparent" onEntry="this.fontWeight='600';">
-                </lido-text>
-        </lido-cell>
-
-        <!-- answer drop cell -->
-            <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.50%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='flex-start'; this.alignItems='center'; this.gap='44px';">
-
-                <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.200px,portrait.150px" width="landscape.60%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='20px';">
-                    ${dropCells}
-                </lido-cell>
-
-            <!-- answers drag cell -->
-                <lido-cell layout="landscape.wrap, portrait.wrap" aria-hidden="true" visible="true" height="landscape.20%,portrait.18%" width="95%" bg-Color="transparent" margin="landscape.0px,portrait.55px 0px 125px 0px" onEntry="this.z-index='1'; this.grid-template-columns='repeat(auto-fill, minmax(140px, auto))'; this.gridTemplateRows='repeat(auto-fit, 145px)'; this.flexWrap='wrap'; this.justify-content='center';" gap="5px">
-                ${dragCells}
-                </lido-cell>
-            </lido-cell>
-
-          
-  </lido-container>
-
-</main>
+    return `
+<main>
+
+  <lido-container id="lido-container" disable-speak="true" objective="${args.answer.split('').join(',')}" tab-index="" template-id="dragAndDrop" show-drop-border="false" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
+        box-shadow: none !important;
+        }">
+
+            <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.82%, portrait.28%" y="landscape.36%, portrait.77%" 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 id="question11" layout="row" visible="true" margin="44px 0px 0px 0px" height="landscape.330px,portrait.70%" 
+            width="landscape.95%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center';" onTouch="this.speak='true'">
+                <lido-text id="question" tab-index="111" visible="true" value="${args.answer}" string="${args.question2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="50px" bg-color="transparent" onEntry="this.fontWeight='600';">
+                </lido-text>
+        </lido-cell>
+
+        <!-- answer drop cell -->
+            <lido-cell layout="landscape.col, portrait.row" aria-hidden="true" visible="true" height="landscape.50%,portrait.150px" width="landscape.100%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='flex-start'; this.alignItems='center'; this.gap='44px';">
+
+                <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.200px,portrait.150px" width="landscape.60%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='20px';">
+                    ${dropCells}
+                </lido-cell>
+
+            <!-- answers drag cell -->
+                <lido-cell layout="landscape.wrap, portrait.wrap" aria-hidden="true" visible="true" height="landscape.20%,portrait.18%" width="95%" bg-Color="transparent" margin="landscape.0px,portrait.55px 0px 125px 0px" onEntry="this.z-index='1'; this.grid-template-columns='repeat(auto-fill, minmax(140px, auto))'; this.gridTemplateRows='repeat(auto-fit, 145px)'; this.flexWrap='wrap'; this.justify-content='center';" gap="5px">
+                ${dragCells}
+                </lido-cell>
+            </lido-cell>
+
+          
+  </lido-container>
+
+</main>
 `;
 }
 export const palEgmaWordProblem2 = {
@@ -87,45 +87,45 @@ export const palEgmaWordProblem2 = {
 };
 function getContainerXml1(args) {
     const optionCells = args.options
-        .map((digit, i) => `
-      <lido-text id="drag${i}" tab-index="${i + 1}" disable-speak="true" height="landscape.270px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
-      </lido-text>
+        .map((digit, i) => `
+      <lido-text id="drag${i}" tab-index="${i + 1}" disable-speak="true" height="landscape.270px, portrait.125px" width="landscape.270px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px"  bg-color="orange"  onEntry="this.fontWeight='800'; this.borderRadius='10px'; this.flex-shrink='0';" border-image="">
+      </lido-text>
     `)
         .join('\n');
     // ---------------------- FINAL XML ----------------------
-    return `
-<main>
-
-  <lido-container id="lido-container" objective="${args.answer}" tab-index="" template-id="mcq" show-drop-border="false" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
-        box-shadow: none !important;
-        }">
-
-            <!-- Chimple Avatar -->
-        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.85%, portrait.28%" y="landscape.30%, portrait.77%" 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 id="question11" layout="col" visible="true" margin="0px 0px 0px 0px" height="landscape.90%,portrait.70%" 
-        width="landscape.98%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center'; this.gap='100px'">
-               <lido-cell id="question11" layout="row" visible="true" margin="44px 0px 0px 0px" height="landscape.330px,portrait.70%" 
-                width="landscape.95%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center';" onTouch="this.speak='true'">
-                    <lido-text id="question" tab-index="111" visible="true" value="${args.answer}" string="${args.question2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="50px" bg-color="transparent" onEntry="this.fontWeight='600';">
-                    </lido-text>
-                </lido-cell>
-
-                <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.50%,portrait.150px" width="landscape.85%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='44px';">
-
-                <!-- answers option cell -->
-                
-                    ${optionCells}
-                
-                </lido-cell>               
-        </lido-cell>
-
-          
-  </lido-container>
-
-</main>
+    return `
+<main>
+
+  <lido-container id="lido-container" objective="${args.answer}" tab-index="" template-id="mcq" show-drop-border="false" is-continue-on-correct="${args.PracticeMode}" is-allow-only-correct="${args.PracticeMode}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/new.svg" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="question.speak='true'" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false" custom-style= "#question11 {
+        box-shadow: none !important;
+        }">
+
+            <!-- Chimple Avatar -->
+        <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.344px,portrait.402px" width="landscape.296px,portrait.398px" x="landscape.85%, portrait.28%" y="landscape.30%, portrait.77%" 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 id="question11" layout="col" visible="true" margin="0px 0px 0px 0px" height="landscape.90%,portrait.70%" 
+        width="landscape.98%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center'; this.gap='100px'">
+               <lido-cell id="question11" layout="row" visible="true" margin="44px 0px 0px 0px" height="landscape.330px,portrait.70%" 
+                width="landscape.95%,portrait.96%" bg-color="transparent" onEntry="this.justifyContent='center';" onTouch="this.speak='true'">
+                    <lido-text id="question" tab-index="111" visible="true" value="${args.answer}" string="${args.question2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="50px" bg-color="transparent" onEntry="this.fontWeight='600';">
+                    </lido-text>
+                </lido-cell>
+
+                <lido-cell layout="landscape.row, portrait.row" aria-hidden="true" visible="true" height="landscape.50%,portrait.150px" width="landscape.85%, portrait.80%" bg-Color="transparent" margin="landscape.0px,portrait.20px 0px 0px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.alignItems='center'; this.gap='44px';">
+
+                <!-- answers option cell -->
+                
+                    ${optionCells}
+                
+                </lido-cell>               
+        </lido-cell>
+
+          
+  </lido-container>
+
+</main>
 `;
 }

package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js

@@ -28,37 +28,37 @@ export const Default = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-        <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';" custom-style = "#audioCell:active {
-  box-shadow: 0px 0px 0px !important;
-  transform: translateY(7px);
-}" >
-	<lido-cell visible="true" layout="col" width="80%" height="90%" bg-color="transparent">
-    <!-- Chimple Avatar -->
-    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.56%, portrait.28%" y="landscape.200px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true">
-        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
-        </lido-avatar>
-        <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="0" y="235px">
-        </lido-image>
-    </lido-cell>
-
-		<lido-text visible="true" string="Choose the rhyming word" tab-index="1" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
-		<lido-text visible="false" id="inventedAudio" string="${args.correctAns}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
-		<lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
-			<lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
-		</lido-cell>
-		<lido-cell layout="col" visible="true" width="100%" height="50%" bg-color="transparent" padding="0">
-			<lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option1).toLowerCase()}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option2).toLowerCase()}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-			</lido-cell>
-			<lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option3).toLowerCase()}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option4).toLowerCase()}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option5).toLowerCase()}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
-			</lido-cell>
-		</lido-cell>
-	</lido-cell>
-</lido-player>
+    return `<main>
+        <lido-container disable-speak="true" id="lido-container" objective="${(args.correctAns).toLowerCase()}" is-continue-on-correct="${args.PracticeMode}" template-id="mcq" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Picture%20meaning.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail';" onEntry="inventedAudio.speak='true';" custom-style = "#audioCell:active {
+  box-shadow: 0px 0px 0px !important;
+  transform: translateY(7px);
+}" >
+	<lido-cell visible="true" layout="col" width="80%" height="90%" bg-color="transparent">
+    <!-- Chimple Avatar -->
+    <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.300px,portrait.402px" width="landscape.250px,portrait.398px" x="landscape.56%, portrait.28%" y="landscape.200px, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true">
+        <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv">
+        </lido-avatar>
+        <lido-image id="image" disableEdit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bgColor="transparent" width="inherit" height="27px" x="0" y="235px">
+        </lido-image>
+    </lido-cell>
+
+		<lido-text visible="true" string="Choose the rhyming word" tab-index="1" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
+		<lido-text visible="false" id="inventedAudio" string="${args.correctAns}" tab-index="2" font-size="80px" font-color="#07004E" border-radius="16px" bg-color="#FFF5BB" onEntry="this.fontWeight='700'; this.border='#FFB612 2px solid'; this.padding='25px 50px';"></lido-text>
+		<lido-cell visible="true" id="audioCell" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid'; this.boxShadow='0px 8px 0px #f34d08;'">
+			<lido-image visible="true" bg-color="transparent" width="100px" height="100px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Icons/palAudioIcon.png"></lido-image>
+		</lido-cell>
+		<lido-cell layout="col" visible="true" width="100%" height="50%" bg-color="transparent" padding="0">
+			<lido-cell layout="row" visible="true" width="70%" height="50%" bg-color="transparent">
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option1).toLowerCase()}" string="${args.option1}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option2).toLowerCase()}" string="${args.option2}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+			</lido-cell>
+			<lido-cell layout="row" visible="true" width="100%" height="50%" bg-color="transparent">
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option3).toLowerCase()}" string="${args.option3}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option4).toLowerCase()}" string="${args.option4}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+				<lido-text visible="true" disable-speak="true" width="400px" height="136px" type="click" value="${(args.option5).toLowerCase()}" string="${args.option5}" font-size="110px" border-radius="20px" font-color="black" onEntry="this.fontWeight='700';"></lido-text>
+			</lido-cell>
+		</lido-cell>
+	</lido-cell>
+</lido-player>
 </main>`;
 }

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

@@ -44,47 +44,47 @@ export const PalEgraMCQWithImage = {
     },
 };
 function getContainerXml(args) {
-    return `<main>
-		<lido-container disable-speak="true" id="lido-container" tab-index="1" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
-
-		<!-- Chimple Avatar -->
-		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1228px, portrait.273px" y="landscape.125px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
-			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" 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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
-			</lido-image>
-		</lido-cell>
-
-    <lido-text tab-index="2" id="invisibleText" value="click the correct option that describes the image shown in text." visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="click the correct option that describes the image shown in text." font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" ></lido-text>
-
-		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
-			<!-- Question -->
-			<lido-cell layout="flex" visible="true" width="518px" height="landscape.198px, portrait.25%" bg-color="#FFF5BB" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.75px 0px 0px 0px, portrait.0px 0px 0px 0px">
-					<lido-text id="textA" tab-index="3" value="${args.question}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.question}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="this.speak='true';"></lido-text>
-			</lido-cell>
-			
-			<!-- Options -->
-			<lido-cell layout="flex" visible="true" width="116%" height="90%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';" margin="landscape.-60px 0px -210px 0px, portrait.0px 0px 0px 0px">
-				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.85%, portrait.73%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.30px, portrait.55px" onEntry="">
-					<lido-cell tab-index="4" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"   value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" onCorrect="" onInCorrect="" audio='${args.audio1}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg1}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
-					</lido-cell>
-					<lido-cell tab-index="5" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" onCorrect="" onInCorrect="" audio='${args.audio2}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg2}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
-					</lido-cell>
-					<lido-cell tab-index="6" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option3}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio3}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg3}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
-					</lido-cell>
-					<lido-cell tab-index="7" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option4}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio4}' onTouch="this.speak='true';">
-						<lido-image visible="true" src="${args.optionImg4}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
-					</lido-cell>
-				</lido-cell>
-			</lido-cell>
-						<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
-				
-			</lido-cell>
-
-		</lido-cell>
-	</lido-container>
+    return `<main>
+		<lido-container disable-speak="true" id="lido-container" tab-index="1" value="maincontainer" objective="${args.correctAns}" aria-label="This is a multiple-option question. Select one option from the list." height="100vh" width="100vw" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="${args.isAllowOnlyCorrect}" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.1228px, portrait.273px" y="landscape.125px, portrait.1200px" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="" onEntry="this.animation='leftToPlace 1.5s linear';">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="350px" width="350px" 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="186px" height="40px" x="77px" y="302px" alt-text="{shadowImgae}">
+			</lido-image>
+		</lido-cell>
+
+    <lido-text tab-index="2" id="invisibleText" value="click the correct option that describes the image shown in text." visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="click the correct option that describes the image shown in text." font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" ></lido-text>
+
+		<lido-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+			<!-- Question -->
+			<lido-cell layout="flex" visible="true" width="518px" height="landscape.198px, portrait.25%" bg-color="#FFF5BB" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.75px 0px 0px 0px, portrait.0px 0px 0px 0px">
+					<lido-text id="textA" tab-index="3" value="${args.question}" visible="true" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.question}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px" onTouch="this.speak='true';"></lido-text>
+			</lido-cell>
+			
+			<!-- Options -->
+			<lido-cell layout="flex" visible="true" width="116%" height="90%" bg-color="transparent" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='bottomToPlace 1s linear';" margin="landscape.-60px 0px -210px 0px, portrait.0px 0px 0px 0px">
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.85%, portrait.73%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.30px, portrait.55px" onEntry="">
+					<lido-cell tab-index="4" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"   value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" onCorrect="" onInCorrect="" audio='${args.audio1}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg1}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="5" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" onCorrect="" onInCorrect="" audio='${args.audio2}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg2}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="6" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option3}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio3}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg3}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="7" type="click" visible="true" layout="col" width="landscape.25%, portrait.100%"  value="${args.option4}" height="50%" onEntry="this.borderRadius='25px'; this.padding='9px';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="" onInCorrect="" audio='${args.audio4}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg4}" width="90%" height="auto" border-radius="25px" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+				</lido-cell>
+			</lido-cell>
+						<lido-cell layout="flex" height="30%" width="100%" x="landscape.-50px, portrait.100px" y="507px" z="2" bg-color="transparent" type="" visible="landscape.false, portrait.true" audio="" onTouch="" onCorrect="" onEntry="this.justifyContent='center'; this.alignContent='center'; this.animation='leftToPlace 1.5s linear'; ">
+				
+			</lido-cell>
+
+		</lido-cell>
+	</lido-container>
 </main>`;
 }