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

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 (99) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/lido-avatar_22.cjs.entry.js +141 -23
  3. package/dist/cjs/lido-player.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{utils-3c1ce74e.js → utils-a61cfc6b.js} +41 -12
  6. package/dist/collection/components/calculator/lido-calculator.js +4 -2
  7. package/dist/collection/components/home/lido-home.js +35 -6
  8. package/dist/collection/components/mathMatrix/lido-math-matrix.js +8 -6
  9. package/dist/collection/components/shape/lido-shape.css +90 -0
  10. package/dist/collection/components/shape/lido-shape.js +41 -6
  11. package/dist/collection/components/slideFill/lido-slide-fill.js +1 -1
  12. package/dist/collection/components/text/lido-text.js +26 -1
  13. package/dist/collection/components/trace/lido-trace.js +57 -4
  14. package/dist/collection/components/wrap/lido-wrap.js +1 -1
  15. package/dist/collection/stories/Templates/balancing/balancing.stories.js +1 -1
  16. package/dist/collection/stories/Templates/balloonPop/balloonPop.stories.js +2 -2
  17. package/dist/collection/stories/Templates/blender/blender.stories.js +3 -3
  18. package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +6 -4
  19. package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +38 -32
  20. package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +2 -2
  21. package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +68 -60
  22. package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +6 -5
  23. package/dist/collection/stories/Templates/quizMaths/quizMaths.stories.js +991 -0
  24. package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +8 -8
  25. package/dist/collection/stories/Templates/tenBox/tenBox.stories.js +144 -0
  26. package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +8 -4
  27. package/dist/collection/utils/constants.js +2 -0
  28. package/dist/collection/utils/customEvents.js +1 -0
  29. package/dist/collection/utils/utils.js +7 -1
  30. package/dist/collection/utils/utilsHandlers/animationHandler.js +21 -1
  31. package/dist/collection/utils/utilsHandlers/clickHandler.js +1 -1
  32. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +4 -3
  33. package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js +4 -5
  34. package/dist/components/index.js +1 -1
  35. package/dist/components/lido-avatar.js +1 -1
  36. package/dist/components/lido-balance.js +1 -1
  37. package/dist/components/lido-calculator.js +1 -1
  38. package/dist/components/lido-canvas.js +1 -1
  39. package/dist/components/lido-cell.js +1 -1
  40. package/dist/components/lido-col.js +1 -1
  41. package/dist/components/lido-container.js +1 -1
  42. package/dist/components/lido-flash-card.js +1 -1
  43. package/dist/components/lido-float.js +1 -1
  44. package/dist/components/lido-home.js +1 -1
  45. package/dist/components/lido-image.js +1 -1
  46. package/dist/components/lido-keyboard.js +1 -1
  47. package/dist/components/lido-math-matrix.js +1 -1
  48. package/dist/components/lido-pos.js +1 -1
  49. package/dist/components/lido-random.js +1 -1
  50. package/dist/components/lido-root.js +22 -22
  51. package/dist/components/lido-row.js +1 -1
  52. package/dist/components/lido-shape.js +1 -1
  53. package/dist/components/lido-slide-fill.js +1 -1
  54. package/dist/components/lido-text.js +1 -1
  55. package/dist/components/lido-trace.js +1 -1
  56. package/dist/components/lido-wrap.js +1 -1
  57. package/dist/components/{p-511377d2.js → p-0712a27e.js} +39 -13
  58. package/dist/components/{p-df1af62c.js → p-0a41b2f8.js} +1 -1
  59. package/dist/components/{p-d568d595.js → p-17f84b2f.js} +1 -1
  60. package/dist/components/{p-09b3b152.js → p-21852d55.js} +1 -1
  61. package/dist/components/{p-561908ec.js → p-2829c82c.js} +1 -1
  62. package/dist/components/{p-71ded596.js → p-330caab8.js} +2 -2
  63. package/dist/components/{p-8774f517.js → p-480f708a.js} +1 -1
  64. package/dist/components/{p-cca545f9.js → p-4d332eab.js} +1 -1
  65. package/dist/components/{p-92b9ae9e.js → p-4e041807.js} +2 -2
  66. package/dist/components/{p-b3e67e7f.js → p-7ab0a273.js} +26 -2
  67. package/dist/components/{p-567983a9.js → p-882b291d.js} +2 -2
  68. package/dist/components/{p-875c1411.js → p-9104d427.js} +1 -1
  69. package/dist/components/{p-3e8ae1c5.js → p-b9875116.js} +57 -4
  70. package/dist/components/{p-004adc43.js → p-c4739621.js} +6 -4
  71. package/dist/components/p-cca36777.js +128 -0
  72. package/dist/components/{p-9ea1a67d.js → p-d1b5079b.js} +1 -1
  73. package/dist/components/{p-057fb7b8.js → p-e1ba0c44.js} +38 -26
  74. package/dist/components/{p-3f0e4436.js → p-eab0ebb7.js} +1 -1
  75. package/dist/components/{p-90f7dd48.js → p-f2b53e8e.js} +2 -2
  76. package/dist/components/{p-d2fe2bb6.js → p-f3bc4577.js} +1 -1
  77. package/dist/components/{p-6beee44b.js → p-ff801ba1.js} +1 -1
  78. package/dist/components/{p-23549651.js → p-ffc40642.js} +7 -5
  79. package/dist/esm/index.js +1 -1
  80. package/dist/esm/lido-avatar_22.entry.js +141 -23
  81. package/dist/esm/lido-player.js +1 -1
  82. package/dist/esm/loader.js +1 -1
  83. package/dist/esm/{utils-eefe4a1c.js → utils-7ed76799.js} +39 -13
  84. package/dist/lido-player/index.esm.js +1 -1
  85. package/dist/lido-player/lido-player.esm.js +1 -1
  86. package/dist/lido-player/{p-589fc3b8.js → p-17d93181.js} +2 -2
  87. package/dist/lido-player/p-fa9dfdf8.entry.js +1 -0
  88. package/dist/types/components/home/lido-home.d.ts +3 -0
  89. package/dist/types/components/shape/lido-shape.d.ts +8 -2
  90. package/dist/types/components/text/lido-text.d.ts +1 -0
  91. package/dist/types/components/trace/lido-trace.d.ts +2 -1
  92. package/dist/types/components.d.ts +2 -0
  93. package/dist/types/stories/Templates/fillAnswer/fill-answer.stories.d.ts +1 -1
  94. package/dist/types/stories/Templates/quizMaths/quizMaths.stories.d.ts +16 -0
  95. package/dist/types/stories/Templates/tenBox/tenBox.stories.d.ts +4 -0
  96. package/dist/types/utils/constants.d.ts +2 -0
  97. package/package.json +1 -1
  98. package/dist/components/p-0733b277.js +0 -100
  99. package/dist/lido-player/p-4d9ad047.entry.js +0 -1
