Merge pull request 's1' (#29) from newb into master

Reviewed-on: #29

src/pages/cross/cross_phonics_v1.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -90,8 +90,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -99,30 +99,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div> 
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -143,10 +122,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -336,7 +311,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/cross_phonics_v2.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -108,39 +108,18 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
             <div class="clip-art-container absolute bottom-0 right-0 hidden">
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
-        </div> 
+        </div>     
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>      
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -160,10 +139,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -370,7 +345,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/v1.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -90,8 +90,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -99,30 +99,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>     
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>  
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -144,10 +123,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -337,7 +312,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
         // console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/v2.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                 </div>
@@ -103,8 +103,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -112,30 +112,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>  
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -156,10 +135,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -356,7 +331,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/cross/v3.astro

@@ -12,10 +12,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -78,8 +78,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -87,30 +87,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>  
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-        function retryGame(){
-            window.location.reload();
-        }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -130,10 +109,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
@@ -307,7 +282,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
         // console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/drag/dragdrop_phonics.astro

@@ -17,7 +17,7 @@ import Layout from '../../layouts/Layout.astro';
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -56,9 +56,6 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -145,10 +142,6 @@ import Layout from '../../layouts/Layout.astro';
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=80";
@@ -246,9 +239,6 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -420,10 +410,10 @@ import Layout from '../../layouts/Layout.astro';
         // window.load
 
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
@@ -442,19 +432,7 @@ import Layout from '../../layouts/Layout.astro';
           showAnimation();
         })
         let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
-        if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
 
-            })
-          }
 
         if(isMobile){
           blocks1Width1 = 180;

src/pages/drag/index.astro

@@ -22,7 +22,7 @@ const numberOfTimes = starNumberOfTime;
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -59,9 +59,6 @@ const numberOfTimes = starNumberOfTime;
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
 
   if(isMobile){
       topLogoWidth = 4.5;
@@ -171,11 +168,6 @@ const numberOfTimes = starNumberOfTime;
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
-        // console.log(audioData)
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -272,9 +264,6 @@ const numberOfTimes = starNumberOfTime;
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -408,11 +397,18 @@ const numberOfTimes = starNumberOfTime;
         graphics.strokePath();
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
 
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
+        
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -421,20 +417,6 @@ const numberOfTimes = starNumberOfTime;
         // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
-          if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
-          
 
         const blocks = [
           {

src/pages/drag/match_phonics.astro

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -55,9 +55,6 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -150,10 +147,6 @@ import Layout from '../../layouts/Layout.astro';
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -250,9 +243,6 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -382,10 +372,10 @@ import Layout from '../../layouts/Layout.astro';
         //   }); 
         // };
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -395,19 +385,6 @@ import Layout from '../../layouts/Layout.astro';
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
 
-        if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
 
         const graphics = this.add.graphics();
         const x = 0; const y = 54;

src/pages/drag/v2.astro

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -56,10 +56,6 @@ import Layout from '../../layouts/Layout.astro';
   let tickIconWidth;
   let cancelIconWidth;
 
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
-
   if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
@@ -151,11 +147,6 @@ import Layout from '../../layouts/Layout.astro';
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -252,9 +243,6 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -384,10 +372,10 @@ import Layout from '../../layouts/Layout.astro';
         //   }); 
         // };
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -396,19 +384,7 @@ import Layout from '../../layouts/Layout.astro';
         // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
-        if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
 
-            })
-          }
 
         const graphics = this.add.graphics();
         const x = 0; const y = 54;

src/pages/drag/v3.astro

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -59,9 +59,6 @@ import Layout from '../../layouts/Layout.astro';
   let blockMatches;
   let retryButtonWidth;
   let leftTargetZoneW;
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -182,10 +179,6 @@ import Layout from '../../layouts/Layout.astro';
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -281,9 +274,6 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -432,25 +422,12 @@ import Layout from '../../layouts/Layout.astro';
         graphics.strokePath();
 
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-        if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',

src/pages/drag/v4.astro

@@ -17,7 +17,7 @@ import Layout from '../../layouts/Layout.astro';
             <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
             <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -59,9 +59,6 @@ import Layout from '../../layouts/Layout.astro';
   let leftTargetZoneW;
   let rightTargetZoneW;
   let retryButtonWidth;
-  let audioData;
-  let audioFileId = false;
-  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -148,10 +145,6 @@ import Layout from '../../layouts/Layout.astro';
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
         const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
@@ -245,9 +238,6 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         // this.load.image("tick", '/assets/tick.png');
@@ -259,6 +249,8 @@ import Layout from '../../layouts/Layout.astro';
 
         // this.load.image("retryIcon", "/assets/svg/retry.svg")
         this.load.image("border", '/assets/squar.png');
+
+
           this.load.spritesheet("blocks1", assetsList.element5,{
           frameWidth: 100,
           frameHeight: 100,
@@ -413,23 +405,10 @@ import Layout from '../../layouts/Layout.astro';
         graphics.strokePath();
         
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
-        if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            soundButton.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',

src/pages/drawing/drawing_phonics.astro

@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </div>
             </div>
             <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
                         <p class="text-[19px] font-[700]">Attempt 2</p>
                         <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -49,6 +49,11 @@ import Layout from '../../layouts/Layout.astro';
 
                         <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
                         <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -59,42 +64,6 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
-    const jsonData = [
-        {
-            "src": "/assets/back.jpeg"
-        },
-        {
-            "src": "/assets/background.jpg"
-        },
-        {
-            "src": "/assets/backgroundImage.png"
-        },
-        {
-            "src": "/assets/beanieImage.png"
-        }
-    ];
-    let currentSlide = 0;
-    function updateSlide(){
-        const slide = jsonData[currentSlide];
-        document.getElementById('slideImage').src = slide.src;
-    }
-    document.getElementById('nextButton').addEventListener('click', () => {
-        currentSlide = (currentSlide + 1) % jsonData.length;
-        console.log(currentSlide)
-        updateSlide();
-    })
-    document.getElementById('prevButton').addEventListener('click', () => {
-        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
-        updateSlide();
-    })
-    updateSlide();
-    let parentMainContainer = document.getElementById('parentMainContainer');
-    let gallerySliderId = document.getElementById('gallerySliderId');
-    function closeGallery(){
-        parentMainContainer.classList.add('hidden');
-        gallerySliderId.classList.add('hidden');
-        
-    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -121,33 +90,24 @@ import Layout from '../../layouts/Layout.astro';
     let scoreTotal = 0;
     let maxScore;
     let erase;
-    let audioData;
-    let audioFileId = false;
-    let isPlaying = false;
-    let galleryIconWidth;
-    let galleryButton;
-
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
-        galleryIconWidth = 2;
     }else if(isTab){
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
-        galleryIconWidth = 1.81;
     }else{
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
         tickIconWidth = 1.222;
         cancelIconWidth = 1.185;
-        galleryIconWidth = 1.345;
     }
     if(isMobile){
         submitWidth = 250;
@@ -192,10 +152,6 @@ import Layout from '../../layouts/Layout.astro';
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -235,9 +191,6 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -247,7 +200,6 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
-        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -290,25 +242,11 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
 
             retryButton.setInteractive().on('pointerdown', () => {
                 graphics.clear();
             });
-            if(audioFileId === true){
-                let instructionAudio = this.sound.add('instructAudio')
-                muteIcon.setInteractive().on('pointerdown', () => {
-                if(isPlaying === false){
-                    instructionAudio.play()
-                    isPlaying = true
-                } else if(isPlaying === true) {
-                    instructionAudio.stop();
-                    isPlaying = false
-                }
-
-                })
-            }
             submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
@@ -326,10 +264,6 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
-            galleryButton.setInteractive().on('pointerdown', () => {
-                parentMainContainer.classList.remove('hidden');
-                gallerySliderId.classList.remove('hidden');
-            });
 
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -368,16 +302,7 @@ import Layout from '../../layouts/Layout.astro';
             }
             if(isMobile){
                 colorContainer.style.display = 'none';
-                colorContainer.style.flexDirection = 'row'; 
             }
-            colorContainer.style.backgroundColor = '#FFFFFF';
-            colorContainer.style.padding = '30px 20px';
-            colorContainer.style.borderRadius = '80px';
-            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
-            colorContainer.style.left = '0px';
-            colorContainer.style.top = '50%';
-            colorContainer.style.transform = 'translate(0, -50%)';
-            colorContainer.style.border = '1px solid #F9F9F9'; 
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -393,14 +318,6 @@ import Layout from '../../layouts/Layout.astro';
 
 
             // Create the color picker
-            let colorAndClearContainer = document.createElement('div');
-            colorAndClearContainer.style.display = 'flex';
-            colorAndClearContainer.flexDirection = 'row';
-            colorAndClearContainer.style.alignItems = 'center';
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
-
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
@@ -427,10 +344,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-
+            colorContainer.appendChild(colorPicker);
-            colorAndClearContainer.appendChild(colorPicker)
-            colorAndClearContainer.appendChild(clearButton)
-            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -658,19 +572,20 @@ import Layout from '../../layouts/Layout.astro';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
-
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
             // clearButton.style.border = '3px solid blue';
             // clearButton.style.color = 'blue';
             // clearButton.style.width = 'fit-content';
             // clearButton.style.marginRight = '10px';
-            // if(isMobile){
+            if(isMobile){
-            //     clearButton.style.padding = '2px 8px';
+                clearButton.style.padding = '2px 8px';
-            //     clearButton.style.display = 'none';
+                clearButton.style.display = 'none';
-            //     buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.top = '9.5%';
-            //     buttonsContainer.style.marginLeft = '30px';
+                buttonsContainer.style.marginLeft = '30px';
-            // } else {
+            } else {
-            //     clearButton.style.padding = '5px 10px';
+                clearButton.style.padding = '5px 10px';
-            // }        
+            }        
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -683,7 +598,7 @@ import Layout from '../../layouts/Layout.astro';
                 }else{
                     clearButton.style.display = 'block';
                 }
-            }) 
+            })
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -719,7 +634,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            // buttonsContainer.appendChild(clearButton);
+            buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
@@ -813,17 +728,10 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
-        muteIcon.setVisible(false);
-        retryButton.setVisible(false);
-        galleryButton.setVisible(false);
-
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
-            muteIcon.setVisible(true);
-            retryButton.setVisible(true);
-            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/drawing/drawing_writo.astro

