From eb7d7e9da8daf65c2e34ba526f7f93aa846fb4f2 Mon Sep 17 00:00:00 2001 From: Suvodip Date: Thu, 23 Jan 2025 19:16:56 +0530 Subject: [PATCH] change Ui --- public/assets/bg-star.svg | 20 ++ public/saveGameAI.js | 84 ++++--- public/saveGameData.js | 208 ++++++++++------- src/pages/cross/cross_phonics_v1.astro | 297 ++++++++++++++++-------- src/pages/cross/cross_phonics_v2.astro | 215 ++++++++++++----- src/pages/cross/v1.astro | 280 +++++++++++++++------- src/pages/cross/v2.astro | 214 ++++++++++++----- src/pages/cross/v3.astro | 216 ++++++++++++----- src/pages/drag/dragdrop_phonics.astro | 28 ++- src/pages/drag/index.astro | 23 +- src/pages/drag/match_phonics.astro | 19 +- src/pages/drag/v2.astro | 32 +-- src/pages/drag/v3.astro | 38 ++- src/pages/drag/v4.astro | 32 ++- src/pages/tick/tick_phonics_v1.astro | 214 ++++++++++++----- src/pages/tick/tick_phonics_v2.astro | 214 ++++++++++++----- src/pages/tick/tick_phonics_v3.astro | 214 ++++++++++++----- src/pages/tick/v1.astro | 307 ++++++++++++------------- src/pages/tick/v2.astro | 217 ++++++++++++----- src/pages/tick/v3.astro | 217 ++++++++++++----- 20 files changed, 2086 insertions(+), 1003 deletions(-) create mode 100644 public/assets/bg-star.svg diff --git a/public/assets/bg-star.svg b/public/assets/bg-star.svg new file mode 100644 index 0000000..8003bfe --- /dev/null +++ b/public/assets/bg-star.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/saveGameAI.js b/public/saveGameAI.js index f909958..00a618d 100644 --- a/public/saveGameAI.js +++ b/public/saveGameAI.js @@ -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(); }); diff --git a/public/saveGameData.js b/public/saveGameData.js index 9f9e88f..5d76da6 100644 --- a/public/saveGameData.js +++ b/public/saveGameData.js @@ -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!
Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to
perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort!
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 \ No newline at end of file + console.error('An error occoured', error) + }) + }); +}; \ No newline at end of file diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro index 4460da2..1b18b7b 100644 --- a/src/pages/cross/cross_phonics_v1.astro +++ b/src/pages/cross/cross_phonics_v1.astro @@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro"; ---
-
+
@@ -13,68 +13,77 @@ import Layout from "../../layouts/Layout.astro";
- +
+
-
- +

-
-
-
- +
-
+
+ + +