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

Merge pull request 'b3' (#17) from b3 into master 

Reviewed-on: #17
pull/18/head
Subhodip Ghosh 2024-06-29 14:23:04 +00:00
parent cee3680942 693aeb55c8
commit 5c3479b571
95 changed files with 2341 additions and 3253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
info.txt Normal file
View File

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

BIN
public/assets/color_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

38
public/saveGameData.js
View File

@ -1,7 +1,7 @@
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid'); const userId = urlParams.get('userid');
const gameId = urlParams.get('id'); let gameId;
let startTime = Date.now(); let startTime = Date.now();
@ -9,9 +9,20 @@ let startTime = Date.now();
const url = window.location.href; const url = window.location.href;
const gameName = url.split('/'); const gameName = url.split('/');
const gameType = gameName[3].split('?id='); const gameType = gameName[3].split('?id=');
const gameVersion = gameType[0] + '-' + gameName[4]; 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) { function submitUserData(drawingZone) {
@ -22,7 +33,7 @@ function submitUserData(drawingZone) {
let imageCode; let imageCode;
let gameScore; let gameScore;
let scoreTotal=0;
if(scoreTotal){ if(scoreTotal){
gameScore = scoreTotal; gameScore = scoreTotal;
}else{ }else{
@ -45,6 +56,21 @@ function submitUserData(drawingZone) {
link.click(); link.click();
document.body.removeChild(image); document.body.removeChild(image);
imageCode = image.src; 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;
} }
@ -59,9 +85,9 @@ function submitUserData(drawingZone) {
// 'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // 'game_start' : gameStartTime,
}; };
console.log(userData); // console.log(userData);
fetch(`http://192.168.0.166:3000/save-data`, { fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type' : 'application/json' 'Content-Type' : 'application/json'
@ -70,7 +96,7 @@ function submitUserData(drawingZone) {
}) })
.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)
} }

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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 text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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>
@ -79,10 +79,12 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -133,14 +135,12 @@ 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,20 +156,22 @@ 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('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
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 = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -257,7 +259,6 @@ 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{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,63 +24,63 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></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"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></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"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></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>
@ -97,9 +97,11 @@ 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 paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -147,26 +149,23 @@ 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('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
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,19 +191,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('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// 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'
@ -292,7 +292,6 @@ 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{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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>
@ -79,10 +79,12 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -133,14 +135,12 @@ 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,13 +163,14 @@ 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 = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -188,7 +189,6 @@ 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,7 +258,6 @@ 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{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></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"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></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"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></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,9 +97,11 @@ 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 paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -147,26 +149,24 @@ 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('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
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,19 +192,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('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// 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'
@ -292,7 +293,6 @@ 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{

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

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <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 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="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" /> <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p> <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="">
@ -67,10 +67,12 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -110,25 +112,22 @@ 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('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
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 => {
@ -144,19 +143,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('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -245,7 +245,6 @@ 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{

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -70,12 +71,28 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; 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){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -85,11 +102,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} 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;
@ -147,7 +159,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=100"; imageCustomWidth = "?width=80";
} else{ } else{
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
} }
@ -356,24 +368,24 @@ import Layout from '../../layouts/Layout.astro';
graphics.strokePath(); 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 - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {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 - 80, window.innerHeight - 55, data.label2, {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 + 15, window.innerHeight - 55, data.label3, {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 + 105, window.innerHeight - 55, 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 - 185, data.label5, {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 - 80, window.innerHeight - 185, 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 + 20, window.innerHeight - 185, 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 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
} 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: `#60C6CB`});
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: `#60C6CB`});
} }
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 = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
@ -438,53 +450,75 @@ import Layout from '../../layouts/Layout.astro';
// windowLoad(); // windowLoad();
submitUserData(this); submitUserData(this);
}) })
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
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 - 200, x: displayW / 2 - blocks1Width1,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: displayW / 2-100, x: displayW / 2 - blocks1Width2,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: displayW / 2, x: displayW / blocks1Width3,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: displayW / 2+100, x: displayW / 2 + blocks1Width4,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
}, },
{ {
x: displayW / 2-200, x: displayW / 2 - blocks1Width5,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks5", textureKey: "blocks5",
id: "block5", id: "block5",
}, },
{ {
x: displayW / 2-100, x: displayW / 2 - blocks1Width6,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks6", textureKey: "blocks6",
id: "block6", id: "block6",
}, },
{ {
x: displayW / 2, x: displayW / blocks1Width7,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks7", textureKey: "blocks7",
id: "block7", id: "block7",
}, },
{ {
x: displayW / 2+100, x: displayW / 2 + blocks1Width8,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks8", textureKey: "blocks8",
id: "block8", id: "block8",
}, },
@ -495,7 +529,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, "border").setAlpha(0.05).setScale(borderScale); const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@ -516,7 +550,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, 200, 100) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@ -535,7 +569,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true; droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true); targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0); targetZoneBorders[targetIndex].setAlpha(0.5);
return; return;
} }
}); });
@ -571,7 +605,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)

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -70,11 +71,25 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.47;
tickIconWidth = 1.34; tickIconWidth = 1.24;
cancelIconWidth = 1.16; 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){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -82,11 +97,6 @@ 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;
@ -313,11 +323,12 @@ 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 = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
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, 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",
@ -541,10 +552,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);
} }

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
let resetIconWidth; let resetIconWidth;
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; 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){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -81,11 +98,6 @@ 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;
@ -314,12 +326,20 @@ 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;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} let textSizeScale;
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); if(isMobile){
wrapWidth = 10;
textSizeScale = 540
}else{
wrapWidth = 200;
textSizeScale = 940
};
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
@ -522,10 +542,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,6 +49,7 @@ 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,6 +49,7 @@ 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 = {
@ -450,7 +451,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) => {
@ -521,7 +522,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,6 +49,7 @@ 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 = {
@ -544,11 +545,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)

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
let resetIconWidth; let resetIconWidth;
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; 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){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -81,11 +98,6 @@ 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;
@ -314,12 +326,20 @@ 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;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} let textSizeScale;
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); if(isMobile){
wrapWidth = 10;
textSizeScale = 540
} else{
wrapWidth = 200;
textSizeScale = 940
}
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
@ -522,10 +542,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,6 +49,7 @@ 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 = {
@ -491,10 +492,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){

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -70,26 +71,39 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; 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){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
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 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 30;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} 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;
@ -131,19 +145,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 340, y: 330,
name: "target2", name: "target2",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 510, y: 480,
name: "target3", name: "target3",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 680, y: 650,
name: "target4", name: "target4",
block: null, block: null,
}, },
@ -155,19 +169,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 340, y: 330,
name: "target6", name: "target6",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 510, y: 480,
name: "target7", name: "target7",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 680, y: 650,
name: "target8", name: "target8",
block: null, block: null,
}, },
@ -324,7 +338,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",
@ -360,12 +374,21 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} let textSizeScale;
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); if(isMobile){
wrapWidth = 10;
textSizeScale = 540;
} else{
wrapWidth = 200;
textSizeScale = 940
}
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);
@ -555,7 +578,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,6 +49,7 @@ 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 = {
@ -302,7 +303,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",
@ -523,7 +524,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);

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

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <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,
@ -70,12 +71,31 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; 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){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -85,11 +105,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} 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;
@ -146,11 +161,7 @@ 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){ if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
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;
@ -332,28 +343,38 @@ 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 - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 20, data.label1, {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 - 80, window.innerHeight - 20, data.label2, {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 + 30, window.innerHeight - 20, data.label3, {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 + 125, window.innerHeight - 20, 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 - 50, window.innerHeight - 150, data.label6, {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 + 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(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`});
} 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(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
}
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 = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; 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);
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
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);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
@ -482,35 +503,52 @@ 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) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); let blocksScale;
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(1.3); newBlock.setScale(blocksScale+.3);
newBlock.x = dragX; newBlock.x = dragX;
newBlock.y = dragY; newBlock.y = dragY;
}); });
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2); newBlock.setScale(blocksScale).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, 50, 25) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
const col = counter % 2; const col = counter % 2;
const row = Math.floor(counter / 2); const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - 50, targetZone.y -50); newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
newBlock.disableInteractive(); newBlock.disableInteractive();
targetZone.block = newBlock; targetZone.block = newBlock;
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);
@ -557,7 +595,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,6 +49,7 @@ 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 = {
@ -539,7 +540,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)

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -8,6 +8,7 @@ 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 = {
@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let animatedLetter; let animatedLetter;
let gameStartTime = "stat timr here"; let scoreTotal = 0;
// 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;
@ -120,35 +127,6 @@ 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'
@ -171,10 +149,8 @@ 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');
submitButton.setVisible(false); submitNotic.setVisible(false);
submitNotic.setVisible(true); submitUserData(this);
// 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', });
@ -270,7 +246,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "stat timr here"; let gameStartTime = "stat timr here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,10 +141,8 @@ 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');
submitButton.setVisible(false); submitNotic.setVisible(false);
submitNotic.setVisible(true); submitUserData(this);
// 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', });
@ -270,7 +241,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -274,7 +247,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -125,35 +126,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -176,9 +149,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -275,7 +248,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -264,7 +237,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer; let firstLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -265,7 +238,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -267,7 +240,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -110,41 +111,8 @@ import Layout from "../../layouts/Layout.astro";
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'
@ -167,9 +135,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -267,7 +235,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -264,7 +237,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -266,7 +239,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -172,9 +145,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -266,7 +239,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -123,35 +124,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -174,9 +147,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -266,7 +239,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -266,7 +239,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -265,7 +238,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -267,7 +240,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -267,7 +240,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -267,7 +240,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -172,9 +145,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -269,7 +242,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer; let firstLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 = {
@ -38,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 = {
@ -38,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -268,7 +241,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -270,7 +243,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,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 isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -272,7 +245,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -271,7 +244,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 = 20; const baseFontSize = 24;
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);

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

@ -8,6 +8,7 @@ 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 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
} }
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'
@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
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', });
@ -273,7 +246,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 = 20; const baseFontSize = 24;
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);

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,56 +24,56 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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 text-[14px] md:text-2xl">
<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" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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"/>
@ -91,14 +91,16 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?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;
@ -145,14 +147,12 @@ 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,13 +175,14 @@ 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 = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -192,7 +193,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 => {
@ -386,7 +387,6 @@ 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{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm" 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"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></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"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></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"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></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"/>
@ -115,9 +115,11 @@ 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 paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -177,14 +179,12 @@ 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 () { function saveUserData(){
let currentTime = new Date(); const endTime = Date.now();
formatedDateTime = currentTime.toLocaleString(); const timeDifference = endTime - startTime;
}; 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,14 +215,15 @@ import Layout from "../../layouts/Layout.astro";
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// 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'
@ -233,7 +234,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 => {
@ -248,173 +249,6 @@ 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{
@ -441,7 +275,6 @@ 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{

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

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <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 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="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" /> <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p> <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="">
@ -67,14 +67,16 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?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){
@ -82,18 +84,6 @@ 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++) {
@ -121,14 +111,12 @@ 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,13 +138,14 @@ import Layout from "../../layouts/Layout.astro";
}); });
let userData = { let userData = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -167,7 +156,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 => {

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

@ -3,26 +3,25 @@ import Layout from "../../layouts/Layout.astro";
--- ---
<Layout title=""> <Layout title="">
<main> <main>
<div> <div class="specific">
<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-2 pb-2"> <div class="flex flex-row space-x-1 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="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <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">
@ -83,24 +82,21 @@ import Layout from "../../layouts/Layout.astro";
</form> </form>
</div> </div>
</section> </section>
<section class="">
<div class="container mx-auto px-4 flex flex-row place-content-between">
<p>All rights reserved. Copyright@akademy.interakto2024</p>
</div>
</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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?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,14 +143,12 @@ 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 => {
@ -174,16 +168,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 = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -194,7 +188,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 => {
@ -210,157 +204,6 @@ 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{
@ -388,7 +231,6 @@ 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{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm" 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"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></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"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></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"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></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"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></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"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></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"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></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"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></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"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></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"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<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" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></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"/>
@ -115,9 +115,11 @@ 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 paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@ -177,14 +179,11 @@ 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,
@ -215,14 +214,14 @@ import Layout from "../../layouts/Layout.astro";
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// 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'
@ -233,7 +232,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 => {
@ -274,7 +273,6 @@ 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{

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

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<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-2 pb-2"> <div class="flex flex-row space-x-1 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>
@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <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 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="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" /> <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p> <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="">
@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
<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" /> <img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
<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" /> <img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
<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" /> <img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
<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"/>
@ -67,14 +67,16 @@ 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 paramsID = params.get('id'); const gameId = 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(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?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){
@ -121,14 +123,12 @@ 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,13 +150,15 @@ import Layout from "../../layouts/Layout.astro";
}); });
let userData = { let userData = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'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'
@ -167,7 +169,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,6 +8,7 @@ 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 = {
@ -69,7 +70,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 = 20; const baseFontSize = 24;
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', };

25
src/pages/tst.astro
View File

@ -1,25 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="">
<div>
<a id="fullscreen-btn" href="/tst2" target="_blank">Next</a>
</div>
</Layout>
<script is:inline>
document.getElementById('fullscreen-btn').addEventListener('click', function() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, and Opera
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
document.documentElement.msRequestFullscreen();
}
});
window.addEventListener('load', function() {
alert('Please click the button to go fullscreen.');
});
</script>