@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </div>
             </div>
             <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
                         <p class="text-[19px] font-[700]">Attempt 2</p>
                         <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -49,6 +49,11 @@ import Layout from '../../layouts/Layout.astro';
 
                         <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
                         <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -59,42 +64,6 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
-    const jsonData = [
-        {
-            "src": "/assets/back.jpeg"
-        },
-        {
-            "src": "/assets/background.jpg"
-        },
-        {
-            "src": "/assets/backgroundImage.png"
-        },
-        {
-            "src": "/assets/beanieImage.png"
-        }
-    ];
-    let currentSlide = 0;
-    function updateSlide(){
-        const slide = jsonData[currentSlide];
-        document.getElementById('slideImage').src = slide.src;
-    }
-    document.getElementById('nextButton').addEventListener('click', () => {
-        currentSlide = (currentSlide + 1) % jsonData.length;
-        console.log(currentSlide)
-        updateSlide();
-    })
-    document.getElementById('prevButton').addEventListener('click', () => {
-        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
-        updateSlide();
-    }) 
-    updateSlide();
-    let parentMainContainer = document.getElementById('parentMainContainer');
-    let gallerySliderId = document.getElementById('gallerySliderId');
-    function closeGallery(){
-        parentMainContainer.classList.add('hidden');
-        gallerySliderId.classList.add('hidden');
-        
-    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -121,33 +90,24 @@ import Layout from '../../layouts/Layout.astro';
     let scoreTotal = 0;
     let maxScore;
     let erase;
-    let audioData;
-    let audioFileId = false;
-    let isPlaying = false;
-    let galleryIconWidth;
-    let galleryButton;
-
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
-        galleryIconWidth = 2;
     }else if(isTab){
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
-        galleryIconWidth = 1.81;
     }else{
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
         tickIconWidth = 1.222;
         cancelIconWidth = 1.185;
-        galleryIconWidth = 1.345;
     }
     
     if(isMobile){
@@ -193,10 +153,6 @@ import Layout from '../../layouts/Layout.astro';
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -236,9 +192,6 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -248,7 +201,6 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
-        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -293,21 +245,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
-            if(audioFileId === true){
-                let instructionAudio = this.sound.add('instructAudio')
-                muteIcon.setInteractive().on('pointerdown', () => {
-                if(isPlaying === false){
-                    instructionAudio.play()
-                    isPlaying = true
-                } else if(isPlaying === true) {
-                    instructionAudio.stop();
-                    isPlaying = false
-                }
-
-                })
-            }
 
             retryButton.setInteractive().on('pointerdown', () => {
                 graphics.clear();
@@ -331,11 +269,6 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
 
-            galleryButton.setInteractive().on('pointerdown', () => {
-                parentMainContainer.classList.remove('hidden');
-                gallerySliderId.classList.remove('hidden');
-            });
-
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -381,16 +314,7 @@ import Layout from '../../layouts/Layout.astro';
             }
             if(isMobile){
                 colorContainer.style.display = 'none';
-                colorContainer.style.flexDirection = 'row';
             }
-            colorContainer.style.backgroundColor = '#FFFFFF';
-            colorContainer.style.padding = '30px 20px';
-            colorContainer.style.borderRadius = '80px';
-            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
-            colorContainer.style.left = '0px';
-            colorContainer.style.top = '50%';
-            colorContainer.style.transform = 'translate(0, -50%)';
-            colorContainer.style.border = '1px solid #F9F9F9'; 
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -404,14 +328,6 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
 
-            let colorAndClearContainer = document.createElement('div');
-            colorAndClearContainer.style.display = 'flex';
-            colorAndClearContainer.flexDirection = 'row';
-            colorAndClearContainer.style.alignItems = 'center';
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
-
 
             // Create the color picker
             const colorPicker = document.createElement('input');
@@ -440,9 +356,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorAndClearContainer.appendChild(colorPicker)
+            colorContainer.appendChild(colorPicker);
-            colorAndClearContainer.appendChild(clearButton)
-            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -668,7 +582,22 @@ import Layout from '../../layouts/Layout.astro';
             } 
             buttonsContainer.style.left = '20px';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
-            document.body.appendChild(buttonsContainer);       
+            document.body.appendChild(buttonsContainer);
+            // Create the Clear button
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            // clearButton.style.border = '3px solid blue';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                clearButton.style.display = 'none';
+                buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.marginLeft = '30px';
+            } else {
+                clearButton.style.padding = '5px 10px';
+            }        
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -717,7 +646,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            // buttonsContainer.appendChild(clearButton);
+            buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
@@ -811,18 +740,10 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
-        muteIcon.setVisible(false);
-        retryButton.setVisible(false);
-        galleryButton.setVisible(false);
-
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
-            muteIcon.setVisible(true);
-            retryButton.setVisible(true);
-            galleryButton.setVisible(true);
-
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/drawing/index.astro

