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/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -12,6 +12,7 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/ico+xml" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -59,6 +59,7 @@ import Layout from '../../layouts/Layout.astro';
  };
  let submitButton;
  let formattedDateTime;
+  let shortUniqueID;
  gameResult = [];
  window.onload = function() {
    // Get the current date and time
@@ -68,8 +69,18 @@ import Layout from '../../layouts/Layout.astro';
   formattedDateTime = currentDate.toLocaleString();
    
    // Log the formatted date and time to the console
-    console.log("Page loaded on: " + formattedDateTime);
+    // console.log("Page loaded on: " + formattedDateTime);
  };
+  function generateShortUniqueID(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
  if(isMobile){
      noticeWidth = 100;
      noticeHeight = 0;
@@ -305,17 +316,19 @@ import Layout from '../../layouts/Layout.astro';
        const displayW = window.innerWidth;
        const URL = window.location.href;
        const gameName = URL.split('/');
-        var gameResult = {
-          'f1' : gameName[3],
-          'f2' : formattedDateTime,
-        }
+        let userData = {
+            'status' : 'published',
+            'user_id': 'drag@beanstalkedu.com',
+            'game_name': gameName[3],
+            'game_open': formattedDateTime,
+        };
        function submitUserData() {
          fetch(`https://management.beanstalkedu.com/items/game_result`, {
            method: 'POST',
            headers: {
              'Content-Type' : 'application/json'
            },
-            body: JSON.stringify(gameResult)
+            body: JSON.stringify(userData)
          })
          .then(response => {
            if(response.ok){
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -32,17 +32,24 @@ import Layout from '../../layouts/Layout.astro';
    var snapshotButton;
    let submitButton;
    let formattedDateTime;
+    let shortUniqueID;
    gameResult = [];
    window.onload = function() {
-        // Get the current date and time
        currentDate = new Date();
-        
-        // Format the date and time as a string
-    formattedDateTime = currentDate.toLocaleString();
-        
-        // Log the formatted date and time to the console
+        formattedDateTime = currentDate.toLocaleString();
        console.log("Page loaded on: " + formattedDateTime);
    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);

    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
@@ -104,23 +111,25 @@ import Layout from '../../layouts/Layout.astro';
            });
            const URL = window.location.href;
            const gameName = URL.split('/');
-            var gameResult = {
-            'f1' : gameName[3],
-            'f2' : formattedDateTime,
-            }
+            let userData = {
+                'status' : 'published',
+                'user_id': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'game_open': formattedDateTime,
+            };
            function submitUserData() {
            fetch(`https://management.beanstalkedu.com/items/game_result`, {
                method: 'POST',
                headers: {
                'Content-Type' : 'application/json'
                },
-                body: JSON.stringify(gameResult)
+                body: JSON.stringify(userData)
            })
            .then(response => {
                if(response.ok){
-                console.log('Data Saved', response)
+                // console.log('Data Saved', response)
                } else{
-                console.log('Something Wrong', response)
+                // console.log('Something Wrong', response)
                }
            })
            .catch(error => {
@@ -142,6 +151,7 @@ import Layout from '../../layouts/Layout.astro';
            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
            console.log('Clicked');
+            submitButton.setVisible(false);
            submitNotic.setVisible(true);
            // windowLoad();
            submitUserData();
--- 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');
--- a/src/pages/tick/v1.astro
+++ b/src/pages/tick/v1.astro
@@ -1,49 +1,56 @@
-<main>
-    <div>
-        <!-- bg-[url('/assets/background.jpg')] -->
-        <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-            <div class="container mx-auto px-4">
-                <div class="flex flex-row place-content-between pt-6">
-                    <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                    <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <!-- bg-[url('/assets/background.jpg')] -->
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-6">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
+                    <form id="contactForm">
+                        <div id="itemForm" class="flex flex-row place-content-between">
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
+                                <label for="a1" class="round-checkbox-label"></label>
+                                <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
+                                <label for="a2" class="round-checkbox-label"></label>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
+                                <label for="a3" class="round-checkbox-label"></label>
+                                <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
+                                <label for="a4" class="round-checkbox-label"></label>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
+                                <label for="a5" class="round-checkbox-label"></label>
+                                <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
+                                <label for="a6" class="round-checkbox-label"></label>
+                            </div>
+                        </div>
+                        <div class="flex flex-col place-items-center justify-center pt-8">
+                            <p id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
+                        </div>
+                    </form>
                </div>
-                <p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
-                <form id="contactForm">
-                    <div id="itemForm" class="flex flex-row place-content-between">
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
-                            <label for="a1" class="round-checkbox-label"></label>
-                            <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
-                            <label for="a2" class="round-checkbox-label"></label>
-                        </div>
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
-                            <label for="a3" class="round-checkbox-label"></label>
-                            <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
-                            <label for="a4" class="round-checkbox-label"></label>
-                        </div>
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
-                            <label for="a5" class="round-checkbox-label"></label>
-                            <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
-                            <label for="a6" class="round-checkbox-label"></label>
-                        </div>
-                    </div>
-                    <div class="flex justify-center pt-8">
-                        <input class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
-                    </div>
-                </form>
-            </div>
-        </section>
-    </div>
-</main>
+            </section>
+        </div>
+    </main>
+</Layout>
 <script is:inline>
+
    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
@@ -80,12 +87,12 @@
    // //     console.log("Matched")
    // // }
    //     // console.log('Checked Values:', checkedValues);
-    // });
+    // })
    function checkResult(id){
        // console.log(gameData.a1)
        // alert("Matched")
        if(id == 'image1'){
-            if(gameData.a1 == true){
+            if( gameData.a1 == true){
            var element = document.getElementById(id);
            element.classList.add("greenBorder");
            // console.log('Value True')
@@ -152,7 +159,63 @@
        }
       
    };
-    
+    let url = window.location.href;
+    let urlSplit = url.split('/')
+    let gameName = urlSplit[3] +`-`+ urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+        // console.log(formatedDateTime);
+
+        // Create userData object inside the onload event
+        let userData = {
+            'f2': formatedDateTime,
+        };
+        // console.log(userData); // Now, f1 and f2 should have values
+    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
+    function saveUserData() {
+        // Move the userData object creation inside the saveUserData function if needed
+        let userData = {
+            'status' : 'published',
+            'user_id': 'tick-v1@beanstalkedu.com',
+            'game_name': gameName,
+            'game_open': formatedDateTime,
+        };
+
+        fetch(`https://management.beanstalkedu.com/items/game_result`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(response => {
+            if (response.ok) {
+                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                // console.log('Data Saved', response);
+            } else {
+                // console.log('Something Wrong', response);
+            }
+        })
+        .catch(error => {
+            console.error('An error occurred', error);
+        });
+    }
+
+
    // var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
    //     function getData() { // this function will get called when the save button is clicked
    //         result = [];
--- a/src/pages/tick/v2.astro
+++ b/src/pages/tick/v2.astro
@@ -1,65 +1,71 @@
-<main>
-    <div>
-        <!-- bg-[url('/assets/background.jpg')] -->
-        <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-            <div class="container mx-auto px-4">
-                <div class="flex flex-row place-content-between pt-6">
-                    <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                    <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <!-- bg-[url('/assets/background.jpg')] -->
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-6">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
+                    <form id="contactForm">
+                        <div id="" class="flex flex-row place-content-between">
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <!-- <img id="image1" src="" alt="" draggable="false" class="select-none" /> -->
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
+                                <label for="a1" class="round-checkbox-label">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                </label>
+    
+                                <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
+                                <label for="a2" class="round-checkbox-label"></label>
+    
+                                <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
+                                <label for="a3" class="round-checkbox-label"></label>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
+                                <label for="a4" class="round-checkbox-label"></label>
+    
+                                <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
+                                <label for="a5" class="round-checkbox-label"></label>
+    
+                                <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
+                                <label for="a6" class="round-checkbox-label"></label>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
+                                <label for="a7" class="round-checkbox-label"></label>
+    
+                                <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
+                                <label for="a8" class="round-checkbox-label"></label>
+    
+                                <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
+                                <label for="a9" class="round-checkbox-label"></label>
+                            </div>
+                        </div>
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
+                        </div>
+                    </form>
                </div>
-                <p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
-                <form id="contactForm">
-                    <div id="" class="flex flex-row place-content-between">
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <!-- <img id="image1" src="" alt="" draggable="false" class="select-none" /> -->
-                            <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
-                            <label for="a1" class="round-checkbox-label">
-                                <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                            </label>
-
-                            <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
-                            <label for="a2" class="round-checkbox-label"></label>
-
-                            <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
-                            <label for="a3" class="round-checkbox-label"></label>
-                        </div>
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
-                            <label for="a4" class="round-checkbox-label"></label>
-
-                            <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
-                            <label for="a5" class="round-checkbox-label"></label>
-
-                            <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
-                            <label for="a6" class="round-checkbox-label"></label>
-                        </div>
-                        <div class="flex flex-col gap-6 place-items-center">
-                            <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
-                            <label for="a7" class="round-checkbox-label"></label>
-
-                            <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
-                            <label for="a8" class="round-checkbox-label"></label>
-
-                            <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                            <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
-                            <label for="a9" class="round-checkbox-label"></label>
-                        </div>
-                    </div>
-                    <div class="flex justify-center pt-8">
-                        <input class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
-                    </div>
-                </form>
-            </div>
-        </section>
-    </div>
-</main>
+            </section>
+        </div>
+    </main>
+</Layout>
 <script is:inline>
    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
@@ -67,7 +73,7 @@
    .then(res => res.json())
    .then(data => {
        gameData = data.data;
-        console.log(gameData);  
+        // console.log(gameData);  
        document.getElementById("gameDescription").innerHTML = gameData.description;
        const assetsURL = 'https://management.beanstalkedu.com/assets/';
        document.getElementById("image1").src = assetsURL + gameData.image1;
@@ -166,6 +172,61 @@
        };
       
    };
+    let url = window.location.href;
+    let urlSplit = url.split('/')
+    let gameName = urlSplit[3] +`-`+ urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+        // console.log(formatedDateTime);
+
+        // Create userData object inside the onload event
+        let userData = {
+            'f2': formatedDateTime,
+        };
+        // console.log(userData); // Now, f1 and f2 should have values
+    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
+    function saveUserData() {
+        // Move the userData object creation inside the saveUserData function if needed
+        let userData = {
+            'status' : 'published',
+            'user_id': 'tick-v2@beanstalkedu.com',
+            'game_name': gameName,
+            'game_open': formatedDateTime,
+        };
+
+        fetch(`https://management.beanstalkedu.com/items/game_result`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(response => {
+            if (response.ok) {
+                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                // console.log('Data Saved', response);
+            } else {
+                // console.log('Something Wrong', response);
+            }
+        })
+        .catch(error => {
+            console.error('An error occurred', error);
+        });
+    }
    document.addEventListener('DOMContentLoaded', function () {
      const contactForm = document.getElementById('contactForm');
      contactForm.addEventListener('submit', async function (event) {