kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: kar:b3
Branches Tags
kar:fetch2 kar:staging kar:master kar:dev kar:prod kar:newb2 kar:newb kar:b4 kar:b3 kar:b2
..
compare: kar:d22a4da6d6f8013eadcb67d4a61c0e16428aa8cc
Branches Tags
kar:staging kar:master kar:dev kar:prod kar:newb2 kar:newb kar:b4 kar:fetch2 kar:b3 kar:b2

8 Commits
b3 ... d22a4da6d6

Author SHA1 Message Date
Subhodip Ghosh
d22a4da6d6 Merge pull request 's1' (#14) from b2 into master 
Reviewed-on: #14
 2024-06-12 16:35:11 +00:00
Subhodip Ghosh
663830d509 Merge pull request 'change d' (#13) from b2 into master 
Reviewed-on: #13
 2024-06-12 05:47:00 +00:00
Subhodip Ghosh
3a799f2b1f Merge pull request 'replace d' (#12) from b2 into master 
Reviewed-on: #12
 2024-06-11 15:32:22 +00:00
Subhodip Ghosh
c554fa165c Merge pull request 'b2' (#11) from b2 into master 
Reviewed-on: #11
 2024-06-11 11:10:57 +00:00
Subhodip Ghosh
6c6d5b3379 Merge pull request 's1' (#10) from b2 into master 
Reviewed-on: #10
 2024-06-07 11:09:05 +00:00
Subhodip Ghosh
2abe729d99 Merge pull request 's1' (#9) from bnew2 into master 
Reviewed-on: #9
 2024-06-07 10:26:11 +00:00
kar
579d610bdb Merge pull request 'c' (#8) from bnew2 into master 
Reviewed-on: #8
 2024-06-06 09:45:47 +00:00
Subhodip Ghosh
3db5ccd710 Merge pull request 'bnew2' (#7) from bnew2 into master 
Reviewed-on: #7
 2024-05-25 14:01:39 +00:00
99 changed files with 4062 additions and 3469 deletions
Expand all files Collapse all files

1
info.txt
View File

@@ -1 +0,0 @@
1. Auto brake line Drag v4 Left & Right Heading.

BIN
public/assets/color_button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

2
public/assets/svg/button-icon.svg
View File

@@ -1 +1 @@
<svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> <svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 B

After

Width:  |  Height:  |  Size: 698 B

4
public/assets/svg/clear.svg
View File

@@ -1,4 +0,0 @@
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 868 B

3
public/assets/svg/pointer.svg
View File

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 151 B

111
public/saveGameData.js
View File

@@ -1,111 +0,0 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid');
let gameId;
let startTime = Date.now();
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];
} else if(gameName.length == 5){
gameVersion = gameName[3];
gameId = urlParams.get('id');
}else if(gameName.length == 6){
gameVersion = gameType[0] + '-' + gameName[4];
gameId = urlParams.get('id');
}
function submitUserData(drawingZone) {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
let imageCode;
let gameScore;
if(scoreTotal){
gameScore = scoreTotal;
}else{
gameScore = 0;
}
// console.log('This is from main point', scoreTotal);
drawingZone.renderer.snapshot((image) => {
if(gameType[0] == 'drawing'){
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);
imageCode = image.src;
}else if( gameType[0] == "guided-tracing"){
// submitButton.setVisible(true);
// snapshotButton.setVisible(true);
// customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = `guided-tracing-${gameId}.png`;
link.click();
document.body.removeChild(image);
imageCode = image.src;
}
let userData = {
'gameName': gameVersion,
'gameID': gameId,
'screenShot': imageCode,
'userId' : userId,
'gameTime' : timeDifferenceInSeconds,
'score' : scoreTotal
// 'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
// Clear the drawing
// graphics.clear();
});
};

92
src/pages/cross/cross_phonics_v1.astro
View File

@@ -5,71 +5,61 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -79,12 +69,10 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -135,12 +123,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -156,22 +146,20 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) { if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
// Move the userData object creation inside the saveUserData function if needed // Move the userData object creation inside the saveUserData function if needed
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); // console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -203,11 +191,12 @@ import Layout from "../../layouts/Layout.astro";
input[type="checkbox"]{ input[type="checkbox"]{
-webkit-appearance: initial; -webkit-appearance: initial;
appearance: initial; appearance: initial;
border: 1px solid rgb(128, 128, 128); border: 1px solid gray;
border-radius: 5px; border-radius: 5px;
/* background: gray; */ /* background: gray; */
width: 40px; width: 40px;
height: 40px; height: 40px;
position: relative; position: relative;
} }
input[type="checkbox"]:checked { input[type="checkbox"]:checked {
@@ -259,6 +248,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

113
src/pages/cross/cross_phonics_v2.astro
View File

@@ -5,89 +5,79 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7" class="h-[50px] overflow-y-auto"></p> <p id="label7"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8" class="h-[50px] overflow-y-auto"></p> <p id="label8"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9" class="h-[50px] overflow-y-auto"></p> <p id="label9"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -97,11 +87,9 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -149,23 +137,26 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder'); element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} }
} else { } else {
element.classList.remove('redBorder', 'greenBorder'); element.classList.remove('greenBorder', 'redBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -191,20 +182,19 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) { if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v2@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, // 'game_start' : gameStartTime,
'score': totalPoints, 'score' : totalPoints,
}; };
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -292,6 +282,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

63
src/pages/cross/v1.astro
View File

@@ -5,71 +5,61 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -79,12 +69,10 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -135,12 +123,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -163,14 +153,13 @@ import Layout from "../../layouts/Layout.astro";
// Move the userData object creation inside the saveUserData function if needed // Move the userData object creation inside the saveUserData function if needed
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); // console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -189,6 +178,7 @@ import Layout from "../../layouts/Layout.astro";
}); });
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm'); const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) { contactForm.addEventListener('submit', async function (event) {
@@ -258,6 +248,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

114
src/pages/cross/v2.astro
View File

@@ -5,89 +5,79 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7" class="h-[50px] overflow-y-auto"></p> <p id="label7"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8" class="h-[50px] overflow-y-auto"></p> <p id="label8"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9" class="h-[50px] overflow-y-auto"></p> <p id="label9"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -97,11 +87,9 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -149,24 +137,26 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder'); element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} }
} else { } else {
element.classList.remove('redBorder', 'greenBorder'); element.classList.remove('greenBorder', 'redBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -192,20 +182,19 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) { if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v2@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, // 'game_start' : gameStartTime,
'score': totalPoints, 'score' : totalPoints,
}; };
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -293,6 +282,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

