fix darg and drop V3 and some changes in Tick V1 &V2
dev sp
parent
64dbbb489e
commit
c157d908a2
|
|
@ -0,0 +1,263 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<!-- bg-[url('/assets/customBG.jpg')] bg-cover bg-center -->
|
||||
<main>
|
||||
<div class="">
|
||||
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-row place-content-between pt-6">
|
||||
<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">
|
||||
<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 style="width: 30%" draggable="false" id="descImage" src="" alt="" />
|
||||
<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="">
|
||||
<div class="flex flex-row gap-6 place-content-between">
|
||||
<div class="flex flex-col place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<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 largerCheckbox" value="a1"/>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<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 largerCheckbox" value="a2"/>
|
||||
</div>
|
||||
<div class="flex flex-col 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 largerCheckbox" value="a3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col place-items-center justify-center pt-8">
|
||||
<p id="savedMessage"></p>
|
||||
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
let gameData = null;
|
||||
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(res => res.json())
|
||||
.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;
|
||||
// }
|
||||
// if(gameData.label2){
|
||||
// document.getElementById("label2").innerHTML = gameData.label2;
|
||||
// }
|
||||
// if(gameData.label3){
|
||||
// document.getElementById("label3").innerHTML = gameData.label3;
|
||||
// }
|
||||
// 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;
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const imageId = `image${i}`;
|
||||
if(gameData[imageId]){
|
||||
document.getElementById(imageId).src = assetsURL + gameData[imageId];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function checkResult2(id) {
|
||||
const checkbox = document.getElementById('a' + id.slice(-1));
|
||||
const element = document.getElementById(id);
|
||||
|
||||
if (checkbox.checked) {
|
||||
if (gameData[id.replace('image', 'a')] === true) {
|
||||
element.classList.add('redBorder');
|
||||
} else {
|
||||
element.classList.add('greenBorder');
|
||||
}
|
||||
} else {
|
||||
element.classList.remove('redBorder', 'greenBorder');
|
||||
}
|
||||
}
|
||||
let url = window.location.href;
|
||||
let urlSplit = url.split('/');
|
||||
let gameName = urlSplit[3] + '-' + urlSplit[4];
|
||||
let formatedDateTime;
|
||||
|
||||
window.onload = function () {
|
||||
let currentTime = new Date();
|
||||
formatedDateTime = currentTime.toLocaleString();
|
||||
};
|
||||
|
||||
function saveUserData() {
|
||||
// Get checkbox values and corresponding elements
|
||||
const checkboxes = ['a1', 'a2', 'a3'];
|
||||
const checkboxValues = checkboxes.map(id => {
|
||||
const checkbox = document.getElementById(id);
|
||||
const element = document.getElementById('image' + id.slice(-1));
|
||||
return {
|
||||
id: id,
|
||||
checked: checkbox.checked,
|
||||
element: element
|
||||
};
|
||||
});
|
||||
|
||||
// Count points based on checkbox values and "greenBorder" class
|
||||
let totalPoints = 0;
|
||||
checkboxValues.forEach(checkbox => {
|
||||
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
|
||||
totalPoints += 1;
|
||||
}
|
||||
});
|
||||
|
||||
let userData = {
|
||||
'user': 'tick-v1@beanstalkedu.com',
|
||||
'game_name': gameName,
|
||||
'starts': formatedDateTime,
|
||||
'score': totalPoints, // Include the totalPoints in the userData
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
|
||||
} else {
|
||||
console.log('Something Wrong', response);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
input[type="checkbox"]{
|
||||
-webkit-appearance: initial;
|
||||
appearance: initial;
|
||||
border: 1px solid gray;
|
||||
border-radius: 5px;
|
||||
/* background: gray; */
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
input[type="checkbox"]:checked {
|
||||
background: blue;
|
||||
}
|
||||
input[type="checkbox"]:checked:after {
|
||||
border: none;
|
||||
content: "X";
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
-moz-transform: translate(-50%,-50%);
|
||||
-ms-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
/*
|
||||
* If you want to fully change the check appearance, use the following:
|
||||
* content: " ";
|
||||
* width: 100%;
|
||||
* height: 100%;
|
||||
* background: blue;
|
||||
* top: 0;
|
||||
* left: 0;
|
||||
*/
|
||||
}
|
||||
body{
|
||||
font-family: Quicksand;
|
||||
}
|
||||
input.largerCheckbox {
|
||||
/* width: 40px; */
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
.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: 250px;
|
||||
}
|
||||
#label1, #label2, #label3, #label4, #label5, #label6{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #7C4C23;
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#LearningArea, #LearningSubArea{
|
||||
font-size: 20px;
|
||||
color: #7C4C23;
|
||||
font-weight: bold;
|
||||
}
|
||||
.round-checkbox-label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.round-checkbox-input:checked + .round-checkbox-label {
|
||||
border-radius: 30%;
|
||||
}
|
||||
.round-checkbox-input:checked + .round-checkbox-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,692 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const drawingZone = {
|
||||
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
||||
y: window.innerHeight / 4,
|
||||
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
||||
height: window.innerHeight / 2,
|
||||
};
|
||||
if(isMobile){
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 67;
|
||||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 140;
|
||||
retryButtonHeight = window.innerHeight - 50;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
} else {
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
buttonWidth = 100;
|
||||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
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
|
||||
currentDate = new Date();
|
||||
|
||||
// Format the date and time as a string
|
||||
formattedDateTime = currentDate.toLocaleString();
|
||||
|
||||
// Log the formatted date and time to the console
|
||||
// // console.log("Page loaded on: " + formattedDateTime);
|
||||
};
|
||||
function generateShortUniqueID(length) {14
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * characters.length);
|
||||
result += characters.charAt(randomIndex);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
|
||||
|
||||
const targetZones = [
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 170,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 340,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 510,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 680,
|
||||
name: "target4",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 170,
|
||||
name: "target5",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 340,
|
||||
name: "target6",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 510,
|
||||
name: "target7",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 680,
|
||||
name: "target8",
|
||||
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);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
} else{
|
||||
imageCustomWidth = "?width=100";
|
||||
}
|
||||
const assetsURL = "https://management.beanstalkedu.com/assets/"
|
||||
assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
|
||||
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;
|
||||
// console.log(assetsList.left_image1)
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#ffffff',
|
||||
parent: "phaser-example",
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
},
|
||||
scene: MyGame,
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
class MyGame extends Phaser.Scene {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
preload() {
|
||||
var progressBar = this.add.graphics();
|
||||
var progressBox = this.add.graphics();
|
||||
progressBox.fillStyle(0x222222, 0.8);
|
||||
progressBox.fillRect(240, 270, 320, 50);
|
||||
|
||||
var width = this.cameras.main.width;
|
||||
var height = this.cameras.main.height;
|
||||
var loadingText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 50,
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
font: '20px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
loadingText.setOrigin(0.5, 0.5);
|
||||
var percentText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 5,
|
||||
text: '0%',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
percentText.setOrigin(0.5, 0.5);
|
||||
var assetText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 + 50,
|
||||
text: '',
|
||||
style: {
|
||||
font: '18px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
});
|
||||
assetText.setOrigin(0.5, 0.5);
|
||||
this.load.on('progress', function (value) {
|
||||
percentText.setText(parseInt(value * 100) + '%');
|
||||
progressBar.clear();
|
||||
progressBar.fillStyle(0xffffff, 1);
|
||||
progressBar.fillRect(250, 280, 300 * value, 30);
|
||||
});
|
||||
this.load.on('fileprogress', function (file) {
|
||||
assetText.setText('Loading asset: ' + file.key);
|
||||
});
|
||||
this.load.on('complete', function () {
|
||||
progressBar.destroy();
|
||||
progressBox.destroy();
|
||||
loadingText.destroy();
|
||||
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');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
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,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks2", assetsList.element6,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks3", assetsList.element7,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks4", assetsList.element8,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks5", assetsList.element1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks6", assetsList.element2, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks7", assetsList.element3, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
this.load.spritesheet("blocks8", assetsList.element4, {
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
});
|
||||
}
|
||||
|
||||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
// console.log(data)
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
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, {
|
||||
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);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const URL = window.location.href;
|
||||
const gameName = URL.split('/');
|
||||
let userData = {
|
||||
'user': 'drawing@beanstalkedu.com',
|
||||
'game_name': gameName[3],
|
||||
'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
function submitUserData() {
|
||||
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
console.log('Data Saved', response)
|
||||
} else{
|
||||
console.log('Something Wrong', response)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
};
|
||||
// window.load
|
||||
|
||||
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
||||
font: '600 20px Quicksand',
|
||||
fill: 'blue'
|
||||
}).setDepth(1);
|
||||
submitNotic.setVisible(false);
|
||||
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
||||
font: '600 30px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 20, y: 10 },
|
||||
}).setDepth(1);
|
||||
submitButton.setVisible(false);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// console.log('Clicked');
|
||||
submitButton.setVisible(false);
|
||||
submitNotic.setVisible(true);
|
||||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData();
|
||||
})
|
||||
// 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,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
visible: true,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks5",
|
||||
id: "block5",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks6",
|
||||
id: "block6",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks7",
|
||||
id: "block7",
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks8",
|
||||
id: "block8",
|
||||
visible: false,
|
||||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
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);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
});
|
||||
const blockContainer = this.add.container(0, window.innerHeight - 120);
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(index * 120, 0, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0);
|
||||
let droppedOnTargetZone = false;
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
) {
|
||||
if (targetZone.block === null) {
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// Handle match logic
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
|
||||
blockContainer.add(newBlock);
|
||||
});
|
||||
const scrollLeftButton = this.add.text(10, window.innerHeight - 60, '← Scroll Left', {
|
||||
font: '18px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 10, y: 5 },
|
||||
}).setDepth(1);
|
||||
|
||||
const scrollRightButton = this.add.text(window.innerWidth - 130, window.innerHeight - 60, 'Scroll Right →', {
|
||||
font: '18px Quicksand',
|
||||
fill: '#fff',
|
||||
backgroundColor: 'blue',
|
||||
padding: { x: 10, y: 5 },
|
||||
}).setDepth(1);
|
||||
|
||||
scrollLeftButton.setInteractive().on('pointerdown', () => {
|
||||
blockContainer.x += 100; // Adjust the scroll speed as needed
|
||||
});
|
||||
|
||||
scrollRightButton.setInteractive().on('pointerdown', () => {
|
||||
blockContainer.x -= 100; // Adjust the scroll speed as needed
|
||||
});
|
||||
|
||||
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
droppedBlocks.forEach((block) => {
|
||||
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
|
||||
});
|
||||
};
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
|
||||
if(counter === 8){
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
}
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
let scoreTotal=0;
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
// console.log(scoreTotal)
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -145,7 +145,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
var assetsList = {}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
|
|
@ -290,7 +290,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${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(({ data }) => {
|
||||
// console.log(data)
|
||||
|
|
@ -306,16 +306,16 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// 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);
|
||||
this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
|
||||
|
||||
//Right Image Name
|
||||
this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
|
||||
// //Right Image Name
|
||||
// this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
|
||||
// this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
|
|||
|
|
@ -79,16 +79,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
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)
|
||||
let retryButton;
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
|
|
@ -203,24 +194,24 @@ import Layout from '../../layouts/Layout.astro';
|
|||
var assetsList = {};
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
if(isMobile){
|
||||
imageCustomWidth = "?width=100";
|
||||
} else{
|
||||
imageCustomWidth = "?width=100";
|
||||
}
|
||||
const assetsURL = "https://management.beanstalkedu.com/assets/"
|
||||
assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
|
||||
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;
|
||||
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
|
||||
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
|
||||
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
|
||||
assetsList.element3 = assetsURL + image3 + imageCustomWidth;
|
||||
assetsList.element4 = assetsURL + image4 + imageCustomWidth;
|
||||
assetsList.element5 = assetsURL + image5 + imageCustomWidth;
|
||||
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,
|
||||
|
|
@ -350,7 +341,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
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)
|
||||
|
|
@ -366,16 +357,16 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// 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);
|
||||
// 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);
|
||||
// //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);
|
||||
|
|
@ -449,43 +440,43 @@ import Layout from '../../layouts/Layout.astro';
|
|||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2-200,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2+200,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks5",
|
||||
id: "block5",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2-300,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks6",
|
||||
id: "block6",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2+300,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks7",
|
||||
id: "block7",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2-400,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks8",
|
||||
id: "block8",
|
||||
|
|
@ -551,10 +542,11 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
retryButton.setVisible(false);
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
|
|
@ -578,6 +570,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
overlap.style.display = "block";
|
||||
console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
}
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
|
|
|
|||
|
|
@ -19,40 +19,52 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div id="itemForm" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,62 +15,80 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<p id="LearningSubArea_copy"></p>
|
||||
</div> -->
|
||||
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
<form id="contactForm" class="flex flex-col justify-center">
|
||||
<div id="" class="flex flex-row place-content-between gap-4">
|
||||
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
|
||||
<label for="a1" class="round-checkbox-label">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label1"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label2"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label3"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label4"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label5"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label6"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label7"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label8"></p>
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<div class="flex flex-col place-items-center">
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<p id="label9"></p>
|
||||
</div>
|
||||
</label>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue