audio done

pull/30/head
Suvodip 2024-11-27 16:10:18 +05:30
parent c999045fe4
commit 4a303849ad
11 changed files with 270 additions and 41 deletions

View File

@ -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){

View File

@ -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){

View File

@ -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){

View File

@ -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){

View File

@ -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;

View File

@ -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));

View File

@ -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){

View File

@ -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;

View File

@ -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){

View File

@ -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){

View File

@ -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;