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

worked on various pages

pull/2/head
dev sp 2024-01-02 14:18:38 +00:00
parent 8b57605218
commit f26075d236
10 changed files with 116 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
@ -22,39 +22,39 @@ import Layout from "../../layouts/Layout.astro";
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
@ -96,8 +96,8 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label6){ if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6; document.getElementById("label6").innerHTML = gameData.label6;
} }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy; // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
@ -191,6 +191,11 @@ import Layout from "../../layouts/Layout.astro";
body{ body{
font-family: Quicksand; font-family: Quicksand;
} }
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;
@ -199,6 +204,7 @@ import Layout from "../../layouts/Layout.astro";
.redBorder{ .redBorder{
border: 4px solid red; border: 4px solid red;
border-radius: 10%; border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 150px; width: 150px;

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

@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
@ -22,57 +22,57 @@ import Layout from "../../layouts/Layout.astro";
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7"></p> <p id="label7"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8"></p> <p id="label8"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9"></p> <p id="label9"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
@ -122,8 +122,8 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label9){ if(gameData.label9){
document.getElementById("label9").innerHTML = gameData.label9; document.getElementById("label9").innerHTML = gameData.label9;
} }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy; // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const imageId = `image${i}`; const imageId = `image${i}`;
@ -225,6 +225,11 @@ import Layout from "../../layouts/Layout.astro";
body{ body{
font-family: Quicksand; font-family: Quicksand;
} }
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;
@ -233,6 +238,7 @@ import Layout from "../../layouts/Layout.astro";
.redBorder{ .redBorder{
border: 4px solid red; border: 4px solid red;
border-radius: 10%; border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
} }
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{ #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 150px; width: 150px;

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

@ -299,12 +299,12 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 30; const baseFontSize = 30;
// Calculate responsive font size based on screen width // Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#7c4c23',
}).setOrigin(0.5); }).setOrigin(0.5);
this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23); this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23); this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);

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

