change submission api url for dev and dev url

Reviewed-on: #46

.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 dist.zip
+
+/public/config.js

public/config.js

@@ -0,0 +1,4 @@
+window.APP_CONFIG = {
+  PUBLIC_GAME_DU_API_URL: "https://game-du.teachertrainingkolkata.in",
+  siteName: "Interakto Games"
+};

public/saveGameAI.js

@@ -3,7 +3,8 @@
     }
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
-    const userId = urlParams.get('studentId');
+    const childId = urlParams.get('childId');
+    const schoolId = urlParams.get('schoolId');
     const gameVersion = urlParams.get('gameName');
     const gameId = urlParams.get('id');
     const spriteName = urlParams.get('spriteName');
@@ -11,7 +12,7 @@
     const worksheetId = urlParams.get('worksheetId');
     let submitNotic;
     let startTime = Date.now();
-
+    // console.log('gameVersion', gameVersion)
 
     const url = window.location.href;
     const gameName = url.split('/');
@@ -116,83 +117,7 @@ function submitUserData(drawingZone) {
             imageCode = image.src;
         }
         
-
-        let userData = {
-            'gameName': gameVersion,
-            'gameID': gameId,
-            'screenShot': imageCode,
-            'userId' : userId,
-            'gameTime' : timeDifferenceInSeconds
         
-        };
-        console.log('userData', userData)
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
-            method: 'POST',
-            headers: {
-                'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-    
-        })
-        .then(response => response.json())
-        .then(data => {
-            console.log('data from save gallery', data);
-
-            if(data.screenshotUrl){
-                fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(userData)
-                })
-                .then(response => {
-                    setTimeout(() => {
-                        if (response.ok) {
-                        if (response.status == 200) {
-                            document.getElementById('saved-toast').classList.remove('hidden');
-                            setTimeout(() => {
-                                document.getElementById('saved-toast').classList.add('hidden');
-                            }, 2000);
-                            
-                            // console.log(response.status, " Data Saved Succesfully");
-                        }
-                        } else {
-                        // console.log('Something went wrong', response);
-                        }
-                    }, 100);
-                })
-                .catch(error => {
-                    console.error('An error occurred', error);
-                });
-
-                const userAnotherData = {
-                    assignmentId: assignmentId,
-                    worksheetId: worksheetId,
-                    studentId: userId,
-                    submissionFile: data.screenshotUrl,
-                };
-                const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
-                fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type' : 'application/json',
-                        'Authorization' : authToken
-                    },
-                    body: JSON.stringify(userAnotherData)
-                })
-                .then(response => response.json())
-                .then(data => {
-                    console.log('submissions api response', data)
-                })
-                .catch(error => {
-                    console.error('An error occured', error)
-                })
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error);
-        })
     });   
     
 
