public/saveGameAI.js

@@ -312,26 +312,24 @@ function submitUserData(drawingZone) {
             setTimeout(() => {
                 if (data && data.message === "Game data saved successfully") {
                     starValue = data.data.score;
+                    let feedbackMessage = '';
+                    if (starValue >= 1 && starValue <= 3) {
+                        feedbackMessage = "You're making progress! Let's keep going!";
+                    } else if (starValue >= 4 && starValue <= 6) {
+                        feedbackMessage = "Nice work! You're improving every day!";
+                    } else if (starValue >= 7 && starValue <= 8) {
+                        feedbackMessage = "Amazing work! Keep it up!";
+                    } else if (starValue >= 9 && starValue <= 10) {
+                        feedbackMessage = "Outstanding! You're a true superstar!";
+                    } else {
+                        feedbackMessage = "Invalid star value.";
+                    }
                     loadingMainContainer.style.display = 'none';
                     loadingDiv.style.display = 'none';
                     starContainer.style.display = 'flex';
                     starContainer.style.flexDirection = 'row';
-                    document.getElementById('countStar').innerHTML = starValue;
+                    document.getElementById('get-star-value').innerHTML = starValue;
-                    for (let i = 0; i < starValue; i++) {
+                    document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                        const starDiv = document.createElement('div');
-                        starDiv.innerHTML = starSVG;
-                        starDiv.classList.add('star');
-                        starContainer.appendChild(starDiv);
-                        setTimeout(() => {
-                            starDiv.style.opacity = '1'; 
-                            starDiv.style.animationDelay = `${i * 0.5}s`;
-                        }, i * 500);
-                    }
-                    for (let i = 0; i < maxStarValue - starValue; i++) {
-                        const starDiv = document.createElement('div');
-                        starDiv.innerHTML = blankStar;
-                        starContainer.appendChild(starDiv);
-                    }
                     scoreBoard.style.display = 'flex';
                     if (scoreBoard.style.display === 'flex') {
                         const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');

src/pages/drawing/drawing_phonics.astro

@@ -18,11 +18,14 @@ import Layout from '../../layouts/Layout.astro';
             <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
-                        <div id="star-container"></div>
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <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;">
                         <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                        <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>
+                        <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>
                     </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>
@@ -94,7 +97,7 @@ import Layout from '../../layouts/Layout.astro';
 
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data

src/pages/drawing/drawing_writo.astro

@@ -18,11 +18,14 @@ import Layout from '../../layouts/Layout.astro';
             <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
-                        <div id="star-container"></div>
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <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;">
                         <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                        <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>
+                        <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>
                     </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>
@@ -93,7 +96,7 @@ import Layout from '../../layouts/Layout.astro';
 
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data

src/pages/drawing/index.astro

@@ -18,11 +18,14 @@ import Layout from '../../layouts/Layout.astro';
             <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
-                        <div id="star-container"></div>
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <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;">
                         <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                        <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>
+                        <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>
                     </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>
@@ -108,7 +111,7 @@ import Layout from '../../layouts/Layout.astro';
     // ];
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data

src/pages/drawing/v2.astro

@@ -18,11 +18,14 @@ import Layout from '../../layouts/Layout.astro';
             <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
-                        <div id="star-container"></div>
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <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;">
                         <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                        <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>
+                        <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>
                     </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>
@@ -93,7 +96,7 @@ import Layout from '../../layouts/Layout.astro';
 
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data

src/pages/drawing/v3.astro

@@ -18,11 +18,14 @@ import Layout from '../../layouts/Layout.astro';
             <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
                 <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
                     <div class="flex flex-row space-x-4 items-center justify-center">
-                        <div id="star-container"></div>
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <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;">
                         <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-                        <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>
+                        <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>
                     </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>
@@ -93,7 +96,7 @@ import Layout from '../../layouts/Layout.astro';
 
     let galleryData = [];  // Store gallery data from the API
     let currentSlide = 0;  // Initialize the current slide index
-    fetch(`http://localhost:5175/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
         .then(res => res.json())
         .then(data => {
             galleryData = data; // Store the fetched gallery data