kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: kar:0547509a2dce1ec3e10f009eb18cb7ac47a6c5ce
Branches Tags
kar:master
kar:newb2
kar:newb
kar:b4
kar:fetch2
kar:b3
kar:b2
..
compare: kar:3ed170c09ba8cb7df1c7b8b88f81c4c57fa0f8f5
Branches Tags
kar:master
kar:newb2
kar:newb
kar:b4
kar:fetch2
kar:b3
kar:b2

No commits in common. "0547509a2dce1ec3e10f009eb18cb7ac47a6c5ce" and "3ed170c09ba8cb7df1c7b8b88f81c4c57fa0f8f5" have entirely different histories.
0547509a2d ... 3ed170c09b

23 changed files with 93 additions and 643 deletions
Show Stats Expand all files Collapse all files

37
src/pages/cross/cross_phonics_v1.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -143,10 +122,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -336,7 +311,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

39
src/pages/cross/cross_phonics_v2.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</div> </div>
<div class="clip-art-container absolute bottom-0 right-0 hidden"> <div class="clip-art-container absolute bottom-0 right-0 hidden">
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -160,10 +139,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -370,7 +345,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

37
src/pages/cross/v1.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -144,10 +123,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -337,7 +312,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
// console.log(userData); // console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

37
src/pages/cross/v2.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -156,10 +135,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -356,7 +331,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

37
src/pages/cross/v3.astro
View File

@ -12,10 +12,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -130,10 +109,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label; document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; 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)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
// console.log(userData); // console.log(userData);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

26
src/pages/drag/dragdrop_phonics.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -56,9 +56,6 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; let blockMatches;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=80"; imageCustomWidth = "?width=80";
@ -246,9 +239,6 @@ import Layout from '../../layouts/Layout.astro';
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -420,7 +410,7 @@ import Layout from '../../layouts/Layout.astro';
// window.load // window.load
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
@ -442,19 +432,7 @@ import Layout from '../../layouts/Layout.astro';
showAnimation(); showAnimation();
}) })
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8; 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){ if(isMobile){
blocks1Width1 = 180; blocks1Width1 = 180;

36
src/pages/drag/index.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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> <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -59,9 +59,6 @@ const numberOfTimes = starNumberOfTime;
let resetIconWidth; let resetIconWidth;
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
@ -272,9 +264,6 @@ const numberOfTimes = starNumberOfTime;
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -408,8 +397,15 @@ const numberOfTimes = starNumberOfTime;
graphics.strokePath(); 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); 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(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
@ -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-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4"); this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); // 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 = [ const blocks = [
{ {

27
src/pages/drag/match_phonics.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -55,9 +55,6 @@ import Layout from '../../layouts/Layout.astro';
let resetIconWidth; let resetIconWidth;
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
@ -250,9 +243,6 @@ import Layout from '../../layouts/Layout.astro';
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
@ -382,7 +372,7 @@ import Layout from '../../layouts/Layout.astro';
// }); // });
// }; // };
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
@ -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-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); // 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 graphics = this.add.graphics();
const x = 0; const y = 54; const x = 0; const y = 54;

28
src/pages/drag/v2.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -56,10 +56,6 @@ import Layout from '../../layouts/Layout.astro';
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
@ -252,9 +243,6 @@ import Layout from '../../layouts/Layout.astro';
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
@ -384,7 +372,7 @@ import Layout from '../../layouts/Layout.astro';
// }); // });
// }; // };
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
@ -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-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4"); this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1); // 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 graphics = this.add.graphics();
const x = 0; const y = 54; const x = 0; const y = 54;

27
src/pages/drag/v3.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -59,9 +59,6 @@ import Layout from '../../layouts/Layout.astro';
let blockMatches; let blockMatches;
let retryButtonWidth; let retryButtonWidth;
let leftTargetZoneW; let leftTargetZoneW;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
@ -281,9 +274,6 @@ import Layout from '../../layouts/Layout.astro';
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
@ -432,25 +422,12 @@ import Layout from '../../layouts/Layout.astro';
graphics.strokePath(); graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); 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); 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", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', // font: '600 30px Quicksand',
// fill: '#fff', // fill: '#fff',

29
src/pages/drag/v4.astro
View File

@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div> </div>
</div> </div>
@ -59,9 +59,6 @@ import Layout from '../../layouts/Layout.astro';
let leftTargetZoneW; let leftTargetZoneW;
let rightTargetZoneW; let rightTargetZoneW;
let retryButtonWidth; let retryButtonWidth;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; 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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .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; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";}; if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" 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++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); 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("topMatch", "/assets/top_match.jpg");
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
// this.load.image("tick", '/assets/tick.png'); // 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("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -413,23 +405,10 @@ import Layout from '../../layouts/Layout.astro';
graphics.strokePath(); graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); 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(); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale(); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale(); 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", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', // font: '600 30px Quicksand',
// fill: '#fff', // fill: '#fff',

24
src/pages/drawing/drawing_phonics.astro
View File

@ -90,10 +90,6 @@ import Layout from '../../layouts/Layout.astro';
let scoreTotal = 0; let scoreTotal = 0;
let maxScore; let maxScore;
let erase; let erase;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -156,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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
if(data.instruction){
audioFileId = true;
}
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
// console.log(data) // console.log(data)
// colorList = data.colors; // colorList = data.colors;
const {image} = data; const {image} = data;
@ -199,9 +191,6 @@ import Layout from '../../layouts/Layout.astro';
let colorList; let colorList;
function preload() { function preload() {
if(audioFileId === true){
this.load.audio('instructAudio', audioData)
}
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -258,19 +247,6 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
graphics.clear(); 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); 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", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
// font: '600 30px Quicksand', // font: '600 30px Quicksand',

23
src/pages/drawing/drawing_writo.astro
View File

@ -90,9 +90,6 @@ import Layout from '../../layouts/Layout.astro';
let scoreTotal = 0; let scoreTotal = 0;
let maxScore; let maxScore;
let erase; let erase;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -156,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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
if(data.instruction){
audioFileId = true;
}
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
// console.log(data) // console.log(data)
// colorList = data.colors; // colorList = data.colors;
const {image} = data; const {image} = data;
@ -199,9 +192,6 @@ import Layout from '../../layouts/Layout.astro';
let colorList; let colorList;
function preload() { function preload() {
if(audioFileId === true){
this.load.audio('instructAudio', audioData)
}
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -256,19 +246,6 @@ import Layout from '../../layouts/Layout.astro';
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
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', () => { retryButton.setInteractive().on('pointerdown', () => {
graphics.clear(); graphics.clear();

25
src/pages/drawing/index.astro
View File

@ -18,7 +18,7 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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="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> </div>
</div> </div>
@ -143,9 +143,6 @@ import Layout from '../../layouts/Layout.astro';
let retryButton; let retryButton;
let maxScore; let maxScore;
let erase; let erase;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.65; muteIconWidth = 1.65;
@ -212,10 +209,6 @@ import Layout from '../../layouts/Layout.astro';
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
if(data.instruction){
audioFileId = true;
}
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
// console.log(data) // console.log(data)
// colorList = data.colors; // colorList = data.colors;
const {image} = data; const {image} = data;
@ -256,9 +249,6 @@ import Layout from '../../layouts/Layout.astro';
let colorList; let colorList;
function preload() { function preload() {
if(audioFileId === true){
this.load.audio('instructAudio', audioData)
}
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -308,19 +298,6 @@ import Layout from '../../layouts/Layout.astro';
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); 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', () => { retryButton.setInteractive().on('pointerdown', () => {
// window.location.reload(); // window.location.reload();

23
src/pages/drawing/v2.astro
View File

@ -98,9 +98,6 @@ import Layout from '../../layouts/Layout.astro';
let noticeHeight; let noticeHeight;
let maxScore; let maxScore;
let erase; let erase;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
@ -173,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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
if(data.instruction){
audioFileId = true;
}
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
colorList = data.colors; colorList = data.colors;
defaultColor = colorList[0]; defaultColor = colorList[0];
const {image1, image2} = data; const {image1, image2} = data;
@ -217,9 +210,6 @@ import Layout from '../../layouts/Layout.astro';
let colorList; let colorList;
function preload() { function preload() {
if(audioFileId === true){
this.load.audio('instructAudio', audioData)
}
this.load.image('image1', assetsList.image1); this.load.image('image1', assetsList.image1);
this.load.image('image2', assetsList.image2); this.load.image('image2', assetsList.image2);
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
@ -307,19 +297,6 @@ import Layout from '../../layouts/Layout.astro';
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon"); retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
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', ()=>{ retryButton.setInteractive().on('pointerdown', ()=>{
graphics.clear(); graphics.clear();
}) })

23
src/pages/drawing/v3.astro
View File

@ -90,9 +90,6 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let maxScore; let maxScore;
let erase; let erase;
let audioData;
let audioFileId = false;
let isPlaying = false;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
@ -157,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`) const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
if(data.instruction){
audioFileId = true;
}
audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
// console.log(data) // console.log(data)
// colorList = data.colors; // colorList = data.colors;
const {image} = data; const {image} = data;
@ -200,9 +193,6 @@ import Layout from '../../layouts/Layout.astro';
let colorList; let colorList;
function preload() { function preload() {
if(audioFileId === true){
this.load.audio('instructAudio', audioData)
}
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.svg'); this.load.image('topLogo', '/assets/top_logo.svg');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -289,19 +279,6 @@ import Layout from '../../layouts/Layout.astro';
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon"); 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', () => { retryButton.setInteractive().on('pointerdown', () => {
graphics.clear(); graphics.clear();
}) })

44
src/pages/tick/tick_phonics_v1.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -195,12 +173,7 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1; document.getElementById("label1").innerHTML = gameData.label1;
@ -220,13 +193,14 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label6){ if(gameData.label6){
document.getElementById("label6").innerHTML = 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/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
const imageId = `image${i}`; const imageId = `image${i}`;
document.getElementById(imageId).src = assetsURL + gameData[imageId]; document.getElementById(imageId).src = assetsURL + gameData[imageId];
} }
}); });
function checkResult2(id) { function checkResult2(id) {
@ -350,7 +324,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

37
src/pages/tick/tick_phonics_v2.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -217,10 +196,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -378,7 +353,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

38
src/pages/tick/tick_phonics_v3.astro
View File

@ -12,10 +12,11 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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>
<!-- <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"> --> <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div> </div>
@ -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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -174,10 +154,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label; document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
@ -300,7 +276,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.fontWeight = '600'; calculationText.style.fontWeight = '600';
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

39
src/pages/tick/v1.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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> <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>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3"> <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>
</div> </div>
<div class="clip-art-container absolute bottom-0 right-0 hidden"> <div class="clip-art-container absolute bottom-0 right-0 hidden">
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -152,10 +131,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -343,7 +318,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

37
src/pages/tick/v2.astro
View File

@ -11,10 +11,10 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <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="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> </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"> --> <!-- <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="" /> <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> <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"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -214,10 +193,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
@ -385,7 +360,7 @@ import Layout from "../../layouts/Layout.astro";
calculationText.style.color = 'rgba(0, 0, 0, 0.38)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

35
src/pages/tick/v3.astro
View File

@ -13,9 +13,9 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><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="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> </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"> --> <!-- <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="" /> <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> <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"> <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>
</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"> <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div> </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> </main>
</Layout> </Layout>
<script is:inline> <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 params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const gameId = params.get('id');
const userId = params.get('userId'); const userId = params.get('userId');
@ -142,10 +121,6 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.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) // console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label; document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; 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)'; calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
containerDiv.appendChild(calculationText); containerDiv.appendChild(calculationText);
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, { fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'

28
src/pages/tst2.astro
View File

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