Merge pull request 'b4' (#19) from b4 into fetch2

Reviewed-on: #19

info.txt

@@ -0,0 +1 @@
+1. Auto brake line Drag v4 Left & Right Heading.

public/saveGameData.js

@@ -1,17 +1,30 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userid');
+const userId = urlParams.get('userId');
-const gameId = urlParams.get('id');
+let gameId;
+let submitNotic;
 
+console.log(userId);
 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 +35,7 @@ function submitUserData(drawingZone) {
 
     let imageCode;
     let gameScore;
-    let scoreTotal=0;
+
     if(scoreTotal){
         gameScore = scoreTotal;
     }else{
@@ -39,10 +52,25 @@ function submitUserData(drawingZone) {
             image.style.paddingLeft = '2px';
             document.body.appendChild(image);
             // Download the snapshot as an image
-            const link = document.createElement('a');
+            // const link = document.createElement('a');
-            link.href = image.src;
+            // link.href = image.src;
-            link.download = 'my_drawing.png';
+            // link.download = 'my_drawing.png';
-            link.click();
+            // 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;
         }
@@ -61,7 +89,7 @@ function submitUserData(drawingZone) {
         };
         console.log(userData);
 
-        fetch(`http://192.168.0.166:3000/save-data`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'
@@ -70,9 +98,12 @@ function submitUserData(drawingZone) {
         })
         .then(response => {
             if(response.ok){
-            console.log('Data Saved', response)
+            console.log('Data Saved', response.status)
+            if(response.status == 200){
+                submitNotic.setVisible(true);
+            }
             } else{
-            // console.log('Something Wrong', response)
+            // console.log('Something Wrong', response) 
             }
         })
         .catch(error => {

src/pages/cross/cross_phonics_v1.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,51 +24,51 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label1"></p>
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label2"></p>
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label3"></p>
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label4"></p>
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label5"></p>
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label6"></p>
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -156,20 +156,22 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        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'
@@ -178,7 +180,9 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -257,7 +261,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/cross/cross_phonics_v2.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,69 +24,69 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label1"></p>
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label2"></p>
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label3"></p>
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label4"></p>
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label5"></p>
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label6"></p>
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label7"></p>
+                                    <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label8"></p>
+                                    <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
-                                    <p id="label9"></p>
+                                    <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,23 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +191,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -213,7 +213,9 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -292,7 +294,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/cross/v1.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,51 +24,51 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a1" class="round-checkbox-label">
                                     <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
                                 <label for="a2" class="round-checkbox-label">
                                     <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2"></p>
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a3" class="round-checkbox-label">
                                     <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
                                 <label for="a4" class="round-checkbox-label">
                                     <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a5" class="round-checkbox-label">
                                     <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
                                 <label for="a6" class="round-checkbox-label">
                                     <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6"></p>
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -163,13 +163,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        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'
@@ -178,7 +179,9 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -188,7 +191,6 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
-
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {
@@ -258,7 +260,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/cross/v2.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
-                        <div id="" class="flex flex-row place-content-between gap-4">
+                        <div id="" class="flex flex-row place-content-between ">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label1"></p>
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label2"></p>
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label3"></p>
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label4"></p>
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label5"></p>
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label6"></p>
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label7"></p>
+                                    <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label8"></p>
+                                    <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label9"></p>
+                                    <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
-                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                            <!-- <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>
                     </form>
                 </div>
@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,24 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +192,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -213,7 +214,9 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -292,7 +295,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/cross/v3.astro

@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <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="">
@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -110,25 +112,22 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -144,19 +143,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        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'
@@ -165,7 +165,9 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -245,7 +247,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea{

src/pages/drag/dragdrop_phonics.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,12 +71,28 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-      topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.47;
-      tickIconWidth = 1.24;
-      cancelIconWidth = 1.08;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +102,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -418,11 +430,7 @@ import Layout from '../../layouts/Layout.astro';
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -433,7 +441,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -593,7 +600,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/index.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,11 +71,25 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
 
   if(isMobile){
-      topLogoWidth = 5;
+        topLogoWidth = 4.5;
-      muteIconWidth = 2;
+        muteIconWidth = 1.8;
-      resetIconWidth = 1.6;
+        resetIconWidth = 1.47;
-      tickIconWidth = 1.34;
+        tickIconWidth = 1.24;
-      cancelIconWidth = 1.16;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+  if(isMobile){
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -82,11 +97,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -314,10 +324,11 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             const baseFontSize = 24;
-            const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+            let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
+            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-            const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+            const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
              blockMatches = [
               {
                 blockName: "blocks1",
@@ -392,11 +403,8 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-            font: '600 20px Quicksand',
+
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -447,7 +455,6 @@ import Layout from '../../layouts/Layout.astro';
         // submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -541,10 +548,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
             resultView.setVisible(false);
           }
@@ -556,23 +563,23 @@ import Layout from '../../layouts/Layout.astro';
                 resultView.setVisible(true);
             }
         };
-        const footerBorder = this.add.graphics();
+        // const footerBorder = this.add.graphics();
-        const footerX = 0; const footerY = window.innerHeight / 1.07;
+        // const footerX = 0; const footerY = window.innerHeight / 1.07;
-        const footerLineWidth = window.innerWidth;
+        // const footerLineWidth = window.innerWidth;
-        footerBorder.lineStyle(1, 0x0348A8);
+        // footerBorder.lineStyle(1, 0x0348A8);
-        footerBorder.setAlpha(0.2);
+        // footerBorder.setAlpha(0.2);
-        footerBorder.beginPath();
+        // footerBorder.beginPath();
-        footerBorder.moveTo(footerX, footerY);
+        // footerBorder.moveTo(footerX, footerY);
-        footerBorder.lineTo(footerX + footerLineWidth, footerY);
+        // footerBorder.lineTo(footerX + footerLineWidth, footerY);
-        footerBorder.strokePath();
+        // footerBorder.strokePath();
-        let textSize;
+        // let textSize;
-        if(isMobile){
+        // if(isMobile){
-          textSize = 10;
+        //   textSize = 10;
-        }else{
+        // }else{
-          textSize = 20;
+        //   textSize = 20;
-        }
+        // }
-        this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+        // this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
-        this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+        // this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
     }
   }
 // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {

src/pages/drag/match_phonics.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
+              let wrapWidth;
+              let textSizeScale; 
+              if(isMobile){
+                wrapWidth = 10;
+                textSizeScale = 540
+              }else{
+                wrapWidth = 200;
+                textSizeScale = 940
+              };
+
               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
               const baseFontSize = 24;
-              const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+              const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
-              let wrapWidth;
+              const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
-              if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-              const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -389,11 +409,8 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-            font: '600 20px Quicksand',
+
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -404,7 +421,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -522,10 +538,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){

src/pages/drag/testv3.astro

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

src/pages/drag/tmp.astro

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -450,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
           targetZone.block = null;
         }),
         blocks.forEach((block, index) => {
-          console.log(index+1)
+          // console.log(index+1)
           const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
           // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
           newBlock.on("drag", (pointer, dragX, dragY) => {
@@ -521,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

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 = {
@@ -544,11 +545,11 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/v2.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
-              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+              
-                const baseFontSize = 24;
-                const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
-                if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
+                let textSizeScale;
-                const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                if(isMobile){
+                  wrapWidth = 10;
+                  textSizeScale = 540
+                } else{
+                  wrapWidth = 200;
+                  textSizeScale = 940
+                }
+                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+                const baseFontSize = 24;
+                const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+                const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -389,11 +409,7 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -404,7 +420,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -522,10 +537,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){

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 = {
@@ -491,10 +492,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){

src/pages/drag/v3.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,26 +71,39 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let retryButtonWidth;
+  let leftTargetZoneW;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
       buttonHeight = 0;
       retryButtonWidth = window.innerWidth / 2 - 140;
       retryButtonHeight = window.innerHeight - 50;
-      leftTargetZoneW = window.innerWidth * 0.9 - 40;
+      leftTargetZoneW = window.innerWidth * 0.9 - 30;
       rightTargetZoneW = window.innerWidth / 6;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -131,19 +145,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: rightTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target2",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target3",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target4",
       block: null,
     },
@@ -155,19 +169,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: leftTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target6",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target7",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target8",
       block: null,
     },
@@ -324,7 +338,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -360,12 +374,21 @@ import Layout from '../../layouts/Layout.astro';
               }
             ];
             // console.log(data)
+
+
+            let wrapWidth;
+            let textSizeScale;
+            if(isMobile){
+              wrapWidth = 10;
+              textSizeScale = 540;
+            } else{
+              wrapWidth = 200;
+              textSizeScale = 940
+            }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             const baseFontSize = 24;
-            const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
-            let wrapWidth;
+            const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
-            if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-            const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
@@ -416,11 +439,7 @@ import Layout from '../../layouts/Layout.astro';
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -429,7 +448,6 @@ import Layout from '../../layouts/Layout.astro';
         // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -555,7 +573,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // console.log(match)
         if(match){
           scoreTotal++;
           resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

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 = {
@@ -302,7 +303,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -523,7 +524,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // console.log(match)
         if(match){
           scoreTotal++;
           resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

src/pages/drag/v4.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,12 +71,31 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let leftTargetZoneW;
+  let rightTargetZoneW;
+  let retryButtonWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +105,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -146,11 +161,7 @@ import Layout from '../../layouts/Layout.astro';
       .then(response => response.json())
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
-        if(isMobile){
+        if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
-          imageCustomWidth = "?width=100";
-        } else{
-          imageCustomWidth = "?width=100";
-        }
         const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
@@ -332,28 +343,38 @@ import Layout from '../../layouts/Layout.astro';
             ];
             // console.log(data)
             if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
-                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 20, data.label1, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 20, data.label2, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 20, data.label3, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 20, data.label4, {font:`15px`, fill: `#7c4c23`})
                 this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
                 this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
                 this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
             }
             if(isMobile){
-                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`});
-                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`});
+            } else if(isTab){
+                this.add.text(window.innerWidth / 17, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.8, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             } else{
-                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
-                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             }
-            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 24;
-              const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
-              if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
+              let textSizeScale;
-              const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+              if(isMobile){
+                wrapWidth = 10;
+                textSizeScale = 540
+              } else{
+                wrapWidth = 200;
+                textSizeScale = 940
+              }
+              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+              const baseFontSize = 24;
+              const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+              const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
@@ -403,12 +424,6 @@ import Layout from '../../layouts/Layout.astro';
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
-
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -417,7 +432,6 @@ import Layout from '../../layouts/Layout.astro';
         // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -482,35 +496,52 @@ import Layout from '../../layouts/Layout.astro';
         const targetZoneBorders = [];
         targetZones.forEach((targetZone) => {
           const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
+          const targetBorder = this.add.image(targetZone.x , targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
         blocks.forEach((block, index) => {
-          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          let blocksScale;
+          
+          if(isMobile){
+            blocksScale = 0.75;
+          } else{
+            blocksScale = 1;
+          }
+          const newBlock = this.add.sprite(block.x + 10, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(blocksScale);
           // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
           newBlock.on("drag", (pointer, dragX, dragY) => {
-            newBlock.setScale(1.3);
+            newBlock.setScale(blocksScale+.3);
             newBlock.x = dragX;
             newBlock.y = dragY;
         });
 
         newBlock.on("dragend", () => {
-            newBlock.setScale(1.0).setDepth(-2);
+            newBlock.setScale(blocksScale).setDepth(-2);
             let droppedOnTargetZone = false;
 
             targetZones.forEach((targetZone, targetIndex) => {
+              let phaserGeomX, phaserGeomY, blockSetPosition;
+              if(isMobile){
+                phaserGeomX = 50;
+                phaserGeomY = 25;
+                blockSetPosition = 40;
+              }else{
+                phaserGeomX = 200;
+                phaserGeomY = 100;
+                blockSetPosition = 50;
+              }
                 if (
                     Phaser.Geom.Intersects.RectangleToRectangle(
                         newBlock.getBounds(),
-                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25)
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY)
                     )
                 ) {
-                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
+                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
                     const col = counter % 2;
                     const row = Math.floor(counter / 2);
 
-                        newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
+                        newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
                         newBlock.disableInteractive();
                         targetZone.block = newBlock;
                         droppedBlocks.push(newBlock);
@@ -557,7 +588,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

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 = {
@@ -539,7 +540,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drawing/index.astro

@@ -31,12 +31,31 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let scoreTotal = 0;
+    let noticeWidth;
+    let noticeHeight;
+    let muteIcon;
+    let retryButton;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -45,12 +64,7 @@ import Layout from '../../layouts/Layout.astro';
         downloadHeight = 200;
         learningWidth = 200;
         learningHeight = 400
-    } else {
+    }else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -107,6 +121,7 @@ import Layout from '../../layouts/Layout.astro';
     };
       const game = new Phaser.Game(config);    
     })
+
     .catch(error => {
       console.error('Error fetching initial data:', error);
     });
@@ -166,19 +181,15 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.strokePath();
 
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
 
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -187,8 +198,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -201,9 +210,9 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.30);
             }else if(isTab){
                 outlineImage.setDepth(1).setScale(0.40);
             } else{
@@ -267,7 +276,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -571,9 +580,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
+            slider.style.transform = 'rotate(0deg)';
-            slider.style.marginTop = '80px';
+            slider.style.marginTop = '20px';
-            slider.style.marginLeft = '-40px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
@@ -648,10 +657,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/drawing/v2.astro

@@ -30,6 +30,15 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let defaultColor;
+    let scoreTotal = 0;
+    let image1Width;
+    let image1Height;
+    let image2Width;
+    let image2Height;
+    let image2Right;
+    let image2Bottom;
+    let noticeWidth;
+    let noticeHeight;
 
     if(isMobile){
         topLogoWidth = 4.5;
@@ -37,6 +46,20 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -52,11 +75,6 @@ import Layout from '../../layouts/Layout.astro';
         image2Height = 1.7;
         image2Bottom = 110;
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -218,11 +236,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', ()=>{
                 window.location.reload();
             })
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -231,7 +245,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
-            submitNotic.setVisible(true);
             // windowLoad();
             // submitUserData();
             submitUserData(this);
@@ -572,9 +585,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
-            slider.style.transform = 'rotate(-90deg)';
+            slider.style.transform = 'rotate(0deg)';
-            slider.style.marginTop = '80px';
+            slider.style.marginTop = '30px';
-            slider.style.marginLeft = '-40px';
+            slider.style.marginLeft = '0px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);

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>
+<script src="/saveGameData.js" is:inline></script>
-  const isMobile = window.innerWidth <= 768;
+<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,40 +127,9 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-    const URL = window.location.href;
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,10 +147,7 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
+        submitUserData(this);
-        submitNotic.setVisible(true);
-        // windowLoad();
-        submitUserData();
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });

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,40 +118,10 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+            submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -168,10 +139,7 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
+        submitUserData(this);
-        submitNotic.setVisible(true);
-        // windowLoad();
-        submitUserData();
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });

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,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/3.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/4.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,40 +125,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -175,9 +145,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/5.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -125,40 +126,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -176,9 +146,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/6.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/7.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/8.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/9.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/A.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
   
@@ -122,40 +123,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -173,9 +143,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/B.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -169,9 +139,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/C.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,40 +116,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -166,9 +136,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/D.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -168,9 +138,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/E.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -167,9 +137,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/F.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/G.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -110,46 +111,10 @@ 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('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -167,9 +132,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/H.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/I.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/J.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,40 +116,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -166,9 +136,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/K.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,13 +137,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/L.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -163,13 +133,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/M.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/N.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,40 +122,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,13 +138,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/O.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,40 +116,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -162,13 +132,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/P.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/Q.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-      const URL = window.location.href;
+       
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/R.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -123,40 +124,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -170,13 +140,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/S.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,40 +116,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -162,13 +132,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/T.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/U.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,40 +116,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -162,13 +132,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/V.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -163,13 +133,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', });

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,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -163,13 +133,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/X.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/Y.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,40 +122,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,13 +138,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/Z.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,13 +137,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/a.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/b.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -169,9 +139,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/c.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -169,9 +139,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/d.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/e.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/f.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -169,9 +139,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/g.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/h.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+    
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/i.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/j.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -170,9 +140,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/k.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -122,40 +123,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -173,9 +143,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
         // windowLoad();
-        submitUserData();
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/l.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,40 +118,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -164,13 +134,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/m.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -171,9 +141,8 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/n.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -166,13 +136,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/o.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -163,13 +133,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/p.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,9 +137,8 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/q.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,40 +119,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -165,13 +135,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/r.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,13 +137,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/s.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -163,13 +133,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/t.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,13 +137,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/u.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -166,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 : u", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/v.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -166,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', });

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,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -166,13 +136,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/x.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,40 +121,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,13 +137,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/y.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -166,13 +136,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/z.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,40 +125,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
+     
-      const urlSplit = URL.split('/');
+                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-      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'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -171,13 +141,12 @@ 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);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/tick/tick_phonics_v1.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,63 +24,63 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label1"></p>
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label2"></p>
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label3"></p>
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label4"></p>
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label5"></p>
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label6"></p>
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -91,14 +91,16 @@ 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;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -145,14 +147,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -175,13 +175,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
+        // 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'
@@ -190,9 +191,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -386,7 +389,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/tick/tick_phonics_v2.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,87 +24,87 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm" class="flex flex-col justify-center">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label1"></p>
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label2"></p>
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label3"></p>
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label4"></p>
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label5"></p>
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label6"></p>
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label7"></p>
+                                        <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label8"></p>
+                                        <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label9"></p>
+                                        <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
 
-    window.onload = function () {
+    function saveUserData(){
-        let currentTime = new Date();
+        const endTime = Date.now();
-        formatedDateTime = currentTime.toLocaleString();
+        const timeDifference = endTime - startTime;
-    };
+        const timeDifferenceInSeconds = timeDifference / 1000;
 
-    function saveUserData() {
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +215,15 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -231,9 +232,12 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    // console.log("Response", response.status);
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -248,173 +252,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{
@@ -441,7 +278,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/tick/tick_phonics_v3.astro

@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <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="">
@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -67,14 +67,16 @@ 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;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -82,18 +84,6 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label2").innerHTML = gameData.label2;
                 document.getElementById("label3").innerHTML = gameData.label3;
             }
-            // if(gameData.label1){
-            //     document.getElementById("label1").innerHTML = gameData.label1;
-            // }
-            // if(gameData.label2){
-            //     document.getElementById("label2").innerHTML = gameData.label2;
-            // }
-            // if(gameData.label3){
-            //     document.getElementById("label3").innerHTML = gameData.label3;
-            // }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
-
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             document.getElementById('descImage').src = assetsURL + gameData.descript_img;
             for (let i = 1; i <= 3; i++) {
@@ -121,14 +111,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +138,14 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
+        // 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'
@@ -165,9 +154,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/v1.astro

@@ -3,26 +3,25 @@ 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">
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
                             <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>
                 <div class="container mx-auto px-4">
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
@@ -78,29 +77,26 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
-            <section class="">
+        </div>          
-                <div class="container mx-auto px-4 flex flex-row place-content-between">
-                    <p>All rights reserved. Copyright@akademy.interakto2024</p>
-                </div>
-            </section>
-        </div>
     </main>
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -147,14 +143,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
+    
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
-
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -174,16 +168,16 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
-
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
+        // 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'
@@ -192,9 +186,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -210,157 +206,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{
@@ -388,7 +233,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/tick/v2.astro

@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,87 +24,87 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center  font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm" class="flex flex-col justify-center">
                         <div id="" class="flex flex-row place-content-between gap-4">
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label1"></p>
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label2"></p>
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label3"></p>
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label4"></p>
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label5"></p>
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label6"></p>
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label7"></p>
+                                        <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label8"></p>
+                                        <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                        <p id="label9"></p>
+                                        <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,11 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +214,14 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            // 'game_start' : gameStartTime,
+            'gameTime': timeDifferenceInSeconds,
-            'score' : totalPoints,
+            'score': totalPoints,
         };
-
+        // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -231,9 +230,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -274,7 +275,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{

src/pages/tick/v3.astro

@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,33 +22,33 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <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="">
                         <div id="itemForm" class="">
-                            <div class="flex flex-row gap-x-4 place-content-between">
+                            <div class="flex flex-row gap-x-4 place-content-between"> 
                                 <div class="flex flex-col">
                                     <label for="a1" class="round-checkbox-label">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label1"></p>
                                     </label>
                                     <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 </div>
                                 <div class="flex flex-col">
                                     <label for="a2" class="round-checkbox-label">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label2"></p>
                                     </label>
                                     <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                                 </div>
                                 <div class="flex flex-col">
                                     <label for="a3" class="round-checkbox-label">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label3"></p>
                                     </label>
                                     <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -67,14 +67,16 @@ 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;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -121,14 +123,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +150,15 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
+            'gameName': gameName,
-            'game_name': gameName,
+            'gameID': gameId,
-            'starts': formatedDateTime,
+            'userId': userId,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
+        // 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'
@@ -165,9 +167,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tracing/index.astro

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

src/pages/tst.astro

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