add eraser button and add start calculation logic

Reviewed-on: #17

info.txt

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

public/saveGameData.js

@@ -1,18 +1,35 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userid');
-const gameId = urlParams.get('id');
+const userId = urlParams.get('userId');
+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;
 
+console.log("Here is game name ", gameName)
 
+if(gameType[0] == "guided-tracing"){
+    gameVersion = gameType[0].split('?')[0];
+    gameId = gameName[4];
+    console.log('Type - 1');
+} else if(gameName.length == 5){
+    gameVersion = gameName[3];
+    gameId = urlParams.get('id');
+    console.log('Type - 2');
+}else if(gameName.length == 6){
+    gameVersion = gameType[0] + '-' + gameName[4];
+    gameId = urlParams.get('id');
+    console.log('Type - 3');
+}
 
+// console.log(gameType[0])
 
 function submitUserData(drawingZone) {
     const endTime = Date.now();
@@ -22,7 +39,7 @@ function submitUserData(drawingZone) {
 
     let imageCode;
     let gameScore;
-    let scoreTotal=0;
+
     if(scoreTotal){
         gameScore = scoreTotal;
     }else{
@@ -39,15 +56,36 @@ function submitUserData(drawingZone) {
             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 = 'my_drawing.png';
-            link.click();
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // 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;
         }
-        
-        
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
 
         let userData = {
             'gameName': gameVersion,
@@ -55,13 +93,14 @@ function submitUserData(drawingZone) {
             'screenShot': imageCode,
             'userId' : userId,
             'gameTime' : timeDifferenceInSeconds,
-            'score' : scoreTotal
+            'score' : scoreTotal,
+            'star' : starValue
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
         console.log(userData);
 
-        fetch(`http://192.168.0.166:3000/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'
@@ -70,7 +109,10 @@ 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) 
             }

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,52 +24,52 @@ 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>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
-                            <!-- <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 class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -79,10 +79,18 @@ 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;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
 
-    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;
@@ -130,19 +138,27 @@ import Layout from "../../layouts/Layout.astro";
             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() {
-         // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
+         // Get checkbox values and corresponding elements
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,22 +170,26 @@ 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
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -178,7 +198,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -257,7 +281,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,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-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">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label7"></p>
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label8"></p>
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label9"></p>
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
+                                    <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>
-                            <!-- <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"> -->
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -97,9 +97,17 @@ 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 url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
     
-    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 +155,36 @@ 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');
+                wrongCount += 1;
+                // console.log(wrongCount)
             }
         } 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 checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -178,7 +196,6 @@ import Layout from "../../layouts/Layout.astro";
         //     a8: document.getElementById('a8').checked,
         //     a9: document.getElementById('a9').checked,
         // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -190,21 +207,24 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
-        let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
-        };
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let userData = {
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
+        };
+        // console.log(userData);
+
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -213,7 +233,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -292,7 +316,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,52 +24,52 @@ 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>
-                            <!-- <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 class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -79,10 +79,19 @@ 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;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
 
-    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;
@@ -125,24 +134,35 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount +=1;
             }
         } else {
             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() {
-         // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
+         // Get checkbox values and corresponding elements
+        
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,22 +174,24 @@ 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
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -178,7 +200,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -188,7 +214,6 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
-
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {
@@ -258,7 +283,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,84 +10,79 @@ 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>
                             <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">
-                    <!-- <div class="flex flex-col">
-                        <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">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label7"></p>
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label8"></p>
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label9"></p>
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
-                            <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">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -97,9 +92,18 @@ 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 wrongCount = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let maxPoint = 9;
+    let starValue; 
+    let totalPoints = 0;
 
-    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;
@@ -132,8 +136,6 @@ import Layout from "../../layouts/Layout.astro";
             if(gameData.label9){
                 document.getElementById("label9").innerHTML = gameData.label9;
             }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 9; i++) {
                 const imageId = `image${i}`;
@@ -147,38 +149,38 @@ 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');
+                wrongCount +=1;
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
+        // console.log(wrongCount)
     }
 
-    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 checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -189,22 +191,26 @@ 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;
             }
         });
+
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        
+
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -213,9 +219,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    // console.log('Something Wrong', response);
+                    // Handle error
                 }
             })
             .catch(error => {
@@ -223,6 +233,7 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
+
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {
@@ -292,7 +303,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-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" 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,17 @@ 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;
+    let totalPoints = 0;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
 
-    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 +117,20 @@ 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 => {
@@ -142,21 +144,26 @@ 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;
             }
         });
 
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
+
+
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -165,7 +172,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -245,7 +256,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,
@@ -62,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -70,12 +72,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){
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +103,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 +431,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', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -433,7 +442,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);
@@ -592,10 +600,10 @@ import Layout from '../../layouts/Layout.astro';
           // 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){
+              resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
               // console.log(counter)
               submitButton.setVisible(true);
               retryButton.setVisible(true);

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,
@@ -62,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -70,11 +72,25 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
 
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
+        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){
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -82,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,10 +325,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 +404,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', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -447,7 +456,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,14 +549,14 @@ 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)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
-            resultView.setVisible(false);
+            // console.log("Score Total", scoreTotal)
+            // resultView.setVisible(false);
           }
           if(counter === 4){
+                resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
                 const overlap = document.getElementById("overlap");
                 overlap.style.display = "block";
                 // console.log(counter)
@@ -556,23 +564,23 @@ import Layout from '../../layouts/Layout.astro';
                 resultView.setVisible(true);
             }
         };
-        const footerBorder = this.add.graphics();
-        const footerX = 0; const footerY = window.innerHeight / 1.07;
-        const footerLineWidth = window.innerWidth;
-        footerBorder.lineStyle(1, 0x0348A8);
-        footerBorder.setAlpha(0.2);
-        footerBorder.beginPath();
-        footerBorder.moveTo(footerX, footerY);
-        footerBorder.lineTo(footerX + footerLineWidth, footerY);
-        footerBorder.strokePath();
-        let textSize;
-        if(isMobile){
-          textSize = 10;
-        }else{
-          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 / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+        // const footerBorder = this.add.graphics();
+        // const footerX = 0; const footerY = window.innerHeight / 1.07;
+        // const footerLineWidth = window.innerWidth;
+        // footerBorder.lineStyle(1, 0x0348A8);
+        // footerBorder.setAlpha(0.2);
+        // footerBorder.beginPath();
+        // footerBorder.moveTo(footerX, footerY);
+        // footerBorder.lineTo(footerX + footerLineWidth, footerY);
+        // footerBorder.strokePath();
+        // let textSize;
+        // if(isMobile){
+        //   textSize = 10;
+        // }else{
+        //   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 / 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,
@@ -62,18 +63,35 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
   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 +99,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 +327,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;
-              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 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);
             // 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 +410,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', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -404,7 +422,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,13 +539,13 @@ 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)
-            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)
           }
           if(counter === 4){
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
               const overlap = document.getElementById("overlap");
               overlap.style.display = "block";
               // console.log(counter)

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,
@@ -62,18 +63,35 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
   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 +99,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 +327,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;}
-                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);
+                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 = 20;
+                const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+                const descrptText = this.add.text(screenCenterX, 110, 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 +410,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', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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);
@@ -519,16 +535,16 @@ import Layout from '../../layouts/Layout.astro';
         const isMatch = (blockName, targetName) => {
           if(isMatch){
             counter++;
-            // console.log(counter)
+            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)
-            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)
           }
           if(counter === 4){
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
               const overlap = document.getElementById("overlap");
               overlap.style.display = "block";
               // console.log(counter)

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,
@@ -62,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -70,26 +72,39 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let retryButtonWidth;
+  let leftTargetZoneW;
+
   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;
-      rightTargetZoneW = window.innerWidth / 6;
+        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){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth * 0.9 - 30;
+      rightTargetZoneW = window.innerWidth / 6;
+    } else {
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -131,19 +146,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 +170,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 +339,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 +375,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;
-            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 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);
@@ -416,11 +440,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', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -429,7 +449,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,14 +574,14 @@ 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);
           // console.log(scoreTotal)
         }
         if(counter === 8){
             // console.log(counter)
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
             submitButton.setVisible(true);
             retryButton.setVisible(true);
             resultView.setVisible(true);

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,
@@ -62,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -70,12 +72,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 +106,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 +162,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){
-          imageCustomWidth = "?width=100";
-        } else{
-          imageCustomWidth = "?width=100";
-        }
+        if(isMobile){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 +344,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 - 90, window.innerHeight - 30, 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 + 125, window.innerHeight - 30, data.label4, {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 - 80, window.innerHeight - 20, data.label2, {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 - 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(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, 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(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
+            }
+              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;
-              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 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 +425,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 +433,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);
@@ -487,30 +502,47 @@ import Layout from '../../layouts/Layout.astro';
           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);
@@ -556,11 +588,11 @@ import Layout from '../../layouts/Layout.astro';
           // 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)
+              resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
               submitButton.setVisible(true);
               retryButton.setVisible(true);
               resultView.setVisible(true);

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;
@@ -46,11 +65,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     }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,19 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.strokePath();
 
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            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', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+
+
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+            // submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -187,8 +202,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 +214,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 +280,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;
@@ -534,7 +547,7 @@ import Layout from '../../layouts/Layout.astro';
                 eraserButton.style.padding = '4px 4px';
             }else{
                 eraserButton.style.padding = '5px 5px';
-                eraserButton.style.marginTop = '15px';
+                eraserButton.style.marginTop = '0px';
                 eraserButton.style.marginBottom = '15px';
             }
             eraserButton.style.fontWeight = 'bold';
@@ -555,8 +568,8 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
-            // colorPicker.appendChild(clearButton);
-            // buttonsContainer.appendChild(eraserButton).setVisible;
+            colorPicker.appendChild(clearButton);
+            buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
             sliderContainer.style.backgroundColor = '#fff';
@@ -571,9 +584,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
@@ -648,10 +661,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', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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);
@@ -246,14 +259,14 @@ import Layout from '../../layouts/Layout.astro';
             }
             
             if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
+                outlineImage1.setDepth(-5).setScale(0.28);
+                outlineImage2.setDepth(-5).setScale(0.28);
             }else if(isTab){
-                outlineImage1.setDepth(1).setScale(0.34);
-                outlineImage2.setDepth(1).setScale(0.34);
+                outlineImage1.setDepth(-5).setScale(0.34);
+                outlineImage2.setDepth(-5).setScale(0.34);
             } else{
-                outlineImage1.setDepth(1).setScale(0.60);
-                outlineImage2.setDepth(1).setScale(0.60);   
+                outlineImage1.setDepth(-5).setScale(0.60);
+                outlineImage2.setDepth(-5).setScale(0.60);   
             }
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
@@ -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.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '30px';
+            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,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline> 
   const isMobile = window.innerWidth <= 768; 
   const drawingZone = {
@@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
   let isDrawing = false;
   let formattedDateTime;
   let animatedLetter;
-  let gameStartTime = "stat timr here";
+  let scoreTotal = 0;
+  
+  // const urls = window.location.href;
+  // const gameNames = urls.split('/');
+  // const gameTypes = gameNames[3].split('?id=');
+  // console.log(gameTypes[0]);
+
 
     if(isMobile){
       cloudeSize = 200;
@@ -120,40 +127,9 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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);
-        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 : 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('/');
-      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);
+    
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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);
-        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 : 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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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";
 //   let x = 100;
@@ -121,40 +122,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -172,9 +142,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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 = {
@@ -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('/');
-      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);
+       
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -174,9 +144,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -167,9 +137,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/W.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,40 +117,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -172,9 +142,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+    
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -168,9 +138,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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -170,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -170,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/w.astro

@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,40 +120,9 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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 : 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('/');
-      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);
+     
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).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, "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,64 +24,64 @@ 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" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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>
-                            <!-- <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 class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -91,14 +91,22 @@ 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;
+    let wrongCount = 0;
+    let starValue;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
 
-    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;
@@ -142,19 +150,26 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', '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();
-    };
 
     function saveUserData() {
-         // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
+         // Get checkbox values and corresponding elements
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -166,7 +181,6 @@ 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')) {
                 totalPoints += 1;
@@ -174,14 +188,18 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Move the userData object creation inside the saveUserData function if needed
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -190,9 +208,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -342,7 +364,9 @@ import Layout from "../../layouts/Layout.astro";
         })
         .then(response => {
             if (response.ok) {
-                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
                 // console.log('Data Saved', response);
             } else {
                 // console.log('Something Wrong', response);
@@ -386,7 +410,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,88 +24,88 @@ 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" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label7"></p>
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label8"></p>
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label9"></p>
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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>
-                            <!-- <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"> -->
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -115,9 +115,17 @@ 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 url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
+    let totalPoints = 0;
     
-    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;
@@ -174,29 +182,24 @@ 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 checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -208,21 +211,25 @@ 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')) {
                 totalPoints += 1;
             }
         });
-        let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
-        };
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        let userData = {
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
+
+        };
+        // console.log(userData);
+
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -231,9 +238,14 @@ 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){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -248,173 +260,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 +286,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-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" 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,21 @@ 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;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
 
-    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 +89,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++) {
@@ -118,17 +113,12 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', '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();
-    };
 
     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 => {
@@ -142,21 +132,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')) {
                 totalPoints += 1;
             }
         });
-
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -165,9 +156,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.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">
@@ -77,30 +76,34 @@ import Layout from "../../layouts/Layout.astro";
                                 <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>
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
-            <section class="">
-                <div class="container mx-auto px-4 flex flex-row place-content-between">
-                    <p>All rights reserved. Copyright@akademy.interakto2024</p>
-                </div>
-            </section>
         </div>          
     </main>
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userId');
+    let startTime = Date.now();
     let gameData = null;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
 
-    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;
@@ -139,24 +142,33 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('greenBorder');
             } else {
                 element.classList.add('redBorder');
+                wrongCount += 1;
             }
         } else {
             element.classList.remove('greenBorder', '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();
-    };
     
     function saveUserData() {
-         // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
+         // Get checkbox values and corresponding elements
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -168,22 +180,23 @@ 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')) {
                 totalPoints += 1;
             }
         });
-
         // Move the userData object creation inside the saveUserData function if needed
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -192,9 +205,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -210,157 +227,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 +254,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,88 +24,88 @@ 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" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label7"></p>
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label8"></p>
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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" />
-                                        <p id="label9"></p>
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <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>
-                            <!-- <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"> -->
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -115,9 +115,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 wrongCount = 0;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
     
-    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;
@@ -168,23 +175,30 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('greenBorder');
             } else {
                 element.classList.add('redBorder');
+                wrongCount += 1;
             }
         } else {
             element.classList.remove('greenBorder', '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();
-    };
-
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -196,7 +210,6 @@ import Layout from "../../layouts/Layout.astro";
         //     a8: document.getElementById('a8').checked,
         //     a9: document.getElementById('a9').checked,
         // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -214,15 +227,18 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
-        let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
-        };
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let userData = {
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
+        };
+        // console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -231,9 +247,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -274,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/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,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="">
@@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
                             <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-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" 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,21 @@ 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;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
 
-    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){
@@ -118,17 +125,12 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', '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();
-    };
 
     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 => {
@@ -142,21 +144,23 @@ 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')) {
                 totalPoints += 1;
             }
         });
-
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
+            'star': starValue
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -165,9 +169,13 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.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>