worked on various pages
dev sp
parent
8b57605218
commit
f26075d236
|
|
@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<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>
|
||||
<div class="flex flex-col">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></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>
|
||||
<form id="contactForm">
|
||||
<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" />
|
||||
<p id="label1"></p>
|
||||
</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">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</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 place-items-center justify-center pt-8">
|
||||
|
|
@ -96,8 +96,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if(gameData.label6){
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
|
|
@ -191,6 +191,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
|
|
@ -199,6 +204,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
.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;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<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>
|
||||
<div class="flex flex-col">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></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>
|
||||
<form id="contactForm">
|
||||
<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" />
|
||||
<p id="label1"></p>
|
||||
</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">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</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">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</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">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
</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">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
</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 class="flex flex-col justify-center place-items-center pt-8">
|
||||
|
|
@ -122,8 +122,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if(gameData.label9){
|
||||
document.getElementById("label9").innerHTML = gameData.label9;
|
||||
}
|
||||
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const imageId = `image${i}`;
|
||||
|
|
@ -225,6 +225,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
|
|
@ -233,6 +238,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -299,12 +299,12 @@ import Layout from '../../layouts/Layout.astro';
|
|||
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, {
|
||||
const descrptText = this.add.text(screenCenterX, 76, data.description, {
|
||||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).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);
|
||||
// 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
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -79,8 +79,16 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let allElement = element1, element2, element3, element4, element5, element6, element7, element8;
|
||||
allElement.setVisible(false)
|
||||
let imageElement1;
|
||||
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 = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
|
|
@ -209,10 +217,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
|
||||
assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
|
||||
assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
|
||||
assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
|
||||
assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
|
||||
assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
|
||||
assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
|
||||
assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
|
||||
assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
|
||||
assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
|
||||
assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
|
||||
// console.log(assetsList.left_image1)
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
|
|
@ -305,35 +313,35 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// this.load.image("target3", '/assets/mat.png');
|
||||
// this.load.image("target4", '/assets/star.png');
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
element1 = this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element2 = this.load.spritesheet("blocks2", assetsList.element6,{
|
||||
this.load.spritesheet("blocks2", assetsList.element6,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element3 = this.load.spritesheet("blocks3", assetsList.element7,{
|
||||
this.load.spritesheet("blocks3", assetsList.element7,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element4 =this.load.spritesheet("blocks4", assetsList.element8,{
|
||||
this.load.spritesheet("blocks4", assetsList.element8,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element5 = this.load.spritesheet("blocks5", assetsList.element1,{
|
||||
this.load.spritesheet("blocks5", assetsList.element1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element6 = this.load.spritesheet("blocks6", assetsList.element2, {
|
||||
this.load.spritesheet("blocks6", assetsList.element2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element7 = this.load.spritesheet("blocks7", assetsList.element3, {
|
||||
this.load.spritesheet("blocks7", assetsList.element3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
element8 = this.load.spritesheet("blocks8", assetsList.element4, {
|
||||
this.load.spritesheet("blocks8", assetsList.element4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
|
|
@ -355,8 +363,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
font: ` ${responsiveFontSize}px Quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).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);
|
||||
// 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
|
||||
this.add.text(leftTargetZoneW - 45, 240, data.left_image1_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",
|
||||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
|
|
@ -491,9 +500,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
||||
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);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
|
|
@ -559,7 +567,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
};
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
let bottomElement = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
|
|
|
|||
|
|
@ -120,8 +120,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const baseFontSize = 15;
|
||||
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
|
||||
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 + 20, data.LearningSubArea, {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)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
|
|||
|
|
@ -137,8 +137,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const baseFontSize = 15;
|
||||
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
|
||||
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 + 20, data.LearningSubArea, {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)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
|
|||
|
|
@ -120,8 +120,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const baseFontSize = 15;
|
||||
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
|
||||
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 + 20, data.LearningSubArea, {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)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<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>
|
||||
<div class="flex flex-col">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></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>
|
||||
<form id="contactForm">
|
||||
<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" />
|
||||
<p id="label1"></p>
|
||||
</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">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</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 place-items-center justify-center pt-8">
|
||||
|
|
@ -96,8 +96,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if(gameData.label6){
|
||||
document.getElementById("label6").innerHTML = gameData.label6;
|
||||
}
|
||||
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
|
|
@ -342,6 +342,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
|
|
@ -350,6 +355,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
.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;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<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>
|
||||
<div class="flex flex-col">
|
||||
<!-- <div class="flex flex-col">
|
||||
<p id="LearningArea"></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>
|
||||
<form id="contactForm">
|
||||
<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" />
|
||||
<p id="label1"></p>
|
||||
</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">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</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">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</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">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</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 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>
|
||||
<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">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
</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">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
</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 class="flex flex-col justify-center place-items-center pt-8">
|
||||
|
|
@ -122,8 +122,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
if(gameData.label9){
|
||||
document.getElementById("label9").innerHTML = gameData.label9;
|
||||
}
|
||||
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
|
||||
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const imageId = `image${i}`;
|
||||
|
|
@ -392,6 +392,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p id="LearningArea"></p>
|
||||
<p id="LearningSubArea"></p>
|
||||
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
|
||||
<!-- <p id="LearningSubArea"></p> -->
|
||||
</div>
|
||||
<div class="flex flex-col justify-center place-items-center ">
|
||||
<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>
|
||||
<form id="contactForm" class="">
|
||||
<div id="itemForm" class="">
|
||||
|
|
@ -65,7 +65,14 @@ import Layout from "../../layouts/Layout.astro";
|
|||
.then(data => {
|
||||
gameData = data.data;
|
||||
console.log(gameData)
|
||||
document.getElementById("gameLabel").innerHTML = gameData.label;
|
||||
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){
|
||||
// document.getElementById("label1").innerHTML = gameData.label1;
|
||||
// }
|
||||
|
|
@ -75,8 +82,8 @@ import Layout from "../../layouts/Layout.astro";
|
|||
// if(gameData.label3){
|
||||
// document.getElementById("label3").innerHTML = gameData.label3;
|
||||
// }
|
||||
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
|
||||
document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
|
||||
// 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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue