Compare commits
14 Commits
d22a4da6d6
...
b3
| Author | SHA1 | Date | |
|---|---|---|---|
|
693aeb55c8 | ||
|
|
cf51757537 | ||
|
|
5c233bafa6 | ||
|
|
79f158380c | ||
|
|
d7a2533f43 | ||
|
|
64ab2bacd4 | ||
|
|
94cfda779c | ||
|
|
6bd0c1c23b | ||
|
|
5ed1ee1e6c | ||
|
|
d82e6fcb9d | ||
|
|
2d6dbbf2b7 | ||
|
|
a8277e9aad | ||
|
|
71c5f88b9a | ||
|
|
a49742e607 |
BIN
public/assets/color_button.png
Normal file
BIN
public/assets/color_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -1 +1 @@
|
||||
<svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
<svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 683 B |
4
public/assets/svg/clear.svg
Normal file
4
public/assets/svg/clear.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
|
||||
<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 868 B |
3
public/assets/svg/pointer.svg
Normal file
3
public/assets/svg/pointer.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 151 B |
111
public/saveGameData.js
Normal file
111
public/saveGameData.js
Normal file
@@ -0,0 +1,111 @@
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userid');
|
||||
let gameId;
|
||||
|
||||
let startTime = Date.now();
|
||||
|
||||
|
||||
const url = window.location.href;
|
||||
const gameName = url.split('/');
|
||||
const gameType = gameName[3].split('?id=');
|
||||
let gameVersion;
|
||||
|
||||
|
||||
if(gameType[0] == "guided-tracing"){
|
||||
gameVersion = gameType[0].split('?')[0];
|
||||
gameId = gameName[4];
|
||||
} else if(gameName.length == 5){
|
||||
gameVersion = gameName[3];
|
||||
gameId = urlParams.get('id');
|
||||
}else if(gameName.length == 6){
|
||||
gameVersion = gameType[0] + '-' + gameName[4];
|
||||
gameId = urlParams.get('id');
|
||||
}
|
||||
|
||||
|
||||
|
||||
function submitUserData(drawingZone) {
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
|
||||
|
||||
let imageCode;
|
||||
let gameScore;
|
||||
|
||||
if(scoreTotal){
|
||||
gameScore = scoreTotal;
|
||||
}else{
|
||||
gameScore = 0;
|
||||
}
|
||||
// console.log('This is from main point', scoreTotal);
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
if(gameType[0] == 'drawing'){
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
const link = document.createElement('a');
|
||||
link.href = image.src;
|
||||
link.download = 'my_drawing.png';
|
||||
link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}else if( gameType[0] == "guided-tracing"){
|
||||
// submitButton.setVisible(true);
|
||||
// snapshotButton.setVisible(true);
|
||||
// customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
const link = document.createElement('a');
|
||||
link.href = image.src;
|
||||
link.download = `guided-tracing-${gameId}.png`;
|
||||
link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}
|
||||
|
||||
|
||||
|
||||
let userData = {
|
||||
'gameName': gameVersion,
|
||||
'gameID': gameId,
|
||||
'screenShot': imageCode,
|
||||
'userId' : userId,
|
||||
'gameTime' : timeDifferenceInSeconds,
|
||||
'score' : scoreTotal
|
||||
// 'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
// console.log(userData);
|
||||
|
||||
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
// console.log('Data Saved', response)
|
||||
} else{
|
||||
// console.log('Something Wrong', response)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
|
||||
// Clear the drawing
|
||||
// graphics.clear();
|
||||
});
|
||||
};
|
||||
@@ -5,61 +5,71 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-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>
|
||||
@@ -69,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;
|
||||
@@ -123,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 => {
|
||||
@@ -146,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'
|
||||
@@ -191,12 +203,11 @@ import Layout from "../../layouts/Layout.astro";
|
||||
input[type="checkbox"]{
|
||||
-webkit-appearance: initial;
|
||||
appearance: initial;
|
||||
border: 1px solid gray;
|
||||
border: 1px solid rgb(128, 128, 128);
|
||||
border-radius: 5px;
|
||||
/* background: gray; */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
input[type="checkbox"]:checked {
|
||||
@@ -248,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{
|
||||
|
||||
@@ -5,79 +5,89 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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>
|
||||
@@ -87,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;
|
||||
@@ -137,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,
|
||||
@@ -182,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'
|
||||
@@ -282,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{
|
||||
|
||||
@@ -5,61 +5,71 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-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>
|
||||
@@ -69,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;
|
||||
@@ -123,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 => {
|
||||
@@ -153,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'
|
||||
@@ -178,7 +189,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
@@ -248,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{
|
||||
|
||||
@@ -5,79 +5,89 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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>
|
||||
@@ -87,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;
|
||||
@@ -137,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,
|
||||
@@ -182,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'
|
||||
@@ -282,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{
|
||||
|
||||
@@ -6,17 +6,27 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-2">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="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="">
|
||||
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-4">
|
||||
<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>
|
||||
@@ -57,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;
|
||||
@@ -100,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 => {
|
||||
@@ -134,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'
|
||||
@@ -235,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{
|
||||
|
||||
@@ -49,14 +49,49 @@ 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 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,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let resultView;
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
@@ -76,13 +111,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let scoreTotal = 0;
|
||||
let resultView; // scoreTotal resultView
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
@@ -131,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";
|
||||
}
|
||||
@@ -228,8 +256,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
@@ -326,135 +357,168 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
];
|
||||
// console.log(data)
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
graphics.lineStyle(1, 0x0348A8);
|
||||
graphics.setAlpha(0.2);
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(x, y);
|
||||
graphics.lineTo(x + lineWidth, y);
|
||||
graphics.strokePath();
|
||||
|
||||
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
|
||||
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: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
|
||||
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: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
|
||||
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;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 22;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 95, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
const baseFontSize = 24;
|
||||
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);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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 url = window.location.href;
|
||||
// const gameName = url.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
// window.load
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
// submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
// submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
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",
|
||||
},
|
||||
@@ -465,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).setScale(borderScale);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
@@ -486,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`
|
||||
@@ -505,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;
|
||||
}
|
||||
});
|
||||
@@ -524,11 +588,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
|
||||
});
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
retryButton.setVisible(false);
|
||||
// retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
const isMatch = (blockName, targetName) => {
|
||||
@@ -541,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)
|
||||
|
||||
@@ -49,8 +49,10 @@ 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 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,
|
||||
@@ -69,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;
|
||||
@@ -81,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;
|
||||
@@ -312,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;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 30;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
|
||||
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, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||||
blockMatches = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
@@ -353,33 +365,33 @@ import Layout from '../../layouts/Layout.astro';
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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 URL = window.location.href;
|
||||
// const gameName = URL.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
// window.load
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
@@ -449,7 +461,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
});
|
||||
|
||||
const droppedBlocks = [];
|
||||
@@ -540,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);
|
||||
}
|
||||
|
||||
@@ -49,14 +49,47 @@ 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 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,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let resultView;
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
@@ -72,13 +105,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let blockMatches;
|
||||
let resultView;
|
||||
let scoreTotal = 0;
|
||||
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
@@ -100,6 +126,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
return result;
|
||||
};
|
||||
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
|
||||
let blockMatches;
|
||||
|
||||
const targetZones = [
|
||||
{
|
||||
@@ -233,12 +260,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
// this.load.image("bg", '/assets/bgwhite.jpg');
|
||||
// this.load.image("target1", assetsList.right_image1);
|
||||
// this.load.image("target2", '/assets/hay.png');
|
||||
// this.load.image("target3", '/assets/mat.png');
|
||||
// this.load.image("target4", '/assets/star.png');
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.image("border", '/assets/svg/pointer.svg');
|
||||
this.load.spritesheet("target1", assetsList.right_image1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -298,15 +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;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 76, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
let wrapWidth;
|
||||
let textSizeScale;
|
||||
if(isMobile){
|
||||
wrapWidth = 10;
|
||||
textSizeScale = 540
|
||||
}else{
|
||||
wrapWidth = 200;
|
||||
textSizeScale = 940
|
||||
};
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const 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
|
||||
@@ -325,104 +358,122 @@ import Layout from '../../layouts/Layout.astro';
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
// const url = window.location.href;
|
||||
// const gameName = url.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW * 0.9-32, 170, "target1");
|
||||
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 340, "target2");
|
||||
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 510, "target3");
|
||||
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 680, "target4");
|
||||
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
graphics.lineStyle(1, 0x0348A8);
|
||||
graphics.setAlpha(0.2);
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(x, y);
|
||||
graphics.lineTo(x + lineWidth, y);
|
||||
graphics.strokePath();
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
// submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
// submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
this.add.image(displayW * 0.9-32, 170, "target1"),
|
||||
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 340, "target2"),
|
||||
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 510, "target3"),
|
||||
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 680, "target4"),
|
||||
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 280,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 460,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 640,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
];
|
||||
this.graphics = this.add.graphics();
|
||||
const droppedBlocks = [];
|
||||
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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
|
||||
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
|
||||
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
@@ -451,7 +502,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
if (droppedOnTargetZone) {
|
||||
// Draw a line from the dragged block to the targetZone
|
||||
this.graphics.lineStyle(6, 0xFF0000); // Red color
|
||||
this.graphics.moveTo(block.x + 50, block.y + 50);
|
||||
this.graphics.moveTo(block.x + 105, block.y + 47);
|
||||
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
|
||||
this.graphics.strokePath();
|
||||
|
||||
@@ -473,12 +524,12 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
});
|
||||
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
})
|
||||
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
@@ -491,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)
|
||||
|
||||
@@ -49,14 +49,47 @@ 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 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,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let resultView;
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
@@ -72,13 +105,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let blockMatches;
|
||||
let resultView;
|
||||
let scoreTotal = 0;
|
||||
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
@@ -100,6 +126,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
return result;
|
||||
};
|
||||
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
|
||||
let blockMatches;
|
||||
|
||||
const targetZones = [
|
||||
{
|
||||
@@ -233,12 +260,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
// this.load.image("bg", '/assets/bgwhite.jpg');
|
||||
// this.load.image("target1", assetsList.right_image1);
|
||||
// this.load.image("target2", '/assets/hay.png');
|
||||
// this.load.image("target3", '/assets/mat.png');
|
||||
// this.load.image("target4", '/assets/star.png');
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.image("border", '/assets/svg/pointer.svg');
|
||||
this.load.spritesheet("target1", assetsList.right_image1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -298,15 +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;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 76, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
let wrapWidth;
|
||||
let textSizeScale;
|
||||
if(isMobile){
|
||||
wrapWidth = 10;
|
||||
textSizeScale = 540
|
||||
} else{
|
||||
wrapWidth = 200;
|
||||
textSizeScale = 940
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const 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
|
||||
@@ -325,104 +358,122 @@ import Layout from '../../layouts/Layout.astro';
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
// const url = window.location.href;
|
||||
// const gameName = URL.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
this.add.image(displayW * 0.9-32, 170, "target1");
|
||||
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 340, "target2");
|
||||
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 510, "target3");
|
||||
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
this.add.image(displayW * 0.9-32, 680, "target4");
|
||||
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
|
||||
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
graphics.lineStyle(1, 0x0348A8);
|
||||
graphics.setAlpha(0.2);
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(x, y);
|
||||
graphics.lineTo(x + lineWidth, y);
|
||||
graphics.strokePath();
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
// submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
// submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
this.add.image(displayW * 0.9-32, 170, "target1"),
|
||||
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 340, "target2"),
|
||||
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 510, "target3"),
|
||||
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
|
||||
this.add.image(displayW * 0.9-32, 680, "target4"),
|
||||
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 280,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 460,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 15,
|
||||
y: 640,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
blockPointer: 'border',
|
||||
},
|
||||
];
|
||||
this.graphics = this.add.graphics();
|
||||
const droppedBlocks = [];
|
||||
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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
|
||||
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
|
||||
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
@@ -451,7 +502,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
if (droppedOnTargetZone) {
|
||||
// Draw a line from the dragged block to the targetZone
|
||||
this.graphics.lineStyle(6, 0xFF0000); // Red color
|
||||
this.graphics.moveTo(block.x + 50, block.y + 50);
|
||||
this.graphics.moveTo(block.x + 105, block.y + 47);
|
||||
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
|
||||
this.graphics.strokePath();
|
||||
|
||||
@@ -473,12 +524,12 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
});
|
||||
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
})
|
||||
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
@@ -491,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){
|
||||
|
||||
@@ -49,14 +49,51 @@ 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 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,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let resultView;
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let retryButtonWidth;
|
||||
let leftTargetZoneW;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
@@ -64,7 +101,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
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 {
|
||||
noticeWidth = 100;
|
||||
@@ -76,13 +113,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||
leftTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
rightTargetZoneW = window.innerWidth / 6;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let resultView;
|
||||
let scoreTotal = 0; // resultView scoreTotal
|
||||
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
@@ -114,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,
|
||||
},
|
||||
@@ -138,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,
|
||||
},
|
||||
@@ -260,8 +291,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
|
||||
// this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/svg/border.svg');
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -302,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",
|
||||
@@ -338,72 +374,91 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
];
|
||||
// console.log(data)
|
||||
|
||||
|
||||
let wrapWidth;
|
||||
let textSizeScale;
|
||||
if(isMobile){
|
||||
wrapWidth = 10;
|
||||
textSizeScale = 540;
|
||||
} else{
|
||||
wrapWidth = 200;
|
||||
textSizeScale = 940
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 30;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 95, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
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);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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 URL = window.location.href;
|
||||
// const gameName = URL.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
// window.load
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
graphics.lineStyle(1, 0x0348A8);
|
||||
graphics.setAlpha(0.2);
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(x, y);
|
||||
graphics.lineTo(x + lineWidth, y);
|
||||
graphics.strokePath();
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 2-400,
|
||||
@@ -459,8 +514,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone, index) => {
|
||||
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.2).setScale(0.65);
|
||||
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1);
|
||||
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
@@ -508,11 +563,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
});
|
||||
});
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
retryButton.setVisible(false);
|
||||
// retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
@@ -523,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);
|
||||
|
||||
@@ -49,14 +49,52 @@ 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 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,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let resultView;
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let leftTargetZoneW;
|
||||
let rightTargetZoneW;
|
||||
let retryButtonWidth;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
cancelIconWidth = 1.08;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
@@ -76,13 +114,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let scoreTotal = 0;
|
||||
let resultView; // scoreTotal resultView
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
@@ -130,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;
|
||||
@@ -228,9 +255,17 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
// this.load.image("tick", '/assets/tick.png');
|
||||
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
|
||||
// this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
||||
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
@@ -266,25 +301,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||
}
|
||||
|
||||
create() {
|
||||
// const borderGraphics = this.add.graphics();
|
||||
// const borderThickness = 6;
|
||||
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
|
||||
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
|
||||
// borderGraphics.beginPath();
|
||||
// borderGraphics.moveTo(borderX, 130);
|
||||
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
|
||||
// borderGraphics.strokePath();
|
||||
// borderGraphics.closePath();
|
||||
|
||||
// const borderGraphicsX = this.add.graphics();
|
||||
// const borderThicknessX = 6;
|
||||
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
|
||||
// const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
|
||||
// borderGraphicsX.beginPath();
|
||||
// borderGraphicsX.moveTo(0, borderY);
|
||||
// borderGraphicsX.lineTo(window.innerWidth, borderY);
|
||||
// borderGraphicsX.strokePath();
|
||||
// borderGraphicsX.closePath();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
@@ -327,88 +343,110 @@ 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: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
|
||||
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: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
|
||||
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;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 22;
|
||||
// Calculate responsive font size based on screen width
|
||||
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
||||
const descrptText = this.add.text(screenCenterX, 95, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
let wrapWidth;
|
||||
let textSizeScale;
|
||||
if(isMobile){
|
||||
wrapWidth = 10;
|
||||
textSizeScale = 540
|
||||
} else{
|
||||
wrapWidth = 200;
|
||||
textSizeScale = 940
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const 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);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
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 URL = window.location.href;
|
||||
// const gameName = URL.split('/');
|
||||
// let userData = {
|
||||
// 'user': 'drawing@beanstalkedu.com',
|
||||
// 'game_name': gameName[3],
|
||||
// 'starts': formattedDateTime,
|
||||
// // 'game_start' : gameStartTime,
|
||||
// };
|
||||
// function submitUserData() {
|
||||
// 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)
|
||||
// });
|
||||
// };
|
||||
// window.load
|
||||
|
||||
const graphics = this.add.graphics();
|
||||
const x = 0; const y = 54;
|
||||
const lineWidth = window.innerWidth;
|
||||
graphics.lineStyle(1, 0x0348A8);
|
||||
graphics.setAlpha(0.2);
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(x, y);
|
||||
graphics.lineTo(x + lineWidth, y);
|
||||
graphics.strokePath();
|
||||
|
||||
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
|
||||
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
|
||||
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
|
||||
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
|
||||
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// }).setDepth(1);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
submitUserData(this);
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
|
||||
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 2 - 200,
|
||||
@@ -465,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, 200, 100)
|
||||
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);
|
||||
@@ -524,11 +579,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
|
||||
});
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
// retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
const isMatch = (blockName, targetName) => {
|
||||
@@ -541,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);
|
||||
|
||||
@@ -5,65 +5,75 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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"/>
|
||||
@@ -71,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-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>
|
||||
@@ -81,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;
|
||||
@@ -135,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 => {
|
||||
@@ -165,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'
|
||||
@@ -182,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 => {
|
||||
@@ -376,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{
|
||||
|
||||
@@ -5,89 +5,99 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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"/>
|
||||
@@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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>
|
||||
@@ -105,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;
|
||||
@@ -167,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,
|
||||
@@ -205,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'
|
||||
@@ -223,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 => {
|
||||
@@ -238,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{
|
||||
@@ -431,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{
|
||||
|
||||
@@ -6,17 +6,27 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-2">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="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="">
|
||||
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-4">
|
||||
<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>
|
||||
@@ -57,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){
|
||||
@@ -72,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++) {
|
||||
@@ -111,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 => {
|
||||
@@ -140,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'
|
||||
@@ -157,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,19 +82,21 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</form>
|
||||
</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;
|
||||
@@ -142,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 => {
|
||||
@@ -169,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'
|
||||
@@ -189,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 => {
|
||||
@@ -205,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{
|
||||
@@ -383,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{
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: Quicksand;
|
||||
}
|
||||
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
accent-color: red; /* Change the accent color to red */
|
||||
}
|
||||
|
||||
.greenBorder {
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
|
||||
.redBorder {
|
||||
border: 4px solid red;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
|
||||
#image1, #image2, #image3, #image4, #image5, #image6 {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#label1, #label2, #label3, #label4, #label5, #label6 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #17A1A7;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#LearningArea, #LearningSubArea_copy {
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.round-checkbox-label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
width: 150px; /* Adjust to the width of your images */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.round-checkbox-label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 30%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
input.round-checkbox-input:checked + .round-checkbox-label::before {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form id="contactForm">
|
||||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
|
||||
|
||||
<label for="a2" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a3" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
|
||||
|
||||
<label for="a4" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a5" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
|
||||
|
||||
<label for="a6" class="round-checkbox-label">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-8">
|
||||
<p id="savedMessage"></p>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,89 +5,99 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div>
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-col">
|
||||
<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"/>
|
||||
@@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</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>
|
||||
@@ -105,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;
|
||||
@@ -167,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,
|
||||
@@ -205,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'
|
||||
@@ -223,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 => {
|
||||
@@ -238,173 +247,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{
|
||||
@@ -431,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{
|
||||
|
||||
@@ -6,39 +6,49 @@ import Layout from "../../layouts/Layout.astro";
|
||||
<main>
|
||||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-2">
|
||||
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/reset.svg" alt=""></button>
|
||||
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
|
||||
<button><img src="/assets/svg/cancel.svg" alt=""></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="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"/>
|
||||
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-4">
|
||||
<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>
|
||||
@@ -57,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){
|
||||
@@ -111,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 => {
|
||||
@@ -140,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'
|
||||
@@ -157,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', };
|
||||
|
||||
0
src/pages/tst2.astro
Normal file
0
src/pages/tst2.astro
Normal file
Reference in New Issue
Block a user