change Ui
Suvodip
parent
9809ca86d9
commit
eb7d7e9da8
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.4126 115.787C19.8985 114.112 21.2639 107.552 21.2639 107.552L27.369 113.403L60.1015 95.9766L92.8969 114.903L99.6269 108.807C99.6269 108.807 100.189 114.133 99.6269 115.787C98.858 118.049 97.4089 118.881 95.4323 119.59C93.7998 120.176 90.0446 119.946 90.0446 119.946L60.1015 102.704C60.1015 102.704 41.6796 112.319 29.8756 119.946C29.8756 119.946 25.9562 120.657 24.1855 119.946C22.2765 119.18 21.0992 118.024 20.4126 115.787Z" fill="url(#paint0_linear_6328_4264)"/>
|
||||
<path d="M119.781 43.9461C119.397 42.7568 118.672 41.7068 117.695 40.9269C116.719 40.147 115.534 39.6717 114.29 39.5603L79.6497 36.4147L65.9524 4.35427C64.9421 2.00477 62.642 0.484375 60.0865 0.484375C57.5309 0.484375 55.2306 2.005 54.2208 4.36013L40.5232 36.415L5.87788 39.5603C4.6346 39.6742 3.45208 40.1505 2.47694 40.9301C1.5018 41.7097 0.776923 42.7584 0.392182 43.9461C-0.398019 46.3765 0.331704 49.042 2.25739 50.7223L28.4412 73.6852L20.7201 107.696C20.1552 110.197 21.1256 112.782 23.2007 114.282C24.3157 115.087 25.6207 115.498 26.9365 115.498C28.071 115.498 29.1962 115.192 30.2065 114.587L60.0865 96.729L89.9556 114.587C92.1413 115.902 94.8966 115.782 96.9669 114.282C97.9804 113.548 98.756 112.532 99.197 111.362C99.638 110.191 99.7251 108.916 99.4474 107.696L91.7266 73.6852L117.91 50.727C118.852 49.9043 119.531 48.8231 119.864 47.6175C120.197 46.412 120.168 45.1353 119.781 43.9461Z" fill="#FFD211"/>
|
||||
<path d="M0.207031 52.9141V46.6641L28.9254 73.6811L27.955 78.1922L0.207031 52.9141Z" fill="url(#paint1_linear_6328_4264)"/>
|
||||
<path d="M120.094 52.9141V46.6641L91.3754 73.6811L92.3458 78.1922L120.094 52.9141Z" fill="url(#paint2_linear_6328_4264)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_6328_4264" x1="60.0299" y1="95.9766" x2="60.0299" y2="120.19" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FD9F02"/>
|
||||
<stop offset="1" stop-color="#FDCF03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_6328_4264" x1="14.5662" y1="46.6641" x2="14.5662" y2="78.1922" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FD9F02"/>
|
||||
<stop offset="1" stop-color="#FDCF03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_6328_4264" x1="105.735" y1="46.6641" x2="105.735" y2="78.1922" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FD9F02"/>
|
||||
<stop offset="1" stop-color="#FDCF03"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -7,6 +7,8 @@
|
|||
const gameVersion = urlParams.get('gameName');
|
||||
const gameId = urlParams.get('id');
|
||||
const spriteName = urlParams.get('spriteName');
|
||||
const assignmentId = urlParams.get('assignmentId');
|
||||
const worksheetId = urlParams.get('worksheetId');
|
||||
let submitNotic;
|
||||
let startTime = Date.now();
|
||||
|
||||
|
|
@ -135,40 +137,62 @@ function submitUserData(drawingZone) {
|
|||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('data from save gallery', data);
|
||||
|
||||
if(data.screenshotUrl){
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('saved-toast').classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
document.getElementById('saved-toast').classList.add('hidden');
|
||||
}, 2000);
|
||||
|
||||
// console.log(response.status, " Data Saved Succesfully");
|
||||
}
|
||||
} else {
|
||||
// console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: data.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
'Authorization' : authToken
|
||||
},
|
||||
body: JSON.stringify(userAnotherData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('submissions api response', data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error);
|
||||
})
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('saved-toast').classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
document.getElementById('saved-toast').classList.add('hidden');
|
||||
}, 2000);
|
||||
|
||||
// console.log(response.status, " Data Saved Succesfully");
|
||||
}
|
||||
} else {
|
||||
// console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
|
||||
// Clear the drawing
|
||||
// graphics.clear();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ const queryString = window.location.search;
|
|||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
const assignmentId = urlParams.get('assignmentId');
|
||||
const worksheetId = urlParams.get('worksheetId');
|
||||
const gameId = urlParams.get('id');
|
||||
let submitNotic;
|
||||
|
||||
|
|
@ -39,8 +41,6 @@ const gameType = gameName[3].split('?id=');
|
|||
// console.log('Type - 3');
|
||||
// }
|
||||
|
||||
console.log(gameVersion)
|
||||
|
||||
function submitUserData(drawingZone) {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
|
|
@ -57,38 +57,21 @@ function submitUserData(drawingZone) {
|
|||
}
|
||||
// console.log('This is from main point', scoreTotal);
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
if(gameType[0] == 'drawing'){
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
// const link = document.createElement('a');
|
||||
// link.href = image.src;
|
||||
// link.download = 'my_drawing.png';
|
||||
// link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}else if( gameType[0] == "guided-tracing"){
|
||||
// submitButton.setVisible(true);
|
||||
// snapshotButton.setVisible(true);
|
||||
// customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
// const link = document.createElement('a');
|
||||
// link.href = image.src;
|
||||
// link.download = `guided-tracing-${gameId}.png`;
|
||||
// link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}
|
||||
let starValue = (scoreTotal / maxScore) * 10;
|
||||
submitButton.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
// const link = document.createElement('a');
|
||||
// link.href = image.src;
|
||||
// link.download = 'my_drawing.png';
|
||||
// link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
let starValue = Math.round((scoreTotal / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
// console.log('Star Value', starValue);
|
||||
// console.log('starValue', starValue)
|
||||
// if(scoreTotal === maxScore){
|
||||
// starValue = 5;
|
||||
|
|
@ -99,7 +82,19 @@ function submitUserData(drawingZone) {
|
|||
// }
|
||||
let maxStarValue = 10;
|
||||
let progress = 0;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
|
|
@ -185,54 +180,103 @@ function submitUserData(drawingZone) {
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
let userData = {
|
||||
'gameName': gameVersion,
|
||||
'gameID': gameId,
|
||||
'screenShot': imageCode,
|
||||
'userId' : userId,
|
||||
'gameTime' : timeDifferenceInSeconds,
|
||||
'score' : scoreTotal,
|
||||
'gameStar' : starValue
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameVersion,
|
||||
gameID: gameId,
|
||||
screenShot: imageCode,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
fetch(`http://localhost:5175/api/saveGalleryImage`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('saved-toast').classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
document.getElementById('saved-toast').classList.add('hidden');
|
||||
}, 2000);
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('wsSavedImg').classList.remove('-z-10');
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starContainer.appendChild(starDiv);
|
||||
starDiv.classList.add('star');
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Gallery Response Data', data)
|
||||
|
||||
if(data.screenshotUrl){
|
||||
let userData = {
|
||||
'gameName': gameVersion,
|
||||
'gameID': gameId,
|
||||
'screenShot': imageCode,
|
||||
'userId' : userId,
|
||||
'gameTime' : timeDifferenceInSeconds,
|
||||
'score' : scoreTotal,
|
||||
'gameStar' : starValue
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
// console.log('Response Code', response.status)
|
||||
if (response.status == 200) {
|
||||
document.getElementById('saved-toast').classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
document.getElementById('saved-toast').classList.add('hidden');
|
||||
}, 1500);
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
// starContainer.style.flexDirection = 'row';
|
||||
// document.getElementById('wsSavedImg').classList.remove('-z-10');
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
// const starDiv = document.createElement('div');
|
||||
// starDiv.innerHTML = starSVG;
|
||||
// starContainer.appendChild(starDiv);
|
||||
// starDiv.classList.add('star');
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: data.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
console.log('Starting submissions API call');
|
||||
fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken
|
||||
},
|
||||
body: JSON.stringify(userAnotherData)
|
||||
})
|
||||
.then(response => {
|
||||
console.log('Submissions API Response:', response);
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Submissions Response Data:', data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error in Submissions API:', error);
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
|
||||
// Clear the drawing
|
||||
// graphics.clear();
|
||||
});
|
||||
};
|
||||
// saved-toast
|
||||
console.error('An error occoured', error)
|
||||
})
|
||||
});
|
||||
};
|
||||
|
|
@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<div class="specific">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
|
|
@ -13,68 +13,77 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center pt-8">
|
||||
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
<!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
|
|
@ -83,7 +92,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -98,16 +110,17 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="clip-art-container absolute bottom-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
<source id="instrucAudio2" src="" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -127,6 +140,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
|
|
@ -135,7 +150,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 6;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -235,6 +250,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 1) {
|
||||
|
|
@ -270,25 +286,26 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
|
|
@ -336,52 +353,140 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
|
|
@ -101,7 +101,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -126,6 +129,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -145,6 +149,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
|
|
@ -152,7 +158,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let totalPoints = 0;
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 9;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -306,17 +312,21 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -370,52 +380,139 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<div class="specific">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
|
|
@ -13,68 +13,77 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center pt-8">
|
||||
<p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
<!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-0" style="display: none;" id="allParentDiv">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
|
|
@ -83,7 +92,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -98,7 +110,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="clip-art-container absolute bottom-0 right-0 hidden">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<audio id="audioPlayer" controls class="hidden">
|
||||
<source id="instrucAudio1" src="" type="audio/ogg">
|
||||
|
|
@ -108,6 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -127,6 +140,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let url = window.location.href;
|
||||
|
|
@ -135,7 +150,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let totalPoints = 0;
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 6;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -273,17 +288,21 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -336,53 +355,140 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
<div id="" class="flex flex-row place-content-between ">
|
||||
|
|
@ -96,7 +96,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -121,6 +124,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -140,6 +144,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let wrongCount = 0;
|
||||
let url = window.location.href;
|
||||
|
|
@ -148,7 +154,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let maxPoint = 9;
|
||||
let starValue;
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 9;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -291,18 +297,21 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -356,52 +365,139 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// Handle error
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// Handle error
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<div class="flex flex-col">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
|
|
@ -71,7 +71,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -96,6 +99,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -115,6 +119,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
|
|
@ -122,7 +128,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 3;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -243,17 +249,20 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
totalPoints === 1 ? starValue = 5 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -306,53 +315,140 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,22 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
|
||||
Worksheet saved successfully
|
||||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -23,18 +31,18 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -439,7 +447,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
})
|
||||
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
|
||||
if(audioFileId === true){
|
||||
|
|
|
|||
|
|
@ -13,13 +13,15 @@ const numberOfTimes = starNumberOfTime;
|
|||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div class="flex flex-row space-x-4 items-center justify-center ">
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
|
||||
|
|
@ -40,10 +42,10 @@ const numberOfTimes = starNumberOfTime;
|
|||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -51,7 +53,7 @@ const numberOfTimes = starNumberOfTime;
|
|||
y: window.innerHeight / 4,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
|
|
@ -175,6 +177,7 @@ const numberOfTimes = starNumberOfTime;
|
|||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
console.log(data)
|
||||
if(data.instruction){
|
||||
audioFileId = true;
|
||||
}
|
||||
|
|
@ -472,7 +475,7 @@ const numberOfTimes = starNumberOfTime;
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
|
||||
Worksheet saved successfully
|
||||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
|
|
@ -11,7 +15,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -32,10 +39,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -433,7 +440,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
|
|
|
|||
|
|
@ -3,18 +3,24 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
|
||||
Worksheet saved successfully
|
||||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div class="flex flex-row space-x-4 items-center justify-center ">
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
|
||||
<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">
|
||||
|
|
@ -23,19 +29,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
<!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div> -->
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -433,7 +439,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
|
||||
Worksheet saved successfully
|
||||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
|
|
@ -11,7 +15,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -32,10 +39,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -462,7 +469,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -522,27 +529,16 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if (match !== undefined) {
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
if (match !== undefined) {
|
||||
scoreTotal++;
|
||||
counter++;
|
||||
// console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderCorrect';
|
||||
} else {
|
||||
console.log(`Score Total: ${scoreTotal}`);
|
||||
// console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderWrong';
|
||||
}
|
||||
|
||||
// if(counter === 8){
|
||||
// // console.log(counter)
|
||||
// submitButton.setVisible(true);
|
||||
// retryButton.setVisible(true);
|
||||
// }
|
||||
};
|
||||
|
||||
const droppedBlocks = [];
|
||||
|
|
|
|||
|
|
@ -3,14 +3,22 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
|
||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
|
||||
Worksheet saved successfully
|
||||
</div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -22,19 +30,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container absolute -z-10 bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
// function showAnimation() {
|
||||
// const clipArt = document.querySelector('.clip-art');
|
||||
// clipArt.classList.add('show');
|
||||
// }
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -441,7 +449,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
// showAnimation();
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
|
||||
|
|
@ -594,7 +602,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
console.log("Score Total", scoreTotal)
|
||||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
|
|
@ -95,7 +95,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -121,6 +124,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -140,6 +144,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let wrongCount = 0;
|
||||
|
|
@ -148,7 +154,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 6;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -282,19 +288,20 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
|
|
@ -350,51 +357,138 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
|
|
@ -119,7 +119,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -144,6 +147,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -163,6 +167,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
|
|
@ -170,7 +176,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 6;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -310,19 +316,20 @@ import Layout from "../../layouts/Layout.astro";
|
|||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
|
|
@ -378,51 +385,138 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<div class="flex flex-col">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
|
|
@ -76,7 +76,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -101,6 +104,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -120,6 +124,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let starValue;
|
||||
|
|
@ -127,7 +133,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 3;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -236,17 +242,20 @@ import Layout from "../../layouts/Layout.astro";
|
|||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
totalPoints === 1 ? starValue = 5 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -300,51 +309,140 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -141,6 +144,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
|
|
@ -149,7 +153,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 6;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -276,125 +280,29 @@ import Layout from "../../layouts/Layout.astro";
|
|||
element: element
|
||||
};
|
||||
});
|
||||
|
||||
// Count points based on checkbox values and "greenBorder" class
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
|
||||
// Check if all images in the div are loaded
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
// If images are already loaded
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
|
||||
function takeSnapshot() {
|
||||
html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
})
|
||||
.then((canvas) => {
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
|
||||
// Automatically download the snapshot
|
||||
const link = document.createElement("a");
|
||||
link.href = snapImage;
|
||||
link.download = "snapshot.jpg";
|
||||
link.click();
|
||||
|
||||
// Call the function to save the screenshot after it is generated
|
||||
saveScreenshot(snapImage);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error taking snapshot:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId,
|
||||
gameTime: timeDifferenceInSeconds,
|
||||
};
|
||||
|
||||
fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
const userAnotherData = {
|
||||
assignmentId,
|
||||
worksheetId: gameId,
|
||||
studentId: userId,
|
||||
submissionFile: res.screenshotUrl,
|
||||
};
|
||||
|
||||
return fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
} else {
|
||||
throw new Error('Failed to save the screenshot');
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log('Successfully submitted:', data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error saving or submitting the screenshot:', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
|
|
@ -442,52 +350,137 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
// console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
|
|
|||
|
|
@ -19,11 +19,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
</div> -->
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm" class="flex flex-col justify-center">
|
||||
<div id="" class="flex flex-row place-content-between gap-4">
|
||||
|
|
@ -119,7 +115,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -143,6 +142,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -162,13 +162,16 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
let gameData = null;
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 9;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -320,17 +323,21 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
|
|
@ -385,51 +392,137 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="container mx-auto px-4" id="snapshotDiv">
|
||||
<div class="flex flex-col">
|
||||
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
|
|
@ -78,7 +78,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
<div id="star-container" class="relative inline-flex items-center justify-center">
|
||||
<img src="/assets/bg-star.svg" alt="" class="block" />
|
||||
<p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
|
|
@ -102,6 +105,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script is:inline>
|
||||
let isPlaying = false;
|
||||
function audioPlayAndPause(){
|
||||
|
|
@ -121,6 +125,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
const assignmentId = params.get('assignmentId');
|
||||
const worksheetId = params.get('worksheetId');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let starValue;
|
||||
|
|
@ -128,7 +134,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let maxScore = 3;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
|
@ -248,23 +254,25 @@ import Layout from "../../layouts/Layout.astro";
|
|||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
totalPoints === 1 ? starValue = 5 : starValue = 3;
|
||||
let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
let starValue = Math.round((totalPoints / maxScore) * 10);
|
||||
starValue = starValue === 0 ? 3 : starValue;
|
||||
let feedbackMessage = '';
|
||||
if (starValue >= 1 && starValue <= 3) {
|
||||
feedbackMessage = "You're making progress! Let's keep going!";
|
||||
} else if (starValue >= 4 && starValue <= 6) {
|
||||
feedbackMessage = "Nice work! You're improving every day!";
|
||||
} else if (starValue >= 7 && starValue <= 8) {
|
||||
feedbackMessage = "Amazing work! Keep it up!";
|
||||
} else if (starValue >= 9 && starValue <= 10) {
|
||||
feedbackMessage = "Outstanding! You're a true superstar!";
|
||||
} else {
|
||||
feedbackMessage = "Invalid star value.";
|
||||
}
|
||||
|
||||
progressIncrement();
|
||||
addStarScalingStyles();
|
||||
showClipArt();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
|
|
@ -312,51 +320,138 @@ import Layout from "../../layouts/Layout.astro";
|
|||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
|
||||
let snapImage = '';
|
||||
const div = document.getElementById("snapshotDiv");
|
||||
const images = div.getElementsByTagName('img');
|
||||
let loadedImagesCount = 0;
|
||||
for (let img of images) {
|
||||
if (img.complete) {
|
||||
loadedImagesCount++;
|
||||
} else {
|
||||
img.onload = () => {
|
||||
loadedImagesCount++;
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
if (loadedImagesCount === images.length) {
|
||||
takeSnapshot();
|
||||
}
|
||||
async function takeSnapshot() {
|
||||
try {
|
||||
const canvas = await html2canvas(div, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
snapImage = canvas.toDataURL("image/jpeg");
|
||||
await saveScreenshot(snapImage);
|
||||
} catch (error) {
|
||||
console.error('Error in takeSnapshot:', error.message || error);
|
||||
}
|
||||
}
|
||||
async function saveScreenshot(snapImage) {
|
||||
const saveUserDataForScreenshot = {
|
||||
gameName: gameName,
|
||||
gameID: gameId,
|
||||
screenShot: snapImage,
|
||||
userId: userId,
|
||||
gameTime: timeDifferenceInSeconds
|
||||
};
|
||||
try {
|
||||
const saveResponse = await fetch('http://localhost:5175/api/saveGalleryImage', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(saveUserDataForScreenshot),
|
||||
});
|
||||
if (!saveResponse.ok) {
|
||||
const errorDetails = await saveResponse.text();
|
||||
console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const saveResult = await saveResponse.json();
|
||||
if (saveResult.screenshotUrl) {
|
||||
let userData = {
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
};
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('get-star-value').innerHTML = starValue;
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
const userAnotherData = {
|
||||
assignmentId: assignmentId,
|
||||
worksheetId: worksheetId,
|
||||
studentId: userId,
|
||||
submissionFile: saveResult.screenshotUrl,
|
||||
};
|
||||
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
||||
try {
|
||||
const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': authToken,
|
||||
},
|
||||
body: JSON.stringify(userAnotherData),
|
||||
});
|
||||
if (!submitResponse.ok) {
|
||||
const errorDetails = await submitResponse.text();
|
||||
console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
|
||||
console.error('Response Body:', errorDetails);
|
||||
throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
|
||||
}
|
||||
const submitResult = await submitResponse.json();
|
||||
// console.log('SubmitWorksheet API success:', submitResult);
|
||||
} catch (error) {
|
||||
console.error('Error in SubmitWorksheet API call:', error.message || error);
|
||||
}
|
||||
} else {
|
||||
console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in saveScreenshot:', error.message || error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue