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

new desgine and some little changes others game previous desgine

b3
Suvodip 2024-06-21 20:43:54 +05:30
parent 94cfda779c
commit 64ab2bacd4
21 changed files with 904 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
info.txt Normal file
View File

@ -0,0 +1 @@
1. Auto brake line Drag v4 Left & Right Heading.

41
src/pages/cross/cross_phonics_v1.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
@ -257,7 +257,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

59
src/pages/cross/cross_phonics_v2.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,63 +24,63 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <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"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

17
src/pages/cross/v1.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
@ -258,7 +258,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

61
src/pages/cross/v2.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <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"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <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"> <!-- <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> </div>
</form> </form>
</div> </div>
@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

5
src/pages/cross/v3.astro
View File

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center "> <div class="flex flex-col justify-center place-items-center ">
@ -245,7 +245,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea{ #LearningArea, #LearningSubArea{

6
src/pages/drag/dragdrop_phonics.astro
View File

@ -73,9 +73,9 @@ import Layout from '../../layouts/Layout.astro';
if(isMobile){ if(isMobile){
topLogoWidth = 4.5; topLogoWidth = 4.5;
muteIconWidth = 1.8; muteIconWidth = 1.8;
resetIconWidth = 1.47; resetIconWidth = 1.5;
tickIconWidth = 1.24; tickIconWidth = 1.28;
cancelIconWidth = 1.08; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;

15
src/pages/drag/index.astro
View File

@ -70,11 +70,11 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.5;
tickIconWidth = 1.34; tickIconWidth = 1.28;
cancelIconWidth = 1.16; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -314,10 +314,11 @@ import Layout from '../../layouts/Layout.astro';
// 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;
const baseFontSize = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;} if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",

26
src/pages/drag/match_phonics.astro
View File

@ -69,11 +69,11 @@ import Layout from '../../layouts/Layout.astro';
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.5;
tickIconWidth = 1.34; tickIconWidth = 1.28;
cancelIconWidth = 1.16; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -314,12 +314,20 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540
}else{
wrapWidth = 200;
textSizeScale = 940
};
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 = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// 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);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name

26
src/pages/drag/v2.astro
View File

@ -69,11 +69,11 @@ import Layout from '../../layouts/Layout.astro';
let tickIconWidth; let tickIconWidth;
let cancelIconWidth; let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.5;
tickIconWidth = 1.34; tickIconWidth = 1.28;
cancelIconWidth = 1.16; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -314,12 +314,20 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540
} else{
wrapWidth = 200;
textSizeScale = 940
}
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 = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// 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);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name

43
src/pages/drag/v3.astro
View File

@ -70,19 +70,21 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; let blockMatches;
let retryButtonWidth;
let leftTargetZoneW;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.5;
tickIconWidth = 1.34; tickIconWidth = 1.28;
cancelIconWidth = 1.16; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
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 * 0.9 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 30;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
topLogoWidth = 6; topLogoWidth = 6;
@ -131,19 +133,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 340, y: 330,
name: "target2", name: "target2",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 510, y: 480,
name: "target3", name: "target3",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 680, y: 650,
name: "target4", name: "target4",
block: null, block: null,
}, },
@ -155,19 +157,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 340, y: 330,
name: "target6", name: "target6",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 510, y: 480,
name: "target7", name: "target7",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 680, y: 650,
name: "target8", name: "target8",
block: null, block: null,
}, },
@ -360,12 +362,21 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540;
} else{
wrapWidth = 200;
textSizeScale = 940
}
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 = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);

87
src/pages/drag/v4.astro
View File

