lido-player 0.0.2-alpha-25 → 0.0.2-alpha-26

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.
Files changed (58) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/lido-avatar_18.cjs.entry.js +2 -2
  3. package/dist/cjs/{utils-98308657.js → utils-dc70b21f.js} +10 -3
  4. package/dist/collection/css/index.css +1 -2
  5. package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +42 -0
  6. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracy.stories.js +45 -44
  7. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js +7 -30
  8. package/dist/collection/stories/Templates/reorder/reorder.stories.js +8 -8
  9. package/dist/collection/stories/Templates/storyTale/storyTale.stories.js +2 -2
  10. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +10 -3
  11. package/dist/components/index.js +1 -1
  12. package/dist/components/lido-avatar.js +1 -1
  13. package/dist/components/lido-cell.js +1 -1
  14. package/dist/components/lido-col.js +1 -1
  15. package/dist/components/lido-container.js +1 -1
  16. package/dist/components/lido-flash-card.js +1 -1
  17. package/dist/components/lido-float.js +1 -1
  18. package/dist/components/lido-home.js +1 -1
  19. package/dist/components/lido-image.js +1 -1
  20. package/dist/components/lido-keyboard.js +1 -1
  21. package/dist/components/lido-pos.js +1 -1
  22. package/dist/components/lido-random.js +1 -1
  23. package/dist/components/lido-root.js +18 -18
  24. package/dist/components/lido-row.js +1 -1
  25. package/dist/components/lido-shape.js +1 -1
  26. package/dist/components/lido-slide-fill.js +1 -1
  27. package/dist/components/lido-text.js +1 -1
  28. package/dist/components/lido-trace.js +1 -1
  29. package/dist/components/lido-wrap.js +1 -1
  30. package/dist/components/{p-b06fb0b5.js → p-06985aa0.js} +10 -3
  31. package/dist/components/{p-4727a755.js → p-1207d601.js} +1 -1
  32. package/dist/components/{p-2a1e9690.js → p-240a7803.js} +1 -1
  33. package/dist/components/{p-28575a9d.js → p-49ae22a0.js} +1 -1
  34. package/dist/components/{p-b271516e.js → p-5a8fec7f.js} +1 -1
  35. package/dist/components/{p-8bfd0fb9.js → p-6efa0fcc.js} +1 -1
  36. package/dist/components/{p-51d35e85.js → p-9001096f.js} +1 -1
  37. package/dist/components/{p-eda1bf4d.js → p-a3009d71.js} +1 -1
  38. package/dist/components/{p-398721b6.js → p-a45a529d.js} +1 -1
  39. package/dist/components/{p-4ea20e5d.js → p-a6e5e670.js} +1 -1
  40. package/dist/components/{p-9095d0dd.js → p-b11e6d2c.js} +1 -1
  41. package/dist/components/{p-1b4be1be.js → p-b4ab7d08.js} +18 -18
  42. package/dist/components/{p-a41c13e5.js → p-b633cb0b.js} +1 -1
  43. package/dist/components/{p-0e2ac960.js → p-c156534f.js} +1 -1
  44. package/dist/components/{p-1f78f800.js → p-dad02bf5.js} +1 -1
  45. package/dist/components/{p-db40a466.js → p-dd9976f6.js} +1 -1
  46. package/dist/components/{p-0c830d09.js → p-e92d87e9.js} +1 -1
  47. package/dist/components/{p-b1c8b21c.js → p-ffe626ce.js} +2 -2
  48. package/dist/esm/index.js +1 -1
  49. package/dist/esm/lido-avatar_18.entry.js +2 -2
  50. package/dist/esm/{utils-a61fc607.js → utils-3013a6cc.js} +10 -3
  51. package/dist/lido-player/index.esm.js +1 -1
  52. package/dist/lido-player/lido-player.css +1 -1
  53. package/dist/lido-player/lido-player.esm.js +1 -1
  54. package/dist/lido-player/{p-2a1f5285.js → p-21ed6faf.js} +1 -1
  55. package/dist/lido-player/{p-0962645a.entry.js → p-6d21a635.entry.js} +1 -1
  56. package/package.json +1 -1
  57. package/dist/collection/stories/Templates/picturemeaning/picturemeaning.stories.js +0 -159
  58. /package/dist/types/stories/Templates/picturemeaning/{picturemeaning.stories.d.ts → pictureMeaningCocos.stories.d.ts} +0 -0
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const utils = require('./utils-98308657.js');
5
+ const utils = require('./utils-dc70b21f.js');
6
6
  require('./index-fe562525.js');
