Merge pull request 'change API Endpoint & Submit Message Desgine' (#21) from b4 into master

Reviewed-on: #21

public/saveGameData.js

@@ -1,8 +1,10 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userid');
+const userId = urlParams.get('userId');
 let gameId;
+let submitNotic;
 
+console.log(userId);
 let startTime = Date.now();
 
 
@@ -50,10 +52,10 @@ function submitUserData(drawingZone) {
             image.style.paddingLeft = '2px';
             document.body.appendChild(image);
             // Download the snapshot as an image
-            const link = document.createElement('a');
-            link.href = image.src;
-            link.download = 'my_drawing.png';
-            link.click();
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
             document.body.removeChild(image);
             imageCode = image.src;
         }else if( gameType[0] == "guided-tracing"){
@@ -65,10 +67,10 @@ function submitUserData(drawingZone) {
             image.style.paddingLeft = '2px';
             document.body.appendChild(image);
             // Download the snapshot as an image
-            const link = document.createElement('a');
-            link.href = image.src;
-            link.download = `guided-tracing-${gameId}.png`;
-            link.click();
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click();
             document.body.removeChild(image);
             imageCode = image.src;
         }
@@ -85,9 +87,9 @@ function submitUserData(drawingZone) {
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
-        // console.log(userData);
+        console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'
@@ -96,7 +98,10 @@ function submitUserData(drawingZone) {
         })
         .then(response => {
             if(response.ok){
-            // console.log('Data Saved', response)
+            console.log('Data Saved', response.status)
+            if(response.status == 200){
+                submitNotic.setVisible(true);
+            }
             } else{
             // console.log('Something Wrong', response) 
             }

src/pages/cross/cross_phonics_v1.astro

@@ -68,7 +68,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[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>
@@ -171,7 +171,7 @@ import Layout from "../../layouts/Layout.astro";
         };
         // 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 +180,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/cross/cross_phonics_v2.astro

@@ -24,69 +24,69 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
                                 <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
      
                                 <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
                                 <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
                                 <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
                                 <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
                                 <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[90px] h-[110px]" />
                                     <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <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>
@@ -204,7 +204,7 @@ import Layout from "../../layouts/Layout.astro";
         };
         // console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -213,7 +213,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/cross/v1.astro

@@ -68,7 +68,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[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>
@@ -170,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -179,7 +179,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/cross/v2.astro

@@ -24,9 +24,9 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
-                        <div id="" class="flex flex-row place-content-between gap-4">
+                        <div id="" class="flex flex-row place-content-between ">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
                                 <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
@@ -86,7 +86,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -205,7 +205,7 @@ import Layout from "../../layouts/Layout.astro";
         };
         // 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 +214,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/cross/v3.astro

@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -156,7 +156,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -165,7 +165,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/drag/dragdrop_phonics.astro

@@ -430,11 +430,7 @@ import Layout from '../../layouts/Layout.astro';
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -445,7 +441,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);

src/pages/drag/index.astro

@@ -403,11 +403,8 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -458,7 +455,6 @@ import Layout from '../../layouts/Layout.astro';
         // submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
@@ -567,23 +563,23 @@ import Layout from '../../layouts/Layout.astro';
                 resultView.setVisible(true);
             }
         };
-        const footerBorder = this.add.graphics();
-        const footerX = 0; const footerY = window.innerHeight / 1.07;
-        const footerLineWidth = window.innerWidth;
-        footerBorder.lineStyle(1, 0x0348A8);
-        footerBorder.setAlpha(0.2);
-        footerBorder.beginPath();
-        footerBorder.moveTo(footerX, footerY);
-        footerBorder.lineTo(footerX + footerLineWidth, footerY);
-        footerBorder.strokePath();
-        let textSize;
-        if(isMobile){
-          textSize = 10;
-        }else{
-          textSize = 20;
-        }
-        this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
-        this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+        // const footerBorder = this.add.graphics();
+        // const footerX = 0; const footerY = window.innerHeight / 1.07;
+        // const footerLineWidth = window.innerWidth;
+        // footerBorder.lineStyle(1, 0x0348A8);
+        // footerBorder.setAlpha(0.2);
+        // footerBorder.beginPath();
+        // footerBorder.moveTo(footerX, footerY);
+        // footerBorder.lineTo(footerX + footerLineWidth, footerY);
+        // footerBorder.strokePath();
+        // let textSize;
+        // if(isMobile){
+        //   textSize = 10;
+        // }else{
+        //   textSize = 20;
+        // }
+        // this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
+        // this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
     }
   }
 // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {

src/pages/drag/match_phonics.astro

@@ -409,11 +409,8 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -424,7 +421,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);

src/pages/drag/v2.astro

@@ -409,11 +409,7 @@ import Layout from '../../layouts/Layout.astro';
         graphics.moveTo(x, y);
         graphics.lineTo(x + lineWidth, y);
         graphics.strokePath();
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -424,7 +420,6 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           // submitButton.setVisible(false);
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);

src/pages/drag/v3.astro

@@ -439,11 +439,7 @@ import Layout from '../../layouts/Layout.astro';
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -452,7 +448,6 @@ import Layout from '../../layouts/Layout.astro';
         // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);

src/pages/drag/v4.astro

@@ -424,12 +424,6 @@ import Layout from '../../layouts/Layout.astro';
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
         this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
-
-        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
-            font: '600 20px Quicksand',
-            fill: 'blue'
-          }).setDepth(1);
-          submitNotic.setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -438,7 +432,6 @@ import Layout from '../../layouts/Layout.astro';
         // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
           submitUserData(this);

src/pages/drawing/drawing_phonics.astro

@@ -184,11 +184,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -197,8 +193,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -280,7 +274,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -584,9 +578,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }

src/pages/drawing/drawing_writo.astro

@@ -184,11 +184,8 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -197,8 +194,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -288,7 +283,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -592,9 +587,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }

src/pages/drawing/index.astro

@@ -33,6 +33,8 @@ import Layout from '../../layouts/Layout.astro';
     let scoreTotal = 0;
     let noticeWidth;
     let noticeHeight;
+    let muteIcon;
+    let retryButton;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
@@ -119,6 +121,7 @@ import Layout from '../../layouts/Layout.astro';
     };
       const game = new Phaser.Game(config);    
     })
+
     .catch(error => {
       console.error('Error fetching initial data:', error);
     });
@@ -178,19 +181,19 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.strokePath();
 
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
 
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+
+
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+            // submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -199,8 +202,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitNotic.setVisible(true);
-                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -213,9 +214,9 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.30);
             }else if(isTab){
                 outlineImage.setDepth(1).setScale(0.40);
             } else{
@@ -279,7 +280,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -583,9 +584,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '20px';
+            slider.style.marginLeft = '0px';
             if(isMobile){
 
             }
@@ -660,10 +661,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/drawing/v2.astro

@@ -236,11 +236,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', ()=>{
                 window.location.reload();
             })
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
-            submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -249,7 +245,6 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
-            submitNotic.setVisible(true);
             // windowLoad();
             // submitUserData();
             submitUserData(this);
@@ -590,9 +585,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '80px';
-            slider.style.marginLeft = '-40px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '30px';
+            slider.style.marginLeft = '0px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);

src/pages/drawing/v3.astro

@@ -214,8 +214,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             })
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: 'blue'}).setDepth(1);
-            submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
             // fill: '#fff',
@@ -226,7 +225,6 @@ import Layout from '../../layouts/Layout.astro';
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
             // submitButton.setVisible(false);
-            submitNotic.setVisible(true);
             // windowLoad();
             submitUserData(this);
             })
@@ -306,7 +304,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000'];
             const buttonSize = 60;
@@ -617,9 +615,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
-            slider.style.transform = 'rotate(-90deg)';
-            slider.style.marginTop = '70px';
-            slider.style.marginLeft = '-30px';
+            slider.style.transform = 'rotate(0deg)';
+            slider.style.marginTop = '0px';
+            slider.style.marginLeft = '0px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);

src/pages/guided-tracing/0.astro

@@ -127,11 +127,9 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -149,7 +147,6 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitNotic.setVisible(false);
         submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');