@@ -201,7 +126,6 @@ function submitUserData(drawingZone) {
     function calculateFromAI(){
         let progress = 0;
         let starValue;
-        let maxStarValue = 5;
         
         function progressIncrement() {
             const interval = setInterval(() => {
@@ -236,9 +160,7 @@ function submitUserData(drawingZone) {
             document.head.appendChild(style);
         }
         addStarScalingStyles();
-        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
         
-        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
         let loadingMainContainer = document.getElementById('loadingMainContainer');
@@ -286,32 +208,34 @@ function submitUserData(drawingZone) {
         calculationText.style.fontWeight = '600';
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
-        let userData = {
+        let userDataForStar = {
             gameName: gameVersion,
-            userId: userId,
+            childId: childId,
             gameID: gameId,
             gameTime: timeDifferenceInSeconds,
             screenShot: imageCode
         };
-        // console.log(userData);
+        
-        fetch(`https://api.teachertrainingkolkata.in/api/aiEvaluateImageToStar`, {
+        // First API call
-        method: 'POST',
+        fetch(`https://ai-image-api.cs1.hz.siliconpin.com/bs_drawing`, {
-        headers: {
+            method: 'POST',
-            'Content-Type': 'application/json'
+            headers: {
-        },
+                'Content-Type': 'application/json'
-        body: JSON.stringify(userData)
+            },
+            body: JSON.stringify(userDataForStar)
         })
         .then(response => {
-            if(!response.ok){
+            if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            return response.json()
+            return response.json();
         })
         .then(data => {
-            // console.log('data', data.data.score);
+            console.log('response from', data)
             setTimeout(() => {
                 if (data && data.message === "Game data saved successfully") {
-                    starValue = data.data.score;
+                    let starValue = data.gameStar; // Ensure starValue is available
+        
                     let feedbackMessage = '';
                     if (starValue >= 1 && starValue <= 3) {
                         feedbackMessage = "You're making progress! Let's keep going!";
@@ -324,6 +248,7 @@ function submitUserData(drawingZone) {
                     } else {
                         feedbackMessage = "Invalid star value.";
                     }
+        
                     loadingMainContainer.style.display = 'none';
                     loadingDiv.style.display = 'none';
                     starContainer.style.display = 'flex';
@@ -331,22 +256,98 @@ function submitUserData(drawingZone) {
                     document.getElementById('get-star-value').innerHTML = starValue;
                     document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                     scoreBoard.style.display = 'flex';
+        
                     if (scoreBoard.style.display === 'flex') {
                         const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');
                         bottomAnimateClipart.classList.remove('hidden');
-                        bottomAnimateClipart.classList.add('-translate-x-full');
+                        bottomAnimateClipart.classList.add('-translate-x-full', 'transition-transform', 'duration-700');
-                        bottomAnimateClipart.classList.add('transition-transform', 'duration-700');
                         setTimeout(() => {
                             bottomAnimateClipart.classList.add('hidden');
                             bottomAnimateClipart.classList.remove('translate-x-full');
                         }, 100);
                     }
-                                
+        
-                    
+                    // ✅ Now create `userData` inside the correct scope where starValue exists
+                    let userData = {
+                        gameName: gameVersion.trim(),
+                        gameID: gameId,
+                        screenShot: imageCode,
+                        childId: childId,
+                        gameTime: timeDifferenceInSeconds,
+                        gameStar: starValue // ✅ Now correctly assigned
+                    };
+        
+                    // ✅ Now perform the second fetch request
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.screenshotUrl) {
+                            fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(userData)
+                            })
+                            .then(response => {
+                                setTimeout(() => {
+                                    if (response.ok && response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                    }
+                                }, 100);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+        
+                            // Final API Call
+                            const userAnotherData = {
+                                assignmentId: assignmentId,
+                                worksheetId: worksheetId,
+                                studentId: childId,
+                                schoolId: schoolId,
+                                submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
+                            };
+                            const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q';
+        
+                            fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'Authorization': authToken
+                                },
+                                body: JSON.stringify(userAnotherData)
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                console.log('Submission API response', data);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
                 }
-            }, 100);
+            }, 150);
         })
         .catch(error => {
-        console.error('An error occurred', error);
+            console.error('An error occurred', error);
-        });
+        });        
-    }
+    }
+
+
+
+
+

public/saveGameData copy 2.js

@@ -4,7 +4,7 @@ function retryGame(){
  
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('studentId');
+const userId = urlParams.get('childId');
 const gameVersion = urlParams.get('gameName');
 const gameId = urlParams.get('id');
 let submitNotic;

public/saveGameData copy.js

@@ -4,7 +4,7 @@ function retryGame(){
  
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('studentId');
+const userId = urlParams.get('childId');
 const gameVersion = urlParams.get('gameName');
 const gameId = urlParams.get('id');
 let submitNotic;

public/saveGameData.js

@@ -4,14 +4,15 @@ function retryGame(){
  
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('studentId');
+const childId = urlParams.get('childId');
+const schoolId = urlParams.get('schoolId');
 const gameVersion = urlParams.get('gameName');
 const assignmentId = urlParams.get('assignmentId');
 const worksheetId = urlParams.get('worksheetId');
 const gameId = urlParams.get('id');
 let submitNotic;
 
-// console.log(userId);
+// console.log(childId);
 let startTime = Date.now();
 
 
@@ -129,9 +130,7 @@ function submitUserData(drawingZone) {
             document.head.appendChild(style);
         }
         addStarScalingStyles();
-        const blankStar = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+       
-        
-        const starSVG = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
         let loadingMainContainer = document.getElementById('loadingMainContainer');
@@ -184,7 +183,7 @@ function submitUserData(drawingZone) {
             gameName: gameVersion,
             gameID: gameId,      
             screenShot: imageCode,
-            userId: userId,      
+            childId: childId,      
             gameTime: timeDifferenceInSeconds         
         };
         fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
@@ -196,19 +195,19 @@ function submitUserData(drawingZone) {
         })
         .then(response => response.json())
         .then(data => {
-            console.log('Gallery Response Data', data)
+            // console.log('Gallery Response Data', data)
 
             if(data.screenshotUrl){
                 let userData = {
                     'gameName': gameVersion,
                     'gameID': gameId,
                     'screenShot': imageCode,
-                    'userId' : userId,
+                    'childId' : childId,
                     'gameTime' : timeDifferenceInSeconds,
                     'score' : scoreTotal,
                     'gameStar' : starValue
                 };
-                console.log(userData);
+                // console.log(userData);
                 fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                     method: 'POST',
                     headers: {
@@ -249,11 +248,12 @@ function submitUserData(drawingZone) {
                 const userAnotherData = {
                     assignmentId: assignmentId,
                     worksheetId: worksheetId,
-                    studentId: userId,
+                    studentId: childId,
-                    submissionFile: data.screenshotUrl,
+                    schoolId: schoolId,
+                    submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
                 };
                 const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
-                console.log('Starting submissions API call');
+                // console.log('Starting submissions API call');
                 fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
                     method: 'POST',
                     headers: {
@@ -263,11 +263,11 @@ function submitUserData(drawingZone) {
                     body: JSON.stringify(userAnotherData)
                 })
                 .then(response => {
-                    console.log('Submissions API Response:', response);
+                    // console.log('Submissions API Response:', response);
                     return response.json();
                 })
                 .then(data => {
-                    console.log('Submissions Response Data:', data);
+                    // console.log('Submissions Response Data:', data);
                 })
                 .catch(error => {
                     console.error('Error in Submissions API:', error);

public/saveTracingGameData.js

@@ -4,12 +4,12 @@ function retryGame(){
 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('studentId');
+const childId = urlParams.get('childId');
 const gameVersion = urlParams.get('gameName');
 const gameId = urlParams.get('id');
 let submitNotic;
 
-console.log(userId);
+// console.log(childId);
 let startTime = Date.now();
 
 
@@ -33,7 +33,7 @@ const gameType = gameName[3].split('?id=');
 //     console.log('Type - 3');
 // }
 
-console.log(gameVersion)
+// console.log(gameVersion)
 
 function submitUserData(drawingZone) {
     const endTime = Date.now();
@@ -94,7 +94,7 @@ function submitUserData(drawingZone) {
             'gameName': gameVersion,
             'gameID': gameId,
             'screenShot': imageCode,
-            'userId' : userId,
+            'childId' : childId,
             'gameTime' : timeDifferenceInSeconds,
             'score' : scoreTotal,
             'gameStar' : starValue

src/layouts/Layout.astro

@@ -10,7 +10,7 @@ const { title } = Astro.props;
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" type="image/ico+xml" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
@@ -21,7 +21,7 @@ const { title } = Astro.props;
 	</body>
 </html>
 <style is:global>
-	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
+	@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
 	/* :root {
 		--accent: 124, 58, 237;
 		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
@@ -48,4 +48,10 @@ const { title } = Astro.props;
                 opacity: 1;
             }
     } */
+	* {
+		margin: 0;
+		padding: 0;
+		cursor: -webkit-grab; cursor: grab;
+		font-family: quicksand;
+	}
 </style>

src/pages/buzzboard.astro

@@ -17,7 +17,7 @@ import Layout from '../layouts/Layout.astro';
                         <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>

src/pages/cross/cross_phonics_v1.astro

@@ -97,19 +97,16 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                     </div>  
                 </div>
-                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                <div class="flex flex-row items-center" style="">
-                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
-            <div class="clip-art-container absolute bottom-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
         </div>      
         <div>
             <audio id="audioPlayer" controls class="hidden">
@@ -118,10 +115,17 @@ import Layout from "../../layouts/Layout.astro";
                 Your browser does not support the audio element.
             </audio>
         </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
     </main>
 </Layout>
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     let isPlaying = false;
     function audioPlayAndPause(){
         if(isPlaying === false){
@@ -138,10 +142,28 @@ import Layout from "../../layouts/Layout.astro";
     }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('studentId');
+    const childId = params.get('childId');
+    const schoolId = params.get('schoolId');
     const gameName = params.get('gameName');
     const assignmentId = params.get('assignmentId');
     const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let totalPoints = 0;
@@ -154,11 +176,11 @@ import Layout from "../../layouts/Layout.astro";
     let progress = 0;
     const progressBar = document.createElement('div');
     let totalCorrectFromApi = 0;
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
+    fetch(`${GAME_DU_URL_PREFIX}/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            let audioLink = `${GAME_DU_URL_PREFIX}/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
             document.querySelector('audio').load();
@@ -185,20 +207,13 @@ import Layout from "../../layouts/Layout.astro";
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
             // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
 
-            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
             for (let i = 1; i <= 6; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
 
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
-
     function addStarScalingStyles() {
         const style = document.createElement('style');
         style.innerHTML = `
@@ -312,7 +327,6 @@ import Layout from "../../layouts/Layout.astro";
         // console.log(userData);
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
 
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
@@ -399,7 +413,7 @@ import Layout from "../../layouts/Layout.astro";
                 gameName: gameName,
                 gameID: gameId,      
                 screenShot: snapImage,
-                userId: userId,      
+                childId: childId,      
                 gameTime: timeDifferenceInSeconds         
             };
             try {
@@ -421,7 +435,7 @@ import Layout from "../../layouts/Layout.astro";
                     let userData = {
                         'gameName': gameName,
                         'gameID': gameId,
-                        'userId': userId,
+                        'childId': childId,
                         'gameTime': timeDifferenceInSeconds,
                         'score': totalPoints,
                         'gameStar': percentage
@@ -438,6 +452,10 @@ import Layout from "../../layouts/Layout.astro";
                             setTimeout(() => {
                                 if (response.ok) {
                                     if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
                                         document.getElementById('allParentDiv').style.display = 'block';
                                         loadingMainContainer.style.display = 'none';
                                         loadingDiv.style.display = 'none';
@@ -461,12 +479,13 @@ import Layout from "../../layouts/Layout.astro";
                     const userAnotherData = {
                         assignmentId: assignmentId,
                         worksheetId: worksheetId,
-                        studentId: userId,
+                        studentId: childId,
-                        submissionFile: saveResult.screenshotUrl,
+                        schoolId: schoolId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                     };
                     const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                     try {
-                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',

src/pages/cross/cross_phonics_v2.astro

@@ -106,19 +106,16 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                     </div>
                 </div>
-                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                <div class="flex flex-row items-center" style="">
-                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
-            <div class="clip-art-container absolute bottom-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
         </div> 
         <div>
             <audio id="audioPlayer" controls class="hidden">
@@ -126,11 +123,18 @@ import Layout from "../../layouts/Layout.astro";
                 <source id="instrucAudio2" src="" type="audio/mpeg">
                 Your browser does not support the audio element.
             </audio>
-        </div>      
+        </div>    
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>  
     </main>
 </Layout>
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     let isPlaying = false;
     function audioPlayAndPause(){
         if(isPlaying === false){
@@ -147,10 +151,28 @@ import Layout from "../../layouts/Layout.astro";
     }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('studentId');
+    const childId = params.get('childId');
+    const schoolId = params.get('schoolId');
     const gameName = params.get('gameName');
     const assignmentId = params.get('assignmentId');
     const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let url = window.location.href;
     let urlSplit = url.split('/');
@@ -162,11 +184,11 @@ import Layout from "../../layouts/Layout.astro";
     let progress = 0;
     const progressBar = document.createElement('div');
     let totalCorrectFromApi = 0;
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
+    fetch(`${GAME_DU_URL_PREFIX}/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            let audioLink = `${GAME_DU_URL_PREFIX}/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
             document.querySelector('audio').load();
@@ -201,18 +223,12 @@ import Layout from "../../layouts/Layout.astro";
             }
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
             // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
-            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
             for (let i = 1; i <= 9; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
 
     function addStarScalingStyles() {
         const style = document.createElement('style');
@@ -301,7 +317,7 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         answersList.forEach((answer) => {
             if (gameData[answer] === true) {
                 totalCorrectFromApi++;
@@ -328,7 +344,6 @@ import Layout from "../../layouts/Layout.astro";
 
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
         
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
@@ -414,7 +429,7 @@ import Layout from "../../layouts/Layout.astro";
                 gameName: gameName,
                 gameID: gameId,      
                 screenShot: snapImage,
-                userId: userId,      
+                childId: childId,      
                 gameTime: timeDifferenceInSeconds         
             };
             try {
@@ -436,7 +451,7 @@ import Layout from "../../layouts/Layout.astro";
                     let userData = {
                         'gameName': gameName,
                         'gameID': gameId,
-                        'userId': userId,
+                        'childId': childId,
                         'gameTime': timeDifferenceInSeconds,
                         'score': totalPoints,
                         'gameStar': percentage
@@ -476,12 +491,13 @@ import Layout from "../../layouts/Layout.astro";
                     const userAnotherData = {
                         assignmentId: assignmentId,
                         worksheetId: worksheetId,
-                        studentId: userId,
+                        studentId: childId,
-                        submissionFile: saveResult.screenshotUrl,
+                        schoolId: schoolId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                     };
                     const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                     try {
-                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',

src/pages/cross/v1.astro

@@ -97,19 +97,16 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                     </div>  
                 </div>
-                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                <div class="flex flex-row items-center" style="">
-                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
-            <div class="clip-art-container absolute bottom-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
         </div>      
         <div>
             <audio id="audioPlayer" controls class="hidden">
@@ -118,10 +115,17 @@ import Layout from "../../layouts/Layout.astro";
                 Your browser does not support the audio element.
             </audio>
         </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
     </main>
 </Layout>
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     let isPlaying = false;
     function audioPlayAndPause(){
         if(isPlaying === false){
@@ -138,10 +142,28 @@ import Layout from "../../layouts/Layout.astro";
     }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('studentId');
+    const childId = params.get('childId');
+    const schoolId = params.get('schoolId');
     const gameName = params.get('gameName');
     const assignmentId = params.get('assignmentId');
     const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let url = window.location.href;
@@ -155,11 +177,11 @@ import Layout from "../../layouts/Layout.astro";
     const progressBar = document.createElement('div');
     let totalCorrectFromApi = 0;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
+    fetch(`${GAME_DU_URL_PREFIX}/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            let audioLink = `${GAME_DU_URL_PREFIX}/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
             document.querySelector('audio').load();
@@ -186,20 +208,13 @@ import Layout from "../../layouts/Layout.astro";
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
             // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
 
-            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
             for (let i = 1; i <= 6; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
 
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
-
     function addStarScalingStyles() {
         const style = document.createElement('style');
         style.innerHTML = `
@@ -315,10 +330,7 @@ import Layout from "../../layouts/Layout.astro";
 
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
         
-        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
         let loadingMainContainer = document.getElementById('loadingMainContainer');
@@ -403,7 +415,7 @@ import Layout from "../../layouts/Layout.astro";
                 gameName: gameName,
                 gameID: gameId,      
                 screenShot: snapImage,
-                userId: userId,      
+                childId: childId,      
                 gameTime: timeDifferenceInSeconds         
             };
             try {
@@ -425,7 +437,7 @@ import Layout from "../../layouts/Layout.astro";
                     let userData = {
                         'gameName': gameName,
                         'gameID': gameId,
-                        'userId': userId,
+                        'childId': childId,
                         'gameTime': timeDifferenceInSeconds,
                         'score': totalPoints,
                         'gameStar': percentage
@@ -442,6 +454,10 @@ import Layout from "../../layouts/Layout.astro";
                             setTimeout(() => {
                                 if (response.ok) {
                                     if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
                                         document.getElementById('allParentDiv').style.display = 'block';
                                         loadingMainContainer.style.display = 'none';
                                         loadingDiv.style.display = 'none';
@@ -465,12 +481,13 @@ import Layout from "../../layouts/Layout.astro";
                     const userAnotherData = {
                         assignmentId: assignmentId,
                         worksheetId: worksheetId,
-                        studentId: userId,
+                        studentId: childId,
-                        submissionFile: saveResult.screenshotUrl,
+                        schoolId: schoolId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                     };
                     const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                     try {
-                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',

src/pages/cross/v2.astro

@@ -101,19 +101,16 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                     </div>
                 </div>
-                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                <div class="flex flex-row items-center" style="">
-                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
-            <div class="clip-art-container absolute bottom-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
         </div>
         <div>
             <audio id="audioPlayer" controls class="hidden">
@@ -122,10 +119,17 @@ import Layout from "../../layouts/Layout.astro";
                 Your browser does not support the audio element.
             </audio>
         </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
     </main>
 </Layout>
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     let isPlaying = false;
     function audioPlayAndPause(){
         if(isPlaying === false){
@@ -142,10 +146,28 @@ import Layout from "../../layouts/Layout.astro";
     }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('studentId');
+    const childId = params.get('childId');
+    const schoolId = params.get('schoolId');
     const gameName = params.get('gameName');
     const assignmentId = params.get('assignmentId');
     const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let wrongCount = 0;
     let url = window.location.href;
@@ -158,11 +180,11 @@ import Layout from "../../layouts/Layout.astro";
     let progress = 0;
     const progressBar = document.createElement('div');
     let totalCorrectFromApi = 0;
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
+    fetch(`${GAME_DU_URL_PREFIX}/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            let audioLink = `${GAME_DU_URL_PREFIX}/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
             document.querySelector('audio').load();
@@ -195,18 +217,12 @@ import Layout from "../../layouts/Layout.astro";
             if(gameData.label9){
                 document.getElementById("label9").innerHTML = gameData.label9;
             }
-            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
             for (let i = 1; i <= 9; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-        function showClipArt() {
-            const clipArtContainer = document.querySelector('.clip-art-container');
-
-            clipArtContainer.classList.remove('hidden');
-            clipArtContainer.classList.add('slide-in');
-        }
 
         function addStarScalingStyles() {
             const style = document.createElement('style');
@@ -324,7 +340,7 @@ import Layout from "../../layouts/Layout.astro";
 
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
+
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
         let loadingMainContainer = document.getElementById('loadingMainContainer');
@@ -409,7 +425,7 @@ import Layout from "../../layouts/Layout.astro";
                 gameName: gameName,
                 gameID: gameId,      
                 screenShot: snapImage,
-                userId: userId,      
+                childId: childId,      
                 gameTime: timeDifferenceInSeconds         
             };
             try {
@@ -431,7 +447,7 @@ import Layout from "../../layouts/Layout.astro";
                     let userData = {
                         'gameName': gameName,
                         'gameID': gameId,
-                        'userId': userId,
+                        'childId': childId,
                         'gameTime': timeDifferenceInSeconds,
                         'score': totalPoints,
                         'gameStar': percentage
@@ -448,6 +464,10 @@ import Layout from "../../layouts/Layout.astro";
                             setTimeout(() => {
                                 if (response.ok) {
                                     if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
                                         document.getElementById('allParentDiv').style.display = 'block';
                                         loadingMainContainer.style.display = 'none';
                                         loadingDiv.style.display = 'none';
@@ -471,12 +491,13 @@ import Layout from "../../layouts/Layout.astro";
                     const userAnotherData = {
                         assignmentId: assignmentId,
                         worksheetId: worksheetId,
-                        studentId: userId,
+                        studentId: childId,
-                        submissionFile: saveResult.screenshotUrl,
+                        schoolId: schoolId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                     };
                     const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                     try {
-                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',

src/pages/cross/v3.astro

@@ -76,19 +76,16 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                     </div>  
                 </div>
-                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                <div class="flex flex-row items-center" style="">
-                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
-            <div class="clip-art-container absolute bottom-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
         </div>
         <div>
             <audio id="audioPlayer" controls class="hidden">
@@ -97,10 +94,17 @@ import Layout from "../../layouts/Layout.astro";
                 Your browser does not support the audio element.
             </audio>
         </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
     </main>
 </Layout>
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     let isPlaying = false;
     function audioPlayAndPause(){
         if(isPlaying === false){
@@ -117,10 +121,28 @@ import Layout from "../../layouts/Layout.astro";
         }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('studentId');
+    const childId = params.get('childId');
+    const schoolId = params.get('schoolId');
     const gameName = params.get('gameName');
     const assignmentId = params.get('assignmentId');
     const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let totalPoints = 0;
@@ -131,11 +153,11 @@ import Layout from "../../layouts/Layout.astro";
     let progress = 0;
     const progressBar = document.createElement('div');
     let totalCorrectFromApi = 0;
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
+    fetch(`${GAME_DU_URL_PREFIX}/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            let audioLink = `${GAME_DU_URL_PREFIX}/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
             document.querySelector('audio').load();
@@ -148,7 +170,7 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label3").innerHTML = gameData.label3;
             }
             
-            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
             document.getElementById('descImage').src = assetsURL + gameData.descript_img;
             for (let i = 1; i <= 3; i++) {
                 const imageId = `image${i}`;
@@ -157,12 +179,6 @@ import Layout from "../../layouts/Layout.astro";
                 }
             }
         });
-        function showClipArt() {
-            const clipArtContainer = document.querySelector('.clip-art-container');
-
-            clipArtContainer.classList.remove('hidden');
-            clipArtContainer.classList.add('slide-in');
-        }
 
     function addStarScalingStyles() {
         const style = document.createElement('style');
@@ -264,7 +280,6 @@ import Layout from "../../layouts/Layout.astro";
         }
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
 
         const starContainer = document.getElementById('star-container');
         let scoreBoard = document.getElementById('scoreBoard');
@@ -350,7 +365,7 @@ import Layout from "../../layouts/Layout.astro";
                 gameName: gameName,
                 gameID: gameId,      
                 screenShot: snapImage,
-                userId: userId,      
+                childId: childId,      
                 gameTime: timeDifferenceInSeconds         
             };
             try {
@@ -372,7 +387,7 @@ import Layout from "../../layouts/Layout.astro";
                     let userData = {
                         'gameName': gameName,
                         'gameID': gameId,
-                        'userId': userId,
+                        'childId': childId,
                         'gameTime': timeDifferenceInSeconds,
                         'score': totalPoints,
                         'gameStar': percentage
@@ -389,6 +404,10 @@ import Layout from "../../layouts/Layout.astro";
                             setTimeout(() => {
                                 if (response.ok) {
                                     if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
                                         document.getElementById('allParentDiv').style.display = 'block';
                                         loadingMainContainer.style.display = 'none';
                                         loadingDiv.style.display = 'none';
@@ -412,12 +431,13 @@ import Layout from "../../layouts/Layout.astro";
                     const userAnotherData = {
                         assignmentId: assignmentId,
                         worksheetId: worksheetId,
-                        studentId: userId,
+                        studentId: childId,
-                        submissionFile: saveResult.screenshotUrl,
+                        schoolId: schoolId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                     };
                     const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                     try {
-                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
                             method: 'POST',
                             headers: {
                                 'Content-Type': 'application/json',

src/pages/drag/dragdrop_phonics.astro

@@ -3,10 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title="Drag Game">
 	<main>
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-      Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
@@ -20,12 +16,12 @@ import Layout from '../../layouts/Layout.astro';
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div> 
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/clip-art.svg" alt="" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -34,11 +30,18 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     // function showAnimation() {
     //     const clipArt = document.querySelector('.clip-art');
     //     clipArt.classList.add('show');
@@ -65,6 +68,9 @@ import Layout from '../../layouts/Layout.astro';
   let retryButton;
   let blockMatches;
   let audioData;
+  let retryButtonWidth;
+  let leftTargetZoneW;
+  let rightTargetZoneW;
   let audioFileId = false;
   let isPlaying = false;
 
@@ -150,20 +156,37 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=80";
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
         assetsList.element3 = assetsURL + image3   + imageCustomWidth;
@@ -322,7 +345,7 @@ import Layout from '../../layouts/Layout.astro';
 
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             blockMatches = [
@@ -634,7 +657,7 @@ import Layout from '../../layouts/Layout.astro';
   };
 
 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+<style>
   * {
       margin: 0;
       padding: 0;

src/pages/drag/index.astro

@@ -1,16 +1,12 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 
-let starNumberOfTime = localStorage.getItem('starValue');
+// let starNumberOfTime = localStorage.getItem('starValue');
-console.log(starNumberOfTime);
+// console.log(starNumberOfTime);
-const numberOfTimes = starNumberOfTime;
+// const numberOfTimes = starNumberOfTime;
 ---
 <Layout title="Drag Game">
-	<main>
+	<main> 
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-        Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
@@ -23,25 +19,32 @@ const numberOfTimes = starNumberOfTime;
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div>        
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
-      </div>
+      </div> 
       <!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
           <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
       </div> -->
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+  </div> 
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
   // function showAnimation() {
   //     const clipArt = document.querySelector('.clip-art');
   //     clipArt.classList.add('show');
@@ -152,44 +155,42 @@ const numberOfTimes = starNumberOfTime;
       block: null,
     },
   ];
-  // const blockMatches = [
-  //   {
-  //     blockName: "blocks1",
-  //     targetName: "target1",
-  //   },
-  //   {
-  //     blockName: "blocks2",
-  //     targetName: "target2",
-  //   },
-  //   {
-  //     blockName: "blocks3",
-  //     targetName: "target3",
-  //   },
-  //   {
-  //     blockName: "blocks4",
-  //     targetName: "target4",
-  //   },
-  // ];
-  // console.log(blockMatches.blockName, blockMatches.targetName)
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         console.log(data)
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         // console.log(audioData)
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
-          imageCustomWidth = "?width=100";
+          imageCustomWidth = "?width=60";
         } else{
-          imageCustomWidth = "?width=100";
+          imageCustomWidth = "?width=60";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
         assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
         assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
@@ -328,7 +329,7 @@ const numberOfTimes = starNumberOfTime;
     create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data)
@@ -612,7 +613,7 @@ const numberOfTimes = starNumberOfTime;
 
 
 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
+<style>
   * {
     margin: 0;
     padding: 0;

src/pages/drag/match_phonics.astro

@@ -3,10 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title="Drag Game">
 	<main>
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-      Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
@@ -20,12 +16,12 @@ import Layout from '../../layouts/Layout.astro';
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div> 
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/clip-art.svg" alt="" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -34,11 +30,18 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     // function showAnimation() {
     //     const clipArt = document.querySelector('.clip-art');
     //     clipArt.classList.add('show');
@@ -154,20 +157,37 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
         assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
         assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
@@ -307,7 +327,7 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data) right_match
@@ -591,7 +611,7 @@ import Layout from '../../layouts/Layout.astro';
   };
 
 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+<style>
   * {
     margin: 0;
     padding: 0;

src/pages/drag/testv3.astro

@@ -623,7 +623,8 @@ import Layout from '../../layouts/Layout.astro';
   };
 
 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+<style>
+  @import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
   * {
 margin: 0;
 padding: 0;

src/pages/drag/v2.astro

@@ -3,10 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title="Drag Game">
 	<main>
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-        Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
@@ -19,12 +15,12 @@ import Layout from '../../layouts/Layout.astro';
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div>        
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -33,11 +29,18 @@ import Layout from '../../layouts/Layout.astro';
           <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
       </div> -->
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+        Worksheet saved successfully
+    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     // function showAnimation() {
     //     const clipArt = document.querySelector('.clip-art');
     //     clipArt.classList.add('show');
@@ -154,21 +157,38 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
 
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
         assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
         assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
@@ -308,7 +328,7 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data) right_match
@@ -577,7 +597,7 @@ import Layout from '../../layouts/Layout.astro';
   };
 
 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+<style>
   * {
     margin: 0;
     padding: 0;

src/pages/drag/v20.astro

@@ -50,7 +50,10 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
@@ -132,7 +135,7 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
@@ -141,7 +144,7 @@ import Layout from '../../layouts/Layout.astro';
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
         assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
         assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
@@ -277,7 +280,7 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data) right_match

src/pages/drag/v3.astro

@@ -3,10 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title="Drag Game">
   <main>
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-      Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
@@ -20,12 +16,12 @@ import Layout from '../../layouts/Layout.astro';
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div> 
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/clip-art.svg" alt="" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -34,11 +30,18 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     // function showAnimation() {
     //     const clipArt = document.querySelector('.clip-art');
     //     clipArt.classList.add('show');
@@ -186,20 +189,37 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
         assetsList.element3 = assetsURL + image3   + imageCustomWidth;
@@ -340,7 +360,7 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data)
@@ -533,7 +553,7 @@ import Layout from '../../layouts/Layout.astro';
           if (match !== undefined) {
             scoreTotal++;
             counter++;
-            // console.log(`Score Total: ${scoreTotal}`); 
+            console.log(`Score Total: ${scoreTotal}`); 
             return 'borderCorrect';
           } else {
             // console.log(`Score Total: ${scoreTotal}`); 
@@ -561,6 +581,7 @@ import Layout from '../../layouts/Layout.astro';
           newBlock.on("dragend", () => {
             newBlock.setScale(1.0);
             let droppedOnTargetZone = false;
+            
             targetZones.forEach((targetZone, targetIndex) => {
               if (
                 Phaser.Geom.Intersects.RectangleToRectangle(
@@ -573,8 +594,8 @@ import Layout from '../../layouts/Layout.astro';
                   newBlock.disableInteractive();
                   targetZone.block = newBlock;
                   droppedBlocks.push(newBlock);
-                  if (isMatch(newBlock.texture.key, targetZone.name)) {
+                  
-                  }
+                  // Call isMatch only once
                   const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
                   targetZoneBorders[targetIndex].setTexture(borderCondition);
                 } else {
@@ -590,11 +611,12 @@ import Layout from '../../layouts/Layout.astro';
             if (!droppedOnTargetZone) {
               newBlock.setPosition(block.x, block.y);
             }
-            if (droppedBlocks.length === targetZones.length) 
+
-            {
+            if (droppedBlocks.length === targetZones.length) {
               displayResult(droppedBlocks);
             }
           });
+
         });
         // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {

src/pages/drag/v30.astro

@@ -50,7 +50,10 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
@@ -160,7 +163,7 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
@@ -169,7 +172,7 @@ import Layout from '../../layouts/Layout.astro';
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
         assetsList.element3 = assetsURL + image3   + imageCustomWidth;
@@ -300,7 +303,7 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             // console.log(data)

src/pages/drag/v4.astro

@@ -3,10 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title="Drag Game">
 	<main>
-    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
-      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
-      Worksheet saved successfully
-    </div>  
 		<div>
       <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
         <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
@@ -20,12 +16,12 @@ import Layout from '../../layouts/Layout.astro';
               <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
             </div> 
           </div>
-          <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+          <div class="flex flex-row items-center" style="">
-            <img class="z-10" src="/assets/clip-art.svg" alt="" />
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -34,11 +30,18 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     // function showAnimation() {
     //     const clipArt = document.querySelector('.clip-art');
     //     clipArt.classList.add('show');
@@ -153,16 +156,33 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
         assetsList.element3 = assetsURL + image3   + imageCustomWidth;
@@ -305,7 +325,7 @@ import Layout from '../../layouts/Layout.astro';
 
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             blockMatches = [

src/pages/drag/v40.astro

@@ -50,7 +50,10 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script src="/config.js" is:inline></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
@@ -127,7 +130,7 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+  const data = fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
@@ -136,7 +139,7 @@ import Layout from '../../layouts/Layout.astro';
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        const assetsURL = `${GAME_DU_URL_PREFIX}/assets/`;
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
         assetsList.element3 = assetsURL + image3   + imageCustomWidth;
@@ -289,7 +292,7 @@ import Layout from '../../layouts/Layout.astro';
 
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
             blockMatches = [

src/pages/drawing/drawing_phonics.astro

@@ -23,17 +23,16 @@ import Layout from '../../layouts/Layout.astro';
                             <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                         </div>
                     </div>
-                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="flex flex-row items-center" style="">
-                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
             </div>
-           
             <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
                 <div class="flex flex-row z-50 place-items-end clip-art">
                     <img id="clipArtWithHand" src="" alt="Clip Art" class="">
@@ -42,7 +41,7 @@ import Layout from '../../layouts/Layout.astro';
                         <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
                         
                         <!-- Content -->
-                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
                             <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
                             <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
                             <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
@@ -70,10 +69,13 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const akademyUserId = params.get('studentId');
+    const akademyUserId = params.get('childId');
     const akademyGameName = params.get('gameName');
     const spriteNames = params.get('spriteName');
 
@@ -81,8 +83,9 @@ import Layout from '../../layouts/Layout.astro';
     function displaySprite() {
         if (buddiesList.includes(spriteNames)) {
             const imgElement = document.getElementById('clipArtWithHand');
-            document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
             if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
                 imgElement.src = `/assets/hand-${spriteNames}.svg`;
                 console.log(imgElement.src)
             } else {
@@ -97,7 +100,7 @@ import Layout from '../../layouts/Layout.astro';
 
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`${GAME_DU_URL_PREFIX}/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data
@@ -133,7 +136,9 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        clipArt.classList.add('show');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -165,9 +170,9 @@ import Layout from '../../layouts/Layout.astro';
 
     if(isMobile){
         topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
+        muteIconWidth = 1.65;
-        resetIconWidth = 1.47;
+        resetIconWidth = 1.40;
-        tickIconWidth = 1.24;
+        tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
     }else if(isTab){
@@ -223,17 +228,17 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data = fetch(`${GAME_DU_URL_PREFIX}/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
-    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    assetsList.image = `${GAME_DU_URL_PREFIX}/assets/` + image; // + "?width=450";
     // console.log(assetsList)
     
     const config = {
@@ -287,7 +292,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/drawing/drawing_writo.astro

@@ -23,12 +23,12 @@ import Layout from '../../layouts/Layout.astro';
                             <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                         </div> 
                     </div>
-                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="flex flex-row items-center" style="">
-                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
@@ -42,7 +42,7 @@ import Layout from '../../layouts/Layout.astro';
                         <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
                         
                         <!-- Content -->
-                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
                             <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
                             <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
                             <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
@@ -70,18 +70,21 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
+<script is:inline src="/config.js"></script>
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const akademyUserId = params.get('studentId');
+    const akademyUserId = params.get('childId');
     const akademyGameName = params.get('gameName');
     const spriteNames = params.get('spriteName');
     let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
     function displaySprite() {
         if (buddiesList.includes(spriteNames)) {
             const imgElement = document.getElementById('clipArtWithHand');
-            document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
             if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
                 imgElement.src = `/assets/hand-${spriteNames}.svg`;
                 console.log(imgElement.src)
             } else {
@@ -131,7 +134,9 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        clipArt.classList.add('show');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -163,9 +168,9 @@ import Layout from '../../layouts/Layout.astro';
 
     if(isMobile){
         topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
+        muteIconWidth = 1.65;
-        resetIconWidth = 1.47;
+        resetIconWidth = 1.40;
-        tickIconWidth = 1.24;
+        tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
     }else if(isTab){
@@ -222,17 +227,17 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`${GAME_DU_URL_PREFIX}/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
-    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    assetsList.image = `${GAME_DU_URL_PREFIX}/assets/` + image; // + "?width=450";
     // console.log(assetsList)
     
     const config = {
@@ -286,7 +291,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/drawing/index.astro

@@ -23,12 +23,12 @@ import Layout from '../../layouts/Layout.astro';
                             <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                         </div> 
                     </div>
-                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="flex flex-row items-center" style="">
-                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
@@ -42,7 +42,7 @@ import Layout from '../../layouts/Layout.astro';
                         <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
                         
                         <!-- Content -->
-                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
                             <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
                             <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
                             <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
@@ -70,20 +70,24 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
+<script is:inline src="/config.js"></script>
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const akademyUserId = params.get('studentId');
+    const akademyUserId = params.get('childId');
     const akademyGameName = params.get('gameName');
     const spriteNames = params.get('spriteName');
-    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ];
+    // starClipart
     function displaySprite() {
         if (buddiesList.includes(spriteNames)) {
             const imgElement = document.getElementById('clipArtWithHand');
-            document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
             if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
                 imgElement.src = `/assets/hand-${spriteNames}.svg`;
-                console.log(imgElement.src)
+                // console.log(imgElement.src)
             } else {
                 console.log('Element with ID "clipArtWithHand" not found.');
             }
@@ -146,11 +150,9 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        
-        // Initially set the clip-art to show after 2 seconds with a slide effect
         setTimeout(() => {
-            clipArt.classList.add('show');  // Add the show class to trigger animation
+            clipArt.classList.add('show');
-        }, 2000); // Delay animation by 2 seconds
+        }, 100);
     }
 
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
@@ -245,17 +247,17 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
-    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    assetsList.image = `${GAME_DU_URL_PREFIX}/assets/${image}`; // + "?width=450";
     // console.log(assetsList)
     
     const config = {
@@ -310,7 +312,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/drawing/test.astro

@@ -10,7 +10,9 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
+<script is:inline src="/config.js"></script>
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -95,13 +97,13 @@ import Layout from '../../layouts/Layout.astro';
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
-    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    assetsList.image = `${GAME_DU_URL_PREFIX}/assets/${image}`; // + "?width=450";
     // console.log(assetsList)
     
     const config = {
@@ -152,7 +154,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/drawing/v2.astro

@@ -23,12 +23,12 @@ import Layout from '../../layouts/Layout.astro';
                             <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                         </div> 
                     </div>
-                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="flex flex-row items-center" style="">
-                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
@@ -42,7 +42,7 @@ import Layout from '../../layouts/Layout.astro';
                         <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
                         
                         <!-- Content -->
-                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
                             <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
                             <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
                             <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
@@ -70,18 +70,22 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
+<script is:inline src="/config.js"></script>
+
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const akademyUserId = params.get('studentId');
+    const akademyUserId = params.get('childId');
     const akademyGameName = params.get('gameName');
     const spriteNames = params.get('spriteName');
     let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
     function displaySprite() {
         if (buddiesList.includes(spriteNames)) {
             const imgElement = document.getElementById('clipArtWithHand');
-            document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
             if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
                 imgElement.src = `/assets/hand-${spriteNames}.svg`;
                 console.log(imgElement.src)
             } else {
@@ -131,7 +135,9 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        clipArt.classList.add('show');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -171,9 +177,9 @@ import Layout from '../../layouts/Layout.astro';
 
     if(isMobile){
         topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
+        muteIconWidth = 1.65;
-        resetIconWidth = 1.47;
+        resetIconWidth = 1.40;
-        tickIconWidth = 1.24;
+        tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
     }else if(isTab){
@@ -223,6 +229,7 @@ import Layout from '../../layouts/Layout.astro';
         image2Bottom = 0;
     }
     
+    
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -239,19 +246,19 @@ import Layout from '../../layouts/Layout.astro';
         return result;
     }
 
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         colorList = data.colors;
         defaultColor = colorList[0];
     const {image1, image2} = data;
-    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
+    assetsList.image1 = `${GAME_DU_URL_PREFIX}/assets/${image1}`; // + "?width=450";
-    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
+    assetsList.image2 = `${GAME_DU_URL_PREFIX}/assets/${image2}`; // + "?width=450";
-    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
+    // console.log('Here is image -1', `${GAME_DU_URL_PREFIX}/assets/${image1}`)
     const config = {
         type: Phaser.AUTO,
         width: window.innerWidth,
@@ -306,7 +313,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/drawing/v3.astro

@@ -23,12 +23,12 @@ import Layout from '../../layouts/Layout.astro';
                             <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
                         </div> 
                     </div>
-                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="flex flex-row items-center" style="">
-                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
-                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                         <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
@@ -42,7 +42,7 @@ import Layout from '../../layouts/Layout.astro';
                         <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
                         
                         <!-- Content -->
-                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
                             <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
                             <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
                             <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
@@ -70,18 +70,21 @@ import Layout from '../../layouts/Layout.astro';
 	</main>
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
+<script is:inline src="/config.js"></script>
 <script is:inline>
+    let GAME_DU_URL_PREFIX = window.APP_CONFIG.PUBLIC_GAME_DU_API_URL;
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const akademyUserId = params.get('studentId');
+    const akademyUserId = params.get('childId');
     const akademyGameName = params.get('gameName');
     const spriteNames = params.get('spriteName');
     let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
     function displaySprite() {
         if (buddiesList.includes(spriteNames)) {
             const imgElement = document.getElementById('clipArtWithHand');
-            document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
             if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
                 imgElement.src = `/assets/hand-${spriteNames}.svg`;
                 console.log(imgElement.src)
             } else {
@@ -131,7 +134,9 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        clipArt.classList.add('show');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -163,9 +168,9 @@ import Layout from '../../layouts/Layout.astro';
     
     if(isMobile){
         topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
+        muteIconWidth = 1.65;
-        resetIconWidth = 1.47;
+        resetIconWidth = 1.40;
-        tickIconWidth = 1.24;
+        tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
     }else if(isTab){
@@ -183,17 +188,17 @@ import Layout from '../../layouts/Layout.astro';
         cancelIconWidth = 1.185;
         galleryIconWidth = 1.345;
     }
-
+    
     if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
         noticeHeight = 0;
         downloadWidth = 67;
-        downloadHeight = 160;
+        downloadHeight = 200;
         learningWidth = 200;
         learningHeight = 400
-    } else {
+    }else {
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -222,17 +227,17 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
         if(data.instruction){
           audioFileId = true;
         }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        audioData = `${GAME_DU_URL_PREFIX}/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
-    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    assetsList.image = `${GAME_DU_URL_PREFIX}/assets/${image}`; // + "?width=450";
     // console.log(assetsList)
     
     const config = {
@@ -286,7 +291,7 @@ import Layout from '../../layouts/Layout.astro';
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`${GAME_DU_URL_PREFIX}/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)

src/pages/guided-tracing/0.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                       <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
                   </div>
                   <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                      <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                      <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                       <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                   </div>
               </div>

src/pages/guided-tracing/1.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/2.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/3.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/4.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/5.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/6.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/7.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/8.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/9.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/B.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/C.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/D.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/E.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/F.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/G.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/H.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/I.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/J.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/K.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/L.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/M.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/N.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/O.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/P.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/Q.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/R.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/S.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/T.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/U.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/V.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/W.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/X.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/Y.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/Z.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/a.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/b.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/c.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/d.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/e.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/f.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/g.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/h.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/i.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/j.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/k.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/l.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/m.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/n.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/o.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/p.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/q.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/r.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/s.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/t.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/u.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/v.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/w.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/x.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/y.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/guided-tracing/z.astro

@@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
                   <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
               </div>
               <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="history.length > 1 ? history.back() : location.reload();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
               </div>
           </div>

src/pages/index.astro

@@ -8,7 +8,7 @@ import Footer from '../components/Footer.astro';
 	<MainHeader />
 	<main>
 		<div>
-			<p class="text-center text-white py-96 text-8xl font-bold">Beanstalkedu Games</p>
+			<p class="text-center text-white py-96 text-8xl font-bold">Interakto Games</p>
 		</div>
 	</main>
 	<Footer />