From 79f158380c534719d45724845952cf9ff715e0f9 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Mon, 24 Jun 2024 18:19:47 +0530
Subject: [PATCH] submit user data in all games

---
 public/saveGameData.js                 |  34 ++++-
 src/pages/cross/cross_phonics_v1.astro |  32 ++--
 src/pages/cross/cross_phonics_v2.astro |  36 ++---
 src/pages/cross/v1.astro               |  30 ++--
 src/pages/cross/v2.astro               |  37 ++---
 src/pages/cross/v3.astro               |  38 ++---
 src/pages/drag/testv3.astro            |   1 +
 src/pages/drag/tmp.astro               |   1 +
 src/pages/drag/tmp2.astro              |   1 +
 src/pages/drag/v20.astro               |   1 +
 src/pages/drag/v30.astro               |   1 +
 src/pages/drag/v40.astro               |   1 +
 src/pages/drawing/index.astro          |   1 +
 src/pages/drawing/v2.astro             |   4 +
 src/pages/guided-tracing/0.astro       |  48 ++----
 src/pages/guided-tracing/1.astro       |  41 +-----
 src/pages/guided-tracing/2.astro       |  37 +----
 src/pages/guided-tracing/3.astro       |  37 +----
 src/pages/guided-tracing/4.astro       |  37 +----
 src/pages/guided-tracing/5.astro       |  37 +----
 src/pages/guided-tracing/6.astro       |  37 +----
 src/pages/guided-tracing/7.astro       |  37 +----
 src/pages/guided-tracing/8.astro       |  37 +----
 src/pages/guided-tracing/9.astro       |  37 +----
 src/pages/guided-tracing/A.astro       |  37 +----
 src/pages/guided-tracing/B.astro       |  37 +----
 src/pages/guided-tracing/C.astro       |  37 +----
 src/pages/guided-tracing/D.astro       |  37 +----
 src/pages/guided-tracing/E.astro       |  37 +----
 src/pages/guided-tracing/F.astro       |  37 +----
 src/pages/guided-tracing/G.astro       |  42 +-----
 src/pages/guided-tracing/H.astro       |  37 +----
 src/pages/guided-tracing/I.astro       |  37 +----
 src/pages/guided-tracing/J.astro       |  37 +----
 src/pages/guided-tracing/K.astro       |  39 +----
 src/pages/guided-tracing/L.astro       |  39 +----
 src/pages/guided-tracing/M.astro       |  39 +----
 src/pages/guided-tracing/N.astro       |  39 +----
 src/pages/guided-tracing/O.astro       |  39 +----
 src/pages/guided-tracing/P.astro       |  39 +----
 src/pages/guided-tracing/Q.astro       |  39 +----
 src/pages/guided-tracing/R.astro       |  39 +----
 src/pages/guided-tracing/S.astro       |  39 +----
 src/pages/guided-tracing/T.astro       |  39 +----
 src/pages/guided-tracing/U.astro       |  39 +----
 src/pages/guided-tracing/V.astro       |  39 +----
 src/pages/guided-tracing/W.astro       |  39 +----
 src/pages/guided-tracing/X.astro       |  39 +----
 src/pages/guided-tracing/Y.astro       |  39 +----
 src/pages/guided-tracing/Z.astro       |  39 +----
 src/pages/guided-tracing/a.astro       |  37 +----
 src/pages/guided-tracing/b.astro       |  37 +----
 src/pages/guided-tracing/c.astro       |  37 +----
 src/pages/guided-tracing/d.astro       |  37 +----
 src/pages/guided-tracing/e.astro       |  37 +----
 src/pages/guided-tracing/f.astro       |  37 +----
 src/pages/guided-tracing/g.astro       |  37 +----
 src/pages/guided-tracing/h.astro       |  37 +----
 src/pages/guided-tracing/i.astro       |  37 +----
 src/pages/guided-tracing/j.astro       |  37 +----
 src/pages/guided-tracing/k.astro       |  37 +----
 src/pages/guided-tracing/l.astro       |  39 +----
 src/pages/guided-tracing/m.astro       |  39 +----
 src/pages/guided-tracing/n.astro       |  39 +----
 src/pages/guided-tracing/o.astro       |  39 +----
 src/pages/guided-tracing/p.astro       |  39 +----
 src/pages/guided-tracing/q.astro       |  39 +----
 src/pages/guided-tracing/r.astro       |  39 +----
 src/pages/guided-tracing/s.astro       |  39 +----
 src/pages/guided-tracing/t.astro       |  39 +----
 src/pages/guided-tracing/u.astro       |  39 +----
 src/pages/guided-tracing/v.astro       |  39 +----
 src/pages/guided-tracing/w.astro       |  39 +----
 src/pages/guided-tracing/x.astro       |  39 +----
 src/pages/guided-tracing/y.astro       |  39 +----
 src/pages/guided-tracing/z.astro       |  39 +----
 src/pages/tick/tick_phonics_v1.astro   |  27 ++--
 src/pages/tick/tick_phonics_v2.astro   | 196 ++-----------------------
 src/pages/tick/tick_phonics_v3.astro   |  41 ++----
 src/pages/tick/v1.astro                | 191 +++---------------------
 src/pages/tick/v2.astro                |  29 ++--
 src/pages/tick/v3.astro                |  28 ++--
 src/pages/tracing/index.astro          |   1 +
 src/pages/tst.astro                    |  25 ----
 84 files changed, 569 insertions(+), 2563 deletions(-)