package/dist/collection/components/trace/lido-trace.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { h, Host } from "@stencil/core";
2
- import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp } from "../../utils/utils";
2
+ import { convertUrlToRelative, executeActions, triggerNextContainer, speakIcon, setVisibilityWithDelay, parseProp, storingEachActivityScore, calculateScore } from "../../utils/utils";
3
3
  import { fingerUrl, LidoContainer, TraceMode } from "../../utils/constants";
4
4
  // Enum for different tracing modes
5
5
  export class LidoTrace {
@@ -386,7 +386,7 @@ export class LidoTrace {
386
386
  });
387
387
  }
388
388
  // Modified handlePointerMove function
389
- handlePointerMove(state) {
389
+ async handlePointerMove(state) {
390
390
  var _a, _b, _c, _d, _e, _f;
391
391
  if (!state.isDragging)
392
392
  return;
@@ -533,13 +533,15 @@ export class LidoTrace {
533
533
  }
534
534
  (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
535
535
  // Completion logic for closed paths: only allow completion if almost all points are traced
536
- const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
536
+ const COMPLETION_THRESHOLD = 0.95; // 95% of the path must be traced
537
537
  let percentComplete = state.lastLength / state.totalPathLength;
538
538
  let startPoint = currentPath.getPointAtLength(0);
539
539
  let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
540
540
  let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
541
541
  if (pathIsClosed && state.totalPathLength > 50) {
542
542
  if (percentComplete >= COMPLETION_THRESHOLD) {
543
+ // Animate the draggable circle & green trace to the very end, then proceed
544
+ await this.animatePathToEnd(state, currentPath);
543
545
  if (state.currentPathIndex < state.paths.length - 1) {
544
546
  this.moveToNextPath(state);
545
547
  }
@@ -560,6 +562,55 @@ export class LidoTrace {
560
562
  }
561
563
  // this.resetIdleTimer(state); // ← keep timer alive
562
564
  }
565
+ // Smoothly animate the draggable circle + green stroke from current lastLength to totalPathLength
566
+ animatePathToEnd(state, path, duration = 300) {
567
+ if (!path || !state.svg)
568
+ return Promise.resolve();
569
+ if (state._animatingToEnd)
570
+ return Promise.resolve();
571
+ state._animatingToEnd = true;
572
+ const start = state.lastLength || 0;
573
+ const end = path.getTotalLength();
574
+ const startTime = performance.now();
575
+ // get greenPath safely: prefer the attached property, otherwise query by class near the original path
576
+ const greenPath = path.greenPath ||
577
+ (path.parentNode && path.parentNode.querySelector('.lido-trace-path-green'));
578
+ return new Promise(resolve => {
579
+ const step = (now) => {
580
+ const t = Math.min(1, (now - startTime) / duration);
581
+ const eased = t; // linear easing
582
+ const currentLen = start + (end - start) * eased;
583
+ state.lastLength = currentLen;
584
+ // update circle position and green path dashoffset
585
+ const pt = path.getPointAtLength(currentLen);
586
+ if (state.circle) {
587
+ state.circle.setAttribute('cx', pt.x.toString());
588
+ state.circle.setAttribute('cy', pt.y.toString());
589
+ }
590
+ if (greenPath) {
591
+ greenPath.setAttribute('stroke-dashoffset', (state.totalPathLength - currentLen).toString());
592
+ }
593
+ if (t < 1) {
594
+ requestAnimationFrame(step);
595
+ }
596
+ else {
597
+ // ensure fully complete
598
+ state.lastLength = end;
599
+ if (state.circle) {
600
+ const finalPt = path.getPointAtLength(end);
601
+ state.circle.setAttribute('cx', finalPt.x.toString());
602
+ state.circle.setAttribute('cy', finalPt.y.toString());
603
+ }
604
+ if (greenPath) {
605
+ greenPath.setAttribute('stroke-dashoffset', '0');
606
+ }
607
+ state._animatingToEnd = false;
608
+ resolve();
609
+ }
610
+ };
611
+ requestAnimationFrame(step);
612
+ });
613
+ }
563
614
  // Move to the next container after completing the current SVG
564
615
  async moveToNextContainer() {
565
616
  this.isDragging = false;
@@ -572,6 +623,7 @@ export class LidoTrace {
572
623
  if (this.animationTrace) {
573
624
  await this.playTraceAnimation();
574
625
  }
626
+ storingEachActivityScore(true);
575
627
  console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
576
628
  const delay = 1000; // milliseconds
577
629
  if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -586,6 +638,7 @@ export class LidoTrace {
586
638
  if (this.el && this.onCorrect) {
587
639
  await executeActions(this.onCorrect, this.el);
588
640
  }
641
+ calculateScore();
589
642
  console.log('All SVGs completed, hiding component.');
590
643
  triggerNextContainer();
591
644
  }
@@ -786,7 +839,7 @@ export class LidoTrace {
786
839
  };
787
840
  }
788
841
  render() {
789
- return (h(Host, { key: '3f12119394502b6750874aaa50f43bf42e9f63cc', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '4fddd90d12251c4020006690f8c769ab452c8f6a', style: this.style, id: "lido-svgContainer" })));
842
+ return (h(Host, { key: 'aef0bf373de0c1d6ac49e7782838d9679c2b093f', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'f5223ad78568213f7965b3ea7eeb56b1b965fe78', style: this.style, id: "lido-svgContainer" })));
790
843
  }
791
844
  static get is() { return "lido-trace"; }
792
845
  static get originalStyleUrls() {
package/dist/collection/components/wrap/lido-wrap.js CHANGED
@@ -80,7 +80,7 @@ export class LidoWrap {
80
80
  };
81
81
  }
82
82
  render() {
83
- return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
83
+ return (h(Host, { key: 'ba0767c8fb70d3c20dbcc0835794ec58d62078b3', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '359ff37390f0d20e650481cd8d531ad4da55b308' })));
84
84
  }
85
85
  static get is() { return "lido-wrap"; }
86
86
  static get originalStyleUrls() {
package/dist/collection/stories/Templates/balancing/balancing.stories.js CHANGED
@@ -46,7 +46,7 @@ function getContainerXml(args) {
46
46
  </lido-text>
47
47
  </lido-pos>
48
48
  <!-- question -->
49
- <lido-text visible="true" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.font-weight='600'; this.position='relative';">
49
+ <lido-text visible="true" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/fill-upAudio.mp3" id="heading" tab-index="12" height="landscape.100px,portrait.175px" font-family="'Baloo Bhai 2'" font-size="60px" width="landscape.auto,portrait.86%" string="Drop the elements to match the given symbol '${objective}'" font-color="black" bg-color="white" y="landscape.0%,portrait.-12%" onEntry="this.speak='true';this.font-weight='600'; this.position='relative';">
50
50
  </lido-text>
51
51
  <lido-balance tilt="0" operation="add" visible="true" height="landscape.456px,portrait.500px" y="landscape.4%,portrait.0%" width="landscape.1136px,portrait.876px">
52
52
  <!-- drop Element -->
package/dist/collection/stories/Templates/balloonPop/balloonPop.stories.js CHANGED
@@ -45,7 +45,7 @@ function getContainerXml(args) {
45
45
  <lido-container id="lido-container" tab-index="1" visible="true" objective="${args.objective}"
46
46
  onCorrect="lido-slide-fill.fill-slide='${args.Increment}'; lido-avatar.avatarAnimate='Success'; this.sleep='2000';"
47
47
  onInCorrect="lido-slide-fill.fill-slide='${args.Decrement}'; lido-avatar.avatarAnimate='Fail'; this.sleep='2000';"
48
- is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png">
48
+ is-continue-on-correct="true" show-check="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" disable-speak="true">
49
49
  <lido-text tab-index="1" visible="false" string="Pop the ${args.objective} balloon"></lido-text>
50
50
  <!-- Chimple Avatar -->
51
51
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="305px" width="227px" x="-50px" y="landscape.560px, portrait.1220px" aria-hidden="true" z="1" bg-color="transparent" visible="true">
@@ -54,7 +54,7 @@ function getContainerXml(args) {
54
54
  </lido-cell>
55
55
 
56
56
  <!-- Content -->
57
- <lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';">
57
+ <lido-cell visible="true" layout="row" width="landscape.100%, portrait.95%" height="100%" z="1" onEntry="this.alignItems='flex-start';" >
58
58
 
59
59
  <lido-cell visible="true" layout="pos" x="landscape.70px, portrait.50px" y="landscape.360px, portrait.330px" bg-color="transparent">
60
60
  <lido-text visible="true" string="${args.objective}" bg-color="transparent" font-family="'Baloo Bhai 2'" font-size="140px">
package/dist/collection/stories/Templates/blender/blender.stories.js CHANGED
@@ -89,9 +89,9 @@ function getContainerXml(args) {
89
89
  </lido-cell>
90
90
 
91
91
  <lido-cell layout="row" bg-color="transparent" aria-hidden="true" visible="true" height="landscape.420px,portrait.30%" width="landscape.1451px,portrait.90%" onEntry="this.z-index='1';">
92
- <lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="35px" visible="true"></lido-math-matrix>
93
- <lido-math-matrix id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1" defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="35px" visible="true"></lido-math-matrix>
94
- <lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="100px" visible="true"></lido-math-matrix>
92
+ <lido-math-matrix id="hundredsDrag" value="100" tab-index="11" type="drag" rows="10" cols="10" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#5D44BD" deactiveBgColor="#5D44BD" border="2px solid #4A3697" height="288px" width="220px" visible="true"></lido-math-matrix>
93
+ <lido-math-matrix id="tensDrag" value="10" type="drag" tab-index="12" rows="10" cols="1" defualtFill="10" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="300px" visible="true"></lido-math-matrix>
94
+ <lido-math-matrix id="unitsDrag" value="1" tab-index="13" type="drag" rows="1" cols="1" defualtFill="100" leftIndex="false" topIndex="false" clickable="false" activeBgColor="#F57139" deactiveBgColor="#F57139" border="2px solid #F34D08" height="288px" width="80px" visible="true"></lido-math-matrix>
95
95
  </lido-cell>
96
96
 
97
97
  </lido-container>
package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js CHANGED
@@ -24,7 +24,7 @@ function getContainerXml(args) {
24
24
  .map(([key, { width, height }], index) => {
25
25
  objective.push(`slot${index + 1}`);
26
26
  return `
27
- <lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onInCorrect="lido-avatar.avatarAnimate='Fail';"></lido-math-matrix>
27
+ <lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onInCorrect="lido-avatar.avatarAnimate='Fail';" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>
28
28
  `;
29
29
  })
30
30
  .join("\n");
@@ -33,11 +33,13 @@ function getContainerXml(args) {
33
33
  const colors = ['#a657fa', '#fa7f98', '#dee60e', '#71f24e', '#55d9a4'];
34
34
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
35
35
  return `
36
- <lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>`;
36
+ <lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white" onCorrect="lido-avatar.avatarAnimate='Success';"></lido-math-matrix>`;
37
37
  })
38
38
  .join("\n");
39
39
  return `<main>
40
- <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Checker%20blocks.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
40
+ <lido-container id="lido-container" visible="true" dropAttr="math-matrix" objective="${objective}" onCorrect="this.sleep='2000'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Checker%20blocks.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" disable-speak="true">
41
+
42
+ <lido-text visible="false" tab-index="1" string="drag the missing numbers from right to its correct place and complete the puzzle" onEntry="this.sleep='2000'; this.speak='true';"></lido-text>
41
43
 
42
44
  <!-- Chimple Avatar -->
43
45
  <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.270px" width="landscape.350px,portrait.270px" x="landscape.500px, portrait.-9%" y="landscape.522px, portrait.36%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
@@ -53,7 +55,7 @@ function getContainerXml(args) {
53
55
  </lido-cell>
54
56
  <lido-cell id="truck" visible="true" layout="pos" x="0" y="0" z="1" onEntry="this.animation='rightToPlace 1.5s linear';">
55
57
  <lido-image visible="true" width="landscape.1500px, portrait.1234px" height="landscape.900px, portrait.850px" x="landscape.185px, portrait.-350px" y='landscape.20px, portrait.60px' src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/CheckerBlock/checkerBlockTruck.svg"></lido-image>
56
- <lido-math-matrix id="matrix" visible="true" width="landscape.1570px, portrait.700px" height="landscape.860px, portrait.400px" x="landscape.800px, portrait.135px" y="landscape.23px, portrait.75px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
58
+ <lido-math-matrix id="matrix" visible="true" width="landscape.720px, portrait.660px" height="landscape.860px, portrait.400px" x="landscape.800px, portrait.135px" y="landscape.23px, portrait.75px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
57
59
  ${dropMatrices}
58
60
 
59
61
  </lido-cell>
package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js CHANGED
@@ -15,7 +15,7 @@ const meta = {
15
15
  },
16
16
  };
17
17
  export default meta;
18
- export const OrderTractor = {
18
+ export const FillAnswer = {
19
19
  args: {
20
20
  firstNum: '3', operator: '+', secontNum: '4', equator: '=', answer: '7',
21
21
  option1: '5', option2: '7', option3: '3', option4: '2', isAllowOnlyCorrect: 'true',
@@ -28,40 +28,46 @@ export const OrderTractor = {
28
28
  function getContainerXml(args) {
29
29
  return `
30
30
  <main>
31
- <lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
32
- <!-- Chimple Avatar -->
33
- <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';">
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/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
35
- </lido-avatar>
36
- </lido-cell>
31
+ <lido-container id="lido-container" is-allow-only-correct="${args.isAllowOnlyCorrect}" value="mainContainer1" tab-index="1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Fill%20answer.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000'; " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
32
+ <!-- Chimple Avatar -->
33
+ <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';">
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/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
35
+ </lido-avatar>
36
+ </lido-cell>
37
37
 
38
- <!--Parent cell -->
39
- <lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
40
- <!-- heading -->
41
- <lido-cell audio="" layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
42
- <lido-text id="question" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
43
-
44
- <lido-text tab-index="1" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
45
- <lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" 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>
46
- <lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" 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>
47
- <lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" 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>
48
- <lido-text tab-index="5" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}" 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>
49
-
38
+ <!--Parent cell -->
39
+ <lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
40
+ <!-- heading -->
41
+ <lido-cell layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white" onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
42
+
43
+ <lido-text id="question" audio="" tab-index="2" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';">
44
+ </lido-text>
50
45
 
51
- </lido-cell>
52
- <lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear'; this.gridTemplateColumns = 'repeat(2, 1fr)'; this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
53
- <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" type="drag">
54
- </lido-text>
55
- <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" type="drag">
56
- </lido-text>
57
- <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" type="drag">
58
- </lido-text>
59
- <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" type="drag">
60
- </lido-text>
61
- </lido-cell>
46
+ <lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; ">
47
+ </lido-text>
48
+ <lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
49
+ </lido-text>
50
+ <lido-text tab-index="5" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
51
+ </lido-text>
52
+ <lido-text tab-index="6" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';">
53
+ </lido-text>
54
+ <lido-text tab-index="7" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}" type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px'; this.box-shoadow=''; this.margin-right='35px';" onTouch="this.speak='true';" onCorrect="this.speak='true';" >
55
+ </lido-text>
56
+
57
+ </lido-cell>
58
+ <lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear'; this.gridTemplateColumns = 'repeat(2, 1fr)'; this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
59
+ <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
60
+ </lido-text>
61
+ <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
62
+ </lido-text>
63
+ <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
64
+ </lido-text>
65
+ <lido-text font-family="'Baloo Bhai 2'" audio="" 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="88px" onTouch="this.speak='true';" onCorrect="this.speak='true';" type="drag">
66
+ </lido-text>
67
+ </lido-cell>
62
68
 
63
- </lido-cell>
64
- </lido-container>
69
+ </lido-cell>
70
+ </lido-container>
65
71
  </main>
66
72
  `;
67
73
  }
package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js CHANGED
@@ -47,13 +47,13 @@ function getContainerXml(args) {
47
47
  </lido-text>
48
48
 
49
49
  <!-- Bottom display Section -->
50
- <lido-cell layout="pos" id="pos2" value="pos2" height="auto" width="landscape.815px, portrait.815px" x="landscape.775px, portrait.48px" y="landscape.300px, portrait.945px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
50
+ <lido-cell layout="pos" id="pos2" value="pos2" height="auto" width="landscape.900px, portrait.100%" x="landscape.700px, portrait.0px" y="landscape.300px, portrait.1000px" ariaHidden="true" bgColor="transparent" visible="true" onEntry="this.flex-shrink='0'; this.animation='bottomToPlace 2s linear';">
51
51
  <lido-text id="answer-multiply-beeds" value="${answer}" height="inherit" width="inherit" string="${str_val}" font-size="84px" font-weight="600" bgColor="#FFF4CD" visible="true" onEntry="this.word-wrap='break-word'; this.fontWeight='600'; this.textAlign='center';">
52
52
  </lido-text>
53
53
  </lido-cell>
54
54
 
55
55
  <!-- Beeds Section -->
56
- <lido-cell layout="pos" id="pos3" height="landscape.1100px, portrait.900px" width="landscape.700px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
56
+ <lido-cell layout="pos" id="pos3" height="landscape.1100px, portrait.900px" width="landscape.600px,portrait.825px" x="landscape.40px, portrait.15px" y="landscape.-80px,portrait.45px" ariaHidden="true" z="0" bgColor="transparent" visible="true" onEntry="this.opacity='1';">
57
57
  <lido-math-matrix id="mat1" visible="true" rows="9" cols="9" top-index="true" left-index="true" bottom-index="false" clickable="true" active-only-visible="false" active-bg-color="#C23E06" deactive-bg-color="#F57139" border="2px solid #F34D08" defualt-fill="0" matrix-image="">
58
58
  </lido-math-matrix>
59
59
  </lido-cell>
package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js CHANGED
@@ -16,31 +16,31 @@ export default meta;
16
16
  export const numberBoard = {
17
17
  args: {
18
18
  options: [
19
- "1",
20
- "2",
21
- "3",
22
- "4",
23
- "5",
24
- "6",
25
- "7",
26
- "8",
27
- "9",
28
- "10"
19
+ "11",
20
+ "12",
21
+ "13",
22
+ "14",
23
+ "15",
24
+ "16",
25
+ "17",
26
+ "18",
27
+ "19",
28
+ "20"
29
29
  ],
30
30
  answers: [
31
- "1",
32
- "2",
33
- "3",
34
- "4",
35
- "5",
36
- "6",
37
- "7",
38
- "8",
39
- "9",
40
- "10"
31
+ "11",
32
+ "12",
33
+ "13",
34
+ "14",
35
+ "15",
36
+ "16",
37
+ "17",
38
+ "18",
39
+ "19",
40
+ "20"
41
41
  ],
42
42
  colors: ['#CF1565', '#409F5C', '#02C1C1', '#AD3184', '#F55376', '#81C127', '#5D44BD'],
43
- isAllowOnlyCorrect: 'true',
43
+ isAllowOnlyCorrect: true,
44
44
  },
45
45
  render: args => {
46
46
  const xml = getContainerXml(args);
@@ -52,51 +52,59 @@ function getContainerXml(args) {
52
52
  const { options = [], answers = [], isAllowOnlyCorrect = true } = args;
53
53
  const pickedColors = args.colors;
54
54
  const DropCells = answers.map(answer => {
55
+ const rows = String(Number(answer) <= 10 ? 2 : 4);
55
56
  return `
56
- <!-- drop -->
57
- <lido-cell layout="col" visible="true" margin="landscape.0,portrait.72px 0px -95px 0px" height="landscape.345px,portrait.350px" width="121px" bg-Color="#DFF2F2" onEntry="this.position='relative';this.align-items='center';this.justify-content='center';this.borderRadius='10px';">
58
- <lido-math-matrix id="mat1" rows="2" cols="5" defualtFill="${answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="" activeBgColor="#922E05" inactiveBgColor="transparent" border="5px soild transparent" height="70%" width="100%" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
59
- <lido-cell id="drop${tabCounter}" visible="true" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-color="white" tab-index="${tabCounter++}" value="${answer}" string="${answer}" type="drop" onCorrect="lido-avatar.avatarAnimate='Success';" ></lido-cell>
60
- </lido-cell>
61
- `;
57
+ <!-- drop -->
58
+ <lido-cell layout="col" visible="true" gap="20px" margin="landscape.0,portrait.72px 0px -95px 0px" height="landscape.345px,portrait.350px" width="150px" bg-Color="#DFF2F2" onEntry="this.position='relative';this.align-items='center';this.justify-content='center';this.borderRadius='10px';">
59
+ <lido-math-matrix id="mat1" rows="${rows}" cols="5" defualtFill="${answer}" leftIndex="false" topIndex="false" clickable="true" matrixImage="" activeBgColor="#922E05" inactiveBgColor="transparent" border="5px soild transparent" height="50%" width="100%" visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px">
60
+ </lido-math-matrix>
61
+ <lido-cell id="drop${tabCounter}" visible="true" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-color="white" tab-index="${tabCounter++}" value="${answer}" string="${answer}" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';">
62
+ </lido-cell>
63
+ </lido-cell>
64
+ `;
62
65
  }).join('');
63
66
  const DragCells = options
64
67
  .map((option) => {
65
68
  const color = pickedColors[Math.floor(Math.random() * pickedColors.length)];
66
69
  return `
67
- <lido-text visible="true" onTouch="this.speak='true';" type="drag" id="drag${tabCounter}" tab-index="${tabCounter++}" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-Color="white" font-family="'Baloo Bhai 2'" font-size="100px" font-weigth="500" value="${option}" string="${option}" margin="landscape.0 0 127px 0,portrait.0 135px 0 0 " onEntry="this.color='${color}';this.fontWeight='800';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white ">
68
- </lido-text>
69
- `;
70
+ <lido-text visible="true" onTouch="this.speak='true';" type="drag" id="drag${tabCounter}" tab-index="${tabCounter++}" height="landscape.110px,portrait.110px" width="landscape.110px,portrait.110px" bg-Color="white" font-family="'Baloo Bhai 2'" font-size="100px" font-weigth="500" value="${option}" string="${option}" margin="landscape.0 0 127px 0,portrait.0 135px 0 0 " onEntry="this.color='${color}';this.fontWeight='800';this.borderRadius='10px'; this.flex-shrink='0';this.textShadow = '3px 0 white, -3px 0 white, 0 3px white, 0 -3px white ">
71
+ </lido-text>
72
+ `;
70
73
  })
71
74
  .join('');
72
- return `<main>
73
- <lido-container id="lido-container" show-drop-border="false" appendToDropOnCompletion="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Number%20board.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';trainAudio.speak='true';" onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
74
- <!-- Chimple Avatar -->
75
- <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
76
-
77
- <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}">
78
- </lido-avatar>
79
-
80
- </lido-cell>
81
- <lido-image visible="true" id="tyre" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/wheel.png" height="119px" width="131px" onEntry=" this.position='relative'; this.animation='rightToPlace 2.5s linear';" x="landscape.299px, portrait.293px" y="landscape.768px, portrait.1092px" margin="">
82
- </lido-image>
83
- <lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true';"></lido-text>
84
-
85
- <lido-cell visible="true" id="xx" layout="landscape.row,portrait.col" height="90%" width="90%" bg-Color="transparent" margin="landscape.56px 0px 0px 0px,portrait.0px" onEntry="">
86
- <lido-cell visible="true" id="truck" layout="row" height="90%" width="1377px" bg-Color="transparent" margin="landscape.-169px 114px 39px -195px,portrait.-115px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';">
87
- <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/truck.png" height="583px" width="502px" onEntry=" " margin="landscape.345px -40px 0px 55px,portrait.408px 67px -179px -107px">
88
- </lido-image>
89
- <lido-cell visible="true" height="landscape.100%,portrait.858px" width="landscape.858px,portrait.62%" bg-color="#F78315" margin="landscape.0px 0px 0px -18px,portrait.-124px 252px -238px -114px" onEntry=" this.place-items='center';this.gap='1px'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(143px, auto))'; this.gridTemplateRows='repeat(auto-fit, 362px)'; this.flexWrap='wrap';">
90
- ${DropCells}
91
- </lido-cell>
92
- </lido-cell>
93
-
94
- <lido-cell layout="landscape.col,portrait.row" visible="true" height="landscape.71%,portrait.185px" width="landscape.12%,portrait.71%" bg-color="transparent" onEntry=" this.animation='rightToPlace 2.7s linear';" margin="landscape.-280px 102px 0px -73px,portrait.-108px 0px 151px -50px">
95
- ${DragCells}
96
- </lido-cell>
97
- </lido-cell>
98
-
99
-
100
- </lido-container>
101
- </main>`;
75
+ return `
76
+ <main>
77
+ <lido-container id="lido-container" show-drop-border="false" appendToDropOnCompletion="false" is-allow-only-correct="${isAllowOnlyCorrect}" drop-action="move" tab-index="1" value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Number%20board.png" objective="${answers.join(',')}" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="this.sleep='1000';lido-avatar.avatarAnimate='Success';xx.animation='placeToLeft 2s linear';tyre.animation='placeToLeft 2s linear';trainAudio.speak='true';" onEntry="this.justifyContent='space-around'; this.animation='rightToPlace 2.5 linear';this.overflow='hidden';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
78
+
79
+ <!-- Chimple Avatar -->
80
+ <lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.417px,portrait.363px" width="landscape.280px,portrait.340px" x="landscape.1360px, portrait.597px" y="landscape.637px, portrait.1370px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
81
+
82
+ <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}">
83
+ </lido-avatar>
84
+ </lido-cell>
85
+
86
+ <lido-image visible="true" id="tyre" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/wheel.png" height="119px" width="131px" onEntry=" this.position='relative'; this.animation='rightToPlace 2.5s linear';" x="landscape.299px, portrait.293px" y="landscape.768px, portrait.1092px" margin="">
87
+ </lido-image>
88
+
89
+ <lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Ordered%20Tractor/train1.m4a" onEntry="this.speak='true'; question-text.speak='true';">
90
+ </lido-text>
91
+ <lido-text id="question-text" visible="false" audio="" string="drag the number to its correct place and complete the number puzzle" value="drag the number to its correct place and complete the number puzzle" onEntry="">
92
+ </lido-text>
93
+
94
+ <lido-cell visible="true" id="xx" layout="landscape.row,portrait.col" height="90%" width="90%" bg-Color="transparent" margin="landscape.56px 0px 0px 0px,portrait.0px" onEntry="">
95
+ <lido-cell visible="true" id="truck" layout="row" height="90%" width="1377px" bg-Color="transparent" margin="landscape.-169px 114px 39px -195px,portrait.-115px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';">
96
+ <lido-image visible="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/letterboard/truck.png" height="583px" width="502px" onEntry=" " margin="landscape.345px -40px 0px 55px,portrait.408px 67px -179px -107px">
97
+ </lido-image>
98
+ <lido-cell visible="true" height="landscape.100%,portrait.858px" width="landscape.858px,portrait.62%" bg-color="#F78315" margin="landscape.0px 0px 0px -18px,portrait.-124px 252px -238px -114px" onEntry=" this.place-items='center';this.gap='1px'; this.padding='0px'; this.gridTemplateColumns='repeat(auto-fill, minmax(143px, auto))'; this.gridTemplateRows='repeat(auto-fit, 362px)'; this.flexWrap='wrap';">
99
+ ${DropCells}
100
+ </lido-cell>
101
+ </lido-cell>
102
+
103
+ <lido-cell layout="landscape.col,portrait.row" visible="true" height="landscape.71%,portrait.185px" width="landscape.12%,portrait.71%" bg-color="transparent" onEntry=" this.animation='rightToPlace 2.7s linear';" margin="landscape.-280px 102px 0px -73px,portrait.-108px 0px 151px -50px">
104
+ ${DragCells}
105
+ </lido-cell>
106
+ </lido-cell>
107
+ </lido-container>
108
+ </main>
109
+ `;
102
110
  }
package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js CHANGED
@@ -87,9 +87,10 @@ function getContainerXml(args) {
87
87
  const objective = args.objective;
88
88
  const isAllowOnlyCorrect = (_a = args.isAllowOnlyCorrect) !== null && _a !== void 0 ? _a : true;
89
89
  const options = args.options;
90
+ let tabIndexStart = 4;
90
91
  const optionsCell = options.map((option) => {
91
92
  return `
92
- <lido-text id="${option}" tab-index="${option}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px" bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
93
+ <lido-text id="${option}" tab-index="${tabIndexStart++}" height="215px" width="auto" visible="true" value="${option}" string="${option}" font-family="'Baloo Bhai 2'" font-color="black" type="click" font-size="104px" bg-color="#FFB366" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-flow='column-reverse';" border-image="">
93
94
  <lido-text visible="true" id="option-text" audio="" height="0px" width="auto" font-family="'Baloo 2', serif" font-size="landscape.44px, portrait.52px" font-color="black" string="${optionText}" bg-Color="transparent" onEntry="this.font-weight='700';" padding="0px 10px 0px 10px">
94
95
  </lido-text>
95
96
  </lido-text>
@@ -111,7 +112,7 @@ function getContainerXml(args) {
111
112
  console.log('Expression Text: ', escapedExpressionText);
112
113
  return `
113
114
  <main>
114
- <lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1" value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Question%20board.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
115
+ <lido-container id="question-board-container" disable-speak="true" objective="${objective}" tab-index="1" value="questionBoard" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Question%20board.png" height="100%" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; question-board-image.transition='transform 1s ease'; question-board-image.transform='rotateY(180deg)'; question-board-text.transition='opacity 0.5s ease'; question-board-text.opacity='0'; option-row.opacity='0'; invisible-text.transition='opacity 0.5s ease'; invisible-text.opacity='1'; invisible-text.visibility='visible'; ${expressionAnimation} this.sleep='4000';" onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" is-allow-only-correct="${isAllowOnlyCorrect}" >
115
116
 
116
117
  <!-- Chimple Avatar -->
117
118
  <lido-cell layout="pos" id="pos1" disableEdit="true" value="pos1" height="landscape.570px, portrait.700px" width="landscape.380px, portrait.485px" x="landscape.110px, portrait.195px" y="landscape.160px, portrait.1050px" ariaHidden="true" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0'; this.z-index='2';">
@@ -125,11 +126,11 @@ function getContainerXml(args) {
125
126
  </lido-image>
126
127
  </lido-cell>
127
128
 
128
- <lido-text visible="false" id="txt1" audio="" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
129
+ <lido-text visible="false" id="txt1" audio="" tab-index="2" font-family="'Baloo 2', serif" font-size="52px" font-color="black" string="Solve the problem shown in the board and select the correct answer" bg-Color="transparent" onEntry="this.speak='true'; question-board-text.speak='true';" >
129
130
  </lido-text>
130
131
 
131
132
  <lido-cell layout="pos" id="pos3" value="pos3" x="landscape.445px, portrait.45px" y="landscape.115px, portrait.145px" visible="true" height="landscape.60%,portrait.10%" width="landscape.55%,portrait.92%" border-radius="7px" bg-color="transparent" onEntry="this.z-index='1';">
132
- <lido-text visible="true" id="question-board-text" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
133
+ <lido-text visible="true" id="question-board-text" tab-index="3" audio="" font-family="'Baloo 2', serif" font-size="landscape.60px, portrait.52px" font-color="black" string="${questionBoardText}" bg-Color="transparent" onEntry="this.font-weight='700'; this.textAlign='left'; this.lineHeight='1.25';" >
133
134
  </lido-text>
134
135
  </lido-cell>
135
136
 
@@ -140,7 +141,7 @@ function getContainerXml(args) {
140
141
 
141
142
  <!-- Invisible Text for Animation -->
142
143
  <lido-cell layout="pos" id="invisible-text" disableEdit="true" value="pos3" height="landscape.10%, portrait.710px" width="landscape.75%, portrait.875px" x="landscape.325px, portrait.10px" y="landscape.740px, portrait.475px" ariaHidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.flex-shrink='0'; this.opacity='0'; this.z-index='0';">
143
- <lido-text id="txt2" audio="" tab-index="6" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px" bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
144
+ <lido-text id="txt2" audio="" tab-index="8" height="inherit" width="inherit" visible="true" value="${escapedExpressionText}" string="${escapedExpressionText}" font-family="'Baloo Bhai 2'" font-color="white" font-size="104px" bg-color="transparent" onCorrect="" onInCorrect="this.vibrate='horizontal-shake';" onEntry="this.font-weight='800'; this.borderRadius='10px'; this.flex-shrink='0';">
144
145
  </lido-text>
145
146
  </lido-cell>
146
147