From 4a303849ada0ea94f8a3901d8ac29808e0831e8c Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Wed, 27 Nov 2024 16:10:18 +0530
Subject: [PATCH] audio done

---
 src/pages/cross/cross_phonics_v1.astro | 28 +++++++++++++++++++++---
 src/pages/cross/cross_phonics_v2.astro | 30 ++++++++++++++++++++++----
 src/pages/cross/v1.astro               | 28 +++++++++++++++++++++---
 src/pages/cross/v2.astro               | 28 +++++++++++++++++++++---
 src/pages/cross/v3.astro               | 28 +++++++++++++++++++++---
 src/pages/tick/tick_phonics_v1.astro   | 28 ++++++++++++++++--------
 src/pages/tick/tick_phonics_v2.astro   | 28 +++++++++++++++++++++---
 src/pages/tick/tick_phonics_v3.astro   | 29 +++++++++++++++++++++----
 src/pages/tick/v1.astro                | 30 ++++++++++++++++++++++----
 src/pages/tick/v2.astro                | 28 +++++++++++++++++++++---
 src/pages/tick/v3.astro                | 26 ++++++++++++++++++++--
 11 files changed, 270 insertions(+), 41 deletions(-)

diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index af4fe83..4460da2 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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,9 +99,27 @@ 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();
     }
@@ -125,6 +143,10 @@ 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){
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index 581012e..b340587 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -116,10 +116,28 @@ import Layout from "../../layouts/Layout.astro";
             <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();
     }
@@ -142,6 +160,10 @@ 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){
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index 187113e..942b50d 100644
--- a/src/pages/cross/v1.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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,9 +99,27 @@ 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();
     }
@@ -126,6 +144,10 @@ 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){
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 3dede00..c266bee 100644
--- a/src/pages/cross/v2.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                 </div>
@@ -112,9 +112,27 @@ 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();
     }
@@ -138,6 +156,10 @@ 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){
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index fd3fd92..e324bb0 100644
--- a/src/pages/cross/v3.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -87,9 +87,27 @@ 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();
         }
@@ -112,6 +130,10 @@ 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;
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 2bf0c62..53e1836 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/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 id="instructionButton"><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause();" id="instructionButton"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -112,7 +112,7 @@ import Layout from "../../layouts/Layout.astro";
             </div>
         </div>
         <div>
-            <audio controls>
+            <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.
@@ -122,6 +122,17 @@ import Layout from "../../layouts/Layout.astro";
     </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();
     }
@@ -179,7 +190,7 @@ import Layout from "../../layouts/Layout.astro";
             }
         }, 100);
     }
-    window.onload = () => {
+
     fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
@@ -187,7 +198,9 @@ import Layout from "../../layouts/Layout.astro";
             let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
             document.getElementById('instrucAudio1').src = audioLink;
             document.getElementById('instrucAudio2').src = audioLink;
-            console.log(audioLink)
+            document.querySelector('audio').load();
+
+            // console.log(audioLink)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -207,8 +220,6 @@ 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++) {
@@ -217,7 +228,6 @@ import Layout from "../../layouts/Layout.astro";
             }
 
         });
-    }
 
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index e0816aa..019626a 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -135,9 +135,27 @@ 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();
     }
@@ -199,6 +217,10 @@ 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){
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index faf6e54..3ee13a1 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -12,11 +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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
-                        </div>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                     </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>
@@ -93,9 +92,27 @@ 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();
     }
@@ -157,6 +174,10 @@ 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;
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index ff2bb80..7f8a8df 100644
--- a/src/pages/tick/v1.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -107,10 +107,28 @@ import Layout from "../../layouts/Layout.astro";
             <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();
     }
@@ -134,6 +152,10 @@ 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){
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index 18a3ac2..e65285c 100644
--- a/src/pages/tick/v2.astro
+++ b/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><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -134,9 +134,27 @@ 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();
     }
@@ -196,6 +214,10 @@ 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){
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 789f1a9..36b77f2 100644
--- a/src/pages/tick/v3.astro
+++ b/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><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><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"> -->
@@ -93,9 +93,27 @@ 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();
     }
@@ -124,6 +142,10 @@ 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;