add User Data save function

src/pages/guided-tracing/0.astro

@@ -63,12 +63,9 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
-      submitWidth = customWidth / 2 - 100;
+
-      submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
-      noticeHeight = 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -86,16 +83,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;
+      noticeWidth = window.innerWidth * 0.5 - 120;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.32;
-      submitWidth = customWidth / 1.32;
-      submitHeight = customHeight / 2 - 20;
-      noticeWidth = 0;
-      noticeHeight = 0;
     }
     window.onload = function() {
         currentDate = new Date();
@@ -156,11 +149,11 @@ import Layout from "../../layouts/Layout.astro";
           console.error('An error occured', error)
       }); 
       };
-      const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: 'blue'
       }).setDepth(1);
-      submitNotic.setVisible(false);
+      submitNotic.setVisible(true);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',

src/pages/guided-tracing/1.astro

@@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;

src/pages/guided-tracing/2.astro

@@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;

src/pages/guided-tracing/3.astro

@@ -64,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;

src/pages/guided-tracing/4.astro

@@ -68,8 +68,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;

src/pages/guided-tracing/5.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
@@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -86,13 +88,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animated5', '/assets/animated-letter/number_5.mp4');
     this.load.svg('number5', '/assets/numeric/n5.svg');
@@ -117,6 +124,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 : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -360,9 +423,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/6.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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 : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/7.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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 : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -204,7 +267,6 @@ import Layout from "../../layouts/Layout.astro";
       animatedLetter.setVisible(true);
     });
 
-
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
     const baseFontSize = 20;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
@@ -262,7 +324,6 @@ import Layout from "../../layouts/Layout.astro";
         const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
 
         if (distance >= 100) {
-          
             firstTextLayer.setVisible(false);
             secondTextLayer.setVisible(true);
             audioTwoAudio.play();
@@ -273,7 +334,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -328,9 +388,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/8.astro

@@ -39,11 +39,13 @@ 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;
       cloudHeight = 340;
-      canvasScale = 0.14
+      canvasScale = 0.14;
       canvasHeight = 30; 
       letterHeight = 30;
       letterScale = 1;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -105,13 +112,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     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 : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -273,7 +335,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -328,9 +389,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/9.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -89,6 +91,11 @@ import Layout from "../../layouts/Layout.astro";
       noticeWidth = 0;
       noticeHeight = 0;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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 : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -328,9 +391,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/A.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;
 
@@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -85,13 +87,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedA', '/assets/animated-letter/capital_a.mp4');
     this.load.svg('letterA', '/assets/capital-letter/a.svg');
@@ -114,6 +121,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, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -350,17 +413,16 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);
       startButton.setVisible(false);
 
     })
-
-      
   }
 
 function update() {

src/pages/guided-tracing/B.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -110,6 +117,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, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -359,9 +422,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/C.astro

@@ -39,6 +39,9 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
+
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
@@ -59,8 +62,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -78,13 +81,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -106,6 +114,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, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -289,9 +353,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/D.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +116,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, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/E.astro

@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -60,8 +62,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -78,13 +80,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedE', '/assets/animated-letter/capital_e.mp4');
     this.load.svg('letterE', '/assets/capital-letter/e.svg');
@@ -108,6 +115,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, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -388,9 +451,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/F.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4');
     this.load.svg('letterA', '/assets/capital-letter/f.svg');
@@ -112,6 +119,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, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -350,9 +413,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/G.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,7 +82,7 @@ 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;
@@ -107,8 +109,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
   }
-
+  window.onload = function() {
+    currentDate = new Date();
+    formattedDateTime = currentDate.toLocaleString();
+    console.log("Page loaded on: " + formattedDateTime);
+  };
   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, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -323,9 +385,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/H.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedH', '/assets/animated-letter/capital_h.mp4');
     this.load.svg('letterH', '/assets/capital-letter/h.svg');
@@ -112,6 +119,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, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);

src/pages/guided-tracing/I.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedI', '/assets/animated-letter/capital_i.mp4');
     this.load.svg('letterI', '/assets/capital-letter/i.svg');
@@ -112,6 +119,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, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -353,9 +416,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/J.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -107,6 +114,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, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -229,13 +292,8 @@ import Layout from "../../layouts/Layout.astro";
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-
-
         // Add these variables to keep track of start points
         let firstDragStartPoint = { x: 0, y: 0 };
-
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -253,8 +311,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-       
-
 
       graphics = this.add.graphics();
       graphics.setMask(mask);
@@ -290,8 +346,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);

src/pages/guided-tracing/K.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedK', '/assets/animated-letter/capital_k.mp4');
     this.load.svg('letterK', '/assets/capital-letter/k.svg');
@@ -112,6 +119,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, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -353,9 +416,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/L.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;
@@ -56,13 +58,12 @@ import Layout from "../../layouts/Layout.astro";
       animatedLHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
-
       startButtonHeight = customHeight / 1.1;
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +81,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +115,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, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/M.astro

@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedM', '/assets/animated-letter/capital_m.mp4');
     this.load.svg('letterM', '/assets/capital-letter/m.svg');
@@ -109,6 +116,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, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/N.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedN', '/assets/animated-letter/capital_n.mp4');
     this.load.svg('letterN', '/assets/capital-letter/n.svg');
@@ -113,6 +120,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, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);

src/pages/guided-tracing/O.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -107,6 +114,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, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/P.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +116,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, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -323,9 +386,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/Q.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +116,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, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -269,7 +332,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -324,9 +386,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/R.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
@@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -86,13 +88,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedR', '/assets/animated-letter/capital_r.mp4');
     this.load.svg('letterR', '/assets/capital-letter/r.svg');
@@ -115,6 +122,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, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -357,9 +420,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/S.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -107,6 +114,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, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -234,8 +297,6 @@ import Layout from "../../layouts/Layout.astro";
         // Add these variables to keep track of start points
         let firstDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -290,9 +351,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/T.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +116,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, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -267,7 +330,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -322,9 +384,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/U.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -107,6 +114,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, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -289,14 +352,14 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);
       startButton.setVisible(false);
-
     })
 
 

src/pages/guided-tracing/V.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -108,6 +115,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, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/W.astro

@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedW', '/assets/animated-letter/capital_w.mp4');
     this.load.svg('letterW', '/assets/capital-letter/w.svg');
@@ -108,6 +115,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, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/X.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +116,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, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -268,7 +331,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -323,9 +385,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/Y.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedY', '/assets/animated-letter/capital_y.mp4');
     this.load.svg('letterY', '/assets/capital-letter/y.svg');
@@ -113,6 +120,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, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -354,9 +417,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/Z.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedZ', '/assets/animated-letter/capital_z.mp4');
     this.load.svg('letterZ', '/assets/capital-letter/z.svg');
@@ -112,6 +119,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, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -352,9 +415,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/a.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -106,10 +113,67 @@ import Layout from "../../layouts/Layout.astro";
      
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image('canvasStand', '/assets/stand2.png');  let formattedDateTime;
+  let gameStartTime = "start time here";
   }
 
   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, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -325,8 +389,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);

src/pages/guided-tracing/b.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -81,13 +83,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -110,6 +117,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, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -270,7 +333,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer

src/pages/guided-tracing/c.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -110,6 +117,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, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -294,9 +357,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/d.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/e.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/f.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;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -110,6 +117,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, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -270,7 +333,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -325,9 +387,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/g.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -327,9 +390,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/h.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -111,6 +118,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, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -271,7 +334,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -326,9 +388,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/i.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/j.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -111,6 +118,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, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

src/pages/guided-tracing/k.astro

@@ -39,11 +39,12 @@ 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
 // console.log(x);
-
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
@@ -66,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -86,13 +87,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedK', '/assets/animated-letter/small_k.mp4');
     this.load.svg('letterK', '/assets/small-letter/ks.svg');
@@ -108,15 +114,69 @@ import Layout from "../../layouts/Layout.astro";
     this.load.svg('handPointer', '/assets/svg/hand.svg');
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('canvas', '/assets/canvas4.png');     
- 
-     
     this.load.image('sun', '/assets/sun.png');
     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, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -359,8 +419,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);

src/pages/guided-tracing/l.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -103,13 +110,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     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, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -294,9 +356,10 @@ import Layout from "../../layouts/Layout.astro";
     firstTextLayer.setVisible(false);
     startButton.setInteractive().on('pointerdown', () => {
       audioOneAudio.play();
-submitButton.setVisible(true);
+      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);

src/pages/guided-tracing/m.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
@@ -65,8 +67,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -84,13 +86,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedM', '/assets/animated-letter/small_m.mp4');
     this.load.svg('letterM', '/assets/small-letter/ms.svg');
@@ -112,6 +119,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, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -354,8 +417,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);

