lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js

@@ -82,57 +82,58 @@ export const Blanks = {
 function getContainerXml(args) {
     return `
    <main>
-		<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.png" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4}" 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="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1267px, portrait.541px" y="landscape.587px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+		<lido-container locale="hi" id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.png" objective="${args.answer1},${args.answer2},${args.answer3},${args.answer4}" 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">
+		 <lido-text id="fullSentence" visible="false" onEntry="this.display='none';" string="{full_sentence}" audio="{full_sentence_audio}"></lido-text>
+           <!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.-227px, portrait.541px" y="landscape.470px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='leftToPlace 2.5s linear';">
 			<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>
 
 		<!--Parent cell  -->
-		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
+		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent" margin="landscape.0,portrait.-90px 0px 0px 0px">
 			<!-- heading -->
 			<lido-cell   visible="true" margin="landscape.12px 0px -17px 0px, portrait.0px 0px 0px;">
-				<lido-text show-speak-icon="true" id="heading" tab-index="1" width="354px" visible="true" audio="${args.headingAudio}" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="black" font-size="landscape.36px, portrait.40px" bg-color="transparent" onEntry=" this.fontWeight='700';" margin="landscape.32px 0px 4px 0px,portrait.18px 0px 0px 0px">
+				<lido-text show-speak-icon="true" id="heading" tab-index="1" width="landscape.354px,portrait.433px" visible="true" audio="${args.headingAudio}" string="${args.heading}" font-family="'Baloo Bhai 2'" fontColor="black" font-size="landscape.45px, portrait.45px" bg-color="transparent" onEntry=" this.fontWeight='700';" margin="landscape.32px 0px 4px 0px,portrait.18px 0px 0px 0px">
 				</lido-text>
 			</lido-cell>
 			<!-- fill up based on image -->
 
-			<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.auto, portrait.69%" height="landscape.59%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';" margin="landscape.0 , portrait.18px 0px 0px 0px">
+			<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.90%, portrait.100%" height="landscape.70%, portrait.80%" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';" margin="landscape.0 , portrait.-18px 0px 0px 0px">
 
 				<!-- image -->
-				${args.img.length === 0 ? '' : `<lido-image id="image1" disable-edit="true" visible="true" src="${args.img}" width="landscape.515px, portrait.100%" height="landscape.100%, portrait.62%" margin="landscape.0px 0px 0px 0px , portrait. 0">
+				${args.img.length === 0 ? '' : `<lido-image id="image1" disable-edit="true" visible="true" src="${args.img}" width="landscape.542px, portrait.100%" height="landscape.100%, portrait.62%" margin="landscape.0px 0px 0px 0px , portrait. 0">
 				</lido-image>`}
 				<!-- text -->
 
 				
 
-				<lido-cell layout="flex" bg-Color="transparent"  visible="true" height="landscape.100%,portrait.auto" width="landscape.600px, portrait.97%" onEntry="this.align-content='center'; this.gap='32px';this.display='ruby';" margin="landscape.21px 0px 0px 61px, portrait.33px 0px 0px 64px">
+				<lido-cell layout="flex" bg-Color="transparent"  visible="true" height="landscape.100%,portrait.80%" width="landscape.754px, portrait.100%" onEntry="this.align-content='center'; this.gap='32px';this.display='ruby';" margin="landscape.21px 0px 0px 61px, portrait.45px 6px 0px 64px">
 
-					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text1}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="3" drop-attr="stretch" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer1}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
-					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text2}" bg-color="transparent" onEntry="this.position='relative';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
-					<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text3}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 18px 0px 0px';"></lido-text>
-					<lido-text tab-index="6" drop-attr="stretch" id="drop2" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer2}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; " ></lido-text>
-					<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text4}" bg-color="transparent"  onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text5}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="9" drop-attr="stretch" id="drop3" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer3}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px';  "></lido-text>
-					<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text6}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px';"></lido-text>
-					<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text7} " bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
-					<lido-text tab-index="12" id="drop4" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer4}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px'; this.margin-top='17px';" ></lido-text>
-					<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="40px" y="-10px" string="${args.text8}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='400';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text1}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="3" drop-attr="stretch" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer1}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow='';this.fontWeight='600'; this.margin-right='35px';" ></lido-text>
+					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text2}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text3}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 18px 0px 0px';"></lido-text>
+					<lido-text tab-index="6" drop-attr="stretch" id="drop2" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer2}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; this.fontWeight='600';" ></lido-text>
+					<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text4}" bg-color="transparent"  onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text5}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="9" drop-attr="stretch" id="drop3" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer3}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px';this.margin-top='17px'; this.fontWeight='600'; "></lido-text>
+					<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text6}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px';"></lido-text>
+					<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text7} " bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="12" id="drop4" disable-edit="true"  visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer4}" drop-Attr="stretch" type="drop" is-allow-only-one-drop="true" onEntry="this.border-radius='10px'; this.margin-right='35px'; this.fontWeight='600'; this.margin-top='17px';" ></lido-text>
+					<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.45px" y="-10px" string="${args.text8}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
 
 				</lido-cell>
 				
 			</lido-cell>
