working_on_game_description_from_API_line_No-74
parent
35c4c21b30
commit
dc84dad317
|
|
@ -33,4 +33,18 @@ const { title } = Astro.props;
|
|||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
} */
|
||||
body{
|
||||
font-family: quicksand;
|
||||
animation: fadeInAnimation ease 6s;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,16 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const config = {
|
||||
var assetsList = {}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {image} = data;
|
||||
assetsList.image = "https://management.beanstalkedu.com/assets/" + image ;
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
|
|
@ -24,8 +33,29 @@ import Layout from '../../layouts/Layout.astro';
|
|||
update: update,
|
||||
},
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
// const config = {
|
||||
// type: Phaser.AUTO,
|
||||
// width: window.innerWidth,
|
||||
// height: window.innerHeight,
|
||||
// backgroundColor: '#ffffff',
|
||||
// scale: {
|
||||
// mode: Phaser.Scale.FIT,
|
||||
// autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
// },
|
||||
// scene: {
|
||||
// preload: preload,
|
||||
// create: create,
|
||||
// update: update,
|
||||
// },
|
||||
// };
|
||||
// const game = new Phaser.Game(config);
|
||||
const displayW = window.innerWidth;
|
||||
const displayH = window.innerHeight;
|
||||
|
||||
|
|
@ -33,10 +63,11 @@ let graphics;
|
|||
let outlineImage;
|
||||
let isDrawing = false;
|
||||
let selectedColor = '#ff0000'; // Default color
|
||||
let brushSize = 5; // Default brush size
|
||||
let brushSize = 1; // Default brush size
|
||||
|
||||
function preload() {
|
||||
this.load.image('outline', '/assets/cow.png');
|
||||
// this.load.image('outline', '/assets/cow.png');
|
||||
this.load.image('outline', assetsList.image);
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
|
@ -44,26 +75,34 @@ function create() {
|
|||
|
||||
graphics = this.add.graphics();
|
||||
|
||||
// Create a color picker using HTML input type color
|
||||
const colorPicker = document.createElement('input');
|
||||
|
||||
colorPicker.type = 'color';
|
||||
colorPicker.value = selectedColor;
|
||||
colorPicker.className = 'color-picker';
|
||||
colorPicker.addEventListener('input', (event) => {
|
||||
selectedColor = event.target.value;
|
||||
});
|
||||
document.body.appendChild(colorPicker);
|
||||
colorPicker.style.position = 'absolute';
|
||||
// colorPicker.textContent = 'Clear';
|
||||
colorPicker.style.top = '30px';
|
||||
colorPicker.style.left = '20px';
|
||||
|
||||
colorPicker.addEventListener('input', (event) => {
|
||||
selectedColor = event.target.value; // Update selectedColor
|
||||
});
|
||||
|
||||
// Create a brush size slider using HTML input type range
|
||||
const sliderContainer = document.createElement('div');
|
||||
sliderContainer.className = 'slider-container';
|
||||
document.body.appendChild(sliderContainer);
|
||||
|
||||
sliderContainer.style.position = 'absolute';
|
||||
sliderContainer.style.top = '20px';
|
||||
sliderContainer.style.right = '20px';
|
||||
|
||||
const slider = document.createElement('input');
|
||||
slider.type = 'range';
|
||||
slider.min = '2';
|
||||
slider.max = '20';
|
||||
slider.value = brushSize.toString(); // Set initial value to brushSize
|
||||
slider.value = brushSize.toString();
|
||||
slider.className = 'slider';
|
||||
sliderContainer.appendChild(slider);
|
||||
|
||||
|
|
@ -74,11 +113,24 @@ function create() {
|
|||
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.textContent = 'Clear';
|
||||
clearButton.className = 'clear-button';
|
||||
// clearButton.className = 'clear-button';
|
||||
document.body.appendChild(clearButton);
|
||||
|
||||
clearButton.style.position = 'absolute';
|
||||
clearButton.style.top = '20px';
|
||||
clearButton.style.left = '120px';
|
||||
clearButton.style.backgroundColor = 'blue';
|
||||
clearButton.style.color = 'white';
|
||||
clearButton.style.padding = '10px 30px';
|
||||
clearButton.style.fontSize = '20px';
|
||||
clearButton.style.fontWeight = 'bold';
|
||||
clearButton.style.borderRadius = '50%';
|
||||
clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
|
||||
|
||||
clearButton.addEventListener('click', () => {
|
||||
clearDrawing();
|
||||
});
|
||||
document.body.appendChild(clearButton);
|
||||
|
||||
this.input.on('pointerdown', () => {
|
||||
isDrawing = true;
|
||||
startDrawing(this.input.x, this.input.y);
|
||||
|
|
@ -97,6 +149,7 @@ function create() {
|
|||
isDrawing = false;
|
||||
});
|
||||
}
|
||||
|
||||
function startDrawing(x, y) {
|
||||
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
|
||||
graphics.beginPath();
|
||||
|
|
@ -117,7 +170,6 @@ function clearDrawing() {
|
|||
}
|
||||
|
||||
function update() {
|
||||
// Update the slider position based on the pointer's movement
|
||||
const slider = document.querySelector('input[type="range"]');
|
||||
if (slider && !isDrawing) {
|
||||
const sliderValue = parseInt(slider.value);
|
||||
|
|
@ -128,6 +180,131 @@ function update() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const config = {
|
||||
// type: Phaser.AUTO,
|
||||
// width: window.innerWidth,
|
||||
// height: window.innerHeight,
|
||||
// backgroundColor: '#05b3a4',
|
||||
// scale: {
|
||||
// mode: Phaser.Scale.FIT,
|
||||
// autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
// },
|
||||
// scene: {
|
||||
// preload: preload,
|
||||
// create: create,
|
||||
// update: update,
|
||||
// },
|
||||
// };
|
||||
|
||||
// const game = new Phaser.Game(config);
|
||||
// const displayW = window.innerWidth;
|
||||
// const displayH = window.innerHeight;
|
||||
|
||||
// let graphics;
|
||||
// let outlineImage;
|
||||
// let isDrawing = false;
|
||||
// let selectedColor = '#ff0000'; // Default color
|
||||
// let brushSize = 5; // Default brush size
|
||||
|
||||
// function preload() {
|
||||
// this.load.image('outline', '/assets/cow.png');
|
||||
// }
|
||||
|
||||
// function create() {
|
||||
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
|
||||
|
||||
// graphics = this.add.graphics();
|
||||
|
||||
// // Create a color picker using HTML input type color
|
||||
// const colorPicker = document.createElement('input');
|
||||
// colorPicker.type = 'color';
|
||||
// colorPicker.value = selectedColor;
|
||||
// colorPicker.className = 'color-picker';
|
||||
// colorPicker.addEventListener('input', (event) => {
|
||||
// selectedColor = event.target.value;
|
||||
// });
|
||||
// document.body.appendChild(colorPicker);
|
||||
|
||||
// // Create a brush size slider using HTML input type range
|
||||
// const sliderContainer = document.createElement('div');
|
||||
// sliderContainer.className = 'slider-container';
|
||||
// document.body.appendChild(sliderContainer);
|
||||
|
||||
// const slider = document.createElement('input');
|
||||
// slider.type = 'range';
|
||||
// slider.min = '2';
|
||||
// slider.max = '20';
|
||||
// slider.value = brushSize.toString(); // Set initial value to brushSize
|
||||
// slider.className = 'slider';
|
||||
// sliderContainer.appendChild(slider);
|
||||
|
||||
// slider.addEventListener('input', (event) => {
|
||||
// brushSize = parseInt(event.target.value);
|
||||
// slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
|
||||
// });
|
||||
|
||||
// const clearButton = document.createElement('button');
|
||||
// clearButton.textContent = 'Clear';
|
||||
// clearButton.className = 'clear-button';
|
||||
// clearButton.addEventListener('click', () => {
|
||||
// clearDrawing();
|
||||
// });
|
||||
// document.body.appendChild(clearButton);
|
||||
// this.input.on('pointerdown', () => {
|
||||
// isDrawing = true;
|
||||
// startDrawing(this.input.x, this.input.y);
|
||||
// });
|
||||
|
||||
// this.input.on('pointermove', () => {
|
||||
// if (isDrawing) {
|
||||
// continueDrawing(this.input.x, this.input.y);
|
||||
// }
|
||||
// });
|
||||
|
||||
// this.input.on('pointerup', () => {
|
||||
// if (isDrawing) {
|
||||
// finishDrawing();
|
||||
// }
|
||||
// isDrawing = false;
|
||||
// });
|
||||
// }
|
||||
// function startDrawing(x, y) {
|
||||
// graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
|
||||
// graphics.beginPath();
|
||||
// graphics.moveTo(x, y);
|
||||
// }
|
||||
|
||||
// function continueDrawing(x, y) {
|
||||
// graphics.lineTo(x, y);
|
||||
// graphics.strokePath();
|
||||
// }
|
||||
|
||||
// function finishDrawing() {
|
||||
// // No need for additional actions here
|
||||
// }
|
||||
|
||||
// function clearDrawing() {
|
||||
// graphics.clear();
|
||||
// }
|
||||
|
||||
// function update() {
|
||||
// // Update the slider position based on the pointer's movement
|
||||
// const slider = document.querySelector('input[type="range"]');
|
||||
// if (slider && !isDrawing) {
|
||||
// const sliderValue = parseInt(slider.value);
|
||||
// const max = parseInt(slider.max);
|
||||
// const width = slider.offsetWidth;
|
||||
// const offsetX = (sliderValue - 2) / (max - 2) * width;
|
||||
// slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||||
// }
|
||||
// }
|
||||
|
||||
// const config = {
|
||||
// type: Phaser.AUTO,
|
||||
// width: window.innerWidth,
|
||||
|
|
@ -254,5 +431,4 @@ function update() {
|
|||
.clear-button {
|
||||
background-color: blue;
|
||||
}
|
||||
/* .clearButton */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,31 +12,31 @@
|
|||
<div id="itemForm" class="flex flex-row place-content-between">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
|
||||
<input onclick="checkResult('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
|
||||
<label for="a1" class="round-checkbox-label"></label>
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
|
||||
<input onclick="checkResult('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
|
||||
<label for="a2" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
|
||||
<input onclick="checkResult('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
|
||||
<label for="a3" class="round-checkbox-label"></label>
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
|
||||
<input onclick="checkResult('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
|
||||
<label for="a4" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
|
||||
<input onclick="checkResult('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
|
||||
<label for="a5" class="round-checkbox-label"></label>
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
|
||||
<input onclick="checkResult('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
|
||||
<label for="a6" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-8">
|
||||
<input onclick="getData()" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
|
||||
<input class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -81,22 +81,93 @@
|
|||
// // }
|
||||
// // console.log('Checked Values:', checkedValues);
|
||||
// });
|
||||
|
||||
var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
|
||||
function getData() { // this function will get called when the save button is clicked
|
||||
result = [];
|
||||
console.log(result);
|
||||
checkBoxes.forEach(item => { // loop all the checkbox item
|
||||
if (item.checked) { //if the check box is checked
|
||||
let data = { // create an object
|
||||
item: item.value,
|
||||
selected: item.checked
|
||||
}
|
||||
console.log(data.selected);
|
||||
result.push(data); //stored the objects to result array
|
||||
}
|
||||
})
|
||||
function checkResult(id){
|
||||
console.log(gameData.a1)
|
||||
// alert("Matched")
|
||||
if(id == 'image1'){
|
||||
if(gameData.a1 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image2'){
|
||||
if(gameData.a2 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image3'){
|
||||
if(gameData.a3 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image4'){
|
||||
if(gameData.a4 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image5'){
|
||||
if(gameData.a5 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
};
|
||||
if(id == 'image6'){
|
||||
if(gameData.a6 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
console.log('Value True')
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
console.log('Value False')
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
|
||||
// function getData() { // this function will get called when the save button is clicked
|
||||
// result = [];
|
||||
// console.log(result);
|
||||
// checkBoxes.forEach(item => { // loop all the checkbox item
|
||||
// if (item.checked) { //if the check box is checked
|
||||
// let data = { // create an object
|
||||
// item: item.value,
|
||||
// selected: item.checked
|
||||
// }
|
||||
// console.log(data.selected);
|
||||
// result.push(data); //stored the objects to result array
|
||||
// }
|
||||
// })
|
||||
// };
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
|
|
@ -134,6 +205,14 @@
|
|||
body{
|
||||
font-family: quicksand;
|
||||
}
|
||||
.greenBorder{
|
||||
border: 4px solid green;
|
||||
border-radius: 10%;
|
||||
}
|
||||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border-radius: 10%;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6{
|
||||
width: 200px;
|
||||
/* border: 4px solid red;
|
||||
|
|
|
|||
|
|
@ -9,44 +9,49 @@
|
|||
</div>
|
||||
<p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
|
||||
<form id="contactForm">
|
||||
<div id="itemForm" class="flex flex-row place-content-between">
|
||||
|
||||
<div id="" class="flex flex-row place-content-between">
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image1" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
|
||||
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
|
||||
<label for="a1" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image2" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
|
||||
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
|
||||
<label for="a2" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image3" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
|
||||
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
|
||||
<label for="a3" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image4" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
|
||||
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
|
||||
<label for="a4" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image5" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
|
||||
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
|
||||
<label for="a5" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image6" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
|
||||
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
|
||||
<label for="a6" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 place-items-center">
|
||||
<img id="image7" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a7"/>
|
||||
<label for="a4" class="round-checkbox-label"></label>
|
||||
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
|
||||
<label for="a7" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image8" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a8"/>
|
||||
<label for="a5" class="round-checkbox-label"></label>
|
||||
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
|
||||
<label for="a8" class="round-checkbox-label"></label>
|
||||
|
||||
<img id="image9" src="" alt="" draggable="false" class="select-none" />
|
||||
<input type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a9"/>
|
||||
<label for="a6" class="round-checkbox-label"></label>
|
||||
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
|
||||
<label for="a9" class="round-checkbox-label"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-8">
|
||||
<input onclick="getData()" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
|
||||
<input class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -60,7 +65,7 @@
|
|||
.then(res => res.json())
|
||||
.then(data => {
|
||||
gameData = data.data;
|
||||
// console.log(gameData);
|
||||
console.log(gameData);
|
||||
document.getElementById("gameDescription").innerHTML = gameData.description;
|
||||
const assetsURL = 'https://management.beanstalkedu.com/assets/';
|
||||
document.getElementById("image1").src = assetsURL + gameData.image1;
|
||||
|
|
@ -73,43 +78,92 @@
|
|||
document.getElementById("image8").src = assetsURL + gameData.image8;
|
||||
document.getElementById("image9").src = assetsURL + gameData.image9;
|
||||
});
|
||||
// const saveButton = document.getElementById('saveButton');
|
||||
// saveButton.addEventListener('click', function() {
|
||||
// const checkboxes = document.querySelectorAll('.myCheckbox');
|
||||
// const checkedValues = [];
|
||||
// console.log(checkedValues)
|
||||
// if(checkedValues == gameData.a1){
|
||||
// console.log(gameData.a1)
|
||||
// }
|
||||
// checkboxes.forEach(function(checkbox) {
|
||||
// if (checkbox.checked) {
|
||||
// checkedValues.push(checkbox.value);
|
||||
// // console.log(checkedValues);
|
||||
// // console.log(gameData.a1)
|
||||
// // let value1 = checkedValues = 'a1';
|
||||
// }
|
||||
// });
|
||||
// // if(checkedValues == gameData.a1) {
|
||||
// // console.log("Matched")
|
||||
// // }
|
||||
// // console.log('Checked Values:', checkedValues);
|
||||
// });
|
||||
|
||||
var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
|
||||
function getData() { // this function will get called when the save button is clicked
|
||||
result = [];
|
||||
console.log(result);
|
||||
checkBoxes.forEach(item => { // loop all the checkbox item
|
||||
if (item.checked) { //if the check box is checked
|
||||
let data = { // create an object
|
||||
item: item.value,
|
||||
selected: item.checked
|
||||
}
|
||||
console.log(data.selected);
|
||||
result.push(data); //stored the objects to result array
|
||||
}
|
||||
})
|
||||
function checkResult2(id){
|
||||
// alert("Matched")
|
||||
if(id == 'image1'){
|
||||
// console.log(gameData.a1)
|
||||
if(gameData.a1 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image2'){
|
||||
if(gameData.a2 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image3'){
|
||||
if(gameData.a3 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image4'){
|
||||
if(gameData.a4 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image5'){
|
||||
if(gameData.a5 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image6'){
|
||||
if(gameData.a6 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image7'){
|
||||
if(gameData.a7 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image8'){
|
||||
if(gameData.a8 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
if(id == 'image9'){
|
||||
if(gameData.a9 == true){
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("greenBorder");
|
||||
} else{
|
||||
var element = document.getElementById(id);
|
||||
element.classList.add("redBorder");
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
|
|
@ -144,8 +198,29 @@
|
|||
</script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
|
||||
body{
|
||||
/* body{
|
||||
font-family: quicksand;
|
||||
animation: fadeInAnimation ease 6s;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes fadeInAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
.greenBorder{
|
||||
border: 4px solid #008000;
|
||||
border-radius: 10%;
|
||||
/* transform:scale3d(0.5, 1, 1.7); */
|
||||
transition: border 0.5s, border-color 0.3s, transform 6s;
|
||||
}
|
||||
.redBorder{
|
||||
border: 4px solid red;
|
||||
border-radius: 10%;
|
||||
}
|
||||
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
|
||||
width: 200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue