submit user data in all games

public/saveGameData.js

@@ -1,7 +1,7 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const userId = urlParams.get('userid');
-const gameId = urlParams.get('id');
+let gameId;
 
 let startTime = Date.now();
 
@@ -9,9 +9,20 @@ let startTime = Date.now();
 const url = window.location.href;
 const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
-const gameVersion = gameType[0] + '-' + gameName[4];
+let gameVersion;
 
 
+if(gameType[0] == "guided-tracing"){
+    gameVersion = gameType[0].split('?')[0];
+    gameId = gameName[4];
+} else if(gameName.length == 5){
+    gameVersion = gameName[3];
+    gameId = urlParams.get('id');
+}else if(gameName.length == 6){
+    gameVersion = gameType[0] + '-' + gameName[4];
+    gameId = urlParams.get('id');
+}
+
 
 
 function submitUserData(drawingZone) {
@@ -22,7 +33,7 @@ function submitUserData(drawingZone) {
 
     let imageCode;
     let gameScore;
-    let scoreTotal=0;
+
     if(scoreTotal){
         gameScore = scoreTotal;
     }else{
@@ -45,6 +56,21 @@ function submitUserData(drawingZone) {
             link.click();
             document.body.removeChild(image);
             imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = `guided-tracing-${gameId}.png`;
+            link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
         }
         
         
@@ -59,7 +85,7 @@ function submitUserData(drawingZone) {
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
-        // console.log(userData);
+        console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
         method: 'POST',

src/pages/cross/cross_phonics_v1.astro

@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -156,20 +156,22 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
+        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/cross_phonics_v2.astro

@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,23 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +191,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/v1.astro

@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -163,13 +163,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
+        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -188,7 +189,6 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
-
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {

src/pages/cross/v2.astro

@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,24 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +192,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/v3.astro

@@ -26,7 +26,7 @@ import Layout from "../../layouts/Layout.astro";
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center ">
-                        <img class="lg:w-[50%]"  draggable="false" id="descImage" src="" alt="" />
+                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
@@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -110,25 +112,22 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -144,19 +143,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
+        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/drag/testv3.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drag/tmp.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drag/tmp2.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drag/v20.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drag/v30.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drag/v40.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {

src/pages/drawing/index.astro

@@ -31,6 +31,7 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let scoreTotal = 0;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;

src/pages/drawing/v2.astro

@@ -30,6 +30,10 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let defaultColor;
+    let scoreTotal = 0;
+
+    let currenturl = window.location.href.split('/');
+    console.log(currenturl);
 
     if(isMobile){
         topLogoWidth = 4.5;

src/pages/guided-tracing/0.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline> 
   const isMobile = window.innerWidth <= 768; 
   const drawingZone = {
@@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
   let isDrawing = false;
   let formattedDateTime;
   let animatedLetter;
-  let gameStartTime = "stat timr here";
+  let scoreTotal = 0;
+  
+  // const urls = window.location.href;
+  // const gameNames = urls.split('/');
+  // const gameTypes = gameNames[3].split('?id=');
+  // console.log(gameTypes[0]);
+
 
     if(isMobile){
       cloudeSize = 200;
@@ -120,35 +127,6 @@ import Layout from "../../layouts/Layout.astro";
     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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,10 +149,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
+        submitNotic.setVisible(false);
-        submitNotic.setVisible(true);
+        submitUserData(this);
-        // windowLoad();
-        submitUserData();
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/1.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,10 +141,8 @@ import Layout from "../../layouts/Layout.astro";
        submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
+        submitNotic.setVisible(false);
-        submitNotic.setVisible(true);
+        submitUserData(this);
-        // windowLoad();
-        submitUserData();
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/2.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/3.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/4.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,35 +125,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/5.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -125,35 +126,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -176,9 +149,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/6.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/7.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/8.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/9.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/A.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
   
@@ -122,35 +123,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/B.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/C.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/D.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/E.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/F.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/G.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -110,41 +111,8 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +135,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/H.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/I.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/J.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/K.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/L.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/M.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/N.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,35 +122,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -172,9 +145,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/O.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/P.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/Q.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/R.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -123,35 +124,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -174,9 +147,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/S.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/T.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/U.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/V.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/W.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/X.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/Y.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,35 +122,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -172,9 +145,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/Z.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/a.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/b.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/c.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/d.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/e.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/f.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/g.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/h.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/i.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/j.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/k.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -122,35 +123,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });

src/pages/guided-tracing/l.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/m.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/n.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/o.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/p.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/q.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/r.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/s.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/t.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/u.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/v.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/w.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/x.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/y.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/guided-tracing/z.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,35 +125,7 @@ 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 = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            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(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     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', });

src/pages/tick/tick_phonics_v1.astro

@@ -91,10 +91,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -145,14 +147,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -175,13 +175,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/tick_phonics_v2.astro

@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
 
-    window.onload = function () {
+    function saveUserData(){
-        let currentTime = new Date();
+        const endTime = Date.now();
-        formatedDateTime = currentTime.toLocaleString();
+        const timeDifference = endTime - startTime;
-    };
+        const timeDifferenceInSeconds = timeDifference / 1000;
 
-    function saveUserData() {
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +215,15 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -248,173 +249,6 @@ import Layout from "../../layouts/Layout.astro";
         });
     });
 </script>
-<!-- <script is:inline>
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
-    fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
-    .then(res => res.json())
-    .then(data => {
-        gameData = data.data;
-        // console.log(gameData);  
-        document.getElementById("gameDescription").innerHTML = gameData.description;
-        const assetsURL = 'https://management.beanstalkedu.com/assets/';
-        document.getElementById("image1").src = assetsURL + gameData.image1;
-        document.getElementById("image2").src = assetsURL + gameData.image2;
-        document.getElementById("image3").src = assetsURL + gameData.image3;
-        document.getElementById("image4").src = assetsURL + gameData.image4;
-        document.getElementById("image5").src = assetsURL + gameData.image5;
-        document.getElementById("image6").src = assetsURL + gameData.image6;
-        document.getElementById("image7").src = assetsURL + gameData.image7;
-        document.getElementById("image8").src = assetsURL + gameData.image8;
-        document.getElementById("image9").src = assetsURL + gameData.image9;
-    });
-    function checkResult2(id){
-        // alert("Matched")
-        if(id == 'image1'){
-            // console.log(gameData.a1)
-            if(gameData.a1 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image2'){
-            if(gameData.a2 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image3'){
-            if(gameData.a3 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image4'){
-            if(gameData.a4 == true){
-                var element = document.getElementById(id);
-                element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image5'){
-            if(gameData.a5 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image6'){
-            if(gameData.a6 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image7'){
-            if(gameData.a7 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image8'){
-            if(gameData.a8 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image9'){
-            if(gameData.a9 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-       
-    };
-    let url = window.location.href;
-    let urlSplit = url.split('/')
-    let gameName = urlSplit[3] +`-`+ urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-        // console.log(formatedDateTime);
-
-        // Create userData object inside the onload event
-        let userData = {
-            'f2': formatedDateTime,
-        };
-        // console.log(userData); // Now, f1 and f2 should have values
-    };
-    function generateShortUniqueID(length) {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < length; i++) {
-            const randomIndex = Math.floor(Math.random() * characters.length);
-            result += characters.charAt(randomIndex);
-        }
-        return result;
-    }
-    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-    // console.log(shortUniqueID);
-    function saveUserData() {
-        let userData = {
-            'status' : 'published',
-            'user_id': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'game_open': formatedDateTime,
-        };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if (response.ok) {
-                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
-                // console.log('Data Saved', response);
-            } else {
-                // console.log('Something Wrong', response);
-            }
-        })
-        .catch(error => {
-            console.error('An error occurred', error);
-        });
-    }
-    document.addEventListener('DOMContentLoaded', function () {
-      const contactForm = document.getElementById('contactForm');
-      contactForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-      });
-    });
-</script> -->
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
     body{

src/pages/tick/tick_phonics_v3.astro

@@ -26,7 +26,7 @@ import Layout from "../../layouts/Layout.astro";
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center">
-                        <img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" />
+                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
@@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -82,18 +84,6 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label2").innerHTML = gameData.label2;
                 document.getElementById("label3").innerHTML = gameData.label3;
             }
-            // if(gameData.label1){
-            //     document.getElementById("label1").innerHTML = gameData.label1;
-            // }
-            // if(gameData.label2){
-            //     document.getElementById("label2").innerHTML = gameData.label2;
-            // }
-            // if(gameData.label3){
-            //     document.getElementById("label3").innerHTML = gameData.label3;
-            // }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
-
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             document.getElementById('descImage').src = assetsURL + gameData.descript_img;
             for (let i = 1; i <= 3; i++) {
@@ -121,14 +111,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +138,14 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/v1.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
     <main>
-        <div>
+        <div class="specific">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                 <div class="shadow-md">
                     <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
@@ -17,7 +17,6 @@ import Layout from "../../layouts/Layout.astro";
                             <button><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
-                    
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
 
                 </div>
@@ -83,20 +82,17 @@ import Layout from "../../layouts/Layout.astro";
                     </form>
                 </div>
             </section>
-            <section class="">
-                <div class="container mx-auto px-4 flex flex-row place-content-between">
-                    <p>All rights reserved. Copyright@akademy.interakto2024</p>
-                </div>
-            </section>
         </div>          
     </main>
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,14 +143,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
     
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -174,16 +168,16 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
-
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -210,157 +204,6 @@ import Layout from "../../layouts/Layout.astro";
         });
     });
 </script>
-<!-- <script is:inline>
-
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
-    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
-    .then(res => res.json())
-    .then(data => {
-        gameData = data.data;
-        // console.log(gameData);  
-        document.getElementById("gameDescription").innerHTML = gameData.game_description;
-        const assetsURL = 'https://management.beanstalkedu.com/assets/';
-        document.getElementById("image1").src = assetsURL + gameData.image1;
-        document.getElementById("image2").src = assetsURL + gameData.image2;
-        document.getElementById("image3").src = assetsURL + gameData.image3;
-        document.getElementById("image4").src = assetsURL + gameData.image4;
-        document.getElementById("image5").src = assetsURL + gameData.image5;
-        document.getElementById("image6").src = assetsURL + gameData.image6;
-    });
-    function checkResult2(id){
-        // console.log(gameData.a1)
-        // alert("Matched")
-        if(id == 'image1'){
-            if( gameData.a1 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image2'){
-            if(gameData.a2 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image3'){
-            if(gameData.a3 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image4'){
-            if(gameData.a4 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image5'){
-            if(gameData.a5 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image6'){
-            if(gameData.a6 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        }
-       
-    };
-    let url = window.location.href;
-    let urlSplit = url.split('/')
-    let gameName = urlSplit[3] +`-`+ urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-        // console.log(formatedDateTime);
-
-        // Create userData object inside the onload event
-        let userData = {
-            'f2': formatedDateTime,
-        };
-        // console.log(userData); // Now, f1 and f2 should have values
-    };
-    function generateShortUniqueID(length) {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < length; i++) {
-            const randomIndex = Math.floor(Math.random() * characters.length);
-            result += characters.charAt(randomIndex);
-        }
-        return result;
-    }
-    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-    // console.log(shortUniqueID);
-    function saveUserData() {
-        // Move the userData object creation inside the saveUserData function if needed
-        let userData = {
-            'status' : 'published',
-            'user_id': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'game_open': formatedDateTime,
-        };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if (response.ok) {
-                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
-                // console.log('Data Saved', response);
-            } else {
-                // console.log('Something Wrong', response);
-            }
-        })
-        .catch(error => {
-            console.error('An error occurred', error);
-        });
-    }
-    document.addEventListener('DOMContentLoaded', function () {
-      const contactForm = document.getElementById('contactForm');
-      contactForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-      });
-    });
-</script> -->
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
     body{

src/pages/tick/v2.astro

@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,11 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +214,14 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
-
+        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/v3.astro

@@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -121,14 +123,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +150,15 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tracing/index.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
       </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
 const isMobile = window.innerWidth <= 768;
 const drawingZone = {

src/pages/tst.astro

@@ -1,25 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
----
-<Layout title="">
-    <div>
-        <a id="fullscreen-btn" href="/tst2" target="_blank">Next</a>
-    </div>
-</Layout>
-<script is:inline>
-     document.getElementById('fullscreen-btn').addEventListener('click', function() {
-            if (document.documentElement.requestFullscreen) {
-                document.documentElement.requestFullscreen();
-            } else if (document.documentElement.mozRequestFullScreen) { // Firefox
-                document.documentElement.mozRequestFullScreen();
-            } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, and Opera
-                document.documentElement.webkitRequestFullscreen();
-            } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
-                document.documentElement.msRequestFullscreen();
-            }
-        });
-
-        window.addEventListener('load', function() {
-            alert('Please click the button to go fullscreen.');
-        });
-</script>