lido-player 0.0.2-alpha-43 → 0.0.2-alpha-44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/lido-avatar_19.cjs.entry.js +1 -1
- package/dist/cjs/{utils-efe8e4b6.js → utils-6297b5ef.js} +27 -26
- package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js +23 -22
- package/dist/collection/stories/Templates/writeWord/writeWord.stories.js +6 -5
- package/dist/collection/utils/utils.js +14 -14
- package/dist/collection/utils/utilsHandlers/dragDropHandler.js +13 -11
- package/dist/components/index.js +1 -1
- package/dist/components/lido-avatar.js +1 -1
- package/dist/components/lido-cell.js +1 -1
- package/dist/components/lido-col.js +1 -1
- package/dist/components/lido-container.js +1 -1
- package/dist/components/lido-flash-card.js +1 -1
- package/dist/components/lido-float.js +1 -1
- package/dist/components/lido-home.js +1 -1
- package/dist/components/lido-image.js +1 -1
- package/dist/components/lido-keyboard.js +1 -1
- package/dist/components/lido-math-matrix.js +1 -1
- package/dist/components/lido-pos.js +1 -1
- package/dist/components/lido-random.js +1 -1
- package/dist/components/lido-root.js +19 -19
- package/dist/components/lido-row.js +1 -1
- package/dist/components/lido-shape.js +1 -1
- package/dist/components/lido-slide-fill.js +1 -1
- package/dist/components/lido-text.js +1 -1
- package/dist/components/lido-trace.js +1 -1
- package/dist/components/lido-wrap.js +1 -1
- package/dist/components/{p-a93ad459.js → p-023c7de7.js} +1 -1
- package/dist/components/{p-108ed5e4.js → p-0c623222.js} +1 -1
- package/dist/components/{p-a7ec59f9.js → p-0ea8d930.js} +1 -1
- package/dist/components/{p-b22f0479.js → p-20fc4b14.js} +1 -1
- package/dist/components/{p-8993a2e7.js → p-3ae5d3b7.js} +27 -26
- package/dist/components/{p-0237e3f3.js → p-5401230b.js} +1 -1
- package/dist/components/{p-e17362d8.js → p-6cf83d0b.js} +1 -1
- package/dist/components/{p-f4363dd9.js → p-736df7df.js} +1 -1
- package/dist/components/{p-7cd61ce0.js → p-8023e174.js} +1 -1
- package/dist/components/{p-72965f85.js → p-8cfd59a4.js} +1 -1
- package/dist/components/{p-26f1f79e.js → p-9208d35a.js} +1 -1
- package/dist/components/{p-051c07db.js → p-addb8571.js} +1 -1
- package/dist/components/{p-aa95ef9c.js → p-baa6fab4.js} +18 -18
- package/dist/components/{p-d12f6a47.js → p-c69a2a5c.js} +1 -1
- package/dist/components/{p-eb298c74.js → p-ddd07700.js} +1 -1
- package/dist/components/{p-81ab4b42.js → p-e1021121.js} +1 -1
- package/dist/components/{p-45b63a44.js → p-e843fd55.js} +2 -2
- package/dist/components/{p-ab2d491d.js → p-ea37f3be.js} +1 -1
- package/dist/components/{p-00c74f3e.js → p-fb0a4aec.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lido-avatar_19.entry.js +1 -1
- package/dist/esm/{utils-31627add.js → utils-37bf9e25.js} +27 -26
- package/dist/lido-player/index.esm.js +1 -1
- package/dist/lido-player/lido-player.esm.js +1 -1
- package/dist/lido-player/{p-8efa2f2f.entry.js → p-1c2429dc.entry.js} +1 -1
- package/dist/lido-player/{p-288697a6.js → p-c076247f.js} +2 -2
- package/package.json +1 -1
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -211,7 +211,7 @@ function enableDraggingWithScaling(element) {
|
|
|
211
211
|
isDragging = false;
|
|
212
212
|
return;
|
|
213
213
|
}
|
|
214
|
-
|
|
214
|
+
AudioPlayer.getI().stop();
|
|
215
215
|
removeHighlight(element);
|
|
216
216
|
isDragging = true;
|
|
217
217
|
isClicked = true;
|
|
@@ -315,6 +315,7 @@ function enableDraggingWithScaling(element) {
|
|
|
315
315
|
// Start observing the element
|
|
316
316
|
observer.observe(container, observerConfig);
|
|
317
317
|
const onMove = (event) => {
|
|
318
|
+
console.log("moved");
|
|
318
319
|
if (!isDragging)
|
|
319
320
|
return;
|
|
320
321
|
if (isDraggingDisabled) {
|
|
@@ -619,6 +620,7 @@ async function onElementDropComplete(dragElement, dropElement) {
|
|
|
619
620
|
const selectedValueData = localStorage.getItem(SelectedValuesKey) || '';
|
|
620
621
|
const dragSelectedData = localStorage.getItem(DragSelectedMapKey);
|
|
621
622
|
localStorage.getItem(DragMapKey);
|
|
623
|
+
console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
|
|
622
624
|
let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
|
|
623
625
|
const container = document.getElementById(LidoContainer);
|
|
624
626
|
if (!dropElement) {
|
|
@@ -647,20 +649,19 @@ async function onElementDropComplete(dragElement, dropElement) {
|
|
|
647
649
|
isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
|
|
648
650
|
}
|
|
649
651
|
if (!isCorrect) {
|
|
650
|
-
const localStorageKey = `${LidoContainer}_dropData`;
|
|
651
652
|
dragElement.style.transition = 'transform 0.5s ease';
|
|
652
653
|
animateDragToTarget(dragElement, dropElement, container);
|
|
653
654
|
setTimeout(() => {
|
|
654
655
|
dragElement.style.transform = 'translate(0, 0)';
|
|
655
|
-
const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
|
|
656
|
-
if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
}
|
|
663
|
-
handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
|
|
656
|
+
// const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
|
|
657
|
+
// if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
|
|
658
|
+
// dropHasDrag[oldDropIndex].isFull = false;
|
|
659
|
+
// delete dragToDropMap[dragElement.getAttribute('data-id')];
|
|
660
|
+
// const stored = JSON.parse(localStorage.getItem(localStorageKey) || '{}');
|
|
661
|
+
// delete stored[oldDropIndex];
|
|
662
|
+
// localStorage.setItem(localStorageKey, JSON.stringify(stored));
|
|
663
|
+
// }
|
|
664
|
+
// handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
|
|
664
665
|
}, 500);
|
|
665
666
|
if (dragElement['type'] === 'option') {
|
|
666
667
|
const childs = Array.from(container.querySelectorAll(`[value="${dragElement['value']}"]`));
|
|
@@ -838,9 +839,9 @@ async function onElementDropComplete(dragElement, dropElement) {
|
|
|
838
839
|
dispatchElementDropEvent(dragElement, dropElement, isCorrect);
|
|
839
840
|
storingEachActivityScore(isCorrect);
|
|
840
841
|
dragElement.style.opacity = '1';
|
|
841
|
-
await onActivityComplete(dragElement, dropElement);
|
|
842
842
|
const allDropElements = document.querySelectorAll('.drop-element');
|
|
843
843
|
allDropElements.forEach(el => updateDropBorder(el));
|
|
844
|
+
await onActivityComplete(dragElement, dropElement);
|
|
844
845
|
}
|
|
845
846
|
function updateDropBorder(element) {
|
|
846
847
|
if (!element || !element.classList.contains('drop-element'))
|
|
@@ -68261,19 +68262,6 @@ async function onActivityComplete(dragElement, dropElement) {
|
|
|
68261
68262
|
if (!container)
|
|
68262
68263
|
return;
|
|
68263
68264
|
await executeActions("this.alignMatch='true'", dropElement, dragElement);
|
|
68264
|
-
if (dragElement && dropElement) {
|
|
68265
|
-
const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
|
|
68266
|
-
if (isCorrect) {
|
|
68267
|
-
const onCorrect = dropElement.getAttribute('onCorrect');
|
|
68268
|
-
if (onCorrect) {
|
|
68269
|
-
await executeActions(onCorrect, dropElement, dragElement);
|
|
68270
|
-
}
|
|
68271
|
-
}
|
|
68272
|
-
else {
|
|
68273
|
-
const onInCorrect = dropElement.getAttribute('onInCorrect');
|
|
68274
|
-
await executeActions(onInCorrect, dropElement, dragElement);
|
|
68275
|
-
}
|
|
68276
|
-
}
|
|
68277
68265
|
let dragScore = JSON.parse((_a = localStorage.getItem(DragSelectedMapKey)) !== null && _a !== void 0 ? _a : '{}');
|
|
68278
68266
|
const tabindex = dropElement.getAttribute('tab-index');
|
|
68279
68267
|
if (!dragScore[tabindex]) {
|
|
@@ -68301,6 +68289,19 @@ async function onActivityComplete(dragElement, dropElement) {
|
|
|
68301
68289
|
return acc;
|
|
68302
68290
|
}, []);
|
|
68303
68291
|
localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
|
|
68292
|
+
if (dragElement && dropElement) {
|
|
68293
|
+
const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
|
|
68294
|
+
if (isCorrect) {
|
|
68295
|
+
const onCorrect = dropElement.getAttribute('onCorrect');
|
|
68296
|
+
if (onCorrect) {
|
|
68297
|
+
await executeActions(onCorrect, dropElement, dragElement);
|
|
68298
|
+
}
|
|
68299
|
+
}
|
|
68300
|
+
else {
|
|
68301
|
+
const onInCorrect = dropElement.getAttribute('onInCorrect');
|
|
68302
|
+
await executeActions(onInCorrect, dropElement, dragElement);
|
|
68303
|
+
}
|
|
68304
|
+
}
|
|
68304
68305
|
const allElements = document.querySelectorAll("[type='drop']");
|
|
68305
68306
|
allElements.forEach(otherElement => {
|
|
68306
68307
|
var _a;
|
|
@@ -68443,7 +68444,7 @@ const triggerPrevcontainer = () => {
|
|
|
68443
68444
|
function convertUrlToRelative(url) {
|
|
68444
68445
|
const container = document.getElementById(LidoContainer);
|
|
68445
68446
|
const baseUrl = container.getAttribute('baseUrl');
|
|
68446
|
-
if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
|
|
68447
|
+
if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
|
|
68447
68448
|
return url;
|
|
68448
68449
|
}
|
|
68449
68450
|
else if (baseUrl) {
|
|
@@ -83,56 +83,57 @@ function getContainerXml(args) {
|
|
|
83
83
|
return `
|
|
84
84
|
<main>
|
|
85
85
|
<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">
|
|
86
|
-
|
|
86
|
+
<lido-text id="fullSentence" visible="false" onEntry="this.display='none';" string="{full_sentence}" audio="{full_sentence_audio}"></lido-text>
|
|
87
|
+
<!-- Chimple Avatar -->
|
|
87
88
|
<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';">
|
|
88
89
|
<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}">
|
|
89
90
|
</lido-avatar>
|
|
90
91
|
</lido-cell>
|
|
91
92
|
|
|
92
93
|
<!--Parent cell -->
|
|
93
|
-
<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
|
|
94
|
+
<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent" margin="landscape.0,portrait.-90px 0px 0px 0px">
|
|
94
95
|
<!-- heading -->
|
|
95
96
|
<lido-cell visible="true" margin="landscape.12px 0px -17px 0px, portrait.0px 0px 0px;">
|
|
96
|
-
<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.
|
|
97
|
+
<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.56px" bg-color="transparent" onEntry=" this.fontWeight='700';" margin="landscape.32px 0px 4px 0px,portrait.18px 0px 0px 0px">
|
|
97
98
|
</lido-text>
|
|
98
99
|
</lido-cell>
|
|
99
100
|
<!-- fill up based on image -->
|
|
100
101
|
|
|
101
|
-
<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.auto, portrait.69%" height="landscape.
|
|
102
|
+
<lido-cell show-speak-icon="true" audio="${args.sentenceAudio}" layout="landscape.row, portrait.col" visible="true" width="landscape.auto, portrait.69%" height="landscape.64%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';" margin="landscape.0 , portrait.18px 0px 0px 0px">
|
|
102
103
|
|
|
103
104
|
<!-- image -->
|
|
104
|
-
${args.img.length === 0 ? '' : `<lido-image id="image1" disable-edit="true" visible="true" src="${args.img}" width="landscape.
|
|
105
|
+
${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">
|
|
105
106
|
</lido-image>`}
|
|
106
107
|
<!-- text -->
|
|
107
108
|
|
|
108
109
|
|
|
109
110
|
|
|
110
|
-
<lido-cell layout="flex" bg-Color="transparent" visible="true" height="landscape.100%,portrait.auto" width="landscape.
|
|
111
|
+
<lido-cell layout="flex" bg-Color="transparent" visible="true" height="landscape.100%,portrait.auto" width="landscape.645px, portrait.97%" onEntry="this.align-content='center'; this.gap='32px';this.display='ruby';" margin="landscape.21px 0px 0px 61px, portrait.50px 6px 0px 64px">
|
|
111
112
|
|
|
112
|
-
<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
113
|
-
<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>
|
|
114
|
-
<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
115
|
-
<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
116
|
-
<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>
|
|
117
|
-
<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
118
|
-
<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
119
|
-
<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';
|
|
120
|
-
<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
121
|
-
<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
122
|
-
<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>
|
|
123
|
-
<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="
|
|
113
|
+
<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
114
|
+
<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>
|
|
115
|
+
<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
116
|
+
<lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
117
|
+
<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>
|
|
118
|
+
<lido-text tab-index="7" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
119
|
+
<lido-text tab-index="8" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
120
|
+
<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>
|
|
121
|
+
<lido-text tab-index="10" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
122
|
+
<lido-text tab-index="11" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
123
|
+
<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>
|
|
124
|
+
<lido-text tab-index="13" font-family="'Baloo Bhai 2'" visible="true" font-size="landscape.46px,portrait.54px" 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>
|
|
124
125
|
|
|
125
126
|
</lido-cell>
|
|
126
127
|
|
|
127
128
|
</lido-cell>
|
|
128
129
|
<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">
|
|
129
|
-
<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='
|
|
130
|
+
<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.54px" type="drag">
|
|
130
131
|
</lido-text>
|
|
131
|
-
<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='
|
|
132
|
+
<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.54px" type="drag">
|
|
132
133
|
</lido-text>
|
|
133
|
-
<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='
|
|
134
|
+
<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.54px" type="drag">
|
|
134
135
|
</lido-text>
|
|
135
|
-
<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='
|
|
136
|
+
<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.54px" type="drag">
|
|
136
137
|
</lido-text>
|
|
137
138
|
</lido-cell>
|
|
138
139
|
|
|
@@ -59,14 +59,15 @@ function getContainerXml(args) {
|
|
|
59
59
|
</lido-image>
|
|
60
60
|
</lido-cell>
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.297px, portrait.297px" x="landscape.650px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
|
|
64
|
-
<lido-text id="txt1" tab-index="2" span-type="${spanType}" audio="" width="297px" height="80px" display="flex" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" font-weight="600" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
|
|
65
|
-
</lido-text>
|
|
66
|
-
</lido-cell>
|
|
62
|
+
|
|
67
63
|
|
|
68
64
|
<lido-cell layout="col" visible="true" width="landscape.70%, portrait.70%" height="landscape.84%, portrait.60%" bg-color="transparent" margin="landscape.-35px 0px -35px 0px, portrait.-400px 0px -40px 0px" onEntry="this.padding='4px 0px 16px 0px';">
|
|
69
65
|
<lido-image visible="true" src="${topDisplayImage}" z="1" width="landscape.570px, portrait.570px" height="landscape.225px, portrait.225px" onEntry="this.flex-shrink='0';" altText="{image1}">
|
|
66
|
+
<!-- text-element -->
|
|
67
|
+
<lido-cell layout="pos" display="flex" id="pos1" disable-edit="true" value="pos1" height="landscape.80px, portrait.80px" width="landscape.525px, portrait.525px" x="landscape.545px, portrait.300px" y="landscape.125px, portrait.190px" aria-hidden="true" bg-color="transparent" visible="true" onEntry="this.z-index='2'; this.align-items='center'; this.justify-content='center'; this.display='flex';">
|
|
68
|
+
<lido-text id="txt1" tab-index="2" span-type="${spanType}" audio="" width="525px" height="80px" onEntry="this.text-align='center'; this.justify-content='center'; this.flex-shrink='0'; this.fontWeight='600';" font="'Baloo Bhai 2'" font-size="96px" z="1" font-color="black" color=" #000000" string="${text}" visible="true" y="landscape., portrait." bg-color="transparent">
|
|
69
|
+
</lido-text>
|
|
70
|
+
</lido-cell>
|
|
70
71
|
</lido-image>
|
|
71
72
|
|
|
72
73
|
<lido-image visible="true" src="${bottomDisplayImage}" z="1" width="landscape.574px, portrait.760px" height="landscape.574px, portrait.760px" onEntry="this.flex-shrink='0';" altText="{image1}">
|
|
@@ -359,19 +359,6 @@ export async function onActivityComplete(dragElement, dropElement) {
|
|
|
359
359
|
if (!container)
|
|
360
360
|
return;
|
|
361
361
|
await executeActions("this.alignMatch='true'", dropElement, dragElement);
|
|
362
|
-
if (dragElement && dropElement) {
|
|
363
|
-
const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
|
|
364
|
-
if (isCorrect) {
|
|
365
|
-
const onCorrect = dropElement.getAttribute('onCorrect');
|
|
366
|
-
if (onCorrect) {
|
|
367
|
-
await executeActions(onCorrect, dropElement, dragElement);
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
else {
|
|
371
|
-
const onInCorrect = dropElement.getAttribute('onInCorrect');
|
|
372
|
-
await executeActions(onInCorrect, dropElement, dragElement);
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
362
|
let dragScore = JSON.parse((_a = localStorage.getItem(DragSelectedMapKey)) !== null && _a !== void 0 ? _a : '{}');
|
|
376
363
|
const tabindex = dropElement.getAttribute('tab-index');
|
|
377
364
|
if (!dragScore[tabindex]) {
|
|
@@ -399,6 +386,19 @@ export async function onActivityComplete(dragElement, dropElement) {
|
|
|
399
386
|
return acc;
|
|
400
387
|
}, []);
|
|
401
388
|
localStorage.setItem(SelectedValuesKey, JSON.stringify(sortedValues));
|
|
389
|
+
if (dragElement && dropElement) {
|
|
390
|
+
const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
|
|
391
|
+
if (isCorrect) {
|
|
392
|
+
const onCorrect = dropElement.getAttribute('onCorrect');
|
|
393
|
+
if (onCorrect) {
|
|
394
|
+
await executeActions(onCorrect, dropElement, dragElement);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
else {
|
|
398
|
+
const onInCorrect = dropElement.getAttribute('onInCorrect');
|
|
399
|
+
await executeActions(onInCorrect, dropElement, dragElement);
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
402
|
const allElements = document.querySelectorAll("[type='drop']");
|
|
403
403
|
allElements.forEach(otherElement => {
|
|
404
404
|
var _a;
|
|
@@ -541,7 +541,7 @@ export const triggerPrevcontainer = () => {
|
|
|
541
541
|
export function convertUrlToRelative(url) {
|
|
542
542
|
const container = document.getElementById(LidoContainer);
|
|
543
543
|
const baseUrl = container.getAttribute('baseUrl');
|
|
544
|
-
if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
|
|
544
|
+
if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
|
|
545
545
|
return url;
|
|
546
546
|
}
|
|
547
547
|
else if (baseUrl) {
|
|
@@ -56,7 +56,7 @@ export function enableDraggingWithScaling(element) {
|
|
|
56
56
|
isDragging = false;
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
AudioPlayer.getI().stop();
|
|
60
60
|
removeHighlight(element);
|
|
61
61
|
isDragging = true;
|
|
62
62
|
isClicked = true;
|
|
@@ -164,6 +164,7 @@ export function enableDraggingWithScaling(element) {
|
|
|
164
164
|
// Start observing the element
|
|
165
165
|
observer.observe(container, observerConfig);
|
|
166
166
|
const onMove = (event) => {
|
|
167
|
+
console.log("moved");
|
|
167
168
|
if (!isDragging)
|
|
168
169
|
return;
|
|
169
170
|
if (isDraggingDisabled) {
|
|
@@ -468,6 +469,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
|
|
|
468
469
|
const selectedValueData = localStorage.getItem(SelectedValuesKey) || '';
|
|
469
470
|
const dragSelectedData = localStorage.getItem(DragSelectedMapKey);
|
|
470
471
|
const dropSelectedData = localStorage.getItem(DragMapKey);
|
|
472
|
+
console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
|
|
471
473
|
let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
|
|
472
474
|
const container = document.getElementById(LidoContainer);
|
|
473
475
|
if (!dropElement) {
|
|
@@ -501,15 +503,15 @@ export async function onElementDropComplete(dragElement, dropElement) {
|
|
|
501
503
|
animateDragToTarget(dragElement, dropElement, container);
|
|
502
504
|
setTimeout(() => {
|
|
503
505
|
dragElement.style.transform = 'translate(0, 0)';
|
|
504
|
-
const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
|
|
505
|
-
if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
}
|
|
512
|
-
handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
|
|
506
|
+
// const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
|
|
507
|
+
// if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
|
|
508
|
+
// dropHasDrag[oldDropIndex].isFull = false;
|
|
509
|
+
// delete dragToDropMap[dragElement.getAttribute('data-id')];
|
|
510
|
+
// const stored = JSON.parse(localStorage.getItem(localStorageKey) || '{}');
|
|
511
|
+
// delete stored[oldDropIndex];
|
|
512
|
+
// localStorage.setItem(localStorageKey, JSON.stringify(stored));
|
|
513
|
+
// }
|
|
514
|
+
// handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
|
|
513
515
|
}, 500);
|
|
514
516
|
if (dragElement['type'] === 'option') {
|
|
515
517
|
const childs = Array.from(container.querySelectorAll(`[value="${dragElement['value']}"]`));
|
|
@@ -687,9 +689,9 @@ export async function onElementDropComplete(dragElement, dropElement) {
|
|
|
687
689
|
dispatchElementDropEvent(dragElement, dropElement, isCorrect);
|
|
688
690
|
storingEachActivityScore(isCorrect);
|
|
689
691
|
dragElement.style.opacity = '1';
|
|
690
|
-
await onActivityComplete(dragElement, dropElement);
|
|
691
692
|
const allDropElements = document.querySelectorAll('.drop-element');
|
|
692
693
|
allDropElements.forEach(el => updateDropBorder(el));
|
|
694
|
+
await onActivityComplete(dragElement, dropElement);
|
|
693
695
|
}
|
|
694
696
|
export function updateDropBorder(element) {
|
|
695
697
|
if (!element || !element.classList.contains('drop-element'))
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-
|
|
1
|
+
export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3ae5d3b7.js';
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-
|
|
2
|
-
import { d as defineCustomElement$j } from './p-
|
|
3
|
-
import { d as defineCustomElement$i } from './p-
|
|
4
|
-
import { d as defineCustomElement$h } from './p-
|
|
5
|
-
import { d as defineCustomElement$g } from './p-
|
|
6
|
-
import { d as defineCustomElement$f } from './p-
|
|
7
|
-
import { d as defineCustomElement$e } from './p-
|
|
8
|
-
import { d as defineCustomElement$d } from './p-
|
|
9
|
-
import { d as defineCustomElement$c } from './p-
|
|
10
|
-
import { d as defineCustomElement$b } from './p-
|
|
11
|
-
import { d as defineCustomElement$a } from './p-
|
|
12
|
-
import { d as defineCustomElement$9 } from './p-
|
|
13
|
-
import { d as defineCustomElement$8 } from './p-
|
|
14
|
-
import { d as defineCustomElement$7 } from './p-
|
|
15
|
-
import { d as defineCustomElement$6 } from './p-
|
|
16
|
-
import { d as defineCustomElement$5 } from './p-
|
|
17
|
-
import { d as defineCustomElement$4 } from './p-
|
|
18
|
-
import { d as defineCustomElement$3 } from './p-
|
|
19
|
-
import { d as defineCustomElement$2 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-3ae5d3b7.js';
|
|
2
|
+
import { d as defineCustomElement$j } from './p-c69a2a5c.js';
|
|
3
|
+
import { d as defineCustomElement$i } from './p-5401230b.js';
|
|
4
|
+
import { d as defineCustomElement$h } from './p-9208d35a.js';
|
|
5
|
+
import { d as defineCustomElement$g } from './p-ddd07700.js';
|
|
6
|
+
import { d as defineCustomElement$f } from './p-20fc4b14.js';
|
|
7
|
+
import { d as defineCustomElement$e } from './p-8cfd59a4.js';
|
|
8
|
+
import { d as defineCustomElement$d } from './p-baa6fab4.js';
|
|
9
|
+
import { d as defineCustomElement$c } from './p-8023e174.js';
|
|
10
|
+
import { d as defineCustomElement$b } from './p-e843fd55.js';
|
|
11
|
+
import { d as defineCustomElement$a } from './p-0c623222.js';
|
|
12
|
+
import { d as defineCustomElement$9 } from './p-736df7df.js';
|
|
13
|
+
import { d as defineCustomElement$8 } from './p-ea37f3be.js';
|
|
14
|
+
import { d as defineCustomElement$7 } from './p-addb8571.js';
|
|
15
|
+
import { d as defineCustomElement$6 } from './p-e1021121.js';
|
|
16
|
+
import { d as defineCustomElement$5 } from './p-023c7de7.js';
|
|
17
|
+
import { d as defineCustomElement$4 } from './p-0ea8d930.js';
|
|
18
|
+
import { d as defineCustomElement$3 } from './p-6cf83d0b.js';
|
|
19
|
+
import { d as defineCustomElement$2 } from './p-fb0a4aec.js';
|
|
20
20
|
|
|
21
21
|
const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
|
|
22
22
|
constructor() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, m as parseProp, Q as fraction, h, j as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, m as parseProp, Q as fraction, h, j as Host } from './p-3ae5d3b7.js';
|
|
2
2
|
|
|
3
3
|
const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
|
|
4
4
|
const LidoSlideFillStyle0 = lidoSlideFillCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-3ae5d3b7.js';
|
|
2
2
|
|
|
3
3
|
const lidoMathMatrixCss = ".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:cover;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--inactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px}";
|
|
4
4
|
const LidoMathMatrixStyle0 = lidoMathMatrixCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, l as attachSpeakIcon, e as convertUrlToRelative, m as parseProp, h, j as Host } from './p-3ae5d3b7.js';
|
|
2
2
|
|
|
3
3
|
const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
|
|
4
4
|
const LidoTextStyle0 = lidoTextCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, m as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, m as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-3ae5d3b7.js';
|
|
2
2
|
|
|
3
3
|
const lidoFlashCardCss = ".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}";
|
|
4
4
|
const LidoFlashCardStyle0 = lidoFlashCardCss;
|