Merge pull request 'add eraser button and add start calculation logic' (#22) from b4 into master

Reviewed-on: #22

public/saveGameData.js

@@ -1,8 +1,10 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userid');
+const userId = urlParams.get('userId');
 let gameId;
+let submitNotic;
 
+console.log(userId);
 let startTime = Date.now();
 
 
@@ -11,19 +13,23 @@ const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
 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();
@@ -50,10 +56,10 @@ 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"){
@@ -65,15 +71,21 @@ 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 = `guided-tracing-${gameId}.png`;
-            link.click();
+            // 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,
@@ -81,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);
+        console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'
@@ -96,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

@@ -67,9 +67,9 @@ 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>
-                            <!-- <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>
@@ -80,9 +80,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -132,17 +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];
+
 
     function saveUserData() {
+        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 checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,7 +170,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('redBorder')) {
                 totalPoints += 1;
@@ -162,16 +177,19 @@ 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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -180,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);
                 }

src/pages/cross/cross_phonics_v2.astro

@@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <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 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 text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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 text-[14px] md:text-2xl">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <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>
@@ -98,8 +98,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -152,17 +158,30 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount += 1;
+                // console.log(wrongCount)
             }
         } else {
             element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     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;
@@ -177,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));
@@ -189,22 +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('redBorder')) {
                 totalPoints += 1;
             }
         });
+
+        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://phaser-game-api.s38.siliconpin.com/save-data`, {
+        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);
                 }

src/pages/cross/v1.astro

@@ -67,9 +67,9 @@ 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>
-                            <!-- <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>
@@ -80,9 +80,16 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -127,22 +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];
  
     function saveUserData() {
+        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 checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,23 +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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -179,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);
                 }

src/pages/cross/v2.astro

@@ -17,16 +17,11 @@ import Layout from "../../layouts/Layout.astro";
                             <button><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
-                    <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                 </div>
                 <div class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
-                    <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 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 text-[14px] md:text-2xl">
                                     <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
@@ -86,8 +81,8 @@ import Layout from "../../layouts/Layout.astro";
                             </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>