diff --git a/public/saveGameData.js b/public/saveGameData.js
index 6c17ece..fa0c9ef 100644
--- a/public/saveGameData.js
+++ b/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',
diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index 32c8bee..4200d40 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        console.log(userData);
+
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index a1480d7..be3a31c 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index 7eb5346..3091049 100644
--- a/src/pages/cross/v1.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        console.log(userData);
+        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) {
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 2d91e54..4fbe3f1 100644
--- a/src/pages/cross/v2.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index 19587bf..0f48a91 100644
--- a/src/pages/cross/v3.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
diff --git a/src/pages/drag/testv3.astro b/src/pages/drag/testv3.astro
index e972652..6401c5e 100644
--- a/src/pages/drag/testv3.astro
+++ b/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 = {
diff --git a/src/pages/drag/tmp.astro b/src/pages/drag/tmp.astro
index 6e5beb8..2656082 100644
--- a/src/pages/drag/tmp.astro
+++ b/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 = {
diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/tmp2.astro
index 83afa36..43ed26e 100644
--- a/src/pages/drag/tmp2.astro
+++ b/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 = {
diff --git a/src/pages/drag/v20.astro b/src/pages/drag/v20.astro
index 1ea9beb..0945b01 100644
--- a/src/pages/drag/v20.astro
+++ b/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 = {
diff --git a/src/pages/drag/v30.astro b/src/pages/drag/v30.astro
index a5b72bc..d718705 100644
--- a/src/pages/drag/v30.astro
+++ b/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 = {
diff --git a/src/pages/drag/v40.astro b/src/pages/drag/v40.astro
index d48b3c2..a1e8195 100644
--- a/src/pages/drag/v40.astro
+++ b/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 = {
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 79a7a76..71044f3 100644
--- a/src/pages/drawing/index.astro
+++ b/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;
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index c2d9d81..2150566 100644
--- a/src/pages/drawing/v2.astro
+++ b/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;
diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro
index 7afe922..162f86c 100644
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -8,8 +8,9 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
+<script src="/saveGameData.js" is:inline></script>
+<script is:inline> 
+  const isMobile = window.innerWidth <= 768; 
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -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(true);
-        // windowLoad();
-        submitUserData();
+        submitNotic.setVisible(false);
+        submitUserData(this);
       })
     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', });
diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro
index 5d72ff9..256ab63 100644
--- a/src/pages/guided-tracing/1.astro
+++ b/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'
@@ -165,13 +138,11 @@ import Layout from "../../layouts/Layout.astro";
         }
       });
 
-      submitButton.setVisible(false);
+       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
-        submitNotic.setVisible(true);
-        // windowLoad();
-        submitUserData();
+        submitNotic.setVisible(false);
+        submitUserData(this);
       })
     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', });
diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro
index b17fe7a..cbfc4d4 100644
--- a/src/pages/guided-tracing/2.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro
index 8947b0f..318a8de 100644
--- a/src/pages/guided-tracing/3.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro
index 20587c9..eeda7ee 100644
--- a/src/pages/guided-tracing/4.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro
index acfe4c2..9fe949d 100644
--- a/src/pages/guided-tracing/5.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro
index ad53094..139ced9 100644
--- a/src/pages/guided-tracing/6.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro
index f4a1faa..8d6c9e4 100644
--- a/src/pages/guided-tracing/7.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro
index c6cb622..27c84b7 100644
--- a/src/pages/guided-tracing/8.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro
index 7c4ba00..3cb7f7d 100644
--- a/src/pages/guided-tracing/9.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro
index 23008fa..66977f3 100644
--- a/src/pages/guided-tracing/A.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro
index 8ee87c6..6a57c3a 100644
--- a/src/pages/guided-tracing/B.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro
index cb766fe..ab7d337 100644
--- a/src/pages/guided-tracing/C.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro
index 710a7ea..a8ffbe4 100644
--- a/src/pages/guided-tracing/D.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro
index 9db95d1..295f956 100644
--- a/src/pages/guided-tracing/E.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro
index 1196df5..9ef3ef4 100644
--- a/src/pages/guided-tracing/F.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro
index a28ddd5..be8c046 100644
--- a/src/pages/guided-tracing/G.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro
index 174e674..d2fa5a1 100644
--- a/src/pages/guided-tracing/H.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro
index e7f429e..5d6289e 100644
--- a/src/pages/guided-tracing/I.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro
index 16f9c0d..6262196 100644
--- a/src/pages/guided-tracing/J.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro
index 61122d6..b57ce6e 100644
--- a/src/pages/guided-tracing/K.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro
index 5e465fe..b5cfe5e 100644
--- a/src/pages/guided-tracing/L.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro
index b67c2ec..c0e5ea7 100644
--- a/src/pages/guided-tracing/M.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro
index 0ebf390..438ce1d 100644
--- a/src/pages/guided-tracing/N.astro
+++ b/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'
@@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro
index 18e5b0b..4e0e4c9 100644
--- a/src/pages/guided-tracing/O.astro
+++ b/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'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro
index 426c78f..093866e 100644
--- a/src/pages/guided-tracing/P.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro
index caa9251..29f8575 100644
--- a/src/pages/guided-tracing/Q.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro
index d89b14f..9081e1e 100644
--- a/src/pages/guided-tracing/R.astro
+++ b/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'
@@ -170,13 +143,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro
index feae8d6..dcb5fc2 100644
--- a/src/pages/guided-tracing/S.astro
+++ b/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'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro
index 749c36e..b36e285 100644
--- a/src/pages/guided-tracing/T.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro
index a14d39b..5f2b617 100644
--- a/src/pages/guided-tracing/U.astro
+++ b/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'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro
index f2466d1..305c325 100644
--- a/src/pages/guided-tracing/V.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro
index 4ac9867..fe6bef3 100644
--- a/src/pages/guided-tracing/W.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro
index 2adbcfe..c1b7505 100644
--- a/src/pages/guided-tracing/X.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro
index d1f683c..7bc0fda 100644
--- a/src/pages/guided-tracing/Y.astro
+++ b/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'
@@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro
index ae87f3a..eeb922e 100644
--- a/src/pages/guided-tracing/Z.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro
index 8026f7f..bfed82c 100644
--- a/src/pages/guided-tracing/a.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro
index ceb4ba2..e860922 100644
--- a/src/pages/guided-tracing/b.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro
index 19314ae..c95fd2b 100644
--- a/src/pages/guided-tracing/c.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro
index 8922bc7..db52ce9 100644
--- a/src/pages/guided-tracing/d.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro
index 4dde5a1..dcb44c8 100644
--- a/src/pages/guided-tracing/e.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro
index cd0ea63..54fac0b 100644
--- a/src/pages/guided-tracing/f.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro
index 6bf4f86..bdf9f26 100644
--- a/src/pages/guided-tracing/g.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro
index 2d4953d..6ee5903 100644
--- a/src/pages/guided-tracing/h.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro
index 29bebf8..f60e802 100644
--- a/src/pages/guided-tracing/i.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro
index b75a909..5c0e2e2 100644
--- a/src/pages/guided-tracing/j.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro
index e2a90c3..9c050e8 100644
--- a/src/pages/guided-tracing/k.astro
+++ b/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', });
diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro
index 0c44bee..df55921 100644
--- a/src/pages/guided-tracing/l.astro
+++ b/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'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro
index ae72bf0..e4a28cd 100644
--- a/src/pages/guided-tracing/m.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro
index a4924cd..feef64c 100644
--- a/src/pages/guided-tracing/n.astro
+++ b/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'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro
index f640613..71c846b 100644
--- a/src/pages/guided-tracing/o.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro
index 10422a2..e63056e 100644
--- a/src/pages/guided-tracing/p.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro
index db6a061..52152cf 100644
--- a/src/pages/guided-tracing/q.astro
+++ b/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'
@@ -165,13 +138,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro
index aabad51..b2a8a07 100644
--- a/src/pages/guided-tracing/r.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro
index f5dacfb..90994d6 100644
--- a/src/pages/guided-tracing/s.astro
+++ b/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'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro
index af97673..8ce9485 100644
--- a/src/pages/guided-tracing/t.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro
index 041b4c8..7820e27 100644
--- a/src/pages/guided-tracing/u.astro
+++ b/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'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro
index 7943db7..5b0faa3 100644
--- a/src/pages/guided-tracing/v.astro
+++ b/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'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro
index 7fb62e5..49c0b64 100644
--- a/src/pages/guided-tracing/w.astro
+++ b/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'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro
index 1e833ea..9952932 100644
--- a/src/pages/guided-tracing/x.astro
+++ b/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'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro
index f045b05..7e01d33 100644
--- a/src/pages/guided-tracing/y.astro
+++ b/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'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro
index 7f8e004..167a22b 100644
--- a/src/pages/guided-tracing/z.astro
+++ b/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'
@@ -171,13 +144,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         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', });
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 4eef2db..9ecf443 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index 5c1ac3d..c3c4613 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/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 () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
+    function saveUserData(){
+        const endTime = Date.now();
+        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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
@@ -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{
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index e2263b6..4b16aa7 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index ccc12f2..91bf64e 100644
--- a/src/pages/tick/v1.astro
+++ b/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>
+        </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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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{
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index 859c73c..60d3d66 100644
--- a/src/pages/tick/v2.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 8a4c799..0d26235 100644
--- a/src/pages/tick/v3.astro
+++ b/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',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            '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'
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
index ff89f42..c09ff7a 100644
--- a/src/pages/tracing/index.astro
+++ b/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 = {
diff --git a/src/pages/tst.astro b/src/pages/tst.astro
index 7702ba5..e69de29 100644
--- a/src/pages/tst.astro
+++ b/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>
\ No newline at end of file