src/pages/guided-tracing/1.astro

@@ -40,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
 
@@ -119,11 +119,9 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -141,7 +139,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitNotic.setVisible(false);
         submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');

src/pages/guided-tracing/2.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/3.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/4.astro

@@ -126,11 +126,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -148,7 +145,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/5.astro

@@ -127,11 +127,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -149,7 +146,6 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
 submitUserData(this);
       })

src/pages/guided-tracing/6.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/7.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/8.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/9.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/A.astro

@@ -124,11 +124,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -146,9 +143,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/B.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/C.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -139,9 +136,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/D.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,7 +140,7 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setVisible(false);
         submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/E.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -140,9 +137,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/F.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/G.astro

@@ -113,11 +113,8 @@ let scoreTotal = 0;  let isDrawing = false;
   }
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -135,9 +132,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/H.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/I.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
 
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/J.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -139,9 +136,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/K.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/L.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/M.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/N.astro

@@ -123,11 +123,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -145,7 +142,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/O.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/P.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Q.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
        
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/R.astro

@@ -125,11 +125,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -147,7 +144,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/S.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/T.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/U.astro

@@ -117,11 +117,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -139,7 +136,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/V.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',

src/pages/guided-tracing/W.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/X.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Y.astro

@@ -123,11 +123,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -145,7 +142,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/Z.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/a.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/b.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/c.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/d.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/e.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/f.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -142,9 +139,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/g.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/h.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
     
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/i.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -144,9 +141,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/j.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -143,9 +140,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/k.astro

@@ -124,11 +124,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-      const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-      submitNotic.setVisible(false);
+              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
       submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
         font: '900 24px Quicksand',
         fill: '#05b3a4',
@@ -146,9 +143,8 @@ let scoreTotal = 0;  let isDrawing = false;
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', });

src/pages/guided-tracing/l.astro

@@ -119,11 +119,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -141,7 +138,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/m.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/n.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/o.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/p.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/q.astro

@@ -120,11 +120,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -142,7 +139,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/r.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/s.astro

@@ -118,11 +118,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -140,7 +137,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/t.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/u.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',

src/pages/guided-tracing/v.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',

src/pages/guided-tracing/w.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/x.astro

@@ -122,11 +122,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -144,7 +141,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/y.astro

@@ -121,11 +121,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -143,7 +140,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/guided-tracing/z.astro

@@ -126,11 +126,8 @@ let scoreTotal = 0;  let isDrawing = false;
 
   function create() {
      
-        const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
-          font: '600 20px Quicksand',
-          fill: '#05b3a4'
-      }).setDepth(1);
-        submitNotic.setVisible(false);
+                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
         submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
           font: '900 24px Quicksand',
           fill: '#05b3a4',
@@ -148,7 +145,6 @@ let scoreTotal = 0;  let isDrawing = false;
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(false);
           // windowLoad();
           submitUserData(this);
         })

src/pages/tick/tick_phonics_v1.astro

@@ -80,7 +80,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[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>
@@ -182,7 +182,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -191,7 +191,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -343,7 +347,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,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -223,7 +223,7 @@ import Layout from "../../layouts/Layout.astro";
         };
         // console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -232,7 +232,12 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    // console.log("Response", response.status);
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/tick/tick_phonics_v3.astro

@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -145,7 +145,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -154,7 +154,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/tick/v1.astro

@@ -77,7 +77,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
@@ -177,7 +177,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -186,7 +186,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/tick/v2.astro

@@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -221,7 +221,7 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -230,7 +230,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }

src/pages/tick/v3.astro

@@ -56,7 +56,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                             <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
@@ -158,7 +158,7 @@ import Layout from "../../layouts/Layout.astro";
         };
         // console.log(userData);
 
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -167,7 +167,11 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                    if(response.status == 200){
+                        let savedMessageSection = document.getElementById('savedMessage');
+                        savedMessageSection.style.display = "block";
+                        savedMessageSection.innerHTML = 'Saved Successfully';
+                    }
                 } else {
                     // console.log('Something Wrong', response);
                 }