@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
<script src="/saveGameData.js" is:inline></script> <script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
@ -70,12 +71,15 @@ import Layout from '../../layouts/Layout.astro';
let cancelIconWidth; let cancelIconWidth;
let retryButton; let retryButton;
let blockMatches; let blockMatches;
let leftTargetZoneW;
let rightTargetZoneW;
let retryButtonWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5; topLogoWidth = 4.5;
muteIconWidth = 2; muteIconWidth = 1.8;
resetIconWidth = 1.6; resetIconWidth = 1.5;
tickIconWidth = 1.34; tickIconWidth = 1.28;
cancelIconWidth = 1.16; cancelIconWidth = 1.12;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@ -146,11 +150,7 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json()) .then(response => response.json())
.then(({data}) => { .then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){ if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.element1 = assetsURL + image1 + imageCustomWidth; assetsList.element1 = assetsURL + image1 + imageCustomWidth;
assetsList.element2 = assetsURL + image2 + imageCustomWidth; assetsList.element2 = assetsURL + image2 + imageCustomWidth;
@ -332,28 +332,38 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 20, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 20, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 20, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 20, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`});
} else if(isTab){
this.add.text(window.innerWidth / 17, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(window.innerWidth / 1.8, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`}); this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
}
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540
} else{
wrapWidth = 200;
textSizeScale = 940
} }
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 = 24; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize; const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth; const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
@ -482,35 +492,52 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
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.05).setScale(borderScale); const targetBorder = this.add.image(targetZone.x , targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); let blocksScale;
if(isMobile){
blocksScale = 0.75;
} else{
blocksScale = 1;
}
const newBlock = this.add.sprite(block.x + 10, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(blocksScale);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(blocksScale+.3);
newBlock.x = dragX; newBlock.x = dragX;
newBlock.y = dragY; newBlock.y = dragY;
}); });
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2); newBlock.setScale(blocksScale).setDepth(-2);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => { targetZones.forEach((targetZone, targetIndex) => {
let phaserGeomX, phaserGeomY, blockSetPosition;
if(isMobile){
phaserGeomX = 50;
phaserGeomY = 25;
blockSetPosition = 40;
}else{
phaserGeomX = 200;
phaserGeomY = 100;
blockSetPosition = 50;
}
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
const col = counter % 2; const col = counter % 2;
const row = Math.floor(counter / 2); const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - 50, targetZone.y -50); newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
newBlock.disableInteractive(); newBlock.disableInteractive();
targetZone.block = newBlock; targetZone.block = newBlock;
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);

323
src/pages/drawing/drawing_phonics.astro
View File

File diff suppressed because one or more lines are too long

337
src/pages/drawing/drawing_writo.astro
View File

File diff suppressed because one or more lines are too long

59
src/pages/drawing/v3.astro
View File

File diff suppressed because one or more lines are too long

41
src/pages/tick/tick_phonics_v1.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,56 +24,56 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
@ -386,7 +386,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

59
src/pages/tick/tick_phonics_v2.astro
View File

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm" class="flex flex-col justify-center"> <form id="contactForm" class="flex flex-col justify-center">
<div id="" class="flex flex-row place-content-between gap-4"> <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"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@ -441,7 +441,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

4
src/pages/tick/tick_phonics_v3.astro
View File

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center"> <div class="flex flex-col justify-center place-items-center">

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -22,7 +22,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
@ -388,7 +388,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

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

@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm" class="flex flex-col justify-center"> <form id="contactForm" class="flex flex-col justify-center">
<div id="" class="flex flex-row place-content-between gap-4"> <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"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<div class="flex flex-col place-items-center"> <div class="flex flex-col place-items-center">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</div> </div>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@ -274,7 +274,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

12
src/pages/tick/v3.astro
View File

@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
<div> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2"> <div class="flex flex-row space-x-1 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button> <button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button> <button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button> <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center"> <div class="flex flex-col justify-center place-items-center">
<img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" /> <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
<div class="flex flex-row gap-x-4 place-content-between"> <div class="flex flex-row gap-x-4 place-content-between">
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
<p id="label1"></p> <p id="label1"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
<p id="label2"></p> <p id="label2"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
<p id="label3"></p> <p id="label3"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>