@@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
                     </div>
                     <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                         <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                        <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                     </div>
                 </div>
             </div>
@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </div>
             </div>
             <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
                         <p class="text-[19px] font-[700]">Attempt 2</p>
                         <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -49,6 +49,11 @@ import Layout from '../../layouts/Layout.astro';
 
                         <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
                         <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -56,35 +61,38 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
-    <!-- http://localhost:2022/drawing/?id=525&userId=6746c2e9cd3b551fae55cb67&gameName=birdWS1 -->
+    
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
-    //       const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
-    // const buddiesName = findBuddies.metadata.sprite 
-
-    const retrievedData = localStorage.getItem('akademyPlans')
-const parsedObject = JSON.parse(retrievedData);
-
-    console.log('buddName', window.location.href);
     const jsonData = [
         {
-            "src": "/assets/back.jpeg"
+            "src": "/assets/back.jpeg",
+            "title": "Image Title 1",
+            "description": "Description for image 1 goes here."
         },
         {
-            "src": "/assets/background.jpg"
+            "src": "/assets/background.jpg",
+            "title": "Image Title 2",
+            "description": "Description for image 2 goes here."
         },
         {
-            "src": "/assets/backgroundImage.png"
+            "src": "/assets/backgroundImage.png",
+            "title": "Image Title 3",
+            "description": "Description for image 3 goes here."
         },
         {
-            "src": "/assets/beanieImage.png"
+            "src": "/assets/beanieImage.png",
+            "title": "Image Title 4",
+            "description": "Description for image 4 goes here."
         }
     ];
     let currentSlide = 0;
     function updateSlide(){
         const slide = jsonData[currentSlide];
         document.getElementById('slideImage').src = slide.src;
+        document.getElementById('imageTitle').textContent = slide.title;
+        document.getElementById('imageDescription').textContent = slide.description;
     }
     document.getElementById('nextButton').addEventListener('click', () => {
         currentSlide = (currentSlide + 1) % jsonData.length;
@@ -94,7 +102,7 @@ const parsedObject = JSON.parse(retrievedData);
     document.getElementById('prevButton').addEventListener('click', () => {
         currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
         updateSlide();
-    }) 
+    })
     updateSlide();
     let parentMainContainer = document.getElementById('parentMainContainer');
     let gallerySliderId = document.getElementById('gallerySliderId');
@@ -135,9 +143,6 @@ const parsedObject = JSON.parse(retrievedData);
     let retryButton;
     let maxScore;
     let erase;
