worked on drag games score calculations
parent
62565a5bf2
commit
94e1b772aa
|
@ -306,19 +306,19 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
blockMatches = [
|
blockMatches = [
|
||||||
{
|
{
|
||||||
blockName: "blocks1",
|
blockName: "blocks1",
|
||||||
targetName: `target${data.answer1}`,
|
targetName: `target${data.right_match1}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
blockName: "blocks2",
|
blockName: "blocks2",
|
||||||
targetName: `target${data.answer2}`,
|
targetName: `target${data.right_match2}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
blockName: "blocks3",
|
blockName: "blocks3",
|
||||||
targetName: `target${data.answer3}`,
|
targetName: `target${data.right_match3}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
blockName: "blocks4",
|
blockName: "blocks4",
|
||||||
targetName: `target${data.answer4}`,
|
targetName: `target${data.right_match4}`,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
// 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);
|
||||||
|
|
|
@ -75,6 +75,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
let submitButton;
|
let submitButton;
|
||||||
let formattedDateTime;
|
let formattedDateTime;
|
||||||
let shortUniqueID;
|
let shortUniqueID;
|
||||||
|
let blockMatches;
|
||||||
gameResult = [];
|
gameResult = [];
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
// Get the current date and time
|
// Get the current date and time
|
||||||
|
@ -123,24 +124,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
block: null,
|
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)
|
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||||
var assetsList = {}
|
var assetsList = {}
|
||||||
const params = new URLSearchParams(window.location.search);
|
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`)
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(({ data }) => {
|
.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;
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
// Base font size for your text
|
// Base font size for your text
|
||||||
const baseFontSize = 30;
|
const baseFontSize = 30;
|
||||||
|
@ -572,6 +573,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||||
|
console.log(match)
|
||||||
let scoreTotal=0;
|
let scoreTotal=0;
|
||||||
if(match){
|
if(match){
|
||||||
scoreTotal++;
|
scoreTotal++;
|
||||||
|
|
|
@ -64,8 +64,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
buttonHeight = 0;
|
buttonHeight = 0;
|
||||||
retryButtonWidth = window.innerWidth / 2 - 140;
|
retryButtonWidth = window.innerWidth / 2 - 140;
|
||||||
retryButtonHeight = window.innerHeight - 50;
|
retryButtonHeight = window.innerHeight - 50;
|
||||||
leftTargetZoneW = window.innerWidth / 6;
|
leftTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
rightTargetZoneW = window.innerWidth / 6;
|
||||||
} else {
|
} else {
|
||||||
noticeWidth = 100;
|
noticeWidth = 100;
|
||||||
noticeHeight = 0;
|
noticeHeight = 0;
|
||||||
|
@ -73,13 +73,14 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
buttonHeight = 0;
|
buttonHeight = 0;
|
||||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||||
retryButtonHeight = window.innerHeight - 70;
|
retryButtonHeight = window.innerHeight - 70;
|
||||||
leftTargetZoneW = window.innerWidth / 6;
|
leftTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
rightTargetZoneW = window.innerWidth / 6;
|
||||||
}
|
}
|
||||||
let submitButton;
|
let submitButton;
|
||||||
let formattedDateTime;
|
let formattedDateTime;
|
||||||
let shortUniqueID;
|
let shortUniqueID;
|
||||||
let retryButton;
|
let retryButton;
|
||||||
|
let blockMatches;
|
||||||
gameResult = [];
|
gameResult = [];
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
// Get the current date and time
|
// Get the current date and time
|
||||||
|
@ -152,44 +153,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
block: null,
|
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)
|
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||||
var assetsList = {};
|
var assetsList = {};
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
@ -212,7 +175,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
|
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
|
||||||
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
|
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
|
||||||
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
|
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
|
||||||
// console.log(assetsList.left_image1)
|
|
||||||
const config = {
|
const config = {
|
||||||
type: Phaser.AUTO,
|
type: Phaser.AUTO,
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
|
@ -290,7 +252,6 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
percentText.destroy();
|
percentText.destroy();
|
||||||
assetText.destroy();
|
assetText.destroy();
|
||||||
});
|
});
|
||||||
// this.load.image('logo', 'zenvalogo.png');
|
|
||||||
for (var i = 0; i < 5; i++) {
|
for (var i = 0; i < 5; i++) {
|
||||||
this.load.image('logo'+i, '/assets/background.jpg');
|
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("topLogo", "/assets/top_logo.jpg");
|
||||||
this.load.image("tick", '/assets/tick.png');
|
this.load.image("tick", '/assets/tick.png');
|
||||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
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.image("border", '/assets/squar.png');
|
||||||
this.load.spritesheet("blocks1", assetsList.element5,{
|
this.load.spritesheet("blocks1", assetsList.element5,{
|
||||||
frameWidth: 100,
|
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`)
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(({ data }) => {
|
.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)
|
// console.log(data)
|
||||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
// Base font size for your text
|
// Base font size for your text
|
||||||
|
@ -354,19 +345,6 @@ 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, 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 => {
|
.catch(error => {
|
||||||
console.error('Error fetching initial data:', 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 / 2, displayH / 2, "bg").setScale(2.4);
|
||||||
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
||||||
this.add.image(displayW * 0.80-5, 30, "topLogo").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 = [
|
const blocks = [
|
||||||
{
|
{
|
||||||
x: displayW / 2,
|
x: displayW / 2-400,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks1",
|
textureKey: "blocks1",
|
||||||
id: "block1",
|
id: "block1",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-100,
|
x: displayW / 2-300,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks2",
|
textureKey: "blocks2",
|
||||||
id: "block2",
|
id: "block2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2+100,
|
x: displayW / 2-200,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks3",
|
textureKey: "blocks3",
|
||||||
id: "block3",
|
id: "block3",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-200,
|
x: displayW / 2 - 100,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks4",
|
textureKey: "blocks4",
|
||||||
id: "block4",
|
id: "block4",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2+200,
|
x: displayW / 2+100,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks5",
|
textureKey: "blocks5",
|
||||||
id: "block5",
|
id: "block5",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-300,
|
x: displayW / 2,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks6",
|
textureKey: "blocks6",
|
||||||
id: "block6",
|
id: "block6",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2+300,
|
x: displayW / 2+200,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks7",
|
textureKey: "blocks7",
|
||||||
id: "block7",
|
id: "block7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-400,
|
x: displayW / 2+300,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks8",
|
textureKey: "blocks8",
|
||||||
id: "block8",
|
id: "block8",
|
||||||
|
@ -485,9 +455,10 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
// console.log('test blocks',blocks[0])
|
// console.log('test blocks',blocks[0])
|
||||||
const droppedBlocks = [];
|
const droppedBlocks = [];
|
||||||
const targetZoneBorders = [];
|
const targetZoneBorders = [];
|
||||||
targetZones.forEach((targetZone) => {
|
targetZones.forEach((targetZone, index) => {
|
||||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
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 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);
|
targetZoneBorders.push(targetBorder);
|
||||||
targetZone.block = null;
|
targetZone.block = null;
|
||||||
}),
|
}),
|
||||||
|
@ -574,6 +545,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||||
|
console.log(match)
|
||||||
let scoreTotal=0;
|
let scoreTotal=0;
|
||||||
if(match){
|
if(match){
|
||||||
scoreTotal++;
|
scoreTotal++;
|
||||||
|
|
|
@ -80,6 +80,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
let formattedDateTime;
|
let formattedDateTime;
|
||||||
let shortUniqueID;
|
let shortUniqueID;
|
||||||
let retryButton;
|
let retryButton;
|
||||||
|
let blockMatches;
|
||||||
gameResult = [];
|
gameResult = [];
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
// Get the current date and time
|
// Get the current date and time
|
||||||
|
@ -102,7 +103,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
{
|
{
|
||||||
x: leftTargetZoneW + 30,
|
x: leftTargetZoneW + 30,
|
||||||
y: window.innerHeight / 2.5,
|
y: window.innerHeight / 2.5,
|
||||||
name: "leftTarget1",
|
name: "target1",
|
||||||
block: null,
|
block: null,
|
||||||
},
|
},
|
||||||
// Add more left target zones as needed
|
// Add more left target zones as needed
|
||||||
|
@ -112,52 +113,13 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
{
|
{
|
||||||
x: rightTargetZoneW - 30,
|
x: rightTargetZoneW - 30,
|
||||||
y: window.innerHeight / 2.5,
|
y: window.innerHeight / 2.5,
|
||||||
name: "rightTarget1",
|
name: "target2",
|
||||||
block: null,
|
block: null,
|
||||||
},
|
},
|
||||||
// Add more right target zones as needed
|
// Add more right target zones as needed
|
||||||
];
|
];
|
||||||
|
|
||||||
const targetZones = [...leftTargetZones, ...rightTargetZones];
|
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)
|
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||||
var assetsList = {};
|
var assetsList = {};
|
||||||
const params = new URLSearchParams(window.location.search);
|
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`)
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(({ data }) => {
|
.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)
|
// console.log(data)
|
||||||
if(isMobile){
|
if(isMobile){
|
||||||
this.add.text(window.innerWidth / 24, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
|
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();
|
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||||
const blocks = [
|
const blocks = [
|
||||||
{
|
{
|
||||||
x: displayW / 2,
|
x: displayW / 2 - 200,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 250,
|
||||||
textureKey: "blocks1",
|
textureKey: "blocks1",
|
||||||
id: "block1",
|
id: "block1",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-100,
|
x: displayW / 2-100,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 250,
|
||||||
textureKey: "blocks2",
|
textureKey: "blocks2",
|
||||||
id: "block2",
|
id: "block2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2+100,
|
x: displayW / 2,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 250,
|
||||||
textureKey: "blocks3",
|
textureKey: "blocks3",
|
||||||
id: "block3",
|
id: "block3",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-200,
|
x: displayW / 2+100,
|
||||||
y: window.innerHeight - 120,
|
y: window.innerHeight - 250,
|
||||||
textureKey: "blocks4",
|
textureKey: "blocks4",
|
||||||
id: "block4",
|
id: "block4",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2,
|
x: displayW / 2-200,
|
||||||
y: window.innerHeight - 250,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks5",
|
textureKey: "blocks5",
|
||||||
id: "block5",
|
id: "block5",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-100,
|
x: displayW / 2-100,
|
||||||
y: window.innerHeight - 250,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks6",
|
textureKey: "blocks6",
|
||||||
id: "block6",
|
id: "block6",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2+100,
|
x: displayW / 2,
|
||||||
y: window.innerHeight - 250,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks7",
|
textureKey: "blocks7",
|
||||||
id: "block7",
|
id: "block7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
x: displayW / 2-200,
|
x: displayW / 2+100,
|
||||||
y: window.innerHeight - 250,
|
y: window.innerHeight - 120,
|
||||||
textureKey: "blocks8",
|
textureKey: "blocks8",
|
||||||
id: "block8",
|
id: "block8",
|
||||||
},
|
},
|
||||||
|
@ -530,7 +526,7 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
const isMatch = (blockName, targetName) => {
|
const isMatch = (blockName, targetName) => {
|
||||||
if(isMatch){
|
if(isMatch){
|
||||||
counter++;
|
counter++;
|
||||||
// console.log(counter)
|
console.log(counter)
|
||||||
|
|
||||||
if(counter === 8){
|
if(counter === 8){
|
||||||
const overlap = document.getElementById("overlap");
|
const overlap = document.getElementById("overlap");
|
||||||
|
@ -541,10 +537,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||||
|
console.log(match)
|
||||||
let scoreTotal=0;
|
let scoreTotal=0;
|
||||||
if(match){
|
if(match !== undefined){
|
||||||
scoreTotal++;
|
scoreTotal++;
|
||||||
// console.log(scoreTotal)
|
console.log("Score Total", scoreTotal)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -134,8 +134,8 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
.then(({ data }) => {
|
.then(({ data }) => {
|
||||||
// console.log(data.colors)
|
// console.log(data.colors)
|
||||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
const baseFontSize = 15;
|
const baseFontSize = 22;
|
||||||
const responsiveFontSize = (window.innerWidth / 280) * baseFontSize;
|
const responsiveFontSize = (window.innerWidth / 800) * 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)
|
||||||
|
|
|
@ -175,11 +175,11 @@ import Layout from '../../layouts/Layout.astro';
|
||||||
})
|
})
|
||||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||||
if(!isMobile){
|
if(!isMobile){
|
||||||
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||||||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
} else {
|
} else {
|
||||||
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
||||||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
|
||||||
}
|
}
|
||||||
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
|
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
|
||||||
if(isMobile){
|
if(isMobile){
|
||||||
|
|
Loading…
Reference in New Issue