change Ui
This commit is contained in:
Suvodip
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user