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

Compare commits

merge into: kar:b2
Branches Tags
kar:fetch2 kar:staging kar:dev kar:master kar:prod kar:newb2 kar:newb kar:b4 kar:b3 kar:b2
...
pull from: kar:b3
Branches Tags
kar:staging kar:dev kar:master kar:prod kar:newb2 kar:newb kar:b4 kar:fetch2 kar:b3 kar:b2

6 Commits
b2 ... b3

Author SHA1 Message Date
Suvodip
693aeb55c8 Dc 2024-06-29 19:52:00 +05:30
Suvodip
cf51757537 c 2024-06-24 19:15:56 +05:30
Suvodip
5c233bafa6 l 2024-06-24 18:27:14 +05:30
Suvodip
79f158380c submit user data in all games 2024-06-24 18:19:47 +05:30
Suvodip
d7a2533f43 change api endpoint 2024-06-22 19:27:43 +05:30
Suvodip
64ab2bacd4 new desgine and some little changes others game previous desgine 2024-06-21 20:43:54 +05:30
94 changed files with 1688 additions and 3075 deletions
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.

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{

24
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){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; 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;
@@ -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;
@@ -593,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)

39
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;
@@ -314,10 +324,11 @@ 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 screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; 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);
} }

52
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}`,
}, },
]; ];
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540
}else{
wrapWidth = 200;
textSizeScale = 940
};
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; 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);
// 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)

52
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}`,
}, },
]; ];
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540
} else{
wrapWidth = 200;
textSizeScale = 940
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; 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);
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);
// 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){

69
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)
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540;
} else{
wrapWidth = 200;
textSizeScale = 940
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24; 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);
@@ -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);

110
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 = 24; 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)

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@@ -31,12 +31,29 @@ import Layout from '../../layouts/Layout.astro';
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let scoreTotal = 0; let scoreTotal = 0;
let noticeWidth;
let noticeHeight;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; 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){
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@@ -45,12 +62,7 @@ import Layout from '../../layouts/Layout.astro';
downloadHeight = 200; downloadHeight = 200;
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { }else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;

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

@@ -30,6 +30,15 @@ import Layout from '../../layouts/Layout.astro';
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let defaultColor; let defaultColor;
let scoreTotal = 0;
let image1Width;
let image1Height;
let image2Width;
let image2Height;
let image2Right;
let image2Bottom;
let noticeWidth;
let noticeHeight;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
@@ -37,6 +46,20 @@ import Layout from '../../layouts/Layout.astro';
resetIconWidth = 1.47; resetIconWidth = 1.47;
tickIconWidth = 1.24; tickIconWidth = 1.24;
cancelIconWidth = 1.08; 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){
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@@ -52,11 +75,6 @@ import Layout from '../../layouts/Layout.astro';
image2Height = 1.7; image2Height = 1.7;
image2Bottom = 110; image2Bottom = 110;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;

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

File diff suppressed because one or more lines are too long

44
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', });

39
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

42
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

37
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', });

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 => {

1
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 = {

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>