number 4 complete start from 5 tomorow

2023-12-05 15:34:40 +00:00
parent 1253dd5911
commit dfa0499ab0
70 changed files with 1289 additions and 264 deletions
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "stat timr here";

    if(isMobile){
      cloudeSize = 200;
@@ -59,6 +61,14 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,9 +86,27 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
+    window.onload = function() {
+        currentDate = new Date();
+        formattedDateTime = currentDate.toLocaleString();
+        console.log("Page loaded on: " + formattedDateTime);
+    };
+    // function gmStartTime() {
+    //   let startTime = new Date();
+    //   let gameStartTime = startTime.toLocaleString();
+    //     console.log("Page loaded on: " + gameStartTime);
+    // };
  // let hideButton;

  function preload() {
@@ -97,8 +125,64 @@ import Layout from "../../layouts/Layout.astro";
    this.load.image('bgMobile', '/assets/bgMobile.png');
    this.load.image('canvasStand', '/assets/stand2.png');
  }
-
  function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+      fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          method: 'POST',
+          headers: {
+          'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(userData)
+      })
+      .then(response => {
+          if(response.ok){
+          // console.log('Data Saved', response)
+          } else{
+          // console.log('Something Wrong', response)
+          }
+      })
+      .catch(error => {
+          console.error('An error occured', error)
+      }); 
+      };
+      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+          font: '600 20px Quicksand',
+          fill: 'blue'
+      }).setDepth(1);
+      submitNotic.setVisible(false);
+      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+        font: '900 24px Quicksand',
+        fill: '#05b3a4',
+        backgroundColor : '#7c4c23',
+        padding: {x: 10, y: 10},
+        shadow: {
+          offsetX : 2, 
+          offsetY : 2, 
+          color: '#000',
+          blur: 5,
+          fill: true
+        }
+      });
+
+      submitButton.setVisible(false);
+      submitButton.setInteractive().on('pointerdown', () => {
+        console.log('Clicked');
+        submitButton.setVisible(false);
+        submitNotic.setVisible(true);
+        // windowLoad();
+        submitUserData();
+      })
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -116,21 +200,20 @@ import Layout from "../../layouts/Layout.astro";

    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);

-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
+    const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+    const duration = 3000; // Duration of the animation in milliseconds

-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
+    // Create a scaling tween
+    this.tweens.add({
+      targets: sun,
+      scaleX: scaleFactor,
+      scaleY: scaleFactor,
+      duration: duration,
+      ease: 'Linear',
+      yoyo: true, // Makes the animation play in reverse
+      repeat: -1 // Repeat indefinitely
+    });
+    
    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
@@ -143,8 +226,6 @@ import Layout from "../../layouts/Layout.astro";
    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
    const mask = maskGraphics.createGeometryMask();

- 
-
    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
        font: '900 24px quicksand',
        fill: '#05b3a4',
@@ -283,13 +364,18 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      // gmStartTime();
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
+      console.log("Page loaded on: " + gameStartTime);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
      startButton.setVisible(false);
-
+      submitButton.setVisible(true);
    })


