345 lines
15 KiB
JavaScript
345 lines
15 KiB
JavaScript
function retryGame(){
|
|
window.location.reload();
|
|
}
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const childId = urlParams.get('childId');
|
|
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();
|
|
// console.log('gameVersion', gameVersion)
|
|
|
|
const url = window.location.href;
|
|
const gameName = url.split('/');
|
|
const gameType = gameName[3].split('?id=');
|
|
// let gameVersion;
|
|
// if(gameType[0] == "guided-tracing"){
|
|
// gameVersion = gameType[0].split('?')[0];
|
|
// gameId = gameName[4];
|
|
// console.log('Type - 1');
|
|
|
|
// } else if(gameName.length == 4){
|
|
// gameVersion = gameName[3].split('?')[0];
|
|
// gameId = urlParams.get('id');
|
|
// }
|
|
// else if(gameName.length == 5){
|
|
// gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
|
|
// gameId = urlParams.get('id');
|
|
// console.log('Type - 2');
|
|
// }else if(gameName.length == 6){
|
|
// gameVersion = gameType[0] + '-' + gameName[4];
|
|
// gameId = urlParams.get('id');
|
|
// console.log('Type - 3');
|
|
// }
|
|
// console.log("Here is game name ", gameType[0])
|
|
|
|
// console.log(gameVersion)
|
|
let imageCode;
|
|
let gameScore;
|
|
let timeDifferenceInSeconds;
|
|
|
|
// if(scoreTotal){
|
|
// gameScore = scoreTotal;
|
|
// }else{
|
|
// gameScore = 0;
|
|
// }
|
|
|
|
|
|
function submitUserData(drawingZone) {
|
|
submitButton.setVisible(false);
|
|
galleryButton.setVisible(false);
|
|
customCursor.setVisible(false);
|
|
snapshotButton.setVisible(false);
|
|
if(!gameType[0] === 'guided-tracing'){
|
|
snapshotButton.setVisible(false);
|
|
customCursor.setVisible(false);
|
|
galleryButton.setVisible(false);
|
|
}
|
|
muteIcon.setVisible(false);
|
|
retryButton.setVisible(false);
|
|
|
|
const endTime = Date.now();
|
|
const timeDifference = endTime - startTime;
|
|
timeDifferenceInSeconds = timeDifference / 1000;
|
|
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
|
|
|
|
|
|
// console.log('This is from main point', scoreTotal);
|
|
drawingZone.renderer.snapshot((image) => {
|
|
submitButton.setVisible(true);
|
|
galleryButton.setVisible(true);
|
|
customCursor.setVisible(true);
|
|
snapshotButton.setVisible(true);
|
|
if(!gameType[0] == "guided-tracing"){
|
|
snapshotButton.setVisible(true);
|
|
customCursor.setVisible(true);
|
|
galleryButton.setVisible(true);
|
|
}
|
|
|
|
muteIcon.setVisible(true);
|
|
retryButton.setVisible(true);
|
|
|
|
if(gameType[0] == 'drawing'){
|
|
// submitButton.setVisible(true);
|
|
// snapshotButton.setVisible(true);
|
|
// customCursor.setVisible(true);
|
|
// galleryButton.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;
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
function calculateFromAI(){
|
|
let progress = 0;
|
|
let starValue;
|
|
|
|
function progressIncrement() {
|
|
const interval = setInterval(() => {
|
|
if (progress >= 100) {
|
|
clearInterval(interval);
|
|
} else {
|
|
progress += 10;
|
|
progressBar.style.width = `${progress}%`;
|
|
}
|
|
}, 100);
|
|
}
|
|
progressIncrement();
|
|
function addStarScalingStyles() {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes scaleUp {
|
|
0% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.star {
|
|
display: inline-block;
|
|
transform-origin: center;
|
|
transform: scale(0); /* Initial state before animation */
|
|
opacity: 0; /* Initial opacity */
|
|
animation: scaleUp 0.5s ease forwards;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
addStarScalingStyles();
|
|
|
|
const starContainer = document.getElementById('star-container');
|
|
let scoreBoard = document.getElementById('scoreBoard');
|
|
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
|
loadingMainContainer.style.display = 'flex';
|
|
|
|
const loadingDiv = document.getElementById('loadingState');
|
|
loadingDiv.style.display = 'flex';
|
|
|
|
const containerDiv = document.createElement('div');
|
|
containerDiv.classList.add('w-full');
|
|
containerDiv.style.display = 'flex';
|
|
containerDiv.style.flexDirection = 'column';
|
|
containerDiv.style.justifyContent = 'center';
|
|
containerDiv.style.alignItems = 'center';
|
|
|
|
const paragraph = document.createElement('p');
|
|
paragraph.textContent = 'HOLD ON.';
|
|
paragraph.style.fontSize = '16px';
|
|
paragraph.style.fontWeight = '600';
|
|
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
|
containerDiv.appendChild(paragraph);
|
|
|
|
const progressBarContainer = document.createElement('div');
|
|
progressBarContainer.style.position = 'relative';
|
|
progressBarContainer.style.display = 'flex';
|
|
progressBarContainer.style.alignItems = 'center';
|
|
progressBarContainer.style.border = '1px solid #AFB8E6';
|
|
progressBarContainer.style.height = '10px';
|
|
progressBarContainer.style.width = '100%';
|
|
progressBarContainer.style.marginTop = '30px';
|
|
progressBarContainer.style.marginBottom = '30px';
|
|
containerDiv.appendChild(progressBarContainer);
|
|
|
|
const progressBar = document.createElement('div');
|
|
progressBar.style.height = '10px';
|
|
progressBar.style.backgroundColor = '#D7DCF2';
|
|
progressBar.style.width = '0%';
|
|
progressBarContainer.appendChild(progressBar);
|
|
|
|
loadingDiv.appendChild(containerDiv);
|
|
|
|
const calculationText = document.createElement('p');
|
|
calculationText.textContent = 'Your stars are being calculated...';
|
|
calculationText.style.fontSize = '14px';
|
|
calculationText.style.fontWeight = '600';
|
|
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
|
containerDiv.appendChild(calculationText);
|
|
let userDataForStar = {
|
|
gameName: gameVersion,
|
|
childId: childId,
|
|
gameID: gameId,
|
|
gameTime: timeDifferenceInSeconds,
|
|
screenShot: imageCode
|
|
};
|
|
|
|
// First API call
|
|
fetch(`https://api.teachertrainingkolkata.in/api/aiEvaluateImageToStar`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(userDataForStar)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
setTimeout(() => {
|
|
if (data && data.message === "Game data saved successfully") {
|
|
let starValue = data.data.gameStar; // Ensure starValue is available
|
|
|
|
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.";
|
|
}
|
|
|
|
loadingMainContainer.style.display = 'none';
|
|
loadingDiv.style.display = 'none';
|
|
starContainer.style.display = 'flex';
|
|
starContainer.style.flexDirection = 'row';
|
|
document.getElementById('get-star-value').innerHTML = starValue;
|
|
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
|
scoreBoard.style.display = 'flex';
|
|
|
|
if (scoreBoard.style.display === 'flex') {
|
|
const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');
|
|
bottomAnimateClipart.classList.remove('hidden');
|
|
bottomAnimateClipart.classList.add('-translate-x-full', 'transition-transform', 'duration-700');
|
|
setTimeout(() => {
|
|
bottomAnimateClipart.classList.add('hidden');
|
|
bottomAnimateClipart.classList.remove('translate-x-full');
|
|
}, 100);
|
|
}
|
|
|
|
// ✅ Now create `userData` inside the correct scope where starValue exists
|
|
let userData = {
|
|
gameName: gameVersion.trim(),
|
|
gameID: gameId,
|
|
screenShot: imageCode,
|
|
childId: childId,
|
|
gameTime: timeDifferenceInSeconds,
|
|
gameStar: starValue // ✅ Now correctly assigned
|
|
};
|
|
|
|
// ✅ Now perform the second fetch request
|
|
fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(userData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(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 && response.status == 200) {
|
|
document.getElementById('saved-toast').classList.remove('hidden');
|
|
setTimeout(() => {
|
|
document.getElementById('saved-toast').classList.add('hidden');
|
|
}, 2000);
|
|
}
|
|
}, 100);
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred', error);
|
|
});
|
|
|
|
// Final API Call
|
|
const userAnotherData = {
|
|
assignmentId: assignmentId,
|
|
worksheetId: worksheetId,
|
|
studentId: childId,
|
|
submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
|
|
};
|
|
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q';
|
|
|
|
fetch(`https://beanstalkedu.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('Submission API response', data);
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred', error);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred', error);
|
|
});
|
|
}
|
|
}, 150);
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occurred', error);
|
|
});
|
|
} |