@ -79,8 +79,16 @@ import Layout from '../../layouts/Layout.astro';
let submitButton; let submitButton;
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let allElement = element1, element2, element3, element4, element5, element6, element7, element8; let imageElement1;
allElement.setVisible(false) let imageElement2;
let imageElement3;
let imageElement4;
let imageElement5;
let imageElement6;
let imageElement7;
let imageElement8;
// let allElement = [element1, element2, element3, element4, element5, element6, element7, element8];
// allElement.setVisible(false)
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -305,35 +313,35 @@ import Layout from '../../layouts/Layout.astro';
// this.load.image("target3", '/assets/mat.png'); // this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png'); // this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
element1 = this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element2 = this.load.spritesheet("blocks2", assetsList.element6,{ this.load.spritesheet("blocks2", assetsList.element6,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element3 = this.load.spritesheet("blocks3", assetsList.element7,{ this.load.spritesheet("blocks3", assetsList.element7,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element4 =this.load.spritesheet("blocks4", assetsList.element8,{ this.load.spritesheet("blocks4", assetsList.element8,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element5 = this.load.spritesheet("blocks5", assetsList.element1,{ this.load.spritesheet("blocks5", assetsList.element1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element6 = this.load.spritesheet("blocks6", assetsList.element2, { this.load.spritesheet("blocks6", assetsList.element2, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element7 = this.load.spritesheet("blocks7", assetsList.element3, { this.load.spritesheet("blocks7", assetsList.element3, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
element8 = this.load.spritesheet("blocks8", assetsList.element4, { this.load.spritesheet("blocks8", assetsList.element4, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
@ -355,8 +363,8 @@ import Layout from '../../layouts/Layout.astro';
font: ` ${responsiveFontSize}px Quicksand`, font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23', fill: '#7c4c23',
}).setOrigin(0.5); }).setOrigin(0.5);
this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23); this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23); this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);
@ -483,6 +491,7 @@ import Layout from '../../layouts/Layout.astro';
id: "block8", id: "block8",
}, },
]; ];
// console.log('test blocks',blocks[0])
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
@ -491,9 +500,8 @@ import Layout from '../../layouts/Layout.astro';
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 10).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@ -559,7 +567,6 @@ import Layout from '../../layouts/Layout.astro';
}; };
let score = 0; let score = 0;
let counter = 0; let counter = 0;
let bottomElement = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
if(isMatch){ if(isMatch){

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

@ -120,8 +120,8 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 15; const baseFontSize = 15;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

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

@ -137,8 +137,8 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 15; const baseFontSize = 15;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

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

@ -120,8 +120,8 @@ import Layout from '../../layouts/Layout.astro';
const baseFontSize = 15; const baseFontSize = 15;
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

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

@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
@ -22,39 +22,39 @@ import Layout from "../../layouts/Layout.astro";
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
@ -96,8 +96,8 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label6){ if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6; document.getElementById("label6").innerHTML = gameData.label6;
} }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy; // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 6; i++) { for (let i = 1; i <= 6; i++) {
@ -342,6 +342,11 @@ import Layout from "../../layouts/Layout.astro";
body{ body{
font-family: Quicksand; font-family: Quicksand;
} }
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;
@ -350,6 +355,7 @@ import Layout from "../../layouts/Layout.astro";
.redBorder{ .redBorder{
border: 4px solid red; border: 4px solid red;
border-radius: 10%; border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
} }
#image1, #image2, #image3, #image4, #image5, #image6{ #image1, #image2, #image3, #image4, #image5, #image6{
width: 150px; width: 150px;

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

@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
@ -22,57 +22,57 @@ import Layout from "../../layouts/Layout.astro";
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7"></p> <p id="label7"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8"></p> <p id="label8"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9"></p> <p id="label9"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
@ -122,8 +122,8 @@ import Layout from "../../layouts/Layout.astro";
if(gameData.label9){ if(gameData.label9){
document.getElementById("label9").innerHTML = gameData.label9; document.getElementById("label9").innerHTML = gameData.label9;
} }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy; // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 9; i++) { for (let i = 1; i <= 9; i++) {
const imageId = `image${i}`; const imageId = `image${i}`;
@ -392,6 +392,11 @@ import Layout from "../../layouts/Layout.astro";
body{ body{
font-family: Quicksand; font-family: Quicksand;
} }
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
}
.greenBorder{ .greenBorder{
border: 4px solid #008000; border: 4px solid #008000;
border-radius: 10%; border-radius: 10%;

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

@ -12,12 +12,12 @@ import Layout from "../../layouts/Layout.astro";
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<p id="LearningArea"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<p id="LearningSubArea"></p> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center "> <div class="flex flex-col justify-center place-items-center ">
<img class="w-fit" draggable="false" id="descImage" src="" alt="" /> <img class="w-fit" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-6 select-none " id="gameDescription"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-6 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
<div id="itemForm" class=""> <div id="itemForm" class="">
@ -65,7 +65,14 @@ import Layout from "../../layouts/Layout.astro";
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
console.log(gameData) console.log(gameData)
document.getElementById("gameLabel").innerHTML = gameData.label;
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1, gameData.label2, gameData.label3){
document.getElementById("label1").innerHTML = gameData.label1;
document.getElementById("label2").innerHTML = gameData.label2;
document.getElementById("label3").innerHTML = gameData.label3;
}
// if(gameData.label1){ // if(gameData.label1){
// document.getElementById("label1").innerHTML = gameData.label1; // document.getElementById("label1").innerHTML = gameData.label1;
// } // }
@ -75,8 +82,8 @@ import Layout from "../../layouts/Layout.astro";
// if(gameData.label3){ // if(gameData.label3){
// document.getElementById("label3").innerHTML = gameData.label3; // document.getElementById("label3").innerHTML = gameData.label3;
// } // }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea; // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/'; const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
document.getElementById('descImage').src = assetsURL + gameData.descript_img; document.getElementById('descImage').src = assetsURL + gameData.descript_img;