--- a/src/pages/guided-tracing/1.astro
+++ b/src/pages/guided-tracing/1.astro
@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "stat timr here";

    if(isMobile){
      cloudeSize = 200;
@@ -60,6 +62,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -72,7 +78,6 @@ import Layout from "../../layouts/Layout.astro";
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-          
      animated1videoScale = 0.70;
      animated1Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
@@ -80,7 +85,16 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
  // let hideButton;

  function preload() {
@@ -102,6 +116,63 @@ import Layout from "../../layouts/Layout.astro";
  }

  function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+      fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          method: 'POST',
+          headers: {
+          'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(userData)
+      })
+      .then(response => {
+          if(response.ok){
+          // console.log('Data Saved', response)
+          } else{
+          // console.log('Something Wrong', response)
+          }
+      })
+      .catch(error => {
+          console.error('An error occured', error)
+      }); 
+      };
+      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+          font: '600 20px Quicksand',
+          fill: 'blue'
+      }).setDepth(1);
+      submitNotic.setVisible(false);
+      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+        font: '900 24px Quicksand',
+        fill: '#05b3a4',
+        backgroundColor : '#7c4c23',
+        padding: {x: 10, y: 10},
+        shadow: {
+          offsetX : 2, 
+          offsetY : 2, 
+          color: '#000',
+          blur: 5,
+          fill: true
+        }
+      });
+
+      submitButton.setVisible(false);
+      submitButton.setInteractive().on('pointerdown', () => {
+        console.log('Clicked');
+        submitButton.setVisible(false);
+        submitNotic.setVisible(true);
+        // windowLoad();
+        submitUserData();
+      })
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -286,8 +357,10 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
--- a/src/pages/guided-tracing/2.astro
+++ b/src/pages/guided-tracing/2.astro
@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";

    if(isMobile){
      cloudeSize = 200;
@@ -60,6 +62,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -72,15 +78,22 @@ import Layout from "../../layouts/Layout.astro";
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-          
      animated2Scale = 0.55;
      animated2Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
-
      startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
  // let hideButton;

  function preload() {
@@ -104,6 +117,63 @@ import Layout from "../../layouts/Layout.astro";
  }

  function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+      fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          method: 'POST',
+          headers: {
+          'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(userData)
+      })
+      .then(response => {
+          if(response.ok){
+          // console.log('Data Saved', response)
+          } else{
+          // console.log('Something Wrong', response)
+          }
+      })
+      .catch(error => {
+          console.error('An error occured', error)
+      }); 
+      };
+      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+          font: '600 20px Quicksand',
+          fill: 'blue'
+      }).setDepth(1);
+      submitNotic.setVisible(false);
+      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+        font: '900 24px Quicksand',
+        fill: '#05b3a4',
+        backgroundColor : '#7c4c23',
+        padding: {x: 10, y: 10},
+        shadow: {
+          offsetX : 2, 
+          offsetY : 2, 
+          color: '#000',
+          blur: 5,
+          fill: true
+        }
+      });
+
+      submitButton.setVisible(false);
+      submitButton.setInteractive().on('pointerdown', () => {
+        console.log('Clicked');
+        submitButton.setVisible(false);
+        submitNotic.setVisible(true);
+        // windowLoad();
+        submitUserData();
+      })
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -320,8 +390,10 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
--- a/src/pages/guided-tracing/3.astro
+++ b/src/pages/guided-tracing/3.astro
@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";

    if(isMobile){
      cloudeSize = 200;
@@ -60,6 +62,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -77,10 +83,18 @@ import Layout from "../../layouts/Layout.astro";
      animated3Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
-
      startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
  // let hideButton;

  function preload() {
@@ -103,6 +117,63 @@ import Layout from "../../layouts/Layout.astro";
  }

  function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+      fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          method: 'POST',
+          headers: {
+          'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(userData)
+      })
+      .then(response => {
+          if(response.ok){
+          // console.log('Data Saved', response)
+          } else{
+          // console.log('Something Wrong', response)
+          }
+      })
+      .catch(error => {
+          console.error('An error occured', error)
+      }); 
+      };
+      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+          font: '600 20px Quicksand',
+          fill: 'blue'
+      }).setDepth(1);
+      submitNotic.setVisible(false);
+      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+        font: '900 24px Quicksand',
+        fill: '#05b3a4',
+        backgroundColor : '#7c4c23',
+        padding: {x: 10, y: 10},
+        shadow: {
+          offsetX : 2, 
+          offsetY : 2, 
+          color: '#000',
+          blur: 5,
+          fill: true
+        }
+      });
+
+      submitButton.setVisible(false);
+      submitButton.setInteractive().on('pointerdown', () => {
+        console.log('Clicked');
+        submitButton.setVisible(false);
+        submitNotic.setVisible(true);
+        // windowLoad();
+        submitUserData();
+      })
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -319,8 +390,10 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
--- a/src/pages/guided-tracing/4.astro
+++ b/src/pages/guided-tracing/4.astro
@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 //   let x = 100;

 // // Use x
