From f26075d2367080ee69742e865926d79dbe81f101 Mon Sep 17 00:00:00 2001 From: dev sp Date: Tue, 2 Jan 2024 14:18:38 +0000 Subject: [PATCH] worked on various pages --- src/pages/cross/v1.astro | 26 ++++++++++++-------- src/pages/cross/v2.astro | 32 +++++++++++++++---------- src/pages/drag/index.astro | 6 ++--- src/pages/drag/v2.astro | 45 ++++++++++++++++++++--------------- src/pages/drawing/index.astro | 4 ++-- src/pages/drawing/v2.astro | 4 ++-- src/pages/drawing/v3.astro | 4 ++-- src/pages/tick/v1.astro | 26 ++++++++++++-------- src/pages/tick/v2.astro | 31 ++++++++++++++---------- src/pages/tick/v3.astro | 17 +++++++++---- 10 files changed, 116 insertions(+), 79 deletions(-) diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro index 93cebc8..fb74e4e 100644 --- a/src/pages/cross/v1.astro +++ b/src/pages/cross/v1.astro @@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";

Cross

-
+

@@ -22,39 +22,39 @@ import Layout from "../../layouts/Layout.astro";

- + - +
- + - +
- + - +
@@ -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; diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro index ff31de7..8686ae6 100644 --- a/src/pages/cross/v2.astro +++ b/src/pages/cross/v2.astro @@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";

Cross

-
+

@@ -22,57 +22,57 @@ import Layout from "../../layouts/Layout.astro";

- + - + - +
- + - + - +
- + - + - +
@@ -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; diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index b0713a3..a0ef3aa 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -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); diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index af8bbc7..6eafb06 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -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){ diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro index 9c4ad6d..c127fd4 100644 --- a/src/pages/drawing/index.astro +++ b/src/pages/drawing/index.astro @@ -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); diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index e2fb7c4..a1d13d7 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -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); diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index 0b11026..ee854b5 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -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); diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro index 5fb6d0c..4d5a962 100644 --- a/src/pages/tick/v1.astro +++ b/src/pages/tick/v1.astro @@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";

Tick

-
+

@@ -22,39 +22,39 @@ import Layout from "../../layouts/Layout.astro";

- + - +
- + - +
- + - +
@@ -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; diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro index b8edd14..8e8567d 100644 --- a/src/pages/tick/v2.astro +++ b/src/pages/tick/v2.astro @@ -10,10 +10,10 @@ import Layout from "../../layouts/Layout.astro";

Tick

-
+

@@ -22,57 +22,57 @@ import Layout from "../../layouts/Layout.astro";

- + - + - +
- + - + - +
- + - + - +
@@ -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%; diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro index 1d45d58..a80b37d 100644 --- a/src/pages/tick/v3.astro +++ b/src/pages/tick/v3.astro @@ -12,12 +12,12 @@ import Layout from "../../layouts/Layout.astro";
-

-

+

+
-

+

@@ -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;