commit
5c3479b571
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userid');
|
||||
const gameId = urlParams.get('id');
|
||||
let gameId;
|
||||
|
||||
let startTime = Date.now();
|
||||
|
||||
|
|
@ -9,9 +9,20 @@ let startTime = Date.now();
|
|||
const url = window.location.href;
|
||||
const gameName = url.split('/');
|
||||
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) {
|
||||
|
|
@ -22,7 +33,7 @@ function submitUserData(drawingZone) {
|
|||
|
||||
let imageCode;
|
||||
let gameScore;
|
||||
let scoreTotal=0;
|
||||
|
||||
if(scoreTotal){
|
||||
gameScore = scoreTotal;
|
||||
}else{
|
||||
|
|
@ -45,6 +56,21 @@ function submitUserData(drawingZone) {
|
|||
link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}else if( gameType[0] == "guided-tracing"){
|
||||
// submitButton.setVisible(true);
|
||||
// snapshotButton.setVisible(true);
|
||||
// customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
const link = document.createElement('a');
|
||||
link.href = image.src;
|
||||
link.download = `guided-tracing-${gameId}.png`;
|
||||
link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -59,9 +85,9 @@ function submitUserData(drawingZone) {
|
|||
// 'starts': formattedDateTime,
|
||||
// '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',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
|
|
@ -70,7 +96,7 @@ function submitUserData(drawingZone) {
|
|||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
console.log('Data Saved', response)
|
||||
// console.log('Data Saved', response)
|
||||
} else{
|
||||
// console.log('Something Wrong', response)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
|
|
@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
|
|
@ -156,20 +156,22 @@ import Layout from "../../layouts/Layout.astro";
|
|||
// Count points based on checkbox values and "greenBorder" class
|
||||
let totalPoints = 0;
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -257,7 +259,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<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">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a7" class="round-checkbox-label">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label7"></p>
|
||||
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label7" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
|
||||
|
||||
<label for="a8" class="round-checkbox-label">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label8" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
|
||||
|
||||
<label for="a9" class="round-checkbox-label">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label9" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
|
||||
</div>
|
||||
|
|
@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -147,26 +149,23 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
if (checkbox.checked) {
|
||||
if (gameData[id.replace('image', 'a')] === true) {
|
||||
element.classList.add('greenBorder');
|
||||
} else {
|
||||
element.classList.add('redBorder');
|
||||
} else {
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
// const checkboxValues = {
|
||||
// a1: document.getElementById('a1').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
|
||||
let totalPoints = 0;
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
let userData = {
|
||||
'user': 'tick-v2@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
'score' : totalPoints,
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<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>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<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>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
|
|
@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
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
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -188,7 +189,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
|
|
@ -258,7 +258,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<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">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a7" class="round-checkbox-label">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label7"></p>
|
||||
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label7" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
|
||||
|
||||
<label for="a8" class="round-checkbox-label">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
<label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label8" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
|
||||
|
||||
<label for="a9" class="round-checkbox-label">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
<label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label9" class="h-[50px] overflow-y-auto"></p>
|
||||
</label>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center pt-8">
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -147,26 +149,24 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
if (checkbox.checked) {
|
||||
if (gameData[id.replace('image', 'a')] === true) {
|
||||
element.classList.add('greenBorder');
|
||||
} else {
|
||||
element.classList.add('redBorder');
|
||||
} else {
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// const checkboxValues = {
|
||||
// a1: document.getElementById('a1').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
|
||||
let totalPoints = 0;
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
let userData = {
|
||||
'user': 'tick-v2@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
'score' : totalPoints,
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -292,7 +293,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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 class="container mx-auto px-4">
|
||||
<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> -->
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
|
|
@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -110,25 +112,22 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
if (checkbox.checked) {
|
||||
if (gameData[id.replace('image', 'a')] === true) {
|
||||
element.classList.add('greenBorder');
|
||||
} else {
|
||||
element.classList.add('redBorder');
|
||||
} else {
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
element.classList.remove('greenBorder', 'redBorder');
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
|
|
@ -144,19 +143,20 @@ import Layout from "../../layouts/Layout.astro";
|
|||
// Count points based on checkbox values and "greenBorder" class
|
||||
let totalPoints = 0;
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -245,7 +245,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea{
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -70,12 +71,28 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
|
|
@ -85,11 +102,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -147,7 +159,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.then(({data}) => {
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
imageCustomWidth = "?width=80";
|
||||
} else{
|
||||
imageCustomWidth = "?width=100";
|
||||
}
|
||||
|
|
@ -356,24 +368,24 @@ import Layout from '../../layouts/Layout.astro';
|
|||
graphics.strokePath();
|
||||
|
||||
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 - 90, window.innerHeight - 30, 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 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
|
||||
}
|
||||
if(isMobile){
|
||||
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
|
||||
this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
|
||||
this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
|
||||
} else{
|
||||
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
let wrapWidth;
|
||||
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
|
||||
|
|
@ -438,53 +450,75 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// windowLoad();
|
||||
submitUserData(this);
|
||||
})
|
||||
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
|
||||
|
||||
|
||||
if(isMobile){
|
||||
blocks1Width1 = 180;
|
||||
blocks1Width2 = 90;
|
||||
blocks1Width3 = 2;
|
||||
blocks1Width4 = 90;
|
||||
blocks1Width5 = 180;
|
||||
blocks1Width6 = 90;
|
||||
blocks1Width7 = 2;
|
||||
blocks1Width8 = 90;
|
||||
} else{
|
||||
blocks1Width1 = 200;
|
||||
blocks1Width2 = 100;
|
||||
blocks1Width3 = 2;
|
||||
blocks1Width4 = 100;
|
||||
blocks1Width5 = 200;
|
||||
blocks1Width6 = 100;
|
||||
blocks1Width7 = 2;
|
||||
blocks1Width8 = 100;
|
||||
|
||||
}
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 2 - 200,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2 - blocks1Width1,
|
||||
y: window.innerHeight - 290,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2 - blocks1Width2,
|
||||
y: window.innerHeight - 290,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / blocks1Width3,
|
||||
y: window.innerHeight - 290,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2 + blocks1Width4,
|
||||
y: window.innerHeight - 290,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-200,
|
||||
y: window.innerHeight - 120,
|
||||
x: displayW / 2 - blocks1Width5,
|
||||
y: window.innerHeight - 160,
|
||||
textureKey: "blocks5",
|
||||
id: "block5",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 120,
|
||||
x: displayW / 2 - blocks1Width6,
|
||||
y: window.innerHeight - 160,
|
||||
textureKey: "blocks6",
|
||||
id: "block6",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
x: displayW / blocks1Width7,
|
||||
y: window.innerHeight - 160,
|
||||
textureKey: "blocks7",
|
||||
id: "block7",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 120,
|
||||
x: displayW / 2 + blocks1Width8,
|
||||
y: window.innerHeight - 160,
|
||||
textureKey: "blocks8",
|
||||
id: "block8",
|
||||
},
|
||||
|
|
@ -495,7 +529,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
|
@ -516,7 +550,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
|
||||
)
|
||||
) {
|
||||
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
|
||||
|
|
@ -535,7 +569,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(0);
|
||||
targetZoneBorders[targetIndex].setAlpha(0.5);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
|
@ -571,7 +605,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
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){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -70,11 +71,25 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let cancelIconWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
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){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
|
|
@ -82,11 +97,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -313,11 +323,12 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.then(({ data }) => {
|
||||
// console.log(data)
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
const baseFontSize = 24;
|
||||
let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
let wrapWidth;
|
||||
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 = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
|
|
@ -541,10 +552,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
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.setVisible(false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
|
|
@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
|
|||
targetName: `target${data.right_match4}`,
|
||||
},
|
||||
];
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
let wrapWidth;
|
||||
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);
|
||||
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 baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
|
|
@ -522,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
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);
|
||||
}
|
||||
if(counter === 4){
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
|
|
@ -450,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
targetZone.block = null;
|
||||
}),
|
||||
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);
|
||||
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
|
|
@ -521,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
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){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
|
|
@ -544,11 +545,11 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
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){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
|
|
@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
|
|||
targetName: `target${data.right_match4}`,
|
||||
},
|
||||
];
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
|
||||
let wrapWidth;
|
||||
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);
|
||||
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 baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
|
||||
// Left Image Name
|
||||
|
|
@ -522,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
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);
|
||||
}
|
||||
if(counter === 4){
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
|
|
@ -491,10 +492,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
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);
|
||||
}
|
||||
if(counter === 4){
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -70,26 +71,39 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let retryButtonWidth;
|
||||
let leftTargetZoneW;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 140;
|
||||
retryButtonHeight = window.innerHeight - 50;
|
||||
leftTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
leftTargetZoneW = window.innerWidth * 0.9 - 30;
|
||||
rightTargetZoneW = window.innerWidth / 6;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -131,19 +145,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 340,
|
||||
y: 330,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 510,
|
||||
y: 480,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 680,
|
||||
y: 650,
|
||||
name: "target4",
|
||||
block: null,
|
||||
},
|
||||
|
|
@ -155,19 +169,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 340,
|
||||
y: 330,
|
||||
name: "target6",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 510,
|
||||
y: 480,
|
||||
name: "target7",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 680,
|
||||
y: 650,
|
||||
name: "target8",
|
||||
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`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
console.log(data)
|
||||
// console.log(data)
|
||||
blockMatches = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
|
|
@ -360,12 +374,21 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
];
|
||||
// console.log(data)
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
|
||||
|
||||
let wrapWidth;
|
||||
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);
|
||||
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 baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
@ -555,7 +578,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
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`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
console.log(data)
|
||||
// console.log(data)
|
||||
blockMatches = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
|
|
@ -523,7 +524,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
// console.log(match)
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -70,12 +71,31 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let leftTargetZoneW;
|
||||
let rightTargetZoneW;
|
||||
let retryButtonWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 5;
|
||||
muteIconWidth = 2;
|
||||
resetIconWidth = 1.6;
|
||||
tickIconWidth = 1.34;
|
||||
cancelIconWidth = 1.16;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
|
|
@ -85,11 +105,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
} else {
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
|
|
@ -146,11 +161,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
} else{
|
||||
imageCustomWidth = "?width=100";
|
||||
}
|
||||
if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
|
||||
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
|
||||
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
|
||||
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
|
||||
|
|
@ -332,28 +343,38 @@ import Layout from '../../layouts/Layout.astro';
|
|||
];
|
||||
// console.log(data)
|
||||
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 - 90, window.innerHeight - 30, 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 + 125, window.innerHeight - 30, data.label4, {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 - 80, window.innerHeight - 20, data.label2, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 20, data.label3, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 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 - 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 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
|
||||
}
|
||||
if(isMobile){
|
||||
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
|
||||
this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, 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{
|
||||
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
|
||||
this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
|
||||
this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||||
let wrapWidth;
|
||||
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);
|
||||
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 baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
@ -482,35 +503,52 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
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);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
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);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
newBlock.setScale(blocksScale+.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0).setDepth(-2);
|
||||
newBlock.setScale(blocksScale).setDepth(-2);
|
||||
let droppedOnTargetZone = false;
|
||||
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
let phaserGeomX, phaserGeomY, blockSetPosition;
|
||||
if(isMobile){
|
||||
phaserGeomX = 50;
|
||||
phaserGeomY = 25;
|
||||
blockSetPosition = 40;
|
||||
}else{
|
||||
phaserGeomX = 200;
|
||||
phaserGeomY = 100;
|
||||
blockSetPosition = 50;
|
||||
}
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
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 row = Math.floor(counter / 2);
|
||||
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
|
||||
newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
|
@ -557,7 +595,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
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){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
|
|
@ -539,7 +540,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
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){
|
||||
// console.log(counter)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,8 +8,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4,
|
||||
y: window.innerHeight / 4,
|
||||
|
|
@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
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){
|
||||
cloudeSize = 200;
|
||||
|
|
@ -120,35 +127,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
}
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,10 +149,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitNotic.setVisible(false);
|
||||
submitUserData(this);
|
||||
})
|
||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||
|
|
@ -270,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "stat timr here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -165,13 +138,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitNotic.setVisible(false);
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -274,7 +247,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -125,35 +126,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -176,9 +149,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -275,7 +248,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -264,7 +237,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -265,7 +238,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer, fourthLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -267,7 +240,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
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('canvasStand', '/assets/stand2.png');
|
||||
}
|
||||
window.onload = function() {
|
||||
currentDate = new Date();
|
||||
formattedDateTime = currentDate.toLocaleString();
|
||||
// console.log("Page loaded on: " + formattedDateTime);
|
||||
};
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,9 +135,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -267,7 +235,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -264,7 +237,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -266,7 +239,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer, fourthLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -266,7 +239,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -123,35 +124,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,13 +143,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -266,7 +239,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -266,7 +239,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -265,7 +238,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -267,7 +240,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer, fourthLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -267,7 +240,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -267,7 +240,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -269,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -165,13 +138,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -268,7 +241,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -270,7 +243,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer, fourthLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -272,7 +245,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
|
||||
|
|
@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -271,7 +244,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let animatedLetter;
|
||||
let isDrawing = false;
|
||||
let scoreTotal = 0; let isDrawing = false;
|
||||
let formattedDateTime;
|
||||
let gameStartTime = "start time here";
|
||||
// let x = 100;
|
||||
|
|
@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
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', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: '#05b3a4'
|
||||
|
|
@ -171,13 +144,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
fill: true
|
||||
}
|
||||
});
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
submitNotic.setVisible(false);
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
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', });
|
||||
|
|
@ -273,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
console.log(gameData)
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
document.getElementById("label1").innerHTML = gameData.label1;
|
||||
|
|
@ -145,14 +147,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
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
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
// console.log(userData);
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -192,7 +193,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -386,7 +387,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
<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">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
<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">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label7"></p>
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label7" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label8" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label9" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<script is:inline>
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -177,14 +179,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
function saveUserData(){
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
function saveUserData() {
|
||||
// const checkboxValues = {
|
||||
// a1: document.getElementById('a1').checked,
|
||||
// a2: document.getElementById('a2').checked,
|
||||
|
|
@ -215,14 +215,15 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
let userData = {
|
||||
'user': 'tick-v2@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
'score' : totalPoints,
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'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',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -233,7 +234,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -248,173 +249,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
});
|
||||
</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>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
body{
|
||||
|
|
@ -441,7 +275,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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 class="container mx-auto px-4">
|
||||
<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> -->
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
|
|
@ -67,14 +67,16 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</Layout>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
console.log(gameData)
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
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("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/';
|
||||
document.getElementById('descImage').src = assetsURL + gameData.descript_img;
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
|
|
@ -121,14 +111,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
|
|
@ -150,13 +138,14 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
// console.log(userData);
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -167,7 +156,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
|||
|
|
@ -3,26 +3,25 @@ import Layout from "../../layouts/Layout.astro";
|
|||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
<div class="specific">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<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">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
|
|
@ -83,24 +82,21 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</form>
|
||||
</div>
|
||||
</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>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
console.log(gameData)
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1){
|
||||
document.getElementById("label1").innerHTML = gameData.label1;
|
||||
|
|
@ -147,14 +143,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
|
|
@ -174,16 +168,16 @@ import Layout from "../../layouts/Layout.astro";
|
|||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Move the userData object creation inside the saveUserData function if needed
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
// console.log(userData);
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -194,7 +188,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -210,157 +204,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
});
|
||||
</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>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
body{
|
||||
|
|
@ -388,7 +231,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.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="LearningSubArea_copy"></p>
|
||||
</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">
|
||||
<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">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label1" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label2" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label3" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label4" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label5" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label6" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a7" class="round-checkbox-label">
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label7"></p>
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label7" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label8" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
|
||||
<p id="label9" class="h-[50px] overflow-y-auto"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<script is:inline>
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
|
|
@ -177,14 +179,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
// const checkboxValues = {
|
||||
// a1: document.getElementById('a1').checked,
|
||||
// a2: document.getElementById('a2').checked,
|
||||
|
|
@ -215,14 +214,14 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
let userData = {
|
||||
'user': 'tick-v2@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
'score' : totalPoints,
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
};
|
||||
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
// console.log(userData);
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -233,7 +232,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -274,7 +273,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea_copy{
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</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/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
|
|
@ -22,33 +22,33 @@ import Layout from "../../layouts/Layout.astro";
|
|||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<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> -->
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<form id="contactForm" class="">
|
||||
<div id="itemForm" class="">
|
||||
<div class="flex flex-row gap-x-4 place-content-between">
|
||||
<div class="flex flex-row gap-x-4 place-content-between">
|
||||
<div class="flex flex-col">
|
||||
<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>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<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>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<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>
|
||||
</label>
|
||||
<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>
|
||||
<script is:inline>
|
||||
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;
|
||||
|
||||
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(data => {
|
||||
gameData = data.data;
|
||||
console.log(gameData)
|
||||
// console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
if(gameData.label1, gameData.label2, gameData.label3){
|
||||
|
|
@ -121,14 +123,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
|
|
@ -150,13 +150,15 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
'gameName': gameName,
|
||||
'gameID': gameId,
|
||||
'userId': userId,
|
||||
'gameTime': timeDifferenceInSeconds,
|
||||
'score': totalPoints,
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
// console.log(userData);
|
||||
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
@ -167,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
// console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const drawingZone = {
|
||||
|
|
@ -69,7 +70,7 @@ function create() {
|
|||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const baseFontSize = 24;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue