280 lines
12 KiB
JavaScript
280 lines
12 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 assignmentId = urlParams.get('assignmentId');
|
|
const worksheetId = urlParams.get('worksheetId');
|
|
const gameId = urlParams.get('id');
|
|
let submitNotic;
|
|
|
|
// console.log(childId);
|
|
let startTime = Date.now();
|
|
|
|
|
|
const url = window.location.href;
|
|
const gameName = url.split('/');
|
|
const gameType = gameName[3].split('?id=');
|
|
// let gameVersion;
|
|
|
|
// console.log("Here is game name ", gameType[0])
|
|
|
|
// 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');
|
|
// }
|
|
|
|
function submitUserData(drawingZone) {
|
|
const endTime = Date.now();
|
|
const timeDifference = endTime - startTime;
|
|
const timeDifferenceInSeconds = timeDifference / 1000;
|
|
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
|
|
|
|
let imageCode;
|
|
let gameScore;
|
|
|
|
if(scoreTotal){
|
|
gameScore = scoreTotal;
|
|
}else{
|
|
gameScore = 0;
|
|
}
|
|
// console.log('This is from main point', scoreTotal);
|
|
drawingZone.renderer.snapshot((image) => {
|
|
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;
|
|
// } else if(scoreTotal === maxScore - 1){
|
|
// starValue = 4;
|
|
// } else{
|
|
// starValue = 3;
|
|
// }
|
|
let maxStarValue = 10;
|
|
let progress = 0;
|
|
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(() => {
|
|
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);
|
|
|
|
const saveUserDataForScreenshot = {
|
|
gameName: gameVersion,
|
|
gameID: gameId,
|
|
screenShot: imageCode,
|
|
childId: childId,
|
|
gameTime: timeDifferenceInSeconds
|
|
};
|
|
fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type' : 'application/json'
|
|
},
|
|
body: JSON.stringify(saveUserDataForScreenshot)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('Gallery Response Data', data)
|
|
|
|
if(data.screenshotUrl){
|
|
let userData = {
|
|
'gameName': gameVersion,
|
|
'gameID': gameId,
|
|
'screenShot': imageCode,
|
|
'childId' : childId,
|
|
'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: childId,
|
|
submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
|
|
};
|
|
const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
|
|
// console.log('Starting submissions API call');
|
|
fetch(`https://app.buzzapp.tech/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 occoured', error)
|
|
})
|
|
});
|
|
}; |