-			<lido-cell layout="landscape.row, portrait.wrap" childElementsLength="4" onEntry="this.gap='28px';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 383px 74px 0px, portrait.34px 128px 0px -113px">
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option1Audio}" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="40px"   type="drag">
+			<lido-cell layout="landscape.row, portrait.wrap" childElementsLength="4" onEntry="this.gap='28px';    this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 0px 74px 0px, portrait.34px 128px 0px 130px">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option1Audio}" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="landscape.46px,portrait.45px"   type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option2Audio}" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="40px"  type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option2Audio}" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="landscape.46px,portrait.45px"  type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option3Audio}" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='400'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="40px" type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option3Audio}" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="landscape.46px,portrait.45px" type="drag">
 				</lido-text>
-				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option4Audio}" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='400';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="40px"   type="drag">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="${args.option4Audio}" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="landscape.46px,portrait.45px"   type="drag">
 				</lido-text>
 			</lido-cell>
 			

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

@@ -2,6 +2,7 @@ import { html } from "lit";
 const meta = {
     title: 'Templates/letterPairing',
     argTypes: {
+        PracticeMode: { control: 'boolean' },
         question: { control: 'text' },
         questionAudio: { control: {
                 type: 'file',
@@ -82,6 +83,7 @@ const meta = {
 export default meta;
 export const LetterPairing = {
     args: {
+        PracticeMode: false,
         question: 'Match the jump number to the number reached when skip jumping by 3.',
         questionAudio: '',
         dropimg1: 'https://aeakbcdznktpsbrfsgys.storage.supabase.co/v1/object/public/template-assets/LetterPair/Cat.png',
@@ -132,7 +134,7 @@ export const LetterPairing = {
 };
 function getContainerXml(args) {
     return `<main>
-    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" is-allow-only-correct="true" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation">
+    <lido-container id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="this.sleep='2000';" is-allow-only-correct="${args.PracticeMode}" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" dropAttr="EnableAnimation">
 				<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="landscape.205px,portrait.195px" width="landscape.209px,portrait.209px" x="landscape.2%,portrait.80%" y="landscape.85px,portrait.146px" ariaHidden="true" bgColor="transparent" visible="true"  onEntry="">
 				<lido-avatar id="lido-avatar" disableEdit="true" visible="true"  height="100%"  width="100%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}">

package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js

@@ -99,7 +99,7 @@ function getContainerXml(args) {
     return `
   <main> 
        
-      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="${isAllowOnlyCorrect}" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='1000'; heading.speak='true'; " show-check="false" bg-image="${args.backgroundImage}" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false" drop-action="infinite-drop">
+      <lido-container id="lido-container" objective="${objective}" show-drop-border="false" tab-index="1" is-allow-only-correct="${isAllowOnlyCorrect}" is-continue-on-correct="true" onCorrect="fullRrocket.animation='placeToLeft 2.5s 1s linear'; this.sleep='1000'; heading.speak='true'; " show-check="false" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Rocket.png" visible="true" onEntry="this.overflowY='hidden'; this.overflowX='hidden'; this.background-color='transparent';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" after-drop="false" drop-action="infinite-drop">
           <lido-cell layout="pos" id="pos1" disable-edit="true" tab-index="2" value="pos2" height="305px" width="227px" x="landscape.1270px, portrait.541px" y="landscape.-60px, portrait.250px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
               <lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
               </lido-avatar>

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

@@ -30,7 +30,7 @@ export const arrangeLetters = {
 };
 function getContainerXml(args) {
     return `<main>
-<lido-container visible="true" objective="${args.answers}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/phonic-tractor/bg-image.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
+<lido-container visible="true" objective="${args.answers}" is-continue-on-correct="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Arrange%20letters.png" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.sleep='1000'; this.slideAnimation='true';">
 
 	<!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.372px,portrait.476px" width="landscape.366px,portrait.467px" x="landscape.71%, portrait.52%" y="landscape.105px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">

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

@@ -34,7 +34,7 @@ function getContainerXml(args) {
     const rightValue = escapeXml(args.rightValue);
     return `
    <main>
-    <lido-container visible="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
+    <lido-container visible="true" drop-action="move"  objective="${objective}"  equationCheck="$#lefthandle1,$#righthandle1" id="lido-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" show-Check="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Balancing.png" is-continue-on-correct="true">
      <!-- Chimple Avatar -->
     <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.396px,portrait.400px" width="landscape.298px,portrait.369px" x="landscape.82%, portrait.32%" y="landscape.63%, 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}">

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

@@ -0,0 +1,100 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/blender',
+    argTypes: {
+        number: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
+    },
+};
+export default meta;
+export const OrderTractor = {
+    args: {
+        number: '211',
+        isAllowOnlyCorrect: 'true',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function buildObjectiveFromNumber(num) {
+    num = parseInt(num);
+    const hundreds = Math.floor(num / 100);
+    const tens = Math.floor((num % 100) / 10);
+    const ones = num % 10;
+    const build = (count, value) => {
+        if (count === 0)
+            return "";
+        let s = "";
+        for (let i = 0; i < count; i++) {
+            s += value;
+            if (i < count - 1)
+                s += "|";
+        }
+        return `(${s})`;
+    };
+    const hStr = build(hundreds, "100");
+    const tStr = build(tens, "10");
+    const oStr = build(ones, "1");
+    const objective = [hStr, tStr, oStr].filter(s => s !== "").join(",");
+    return {
+        objective, // same as before
+    };
+}
+function getContainerXml(args) {
+    const { objective } = buildObjectiveFromNumber(args.number);
+    return `
+    <main>
+        <lido-container id="lido-container" visible="true" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Blender.png" drop-action="infinite-drop" is-allow-only-correct="${args.isAllowOnlyCorrect}">
+ <!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1332px, portrait.-8%" y="landscape.547px, portrait.1%" aria-hidden="true" z="0" 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="pos" bg-color="transparent" visible="true" height="landscape.5px,portrait.70%" width="landscape.7px,portrait.90%" x="landscape.745px, portrait.44%" y="landscape.65px, portrait.8%" >
+	    <lido-text visible="true"  value="${args.number}" string="${args.number}" font-family="'Baloo Bhai 2'" font-color="#182A4F" font-size="52px" bg-color="#FFE99B" width="147px" onEntry="this.fontWeight='800';this.border='5px solid #FFC805';this.border-radius='10px';" border-image=""></lido-text>
+	</lido-cell>
+	<lido-cell layout="row" bg-color="transparent" visible="true" height="landscape.60%,portrait.1120px" width="landscape.90%,portrait.900px" gap="1px" margin="landscape.86px 0px 0px 0px,portrait.258px 0px 0px 0px" padding="0px">
+			<!-- Hundreds Place Value -->
+		<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051.8px" width="landscape.720px,portrait.810px" padding="0px">
+			<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.704px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+				<lido-text visible="true"  value="Hundreds" string="Hundreds" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			    <lido-text id="hundreds" height="70px" width="108px" visible="true" value="000" string="000" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			</lido-cell>
+			<lido-cell id="hundredsDrop" value="100" dropAttr="landscape.stackcascade,portrait.verticalstack" is-allow-only-one-drop="false" type="drop" tab-index="1" layout="row" bg-color="white" visible="true" height="landscape.359px,portrait.752px" width="landscape.698px,portrait.290px" onEntry="this.justifyContent='flex-start';">
+			</lido-cell>
+		</lido-cell>
+		<!-- Tens Place Value -->
+		<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.432px,portrait.810px" padding="0px">
+		    <lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.426px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+			    <lido-text visible="true"  value="Tens" string="Tens" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px" onInCorrect=""  onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			    <lido-text id="tens" height="70px" width="77px" visible="true"  value="00" string="00" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			</lido-cell>
+			<lido-cell id="tensDrop" value="10" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="2" layout="row" bg-color="white" visible="true" height="landscape.357px,portrait.752px" width="landscape.414px,portrait.290px" onEntry="this.justifyContent='flex-start';" ></lido-cell>
+		</lido-cell>
+		<!-- Units Place Value -->
+		<lido-cell layout="col" bg-color="transparent" visible="true" height="landscape.506.25px,portrait.1051px" width="landscape.331px,portrait.810" padding="0px">
+			<lido-cell layout="landscape.row,portrait.col" bg-color="#5D44BD" visible="true" height="landscape.85px,portrait.261px" width="landscape.310px,portrait.269px"  margin="landscape.71px 0px 0px 0px,portrait.0">
+			    <lido-text visible="true"  value="Units" string="Units" font-family="'Baloo Bhai 2'" font-color="white" font-size="52px"  onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			    <lido-text id="units" height="70px" width="55px" visible="true"  value="0" string="0" font-family="'Baloo Bhai 2'" font-color="#182A4F" border-radius="21px" bg-color="white" font-size="52px" onInCorrect="" onEntry="this.fontWeight='800';" border-image="">
+			    </lido-text>
+			</lido-cell>
+			<lido-cell id="unitsDrop" value="1" dropAttr="landscape.stackcascade,portrait.verticalstack" type="drop" is-allow-only-one-drop="false" tab-index="3" layout="row" bg-color="white" visible="true" height="landscape.360px,portrait.752px" width="landscape.310px,portrait.290px" onEntry="this.justifyContent='flex-start';"></lido-cell>
+		</lido-cell>
+	</lido-cell>
+
+	<lido-cell layout="row" bg-color="transparent" aria-hidden="true" visible="true" height="landscape.420px,portrait.30%" width="landscape.1451px,portrait.90%"  onEntry="this.z-index='1';">
+		<lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="35px" visible="true"></lido-math-matrix>
+		<lido-math-matrix  id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1"  defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="35px" visible="true"></lido-math-matrix>
+		<lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1"  defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="100px" visible="true"></lido-math-matrix> 
+	  </lido-cell>		
+	
+</lido-container>
+    </main>
+  `;
+}

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

@@ -41,7 +41,7 @@ function getContainerXml(args) {
   `)
         .join('');
     return `<main>
-              <lido-container id="lido-container" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png">
+              <lido-container id="lido-container" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" is-continue-on-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Bubble%20type.png">
 
 
                         <lido-text tab-index="1" visible="false" string="Click the bubbled Letter"></lido-text>

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

@@ -5,6 +5,8 @@ const meta = {
         number1: { control: 'text' },
         number2: { control: 'text' },
         symbol: { control: 'text' },
+        isContinueOnCorrect: { control: 'boolean' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -13,6 +15,8 @@ export const calculator = {
         number1: '10',
         number2: '5',
         symbol: '+',
+        isContinueOnCorrect: true,
+        isAllowOnlyCorrect: true,
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -22,7 +26,7 @@ export const calculator = {
 function getContainerXml(args) {
     return `
    <main>
-    <lido-container visible="true" id="lido-container" objective="" equationCheck="$#numb1,$#symbol,$#numb2" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" onInCorrect="lido-avatar.avatarAnimate='Fail';" onCorrect="lido-avatar.avatarAnimate='Success';answer.updatedAnswer='true';this.sleep='2500';" is-continue-on-correct="true" >
+    <lido-container visible="true" id="lido-container" objective="" equationCheck="$#numb1,$#symbol,$#numb2" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Calculator.png" onInCorrect="lido-avatar.avatarAnimate='Fail';" is-allow-only-correct="${args.isAllowOnlyCorrect}" onCorrect="lido-avatar.avatarAnimate='Success';answer.updateCalculatorAnswer='true';this.sleep='2500';" is-continue-on-correct="${args.isContinueOnCorrect}" >
 		<lido-text visible="true" z="1" height="100px" width="400px" y="landscape.8%,portrait.-17%" x="landscape.-21%,portrait.0px" font-size="56px" font-color="white" onEntry="this.position='relative';this.font-weight='600';"  string="WRITE HERE"></lido-text>
 		<lido-cell layout="col" visible="true" height="10px" width="254px" bg-color="transparent" z="1" y="landscape.18%,portrait.-15%" x="landscape.-12%,portrait.19%" onEntry="this.align-items='center'; this.jsutifyContent='space-around'; this.position='relative';">
 			<lido-text visible="true" height="100px" width="400px" id="numb1" tab-index="1" font-size="106px" font-color="black" value="${args.number1}" string="${args.number1}" y="" z="1" x="" onEntry="this.position='relative';this.font-weight='900';"></lido-text>
@@ -35,7 +39,7 @@ function getContainerXml(args) {
 		</lido-cell>
 		<lido-canvas visible="true" width="700px" heigth="800px" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/s1.png" y="landscape.10%,portrait.6%" x="landscape.4%,portrait.6%"   ></lido-canvas>
 		<lido-cell visible="true" height="700px" width="470px"  onEntry="this.position='relative';" y="landscape.-2%,portrait.23%" x="landscape.456px,portrait.9%" >
-			<lido-calculator visible="true" height="700px" width="470px"  onEntry="this.position='relative';" ></lido-calculator>
+			<lido-calculator id="lidoCalculator" visible="true" height="700px" width="470px"  onEntry="this.position='relative';" ></lido-calculator>
 		</lido-cell>
     <!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.396px,portrait.400px" width="landscape.298px,portrait.369px" x="landscape.48%, portrait.-2%" y="landscape.60%, portrait.77%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">

package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js

@@ -37,7 +37,7 @@ function getContainerXml(args) {
     })
         .join("\n");
     return `<main>
-    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" 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/create%20sentence/Spring.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" 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/background-images/Checker%20blocks.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
 
     <!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.270px" width="landscape.350px,portrait.270px" x="landscape.500px, portrait.-9%" y="landscape.522px, portrait.36%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">

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

@@ -19,7 +19,7 @@ function getContainerXml(args) {
     const shape = generateSlots();
     console.log("shape : ", shape);
     return `<main>
-    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="nammadha" onCorrect="this.sleep='120000';">
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="nammadha" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Checker%20blocks.png" onCorrect="this.sleep='120000';">
 	<lido-math-matrix id="matrix3" visible="true" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" active-bg-color="#deb3f2" clickable="false" type="checkerBlock"></lido-math-matrix>
 
 	<lido-cell visible="true" layout="pos" x="0" y="0">

package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js

@@ -96,7 +96,7 @@ export const CreateSentence = {
 };
 function getContainerXml(args) {
     return `<main>
-	<lido-container id="lido-container" is-allow-only-correct="true" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8}" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png" visible="true" audio="" onCorrect="lido-avatar.avatarAnimate='Success'; pos5.animation='placeToLeft 2.5s linear';pos2.animation='placeToLeft 2.5s linear'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false"  appendToDropOnCompletion="true">
+	<lido-container id="lido-container" is-allow-only-correct="true" value="maincontainer" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8}" x="0" y="0" z="0" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Create%20sentence.png" visible="true" audio="" onCorrect="lido-avatar.avatarAnimate='Success'; pos5.animation='placeToLeft 2.5s linear';pos2.animation='placeToLeft 2.5s linear'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false"  appendToDropOnCompletion="true">
 		<lido-cell visible="false" id="speak-con">
 			<lido-text id="sentenceText" string="${args.correct}"/>
 		</lido-cell>

package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js

@@ -11,13 +11,14 @@ const meta = {
         option2: { control: 'text' },
         option3: { control: 'text' },
         option4: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
 export const OrderTractor = {
     args: {
         firstNum: '3', operator: '+', secontNum: '4', equator: '=', answer: '7',
-        option1: '5', option2: '7', option3: '3', option4: '2',
+        option1: '5', option2: '7', option3: '3', option4: '2', isAllowOnlyCorrect: 'true',
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -27,7 +28,7 @@ export const OrderTractor = {
 function getContainerXml(args) {
     return `
     <main>
-	<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.png" objective="${args.answer}" 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">
+	<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png" objective="${args.answer}" 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="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1267px, portrait.541px" y="landscape.587px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
 			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">

package/dist/collection/stories/Templates/fillBlank/fill-blank.stories.js

@@ -40,7 +40,7 @@ function getContainerXml(args) {
     height="100%"
     width="100%"
     bgColor="transparent"
-    bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/grid-game//Sky.png"
+    bgImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png"
     visible="true"
     showCheck="false"
     isContinueOnCorrect="true"

package/dist/collection/stories/Templates/foodJar/food-jar.stories.js

@@ -12,6 +12,7 @@ const meta = {
         option3: { control: 'text' },
         option4: { control: 'text' },
         option5: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -19,6 +20,7 @@ export const OrderTractor = {
     args: {
         firstNum: '10', operator: '+', secondNum: '5', equator: '=', answer: '15',
         option1: '=', option2: '5', option3: '+', option4: '15', option5: '10',
+        isAllowOnlyCorrect: 'true',
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -28,7 +30,7 @@ export const OrderTractor = {
 function getContainerXml(args) {
     return `
     <main>
-	<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/Sky.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" 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" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;}  ">
+	<lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Food%20Jar.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" 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" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;}  ">
 	<!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.100px" 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}">

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

@@ -1,10 +1,14 @@
 import { html } from "lit";
 const meta = {
     title: 'Templates/Grid',
+    argTypes: {
+        PracticeMode: { control: 'boolean' },
+    }
 };
 export default meta;
 export const Options = {
     args: {
+        PracticeMode: false,
         option1: 'chop',
         option2: 'chug',
         option3: 'chad',
@@ -31,7 +35,7 @@ export const Options = {
 };
 function getContainerXml(args) {
     return `<main>
-				<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" is-allow-only-correct="true">
+				<lido-container id="lido-container" value="mainContainer1" drop-action="move" objective="${args.correct1},${args.correct2},${args.correct3},${args.correct4},${args.correct5},${args.correct6},${args.correct7},${args.correct8},${args.correct9}" height="100%" width="100%" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="false" after-drop="false" is-allow-only-correct="${args.PracticeMode}">
 
 		<!-- Chimple Avatar -->
 		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.0, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">

package/dist/collection/stories/Templates/gridGame/grid-game.stories.js

@@ -39,7 +39,7 @@ export const DefaultGame = {
 };
 function getContainerXml(args) {
     return `<main>
-<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="${args.bgImage}" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+<lido-container id="lido-container" tab-index="1" objective="${args.draggable1Word},${args.draggable2Word},${args.draggable3Word},${args.draggable4Word},${args.draggable5Word},${args.draggable6Word},${args.draggable7Word},${args.draggable8Word},${args.draggable9Word}" is-allow-only-correct="true" value="mainContainer1" height="100%" width="100%" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Grid.png" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
 
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="landscape.1274px, portrait.541px" y="landscape.591px, portrait.1274px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
 		<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="462px" width="356px" src="${args.avatarSrc}" alt-text="{chimpleCharacterRive}"></lido-avatar>

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

@@ -2,6 +2,7 @@ import { html } from "lit";
 const meta = {
     title: 'Templates/JumpSentence',
     argTypes: {
+        PracticeMode: { control: 'boolean' },
         cells: {
             control: { type: 'object' },
         },
@@ -11,6 +12,7 @@ const meta = {
 export default meta;
 export const QuestionAndOptions = {
     args: {
+        PracticeMode: false,
         cells: [
             { value: 'Y', type: 'drop' },
             { value: 'o', type: 'drop' },
@@ -48,9 +50,9 @@ function getContainerXml(args) {
     <lido-container id="lido-container" visible="true" objective="${objective}" 
       onCorrect="lido-avatar.avatarAnimate='Success'; sentenceText.speak='true'; this.sleep='2000';" 
       onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onEntry="sentenceText.speak='true';"
-      is-continue-on-correct="true" bg-color="transparent" 
+      is-continue-on-correct="false" bg-color="transparent" 
       bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Underwater.png" 
-      drop-action="infinite-drop" is-allow-only-correct="true">
+      drop-action="infinite-drop" is-allow-only-correct="${args.PracticeMode}">
 
       <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" 
         height="landscape.500px, portrait.600px" width="landscape.350px, portrait.450px" 

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

@@ -17,7 +17,7 @@ export const letterBoard = {
 };
 function getContainerXml(args) {
     return `<main>
- <lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="true" drop-action="move" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/bg.png" objective="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
+ <lido-container id="lido-container" show-drop-border="false" is-allow-only-correct="true" drop-action="move" tab-index="1" value="mainContainer1"  bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Letter%20board.png" objective="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';this.sleep='2000'; " onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';" 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="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
 			

package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js

@@ -6,6 +6,7 @@ const meta = {
         option1: { control: 'text' },
         option2: { control: 'text' },
         option3: { control: 'text' },
+        isAllowOnlyCorrect: { control: 'boolean' },
     },
 };
 export default meta;
@@ -13,6 +14,7 @@ export const OrderTractor = {
     args: {
         answer: 'correct',
         option1: 'incorrect', option2: 'correct', option3: 'incorrect',
+        isAllowOnlyCorrect: 'true',
     },
     render: args => {
         const xml = getContainerXml(args);
@@ -22,7 +24,7 @@ export const OrderTractor = {
 function getContainerXml(args) {
     return `
     <main>
-     <lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Spring.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; 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" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
+     <lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Matching%20card.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; 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" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
 	<!-- Chimple Avatar -->
 	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.318px" 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}">

package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js

@@ -2,6 +2,7 @@ import { html } from "lit-html";
 const meta = {
     title: 'Templates/MCQWithQuestionImage',
     argTypes: {
+        PracticeMode: { control: 'boolean' },
         question: { control: 'text' },
         questionImg: { control: 'file' },
         questionAudio: { control: {
@@ -38,6 +39,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
+        PracticeMode: false,
         question: 'I have less than double of 3 marbles. I have more than half of 8 marbles. How many marbles do I have?',
         questionImg: "https://aeakbcdznktpsbrfsgys.storage.supabase.co/v1/object/public/template-assets/fill-in-the-blanks/image%201.png",
         questionAudio: '',
@@ -70,11 +72,11 @@ function getContainerXml(args) {
     <lido-container id="lido-container" 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/trace/Sky.png"
+    bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/MCQ.png"
     visible="true" audio="background1.mp3" onTouch=""
     onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
     onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
-    show-check="false" is-continue-on-correct="true" onEntry="">
+    show-check="false" is-continue-on-correct="${args.PracticeMode}" onEntry="">
 
     <!-- Chimple Avatar -->
     <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1"