@@ -98,8 +93,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -134,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}`;
@@ -152,33 +152,35 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount +=1;
             }
         } else {
             element.classList.remove('redBorder', 'greenBorder');
         }
+        // console.log(wrongCount)
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     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,
-        //     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 checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -189,23 +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('redBorder')) {
                 totalPoints += 1;
             }
         });
+
+
+        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://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -214,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 => {
@@ -224,6 +233,7 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
+
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {

src/pages/cross/v3.astro

@@ -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>
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -120,9 +125,7 @@ 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];
+
 
     function saveUserData() {
         const endTime = Date.now();
@@ -141,22 +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('redBorder')) {
                 totalPoints += 1;
             }
         });
 
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
+
+
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        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);
                 }

src/pages/drag/dragdrop_phonics.astro

@@ -63,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;
@@ -430,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',
@@ -445,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);
@@ -604,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)
           }
           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

@@ -63,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;
@@ -403,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',
@@ -458,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);
@@ -556,10 +553,10 @@ import Layout from '../../layouts/Layout.astro';
           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);
+            // 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)
@@ -567,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

@@ -63,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;
@@ -409,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',
@@ -424,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);
@@ -546,9 +543,9 @@ import Layout from '../../layouts/Layout.astro';
           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);
           }
           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/v2.astro

@@ -63,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;
@@ -337,9 +338,9 @@ import Layout from '../../layouts/Layout.astro';
                   textSizeScale = 940
                 }
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                 const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                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
@@ -409,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',
@@ -424,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);
@@ -539,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)
           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);
           }
           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/v3.astro

@@ -63,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;
@@ -439,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',
@@ -452,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);
@@ -581,11 +577,11 @@ import Layout from '../../layouts/Layout.astro';
         // 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/v4.astro

@@ -63,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;
@@ -424,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',
@@ -438,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);
@@ -594,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)
           }
           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/drawing/drawing_phonics.astro

@@ -184,11 +184,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',
@@ -197,8 +193,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -280,7 +274,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;
@@ -584,9 +578,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){
 
             }

src/pages/drawing/drawing_writo.astro

@@ -184,11 +184,8 @@ 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',
@@ -197,8 +194,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -288,7 +283,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;
@@ -592,9 +587,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){
 
             }

src/pages/drawing/index.astro

@@ -33,6 +33,8 @@ import Layout from '../../layouts/Layout.astro';
     let scoreTotal = 0;
     let noticeWidth;
     let noticeHeight;
+    let muteIcon;
+    let retryButton;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
@@ -119,6 +121,7 @@ import Layout from '../../layouts/Layout.astro';
     };
       const game = new Phaser.Game(config);    
     })
+
     .catch(error => {
       console.error('Error fetching initial data:', error);
     });
@@ -178,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',
@@ -199,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);
             });
@@ -213,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{
@@ -279,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;
@@ -546,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';
@@ -567,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';
@@ -583,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){
 
             }
@@ -660,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

@@ -236,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',
@@ -249,7 +245,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
-            submitNotic.setVisible(true);
             // windowLoad();
             // submitUserData();
             submitUserData(this);
@@ -264,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');
@@ -590,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/drawing/v3.astro

@@ -153,7 +153,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){
@@ -161,7 +161,7 @@ import Layout from '../../layouts/Layout.astro';
                 } 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, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
@@ -214,8 +214,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',
@@ -226,7 +225,6 @@ import Layout from '../../layouts/Layout.astro';
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
             // submitButton.setVisible(false);
-            submitNotic.setVisible(true);
             // windowLoad();
             submitUserData(this);
             })
@@ -306,7 +304,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000'];
             const buttonSize = 60;
@@ -617,9 +615,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 = '70px';
-            slider.style.marginLeft = '-30px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '0px';
+            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

@@ -127,11 +127,9 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-      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',
@@ -149,7 +147,6 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitNotic.setVisible(false);
         submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');

src/pages/guided-tracing/1.astro

@@ -40,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
 
@@ -119,11 +119,9 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -141,7 +139,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitNotic.setVisible(false);
         submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');

src/pages/guided-tracing/2.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/3.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/4.astro

@@ -126,11 +126,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -148,7 +145,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/5.astro

@@ -127,11 +127,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -149,7 +146,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/6.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -124,11 +124,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -146,9 +143,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -139,9 +136,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,7 +140,7 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setVisible(false);
         submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -140,9 +137,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -113,11 +113,8 @@ let scoreTotal = 0;  let isDrawing = false;
   }
   function create() {
     
-      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',
@@ -135,9 +132,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
 
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      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',
@@ -139,9 +136,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/L.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/M.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/N.astro

@@ -123,11 +123,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -145,7 +142,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/O.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/P.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Q.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
        
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/R.astro

@@ -125,11 +125,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -147,7 +144,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/S.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/T.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/U.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/V.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',

src/pages/guided-tracing/W.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/X.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Y.astro

@@ -123,11 +123,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -145,7 +142,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Z.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/a.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      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',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      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',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      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',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -124,11 +124,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      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',
@@ -146,9 +143,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        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

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/m.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/n.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/o.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/p.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/q.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -142,7 +139,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/r.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/s.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/t.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/u.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',

src/pages/guided-tracing/v.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',

src/pages/guided-tracing/w.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/x.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/y.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/z.astro

@@ -126,11 +126,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        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',
@@ -148,7 +145,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/tick/tick_phonics_v1.astro

@@ -79,9 +79,9 @@ 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>
-                            <!-- <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>
@@ -92,9 +92,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -144,17 +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];
 
     function saveUserData() {
+        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 checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         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,15 +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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -191,7 +208,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);
                 }
@@ -343,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);

src/pages/tick/tick_phonics_v2.astro

@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
                             </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>
@@ -116,8 +116,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -176,27 +182,24 @@ import Layout from "../../layouts/Layout.astro";
         }
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
-
     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 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 = {
-        //     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 checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -208,22 +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;
             }
         });
+        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://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -232,7 +238,12 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    // console.log("Response", response.status);
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/tick/tick_phonics_v3.astro

@@ -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>
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -108,9 +113,6 @@ 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];
 
     function saveUserData() {
         const endTime = Date.now();
@@ -130,22 +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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -154,7 +156,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);
                 }

src/pages/tick/v1.astro

@@ -76,8 +76,9 @@ 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>
@@ -88,9 +89,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -135,22 +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];
     
     function saveUserData() {
+        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 checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -162,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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -186,7 +205,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);
                 }

src/pages/tick/v2.astro

@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
                             </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>
@@ -116,8 +116,13 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -170,17 +175,27 @@ 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];
-
     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;
@@ -195,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));
@@ -213,15 +227,18 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
+
+        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://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -230,7 +247,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);
                 }

src/pages/tick/v3.astro

@@ -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>
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    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(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -120,9 +125,6 @@ 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];
 
     function saveUserData() {
         const endTime = Date.now();
@@ -142,23 +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 = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -167,7 +169,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);
                 }