-    let audioData;
-    let audioFileId = false;
-    let isPlaying = false;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.65;
@@ -204,10 +209,6 @@ const parsedObject = JSON.parse(retrievedData);
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -248,9 +249,6 @@ const parsedObject = JSON.parse(retrievedData);
     let colorList;
 
     function preload() {
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -300,19 +298,6 @@ const parsedObject = JSON.parse(retrievedData);
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
             galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
-            if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            muteIcon.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
 
             retryButton.setInteractive().on('pointerdown', () => {
                 // window.location.reload();

src/pages/drawing/v2.astro

@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </div>
             </div>
             <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
                         <p class="text-[19px] font-[700]">Attempt 2</p>
                         <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -49,6 +49,11 @@ import Layout from '../../layouts/Layout.astro';
 
                         <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
                         <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -59,42 +64,6 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
-    const jsonData = [
-        {
-            "src": "/assets/back.jpeg"
-        },
-        {
-            "src": "/assets/background.jpg"
-        },
-        {
-            "src": "/assets/backgroundImage.png"
-        },
-        {
-            "src": "/assets/beanieImage.png"
-        }
-    ];
-    let currentSlide = 0;
-    function updateSlide(){
-        const slide = jsonData[currentSlide];
-        document.getElementById('slideImage').src = slide.src;
-    }
-    document.getElementById('nextButton').addEventListener('click', () => {
-        currentSlide = (currentSlide + 1) % jsonData.length;
-        console.log(currentSlide)
-        updateSlide();
-    })
-    document.getElementById('prevButton').addEventListener('click', () => {
-        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
-        updateSlide();
-    })
-    updateSlide();
-    let parentMainContainer = document.getElementById('parentMainContainer');
-    let gallerySliderId = document.getElementById('gallerySliderId');
-    function closeGallery(){
-        parentMainContainer.classList.add('hidden');
-        gallerySliderId.classList.add('hidden');
-        
-    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -129,33 +98,24 @@ import Layout from '../../layouts/Layout.astro';
     let noticeHeight;
     let maxScore;
     let erase;
-    let audioData;
-    let audioFileId = false;
-    let isPlaying = false;
-    let galleryIconWidth;
-    let galleryButton;
-
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
-        galleryIconWidth = 2;
     }else if(isTab){
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
-        galleryIconWidth = 1.81;
     }else{
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
         tickIconWidth = 1.222;
         cancelIconWidth = 1.185;
-        galleryIconWidth = 1.345;
     }
     if(isMobile){
         submitWidth = 250;
@@ -210,10 +170,6 @@ import Layout from '../../layouts/Layout.astro';
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         colorList = data.colors;
         defaultColor = colorList[0];
     const {image1, image2} = data;
@@ -254,9 +210,6 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image('image1', assetsList.image1);
         this.load.image('image2', assetsList.image2);
         this.load.image('topLogo', '/assets/top_logo.svg');
@@ -268,7 +221,6 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('waxTexture', '/assets/texture.png');
         this.load.image('colorButton', '/assets/color_button.png');
-        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -344,21 +296,7 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
-            if(audioFileId === true){
-                let instructionAudio = this.sound.add('instructAudio')
-                muteIcon.setInteractive().on('pointerdown', () => {
-                    if(isPlaying === false){
-                        instructionAudio.play()
-                        isPlaying = true
-                    } else if(isPlaying === true) {
-                        instructionAudio.stop();
-                        isPlaying = false
-                    }
-
-                })
-            }
             retryButton.setInteractive().on('pointerdown', ()=>{
                 graphics.clear();
             })
@@ -379,11 +317,14 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
-            galleryButton.setInteractive().on('pointerdown', () => {
-                parentMainContainer.classList.remove('hidden');
-                gallerySliderId.classList.remove('hidden');
-            });
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            if(!isMobile){
+                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+            } else {
+                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
+            }
             
             if(isMobile){
                 outlineImage1.setDepth(-5).setScale(0.28);
@@ -400,41 +341,31 @@ import Layout from '../../layouts/Layout.astro';
             maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
             const mask = maskGraphics.createGeometryMask();
 
+
             graphics = this.add.graphics();
             graphics.setMask(mask);
             const colorContainer = document.createElement('div');
-            colorContainer.style.zIndex = '1';
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
+            if(isMobile){
+                colorContainer.style.marginTop = '13%';
+            }
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '0';
+            colorContainer.style.marginBottom = '15px';
             if(!isMobile){
-                colorContainer.style.top = '10%';
+                colorContainer.style.top = '25%';
                 colorContainer.style.flexDirection = 'column'; 
             }
+
             if(isMobile){
                 colorContainer.style.display = 'none';
-                colorContainer.style.flexDirection = 'row'; 
-                
             }
-            colorContainer.style.backgroundColor = '#FFFFFF';
-            colorContainer.style.padding = '30px 20px';
-            colorContainer.style.borderRadius = '80px';
-            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
-            colorContainer.style.left = '0px';
-            colorContainer.style.top = '50%';
-            colorContainer.style.transform = 'translate(0, -50%)';
-            colorContainer.style.border = '1px solid #F9F9F9'; 
 
-            let colorEraserCont = document.createElement('div');
-            colorEraserCont.style.display = 'flex';
-            colorEraserCont.style.flexDirection = 'row';
-
-            colorContainer.appendChild(colorEraserCont);
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            !isMobile ? colorViewButton.setVisible(false) : '';
+            if(!isMobile){
-            // if(!isMobile){colorViewButton.setVisible(false);}
+                colorViewButton.setVisible(false);
+            }
             
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
@@ -451,47 +382,17 @@ import Layout from '../../layouts/Layout.astro';
                     buttonsContainer.style.display = 'block';
                 }
             });
-            const eraserButton = document.createElement('button');
-            eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
-            eraserButton.style.color = 'blue';
-            // eraserButton.style.border = '3px solid blue';
-            // eraserButton.style.color = 'white';
-            eraserButton.style.width = 'fit-content';
-            eraserButton.style.marginRight = '15px';
-            // eraserButton.style.marginTop = '0px';
-            eraserButton.style.marginBottom = '0px';
-            if(isMobile){
-                eraserButton.style.padding = '4px 4px';
-            }else{
-                eraserButton.style.padding = '5px 9px';
-                eraserButton.style.top = '50%';
-                eraserButton.style.marginBottom = '15px';
-            }
-            eraserButton.style.fontWeight = 'bold';
-            eraserButton.style.borderRadius = '20%';
-            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
-            eraserButton.addEventListener('click', () => {
-            isErasing = !isErasing;
-            erase = false;
-                if (isErasing) {
-                    erase = true;
-                    eraserButton.style.border = '3px solid #0348A8';
-                    eraserButton.style.backgroundColor = '#0348A820';
-                } else {
-                    // Return to drawing mode
-                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
-                    eraserButton.style.color = 'blue';
-                    eraserButton.style.border = 'none';
-                    eraserButton.style.backgroundColor = 'transparent';
-                }
-            });
             var colors = colorList;
             const buttonSize = 60;
             const buttonSpacing = 15;
             const clearEraserContainer = document.createElement('div');
             clearEraserContainer.style.display = 'flex';
             clearEraserContainer.style.flexDirection = 'row';
-            isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
+            if(isMobile){
+                clearEraserContainer.style.marginTop = '-60px';
+            }else{
+                clearEraserContainer.style.marginTop = '40px';
+            }
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex';
             colorButtonsContainer.style.flexDirection = 'column'; 
@@ -696,15 +597,51 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+            // // clearButton.style.border = '3px solid blue';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginLeft = '30px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                buttonsContainer.style.top = '17%';
+            } else {
+                clearButton.style.padding = '5px 10px';
+            }        
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
+            }); 
+            // Create the Eraser button
+            const eraserButton = document.createElement('button');
+            // eraserButton.textContent = 'Eraser';
+            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+            eraserButton.style.color = 'blue';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginLeft = '30px';
+           
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+                if (isErasing) {
+                    // eraserButton.style.backgroundColor = 'red';
+                    eraserButton.style.color = 'red';
+                    eraserButton.style.border = '3px solid red';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green';
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                }
             });