7
7
 
8
8
 
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-fe562525.js');
6
- const utils = require('./utils-98308657.js');
6
+ const utils = require('./utils-dc70b21f.js');
7
7
 
8
8
  var rive = {exports: {}};
9
9
 
@@ -7086,7 +7086,7 @@ const LidoFloat = class {
7086
7086
  };
7087
7087
  LidoFloat.style = LidoFloatStyle0;
7088
7088
 
7089
- const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:145px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}";
7089
+ const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:145px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}";
7090
7090
  const LidoHomeStyle0 = indexCss;
7091
7091
 
7092
7092
  const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}";
@@ -1182,9 +1182,16 @@ async function onElementDropComplete(dragElement, dropElement) {
1182
1182
  const div = document.createElement('div');
1183
1183
  container.append(div);
1184
1184
  div.classList.add('after-drop-popup-container');
1185
+ const hasType = dragElement.nextElementSibling;
1185
1186
  // Remove from old parents
1186
- dragElement.parentElement.parentElement.remove();
1187
- dropElement.parentElement.parentElement.remove();
1187
+ if (hasType && hasType.getAttribute("type") === 'drag') {
1188
+ dragElement.remove();
1189
+ dropElement.remove();
1190
+ }
1191
+ else {
1192
+ dragElement.parentElement.parentElement.remove();
1193
+ dropElement.parentElement.parentElement.remove();
1194
+ }
1188
1195
  // Add animation and popup classes
1189
1196
  dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
1190
1197
  dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
@@ -1319,7 +1326,7 @@ async function onElementDropComplete(dragElement, dropElement) {
1319
1326
  }
1320
1327
  dragToDropMap.set(dragElement, dropElement);
1321
1328
  // Add pulse and highlight effect for a successful match
1322
- const isCorrect = (dropElement['value'].toLowerCase()).includes((dragElement['value']).toLowerCase());
1329
+ const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
1323
1330
  dispatchElementDropEvent(dragElement, dropElement, isCorrect);
1324
1331
  if (isCorrect) {
1325
1332
  // Perform actions if onMatch is defined
@@ -87,9 +87,8 @@ body {
87
87
  display: flex;
88
88
  flex-direction: row-reverse;
89
89
  align-items: center;
90
- justify-content: center;
90
+ justify-content: center !important;
91
91
  gap: 145px;
92
-
93
92
  }
94
93
 
95
94
  /* Drag element inside popup */
@@ -0,0 +1,42 @@
1
+ import { html } from "lit-html";
2
+ const meta = {
3
+ title: 'Templates/PictureMeaningCocos',
4
+ };
5
+ export default meta;
6
+ export const Default = {
7
+ args: {
8
+ drag1: "Uma alimentação saudável é essencial.",
9
+ drag2: "Devemos evitar contato com vírus.",
10
+ drag3: "O carro da dona violeta é amarelo.",
11
+ drop1: "Uma alimentação saudável é essencial.",
12
+ drop2: "Devemos evitar contato com vírus.",
13
+ drop3: "O carro da dona violeta é amarelo.",
14
+ },
15
+ render: args => {
16
+ const xml = getContainerXml(args);
17
+ return html `<lido-home .xmlData="${xml}}"></lido-home>`;
18
+ },
19
+ };
20
+ function getContainerXml(args) {
21
+ return `<main>
22
+ <lido-container id="lido-container" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3}" visible="true" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" dropAttr="EnableAnimation">
23
+ <!-- Chimple Avatar -->
24
+ <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos2" height="300px" width="300px" x="landscape.870px,portrait.300px" y="landscape.560px,portrait.1400px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="">
25
+ <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}">
26
+ </lido-avatar>
27
+ </lido-cell>
28
+ <lido-cell visible="true" layout="row" width="landscape.90%, portrait.100%" height="100%" bg-color="transparent" onEntry="this.justifyContent='space-between';">
29
+ <lido-cell visible="true" layout="col" width="landscape.45%, portrait.60%" height="90%" bg-color="transparent">
30
+ <lido-text visible="true" id="drag1" width="landscape.700px, portrait.470px" tab-index="1" audio="" string="${args.drag1}" value="${args.drag1}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
31
+ <lido-text visible="true" id="drag2" width="landscape.700px, portrait.470px" tab-index="2" audio="" string="${args.drag2}" value="${args.drag2}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
32
+ <lido-text visible="true" id="drag3" width="landscape.700px, portrait.470px" tab-index="3" audio="" string="${args.drag3}" value="${args.drag3}" font-size="landscape.72px, portrait.62px" font-color="black" onEntry="this.fontWeight='500'; this.lineHeight='80px';" border-radius="16px" bg-color="white" type="drag" padding="10px"></lido-text>
33
+ </lido-cell>
34
+ <lido-cell visible="true" layout="col" width="landscape.30%, portrait.40%" height="90%" bg-color="transparent" onEntry="this.alignItems='end';">
35
+ <lido-image visible="true" id="drop1" width="landscape.240px, portrait.300px" tab-index="4" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png" bg-color="white"></lido-image>
36
+ <lido-image visible="true" id="drop2" width="landscape.240px, portrait.300px" tab-index="5" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/healthy_food.png" bg-color="white"></lido-image>
37
+ <lido-image visible="true" id="drop3" width="landscape.240px, portrait.300px" tab-index="6" audio="" height="landscape.240px, portrait.300px" type="drop" border-radius="6px" value="${args.drop3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hospital_with_patients.png" bg-color="white"></lido-image>
38
+ </lido-cell>
39
+ </lido-cell>
40
+ </lido-container>
41
+ </main>`;
42
+ }
@@ -2,17 +2,24 @@ import { html } from "lit";
2
2
  const meta = {
3
3
  title: 'Templates/quizLiteracy',
4
4
  argTypes: {
5
- options: { control: 'object' },
6
- answers: { control: 'object' },
7
- image: { control: 'file' },
5
+ option1: { control: 'text' },
6
+ option2: { control: 'text' },
7
+ option3: { control: 'text' },
8
+ option4: { control: 'text' },
9
+ text: { control: 'text' },
10
+ answers: { control: 'text' },
8
11
  },
9
12
  };
10
13
  export default meta;
11
14
  export const quizLiteracy = {
12
15
  args: {
13
- options: ['n', 'a', 'f', 'b'],
14
- answers: ['n'],
15
- image: ['https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/LetterPair/Cat.png'],
16
+ option1: "n",
17
+ option2: "a",
18
+ option3: "f",
19
+ option4: "b",
20
+ text: "n",
21
+ answers: "n",
22
+ image: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png",
16
23
  },
17
24
  render: args => {
18
25
  const xml = getContainerXml(args);
@@ -22,7 +29,7 @@ export const quizLiteracy = {
22
29
  function getContainerXml(args) {
23
30
  let tabCounter = 1;
24
31
  return `<main>
25
- <lido-container id="lido-container" value="maincontainer" visible="true" objective="${(args.answers || []).join(',')}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
32
+ <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
26
33
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.476px" width="landscape.278px,portrait.467px" x="landscape.64%, portrait.24%" y="landscape.228px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
27
34
  <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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
28
35
  </lido-avatar>
@@ -33,49 +40,43 @@ function getContainerXml(args) {
33
40
  <lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
34
41
  onEntry="this.align-items='center'; this.justify-content='center';">
35
42
 
36
- ${(args.answers || [])
37
- .map((answer) => {
38
- if (!answer)
39
- return ""; // skip empty answers
40
- const isImage = answer.startsWith("http") || /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(answer);
41
- if (!isImage) {
42
- // Render text
43
- return `
44
- <lido-text visible="true" id="answer${tabCounter}"
45
- tab-index="${tabCounter++}" font-size="140px"
46
- bg-color="#FFF5BB" audio="" border-radius="12px"
47
- font-color="black" height="200px" width="auto"
48
- string="${answer}" margin="landscape.0px,portrait.-131px 0px 0px 0px" value="${answer}" type="text"
49
- onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
50
- </lido-text>`;
51
- }
52
- else {
53
- // Render image
54
- return `
55
- <lido-cell visible="true" height="400px" width="400px" border-radius="7px"
56
- bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
57
- onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
58
- <lido-image audio="" visible="true"
59
- width="landscape.400px,portrait.400px"
60
- height="landscape.400px,portrait.400px"
61
- border-radius="7px" bg-color="white"
62
- src="${answer}">
63
- </lido-image>
64
- </lido-cell>`;
65
- }
66
- })
67
- .join("")}
43
+ ${args.text && args.text.length > 0
44
+ ? `<lido-text visible="true" id="answer${tabCounter}"
45
+ tab-index="${tabCounter++}" font-size="140px"
46
+ bg-color="#FFF5BB" audio="" border-radius="12px"
47
+ font-color="black" height="200px" width="auto"
48
+ string="${args.text}" margin="landscape.0px,portrait.-131px 0px 0px 0px"
49
+ value="${args.text}" type="text"
50
+ onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
51
+ </lido-text>`
52
+ : args.image && args.image.length > 0
53
+ ? `<lido-cell visible="true" height="200px" value="${args.answers}" width="200px" border-radius="7px"
54
+ bg-color="white" margin="landscape.12px 0px 0px 0px, portrait.0px 0px 0px 0px"
55
+ onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';this.border='4px solid #FFB612';">
56
+ <lido-image audio="" visible="true"
57
+ width="landscape.200px,portrait.200px"
58
+ height="landscape.200px,portrait.200px"
59
+ border-radius="7px" bg-color="white"
60
+ src="${Array.isArray(args.image) ? args.image[0] : args.image}">
61
+ </lido-image>
62
+ </lido-cell>`
63
+ : ''}
64
+
68
65
 
69
66
  </lido-cell>
70
67
 
71
68
 
72
69
  <lido-cell layout="flex" visible="true" margin="landscape.0px,portrait.-424px 0px 407px 0px" width="landscape.100%,portrait.77%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
73
- ${args.options
74
- .map((option) => `
75
- <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${option}" value="${option}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
70
+
71
+ <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
76
72
  </lido-text>
77
- `)
78
- .join('')}
73
+ <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option2}" value="${args.option2}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
74
+ </lido-text>
75
+ <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option3}" value="${args.option3}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
76
+ </lido-text>
77
+ <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="140px" border-radius="12px" font-color="black" height="205px" width="auto" string="${args.option4}" value="${args.option4}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
78
+ </lido-text>
79
+
79
80
 
80
81
  </lido-cell>
81
82
 
@@ -22,57 +22,34 @@ export const quizLiteracyImageWord = {
22
22
  };
23
23
  function getContainerXml(args) {
24
24
  let tabCounter = 1;
25
- const answers = Array.isArray(args.answers) ? args.answers : [args.answers];
26
25
  return `<main>
27
26
  <lido-container id="lido-container" value="maincontainer" visible="true" objective="${args.answers}" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/grid/Underwater.png" onEntry="" is-Continue-On-Correct="true" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';">
28
27
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos1" height="landscape.290px,portrait.476px" width="landscape.278px,portrait.467px" x="landscape.78%, portrait.24%" y="landscape.228px, portrait.66%" aria-hidden="true" z="2" bg-color="transparent" type="" visible="true" audio="" onTouch="" onCorrect="">
29
28
  <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/temp1/chimplecharacter.riv" alt-text="{chimpleCharacterRive}" bg-color="transparent">
30
29
  </lido-avatar>
31
- <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="165px" height="30px" x="landscape.54px,portrait.125px" y="landscape.239px,portrait.400px" alt-text="{shadowImgae}">
30
+ <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="landscape.165px,portrait.200px" height="landscape.30px,portrait.48px" x="landscape.54px,portrait.125px" y="landscape.239px,portrait.400px" alt-text="{shadowImgae}">
32
31
  </lido-image>
33
32
  </lido-cell>
34
33
  <lido-cell layout="col" visible="true" bg-Color="transparent" width="90%" height="68%">
35
- <lido-cell layout="flex" visible="true" width="100%" height="300px" bg-Color="transparent"
34
+ <lido-cell layout="flex" margin="landscape.0px,portrait.-215px 0px 0px 0px" visible="true" width="100%" height="300px" bg-Color="transparent"
36
35
  onEntry="this.align-items='center'; this.justify-content='center';">
37
36
 
38
- ${answers
39
- .filter(Boolean)
40
- .map((answer) => {
41
- if (!answer)
42
- return ""; // skip empty answers
43
- const isImage = answer.startsWith("http") || /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(answer);
44
- if (!isImage) {
45
- // Render text
46
- return `
47
- <lido-text visible="true" id="answer${tabCounter}"
48
- tab-index="${tabCounter++}" font-size="140px"
49
- bg-color="#FFF5BB" border-radius="12px"
50
- font-color="black" height="200px" width="auto"
51
- string="${answer}" margin="landscape.0px,portrait.-131px 0px 0px 0px" value="${answer}" type="text"
52
- onEntry="this.border='6px solid #FFB612';this.font-weight='500';this.padding='0px 64px';">
53
- </lido-text>`;
54
- }
55
- else {
56
- // Render image
57
- return `
58
- <lido-cell visible="true" height="400px" width="400px" border-radius="7px"
37
+ <lido-cell visible="true" height="400px" width="400px" value="${args.answers}" border-radius="7px"
59
38
  bg-color="white" margin="landscape.-70px 0px 0px 0px, portrait.0px 0px 0px 0px"
60
39
  onEntry="this.display='flex'; this.align-items='center'; this.justifyContent='center';">
61
40
  <lido-image visible="true"
62
41
  width="landscape.400px,portrait.400px"
63
42
  height="landscape.400px,portrait.400px"
64
43
  border-radius="7px" bg-color="white"
65
- src="${answer}">
44
+ src="${args.image}">
66
45
  </lido-image>
67
- </lido-cell>`;
68
- }
69
- })
70
- .join("")}
46
+ </lido-cell>
47
+
71
48
 
72
49
  </lido-cell>
73
50
 
74
51
 
75
- <lido-cell layout="flex" visible="true" margin="landscape.0px,portrait.-424px 0px 407px 0px" width="landscape.100%,portrait.100%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
52
+ <lido-cell layout="flex" visible="true" margin="landscape.0px,portrait.-34px 0px 364px" width="landscape.67%,portrait.100%" height="216px" bg-Color="transparent" onEntry="this.align-items='center'; this.justify-content='center'; this.gap='40px';">
76
53
 
77
54
  <lido-text visible="true" audio="" show-speak-icon="true" id="drag${tabCounter}" tab-index="${tabCounter++}" font-size="80px" border-radius="12px" font-color="black" height="148px" width="auto" string="${args.option1}" value="${args.option1}" type="click" onEntry="this.font-weight='500';this.padding='0px 64px 0px 64px';">
78
55
  </lido-text>
@@ -84,8 +84,8 @@ function getContainerXml(args) {
84
84
  ${args.questionImg === '' || args.questionImg.length <= 0 ? '' : `<lido-image visible="true" height="30%" bg-color="white" src="${args.questionImg}"></lido-image>`}
85
85
 
86
86
  <!-- Slide Elements -->
87
- <lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.75%, portrait.35%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.padding='60px 40px';">
88
- <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.15%, portrait.48%" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';">
87
+ <lido-cell visible="true" layout="landscape.row, portrait.col" width="landscape.64%, portrait.26%" height="landscape.40%, portrait.90%" bg-color="#FBCAB5" border-radius="landscape.16px 16px 0 0, portrait.0 16px 16px 0" onEntry="this.flex-shrink='0';this.padding='60px 40px';this.gap='37px';">
88
+ <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option1.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
89
89
  <lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
90
90
  <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
91
91
  </lido-cell>
@@ -93,8 +93,8 @@ function getContainerXml(args) {
93
93
 
94
94
  <lido-text visible="true" string="${args.option1}" audio="${args.option1Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
95
95
  </lido-cell>
96
- <lido-image visible="true" bg-color="transparent" transform="landscape., portrait.rotate(90deg)" width="landscape.8%,portrait." height="landscape.20%, portrait.5%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/arrow.png" margin="landscape.100px 0 0 0, portrait.0 100px 0 0"></lido-image>
97
- <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.15%, portrait.48%" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';">
96
+
97
+ <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option2.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0'; this.border='2px solid #CACACA'; this.paddingTop='50px';">
98
98
  <lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
99
99
  <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
100
100
  </lido-cell>
@@ -102,8 +102,8 @@ function getContainerXml(args) {
102
102
 
103
103
  <lido-text visible="true" string="${args.option2}" audio="${args.option2Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
104
104
  </lido-cell>
105
- <lido-image visible="true" bg-color="transparent" transform="landscape., portrait.rotate(90deg)" width="landscape.8%,portrait." height="landscape.20%, portrait.5%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/arrow.png"></lido-image>
106
- <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.15%, portrait.48%" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';">
105
+
106
+ <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option3.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry=" this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
107
107
  <lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
108
108
  <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
109
109
  </lido-cell>
@@ -111,8 +111,8 @@ function getContainerXml(args) {
111
111
 
112
112
  <lido-text visible="true" string="${args.option3}" audio="${args.option3Audio}" font-size="24px" onEntry="this.fontWeight='800'; this.textAlign='left'; this.lineHeight='26px';"></lido-text>
113
113
  </lido-cell>
114
- <lido-image visible="true" bg-color="transparent" transform="landscape., portrait.rotate(90deg)" width="landscape.8%,portrait." height="landscape.20%, portrait.5%" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/arrow.png" margin="landscape.0 0 100px 0, portrait.0 0 0 100px"></lido-image>
115
- <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.15%, portrait.48%" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.border='2px solid #CACACA'; this.paddingTop='50px';">
114
+
115
+ <lido-cell show-speak-icon="true" visible="true" layout="col" bg-color="white" width="landscape.182px, portrait.154px" height="landscape.85%, portrait.17%" value="${args.option4.toLowerCase()}" type="slide" onTouch="" border-radius="6px" onEntry="this.flex-shrink='0';this.border='2px solid #CACACA'; this.paddingTop='50px';">
116
116
  <lido-cell visible="true" layout="pos" width="48px" height="48px" z="1">
117
117
  <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/reordertemp/Reorder%20button.png"></lido-image>
118
118
  </lido-cell>
@@ -19,7 +19,7 @@ function getContainerXml(args) {
19
19
  <lido-cell id="cell1" margin="landscape.140px 0px 0px 0px,portrait.170px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
20
20
  <lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.-20px 0px 0px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
21
21
  </lido-image>
22
- <lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start';">
22
+ <lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 60px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
23
23
  </lido-text>
24
24
  </lido-cell>
25
25
 
@@ -37,7 +37,7 @@ function getContainerXml(args) {
37
37
 
38
38
  <lido-container show-prev-button="true" show-next-button="true" id="lido-container" bg-image="" height="1600px" width="900px" value="mainContainer4" objective="" aria-label="" x="0" y="0" z="0" visible="true" audio="" onTouch="" onCorrect="" onEntry="" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true">
39
39
  <lido-cell id="cell1" margin="landscape.90px 0px 0px 0px,portrait.70px 0px 0px 0px" visible="true" layout="landscape.row,portrait.col" disable-edit="true" value="cell1" width="landscape.100%,portrait.86%" height="landscape.100%,portrait.80%" x="50px" y="50px" bg-color="white" type="" onEntry="this.justifyContent='space-evenly'; this.borderRadius='6px'" onTouch="" onCorrect="" onInCorrect="">
40
- <lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 52px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start';">
40
+ <lido-text id="text1" tab-index="1" disable-edit="true" margin="landscape.0px 0px 0px 27px,portrait.0px 0px 52px 0px" value="text1" visible="true" width="landscape.47%,portrait.90%" height="100%" bg-color="transparent" font-family="'Baloo 2', serif" font-size="44px" font-color="#000" string='${args.content}' onEntry="this.fontWeight='500'; this.boxShadow='unset'; this.textAlign='start'; this.speak='true';">
41
41
  </lido-text>
42
42
  <lido-image id="image1" disable-edit="true" margin="landscape.0px 0px 0px 0px,portrait.0px 0px 80px 0px" value="image1" visible="true" src="${args.storyimage}" width="landscape.704px,portrait.744px" height="landscape.704px,portrait.707px" bg-color="transparent" alt-text="{catimage}" onEntry="">
43
43
  </lido-image>
@@ -529,9 +529,16 @@ export async function onElementDropComplete(dragElement, dropElement) {
529
529
  const div = document.createElement('div');
530
530
  container.append(div);
531
531
  div.classList.add('after-drop-popup-container');
532
+ const hasType = dragElement.nextElementSibling;
532
533
  // Remove from old parents
533
- dragElement.parentElement.parentElement.remove();
534
- dropElement.parentElement.parentElement.remove();
534
+ if (hasType && hasType.getAttribute("type") === 'drag') {
535
+ dragElement.remove();
536
+ dropElement.remove();
537
+ }
538
+ else {
539
+ dragElement.parentElement.parentElement.remove();
540
+ dropElement.parentElement.parentElement.remove();
541
+ }
535
542
  // Add animation and popup classes
536
543
  dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
537
544
  dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
@@ -666,7 +673,7 @@ export async function onElementDropComplete(dragElement, dropElement) {
666
673
  }
667
674
  dragToDropMap.set(dragElement, dropElement);
668
675
  // Add pulse and highlight effect for a successful match
669
- const isCorrect = (dropElement['value'].toLowerCase()).includes((dragElement['value']).toLowerCase());
676
+ const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
670
677
  dispatchElementDropEvent(dragElement, dropElement, isCorrect);
671
678
  if (isCorrect) {
672
679
  // Perform actions if onMatch is defined
@@ -1 +1 @@
1
- export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-b06fb0b5.js';
1
+ export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-06985aa0.js';
@@ -1,4 +1,4 @@
1
- import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-0c830d09.js';
1
+ import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-e92d87e9.js';
2
2
 
3
3
  const LidoAvatar = LidoAvatar$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoCell$1, d as defineCustomElement$1 } from './p-398721b6.js';
1
+ import { L as LidoCell$1, d as defineCustomElement$1 } from './p-a45a529d.js';
2
2
 
3
3
  const LidoCell = LidoCell$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoCol$1, d as defineCustomElement$1 } from './p-db40a466.js';
1
+ import { L as LidoCol$1, d as defineCustomElement$1 } from './p-dd9976f6.js';
2
2
 
3
3
  const LidoCol = LidoCol$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-28575a9d.js';
1
+ import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-49ae22a0.js';
2
2
 
3
3
  const LidoContainer = LidoContainer$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoFlash, d as defineCustomElement$1 } from './p-1f78f800.js';
1
+ import { L as LidoFlash, d as defineCustomElement$1 } from './p-dad02bf5.js';
2
2
 
3
3
  const LidoFlashCard = LidoFlash;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-4727a755.js';
1
+ import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-1207d601.js';
2
2
 
3
3
  const LidoFloat = LidoFloat$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoHome$1, d as defineCustomElement$1 } from './p-1b4be1be.js';
1
+ import { L as LidoHome$1, d as defineCustomElement$1 } from './p-b4ab7d08.js';
2
2
 
3
3
  const LidoHome = LidoHome$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoImage$1, d as defineCustomElement$1 } from './p-4ea20e5d.js';
1
+ import { L as LidoImage$1, d as defineCustomElement$1 } from './p-a6e5e670.js';
2
2
 
3
3
  const LidoImage = LidoImage$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-b1c8b21c.js';
1
+ import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-ffe626ce.js';
2
2
 
3
3
  const LidoKeyboard = LidoKeyboard$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoPos$1, d as defineCustomElement$1 } from './p-eda1bf4d.js';
1
+ import { L as LidoPos$1, d as defineCustomElement$1 } from './p-a3009d71.js';
2
2
 
3
3
  const LidoPos = LidoPos$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-0e2ac960.js';
1
+ import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-c156534f.js';
2
2
 
3
3
  const LidoRandom = LidoRandom$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,21 +1,21 @@
1
- import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-b06fb0b5.js';
2
- import { d as defineCustomElement$i } from './p-0c830d09.js';
3
- import { d as defineCustomElement$h } from './p-398721b6.js';
4
- import { d as defineCustomElement$g } from './p-db40a466.js';
5
- import { d as defineCustomElement$f } from './p-28575a9d.js';
6
- import { d as defineCustomElement$e } from './p-1f78f800.js';
7
- import { d as defineCustomElement$d } from './p-4727a755.js';
8
- import { d as defineCustomElement$c } from './p-1b4be1be.js';
9
- import { d as defineCustomElement$b } from './p-4ea20e5d.js';
10
- import { d as defineCustomElement$a } from './p-b1c8b21c.js';
11
- import { d as defineCustomElement$9 } from './p-eda1bf4d.js';
12
- import { d as defineCustomElement$8 } from './p-0e2ac960.js';
13
- import { d as defineCustomElement$7 } from './p-b271516e.js';
14
- import { d as defineCustomElement$6 } from './p-2a1e9690.js';
15
- import { d as defineCustomElement$5 } from './p-8bfd0fb9.js';
16
- import { d as defineCustomElement$4 } from './p-a41c13e5.js';
17
- import { d as defineCustomElement$3 } from './p-51d35e85.js';
18
- import { d as defineCustomElement$2 } from './p-9095d0dd.js';
1
+ import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-06985aa0.js';
2
+ import { d as defineCustomElement$i } from './p-e92d87e9.js';
3
+ import { d as defineCustomElement$h } from './p-a45a529d.js';
4
+ import { d as defineCustomElement$g } from './p-dd9976f6.js';
5
+ import { d as defineCustomElement$f } from './p-49ae22a0.js';
6
+ import { d as defineCustomElement$e } from './p-dad02bf5.js';
7
+ import { d as defineCustomElement$d } from './p-1207d601.js';
8
+ import { d as defineCustomElement$c } from './p-b4ab7d08.js';
9
+ import { d as defineCustomElement$b } from './p-a6e5e670.js';
10
+ import { d as defineCustomElement$a } from './p-ffe626ce.js';
11
+ import { d as defineCustomElement$9 } from './p-a3009d71.js';
12
+ import { d as defineCustomElement$8 } from './p-c156534f.js';
13
+ import { d as defineCustomElement$7 } from './p-5a8fec7f.js';
14
+ import { d as defineCustomElement$6 } from './p-240a7803.js';
15
+ import { d as defineCustomElement$5 } from './p-6efa0fcc.js';
16
+ import { d as defineCustomElement$4 } from './p-b633cb0b.js';
17
+ import { d as defineCustomElement$3 } from './p-9001096f.js';
18
+ import { d as defineCustomElement$2 } from './p-b11e6d2c.js';
19
19
 
20
20
  const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
21
21
  constructor() {
@@ -1,4 +1,4 @@
1
- import { L as LidoRow$1, d as defineCustomElement$1 } from './p-b271516e.js';
1
+ import { L as LidoRow$1, d as defineCustomElement$1 } from './p-5a8fec7f.js';
2
2
 
3
3
  const LidoRow = LidoRow$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoShape$1, d as defineCustomElement$1 } from './p-2a1e9690.js';
1
+ import { L as LidoShape$1, d as defineCustomElement$1 } from './p-240a7803.js';
2
2
 
3
3
  const LidoShape = LidoShape$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-8bfd0fb9.js';
1
+ import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-6efa0fcc.js';
2
2
 
3
3
  const LidoSlideFill = LidoSlideFill$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { L as LidoText$1, d as defineCustomElement$1 } from './p-a41c13e5.js';
1
+ import { L as LidoText$1, d as defineCustomElement$1 } from './p-b633cb0b.js';
2
2
 
3
3
  const LidoText = LidoText$1;
4
4
  const defineCustomElement = defineCustomElement$1;