kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add label in tick v1,v2

Browse Source
This commit is contained in:
dev sp
2023-12-19 14:31:48 +00:00
parent 9edeb97f67
commit 9dd93344dd
3 changed files with 126 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/tick/v1.astro
View File

@@ -16,40 +16,46 @@ import Layout from "../../layouts/Layout.astro";
<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>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
<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" 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>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" 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>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
</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="Save">
<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>
@@ -66,7 +72,26 @@ import Layout from "../../layouts/Layout.astro";
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description;
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;
}
if(gameData.label4){
document.getElementById("label4").innerHTML = gameData.label4;
}
if(gameData.label5){
document.getElementById("label5").innerHTML = gameData.label5;
}
if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6;
}
const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 6; i++) {
const imageId = `image${i}`;
@@ -297,6 +322,9 @@ import Layout from "../../layouts/Layout.astro";
</script> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{
font-family: Quicksand;
}
.greenBorder{
border: 4px solid #008000;
border-radius: 10%;
@@ -306,9 +334,16 @@ import Layout from "../../layouts/Layout.astro";
border: 4px solid red;
border-radius: 10%;
}
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
#image1, #image2, #image3, #image4, #image5, #image6{
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6{
text-align: center;
font-weight: bold;
color: #7C4C23;
font-size: 20px;
padding-top: 10px;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;

46
src/pages/tick/v2.astro
View File

@@ -16,48 +16,57 @@ import Layout from "../../layouts/Layout.astro";
<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>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
<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" value="a2"/>
<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" value="a3"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a7" class="round-checkbox-label">
<img id="image7" src="" alt="" draggable="false" class="select-none" />
<p id="label7"></p>
</label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label">
<img id="image8" src="" alt="" draggable="false" class="select-none" />
<p id="label8"></p>
</label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label">
<img id="image9" src="" alt="" draggable="false" class="select-none" />
<p id="label9"></p>
</label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
</div>
@@ -81,6 +90,33 @@ import Layout from "../../layouts/Layout.astro";
.then(data => {
gameData = data.data;
document.getElementById("gameDescription").innerHTML = gameData.description;
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;
}
if(gameData.label4){
document.getElementById("label4").innerHTML = gameData.label4;
}
if(gameData.label5){
document.getElementById("label5").innerHTML = gameData.label5;
}
if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6;
}
if(gameData.label7){
document.getElementById("label7").innerHTML = gameData.label7;
}
if(gameData.label8){
document.getElementById("label8").innerHTML = gameData.label8;
}
if(gameData.label9){
document.getElementById("label9").innerHTML = gameData.label9;
}
const assetsURL = 'https://management.beanstalkedu.com/assets/';
for (let i = 1; i <= 9; i++) {
const imageId = `image${i}`;
@@ -328,6 +364,9 @@ import Layout from "../../layouts/Layout.astro";
</script> -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
body{
font-family: Quicksand;
}
.greenBorder{
border: 4px solid #008000;
border-radius: 10%;
@@ -340,6 +379,13 @@ import Layout from "../../layouts/Layout.astro";
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
text-align: center;
font-weight: bold;
color: #7C4C23;
font-size: 20px;
padding-top: 10px;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;