From d2a1edd333759ecb20452fb61985251ffaa0b548 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Fri, 6 Sep 2024 20:05:34 +0530
Subject: [PATCH] add eraser button and add start calculation logic

---
 public/saveGameData.js                 | 19 +++++--
 src/pages/cross/cross_phonics_v1.astro | 34 ++++++++++---
 src/pages/cross/cross_phonics_v2.astro | 34 ++++++++++---
 src/pages/cross/v1.astro               | 41 ++++++++++++----
 src/pages/cross/v2.astro               | 68 ++++++++++++++------------
 src/pages/cross/v3.astro               | 17 +++++--
 src/pages/drag/dragdrop_phonics.astro  |  3 +-
 src/pages/drag/index.astro             |  5 +-
 src/pages/drag/match_phonics.astro     |  3 +-
 src/pages/drag/v2.astro                |  9 ++--
 src/pages/drag/v3.astro                |  3 +-
 src/pages/drag/v4.astro                |  3 +-
 src/pages/drawing/index.astro          |  6 +--
 src/pages/drawing/v2.astro             | 12 ++---
 src/pages/drawing/v3.astro             |  4 +-
 src/pages/tick/tick_phonics_v1.astro   | 33 ++++++++++---
 src/pages/tick/tick_phonics_v2.astro   | 44 ++++++++++-------
 src/pages/tick/tick_phonics_v3.astro   | 14 +++---
 src/pages/tick/v1.astro                | 33 ++++++++++---
 src/pages/tick/v2.astro                | 31 +++++++++---
 src/pages/tick/v3.astro                | 14 +++---
 21 files changed, 291 insertions(+), 139 deletions(-)

diff --git a/public/saveGameData.js b/public/saveGameData.js
index 52938ad..843aa0e 100644
--- a/public/saveGameData.js
+++ b/public/saveGameData.js
@@ -13,19 +13,23 @@ const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
 let gameVersion;
 
+console.log("Here is game name ", gameName)
 
 if(gameType[0] == "guided-tracing"){
     gameVersion = gameType[0].split('?')[0];
     gameId = gameName[4];
+    console.log('Type - 1');
 } else if(gameName.length == 5){
     gameVersion = gameName[3];
     gameId = urlParams.get('id');
+    console.log('Type - 2');
 }else if(gameName.length == 6){
     gameVersion = gameType[0] + '-' + gameName[4];
     gameId = urlParams.get('id');
+    console.log('Type - 3');
 }
 
-
+// console.log(gameType[0])
 
 function submitUserData(drawingZone) {
     const endTime = Date.now();
@@ -74,8 +78,14 @@ function submitUserData(drawingZone) {
             document.body.removeChild(image);
             imageCode = image.src;
         }
-        
-        
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
 
         let userData = {
             'gameName': gameVersion,
@@ -83,7 +93,8 @@ function submitUserData(drawingZone) {
             'screenShot': imageCode,
             'userId' : userId,
             'gameTime' : timeDifferenceInSeconds,
-            'score' : scoreTotal
+            'score' : scoreTotal,
+            'star' : starValue
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index a527977..a3411d0 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/src/pages/cross/cross_phonics_v1.astro
@@ -67,9 +67,9 @@ import Layout from "../../layouts/Layout.astro";
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
-                        <div class="flex flex-col place-items-center justify-center pt-8">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -80,9 +80,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -132,17 +138,27 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('redBorder', 'greenBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
 
          // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,7 +170,6 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
@@ -162,12 +177,15 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Move the userData object creation inside the saveUserData function if needed
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
 
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index 5523d19..9fe56d5 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@@ -86,8 +86,8 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -98,8 +98,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
     
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -152,17 +158,30 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount += 1;
+                // console.log(wrongCount)
             }
         } else {
             element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
@@ -177,7 +196,6 @@ import Layout from "../../layouts/Layout.astro";
         //     a8: document.getElementById('a8').checked,
         //     a9: document.getElementById('a9').checked,
         // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -189,18 +207,20 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
 
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index afc5c0c..0bcd03b 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -67,9 +67,9 @@ import Layout from "../../layouts/Layout.astro";
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
-                        <div class="flex flex-col place-items-center justify-center pt-8">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -80,9 +80,16 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
+
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -127,22 +134,35 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount +=1;
             }
         } else {
             element.classList.remove('redBorder', 'greenBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
-
+ 
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
 
          // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -154,20 +174,21 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         // Move the userData object creation inside the saveUserData function if needed
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 731c40a..132e6c2 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -17,13 +17,8 @@ import Layout from "../../layouts/Layout.astro";
                             <button><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
-                    <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                 </div>
                 <div class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
                     <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between ">
@@ -86,8 +81,8 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -98,9 +93,16 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
-    
+    let wrongCount = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let maxPoint = 9;
+    let starValue; 
+    let totalPoints = 0;
+
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
@@ -134,15 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             if(gameData.label9){
                 document.getElementById("label9").innerHTML = gameData.label9;
             }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 9; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-
+    
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
         const element = document.getElementById(id);
@@ -152,33 +152,35 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount +=1;
             }
         } else {
             element.classList.remove('redBorder', 'greenBorder');
         }
+        // console.log(wrongCount)
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
-
-        // const checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -189,21 +191,24 @@ import Layout from "../../layouts/Layout.astro";
             };
         });
 