@@ -64,6 +66,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -84,7 +90,16 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
  function preload() {
    this.load.video('animated4', '/assets/animated-letter/number_4.mp4');
    this.load.svg('number4', '/assets/numeric/n4.svg');
@@ -108,6 +123,62 @@ import Layout from "../../layouts/Layout.astro";
  }

  function create() {
+    const URL = window.location.href;
+      const urlSplit = URL.split('/');
+      const gameName = urlSplit[3] + '-' + urlSplit[4]
+      let userData = {
+        'status' : 'published',
+        'user_id': 'guided-tracing@beanstalkedu.com',
+        'game_name': gameName,
+        'game_open': formattedDateTime,
+        'game_start' : gameStartTime,
+      };
+      function submitUserData() {
+        console.log(userData)
+      fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          method: 'POST',
+          headers: {
+          'Content-Type' : 'application/json'
+          },
+          body: JSON.stringify(userData)
+      })
+      .then(response => {
+          if(response.ok){
+          // console.log('Data Saved', response)
+          } else{
+          // console.log('Something Wrong', response)
+          }
+      })
+      .catch(error => {
+          console.error('An error occured', error)
+      }); 
+      };
+      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+          font: '600 20px Quicksand',
+          fill: 'blue'
+      }).setDepth(1);
+      submitNotic.setVisible(false);
+      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+        font: '900 24px Quicksand',
+        fill: '#05b3a4',
+        backgroundColor : '#7c4c23',
+        padding: {x: 10, y: 10},
+        shadow: {
+          offsetX : 2, 
+          offsetY : 2, 
+          color: '#000',
+          blur: 5,
+          fill: true
+        }
+      });
+      submitButton.setVisible(false);
+      submitButton.setInteractive().on('pointerdown', () => {
+        console.log('Clicked');
+        submitButton.setVisible(false);
+        submitNotic.setVisible(true);
+        // windowLoad();
+        submitUserData();
+      })
    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
    this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -351,8 +422,10 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
--- a/src/pages/guided-tracing/5.astro
+++ b/src/pages/guided-tracing/5.astro
@@ -64,6 +64,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -82,8 +86,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animated5', '/assets/animated-letter/number_5.mp4');
@@ -352,6 +360,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/6.astro
+++ b/src/pages/guided-tracing/6.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -320,6 +328,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/7.astro
+++ b/src/pages/guided-tracing/7.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -320,6 +328,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/8.astro
+++ b/src/pages/guided-tracing/8.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -320,6 +328,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/9.astro
+++ b/src/pages/guided-tracing/9.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -320,6 +328,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@@ -64,6 +64,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -81,8 +85,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4');
@@ -342,6 +350,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/B.astro
+++ b/src/pages/guided-tracing/B.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -351,6 +359,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/C.astro
+++ b/src/pages/guided-tracing/C.astro
@@ -57,6 +57,10 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonWidth = customWidth / 2 + 10;
      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -74,8 +78,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -281,6 +289,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/D.astro
+++ b/src/pages/guided-tracing/D.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -313,6 +321,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/E.astro
+++ b/src/pages/guided-tracing/E.astro
@@ -58,6 +58,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -74,8 +78,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedE', '/assets/animated-letter/capital_e.mp4');
@@ -380,6 +388,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/F.astro
+++ b/src/pages/guided-tracing/F.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4');
@@ -342,6 +350,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/G.astro
+++ b/src/pages/guided-tracing/G.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -315,6 +323,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/H.astro
+++ b/src/pages/guided-tracing/H.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedH', '/assets/animated-letter/capital_h.mp4');
@@ -346,6 +354,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/I.astro
+++ b/src/pages/guided-tracing/I.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4');
@@ -345,6 +353,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/J.astro
+++ b/src/pages/guided-tracing/J.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/K.astro
+++ b/src/pages/guided-tracing/K.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedK', '/assets/animated-letter/capital_k.mp4');
@@ -345,6 +353,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/L.astro
+++ b/src/pages/guided-tracing/L.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -315,6 +323,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/M.astro
+++ b/src/pages/guided-tracing/M.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4');
@@ -380,6 +388,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/N.astro
+++ b/src/pages/guided-tracing/N.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedN', '/assets/animated-letter/capital_n.mp4');
@@ -347,6 +355,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/O.astro
+++ b/src/pages/guided-tracing/O.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -282,6 +290,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/P.astro
+++ b/src/pages/guided-tracing/P.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -315,6 +323,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/Q.astro
+++ b/src/pages/guided-tracing/Q.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -316,6 +324,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/R.astro
+++ b/src/pages/guided-tracing/R.astro
@@ -64,6 +64,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -82,8 +86,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4');
@@ -349,6 +357,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/S.astro
+++ b/src/pages/guided-tracing/S.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -282,6 +290,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/T.astro
+++ b/src/pages/guided-tracing/T.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -314,6 +322,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/U.astro
+++ b/src/pages/guided-tracing/U.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -281,6 +289,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/V.astro
+++ b/src/pages/guided-tracing/V.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -315,6 +323,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/W.astro
+++ b/src/pages/guided-tracing/W.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4');
@@ -379,6 +387,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/X.astro
+++ b/src/pages/guided-tracing/X.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -315,6 +323,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/Y.astro
+++ b/src/pages/guided-tracing/Y.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4');
@@ -346,6 +354,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/Z.astro
+++ b/src/pages/guided-tracing/Z.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4');
@@ -344,6 +352,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/a.astro
+++ b/src/pages/guided-tracing/a.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/b.astro
+++ b/src/pages/guided-tracing/b.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -77,8 +81,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -317,8 +325,10 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
      hideButton.setVisible(false);
      demoButton.setVisible(true);
--- a/src/pages/guided-tracing/c.astro
+++ b/src/pages/guided-tracing/c.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -286,6 +294,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/d.astro
+++ b/src/pages/guided-tracing/d.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -319,6 +327,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/e.astro
+++ b/src/pages/guided-tracing/e.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -319,6 +327,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/f.astro
+++ b/src/pages/guided-tracing/f.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -317,6 +325,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/g.astro
+++ b/src/pages/guided-tracing/g.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -319,6 +327,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/h.astro
+++ b/src/pages/guided-tracing/h.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -318,6 +326,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/i.astro
+++ b/src/pages/guided-tracing/i.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -318,6 +326,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/j.astro
+++ b/src/pages/guided-tracing/j.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -318,6 +326,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/k.astro
+++ b/src/pages/guided-tracing/k.astro
@@ -64,6 +64,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -82,8 +86,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedK', '/assets/animated-letter/small_k.mp4');
--- a/src/pages/guided-tracing/l.astro
+++ b/src/pages/guided-tracing/l.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

@@ -286,6 +294,7 @@ import Layout from "../../layouts/Layout.astro";
    firstTextLayer.setVisible(false);
    startButton.setInteractive().on('pointerdown', () => {
      audioOneAudio.play();
+submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
      graphics.setVisible(true);
--- a/src/pages/guided-tracing/m.astro
+++ b/src/pages/guided-tracing/m.astro
@@ -63,6 +63,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -80,8 +84,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedM', '/assets/animated-letter/small_m.mp4');
--- a/src/pages/guided-tracing/n.astro
+++ b/src/pages/guided-tracing/n.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/o.astro
+++ b/src/pages/guided-tracing/o.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/p.astro
+++ b/src/pages/guided-tracing/p.astro
@@ -59,6 +59,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -76,8 +80,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/q.astro
+++ b/src/pages/guided-tracing/q.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/r.astro
+++ b/src/pages/guided-tracing/r.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/s.astro
+++ b/src/pages/guided-tracing/s.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }

  function preload() {
--- a/src/pages/guided-tracing/t.astro
+++ b/src/pages/guided-tracing/t.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/u.astro
+++ b/src/pages/guided-tracing/u.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/v.astro
+++ b/src/pages/guided-tracing/v.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/w.astro
+++ b/src/pages/guided-tracing/w.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedW', '/assets/animated-letter/small_w.mp4');
--- a/src/pages/guided-tracing/x.astro
+++ b/src/pages/guided-tracing/x.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/y.astro
+++ b/src/pages/guided-tracing/y.astro
@@ -60,6 +60,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -78,8 +82,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  // let hideButton;

--- a/src/pages/guided-tracing/z.astro
+++ b/src/pages/guided-tracing/z.astro
@@ -64,6 +64,10 @@ import Layout from "../../layouts/Layout.astro";

      startButtonHeight = customHeight / 1.1;
      startButtonWidth = customWidth / 2 - 100;
+      submitWidth = customWidth / 2 - 100;
+      submitHeight = customHeight / 1.1;
+      noticeWidth = 100;
+      noticeHeight = 0;
    } else{
      cloudeSize = 500;
      cloudHeight = 250;
@@ -82,8 +86,12 @@ import Layout from "../../layouts/Layout.astro";
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

-      startButtonHeight = customHeight / 2 - 20;
+            startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
+      submitWidth = customWidth / 1.32;
+      submitHeight = customHeight / 2 - 20;
+      noticeWidth = 0;
+      noticeHeight = 0;
    }
  function preload() {
    this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4');