59
src/pages/cross/v3.astro
View File

@@ -6,27 +6,17 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-col"> <div class="flex flex-col">
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center "> <div class="flex flex-col justify-center place-items-center ">
<img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" /> <img class="lg:w-[50%]" 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> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
@@ -57,7 +47,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -67,12 +57,10 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -112,22 +100,25 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder'); element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} }
} else { } else {
element.classList.remove('redBorder', 'greenBorder'); element.classList.remove('greenBorder', 'redBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3']; const checkboxes = ['a1', 'a2', 'a3'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -143,20 +134,19 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) { if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); // console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -245,6 +235,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea{ #LearningArea, #LearningSubArea{

246
src/pages/drag/dragdrop_phonics.astro
View File

@@ -49,49 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -111,6 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -159,7 +131,7 @@ import Layout from '../../layouts/Layout.astro';
.then(({data}) => { .then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=80"; imageCustomWidth = "?width=100";
} else{ } else{
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
} }
@@ -256,11 +228,8 @@ import Layout from '../../layouts/Layout.astro';
} }
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("tick", '/assets/tick.png');
this.load.image("muteIcon", '/assets/svg/mute.svg'); this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
@@ -357,168 +326,135 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`}); this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; // Base font size for your text
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const baseFontSize = 22;
let wrapWidth; // Calculate responsive font size based on screen width
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const url = window.location.href; const URL = window.location.href;
// const gameName = url.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
// window.load // window.load
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }).setDepth(1); }).setDepth(1);
// submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
// submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8; // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
if(isMobile){
blocks1Width1 = 180;
blocks1Width2 = 90;
blocks1Width3 = 2;
blocks1Width4 = 90;
blocks1Width5 = 180;
blocks1Width6 = 90;
blocks1Width7 = 2;
blocks1Width8 = 90;
} else{
blocks1Width1 = 200;
blocks1Width2 = 100;
blocks1Width3 = 2;
blocks1Width4 = 100;
blocks1Width5 = 200;
blocks1Width6 = 100;
blocks1Width7 = 2;
blocks1Width8 = 100;
}
const blocks = [ const blocks = [
{ {
x: displayW / 2 - blocks1Width1, x: displayW / 2 - 200,
y: window.innerHeight - 290, y: window.innerHeight - 250,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: displayW / 2 - blocks1Width2, x: displayW / 2-100,
y: window.innerHeight - 290, y: window.innerHeight - 250,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: displayW / blocks1Width3, x: displayW / 2,
y: window.innerHeight - 290, y: window.innerHeight - 250,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: displayW / 2 + blocks1Width4, x: displayW / 2+100,
y: window.innerHeight - 290, y: window.innerHeight - 250,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
}, },
{ {
x: displayW / 2 - blocks1Width5, x: displayW / 2-200,
y: window.innerHeight - 160, y: window.innerHeight - 120,
textureKey: "blocks5", textureKey: "blocks5",
id: "block5", id: "block5",
}, },
{ {
x: displayW / 2 - blocks1Width6, x: displayW / 2-100,
y: window.innerHeight - 160, y: window.innerHeight - 120,
textureKey: "blocks6", textureKey: "blocks6",
id: "block6", id: "block6",
}, },
{ {
x: displayW / blocks1Width7, x: displayW / 2,
y: window.innerHeight - 160, y: window.innerHeight - 120,
textureKey: "blocks7", textureKey: "blocks7",
id: "block7", id: "block7",
}, },
{ {
x: displayW / 2 + blocks1Width8, x: displayW / 2+100,
y: window.innerHeight - 160, y: window.innerHeight - 120,
textureKey: "blocks8", textureKey: "blocks8",
id: "block8", id: "block8",
}, },
@@ -529,7 +465,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -550,7 +486,7 @@ import Layout from '../../layouts/Layout.astro';
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -569,7 +505,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true; droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true); targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0.5); targetZoneBorders[targetIndex].setAlpha(0);
return; return;
} }
}); });
@@ -588,11 +524,11 @@ import Layout from '../../layouts/Layout.astro';
}); });
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
// retryButton.setVisible(false); retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
@@ -605,7 +541,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

102
src/pages/drag/index.astro
View File

@@ -49,10 +49,8 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
@@ -71,25 +69,11 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 5;
muteIconWidth = 1.8; muteIconWidth = 2;
resetIconWidth = 1.47; resetIconWidth = 1.6;
tickIconWidth = 1.24; tickIconWidth = 1.34;
cancelIconWidth = 1.08; cancelIconWidth = 1.16;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -97,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -323,12 +312,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; // Base font size for your text
let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940}; const baseFontSize = 30;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; // Calculate responsive font size based on screen width
let wrapWidth; const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -365,33 +353,33 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const URL = window.location.href; const URL = window.location.href;
// const gameName = URL.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
// window.load // window.load
const graphics = this.add.graphics(); const graphics = this.add.graphics();
@@ -461,7 +449,7 @@ import Layout from '../../layouts/Layout.astro';
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}); });
const droppedBlocks = []; const droppedBlocks = [];
@@ -552,10 +540,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
resultView.setVisible(false); resultView.setVisible(false);
} }

213
src/pages/drag/match_phonics.astro
View File

@@ -49,47 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -105,6 +72,13 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -126,7 +100,6 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@@ -260,13 +233,12 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("topMatch", "/assets/top_match.jpg"); // this.load.image("bg", '/assets/bgwhite.jpg');
this.load.image("topLogo", "/assets/top_logo.jpg"); // this.load.image("target1", assetsList.right_image1);
this.load.image("tickIcon", '/assets/svg/tick2.svg'); // this.load.image("target2", '/assets/hay.png');
this.load.image("muteIcon", '/assets/svg/mute.svg'); // this.load.image("target3", '/assets/mat.png');
this.load.image("cancelIcon", '/assets/svg/cancel.svg'); // this.load.image("target4", '/assets/star.png');
this.load.image("resetIcon", '/assets/svg/reset.svg'); this.load.image("border", '/assets/squar.png');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -326,20 +298,15 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
let wrapWidth; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
let textSizeScale; // Base font size for your text
if(isMobile){ const baseFontSize = 20
wrapWidth = 10; // Calculate responsive font size based on screen width
textSizeScale = 540 const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
}else{ const descrptText = this.add.text(screenCenterX, 76, data.description, {
wrapWidth = 200; font: ` ${responsiveFontSize}px Quicksand`,
textSizeScale = 940 fill: '#7c4c23',
}; }).setOrigin(0.5);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@@ -358,122 +325,104 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const url = window.location.href; const URL = window.location.href;
// const gameName = url.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); // window.load
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 510, "target3");
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }).setDepth(1); }).setDepth(1);
// submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
// submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@@ -502,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 105, block.y + 47); this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@@ -524,12 +473,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }) })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
@@ -542,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

1
src/pages/drag/testv3.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {

5
src/pages/drag/tmp.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -451,7 +450,7 @@ import Layout from '../../layouts/Layout.astro';
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
// console.log(index+1) console.log(index+1)
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
@@ -522,7 +521,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

5
src/pages/drag/tmp2.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -545,11 +544,11 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

213
src/pages/drag/v2.astro
View File

@@ -49,47 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -105,6 +72,13 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -126,7 +100,6 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@@ -260,13 +233,12 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("topMatch", "/assets/top_match.jpg"); // this.load.image("bg", '/assets/bgwhite.jpg');
this.load.image("topLogo", "/assets/top_logo.jpg"); // this.load.image("target1", assetsList.right_image1);
this.load.image("tickIcon", '/assets/svg/tick2.svg'); // this.load.image("target2", '/assets/hay.png');
this.load.image("muteIcon", '/assets/svg/mute.svg'); // this.load.image("target3", '/assets/mat.png');
this.load.image("cancelIcon", '/assets/svg/cancel.svg'); // this.load.image("target4", '/assets/star.png');
this.load.image("resetIcon", '/assets/svg/reset.svg'); this.load.image("border", '/assets/squar.png');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -326,20 +298,15 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
let wrapWidth; // Base font size for your text
let textSizeScale; const baseFontSize = 20
if(isMobile){ // Calculate responsive font size based on screen width
wrapWidth = 10; const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
textSizeScale = 540 const descrptText = this.add.text(screenCenterX, 76, data.description, {
} else{ font: ` ${responsiveFontSize}px Quicksand`,
wrapWidth = 200; fill: '#7c4c23',
textSizeScale = 940 }).setOrigin(0.5);
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@@ -358,122 +325,104 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const url = window.location.href; const URL = window.location.href;
// const gameName = URL.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale(); // window.load
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 510, "target3");
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }).setDepth(1); }).setDepth(1);
// submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
// submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@@ -502,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 105, block.y + 47); this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@@ -524,12 +473,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }) })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
@@ -542,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

5
src/pages/drag/v20.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -492,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

193
src/pages/drag/v3.astro
View File

@@ -49,51 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
let retryButtonWidth;
let leftTargetZoneW;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -101,7 +64,7 @@ import Layout from '../../layouts/Layout.astro';
buttonHeight = 0; buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140; retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50; retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth * 0.9 - 30; leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
noticeWidth = 100; noticeWidth = 100;
@@ -113,7 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 172; leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -145,19 +114,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 330, y: 340,
name: "target2", name: "target2",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 480, y: 510,
name: "target3", name: "target3",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 650, y: 680,
name: "target4", name: "target4",
block: null, block: null,
}, },
@@ -169,19 +138,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 330, y: 340,
name: "target6", name: "target6",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 480, y: 510,
name: "target7", name: "target7",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 650, y: 680,
name: "target8", name: "target8",
block: null, block: null,
}, },
@@ -291,13 +260,8 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("tickIcon", '/assets/svg/tick2.svg'); this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("muteIcon", '/assets/svg/mute.svg'); this.load.image("border", '/assets/squar.png');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
// this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/svg/border.svg');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -338,7 +302,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
// console.log(data) console.log(data)
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -374,91 +338,72 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540;
} else{
wrapWidth = 200;
textSizeScale = 940
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; // Base font size for your text
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize; const baseFontSize = 30;
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); // Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const URL = window.location.href; const URL = window.location.href;
// const gameName = URL.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
// window.load // window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }).setDepth(1); }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
const blocks = [ const blocks = [
{ {
x: displayW / 2-400, x: displayW / 2-400,
@@ -514,8 +459,8 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => { targetZones.forEach((targetZone, index) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -563,11 +508,11 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
// retryButton.setVisible(false); retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
@@ -578,7 +523,7 @@ import Layout from '../../layouts/Layout.astro';
} }
//resultView scoreTotal //resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match){ if(match){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

5
src/pages/drag/v30.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -303,7 +302,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
// console.log(data) console.log(data)
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -524,7 +523,7 @@ import Layout from '../../layouts/Layout.astro';
} }
//resultView scoreTotal //resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match) console.log(match)
if(match){ if(match){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

252
src/pages/drag/v4.astro
View File

@@ -49,52 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
let leftTargetZoneW;
let rightTargetZoneW;
let retryButtonWidth;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -114,6 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -161,7 +130,11 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";}; if(isMobile){
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.element1 = assetsURL + image1 + imageCustomWidth; assetsList.element1 = assetsURL + image1 + imageCustomWidth;
assetsList.element2 = assetsURL + image2 + imageCustomWidth; assetsList.element2 = assetsURL + image2 + imageCustomWidth;
@@ -255,17 +228,9 @@ import Layout from '../../layouts/Layout.astro';
} }
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg")
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.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -301,6 +266,25 @@ import Layout from '../../layouts/Layout.astro';
} }
create() { create() {
// const borderGraphics = this.add.graphics();
// const borderThickness = 6;
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
// borderGraphics.beginPath();
// borderGraphics.moveTo(borderX, 130);
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
// borderGraphics.strokePath();
// borderGraphics.closePath();
// const borderGraphicsX = this.add.graphics();
// const borderThicknessX = 6;
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
// const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
// borderGraphicsX.beginPath();
// borderGraphicsX.moveTo(0, borderY);
// borderGraphicsX.lineTo(window.innerWidth, borderY);
// borderGraphicsX.strokePath();
// borderGraphicsX.closePath();
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
@@ -343,110 +327,88 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 20, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 20, data.label2, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 20, data.label3, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 20, data.label4, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`}); this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
} else if(isTab){
this.add.text(window.innerWidth / 17, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(window.innerWidth / 1.8, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`}); this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
} }
let wrapWidth; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
let textSizeScale; // Base font size for your text
if(isMobile){ const baseFontSize = 22;
wrapWidth = 10; // Calculate responsive font size based on screen width
textSizeScale = 540 const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
} else{ const descrptText = this.add.text(screenCenterX, 95, data.description, {
wrapWidth = 200; font: ` ${responsiveFontSize}px Quicksand`,
textSizeScale = 940 fill: '#7c4c23',
} }).setOrigin(0.5);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
// const URL = window.location.href; const URL = window.location.href;
// const gameName = URL.split('/'); const gameName = URL.split('/');
// let userData = { let userData = {
// 'user': 'drawing@beanstalkedu.com', 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3], 'game_name': gameName[3],
// 'starts': formattedDateTime, 'starts': formattedDateTime,
// // 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
// }; };
// function submitUserData() { function submitUserData() {
// fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
// method: 'POST', method: 'POST',
// headers: { headers: {
// 'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
// }, },
// body: JSON.stringify(userData) body: JSON.stringify(userData)
// }) })
// .then(response => { .then(response => {
// if(response.ok){ if(response.ok){
// // console.log('Data Saved', response) // console.log('Data Saved', response)
// } else{ } else{
// // console.log('Something Wrong', response) // console.log('Something Wrong', response)
// } }
// }) })
// .catch(error => { .catch(error => {
// console.error('An error occured', error) console.error('An error occured', error)
// }); });
// }; };
// window.load // window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand', font: '600 30px Quicksand',
// fill: '#fff', fill: '#fff',
// backgroundColor: 'blue', backgroundColor: 'blue',
// padding: { x: 20, y: 10 }, padding: { x: 20, y: 10 },
// }).setDepth(1); }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
const blocks = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@@ -503,52 +465,35 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x , targetZone.y, "border").setAlpha(0.05).setScale(borderScale); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
let blocksScale; const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
if(isMobile){
blocksScale = 0.75;
} else{
blocksScale = 1;
}
const newBlock = this.add.sprite(block.x + 10, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(blocksScale);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(blocksScale+.3); newBlock.setScale(1.3);
newBlock.x = dragX; newBlock.x = dragX;
newBlock.y = dragY; newBlock.y = dragY;
}); });
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(blocksScale).setDepth(-2); newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => { targetZones.forEach((targetZone, targetIndex) => {
let phaserGeomX, phaserGeomY, blockSetPosition;
if(isMobile){
phaserGeomX = 50;
phaserGeomY = 25;
blockSetPosition = 40;
}else{
phaserGeomX = 200;
phaserGeomY = 100;
blockSetPosition = 50;
}
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
const col = counter % 2; const col = counter % 2;
const row = Math.floor(counter / 2); const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition); newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
newBlock.disableInteractive(); newBlock.disableInteractive();
targetZone.block = newBlock; targetZone.block = newBlock;
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);
@@ -579,10 +524,11 @@ import Layout from '../../layouts/Layout.astro';
}); });
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
@@ -595,7 +541,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

3
src/pages/drag/v40.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -540,7 +539,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log("Score Total", scoreTotal) console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

437
src/pages/drawing/drawing_phonics.astro
View File

File diff suppressed because one or more lines are too long

445
src/pages/drawing/drawing_writo.astro
View File

File diff suppressed because one or more lines are too long

418
src/pages/drawing/index.astro
View File

File diff suppressed because one or more lines are too long

417
src/pages/drawing/v2.astro
View File

File diff suppressed because one or more lines are too long

387
src/pages/drawing/v3.astro
View File

File diff suppressed because one or more lines are too long

50
src/pages/guided-tracing/0.astro
View File

@@ -8,9 +8,8 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script> <script is:inline>
<script is:inline> const isMobile = window.innerWidth <= 768;
const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4, y: window.innerHeight / 4,
@@ -42,13 +41,7 @@ import Layout from "../../layouts/Layout.astro";
let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let gameStartTime = "stat timr here";
// const urls = window.location.href;
// const gameNames = urls.split('/');
// const gameTypes = gameNames[3].split('?id=');
// console.log(gameTypes[0]);
if(isMobile){ if(isMobile){
cloudeSize = 200; cloudeSize = 200;
@@ -127,6 +120,35 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image('canvasStand', '/assets/stand2.png');
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -149,8 +171,10 @@ import Layout from "../../layouts/Layout.astro";
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitNotic.setVisible(false); submitButton.setVisible(false);
submitUserData(this); submitNotic.setVisible(true);
// windowLoad();
submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); 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.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -246,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; 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); 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 = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);

43
src/pages/guided-tracing/1.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "stat timr here"; let gameStartTime = "stat timr here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -138,11 +165,13 @@ let scoreTotal = 0; let isDrawing = false;
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitNotic.setVisible(false); submitButton.setVisible(false);
submitUserData(this); submitNotic.setVisible(true);
// windowLoad();
submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);

39
src/pages/guided-tracing/2.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);

39
src/pages/guided-tracing/3.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);

39
src/pages/guided-tracing/4.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -125,7 +124,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -148,9 +175,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -247,7 +274,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);

39
src/pages/guided-tracing/5.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -126,7 +125,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -149,9 +176,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -248,7 +275,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);

39
src/pages/guided-tracing/6.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);

39
src/pages/guided-tracing/7.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);

39
src/pages/guided-tracing/8.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);

39
src/pages/guided-tracing/9.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);

39
src/pages/guided-tracing/A.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -123,7 +122,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -146,9 +173,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -237,7 +264,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);

39
src/pages/guided-tracing/B.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -142,9 +169,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/C.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer; let firstLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,9 +166,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -238,7 +265,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/D.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -141,9 +168,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/E.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,9 +167,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -240,7 +267,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);

39
src/pages/guided-tracing/F.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);

44
src/pages/guided-tracing/G.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -111,8 +110,41 @@ let scoreTotal = 0; let isDrawing = false;
this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image('canvasStand', '/assets/stand2.png');
} }
window.onload = function() {
currentDate = new Date();
formattedDateTime = currentDate.toLocaleString();
// console.log("Page loaded on: " + formattedDateTime);
};
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -135,9 +167,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -235,7 +267,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/H.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);

39
src/pages/guided-tracing/I.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);

39
src/pages/guided-tracing/J.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,9 +166,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -237,7 +264,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/K.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

41
src/pages/guided-tracing/L.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -239,7 +266,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/M.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/N.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -122,7 +121,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -141,13 +168,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);

41
src/pages/guided-tracing/O.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -135,13 +162,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -239,7 +266,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/P.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/Q.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/R.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -124,7 +123,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,13 +170,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/S.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -135,13 +162,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -239,7 +266,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/T.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -239,7 +266,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/U.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -135,13 +162,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -238,7 +265,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/V.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -240,7 +267,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/W.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -240,7 +267,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/X.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -240,7 +267,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/Y.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -122,7 +121,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -141,13 +168,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);

41
src/pages/guided-tracing/Z.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);

39
src/pages/guided-tracing/a.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/b.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -142,9 +169,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/c.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -142,9 +169,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/d.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);

39
src/pages/guided-tracing/e.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/f.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -142,9 +169,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/g.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/h.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/i.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/j.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

39
src/pages/guided-tracing/k.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -123,7 +122,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -146,9 +173,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ submitUserData(this);
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

41
src/pages/guided-tracing/l.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/m.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -242,7 +269,7 @@ let scoreTotal = 0; let isDrawing = false;
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale);

41
src/pages/guided-tracing/n.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,13 +166,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/o.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer; let firstLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/p.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +38,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/q.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +38,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -138,13 +165,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/r.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/s.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/t.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/u.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,13 +166,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -243,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/v.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,13 +166,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/w.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,13 +166,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);

41
src/pages/guided-tracing/x.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -245,7 +272,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);

41
src/pages/guided-tracing/y.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -139,13 +166,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -244,7 +271,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);

41
src/pages/guided-tracing/z.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let scoreTotal = 0; let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -125,7 +124,35 @@ let scoreTotal = 0; let isDrawing = false;
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// console.log(userData)
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -144,13 +171,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true fill: true
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(false); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -246,7 +273,7 @@ let scoreTotal = 0; let isDrawing = false;
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);

92
src/pages/tick/tick_phonics_v1.astro
View File

@@ -5,75 +5,65 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
@@ -81,7 +71,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -91,16 +81,14 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
// console.log(gameData) console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1; document.getElementById("label1").innerHTML = gameData.label1;
@@ -147,12 +135,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -175,14 +165,13 @@ import Layout from "../../layouts/Layout.astro";
// Move the userData object creation inside the saveUserData function if needed // Move the userData object creation inside the saveUserData function if needed
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -193,7 +182,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {
@@ -387,6 +376,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

275
src/pages/tick/tick_phonics_v2.astro
View File

@@ -5,99 +5,89 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm" class="flex flex-col justify-center"> <form id="contactForm" class="flex flex-col justify-center">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a7" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7" class="h-[50px] overflow-y-auto"></p> <p id="label7"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a8" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8" class="h-[50px] overflow-y-auto"></p> <p id="label8"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a9" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9" class="h-[50px] overflow-y-auto"></p> <p id="label9"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@@ -105,7 +95,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -115,11 +105,9 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -179,12 +167,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
function saveUserData(){ window.onload = function () {
const endTime = Date.now(); let currentTime = new Date();
const timeDifference = endTime - startTime; formatedDateTime = currentTime.toLocaleString();
const timeDifferenceInSeconds = timeDifference / 1000; };
function saveUserData() {
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -215,15 +205,14 @@ import Layout from "../../layouts/Layout.astro";
} }
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v2@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, // 'game_start' : gameStartTime,
'score': totalPoints, 'score' : totalPoints,
}; };
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -234,7 +223,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {
@@ -249,6 +238,173 @@ import Layout from "../../layouts/Layout.astro";
}); });
}); });
</script> </script>
<!-- <script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData);
document.getElementById("gameDescription").innerHTML = gameData.description;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
document.getElementById("image1").src = assetsURL + gameData.image1;
document.getElementById("image2").src = assetsURL + gameData.image2;
document.getElementById("image3").src = assetsURL + gameData.image3;
document.getElementById("image4").src = assetsURL + gameData.image4;
document.getElementById("image5").src = assetsURL + gameData.image5;
document.getElementById("image6").src = assetsURL + gameData.image6;
document.getElementById("image7").src = assetsURL + gameData.image7;
document.getElementById("image8").src = assetsURL + gameData.image8;
document.getElementById("image9").src = assetsURL + gameData.image9;
});
function checkResult2(id){
// alert("Matched")
if(id == 'image1'){
// console.log(gameData.a1)
if(gameData.a1 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image2'){
if(gameData.a2 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image3'){
if(gameData.a3 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image4'){
if(gameData.a4 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image5'){
if(gameData.a5 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image6'){
if(gameData.a6 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image7'){
if(gameData.a7 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image8'){
if(gameData.a8 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image9'){
if(gameData.a9 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
};
let url = window.location.href;
let urlSplit = url.split('/')
let gameName = urlSplit[3] +`-`+ urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
// console.log(formatedDateTime);
// Create userData object inside the onload event
let userData = {
'f2': formatedDateTime,
};
// console.log(userData); // Now, f1 and f2 should have values
};
function generateShortUniqueID(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters.charAt(randomIndex);
}
return result;
}
const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
function saveUserData() {
let userData = {
'status' : 'published',
'user_id': 'tick-v2@beanstalkedu.com',
'game_name': gameName,
'game_open': formatedDateTime,
};
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
// console.log('Data Saved', response);
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
});
});
</script> -->
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{ body{
@@ -275,6 +431,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

69
src/pages/tick/tick_phonics_v3.astro
View File

@@ -6,27 +6,17 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-col"> <div class="flex flex-col">
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center"> <div class="flex flex-col justify-center place-items-center">
<img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" /> <img class="lg:w-[50%]" 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> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
@@ -57,7 +47,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -67,16 +57,14 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
// console.log(gameData) console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label; document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1, gameData.label2, gameData.label3){ if(gameData.label1, gameData.label2, gameData.label3){
@@ -84,6 +72,18 @@ import Layout from "../../layouts/Layout.astro";
document.getElementById("label2").innerHTML = gameData.label2; document.getElementById("label2").innerHTML = gameData.label2;
document.getElementById("label3").innerHTML = gameData.label3; document.getElementById("label3").innerHTML = gameData.label3;
} }
// if(gameData.label1){
// document.getElementById("label1").innerHTML = gameData.label1;
// }
// if(gameData.label2){
// document.getElementById("label2").innerHTML = gameData.label2;
// }
// if(gameData.label3){
// document.getElementById("label3").innerHTML = gameData.label3;
// }
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
// document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
document.getElementById('descImage').src = assetsURL + gameData.descript_img; document.getElementById('descImage').src = assetsURL + gameData.descript_img;
for (let i = 1; i <= 3; i++) { for (let i = 1; i <= 3; i++) {
@@ -111,12 +111,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3']; const checkboxes = ['a1', 'a2', 'a3'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -138,14 +140,13 @@ import Layout from "../../layouts/Layout.astro";
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -156,7 +157,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {

197
src/pages/tick/v1.astro
View File

@@ -3,25 +3,26 @@ import Layout from "../../layouts/Layout.astro";
--- ---
<Layout title=""> <Layout title="">
<main> <main>
<div class="specific"> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md"> <div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-1 pb-2"> <div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button> <button><img src="/assets/svg/cancel.svg" alt=""></button>
</div> </div>
</div> </div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
@@ -82,21 +83,19 @@ import Layout from "../../layouts/Layout.astro";
</form> </form>
</div> </div>
</section> </section>
</div> </div>
</main> </main>
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
// console.log(gameData) console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1; document.getElementById("label1").innerHTML = gameData.label1;
@@ -143,12 +142,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -168,16 +169,16 @@ import Layout from "../../layouts/Layout.astro";
totalPoints += 1; totalPoints += 1;
} }
}); });
// Move the userData object creation inside the saveUserData function if needed // Move the userData object creation inside the saveUserData function if needed
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -188,7 +189,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {
@@ -204,6 +205,157 @@ import Layout from "../../layouts/Layout.astro";
}); });
}); });
</script> </script>
<!-- <script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData);
document.getElementById("gameDescription").innerHTML = gameData.game_description;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
document.getElementById("image1").src = assetsURL + gameData.image1;
document.getElementById("image2").src = assetsURL + gameData.image2;
document.getElementById("image3").src = assetsURL + gameData.image3;
document.getElementById("image4").src = assetsURL + gameData.image4;
document.getElementById("image5").src = assetsURL + gameData.image5;
document.getElementById("image6").src = assetsURL + gameData.image6;
});
function checkResult2(id){
// console.log(gameData.a1)
// alert("Matched")
if(id == 'image1'){
if( gameData.a1 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
};
if(id == 'image2'){
if(gameData.a2 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
};
if(id == 'image3'){
if(gameData.a3 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
};
if(id == 'image4'){
if(gameData.a4 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
};
if(id == 'image5'){
if(gameData.a5 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
};
if(id == 'image6'){
if(gameData.a6 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
// console.log('Value False')
}
}
};
let url = window.location.href;
let urlSplit = url.split('/')
let gameName = urlSplit[3] +`-`+ urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
// console.log(formatedDateTime);
// Create userData object inside the onload event
let userData = {
'f2': formatedDateTime,
};
// console.log(userData); // Now, f1 and f2 should have values
};
function generateShortUniqueID(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters.charAt(randomIndex);
}
return result;
}
const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
function saveUserData() {
// Move the userData object creation inside the saveUserData function if needed
let userData = {
'status' : 'published',
'user_id': 'tick-v1@beanstalkedu.com',
'game_name': gameName,
'game_open': formatedDateTime,
};
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
// console.log('Data Saved', response);
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
});
});
</script> -->
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{ body{
@@ -231,6 +383,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

139
src/pages/tick/v12.astro Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body {
font-family: Quicksand;
}
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
accent-color: red; /* Change the accent color to red */
}
.greenBorder {
border: 4px solid #008000;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
.redBorder {
border: 4px solid red;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
#image1, #image2, #image3, #image4, #image5, #image6 {
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6 {
text-align: center;
font-weight: bold;
color: #17A1A7;
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy {
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
width: 150px; /* Adjust to the width of your images */
text-align: center;
}
.round-checkbox-label::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
position: absolute;
top: 0;
left: 0;
border-radius: 30%;
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
input.round-checkbox-input:checked + .round-checkbox-label::before {
opacity: 1;
}
</style>
</head>
<body>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</div>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</div>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</div>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</div>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</div>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</div>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
</div>
</form>
</body>
</html>

281
src/pages/tick/v2.astro
View File

@@ -5,99 +5,89 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm" class="flex flex-col justify-center"> <form id="contactForm" class="flex flex-col justify-center">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a1" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1" class="h-[50px] overflow-y-auto"></p> <p id="label1"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a2" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2" class="h-[50px] overflow-y-auto"></p> <p id="label2"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a3" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3" class="h-[50px] overflow-y-auto"></p> <p id="label3"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a4" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4" class="h-[50px] overflow-y-auto"></p> <p id="label4"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a5" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5" class="h-[50px] overflow-y-auto"></p> <p id="label5"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a6" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6" class="h-[50px] overflow-y-auto"></p> <p id="label6"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a7" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7" class="h-[50px] overflow-y-auto"></p> <p id="label7"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a8" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8" class="h-[50px] overflow-y-auto"></p> <p id="label8"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl"> <label for="a9" class="round-checkbox-label">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9" class="h-[50px] overflow-y-auto"></p> <p id="label9"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@@ -105,7 +95,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -115,11 +105,9 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -179,11 +167,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -214,14 +205,14 @@ import Layout from "../../layouts/Layout.astro";
} }
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v2@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, // 'game_start' : gameStartTime,
'score': totalPoints, 'score' : totalPoints,
}; };
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, { fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -232,7 +223,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {
@@ -247,6 +238,173 @@ import Layout from "../../layouts/Layout.astro";
}); });
}); });
</script> </script>
<!-- <script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData);
document.getElementById("gameDescription").innerHTML = gameData.description;
const assetsURL = 'https://management.beanstalkedu.com/assets/';
document.getElementById("image1").src = assetsURL + gameData.image1;
document.getElementById("image2").src = assetsURL + gameData.image2;
document.getElementById("image3").src = assetsURL + gameData.image3;
document.getElementById("image4").src = assetsURL + gameData.image4;
document.getElementById("image5").src = assetsURL + gameData.image5;
document.getElementById("image6").src = assetsURL + gameData.image6;
document.getElementById("image7").src = assetsURL + gameData.image7;
document.getElementById("image8").src = assetsURL + gameData.image8;
document.getElementById("image9").src = assetsURL + gameData.image9;
});
function checkResult2(id){
// alert("Matched")
if(id == 'image1'){
// console.log(gameData.a1)
if(gameData.a1 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image2'){
if(gameData.a2 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image3'){
if(gameData.a3 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image4'){
if(gameData.a4 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image5'){
if(gameData.a5 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image6'){
if(gameData.a6 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image7'){
if(gameData.a7 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image8'){
if(gameData.a8 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
if(id == 'image9'){
if(gameData.a9 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
}
};
};
let url = window.location.href;
let urlSplit = url.split('/')
let gameName = urlSplit[3] +`-`+ urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
// console.log(formatedDateTime);
// Create userData object inside the onload event
let userData = {
'f2': formatedDateTime,
};
// console.log(userData); // Now, f1 and f2 should have values
};
function generateShortUniqueID(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters.charAt(randomIndex);
}
return result;
}
const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
// console.log(shortUniqueID);
function saveUserData() {
let userData = {
'status' : 'published',
'user_id': 'tick-v2@beanstalkedu.com',
'game_name': gameName,
'game_open': formatedDateTime,
};
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
// console.log('Data Saved', response);
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
});
});
</script> -->
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{ body{
@@ -273,6 +431,7 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

66
src/pages/tick/v3.astro
View File

@@ -6,49 +6,39 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-row place-content-between pt-2">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-col"> <div class="flex flex-col">
<p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center"> <div class="flex flex-col justify-center place-items-center">
<img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" /> <img class="lg:w-[50%]" 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> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
<div id="itemForm" class=""> <div id="itemForm" class="">
<div class="flex flex-row gap-x-4 place-content-between"> <div class="flex flex-row gap-x-4 place-content-between">
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
@@ -57,7 +47,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> --> <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
</div> </div>
</form> </form>
</div> </div>
@@ -67,16 +57,14 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const gameId = params.get('id'); const paramsID = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
// console.log(gameData) console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label; document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1, gameData.label2, gameData.label3){ if(gameData.label1, gameData.label2, gameData.label3){
@@ -123,12 +111,14 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3']; const checkboxes = ['a1', 'a2', 'a3'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -150,15 +140,13 @@ import Layout from "../../layouts/Layout.astro";
}); });
let userData = { let userData = {
'gameName': gameName, 'user': 'tick-v1@beanstalkedu.com',
'gameID': gameId, 'game_name': gameName,
'userId': userId, 'starts': formatedDateTime,
'gameTime': timeDifferenceInSeconds, 'score': totalPoints, // Include the totalPoints in the userData
'score': totalPoints,
}; };
// console.log(userData); console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -169,7 +157,7 @@ import Layout from "../../layouts/Layout.astro";
if (response.ok) { if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully'; document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else { } else {
// console.log('Something Wrong', response); console.log('Something Wrong', response);
} }
}) })
.catch(error => { .catch(error => {

3
src/pages/tracing/index.astro
View File

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -70,7 +69,7 @@ function create() {
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', }; const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };

0
src/pages/tst2.astro
View File