Add Start Button ANd change Help Button Possition in capital letter and numeric

src/pages/numeric/0.astro

@@ -54,6 +54,11 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 70;
       animated0videoScale = 0.6;
       animated0Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -68,6 +73,11 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 100;
       animated0videoScale = 0.70;
       animated0Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -203,11 +213,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 16 : customWidth * 0.70;
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -257,6 +267,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
 
 
   }

src/pages/numeric/1.astro

@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animated1videoScale = 0.6;
       animated1Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated1videoScale = 0.70;
       animated1Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.70;
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -260,6 +270,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
 
 
   }

src/pages/numeric/2.astro

@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animated2Scale = 0.55;
       animated2Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated2Scale = 0.55;
       animated2Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/3.astro

@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animated3Scale = 0.55;
       animated3Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated3Scale = 0.55;
       animated3Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -211,7 +221,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/4.astro

@@ -59,6 +59,11 @@ import Layout from "../../layouts/Layout.astro";
        
       animated4Height = 35;
       animated4Scale = 0.65;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro";
         
       animated4Height = 20;
       animated4Scale = 0.7;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animated4', '/assets/animated-letter/number_4.mp4');
@@ -213,7 +223,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -325,6 +335,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/5.astro

@@ -59,6 +59,11 @@ import Layout from "../../layouts/Layout.astro";
        
       animated5Height = 35;
       animated5Scale = 0.55;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro";
         
       animated5Height = 20;
       animated5Scale = 0.6;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animated5', '/assets/animated-letter/number_5.mp4');
@@ -214,7 +224,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -326,6 +336,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/6.astro

@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animated6Scale = 0.55;
       animated6Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated6Scale = 0.55;
       animated6Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/7.astro

@@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro";
          
       animated7Scale = 0.55;
       animated7Height = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.1;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated7Scale = 0.55;
       animated7Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/8.astro

@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animated8Scale = 0.55;
       animated8Height = 15;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated8Scale = 0.55;
       animated8Height = 0;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/numeric/9.astro

@@ -54,7 +54,12 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 70;
          
       animated9Scale = 0.55;
-      animated9Height = 32;
+      animated9Height = 40;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10;
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animated9Scale = 0.55;
       animated9Height = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 8 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -294,6 +304,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {

src/pages/small-letter/s.astro

@@ -206,7 +206,7 @@ import Layout from "../../layouts/Layout.astro";
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 13 : customWidth * 0.75;
-      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();