src/pages/guided-tracing/n.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -105,13 +112,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     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, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -272,7 +334,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -327,8 +388,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);

src/pages/guided-tracing/o.astro

@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -61,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +82,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -108,6 +115,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, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -226,7 +289,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -292,15 +355,15 @@ 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);
       startButton.setVisible(false);
     })
-
-
   }
 
 function update() {

src/pages/guided-tracing/p.astro

@@ -16,7 +16,6 @@ import Layout from "../../layouts/Layout.astro";
     width: isMobile ? window.innerWidth : window.innerWidth / 2,
     height: window.innerHeight / 2,
   };
-
   const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
@@ -39,6 +38,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;
@@ -61,8 +62,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -80,13 +81,18 @@ 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;
     }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -109,6 +115,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, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -246,8 +308,6 @@ import Layout from "../../layouts/Layout.astro";
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -323,8 +383,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);

src/pages/guided-tracing/q.astro

@@ -16,7 +16,6 @@ import Layout from "../../layouts/Layout.astro";
     width: isMobile ? window.innerWidth : window.innerWidth / 2,
     height: window.innerHeight / 2,
   };
-
   const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
@@ -39,6 +38,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;
@@ -62,8 +63,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +83,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -111,6 +117,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, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -289,8 +351,7 @@ import Layout from "../../layouts/Layout.astro";
             secondLayer.setAlpha(0.5);
         }
         });
-
+        
-
       graphics = this.add.graphics();
       graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
@@ -325,8 +386,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);

src/pages/guided-tracing/r.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -272,7 +335,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -327,8 +389,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);

src/pages/guided-tracing/s.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";
 
     if(isMobile){
       cloudeSize = 200;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
 
   function preload() {
     this.load.video('animatedS', '/assets/animated-letter/small_s.mp4');
@@ -102,13 +109,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     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, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -237,8 +299,6 @@ import Layout from "../../layouts/Layout.astro";
         // Add these variables to keep track of start points
         let firstDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -291,8 +351,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);

src/pages/guided-tracing/t.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -326,8 +389,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);

src/pages/guided-tracing/u.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -226,8 +289,8 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterUeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 25 : customWidth * 0.70;
+      textX = isMobile ? customWidth / 25 : customWidth * 0.75;
-      textY = isMobile ? customHeight / 6 : customHeight / 2;
+      textY = isMobile ? customHeight / 6 : customHeight / 2.3;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
@@ -326,8 +389,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);

src/pages/guided-tracing/v.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -111,6 +118,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, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -325,8 +388,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);

src/pages/guided-tracing/w.astro

@@ -39,6 +39,8 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let isDrawing = false;
+  let formattedDateTime;
+  let gameStartTime = "start time here";
 
     if(isMobile){
       cloudeSize = 200;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedW', '/assets/animated-letter/small_w.mp4');
     this.load.svg('letterW', '/assets/small-letter/ws.svg');
@@ -111,6 +118,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, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -391,8 +454,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);

src/pages/guided-tracing/x.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -112,6 +119,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, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -326,8 +389,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);

src/pages/guided-tracing/y.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;
@@ -62,8 +64,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -82,13 +84,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   // let hideButton;
 
   function preload() {
@@ -105,13 +112,68 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     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, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
@@ -326,8 +388,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);

src/pages/guided-tracing/z.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
@@ -66,8 +68,8 @@ import Layout from "../../layouts/Layout.astro";
       startButtonWidth = customWidth / 2 - 100;
       submitWidth = customWidth / 2 - 100;
       submitHeight = customHeight / 1.1;
-      noticeWidth = 100;
+      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = 0;
+      noticeHeight = window.innerHeight * 0.85 - 0;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -86,13 +88,18 @@ 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;
-    }
+    };
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      console.log("Page loaded on: " + formattedDateTime);
+    };
   function preload() {
     this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4');
     this.load.svg('letterZ', '/assets/small-letter/zs.svg');
@@ -116,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, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });
     const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@@ -358,8 +421,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);