Compare commits
5 Commits
b4
...
6e46901c90
| Author | SHA1 | Date | |
|---|---|---|---|
| 6e46901c90 | |||
| 2ef1814ffe | |||
| bde9907774 | |||
| 275e3c1b2b | |||
| 386c8f7116 |
@@ -1,4 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="19.5" fill="#FFFFFF" stroke="#BB4D6A"/>
|
||||
<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
|
||||
<path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 751 B After Width: | Height: | Size: 749 B |
@@ -1,4 +0,0 @@
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20.9062" r="20" fill="#472DAC"/>
|
||||
<path d="M15.4956 16.4422C14.7066 16.1069 14.3713 15.1305 14.8447 14.4205C15.8013 13.0003 17.3989 11.9648 19.5094 11.9648C21.8269 11.9648 23.4147 13.0201 24.2234 14.3416C24.9137 15.4757 25.3181 17.596 24.253 19.1739C23.0695 20.9195 21.9354 21.452 21.324 22.5763C21.176 22.8426 21.0873 23.0595 21.0281 23.5033C20.9393 24.2232 20.3476 24.7854 19.6178 24.7854C18.7599 24.7854 18.0597 24.0457 18.1583 23.1877C18.2175 22.6848 18.3358 22.1621 18.6119 21.669C19.3713 20.2982 20.8309 19.4895 21.679 18.2765C22.5764 17.0043 22.0735 14.6276 19.5291 14.6276C18.3752 14.6276 17.6257 15.2291 17.1622 15.9491C16.8171 16.5112 16.0971 16.6887 15.4956 16.4422ZM21.4916 28.7302C21.4916 29.815 20.604 30.7026 19.5192 30.7026C18.4344 30.7026 17.5468 29.815 17.5468 28.7302C17.5468 27.6453 18.4344 26.7578 19.5192 26.7578C20.604 26.7578 21.4916 27.6453 21.4916 28.7302Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1021 B |
@@ -5,7 +5,6 @@
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
let gameId;
|
||||
let submitNotic;
|
||||
|
||||
@@ -16,25 +15,25 @@
|
||||
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');
|
||||
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');
|
||||
// }
|
||||
} 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)
|
||||
|
||||
@@ -5,7 +5,6 @@ function retryGame(){
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
const gameVersion = urlParams.get('gameName');
|
||||
let gameId;
|
||||
let submitNotic;
|
||||
|
||||
@@ -16,28 +15,28 @@ let startTime = Date.now();
|
||||
const url = window.location.href;
|
||||
const gameName = url.split('/');
|
||||
const gameType = gameName[3].split('?id=');
|
||||
// let gameVersion;
|
||||
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');
|
||||
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');
|
||||
// }
|
||||
} 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(gameVersion)
|
||||
|
||||
@@ -97,8 +96,8 @@ function submitUserData(drawingZone) {
|
||||
starValue = 3;
|
||||
}
|
||||
let maxStarValue = 5;
|
||||
|
||||
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!` : '';
|
||||
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
@@ -191,7 +190,7 @@ function submitUserData(drawingZone) {
|
||||
'userId' : userId,
|
||||
'gameTime' : timeDifferenceInSeconds,
|
||||
'score' : scoreTotal,
|
||||
'gameStar' : starValue
|
||||
'star' : starValue
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
@@ -202,15 +201,14 @@ function submitUserData(drawingZone) {
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
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('wsSavedImg').classList.remove('-z-10');
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
@@ -68,55 +68,27 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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 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">
|
||||
</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>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -152,45 +124,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
});
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
const element = document.getElementById(id);
|
||||
@@ -199,11 +132,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
if (gameData[id.replace('image', 'a')] === true) {
|
||||
element.classList.add('redBorder');
|
||||
} else {
|
||||
wrongCount += 1;
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
@@ -212,11 +143,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
function saveUserData() {
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 1) {
|
||||
if (checkedCount < 2) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -247,7 +178,6 @@ 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,
|
||||
@@ -255,61 +185,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
'star': 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');
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -320,36 +198,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.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);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -452,24 +305,4 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -86,54 +86,26 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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 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">
|
||||
</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>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -176,44 +148,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById(imageId).src = assetsURL + gameData[imageId];
|
||||
}
|
||||
});
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
@@ -228,7 +162,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
// console.log(wrongCount)
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
@@ -236,14 +169,13 @@ import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 1) {
|
||||
if (checkedCount < 3) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -282,68 +214,15 @@ 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
|
||||
'star': 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');
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -354,36 +233,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.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);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -486,24 +340,4 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -68,55 +68,27 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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 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">
|
||||
</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>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
@@ -153,44 +125,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
});
|
||||
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
const element = document.getElementById(id);
|
||||
@@ -203,21 +137,19 @@ import Layout from "../../layouts/Layout.astro";
|
||||
wrongCount +=1;
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
if (checkedCount < 2) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -250,67 +182,14 @@ 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
|
||||
'star': 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');
|
||||
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);
|
||||
|
||||
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);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -321,36 +200,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.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);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -453,24 +307,4 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -81,55 +81,27 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</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 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">
|
||||
</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>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let wrongCount = 0;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxPoint = 9;
|
||||
let starValue;
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -170,44 +142,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById(imageId).src = assetsURL + gameData[imageId];
|
||||
}
|
||||
});
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
@@ -221,7 +155,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
wrongCount +=1;
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
// console.log(wrongCount)
|
||||
@@ -230,15 +163,14 @@ import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
|
||||
if (checkedCount < 1) {
|
||||
if (checkedCount < 3) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -267,7 +199,6 @@ 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 = {
|
||||
@@ -276,60 +207,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
'star': 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');
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -340,36 +219,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.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);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
} else {
|
||||
// Handle error
|
||||
}
|
||||
@@ -473,24 +327,4 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center ">
|
||||
<img class="sm:w-[70%] md:w-[30%] lg:w-[30%]" draggable="false" id="descImage" src="" alt="" />
|
||||
<img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
|
||||
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
@@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<div class="flex flex-row gap-4 place-content-between">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
@@ -63,47 +63,19 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
</section>
|
||||
</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">
|
||||
</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>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
let starValue;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
@@ -138,44 +110,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
}
|
||||
});
|
||||
function showClipArt() {
|
||||
const clipArtContainer = document.querySelector('.clip-art-container');
|
||||
|
||||
clipArtContainer.classList.remove('hidden');
|
||||
clipArtContainer.classList.add('slide-in');
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
@@ -188,13 +122,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
@@ -219,7 +152,7 @@ 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,
|
||||
@@ -227,60 +160,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
'star': 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');
|
||||
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);
|
||||
|
||||
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);
|
||||
// console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
@@ -291,36 +172,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
})
|
||||
.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);
|
||||
if(response.status == 200){
|
||||
let savedMessageSection = document.getElementById('savedMessage');
|
||||
savedMessageSection.style.display = "block";
|
||||
savedMessageSection.innerHTML = 'Saved Successfully';
|
||||
}
|
||||
} else {
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
@@ -424,24 +280,4 @@ import Layout from "../../layouts/Layout.astro";
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
display: block;
|
||||
animation: slideIn 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="Search..."
|
||||
class="p-2 border border-gray-300 rounded"
|
||||
onkeyup="searchTable()"
|
||||
/>
|
||||
<select id="rowsPerPage" onchange="paginateTable()" class="p-2 border border-gray-300 rounded">
|
||||
<option value="5">5 rows</option>
|
||||
<option value="10">10 rows</option>
|
||||
<option value="15">15 rows</option>
|
||||
</select>
|
||||
<button
|
||||
class="p-2 bg-green-500 text-white rounded"
|
||||
onclick="exportTableToCSV()"
|
||||
>
|
||||
Export to CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table class="min-w-full table-auto border-collapse border border-gray-300 text-sm">
|
||||
<thead class="bg-gray-200">
|
||||
<tr>
|
||||
<th class="p-2 cursor-pointer" onclick="sortTable(0)">Name</th>
|
||||
<th class="p-2 cursor-pointer" onclick="sortTable(1)">Age</th>
|
||||
<th class="p-2 cursor-pointer" onclick="sortTable(2)">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dataTable">
|
||||
<!-- Table rows will be injected by JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
const tableData = [
|
||||
{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },
|
||||
{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Suvodip", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
|
||||
{ name: "Bob", age: 30, country: "UK" },
|
||||
{ name: "Charlie", age: 35, country: "Canada" },
|
||||
// Add more data here
|
||||
];
|
||||
|
||||
let currentPage = 1;
|
||||
let rowsPerPage = 5;
|
||||
let currentData = [...tableData];
|
||||
|
||||
function renderTable(data) {
|
||||
const tableBody = document.getElementById("dataTable");
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
const start = (currentPage - 1) * rowsPerPage;
|
||||
const paginatedData = data.slice(start, start + rowsPerPage);
|
||||
|
||||
paginatedData.forEach(row => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.classList.add("hover:bg-gray-100");
|
||||
tr.innerHTML = `
|
||||
<td class="border p-2">${row.name}</td>
|
||||
<td class="border p-2">${row.age}</td>
|
||||
<td class="border p-2">${row.country}</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
renderPagination(data.length);
|
||||
}
|
||||
|
||||
function sortTable(colIndex) {
|
||||
currentData.sort((a, b) => {
|
||||
const column = Object.keys(a)[colIndex];
|
||||
return a[column] > b[column] ? 1 : -1;
|
||||
});
|
||||
renderTable(currentData);
|
||||
}
|
||||
|
||||
function searchTable() {
|
||||
const query = document.getElementById("searchInput").value.toLowerCase();
|
||||
currentData = tableData.filter(row => {
|
||||
return Object.values(row).some(val => val.toString().toLowerCase().includes(query));
|
||||
});
|
||||
renderTable(currentData);
|
||||
}
|
||||
|
||||
function paginateTable() {
|
||||
rowsPerPage = parseInt(document.getElementById("rowsPerPage").value);
|
||||
currentPage = 1;
|
||||
renderTable(currentData);
|
||||
}
|
||||
|
||||
function renderPagination(totalRows) {
|
||||
const pagination = document.getElementById("pagination");
|
||||
pagination.innerHTML = "";
|
||||
const totalPages = Math.ceil(totalRows / rowsPerPage);
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const button = document.createElement("button");
|
||||
button.classList.add("p-2", "border", "border-gray-300", "rounded");
|
||||
if (i === currentPage) {
|
||||
button.classList.add("bg-blue-500");
|
||||
button.classList.add("text-white");
|
||||
}
|
||||
button.textContent = i;
|
||||
button.onclick = () => {
|
||||
currentPage = i;
|
||||
renderTable(currentData);
|
||||
};
|
||||
pagination.appendChild(button);
|
||||
}
|
||||
}
|
||||
|
||||
// CSV Export Function
|
||||
function exportTableToCSV() {
|
||||
const csvRows = [];
|
||||
const headers = Object.keys(tableData[0]);
|
||||
csvRows.push(headers.join(","));
|
||||
|
||||
currentData.forEach(row => {
|
||||
const values = headers.map(header => row[header]);
|
||||
csvRows.push(values.join(","));
|
||||
});
|
||||
|
||||
const csvContent = csvRows.join("\n");
|
||||
const blob = new Blob([csvContent], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.setAttribute("hidden", "");
|
||||
a.setAttribute("href", url);
|
||||
a.setAttribute("download", "table_data.csv");
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
// Initialize table
|
||||
paginateTable();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@@ -14,15 +14,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,15 +19,15 @@ const numberOfTimes = starNumberOfTime;
|
||||
</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;" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button onclick="" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
@@ -587,7 +587,7 @@ const numberOfTimes = starNumberOfTime;
|
||||
|
||||
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -15,15 +15,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,15 +15,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,15 +15,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,15 +14,15 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wsSavedImg" class="clip-art-container absolute -z-10 bottom-0 right-0">
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
@@ -573,7 +573,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)
|
||||
|
||||
@@ -254,8 +254,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
}
|
||||
|
||||
@@ -9,10 +9,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4,
|
||||
y: window.innerHeight / 4,
|
||||
@@ -24,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0xebedea,
|
||||
backgroundColor: 0xFFFFFF,
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
@@ -46,65 +44,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let animatedLetter;
|
||||
let scoreTotal = 0;
|
||||
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let galleryIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
var assetsList = {}
|
||||
var snapshotButton;
|
||||
let submitButton;
|
||||
let demoButtonButton;
|
||||
let shortUniqueID;
|
||||
let noticeWidth;
|
||||
let noticeHeight;
|
||||
let muteIcon;
|
||||
let retryButton;
|
||||
let maxScore;
|
||||
let cancelIcon;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.65;
|
||||
resetIconWidth = 1.40;
|
||||
tickIconWidth = 1.21;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
submitWidth = 250;
|
||||
submitHeight = 110;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
downloadWidth = 67;
|
||||
downloadHeight = 200;
|
||||
learningWidth = 200;
|
||||
learningHeight = 400
|
||||
}else {
|
||||
submitWidth = 380;
|
||||
submitHeight = 95;
|
||||
noticeWidth = 0;
|
||||
noticeHeight = 0;
|
||||
downloadWidth = 180;
|
||||
downloadHeight = 70;
|
||||
learningWidth = 450;
|
||||
learningHeight = 400
|
||||
}
|
||||
// const urls = window.location.href;
|
||||
// const gameNames = urls.split('/');
|
||||
// const gameTypes = gameNames[3].split('?id=');
|
||||
// console.log(gameTypes[0]);
|
||||
|
||||
|
||||
if(isMobile){
|
||||
@@ -113,13 +56,13 @@ import Layout from "../../layouts/Layout.astro";
|
||||
canvasScale = 0.14
|
||||
canvasHeight = 35;
|
||||
letterHeight = 30;
|
||||
letterScale = 1.8;
|
||||
letterScale = 1.1;
|
||||
backgroundScale = 0.8;
|
||||
sunScale = 0.1;
|
||||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
animated0videoScale = 1;
|
||||
animated0videoScale = 0.6;
|
||||
animated0Height = 32;
|
||||
helpButtonHeight = customHeight / 1.1;
|
||||
helpButtonWidth = customWidth / 2 + 10;
|
||||
@@ -130,19 +73,20 @@ import Layout from "../../layouts/Layout.astro";
|
||||
submitHeight = customHeight / 1.1;
|
||||
noticeWidth = window.innerWidth * 0.5 - 100;
|
||||
noticeHeight = window.innerHeight * 0.38;
|
||||
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
cloudHeight = 250;
|
||||
canvasScale = 0.195;
|
||||
canvasHeight = 20;
|
||||
letterHeight = 10;
|
||||
letterScale = 1.8;
|
||||
letterScale = 1.2;
|
||||
backgroundScale = 1;
|
||||
sunScale = 0.2;
|
||||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
animated0videoScale = 1;
|
||||
animated0videoScale = 0.70;
|
||||
animated0Height = 20;
|
||||
helpButtonHeight = customHeight / 2 + 40;
|
||||
helpButtonWidth = customWidth / 1.32;
|
||||
@@ -175,32 +119,17 @@ import Layout from "../../layouts/Layout.astro";
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
this.load.image('backgroundImage', '/assets/bg6.png');
|
||||
this.load.image('cloud', '/assets/cloud.png');
|
||||
this.load.image('canvas', '/assets/canvas4.png');
|
||||
this.load.image('sun', '/assets/sun.png');
|
||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
|
||||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
}
|
||||
function create() {
|
||||
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
|
||||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
|
||||
|
||||
const borderBottom = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
borderBottom.lineStyle(1, 0x0348A8);
|
||||
borderBottom.setAlpha(0.2);
|
||||
borderBottom.beginPath();
|
||||
borderBottom.moveTo(x, y);
|
||||
borderBottom.lineTo(x + lineWidth, y);
|
||||
borderBottom.strokePath();
|
||||
|
||||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||||
|
||||
|
||||
submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
|
||||
font: '900 24px Quicksand',
|
||||
fill: '#05b3a4',
|
||||
@@ -220,39 +149,103 @@ import Layout from "../../layouts/Layout.astro";
|
||||
// console.log('Clicked');
|
||||
submitUserData(this);
|
||||
})
|
||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
|
||||
|
||||
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||
cloud.setDepth(-1.8);
|
||||
const scrollSpeed = 0.5;
|
||||
this.time.addEvent({
|
||||
loop: true,
|
||||
callback: () => {
|
||||
cloud.tilePositionX += scrollSpeed;
|
||||
},
|
||||
delay: 16, // Adjust the delay for the desired scrolling speed
|
||||
});
|
||||
|
||||
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||
|
||||
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||
const duration = 3000; // Duration of the animation in milliseconds
|
||||
|
||||
// Create a scaling tween
|
||||
this.tweens.add({
|
||||
targets: sun,
|
||||
scaleX: scaleFactor,
|
||||
scaleY: scaleFactor,
|
||||
duration: duration,
|
||||
ease: 'Linear',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
|
||||
const number0 = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
|
||||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
|
||||
firstScreen.setVisible(false);
|
||||
|
||||
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
// Set up a mask for the drawing area based on the canvas dimensions
|
||||
const maskGraphics = this.make.graphics()
|
||||
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
|
||||
const mask = maskGraphics.createGeometryMask();
|
||||
|
||||
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
hideButton.setInteractive().on('pointerdown', () => {
|
||||
animatedLetter.stop();
|
||||
isDemoButtonClicked = false;
|
||||
firstScreen.setVisible(false);
|
||||
hideButton.setVisible(false); // Hide the "Hide" button
|
||||
demoButton.setVisible(true); // Show the "Demo" button
|
||||
graphics.setVisible(true);
|
||||
animatedLetter.setVisible(false);
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
|
||||
demoButton.setInteractive().on('pointerdown', () => {
|
||||
animatedLetter.setCurrentTime(0);
|
||||
animatedLetter.play(true);
|
||||
graphics.setVisible(false);
|
||||
firstScreen.setVisible(true);
|
||||
// animatedLetter.setVisible(true);
|
||||
|
||||
if(animatedLetter.visible){
|
||||
animatedLetter.setVisible(false);
|
||||
graphics.setVisible(true);
|
||||
} else{
|
||||
graphics.setVisible(false);
|
||||
animatedLetter.setVisible(true);
|
||||
}
|
||||
// animatedLetter.visible ? animatedLetter.setVisible(false): animatedLetter.setVisible(true);
|
||||
demoButton.setVisible(false); // Hide the "Demo" button
|
||||
hideButton.setVisible(true); // Show the "Hide" button
|
||||
animatedLetter.setVisible(true);
|
||||
});
|
||||
|
||||
|
||||
// const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// const baseFontSize = 16;
|
||||
// const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
|
||||
|
||||
let responsiveFontSize = isMobile ? 16 : 32;
|
||||
this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
|
||||
|
||||
const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
|
||||
animatedLetter.setLoop(true);
|
||||
// Play the video
|
||||
@@ -268,13 +261,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
});
|
||||
|
||||
let textX, textY;
|
||||
let stepTextSize = isMobile ? 12 : 16;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
|
||||
|
||||
const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
|
||||
const audioOneAudio = this.sound.add('audioOne');
|
||||
// audioOneAudio.play();
|
||||
firstLayer.setDepth(1);
|
||||
@@ -297,7 +288,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
if (distance >= 0) {
|
||||
|
||||
// firstTextLayer.setVisible(false);
|
||||
firstTextLayer.setVisible(false);
|
||||
firstLayer.setAlpha(1);
|
||||
} else {
|
||||
firstLayer.setAlpha(0.5);
|
||||
@@ -307,7 +298,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
|
||||
graphics = this.add.graphics();
|
||||
// graphics.setMask(mask);
|
||||
graphics.setMask(mask);
|
||||
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDrawing = true;
|
||||
@@ -337,21 +328,22 @@ import Layout from "../../layouts/Layout.astro";
|
||||
fill: true
|
||||
}
|
||||
})
|
||||
audioOneAudio.play();
|
||||
// startButton.setInteractive().on('pointerdown', () => {
|
||||
// audioOneAudio.play();
|
||||
// // gmStartTime();
|
||||
// gamestart = new Date();
|
||||
// gameStartTime = gamestart.toLocaleString();
|
||||
// // console.log("Page loaded on: " + gameStartTime);
|
||||
// firstTextLayer.setVisible(true);
|
||||
// animatedLetter.setVisible(false);
|
||||
// firstScreen.setVisible(false);
|
||||
// graphics.setVisible(true);
|
||||
// demoButton.setVisible(true);
|
||||
// startButton.setVisible(false);
|
||||
// submitButton.setVisible(true);
|
||||
// })
|
||||
firstTextLayer.setVisible(false);
|
||||
startButton.setInteractive().on('pointerdown', () => {
|
||||
audioOneAudio.play();
|
||||
// gmStartTime();
|
||||
gamestart = new Date();
|
||||
gameStartTime = gamestart.toLocaleString();
|
||||
// console.log("Page loaded on: " + gameStartTime);
|
||||
firstTextLayer.setVisible(true);
|
||||
animatedLetter.setVisible(false);
|
||||
firstScreen.setVisible(false);
|
||||
graphics.setVisible(true);
|
||||
hideButton.setVisible(false);
|
||||
demoButton.setVisible(true);
|
||||
startButton.setVisible(false);
|
||||
submitButton.setVisible(true);
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
</div>
|
||||
</form>
|
||||
@@ -99,7 +99,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
@@ -117,7 +117,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let wrongCount = 0;
|
||||
@@ -125,7 +124,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
let totalPoints = 0;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
@@ -214,7 +213,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.add('redBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
@@ -223,11 +221,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
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) {
|
||||
if (checkedCount < 2) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 2 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -259,14 +257,13 @@ 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
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
|
||||
@@ -340,7 +337,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
@@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
</div>
|
||||
</form>
|
||||
@@ -123,7 +123,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
@@ -141,11 +141,10 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let totalPoints = 0;
|
||||
@@ -245,7 +244,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.add('redBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
@@ -254,11 +252,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 1) {
|
||||
if (checkedCount < 3) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 2 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -286,7 +284,6 @@ 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,
|
||||
@@ -294,7 +291,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
'gameStar': starValue
|
||||
'star': starValue
|
||||
|
||||
};
|
||||
// console.log(userData);
|
||||
@@ -369,7 +366,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
@@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
@@ -99,13 +99,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let starValue;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
@@ -183,7 +182,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.add('redBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
@@ -213,14 +211,13 @@ 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
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
@@ -292,7 +289,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
@@ -77,7 +77,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
|
||||
<!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
|
||||
</div>
|
||||
</form>
|
||||
@@ -96,7 +96,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
@@ -114,13 +114,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let totalPoints = 0;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let maxStarValue = 5;
|
||||
@@ -186,7 +185,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
function progressIncrement() {
|
||||
@@ -199,6 +198,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
const element = document.getElementById(id);
|
||||
@@ -211,20 +211,19 @@ import Layout from "../../layouts/Layout.astro";
|
||||
wrongCount += 1;
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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) {
|
||||
if (checkedCount < 2) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -255,14 +254,13 @@ 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
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);let progress = 0;
|
||||
progressIncrement();
|
||||
@@ -335,7 +333,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
@@ -365,6 +363,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
|
||||
@@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
|
||||
<p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
|
||||
</div>
|
||||
</form>
|
||||
@@ -123,7 +123,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
@@ -140,13 +141,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let wrongCount = 0;
|
||||
let starValue;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
const progressBar = document.createElement('div');
|
||||
@@ -241,22 +241,21 @@ import Layout from "../../layouts/Layout.astro";
|
||||
} else {
|
||||
element.classList.add('redBorder');
|
||||
wrongCount += 1;
|
||||
console.log("Wrong Count ", wrongCount)
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
|
||||
function saveUserData() {
|
||||
document.getElementById('allParentDiv').style.display = 'block';
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
|
||||
const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
|
||||
if (checkedCount < 1) {
|
||||
if (checkedCount < 3) {
|
||||
// Show error message if less than 3 checkboxes are checked
|
||||
let errorMessageSection = document.getElementById('errorMessage');
|
||||
errorMessageSection.style.display = "block";
|
||||
errorMessageSection.innerHTML = 'Please select at least 1 options.';
|
||||
errorMessageSection.innerHTML = 'Please select at least 3 options.';
|
||||
return;
|
||||
} else {
|
||||
// Hide error message if validation passes
|
||||
@@ -296,14 +295,13 @@ 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
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
@@ -376,7 +374,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
@@ -82,7 +82,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<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>
|
||||
<p 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%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
@@ -99,13 +100,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const gameId = params.get('id');
|
||||
const userId = params.get('userId');
|
||||
const gameName = params.get('gameName');
|
||||
let startTime = Date.now();
|
||||
let gameData = null;
|
||||
let starValue;
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
// let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
|
||||
let totalPoints = 0;
|
||||
let maxStarValue = 5;
|
||||
let progress = 0;
|
||||
@@ -194,7 +194,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
element.classList.add('redBorder');
|
||||
}
|
||||
} else {
|
||||
wrongCount -= 1;
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
}
|
||||
}
|
||||
@@ -224,14 +223,13 @@ 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
|
||||
'star': starValue
|
||||
};
|
||||
// console.log(userData);
|
||||
progressIncrement();
|
||||
@@ -303,7 +301,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
|
||||
Reference in New Issue
Block a user