-        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
+
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        
+
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
-        // console.log(userData);
 
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -220,7 +225,7 @@ import Layout from "../../layouts/Layout.astro";
                         savedMessageSection.innerHTML = 'Saved Successfully';
                     }
                 } else {
-                    // console.log('Something Wrong', response);
+                    // Handle error
                 }
             })
             .catch(error => {
@@ -228,6 +233,7 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
+
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index f11f658..c60d606 100644
--- a/src/pages/cross/v3.astro
+++ b/src/pages/cross/v3.astro
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let totalPoints = 0;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -120,9 +125,7 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('redBorder', 'greenBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+
 
     function saveUserData() {
         const endTime = Date.now();
@@ -141,19 +144,23 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
+        
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
+
+
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 7826335..5e461ef 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -599,10 +600,10 @@ import Layout from '../../layouts/Layout.astro';
           // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
             // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
+              resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
               // console.log(counter)
               submitButton.setVisible(true);
               retryButton.setVisible(true);
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index bb6cb6e..4a000e5 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -552,10 +553,10 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
-            resultView.setVisible(false);
+            // resultView.setVisible(false);
           }
           if(counter === 4){
+                resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
                 const overlap = document.getElementById("overlap");
                 overlap.style.display = "block";
                 // console.log(counter)
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index 371bf63..4a03334 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -542,9 +543,9 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
               const overlap = document.getElementById("overlap");
               overlap.style.display = "block";
               // console.log(counter)
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 39f5212..542431e 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 4;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -337,9 +338,9 @@ import Layout from '../../layouts/Layout.astro';
                   textSizeScale = 940
                 }
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                 const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -534,16 +535,16 @@ import Layout from '../../layouts/Layout.astro';
         const isMatch = (blockName, targetName) => {
           if(isMatch){
             counter++;
-            // console.log(counter)
+            console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
           // console.log(match)
           if(match !== undefined){
             scoreTotal++;
             // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
               const overlap = document.getElementById("overlap");
               overlap.style.display = "block";
               // console.log(counter)
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 09f8043..f91ff64 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -576,11 +577,11 @@ import Layout from '../../layouts/Layout.astro';
         // console.log(match)
         if(match){
           scoreTotal++;
-          resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
           // console.log(scoreTotal)
         }
         if(counter === 8){
             // console.log(counter)
+            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
             submitButton.setVisible(true);
             retryButton.setVisible(true);
             resultView.setVisible(true);
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index ceeca04..ed8acef 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -63,6 +63,7 @@ import Layout from '../../layouts/Layout.astro';
   let formattedDateTime;
   let shortUniqueID;
   let scoreTotal = 0;
+  let maxScore = 8;
   let resultView;
   let topLogoWidth;
   let muteIconWidth;
@@ -587,11 +588,11 @@ import Layout from '../../layouts/Layout.astro';
           // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
             // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
+              resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
               submitButton.setVisible(true);
               retryButton.setVisible(true);
               resultView.setVisible(true);
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 7b4094f..35bbc31 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -547,7 +547,7 @@ import Layout from '../../layouts/Layout.astro';
                 eraserButton.style.padding = '4px 4px';
             }else{
                 eraserButton.style.padding = '5px 5px';
-                eraserButton.style.marginTop = '15px';
+                eraserButton.style.marginTop = '0px';
                 eraserButton.style.marginBottom = '15px';
             }
             eraserButton.style.fontWeight = 'bold';
@@ -568,8 +568,8 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
-            // colorPicker.appendChild(clearButton);
-            // buttonsContainer.appendChild(eraserButton).setVisible;
+            colorPicker.appendChild(clearButton);
+            buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
             sliderContainer.style.backgroundColor = '#fff';
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index dcf33e9..bf584f6 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -259,14 +259,14 @@ import Layout from '../../layouts/Layout.astro';
             }
             
             if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
+                outlineImage1.setDepth(-5).setScale(0.28);
+                outlineImage2.setDepth(-5).setScale(0.28);
             }else if(isTab){
-                outlineImage1.setDepth(1).setScale(0.34);
-                outlineImage2.setDepth(1).setScale(0.34);
+                outlineImage1.setDepth(-5).setScale(0.34);
+                outlineImage2.setDepth(-5).setScale(0.34);
             } else{
-                outlineImage1.setDepth(1).setScale(0.60);
-                outlineImage2.setDepth(1).setScale(0.60);   
+                outlineImage1.setDepth(-5).setScale(0.60);
+                outlineImage2.setDepth(-5).setScale(0.60);   
             }
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 397a6d6..fe88971 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -153,7 +153,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){
@@ -161,7 +161,7 @@ import Layout from '../../layouts/Layout.astro';
                 } else{
                     wrapWidth = 200;
                 }
-                const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 27d12b1..3738a11 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/src/pages/tick/tick_phonics_v1.astro
@@ -79,9 +79,9 @@ import Layout from "../../layouts/Layout.astro";
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
-                        <div class="flex flex-col place-items-center justify-center pt-8">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -92,9 +92,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let wrongCount = 0;
+    let starValue;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -144,17 +150,26 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', 'redBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
 
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
 
          // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -166,7 +181,6 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
                 totalPoints += 1;
@@ -174,12 +188,15 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Move the userData object creation inside the saveUserData function if needed
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index c1037f0..6be104d 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/src/pages/tick/tick_phonics_v2.astro
@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -116,8 +116,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
+    let totalPoints = 0;
     
     fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -176,27 +182,24 @@ import Layout from "../../layouts/Layout.astro";
         }
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
-
     function saveUserData(){
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
 
-        // const checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -208,18 +211,21 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
                 totalPoints += 1;
             }
         });
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
+
         };
         // console.log(userData);
 
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index cf48af0..d16b0ef 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -108,9 +113,6 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', 'redBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
 
     function saveUserData() {
         const endTime = Date.now();
@@ -130,19 +132,19 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
                 totalPoints += 1;
             }
         });
-
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index 7f67443..72d0fab 100644
--- a/src/pages/tick/v1.astro
+++ b/src/pages/tick/v1.astro
@@ -76,7 +76,8 @@ import Layout from "../../layouts/Layout.astro";
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                         </div>
-                        <div class="flex flex-col place-items-center justify-center pt-8">
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
@@ -88,9 +89,15 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -135,22 +142,33 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('greenBorder');
             } else {
                 element.classList.add('redBorder');
+                wrongCount += 1;
             }
         } else {
             element.classList.remove('greenBorder', 'redBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
     
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 2) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
         
          // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -162,19 +180,20 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
                 totalPoints += 1;
             }
         });
         // Move the userData object creation inside the saveUserData function if needed
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index ce1e06a..6bc8ff7 100644
--- a/src/pages/tick/v2.astro
+++ b/src/pages/tick/v2.astro
@@ -104,8 +104,8 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -116,8 +116,13 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
+    let wrongCount = 0;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
     
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -170,17 +175,27 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('greenBorder');
             } else {
                 element.classList.add('redBorder');
+                wrongCount += 1;
             }
         } else {
             element.classList.remove('greenBorder', 'redBorder');
         }
     }
 
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
-
     function saveUserData() {
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 3) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
@@ -195,7 +210,6 @@ import Layout from "../../layouts/Layout.astro";
         //     a8: document.getElementById('a8').checked,
         //     a9: document.getElementById('a9').checked,
         // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -213,12 +227,15 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
+
+        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 508518b..c05f512 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -68,9 +68,14 @@ import Layout from "../../layouts/Layout.astro";
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userid');
+    const userId = params.get('userId');
     let startTime = Date.now();
     let gameData = null;
+    let starValue;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -120,9 +125,6 @@ import Layout from "../../layouts/Layout.astro";
             element.classList.remove('greenBorder', 'redBorder');
         }
     }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
 
     function saveUserData() {
         const endTime = Date.now();
@@ -142,19 +144,19 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
             if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
                 totalPoints += 1;
             }
         });
-
+        totalPoints === 1 ? starValue = 5 : starValue = 3;
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
             'userId': userId,
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
+            'star': starValue
         };
         // console.log(userData);