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

Reviewed-on: #22

public/saveGameData.js

@@ -13,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();
@@ -74,8 +78,14 @@ function submitUserData(drawingZone) {
             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,
@@ -83,13 +93,14 @@ function submitUserData(drawingZone) {
             'screenShot': imageCode,
             'userId' : userId,
             'gameTime' : timeDifferenceInSeconds,
-            'score' : scoreTotal
+            'score' : scoreTotal,
+            'star' : starValue
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
         console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'

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">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -181,7 +199,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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

@@ -39,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
                                     <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-[90px] h-[110px]" />
                                     <p id="label3" class="h-[50px] overflow-y-auto"></p>
@@ -86,8 +86,8 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -214,7 +234,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -180,7 +201,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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,13 +17,8 @@ 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-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 ">
@@ -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 class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -98,9 +93,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 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())
         .then(data => {
@@ -134,15 +136,13 @@ 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}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-
+    
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
         const element = document.getElementById(id);
@@ -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'
@@ -215,10 +220,12 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
                     }
                 } else {
-                    // console.log('Something Wrong', response);
+                    // Handle error
                 }
             })
             .catch(error => {
@@ -226,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 class="text-xl font-bold text-[#60C6CB]" 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'
@@ -166,7 +173,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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,7 +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();
 
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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 / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -599,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,7 +404,7 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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 / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
@@ -552,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)

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,7 +410,7 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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 / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
@@ -542,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,7 +410,7 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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 / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -534,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,7 +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();
 
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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 / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -576,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;
@@ -587,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,7 +184,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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',

src/pages/drawing/drawing_writo.astro

@@ -184,7 +184,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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',

src/pages/drawing/index.astro

@@ -189,7 +189,11 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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);
+
+            // 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',
@@ -543,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';
@@ -564,8 +568,8 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
-            // colorPicker.appendChild(clearButton);
+            colorPicker.appendChild(clearButton);
-            // buttonsContainer.appendChild(eraserButton).setVisible;
+            buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
             sliderContainer.style.backgroundColor = '#fff';

src/pages/drawing/v2.astro

@@ -236,7 +236,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', ()=>{
                 window.location.reload();
             })
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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',
@@ -259,14 +259,14 @@ import Layout from '../../layouts/Layout.astro';
             }
             
             if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
+                outlineImage1.setDepth(-5).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
+                outlineImage2.setDepth(-5).setScale(0.28);
             }else if(isTab){
-                outlineImage1.setDepth(1).setScale(0.34);
+                outlineImage1.setDepth(-5).setScale(0.34);
-                outlineImage2.setDepth(1).setScale(0.34);
+                outlineImage2.setDepth(-5).setScale(0.34);
             } else{
-                outlineImage1.setDepth(1).setScale(0.60);
+                outlineImage1.setDepth(-5).setScale(0.60);
-                outlineImage2.setDepth(1).setScale(0.60);   
+                outlineImage2.setDepth(-5).setScale(0.60);   
             }
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');

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,7 +214,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             })
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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',

src/pages/guided-tracing/0.astro

@@ -127,7 +127,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {

src/pages/guided-tracing/1.astro

@@ -119,7 +119,7 @@ import Layout from "../../layouts/Layout.astro";
 
   function create() {
     
-            submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {

src/pages/guided-tracing/2.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/3.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/4.astro

@@ -126,7 +126,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/5.astro

@@ -127,7 +127,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/6.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/7.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/8.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/9.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/A.astro

@@ -124,7 +124,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/B.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/C.astro

@@ -117,7 +117,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/D.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/E.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/F.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/G.astro

@@ -113,7 +113,7 @@ let scoreTotal = 0;  let isDrawing = false;
   }
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/H.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/I.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
 
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/J.astro

@@ -117,7 +117,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/K.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/L.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/M.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/N.astro

@@ -123,7 +123,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/O.astro

@@ -117,7 +117,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/P.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/Q.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
        
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/R.astro

@@ -125,7 +125,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/S.astro

@@ -117,7 +117,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/T.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/U.astro

@@ -117,7 +117,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/V.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/W.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/X.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/Y.astro

@@ -123,7 +123,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/Z.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/a.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/b.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/c.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/d.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/e.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/f.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/g.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/h.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/i.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/j.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/k.astro

@@ -124,7 +124,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',

src/pages/guided-tracing/l.astro

@@ -119,7 +119,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/m.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/n.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/o.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/p.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/q.astro

@@ -120,7 +120,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/r.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/s.astro

@@ -118,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/t.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/u.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/v.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/w.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/x.astro

@@ -122,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/y.astro

@@ -121,7 +121,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

src/pages/guided-tracing/z.astro

@@ -126,7 +126,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).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(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',

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">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -192,7 +209,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
                     }
                 } else {
                     // console.log('Something Wrong', response);
@@ -345,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 class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -234,7 +240,9 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     // console.log("Response", response.status);
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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 class="text-xl font-bold text-[#60C6CB]" 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'
@@ -155,7 +157,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <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'
@@ -187,7 +206,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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 class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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-[#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'
@@ -231,7 +248,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        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 class="text-xl font-bold text-[#60C6CB]" 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'
@@ -168,7 +170,9 @@ import Layout from "../../layouts/Layout.astro";
             .then(response => {
                 if (response.ok) {
                     if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
                     }
                 } else {
                     // console.log('Something Wrong', response);