c

public/saveGameData.js

@@ -96,7 +96,7 @@ function submitUserData(drawingZone) {
         })
         .then(response => {
             if(response.ok){
-            console.log('Data Saved', response)
+            // console.log('Data Saved', response)
             } else{
             // console.log('Something Wrong', response)
             }

src/pages/cross/cross_phonics_v1.astro

@@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',

src/pages/cross/cross_phonics_v2.astro

@@ -202,7 +202,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',

src/pages/cross/v1.astro

@@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {

src/pages/cross/v2.astro

@@ -203,7 +203,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',

src/pages/cross/v3.astro

@@ -155,7 +155,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {

src/pages/drag/dragdrop_phonics.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,12 +71,28 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-     topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
-      tickIconWidth = 1.28;
-      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +102,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -593,7 +605,7 @@ import Layout from '../../layouts/Layout.astro';
           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)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/index.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,11 +71,25 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
 
   if(isMobile){
-      topLogoWidth = 4.5;
+        topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
+        muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
+        resetIconWidth = 1.47;
-      tickIconWidth = 1.28;
+        tickIconWidth = 1.24;
-      cancelIconWidth = 1.12;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+  if(isMobile){
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -82,11 +97,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -542,10 +552,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", 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);
           }

src/pages/drag/match_phonics.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-     topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
-      tickIconWidth = 1.28;
-      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -530,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", 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){

src/pages/drag/tmp.astro

@@ -451,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
           targetZone.block = null;
         }),
         blocks.forEach((block, index) => {
-          console.log(index+1)
+          // console.log(index+1)
           const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
           // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
           newBlock.on("drag", (pointer, dragX, dragY) => {
@@ -522,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
           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)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/tmp2.astro

@@ -545,11 +545,11 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // 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)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/v2.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-     topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
-      tickIconWidth = 1.28;
-      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -530,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", 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){

src/pages/drag/v20.astro

@@ -492,10 +492,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", 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){

src/pages/drag/v3.astro

@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -72,12 +73,28 @@ import Layout from '../../layouts/Layout.astro';
   let blockMatches;
   let retryButtonWidth;
   let leftTargetZoneW;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-     topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
-      tickIconWidth = 1.28;
-      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -87,11 +104,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth * 0.9 - 30;
       rightTargetZoneW = window.innerWidth / 6;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -326,7 +338,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -566,7 +578,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // 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);

src/pages/drag/v30.astro

@@ -303,7 +303,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -524,7 +524,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // 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);

src/pages/drag/v4.astro

@@ -74,12 +74,28 @@ import Layout from '../../layouts/Layout.astro';
   let leftTargetZoneW;
   let rightTargetZoneW;
   let retryButtonWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-     topLogoWidth = 4.5;
-      muteIconWidth = 1.8;
-      resetIconWidth = 1.5;
-      tickIconWidth = 1.28;
-      cancelIconWidth = 1.12;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -89,11 +105,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -584,7 +595,7 @@ import Layout from '../../layouts/Layout.astro';
           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)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drag/v40.astro

@@ -540,7 +540,7 @@ import Layout from '../../layouts/Layout.astro';
           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)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drawing/drawing_phonics.astro

@@ -31,12 +31,27 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let scoreTotal = 0;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -46,11 +61,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;

src/pages/drawing/drawing_writo.astro

@@ -37,6 +37,21 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -46,11 +61,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;

src/pages/drawing/index.astro

@@ -31,13 +31,29 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let scoreTotal = 0;
-
+    let noticeWidth;
+    let noticeHeight;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -46,12 +62,7 @@ import Layout from '../../layouts/Layout.astro';
         downloadHeight = 200;
         learningWidth = 200;
         learningHeight = 400
-    } else {
+    }else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;

src/pages/drawing/v2.astro

@@ -31,9 +31,14 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
     let defaultColor;
     let scoreTotal = 0;
-
+    let image1Width;
-    let currenturl = window.location.href.split('/');
+    let image1Height;
-    console.log(currenturl);
+    let image2Width;
+    let image2Height;
+    let image2Right;
+    let image2Bottom;
+    let noticeWidth;
+    let noticeHeight;
 
     if(isMobile){
         topLogoWidth = 4.5;
@@ -41,6 +46,20 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -56,11 +75,6 @@ import Layout from '../../layouts/Layout.astro';
         image2Height = 1.7;
         image2Bottom = 110;
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;

src/pages/drawing/v3.astro

@@ -31,12 +31,28 @@ import Layout from '../../layouts/Layout.astro';
     let resetIconWidth;
     let tickIconWidth;
     let cancelIconWidth; 
+    
     if(isMobile){
-       topLogoWidth = 4.5;
+        topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -46,11 +62,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;

src/pages/tick/tick_phonics_v1.astro

@@ -100,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -181,7 +181,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
@@ -193,7 +193,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/tick_phonics_v2.astro

@@ -221,7 +221,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
@@ -234,7 +234,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/tick_phonics_v3.astro

@@ -76,7 +76,7 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -144,7 +144,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
@@ -156,7 +156,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/v1.astro

@@ -96,7 +96,7 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -176,7 +176,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
@@ -188,7 +188,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/v2.astro

@@ -220,7 +220,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
@@ -232,7 +232,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {

src/pages/tick/v3.astro

@@ -76,7 +76,7 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -156,7 +156,7 @@ import Layout from "../../layouts/Layout.astro";
             'gameTime': timeDifferenceInSeconds,
             'score': totalPoints,
         };
-        console.log(userData);
+        // console.log(userData);
 
         fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
@@ -169,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {