diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 83446a5..eb59e3a 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -306,19 +306,19 @@ import Layout from '../../layouts/Layout.astro'; blockMatches = [ { blockName: "blocks1", - targetName: `target${data.answer1}`, + targetName: `target${data.right_match1}`, }, { blockName: "blocks2", - targetName: `target${data.answer2}`, + targetName: `target${data.right_match2}`, }, { blockName: "blocks3", - targetName: `target${data.answer3}`, + targetName: `target${data.right_match3}`, }, { blockName: "blocks4", - targetName: `target${data.answer4}`, + targetName: `target${data.right_match4}`, }, ]; // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro index d13bdec..df4d83b 100644 --- a/src/pages/drag/v2.astro +++ b/src/pages/drag/v2.astro @@ -75,6 +75,7 @@ import Layout from '../../layouts/Layout.astro'; let submitButton; let formattedDateTime; let shortUniqueID; + let blockMatches; gameResult = []; window.onload = function() { // Get the current date and time @@ -123,24 +124,6 @@ import Layout from '../../layouts/Layout.astro'; block: null, }, ]; - const blockMatches = [ - { - blockName: "blocks1", - targetName: "target1", - }, - { - blockName: "blocks2", - targetName: "target2", - }, - { - blockName: "blocks3", - targetName: "target3", - }, - { - blockName: "blocks4", - targetName: "target4", - }, - ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {} const params = new URLSearchParams(window.location.search); @@ -293,7 +276,25 @@ import Layout from '../../layouts/Layout.astro'; fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({ data }) => { - // console.log(data) + // console.log(data) right_match + blockMatches = [ + { + blockName: "blocks1", + targetName: `target${data.right_match1}`, + }, + { + blockName: "blocks2", + targetName: `target${data.right_match2}`, + }, + { + blockName: "blocks3", + targetName: `target${data.right_match3}`, + }, + { + blockName: "blocks4", + targetName: `target${data.right_match4}`, + }, + ]; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text const baseFontSize = 30; @@ -572,6 +573,7 @@ import Layout from '../../layouts/Layout.astro'; } } const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) let scoreTotal=0; if(match){ scoreTotal++; diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro index e4134dd..6b4fce0 100644 --- a/src/pages/drag/v3.astro +++ b/src/pages/drag/v3.astro @@ -64,8 +64,8 @@ import Layout from '../../layouts/Layout.astro'; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 140; retryButtonHeight = window.innerHeight - 50; - leftTargetZoneW = window.innerWidth / 6; - rightTargetZoneW = window.innerWidth * 0.9 - 40; + leftTargetZoneW = window.innerWidth * 0.9 - 40; + rightTargetZoneW = window.innerWidth / 6; } else { noticeWidth = 100; noticeHeight = 0; @@ -73,13 +73,14 @@ import Layout from '../../layouts/Layout.astro'; buttonHeight = 0; retryButtonWidth = window.innerWidth / 2 - 50; retryButtonHeight = window.innerHeight - 70; - leftTargetZoneW = window.innerWidth / 6; - rightTargetZoneW = window.innerWidth * 0.9 - 172; + leftTargetZoneW = window.innerWidth * 0.9 - 172; + rightTargetZoneW = window.innerWidth / 6; } let submitButton; let formattedDateTime; let shortUniqueID; let retryButton; + let blockMatches; gameResult = []; window.onload = function() { // Get the current date and time @@ -152,44 +153,6 @@ import Layout from '../../layouts/Layout.astro'; block: null, }, ]; - const blockMatches = [ - { - blockName: "blocks1", - targetName: "target1", - }, - { - blockName: "blocks2", - targetName: "target2", - }, - { - blockName: "blocks3", - targetName: "target3", - }, - { - blockName: "blocks4", - targetName: "target4", - }, - { - blockName: "blocks5", - targetName: "target5", - }, - { - blockName: "blocks6", - targetName: "target6", - }, - { - blockName: "blocks7", - targetName: "target7", - }, - { - blockName: "blocks8", - targetName: "target8", - }, - { - blockName: "blocks9", - targetName: "target9", - }, - ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {}; const params = new URLSearchParams(window.location.search); @@ -212,7 +175,6 @@ import Layout from '../../layouts/Layout.astro'; assetsList.element6 = assetsURL + image6 + imageCustomWidth; assetsList.element7 = assetsURL + image7 + imageCustomWidth; assetsList.element8 = assetsURL + image8 + imageCustomWidth; - // console.log(assetsList.left_image1) const config = { type: Phaser.AUTO, width: window.innerWidth, @@ -290,7 +252,6 @@ import Layout from '../../layouts/Layout.astro'; percentText.destroy(); assetText.destroy(); }); - // this.load.image('logo', 'zenvalogo.png'); for (var i = 0; i < 5; i++) { this.load.image('logo'+i, '/assets/background.jpg'); } @@ -298,11 +259,6 @@ import Layout from '../../layouts/Layout.astro'; this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("tick", '/assets/tick.png'); this.load.image("retryIcon", "/assets/svg/retry.svg") - // this.load.image("bg", '/assets/bgwhite.jpg'); - // this.load.image("target1", assetsList.right_image1); - // this.load.image("target2", '/assets/hay.png'); - // this.load.image("target3", '/assets/mat.png'); - // this.load.image("target4", '/assets/star.png'); this.load.image("border", '/assets/squar.png'); this.load.spritesheet("blocks1", assetsList.element5,{ frameWidth: 100, @@ -344,6 +300,41 @@ import Layout from '../../layouts/Layout.astro'; fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({ data }) => { + console.log(data) + blockMatches = [ + { + blockName: "blocks1", + targetName: `target${data.match_with1}`, + }, + { + blockName: "blocks2", + targetName: `target${data.match_with2}`, + }, + { + blockName: "blocks3", + targetName: `target${data.match_with3}`, + }, + { + blockName: "blocks4", + targetName: `target${data.match_with4}`, + }, + { + blockName: "blocks5", + targetName: `target${data.match_with5}`, + }, + { + blockName: "blocks6", + targetName: `target${data.match_with6}`, + }, + { + blockName: "blocks7", + targetName: `target${data.match_with7}`, + }, + { + blockName: "blocks8", + targetName: `target${data.match_with8}`, + } + ]; // console.log(data) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; // Base font size for your text @@ -354,19 +345,6 @@ 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); - // 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); - // this.add.text(leftTargetZoneW - 45, 579, data.left_image3_name).setTint(0x7c4c23); - // this.add.text(leftTargetZoneW - 45, 750, data.left_image4_name).setTint(0x7c4c23); - - // //Right Image Name leftTargetZoneW rightTargetZoneW - // this.add.text(rightTargetZoneW - 44, 240, data.right_image1_name).setTint(0x7c4c23); - // this.add.text(rightTargetZoneW - 44, 409, data.right_image2_name).setTint(0x7c4c23); - // this.add.text(rightTargetZoneW - 44, 579, data.right_image3_name).setTint(0x7c4c23); - // this.add.text(rightTargetZoneW - 44, 750, data.right_image4_name).setTint(0x7c4c23); }) .catch(error => { console.error('Error fetching initial data:', error); @@ -424,59 +402,51 @@ import Layout from '../../layouts/Layout.astro'; // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); this.add.image(displayW / 6, 30, "topMatch").setScale(); this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); - // this.add.image(displayW * 0.9-32, 170, "target1"), - // this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65), - // this.add.image(displayW * 0.9-32, 340, "target2"), - // this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65), - // this.add.image(displayW * 0.9-32, 510, "target3"), - // this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65), - // this.add.image(displayW * 0.9-32, 680, "target4"), - // this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65); const blocks = [ { - x: displayW / 2, + x: displayW / 2-400, y: window.innerHeight - 120, textureKey: "blocks1", id: "block1", }, { - x: displayW / 2-100, + x: displayW / 2-300, y: window.innerHeight - 120, textureKey: "blocks2", id: "block2", }, { - x: displayW / 2+100, + x: displayW / 2-200, y: window.innerHeight - 120, textureKey: "blocks3", id: "block3", }, { - x: displayW / 2-200, + x: displayW / 2 - 100, y: window.innerHeight - 120, textureKey: "blocks4", id: "block4", }, { - x: displayW / 2+200, + x: displayW / 2+100, y: window.innerHeight - 120, textureKey: "blocks5", id: "block5", }, { - x: displayW / 2-300, + x: displayW / 2, y: window.innerHeight - 120, textureKey: "blocks6", id: "block6", }, { - x: displayW / 2+300, + x: displayW / 2+200, y: window.innerHeight - 120, textureKey: "blocks7", id: "block7", }, { - x: displayW / 2-400, + x: displayW / 2+300, y: window.innerHeight - 120, textureKey: "blocks8", id: "block8", @@ -485,9 +455,10 @@ import Layout from '../../layouts/Layout.astro'; // console.log('test blocks',blocks[0]) const droppedBlocks = []; const targetZoneBorders = []; - targetZones.forEach((targetZone) => { + targetZones.forEach((targetZone, index) => { const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65); + const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -574,6 +545,7 @@ import Layout from '../../layouts/Layout.astro'; } } const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) let scoreTotal=0; if(match){ scoreTotal++; diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro index 84b977a..7d6d773 100644 --- a/src/pages/drag/v4.astro +++ b/src/pages/drag/v4.astro @@ -80,6 +80,7 @@ import Layout from '../../layouts/Layout.astro'; let formattedDateTime; let shortUniqueID; let retryButton; + let blockMatches; gameResult = []; window.onload = function() { // Get the current date and time @@ -102,7 +103,7 @@ import Layout from '../../layouts/Layout.astro'; { x: leftTargetZoneW + 30, y: window.innerHeight / 2.5, - name: "leftTarget1", + name: "target1", block: null, }, // Add more left target zones as needed @@ -112,52 +113,13 @@ import Layout from '../../layouts/Layout.astro'; { x: rightTargetZoneW - 30, y: window.innerHeight / 2.5, - name: "rightTarget1", + name: "target2", block: null, }, // Add more right target zones as needed ]; const targetZones = [...leftTargetZones, ...rightTargetZones]; - - const blockMatches = [ - { - blockName: "blocks1", - targetName: "target1", - }, - { - blockName: "blocks2", - targetName: "target2", - }, - { - blockName: "blocks3", - targetName: "target3", - }, - { - blockName: "blocks4", - targetName: "target4", - }, - { - blockName: "blocks5", - targetName: "target5", - }, - { - blockName: "blocks6", - targetName: "target6", - }, - { - blockName: "blocks7", - targetName: "target7", - }, - { - blockName: "blocks8", - targetName: "target8", - }, - { - blockName: "blocks9", - targetName: "target9", - }, - ]; // console.log(blockMatches.blockName, blockMatches.targetName) var assetsList = {}; const params = new URLSearchParams(window.location.search); @@ -327,6 +289,40 @@ import Layout from '../../layouts/Layout.astro'; fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) .then(response => response.json()) .then(({ data }) => { + blockMatches = [ + { + blockName: "blocks1", + targetName: `target${data.match1}`, + }, + { + blockName: "blocks2", + targetName: `target${data.match2}`, + }, + { + blockName: "blocks3", + targetName: `target${data.match3}`, + }, + { + blockName: "blocks4", + targetName: `target${data.match4}`, + }, + { + blockName: "blocks5", + targetName: `target${data.match5}`, + }, + { + blockName: "blocks6", + targetName: `target${data.match6}`, + }, + { + blockName: "blocks7", + targetName: `target${data.match7}`, + }, + { + blockName: "blocks8", + targetName: `target${data.match8}`, + } + ]; // console.log(data) if(isMobile){ this.add.text(window.innerWidth / 24, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`}); @@ -403,50 +399,50 @@ import Layout from '../../layouts/Layout.astro'; this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); const blocks = [ { - x: displayW / 2, - y: window.innerHeight - 120, + x: displayW / 2 - 200, + y: window.innerHeight - 250, textureKey: "blocks1", id: "block1", }, { x: displayW / 2-100, - y: window.innerHeight - 120, + y: window.innerHeight - 250, textureKey: "blocks2", id: "block2", }, { - x: displayW / 2+100, - y: window.innerHeight - 120, + x: displayW / 2, + y: window.innerHeight - 250, textureKey: "blocks3", id: "block3", }, { - x: displayW / 2-200, - y: window.innerHeight - 120, + x: displayW / 2+100, + y: window.innerHeight - 250, textureKey: "blocks4", id: "block4", }, { - x: displayW / 2, - y: window.innerHeight - 250, + x: displayW / 2-200, + y: window.innerHeight - 120, textureKey: "blocks5", id: "block5", }, { x: displayW / 2-100, - y: window.innerHeight - 250, + y: window.innerHeight - 120, textureKey: "blocks6", id: "block6", }, { - x: displayW / 2+100, - y: window.innerHeight - 250, + x: displayW / 2, + y: window.innerHeight - 120, textureKey: "blocks7", id: "block7", }, { - x: displayW / 2-200, - y: window.innerHeight - 250, + x: displayW / 2+100, + y: window.innerHeight - 120, textureKey: "blocks8", id: "block8", }, @@ -528,24 +524,25 @@ import Layout from '../../layouts/Layout.astro'; let counter = 0; const isMatch = (blockName, targetName) => { - if(isMatch){ - counter++; - // console.log(counter) + if(isMatch){ + counter++; + console.log(counter) - if(counter === 8){ - const overlap = document.getElementById("overlap"); - overlap.style.display = "block"; - console.log(counter) - submitButton.setVisible(true); - retryButton.setVisible(true); + if(counter === 8){ + const overlap = document.getElementById("overlap"); + overlap.style.display = "block"; + console.log(counter) + submitButton.setVisible(true); + retryButton.setVisible(true); + } + } + const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); + console.log(match) + let scoreTotal=0; + if(match !== undefined){ + scoreTotal++; + console.log("Score Total", scoreTotal) } - } - const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); - let scoreTotal=0; - if(match){ - scoreTotal++; - // console.log(scoreTotal) - } }; diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro index 3402267..388260a 100644 --- a/src/pages/drawing/v2.astro +++ b/src/pages/drawing/v2.astro @@ -134,8 +134,8 @@ import Layout from '../../layouts/Layout.astro'; .then(({ data }) => { // console.log(data.colors) const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; - const baseFontSize = 15; - const responsiveFontSize = (window.innerWidth / 280) * baseFontSize; + const baseFontSize = 22; + const responsiveFontSize = (window.innerWidth / 800) * 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) diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro index db53b96..951f2b0 100644 --- a/src/pages/drawing/v3.astro +++ b/src/pages/drawing/v3.astro @@ -175,11 +175,11 @@ import Layout from '../../layouts/Layout.astro'; }) const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; if(!isMobile){ - // this.add.text(customWidth / 10, 20, "Drawing", textStyle); - // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); + this.add.text(customWidth / 10, 20, "Drawing", textStyle); + this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); } else { - // this.add.text(customWidth / 30, 0, "Drawing", textStyle); - // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); + this.add.text(customWidth / 30, 0, "Drawing", textStyle); + this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); } const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); if(isMobile){