lido-player 0.0.2-alpha-58-dev → 0.0.2-alpha-60-dev

package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js

@@ -0,0 +1,89 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgmaCalculateSum',
+    argTypes: {
+        missingNumber: { control: 'text', name: 'missing number' },
+        number1: { control: 'text', name: 'Number 1' },
+        number2: { control: 'text', name: 'Number 2' },
+        options: { control: 'object', name: 'digits' },
+        sign: { control: 'text', name: 'sign', defaultValue: '+' },
+        isAllowOnlyCorrect: { control: 'boolean', name: 'isAllowOnlyCorrect' },
+    },
+    args: {
+        missingNumber: '60',
+        number1: '36',
+        number2: '24',
+        sign: '+',
+        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        isAllowOnlyCorrect: true,
+    },
+};
+export default meta;
+export const PalEgmaSumTogether = {
+    render: (args) => {
+        const xml = getContainerXml(args);
+        return html `<lido-home xml-data="${xml}" xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    var _a, _b;
+    const missingNumber = args.missingNumber;
+    const number1 = args.number1;
+    const number2 = args.number2;
+    const options = args.options;
+    const sign = (_a = args.sign) !== null && _a !== void 0 ? _a : '+';
+    const isAllowOnlyCorrect = (_b = args.isAllowOnlyCorrect) !== null && _b !== void 0 ? _b : true;
+    const objectiveString = `${missingNumber.split('').join(',')}`;
+    const objectiveArray = missingNumber.split('');
+    const dropCells = objectiveArray
+        .map((cell, i) => `
+      <lido-text visible="true" id="drop-${i}" type="drop" tab-index="${25 + i}" height="212px" width="130px" string="?" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="#FFF5BBB2" value="${cell}" onEntry="this.fontWeight='700';this.border='2px solid #FFB612';this.border-radius='16px';" >
+      </lido-text>	
+      `)
+        .join('\n');
+    const dragCells = options
+        .map((digit, i) => `
+      <lido-text id="drag-${digit}" tab-index="${50 + i}" height="landscape.212px, portrait.125px" width="landscape.140px, portrait.90px" visible="true" value="${digit}" string="${digit}" font-family="'Baloo Bhai 2'" font-color="black" type="drag" font-size="104px"  bg-color="#FFAC4C"  onEntry="this.fontWeight='800'; this.borderRadius='16px'; this.flex-shrink='0';" border-image="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
+      </lido-text>
+    `)
+        .join('\n');
+    return `
+    <main>
+        <lido-container id="lido-container" objective="${objectiveString}" tab-index="1" template-id="dragAndDrop" show-drop-border="false" is-continue-on-correct="true"  is-allow-only-correct="${isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGMA/pal_egma_temp_3.png" height="100%" width="100%" bg-color="transparent"  visible="true" onCorrect="this.questionBoxAnimate='true'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="this.justifyContent='space-around'; invisibleText.speak='true';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" drop-action="infinite-drop" show-check="false">
+
+            <!-- Chimple Avatar -->
+            <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.600px, portrait.700px" width="landscape.393px, portrait.485px" x="landscape.1310px, portrait.450px" y="landscape.100px, portrait.1020px" aria-hidden="true" z="1" bg-color="transparent" visible="true"  onEntry="this.flex-shrink='0';">
+                <lido-avatar id="lido-avatar" disable-edit="true" visible="true"  height="inherit"  width="inherit" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" altText="{chimpleCharacterRive}" onEntry="">
+                </lido-avatar>
+                <lido-image id="image" disable-edit="true" value="image" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/Shadow.png" bg-color="transparent" width="inherit" height="27px" x="landscape.-7px, portrait.-7px" y="landscape.450px, portrait.540px" altText="{shadowImage}">
+                </lido-image>
+            </lido-cell>
+
+            <lido-text id="invisibleText" tab-index="2" audio="" width="297px" height="80px" display="flex" font-size="12px" z="1" font-color="black" value="solve the equation and drag the correct answer" string="solve the equation and drag the correct answer" visible="false" bg-color="transparent" onEntry="">
+            </lido-text> 
+
+            <!-- question row-->
+            <lido-cell layout="row" id="question-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.15%" width="landscape.65%, portrait.90%" bg-Color="transparent" margin="landscape.215px 0px 30px 0px,portrait.25px 0px -120px 0px" onEntry="this.z-index='1'; this.justify-content='center';" gap="landscape.60px,portrait.40px">
+                <lido-text id="num-1" height="215px" width="120px" visible="true"  value="${number1}" string="${number1}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="operator"  height="295px" width="120px" visible="true"  value="${sign}" string="${sign}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="num-2"  height="215px" width="120px" visible="true"  value="${number2}" string="${number2}" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-text id="equal" height="215px" width="120px" visible="true"  value="=" string="=" font-family="'Baloo Bhai 2'" font-color="black" font-size="140px"  bg-color="transparent" onInCorrect="" onEntry="this.font-weight='700'; this.borderRadius='10px'; this.flex-flow='column-reverse'; this.opacity='1';" border-image="">
+                </lido-text>
+                <lido-cell layout="row" is-slice="true" visible="true" height="landscape.20%,portrait.41%" width="auto" bg-Color="transparent" onEntry="this.z-index='1';" onCorrect="" gap="landscape.10px,portrait.5px">
+                  ${dropCells}
+                </lido-cell>
+            </lido-cell>
+
+
+            <!-- answers drag cell -->
+            <!-- option row-->
+            <lido-cell layout="landscape.row, portrait.wrap" id="option-row" aria-hidden="true" visible="true" height="landscape.15%,portrait.5%" width="landscape.90%, portrait.106%" bg-Color="transparent" margin="landscape.65px 0px 65px 0px,portrait.-160px -65px 500px 0px" onEntry="this.z-index='1'; this.justify-content='center'; this.opacity='1';" gap="landscape.20px,portrait.5px">
+                ${dragCells}
+            </lido-cell>
+        </lido-container>
+    </main>
+  `;
+}

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

@@ -0,0 +1,86 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgmaPatternMatching',
+    argTypes: {
+        options: { control: 'object' },
+        answers: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgmaPatternMatching = {
+    args: {
+        question_text: 'Complete the pattern',
+        questions: ['975', '976', '@977', '978', '979'],
+        options: ['977', '980', '957', '947'],
+        PracticeMode: false,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    // ---------------------- FINAL XML ----------------------
+    const question_cells = args.questions.map((q, index) => {
+        const isHidden = q === null || q === void 0 ? void 0 : q.startsWith('@');
+        const actualValue = isHidden ? q.slice(1) : q;
+        const questionString = isHidden ? '? ' : q;
+        // add comma except for last item
+        const comma = index < args.questions.length - 1 ? ' ,' : '';
+        return `
+      <lido-text
+        visible="true" tab-index="${1 + index}"
+        value="${actualValue}"
+        string="${questionString}${comma}"
+        font-family="'Baloo Bhai 2'"
+        font-color="#07004E"
+        font-size="landscape.130px, portrait.100px"
+        bg-color=""
+        onEntry="this.fontWeight='800';">
+      </lido-text>  
+  `;
+    }).join('');
+    const opion_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}" 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  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';">
+	 <!-- 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">
+            ${opion_cells}
+          </lido-cell>
+
+          
+    </lido-cell>
+
+</lido-container>
+</main>
+`;
+}

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

@@ -0,0 +1,131 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/palEgmaWordProblem',
+    argTypes: {
+        options: { control: 'object' },
+        answers: { control: 'object' },
+        PracticeMode: { control: 'boolean' },
+    },
+};
+export default meta;
+export const palEgmaWordProblem1 = {
+    args: {
+        question2: 'George went to a store and bought some t-shirts. He went to another store and bought 2 more t-shirts. He bought a total of 15 t-shirts. How many t-shirts did he buy at the first store?',
+        answer: '13',
+        options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        PracticeMode: false,
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const dragCells = args.options
+        .map((digit, i) => `
+      <lido-text id="drag${i}" tab-index="${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}" tab-index="${i}" disable-edit="true" 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 solid #f69820'" border-image="">
+      </lido-text>
+      `)
+        .join('\n');
+    // ---------------------- FINAL XML ----------------------
+    return `
+<main>
+
+  <lido-container id="lido-container" 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="" 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 = {
+    args: {
+        question2: 'George went to a store and bought some t-shirts. He went to another store and bought 2 more t-shirts. He bought a total of 15 t-shirts. How many t-shirts did he buy at the first store?',
+        answer: '13',
+        options: ['10', '15', '12', '13'],
+        PracticeMode: false,
+    },
+    render: args => {
+        const xml = getContainerXml1(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml1(args) {
+    const optionCells = args.options
+        .map((digit, i) => `
+      <lido-text id="drag${i}" tab-index="${i}" 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="" 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

@@ -0,0 +1,61 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/InventedSpelling',
+    argTypes: {
+        PracticeMode: { control: 'boolean' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+        correctAns: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        PracticeMode: false,
+        option1: 'kot',
+        option2: 'loy',
+        option3: 'fen',
+        option4: 'dob',
+        option5: 'vil',
+        correctAns: 'toy',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+    <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';">
+	<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" layout="row" width="160px" height="160px" onTouch="inventedAudio.speak='true';" bg-color="white" border-radius="70px" onEntry="this.border='#ffac4c 2px solid';">
+			<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" 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" 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" 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" 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" 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

@@ -0,0 +1,87 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/palEgraMCQWithImage',
+    argTypes: {
+        question: { control: 'text' },
+        option1: { control: 'text' },
+        audio1: { control: 'text' },
+        optionImg1: { control: 'text' },
+        audio2: { control: 'text' },
+        option2: { control: 'text' },
+        optionImg2: { control: 'text' },
+        option3: { control: 'text' },
+        audio3: { control: 'text' },
+        optionImg3: { control: 'text' },
+        option4: { control: 'text' },
+        audio4: { control: 'text' },
+        optionImg4: { control: 'text' },
+        correctAns: { control: 'text' },
+    },
+};
+export default meta;
+export const PalEgraMCQWithImage = {
+    args: {
+        question: 'हाथी',
+        option1: 'ELEPHANT',
+        audio1: '',
+        optionImg1: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/elephant.png',
+        option2: 'TORTOISE',
+        audio2: '',
+        optionImg2: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/tortoise.png',
+        option3: 'RAT',
+        audio3: '',
+        optionImg3: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/rat.png',
+        option4: 'RAT',
+        audio4: '',
+        optionImg4: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/rat.png',
+        correctAns: 'ELEPHANT',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `<main>
+		<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/PAL-EGRA/palEgraTemplate3.png" visible="true" audio="background1.mp3" onTouch="" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
+
+		<!-- 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-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="1" 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="100%" 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.0px, portrait.55px" onEntry="">
+					<lido-cell tab-index="2" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option1}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio1}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg1}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="3" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option2}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio2}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg2}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="4" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option3}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio3}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg3}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" onEntry="this.marginTop='10px';"></lido-image>
+					</lido-cell>
+					<lido-cell tab-index="5" type="click" visible="true" layout="col" bg-color="transparent" width="landscape.25%, portrait.100%"  value="${args.option4}" height="50%" onEntry="this.borderRadius='25px'; this.padding='0';" margin="landscape.0, portrait.20px 0 0 0" onCorrect="this.cellBorderAnimate='#65BC46';" onInCorrect="this.vibrate='horizontal-shake';" audio='${args.audio4}' onTouch="this.speak='true';">
+						<lido-image visible="true" src="${args.optionImg4}" bg-color="transparent" width="90%" height="auto" border-radius="25px 25px 0 0" 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>`;
+}

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

@@ -0,0 +1,98 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Templates/palEgraOptionWithAudio',
+    argTypes: {
+        option1: { control: 'text' },
+        audio1: { control: 'text' },
+        audio2: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        audio3: { control: 'text' },
+        option4: { control: 'text' },
+        audio4: { control: 'text' },
+        audioImage: { control: 'text' },
+    },
+};
+export default meta;
+export const PalEgraOptionWithAudio = {
+    args: {
+        option1: 'अम्मा',
+        audio1: '',
+        option2: 'क्या',
+        audio2: '',
+        option3: 'ख्याल',
+        audio3: '',
+        option4: 'मख्खी',
+        audio4: '',
+        audioImage: 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png'
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const objective = `${args.option1.trim()},${args.option2.trim()},${args.option3.trim()},${args.option4.trim()}`;
+    return `<main>
+		<lido-container id="lido-container" tab-index="1" template-id="dragAndDrop" value="maincontainer" objective="${objective}" 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/palEgraTemplate9.png" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="true">
+
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="350px" width="350px" x="landscape.625px, portrait.273px" y="landscape.40px, portrait.1200px" aria-hidden="true" z="0" bg-color="transparent" type="" visible="true" audio="" 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-cell visible="true" layout="col" width="100%" height="100%" bg-color="transparent">
+
+      <!-- Question -->
+			<lido-cell layout="row" visible="true" width="100%" height="landscape.150px, portrait.25%" bg-color="transparent" onEntry="this.justifyContent='center'; this.borderRadius='16px'; this.alignContent='center'; this.animation='topToPlace 0.5s linear';" margin="landscape.125px 0px 60px 0px, portrait.0px 0px 0px 0px" gap="190px">
+        <lido-image id="icon1" type="click" is-slice="true" disable-edit="true" value="image1" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text1.speak='true';">
+          <lido-text id="text1" tab-index="2" value="${args.option1}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option1}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon2" type="click" is-slice="true" disable-edit="true" value="image2" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text2.speak='true';">
+          <lido-text id="text2" tab-index="3" value="${args.option2}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option2}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon3" type="click" is-slice="true" disable-edit="true" value="image3" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text3.speak='true';">
+          <lido-text id="text3" tab-index="4" value="${args.option3}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option3}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+        <lido-image id="icon4" type="click" is-slice="true" disable-edit="true" value="image4" visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/PAL-EGRA/PalEgraTempAudioIcon.png" bg-color="transparent" width="225px" height="240px" x="77px" y="302px" alt-text="" onTouch="text4.speak='true';">
+          <lido-text id="text4" tab-index="5" value="${args.option4}" visible="false" width="1000px" height="100px" onEntry="this.boxShadow='unset'; this.fontWeight='700';" string="${args.option4}" font-family="'Baloo 2', serif" font-size="90px" font-color="black" bg-color="transparent" z="0" x="25px" y="20px">
+          </lido-text>
+			  </lido-image>
+			</lido-cell>
+
+
+      <!-- drop boxes -->
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.25px, portrait.55px" onEntry="">
+					<lido-text id="drop1" tab-index="6" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option1}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop2" tab-index="7" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option2}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop3" tab-index="8" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option3}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>
+          <lido-text id="drop4" tab-index="9" type="drop" visible="true" bg-color="#FFFFFF;" width="landscape.320px, portrait.100%"  value="${args.option4}" height="212px" onEntry="this.borderRadius='25px'; this.padding='0';" onCorrect="lido-avatar.avatarAnimate='Success';" onInCorrect="lido-avatar.avatarAnimate='Fail';">
+					</lido-text>					
+				</lido-cell>
+			
+			<!-- drag Options -->
+				<lido-cell visible="true" layout="landscape.row, portrait.wrap" width="landscape.100%, portrait.90%" height="landscape.100%, portrait.auto" bg-color="transparent" gap="landscape.70px, portrait.55px" onEntry="">
+					<lido-text id="drag1" tab-index="10" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option1}" value="${args.option1}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag2" tab-index="11" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option2}" value="${args.option2}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag3" tab-index="12" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option3}" value="${args.option3}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>
+          <lido-text id="drag4" tab-index="13" type="drag" visible="true" bg-color="#FFAC4C" width="landscape.320px, portrait.100%" string="${args.option4}" value="${args.option4}" font-size="110px" height="212px" onEntry="this.borderRadius='25px'; this.padding='0'; this.fontWeight='700';">
+					</lido-text>					
+				</lido-cell>
+
+		</lido-cell>
+	</lido-container>
+</main>`;
+}