-
+            // Add the Clear and Eraser buttons to the container
-            colorEraserCont.append(eraserButton);
+            clearEraserContainer.appendChild(eraserButton);
-            colorEraserCont.append(clearButton);
+            clearEraserContainer.appendChild(clearButton);
-            // buttonsContainer.appendChild(clearEraserContainer);
+            // buttonsContainer.appendChild(clearButton);
-
+            buttonsContainer.appendChild(clearEraserContainer);
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
@@ -781,17 +718,10 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
-        muteIcon.setVisible(false);
-        retryButton.setVisible(false);
-        galleryButton.setVisible(false);
-        
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
-            muteIcon.setVisible(true);
-            retryButton.setVisible(true);
-            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/drawing/v3.astro

@@ -39,7 +39,7 @@ import Layout from '../../layouts/Layout.astro';
                 </div>
             </div>
             <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
                         <p class="text-[19px] font-[700]">Attempt 2</p>
                         <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -64,42 +64,6 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
-    const jsonData = [
-        {
-            "src": "/assets/back.jpeg"
-        },
-        {
-            "src": "/assets/background.jpg"
-        },
-        {
-            "src": "/assets/backgroundImage.png"
-        },
-        {
-            "src": "/assets/beanieImage.png"
-        }
-    ];
-    let currentSlide = 0;
-    function updateSlide(){
-        const slide = jsonData[currentSlide];
-        document.getElementById('slideImage').src = slide.src;
-    }
-    document.getElementById('nextButton').addEventListener('click', () => {
-        currentSlide = (currentSlide + 1) % jsonData.length;
-        console.log(currentSlide)
-        updateSlide();
-    })
-    document.getElementById('prevButton').addEventListener('click', () => {
-        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
-        updateSlide();
-    })
-    updateSlide();
-    let parentMainContainer = document.getElementById('parentMainContainer');
-    let gallerySliderId = document.getElementById('gallerySliderId');
-    function closeGallery(){
-        parentMainContainer.classList.add('hidden');
-        gallerySliderId.classList.add('hidden');
-        
-    }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
         clipArt.classList.add('show');
@@ -126,11 +90,6 @@ import Layout from '../../layouts/Layout.astro';
     let cancelIconWidth; 
     let maxScore;
     let erase;
-    let audioData;
-    let audioFileId = false;
-    let isPlaying = false;
-    let galleryIconWidth;
-    let galleryButton;
     
     if(isMobile){
         topLogoWidth = 4.5;
@@ -138,21 +97,18 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         cancelIconWidth = 1.08;
-        galleryIconWidth = 2;
     }else if(isTab){
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
-        galleryIconWidth = 1.81;
     }else{
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
         tickIconWidth = 1.222;
         cancelIconWidth = 1.185;
-        galleryIconWidth = 1.345;
     }
 
     if(isMobile){
@@ -198,10 +154,6 @@ import Layout from '../../layouts/Layout.astro';
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        if(data.instruction){
-          audioFileId = true;
-        }
-        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -241,9 +193,6 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        if(audioFileId === true){
-          this.load.audio('instructAudio', audioData)
-        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -253,7 +202,6 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
-        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -329,21 +277,8 @@ import Layout from '../../layouts/Layout.astro';
             muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+            // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
             
-            if(audioFileId === true){
-            let instructionAudio = this.sound.add('instructAudio')
-            muteIcon.setInteractive().on('pointerdown', () => {
-              if(isPlaying === false){
-                instructionAudio.play()
-                isPlaying = true
-              } else if(isPlaying === true) {
-                instructionAudio.stop();
-                isPlaying = false
-              }
-
-            })
-          }
             retryButton.setInteractive().on('pointerdown', () => {
                 graphics.clear();
             })
@@ -364,10 +299,6 @@ import Layout from '../../layouts/Layout.astro';
                     // parentMainContainer.classList.remove('hidden');
                 }
             });
-            galleryButton.setInteractive().on('pointerdown', () => {
-                parentMainContainer.classList.remove('hidden');
-                gallerySliderId.classList.remove('hidden');
-            });
             // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             // if(!isMobile){
             //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -403,26 +334,13 @@ import Layout from '../../layouts/Layout.astro';
 
             if(isMobile){
                 colorContainer.style.display = 'none';
-                colorContainer.style.flexDirection = 'row'; 
             }
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            !isMobile ? colorViewButton.setVisible(false) : '';
+            if(!isMobile){
-
+                colorViewButton.setVisible(false);
-            colorContainer.style.backgroundColor = '#FFFFFF';
+            }
-            colorContainer.style.padding = '30px 20px';
+            
-            colorContainer.style.borderRadius = '80px';
-            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
-            colorContainer.style.left = '0px';
-            colorContainer.style.top = '50%';
-            colorContainer.style.transform = 'translate(0, -50%)';
-            colorContainer.style.border = '1px solid #F9F9F9'; 
-
-            let colorEraserCont = document.createElement('div');
-            colorEraserCont.style.display = 'flex';
-            colorEraserCont.style.flexDirection = 'row';
-
-            colorContainer.appendChild(colorEraserCont);
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
                     colorContainer.style.display = 'none';
@@ -459,8 +377,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            
+            colorContainer.appendChild(colorPicker);
-            // colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
             let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -684,14 +601,39 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+            // clearButton.style.border = '3px solid blue';
-       
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                buttonsContainer.style.top = '100px';
+                buttonsContainer.style.marginLeft = '30px';
+                clearButton.style.marginTop = '-15px';
+                
+            }else if(isTab){
+                clearButton.style.marginTop = '-100px';
+            } else {
+                clearButton.style.padding = '5px 10px';
+                clearButton.style.marginTop = '-115px';
+            }        
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
 
+            if(isMobile){
+                clearButton.style.display = 'none';
+            }
+
             colorViewButton.setInteractive().on('pointerdown', () => {
-                clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block'; 
+                if(clearButton.style.display === 'block') {
+                    clearButton.style.display = 'none';
+                }else{
+                    clearButton.style.display = 'block';
+                }
             });
 
             // Create the Eraser button
@@ -729,8 +671,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            colorEraserCont.append(colorPicker);
+            buttonsContainer.appendChild(clearButton);
-            colorEraserCont.append(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
@@ -824,17 +765,10 @@ import Layout from '../../layouts/Layout.astro';
         // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
-        muteIcon.setVisible(false);
-        retryButton.setVisible(false);
-        galleryButton.setVisible(false);
-
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
-            muteIcon.setVisible(true);
-            retryButton.setVisible(true);
-            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';

src/pages/guided-tracing/A.astro

@@ -15,7 +15,7 @@ import Layout from "../../layouts/Layout.astro";
       </div>
     </div>
     <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
-      <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+      <div class="w-full max-w-6xl bg-white rounded-lg">
           <div class="flex justify-between p-3">
               <p class="text-[19px] font-[700]">Attempt 2</p>
               <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
@@ -25,6 +25,11 @@ import Layout from "../../layouts/Layout.astro";
 
               <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
               <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+              <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                  <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                  <p class="text-sm" id="imageDescription">Description goes here.</p>
+              </div>
           </div>
       </div>
     </div>
@@ -33,28 +38,34 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script src="/saveTracingGameData.js" is:inline></script>
 <script is:inline>
-      const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
-    const buddiesName = findBuddies.metadata?.sprite || 'No sprite found'
-    console.log('buddName', buddiesName);
-    // fetch(`https://preschool-curriculum.in/api/one/v1//akademy/students/668ce00ae4714c0da8c17d4e`)
       const jsonData = [
         {
-            "src": "/assets/back.jpeg"
+            "src": "/assets/back.jpeg",
+            "title": "Image Title 1",
+            "description": "Description for image 1 goes here."
         },
         {
-            "src": "/assets/background.jpg"
+            "src": "/assets/background.jpg",
+            "title": "Image Title 2",
+            "description": "Description for image 2 goes here."
         },
         {
-            "src": "/assets/backgroundImage.png"
+            "src": "/assets/backgroundImage.png",
+            "title": "Image Title 3",
+            "description": "Description for image 3 goes here."
         },
         {
-            "src": "/assets/beanieImage.png"
+            "src": "/assets/beanieImage.png",
+            "title": "Image Title 4",
+            "description": "Description for image 4 goes here."
         }
     ];
     let currentSlide = 0;
     function updateSlide(){
         const slide = jsonData[currentSlide];
         document.getElementById('slideImage').src = slide.src;
+        document.getElementById('imageTitle').textContent = slide.title;
+        document.getElementById('imageDescription').textContent = slide.description;
     }
     document.getElementById('nextButton').addEventListener('click', () => {
         currentSlide = (currentSlide + 1) % jsonData.length;

src/pages/tick/tick_phonics_v1.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause();" id="instructionButton"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -102,8 +102,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -111,31 +111,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>
-        
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -195,12 +173,7 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            // console.log(gameData)
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
-
-            // console.log(audioLink)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -220,13 +193,14 @@ import Layout from "../../layouts/Layout.astro";
             if(gameData.label6){
                 document.getElementById("label6").innerHTML = gameData.label6;
             }
+            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
 
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 6; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
-
         });
 
     function checkResult2(id) {
@@ -350,7 +324,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/tick_phonics_v2.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -126,8 +126,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -135,30 +135,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -217,10 +196,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -378,7 +353,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/tick_phonics_v3.astro

@@ -12,10 +12,11 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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>
@@ -83,8 +84,8 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -92,30 +93,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -174,10 +154,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
@@ -300,7 +276,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.fontWeight = '600';
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/v1.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -99,39 +99,18 @@ import Layout from "../../layouts/Layout.astro";
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
             <div class="clip-art-container absolute bottom-0 right-0 hidden">
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
-        </div>      
+        </div>        
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div>  
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -152,10 +131,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -343,7 +318,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/v2.astro

@@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
                             <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
-                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -125,8 +125,8 @@ import Layout from "../../layouts/Layout.astro";
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>                </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -134,30 +134,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div> 
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -214,10 +193,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -385,7 +360,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tick/v3.astro

@@ -13,9 +13,9 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <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"> -->
@@ -84,8 +84,8 @@ import Layout from "../../layouts/Layout.astro";
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
                   <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>                </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
-                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
-                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
                 </div>
               </div>
             </div>
@@ -93,30 +93,9 @@ import Layout from "../../layouts/Layout.astro";
                 <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
             </div>
         </div>  
-        <div>
-            <audio id="audioPlayer" controls class="hidden">
-                <source id="instrucAudio1" src="" type="audio/ogg">
-                <source id="instrucAudio2" src="" type="audio/mpeg">
-                Your browser does not support the audio element.
-            </audio>
-        </div> 
     </main>
 </Layout>
 <script is:inline>
-    let isPlaying = false;
-    function audioPlayAndPause(){
-        if(isPlaying === false){
-            document.getElementById('audioPlayer').play();
-            isPlaying = true;
-        }else if(isPlaying === true){
-            document.getElementById('audioPlayer').pause();
-            document.getElementById('audioPlayer').currentTime = 0;
-            isPlaying = false;
-        }
-    }
-    function retryGame(){
-        window.location.reload();
-    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
     const userId = params.get('userId');
@@ -142,10 +121,6 @@ import Layout from "../../layouts/Layout.astro";
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
-            document.getElementById('instrucAudio1').src = audioLink;
-            document.getElementById('instrucAudio2').src = audioLink;
-            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
@@ -312,7 +287,7 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'

src/pages/tst2.astro

@@ -1,28 +0,0 @@
-<div>
-    <audio controls>
-        <source src="horse.ogg" type="audio/ogg">
-        <source id="audioFile" src="horse.mp3" type="audio/mpeg">
-        Your browser does not support the audio element.
-    </audio>
-</div>
-
-<script is:inline>
-    fetch('https://game-du.teachertrainingkolkata.in/items/game_drag/19')
-    .then(response => response.json())
-    .then(responseData => {
-        console.log(responseData); // Log the full response
-
-        // Check if the data contains the 'instruction' field
-        const instructionId = responseData.data.instruction;
-
-        // Assuming you need to build the full URL from this instruction ID
-        const audioUrl = `https://game-du.teachertrainingkolkata.in/assets/${instructionId}.mp3`;
-        console.log(audioUrl)
-
-        // Set the audio source dynamically
-        document.getElementById('audioFile').src = audioUrl;
-    })
-    .catch(error => {
-        console.error('Error fetching audio source:', error);
-    });
-</script>

task/27.11.2024.txt

@@ -1,2 +0,0 @@
-Gallery Implement in all drawing games?
-The new design for Buzzboard is hard to achieve so its need to develope from base lavel