s1

2025-06-20 12:14:55 +05:30 · 2025-06-20 11:54:55 +05:30 · 2025-06-20 11:49:38 +05:30 · 2025-06-20 11:47:58 +05:30 · 2025-06-19 17:29:22 +05:30 · 2025-06-19 17:20:18 +05:30
153 changed files with 34856 additions and 14843 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -16,8 +16,8 @@
    "astro": "^1.7.2",
    "astro-eslint-parser": "^0.14.0",
    "eslint": "^8.44.0",
-    "flowbite": "^1.7.0",
    "flowbite-typography": "^1.0.3",
+    "html2canvas": "^1.4.1",
    "phaser": "^3.60.0",
    "shiki": "^0.14.3",
    "tailwind-scrollbar": "^3.0.4",
--- a/public/assets/animate-clipart.gif
+++ b/public/assets/animate-clipart.gif
--- a/public/assets/animate-sprite/1.gif
+++ b/public/assets/animate-sprite/1.gif
--- a/public/assets/animate-sprite/2.gif
+++ b/public/assets/animate-sprite/2.gif
--- a/public/assets/animate-sprite/3.gif
+++ b/public/assets/animate-sprite/3.gif
--- a/public/assets/animate-sprite/4.gif
+++ b/public/assets/animate-sprite/4.gif
--- a/public/assets/animate-sprite/5.gif
+++ b/public/assets/animate-sprite/5.gif
--- a/public/assets/animate-sprite/6.gif
+++ b/public/assets/animate-sprite/6.gif
--- a/public/assets/arlo.gif
+++ b/public/assets/arlo.gif
--- a/public/assets/ava.gif
+++ b/public/assets/ava.gif
--- a/public/assets/bg-star.svg
+++ b/public/assets/bg-star.svg
@ -0,0 +1,20 @@
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4126 115.787C19.8985 114.112 21.2639 107.552 21.2639 107.552L27.369 113.403L60.1015 95.9766L92.8969 114.903L99.6269 108.807C99.6269 108.807 100.189 114.133 99.6269 115.787C98.858 118.049 97.4089 118.881 95.4323 119.59C93.7998 120.176 90.0446 119.946 90.0446 119.946L60.1015 102.704C60.1015 102.704 41.6796 112.319 29.8756 119.946C29.8756 119.946 25.9562 120.657 24.1855 119.946C22.2765 119.18 21.0992 118.024 20.4126 115.787Z" fill="url(#paint0_linear_6328_4264)"/>
+<path d="M119.781 43.9461C119.397 42.7568 118.672 41.7068 117.695 40.9269C116.719 40.147 115.534 39.6717 114.29 39.5603L79.6497 36.4147L65.9524 4.35427C64.9421 2.00477 62.642 0.484375 60.0865 0.484375C57.5309 0.484375 55.2306 2.005 54.2208 4.36013L40.5232 36.415L5.87788 39.5603C4.6346 39.6742 3.45208 40.1505 2.47694 40.9301C1.5018 41.7097 0.776923 42.7584 0.392182 43.9461C-0.398019 46.3765 0.331704 49.042 2.25739 50.7223L28.4412 73.6852L20.7201 107.696C20.1552 110.197 21.1256 112.782 23.2007 114.282C24.3157 115.087 25.6207 115.498 26.9365 115.498C28.071 115.498 29.1962 115.192 30.2065 114.587L60.0865 96.729L89.9556 114.587C92.1413 115.902 94.8966 115.782 96.9669 114.282C97.9804 113.548 98.756 112.532 99.197 111.362C99.638 110.191 99.7251 108.916 99.4474 107.696L91.7266 73.6852L117.91 50.727C118.852 49.9043 119.531 48.8231 119.864 47.6175C120.197 46.412 120.168 45.1353 119.781 43.9461Z" fill="#FFD211"/>
+<path d="M0.207031 52.9141V46.6641L28.9254 73.6811L27.955 78.1922L0.207031 52.9141Z" fill="url(#paint1_linear_6328_4264)"/>
+<path d="M120.094 52.9141V46.6641L91.3754 73.6811L92.3458 78.1922L120.094 52.9141Z" fill="url(#paint2_linear_6328_4264)"/>
+<defs>
+<linearGradient id="paint0_linear_6328_4264" x1="60.0299" y1="95.9766" x2="60.0299" y2="120.19" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6328_4264" x1="14.5662" y1="46.6641" x2="14.5662" y2="78.1922" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6328_4264" x1="105.735" y1="46.6641" x2="105.735" y2="78.1922" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/assets/brainstrom-logo.svg
+++ b/public/assets/brainstrom-logo.svg
--- a/public/assets/clip-art.svg
+++ b/public/assets/clip-art.svg
--- a/public/assets/dax.gif
+++ b/public/assets/dax.gif
--- a/public/assets/hand-arlo.svg
+++ b/public/assets/hand-arlo.svg
--- a/public/assets/hand-ava.svg
+++ b/public/assets/hand-ava.svg
--- a/public/assets/hand-dax.svg
+++ b/public/assets/hand-dax.svg
--- a/public/assets/hand-kai.svg
+++ b/public/assets/hand-kai.svg
--- a/public/assets/hand-monstero.svg
+++ b/public/assets/hand-monstero.svg
--- a/public/assets/hand-yara.svg
+++ b/public/assets/hand-yara.svg
--- a/public/assets/kai.gif
+++ b/public/assets/kai.gif
--- a/public/assets/monstero.gif
+++ b/public/assets/monstero.gif
--- a/public/assets/result-star.svg
+++ b/public/assets/result-star.svg
@ -0,0 +1,32 @@
+<svg width="129" height="128" viewBox="0 0 129 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_8863_7800)">
+<path d="M24.3345 115.303C23.8203 113.627 25.1857 107.067 25.1857 107.067L31.2908 112.919L64.0234 95.4922L96.8188 114.418L103.549 108.323C103.549 108.323 104.111 113.649 103.549 115.303C102.78 117.565 101.331 118.396 99.3542 119.105C97.7216 119.691 93.9665 119.462 93.9665 119.462L64.0234 102.22C64.0234 102.22 45.6015 111.835 33.7975 119.462C33.7975 119.462 29.8781 120.172 28.1074 119.462C26.1984 118.695 25.021 117.539 24.3345 115.303Z" fill="url(#paint0_linear_8863_7800)"/>
+<path d="M123.703 43.4618C123.319 42.2725 122.594 41.2224 121.617 40.4425C120.641 39.6626 119.456 39.1873 118.212 39.0759L83.5716 35.9304L69.8743 3.8699C68.8639 1.52039 66.5639 0 64.0083 0C61.4528 0 59.1525 1.52063 58.1427 3.87576L44.4451 35.9306L9.79975 39.0759C8.55647 39.1898 7.37396 39.6661 6.39881 40.4457C5.42367 41.2253 4.6988 42.274 4.31406 43.4618C3.52386 45.8921 4.25358 48.5576 6.17927 50.2379L32.363 73.2008L24.642 107.212C24.0771 109.712 25.0475 112.297 27.1225 113.797C28.2376 114.603 29.5426 115.013 30.8583 115.013C31.9929 115.013 33.1181 114.707 34.1284 114.103L64.0083 96.2447L93.8775 114.103C96.0632 115.418 98.8184 115.298 100.889 113.797C101.902 113.064 102.678 112.048 103.119 110.877C103.56 109.706 103.647 108.432 103.369 107.212L95.6485 73.2008L121.832 50.2426C122.774 49.4199 123.453 48.3387 123.786 47.1332C124.118 45.9276 124.09 44.651 123.703 43.4618Z" fill="#FFD211"/>
+<path d="M4.12891 52.4297V46.1797L32.8473 73.1967L31.8769 77.7078L4.12891 52.4297Z" fill="url(#paint1_linear_8863_7800)"/>
+<path d="M124.016 52.4297V46.1797L95.2972 73.1967L96.2677 77.7078L124.016 52.4297Z" fill="url(#paint2_linear_8863_7800)"/>
+</g>
+<defs>
+<filter id="filter0_d_8863_7800" x="0" y="0" width="128.016" height="127.781" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8863_7800"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8863_7800" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8863_7800" x1="63.9518" y1="95.4922" x2="63.9518" y2="119.706" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8863_7800" x1="18.4881" y1="46.1797" x2="18.4881" y2="77.7078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8863_7800" x1="109.656" y1="46.1797" x2="109.656" y2="77.7078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/assets/svg/bg-star.svg
+++ b/public/assets/svg/bg-star.svg
@ -0,0 +1,4 @@
+
+<svg width="33" height="53" viewBox="0 0 33 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0133 0.670076C12.0873 11.9725 9.40142 12.9708 -3.98258 9.58949C7.31986 17.5155 8.31817 20.2013 4.93684 33.5854C12.8629 22.2829 15.5486 21.2846 28.9327 24.666C17.6303 16.7399 16.6319 14.0541 20.0133 0.670076ZM27.2696 32.0069C22.2291 39.1949 20.5208 39.8298 12.0092 37.6793C19.197 42.7199 19.832 44.4282 17.6816 52.9398C22.722 45.7519 24.4304 45.1169 32.9419 47.2673C25.754 42.2268 25.1192 40.5187 27.2696 32.0069Z" fill="white" fill-opacity="0.7"/>
+</svg>
--- a/public/assets/svg/border-correct.svg
+++ b/public/assets/svg/border-correct.svg
@ -0,0 +1,5 @@
+
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" fill="#EDF8F1"/>
+<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#49B76E" stroke-width="2"/>
+</svg>
--- a/public/assets/svg/border-wrong.svg
+++ b/public/assets/svg/border-wrong.svg
@ -0,0 +1,5 @@
+
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" fill="#D14B62" fill-opacity="0.1"/>
+<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#D14B62" stroke-width="2"/>
+</svg>
--- a/public/assets/svg/border.svg
+++ b/public/assets/svg/border.svg
@ -1,3 +1,4 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="119" rx="7.5" fill="#E6FDFE" stroke="#60C6CB"/>
+
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#60C6CB" stroke-width="2"/>
 </svg>
--- a/public/assets/svg/cancel.svg
+++ b/public/assets/svg/cancel.svg
@ -1,4 +1,4 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
+<circle cx="20" cy="20" r="19.5" fill="#FFFFFF" stroke="#BB4D6A"/>
 <path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
 </svg>
--- a/public/assets/svg/clip-art2.svg
+++ b/public/assets/svg/clip-art2.svg
--- a/public/assets/svg/collapse.svg
+++ b/public/assets/svg/collapse.svg
@ -0,0 +1,3 @@
+<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.46484 7.19141L7.46484 1.19141L13.4648 7.19141" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/assets/svg/crossIcon.svg
+++ b/public/assets/svg/crossIcon.svg
@ -0,0 +1,3 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1604 0.568359L10.9927 8.73414L2.82691 0.568359L0.10498 3.29029L8.27076 11.4561L0.10498 19.6218L2.82691 22.3438L10.9927 14.178L19.1604 22.3438L21.8823 19.6218L13.7165 11.4561L21.8823 3.29029L19.1604 0.568359Z" fill="#0348A8"/>
+</svg>
--- a/public/assets/svg/draw-cursor.svg
+++ b/public/assets/svg/draw-cursor.svg
@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.832" cy="12.6328" r="12" fill="#F7A915"/>
+<path d="M12.834 3.76953L12.834 21.9905" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+</svg>
--- a/public/assets/svg/eraser-cursor.svg
+++ b/public/assets/svg/eraser-cursor.svg
@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.9375" width="23" height="23" fill="white"/>
+<rect x="0.5" y="0.9375" width="23" height="23" stroke="black"/>
+<path d="M12.1367 3.52344L12.1367 22.1211" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+<path d="M2.83594 12.8242H21.4336" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+</svg>
--- a/public/assets/svg/gallery-icon.svg
+++ b/public/assets/svg/gallery-icon.svg
@ -0,0 +1,5 @@
+
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20.5586" r="20" fill="#73BFE1"/>
+<path d="M23.75 18.6465C23.75 18.9449 23.6315 19.231 23.4205 19.442C23.2095 19.653 22.9234 19.7715 22.625 19.7715C22.3266 19.7715 22.0405 19.653 21.8295 19.442C21.6185 19.231 21.5 18.9449 21.5 18.6465C21.5 18.3481 21.6185 18.062 21.8295 17.851C22.0405 17.64 22.3266 17.5215 22.625 17.5215C22.9234 17.5215 23.2095 17.64 23.4205 17.851C23.6315 18.062 23.75 18.3481 23.75 18.6465ZM29.75 14.5215V26.5215V28.0215C29.75 28.4193 29.592 28.8008 29.3107 29.0821C29.0294 29.3634 28.6478 29.5215 28.25 29.5215H11.75C11.3522 29.5215 10.9706 29.3634 10.6893 29.0821C10.408 28.8008 10.25 28.4193 10.25 28.0215V25.0215V14.5215C10.25 14.1237 10.408 13.7421 10.6893 13.4608C10.9706 13.1795 11.3522 13.0215 11.75 13.0215H28.25C28.6478 13.0215 29.0294 13.1795 29.3107 13.4608C29.592 13.7421 29.75 14.1237 29.75 14.5215ZM28.25 24.7121V14.5215H11.75V23.2121L15.1906 19.7715C15.473 19.4932 15.8536 19.3373 16.25 19.3373C16.6464 19.3373 17.027 19.4932 17.3094 19.7715L21.5 23.9621L23.4406 22.0215C23.723 21.7432 24.1036 21.5873 24.5 21.5873C24.8964 21.5873 25.277 21.7432 25.5594 22.0215L28.25 24.7121Z" fill="white"/>
+</svg>
--- a/public/assets/svg/help_icon.svg
+++ b/public/assets/svg/help_icon.svg
@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20.9062" r="20" fill="#472DAC"/>
+<path d="M15.4956 16.4422C14.7066 16.1069 14.3713 15.1305 14.8447 14.4205C15.8013 13.0003 17.3989 11.9648 19.5094 11.9648C21.8269 11.9648 23.4147 13.0201 24.2234 14.3416C24.9137 15.4757 25.3181 17.596 24.253 19.1739C23.0695 20.9195 21.9354 21.452 21.324 22.5763C21.176 22.8426 21.0873 23.0595 21.0281 23.5033C20.9393 24.2232 20.3476 24.7854 19.6178 24.7854C18.7599 24.7854 18.0597 24.0457 18.1583 23.1877C18.2175 22.6848 18.3358 22.1621 18.6119 21.669C19.3713 20.2982 20.8309 19.4895 21.679 18.2765C22.5764 17.0043 22.0735 14.6276 19.5291 14.6276C18.3752 14.6276 17.6257 15.2291 17.1622 15.9491C16.8171 16.5112 16.0971 16.6887 15.4956 16.4422ZM21.4916 28.7302C21.4916 29.815 20.604 30.7026 19.5192 30.7026C18.4344 30.7026 17.5468 29.815 17.5468 28.7302C17.5468 27.6453 18.4344 26.7578 19.5192 26.7578C20.604 26.7578 21.4916 27.6453 21.4916 28.7302Z" fill="white"/>
+</svg>
--- a/public/assets/svg/leftIcon.svg
+++ b/public/assets/svg/leftIcon.svg
@ -0,0 +1,3 @@
+<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.68115 13.4375L1.68115 7.4375L7.68115 1.4375" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/assets/svg/rightIcon.svg
+++ b/public/assets/svg/rightIcon.svg
@ -0,0 +1,3 @@
+<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.09814 13.4375L7.09814 7.4375L1.09814 1.4375" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/assets/svg/tracing-done.svg
+++ b/public/assets/svg/tracing-done.svg
--- a/public/assets/top_logo.svg
+++ b/public/assets/top_logo.svg
@ -0,0 +1,11 @@
+<svg width="148" height="41" viewBox="0 0 148 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.1816 0V39.6748H97.6575V27.3315H98.0989L103.837 40.5564L115.754 37.9114L106.926 22.0415L113.989 9.25744L102.954 6.61246L97.6575 18.1843V0H86.1816Z" fill="#FDE40D"/>
+<path d="M0.171817 33.3876V16.8932H4.74643V33.3876H0.171817ZM2.46986 14.767C1.78976 14.767 1.2063 14.5415 0.719482 14.0905C0.239827 13.6323 0 13.0846 0 12.4475C0 11.8175 0.239827 11.277 0.719482 10.8259C1.2063 10.3678 1.78976 10.1387 2.46986 10.1387C3.14997 10.1387 3.72985 10.3678 4.20951 10.8259C4.69632 11.277 4.93973 11.8175 4.93973 12.4475C4.93973 13.0846 4.69632 13.6323 4.20951 14.0905C3.72985 14.5415 3.14997 14.767 2.46986 14.767Z" fill="#004AAD"/>
+<path d="M12.9856 23.8518V33.3876H8.41096V16.8932H12.7708V19.8034H12.9641C13.3292 18.844 13.9413 18.0852 14.8004 17.5268C15.6595 16.9612 16.7011 16.6784 17.9253 16.6784C19.0707 16.6784 20.0694 16.929 20.9214 17.4301C21.7733 17.9313 22.4355 18.6472 22.908 19.5778C23.3805 20.5014 23.6167 21.6038 23.6167 22.8853V33.3876H19.0421V23.7014C19.0493 22.692 18.7915 21.9045 18.2689 21.339C17.7463 20.7662 17.0268 20.4799 16.1105 20.4799C15.4948 20.4799 14.9507 20.6123 14.4782 20.8772C14.0129 21.1421 13.6478 21.5287 13.3829 22.037C13.1252 22.5381 12.9927 23.143 12.9856 23.8518Z" fill="#004AAD"/>
+<path d="M35.9956 16.8932V20.3295H26.0624V16.8932H35.9956ZM28.3175 12.9414H32.8921V28.319C32.8921 28.7414 32.9566 29.0707 33.0854 29.307C33.2143 29.536 33.3933 29.6971 33.6224 29.7902C33.8586 29.8833 34.1307 29.9298 34.4385 29.9298C34.6533 29.9298 34.868 29.9119 35.0828 29.8761C35.2976 29.8331 35.4622 29.8009 35.5768 29.7795L36.2963 33.1836C36.0672 33.2552 35.745 33.3375 35.3298 33.4306C34.9146 33.5308 34.4099 33.5916 33.8157 33.6131C32.7132 33.6561 31.7467 33.5093 30.9163 33.1728C30.093 32.8364 29.4522 32.3138 28.9941 31.605C28.5359 30.8963 28.3104 30.0014 28.3175 28.9204V12.9414Z" fill="#004AAD"/>
+<path d="M46.3153 33.7098C44.6186 33.7098 43.1582 33.3661 41.934 32.6789C40.717 31.9844 39.7791 31.0037 39.1205 29.7365C38.4619 28.4622 38.1325 26.9552 38.1325 25.2156C38.1325 23.5189 38.4619 22.0298 39.1205 20.7483C39.7791 19.4669 40.7062 18.4682 41.9018 17.7523C43.1045 17.0364 44.5148 16.6784 46.1328 16.6784C47.2209 16.6784 48.2339 16.8538 49.1718 17.2046C50.1168 17.5483 50.94 18.0673 51.6416 18.7617C52.3504 19.4561 52.9016 20.3295 53.2954 21.3819C53.6891 22.4271 53.886 23.6513 53.886 25.0545V26.3109H39.9581V23.4759H49.5798C49.5798 22.8173 49.4366 22.2338 49.1503 21.7256C48.8639 21.2173 48.4666 20.8199 47.9583 20.5336C47.4572 20.2401 46.8737 20.0933 46.2079 20.0933C45.5135 20.0933 44.8978 20.2544 44.3609 20.5765C43.8311 20.8915 43.4159 21.3175 43.1152 21.8544C42.8145 22.3842 42.6606 22.9748 42.6535 23.6263V26.3216C42.6535 27.1378 42.8038 27.8429 43.1045 28.4371C43.4123 29.0313 43.8455 29.4895 44.4039 29.8117C44.9623 30.1338 45.6245 30.2949 46.3905 30.2949C46.8988 30.2949 47.3641 30.2233 47.7865 30.0801C48.2089 29.937 48.5704 29.7222 48.8711 29.4358C49.1718 29.1495 49.4009 28.7987 49.5584 28.3834L53.7893 28.6626C53.5746 29.6792 53.1343 30.5669 52.4685 31.3258C51.8099 32.0775 50.9579 32.6645 49.9127 33.0869C48.8747 33.5021 47.6755 33.7098 46.3153 33.7098Z" fill="#004AAD"/>
+<path d="M56.8713 33.3876V16.8932H61.3063V19.7711H61.4781C61.7788 18.7474 62.2835 17.9742 62.9923 17.4516C63.701 16.9218 64.5171 16.657 65.4407 16.657C65.6697 16.657 65.9167 16.6713 66.1816 16.6999C66.4465 16.7286 66.6792 16.7679 66.8796 16.818V20.8772C66.6648 20.8128 66.3677 20.7555 65.9883 20.7054C65.6089 20.6553 65.2617 20.6302 64.9467 20.6302C64.2737 20.6302 63.6724 20.777 63.1426 21.0705C62.62 21.3569 62.2048 21.7578 61.8969 22.2732C61.5963 22.7887 61.4459 23.3829 61.4459 24.0558V33.3876H56.8713Z" fill="#004AAD"/>
+<path d="M73.4758 33.699C72.4234 33.699 71.4855 33.5165 70.6623 33.1514C69.839 32.7791 69.1875 32.2314 68.7078 31.5084C68.2354 30.7781 67.9991 29.8689 67.9991 28.7808C67.9991 27.8644 68.1673 27.0948 68.5038 26.472C68.8403 25.8492 69.2985 25.348 69.8783 24.9686C70.4582 24.5892 71.1169 24.3028 71.8542 24.1095C72.5988 23.9162 73.3791 23.7802 74.1952 23.7014C75.1545 23.6012 75.9277 23.5082 76.5148 23.4222C77.1018 23.3292 77.5278 23.1932 77.7927 23.0142C78.0575 22.8352 78.19 22.5703 78.19 22.2195V22.1551C78.19 21.475 77.9752 20.9488 77.5457 20.5765C77.1233 20.2043 76.5219 20.0181 75.7416 20.0181C74.9183 20.0181 74.2633 20.2007 73.7764 20.5658C73.2896 20.9237 72.9675 21.3748 72.81 21.9188L68.579 21.5752C68.7938 20.573 69.2161 19.7067 69.8461 18.9765C70.4761 18.2391 71.2887 17.6735 72.2838 17.2798C73.286 16.8789 74.4458 16.6784 75.7631 16.6784C76.6794 16.6784 77.5564 16.7858 78.394 17.0006C79.2388 17.2154 79.9869 17.5483 80.6384 17.9993C81.297 18.4503 81.816 19.0302 82.1955 19.7389C82.5749 20.4405 82.7646 21.2817 82.7646 22.2625V33.3876H78.4262V31.1003H78.2974C78.0325 31.6157 77.6781 32.0703 77.2342 32.4641C76.7904 32.8507 76.257 33.1549 75.6342 33.3769C75.0114 33.5916 74.2919 33.699 73.4758 33.699ZM74.7859 30.5419C75.4588 30.5419 76.053 30.4095 76.5685 30.1446C77.0839 29.8725 77.4884 29.5074 77.7819 29.0492C78.0754 28.5911 78.2222 28.072 78.2222 27.4921V25.7418C78.079 25.8348 77.8821 25.9207 77.6316 25.9995C77.3882 26.0711 77.1125 26.1391 76.8047 26.2035C76.4969 26.2608 76.189 26.3145 75.8812 26.3646C75.5734 26.4076 75.2942 26.4469 75.0436 26.4827C74.5067 26.5615 74.0377 26.6868 73.6368 26.8586C73.2359 27.0304 72.9245 27.2631 72.7026 27.5566C72.4807 27.8429 72.3697 28.2009 72.3697 28.6304C72.3697 29.2533 72.5952 29.7293 73.0462 30.0587C73.5044 30.3808 74.0843 30.5419 74.7859 30.5419Z" fill="#004AAD"/>
+<path d="M127.069 14.6403V18.5547H115.754V14.6403H127.069ZM118.323 10.1387H123.534V27.6558C123.534 28.137 123.607 28.5121 123.754 28.7812C123.901 29.0422 124.105 29.2257 124.366 29.3317C124.635 29.4377 124.945 29.4907 125.295 29.4907C125.54 29.4907 125.785 29.4703 126.029 29.4295C126.274 29.3806 126.462 29.3439 126.592 29.3194L127.412 33.1972C127.151 33.2787 126.784 33.3725 126.311 33.4785C125.838 33.5927 125.263 33.662 124.586 33.6865C123.33 33.7354 122.229 33.5682 121.283 33.185C120.345 32.8017 119.615 32.2063 119.093 31.399C118.571 30.5916 118.315 29.5722 118.323 28.3408V10.1387Z" fill="#004AAD"/>
+<path d="M138.751 33.7966C136.851 33.7966 135.208 33.3929 133.822 32.5856C132.443 31.77 131.379 30.6365 130.629 29.1849C129.879 27.7251 129.503 26.0329 129.503 24.1083C129.503 22.1674 129.879 20.4712 130.629 19.0196C131.379 17.5598 132.443 16.4262 133.822 15.6189C135.208 14.8034 136.851 14.3956 138.751 14.3956C140.651 14.3956 142.291 14.8034 143.669 15.6189C145.055 16.4262 146.123 17.5598 146.874 19.0196C147.624 20.4712 147.999 22.1674 147.999 24.1083C147.999 26.0329 147.624 27.7251 146.874 29.1849C146.123 30.6365 145.055 31.77 143.669 32.5856C142.291 33.3929 140.651 33.7966 138.751 33.7966ZM138.776 29.7598C139.64 29.7598 140.362 29.5152 140.941 29.0259C141.52 28.5284 141.956 27.8515 142.25 26.9952C142.552 26.139 142.702 25.1644 142.702 24.0716C142.702 22.9789 142.552 22.0043 142.25 21.148C141.956 20.2918 141.52 19.6149 140.941 19.1174C140.362 18.62 139.64 18.3712 138.776 18.3712C137.903 18.3712 137.169 18.62 136.574 19.1174C135.987 19.6149 135.542 20.2918 135.24 21.148C134.947 22.0043 134.8 22.9789 134.8 24.0716C134.8 25.1644 134.947 26.139 135.24 26.9952C135.542 27.8515 135.987 28.5284 136.574 29.0259C137.169 29.5152 137.903 29.7598 138.776 29.7598Z" fill="#004AAD"/>
+</svg>
--- a/public/assets/ws-saved.mp3
+++ b/public/assets/ws-saved.mp3
--- a/public/assets/yara.gif
+++ b/public/assets/yara.gif
--- a/public/galleryFunction.js
+++ b/public/galleryFunction.js
@ -0,0 +1,45 @@
+      const jsonData = [
+        {
+            "src": "/assets/back.jpeg",
+            "title": "Image Title 1",
+            "description": "Description for image 1 goes here."
+        },
+        {
+            "src": "/assets/background.jpg",
+            "title": "Image Title 2",
+            "description": "Description for image 2 goes here."
+        },
+        {
+            "src": "/assets/backgroundImage.png",
+            "title": "Image Title 3",
+            "description": "Description for image 3 goes here."
+        },
+        {
+            "src": "/assets/beanieImage.png",
+            "title": "Image Title 4",
+            "description": "Description for image 4 goes here."
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+        document.getElementById('imageTitle').textContent = slide.title;
+        document.getElementById('imageDescription').textContent = slide.description;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        gallerySliderId.classList.add('hidden');
+        
+    }
--- a/public/html2canvas.min.js
+++ b/public/html2canvas.min.js
--- a/public/saveGameAI.js
+++ b/public/saveGameAI.js
@ -0,0 +1,351 @@
+    function retryGame(){
+        window.location.reload();
+    }
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    const childId = urlParams.get('childId');
+    const gameVersion = urlParams.get('gameName');
+    const gameId = urlParams.get('id');
+    const spriteName = urlParams.get('spriteName');
+    const assignmentId = urlParams.get('assignmentId');
+    const worksheetId = urlParams.get('worksheetId');
+    let submitNotic;
+    let startTime = Date.now();
+    // console.log('gameVersion', gameVersion)
+
+    const url = window.location.href;
+    const gameName = url.split('/');
+    const gameType = gameName[3].split('?id=');
+    // let gameVersion;
+    // if(gameType[0] == "guided-tracing"){
+    //     gameVersion = gameType[0].split('?')[0];
+    //     gameId = gameName[4];
+    //     console.log('Type - 1');
+
+    // } else if(gameName.length == 4){
+    //     gameVersion = gameName[3].split('?')[0];
+    //     gameId = urlParams.get('id');
+    // }
+    // else if(gameName.length == 5){
+    //     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+    //     gameId = urlParams.get('id');
+    //     console.log('Type - 2');
+    // }else if(gameName.length == 6){
+    //     gameVersion = gameType[0] + '-' + gameName[4];
+    //     gameId = urlParams.get('id');
+    //     console.log('Type - 3');
+    // }
+    // console.log("Here is game name ", gameType[0])
+
+    // console.log(gameVersion)
+    let imageCode;
+    let gameScore;
+    let timeDifferenceInSeconds;
+
+    // if(scoreTotal){
+    //     gameScore = scoreTotal;
+    // }else{
+    //     gameScore = 0;
+    // }
+
+
+function submitUserData(drawingZone) {
+    submitButton.setVisible(false);
+    galleryButton.setVisible(false);
+    customCursor.setVisible(false);
+    snapshotButton.setVisible(false);
+    if(!gameType[0] === 'guided-tracing'){
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        galleryButton.setVisible(false);
+    }
+    muteIcon.setVisible(false);
+    retryButton.setVisible(false);
+    
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        submitButton.setVisible(true);
+        galleryButton.setVisible(true);
+        customCursor.setVisible(true);
+        snapshotButton.setVisible(true);
+        if(!gameType[0] == "guided-tracing"){
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            galleryButton.setVisible(true);
+        }
+
+        muteIcon.setVisible(true);
+        retryButton.setVisible(true);
+        
+        if(gameType[0] == 'drawing'){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            // galleryButton.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }
+        
+        
+    });   
+    
+
+};
+
+    function calculateFromAI(){
+        let progress = 0;
+        let starValue;
+        
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
+        progressIncrement();
+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        addStarScalingStyles();
+        
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        const progressBar = document.createElement('div');
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+        let userDataForStar = {
+            gameName: gameVersion,
+            childId: childId,
+            gameID: gameId,
+            gameTime: timeDifferenceInSeconds,
+            screenShot: imageCode
+        };
+        
+        // First API call
+        fetch(`https://ai-image-api.cs1.hz.siliconpin.com/bs_drawing`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userDataForStar)
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('response from', data)
+            setTimeout(() => {
+                if (data && data.message === "Game data saved successfully") {
+                    let starValue = data.gameStar; // Ensure starValue is available
+        
+                    let feedbackMessage = '';
+                    if (starValue >= 1 && starValue <= 3) {
+                        feedbackMessage = "You're making progress! Let's keep going!";
+                    } else if (starValue >= 4 && starValue <= 6) {
+                        feedbackMessage = "Nice work! You're improving every day!";
+                    } else if (starValue >= 7 && starValue <= 8) {
+                        feedbackMessage = "Amazing work! Keep it up!";
+                    } else if (starValue >= 9 && starValue <= 10) {
+                        feedbackMessage = "Outstanding! You're a true superstar!";
+                    } else {
+                        feedbackMessage = "Invalid star value.";
+                    }
+        
+                    loadingMainContainer.style.display = 'none';
+                    loadingDiv.style.display = 'none';
+                    starContainer.style.display = 'flex';
+                    starContainer.style.flexDirection = 'row';
+                    document.getElementById('get-star-value').innerHTML = starValue;
+                    document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                    scoreBoard.style.display = 'flex';
+        
+                    if (scoreBoard.style.display === 'flex') {
+                        const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');
+                        bottomAnimateClipart.classList.remove('hidden');
+                        bottomAnimateClipart.classList.add('-translate-x-full', 'transition-transform', 'duration-700');
+                        setTimeout(() => {
+                            bottomAnimateClipart.classList.add('hidden');
+                            bottomAnimateClipart.classList.remove('translate-x-full');
+                        }, 100);
+                    }
+        
+                    // ✅ Now create `userData` inside the correct scope where starValue exists
+                    let userData = {
+                        gameName: gameVersion.trim(),
+                        gameID: gameId,
+                        screenShot: imageCode,
+                        childId: childId,
+                        gameTime: timeDifferenceInSeconds,
+                        gameStar: starValue // ✅ Now correctly assigned
+                    };
+        
+                    // ✅ Now perform the second fetch request
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.screenshotUrl) {
+                            fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(userData)
+                            })
+                            .then(response => {
+                                setTimeout(() => {
+                                    if (response.ok && response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                    }
+                                }, 100);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+        
+                            // Final API Call
+                            const userAnotherData = {
+                                assignmentId: assignmentId,
+                                worksheetId: worksheetId,
+                                studentId: childId,
+                                submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
+                            };
+                            const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q';
+        
+                            fetch(`https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'Authorization': authToken
+                                },
+                                body: JSON.stringify(userAnotherData)
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                console.log('Submission API response', data);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                }
+            }, 150);
+        })
+        .catch(error => {
+            console.error('An error occurred', error);
+        });        
+    }
+
+
+
+
+
--- a/public/saveGameData
+++ b/public/saveGameData
@ -0,0 +1,243 @@
+function retryGame(){
+    window.location.reload();
+}
+ 
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+let submitNotic;
+
+// console.log(userId);
+let startTime = Date.now();
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+// let gameVersion;
+
+// console.log("Here is game name ", gameType[0])
+
+// if(gameType[0] == "guided-tracing"){
+//     gameVersion = gameType[0].split('?')[0];
+//     gameId = gameName[4];
+//     console.log('Type - 1');
+
+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }
+
+console.log(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click(); 
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let maxStarValue = 10;
+        let progress = 0;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
+        progressIncrement();
+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        addStarScalingStyles();
+        const blankStar = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        const progressBar = document.createElement('div');
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+        let userData = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+        setTimeout(() => { 
+            if (response.ok) {
+            if (response.status == 200) {
+                loadingMainContainer.style.display = 'none';
+                loadingDiv.style.display = 'none';
+                starContainer.style.display = 'flex';
+                starContainer.style.flexDirection = 'row';
+                document.getElementById('wsSavedImg').classList.remove('-z-10');
+                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                for (let i = 0; i < starValue; i++) {
+                    const starDiv = document.createElement('div');
+                    starDiv.innerHTML = starSVG;
+                    starDiv.classList.add('star');
+                    starContainer.appendChild(starDiv);
+                    setTimeout(() => {
+                        starDiv.style.opacity = '1'; 
+                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                    }, i * 500);
+                }
+                for (let i = 0; i < maxStarValue - starValue; i++) {
+                    const starDiv = document.createElement('div');
+                    starDiv.innerHTML = blankStar;
+                    starContainer.appendChild(starDiv);
+                }
+                scoreBoard.style.display = 'flex';
+            }
+            } else {
+            console.log('Something went wrong', response);
+            }
+        }, 100);
+        })
+        .catch(error => {
+        console.error('An error occurred', error);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};
--- a/public/saveGameData
+++ b/public/saveGameData
@ -0,0 +1,243 @@
+function retryGame(){
+    window.location.reload();
+}
+ 
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+let submitNotic;
+
+// console.log(userId);
+let startTime = Date.now();
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+// let gameVersion;
+
+// console.log("Here is game name ", gameType[0])
+
+// if(gameType[0] == "guided-tracing"){
+//     gameVersion = gameType[0].split('?')[0];
+//     gameId = gameName[4];
+//     console.log('Type - 1');
+
+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }
+
+console.log(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let maxStarValue = 10;
+        let progress = 0;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
+        progressIncrement();
+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        addStarScalingStyles();
+        const blankStar = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="48" height="48" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        const progressBar = document.createElement('div');
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+        let userData = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+        setTimeout(() => { 
+            if (response.ok) {
+            if (response.status == 200) {
+                loadingMainContainer.style.display = 'none';
+                loadingDiv.style.display = 'none';
+                starContainer.style.display = 'flex';
+                starContainer.style.flexDirection = 'row';
+                document.getElementById('wsSavedImg').classList.remove('-z-10');
+                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                for (let i = 0; i < starValue; i++) {
+                    const starDiv = document.createElement('div');
+                    starDiv.innerHTML = starSVG;
+                    starDiv.classList.add('star');
+                    starContainer.appendChild(starDiv);
+                    setTimeout(() => {
+                        starDiv.style.opacity = '1'; 
+                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                    }, i * 500);
+                }
+                for (let i = 0; i < maxStarValue - starValue; i++) {
+                    const starDiv = document.createElement('div');
+                    starDiv.innerHTML = blankStar;
+                    starContainer.appendChild(starDiv);
+                }
+                scoreBoard.style.display = 'flex';
+            }
+            } else {
+            console.log('Something went wrong', response);
+            }
+        }, 100);
+        })
+        .catch(error => {
+        console.error('An error occurred', error);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};
--- a/public/saveGameData.js
+++ b/public/saveGameData.js
@ -1,31 +1,45 @@
+function retryGame(){
+    window.location.reload();
+}
+ 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userId');
-let gameId;
+const childId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const assignmentId = urlParams.get('assignmentId');
+const worksheetId = urlParams.get('worksheetId');
+const gameId = urlParams.get('id');
 let submitNotic;

-console.log(userId);
+// console.log(childId);
 let startTime = Date.now();


 const url = window.location.href;
 const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
-let gameVersion;
+// let gameVersion;

+// console.log("Here is game name ", gameType[0])

-if(gameType[0] == "guided-tracing"){
-    gameVersion = gameType[0].split('?')[0];
-    gameId = gameName[4];
-} else if(gameName.length == 5){
-    gameVersion = gameName[3];
-    gameId = urlParams.get('id');
-}else if(gameName.length == 6){
-    gameVersion = gameType[0] + '-' + gameName[4];
-    gameId = urlParams.get('id');
-}
-
+// if(gameType[0] == "guided-tracing"){
+//     gameVersion = gameType[0].split('?')[0];
+//     gameId = gameName[4];
+//     console.log('Type - 1');

+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }

 function submitUserData(drawingZone) {
    const endTime = Date.now();
@ -43,10 +57,7 @@ function submitUserData(drawingZone) {
    }
    // console.log('This is from main point', scoreTotal);
    drawingZone.renderer.snapshot((image) => {
-        if(gameType[0] == 'drawing'){
        submitButton.setVisible(true);
-            snapshotButton.setVisible(true);
-            customCursor.setVisible(true);
        image.style.width = '160px';
        image.style.height = '120px';
        image.style.paddingLeft = '2px';
@ -58,59 +69,212 @@ function submitUserData(drawingZone) {
        // link.click();
        document.body.removeChild(image);
        imageCode = image.src;
-        }else if( gameType[0] == "guided-tracing"){
-            // submitButton.setVisible(true);
-            // snapshotButton.setVisible(true);
-            // customCursor.setVisible(true);
-            image.style.width = '160px';
-            image.style.height = '120px';
-            image.style.paddingLeft = '2px';
-            document.body.appendChild(image);
-            // Download the snapshot as an image
-            // const link = document.createElement('a');
-            // link.href = image.src;
-            // link.download = `guided-tracing-${gameId}.png`;
-            // link.click();
-            document.body.removeChild(image);
-            imageCode = image.src;
+        let starValue = Math.round((scoreTotal / maxScore) * 10);
+        starValue = starValue === 0 ? 3 : starValue;
+        // console.log('Star Value', starValue);
+        // console.log('starValue', starValue)
+        // if(scoreTotal === maxScore){
+        //     starValue = 5;
+        // } else if(scoreTotal === maxScore - 1){
+        //     starValue = 4;
+        // } else{
+        //     starValue = 3;
+        // }
+        let maxStarValue = 10;
+        let progress = 0;
+        let feedbackMessage = '';
+        if (starValue >= 1 && starValue <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+          } else if (starValue >= 4 && starValue <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+          } else if (starValue >= 7 && starValue <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+          } else if (starValue >= 9 && starValue <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+          } else {
+            feedbackMessage = "Invalid star value.";
          }

        
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
+        progressIncrement();
+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        addStarScalingStyles();
       
-        let userData = {
-            'gameName': gameVersion,
-            'gameID': gameId,
-            'screenShot': imageCode,
-            'userId' : userId,
-            'gameTime' : timeDifferenceInSeconds,
-            'score' : scoreTotal
-            // 'starts': formattedDateTime,
-            // 'game_start' : gameStartTime,
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        const progressBar = document.createElement('div');
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+        const saveUserDataForScreenshot = {
+            gameName: gameVersion,
+            gameID: gameId,      
+            screenShot: imageCode,
+            childId: childId,      
+            gameTime: timeDifferenceInSeconds         
        };
-        console.log(userData);
-
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
            method: 'POST',
            headers: {
                'Content-Type' : 'application/json'
            },
+            body: JSON.stringify(saveUserDataForScreenshot)
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Gallery Response Data', data)
+
+            if(data.screenshotUrl){
+                let userData = {
+                    'gameName': gameVersion,
+                    'gameID': gameId,
+                    'screenShot': imageCode,
+                    'childId' : childId,
+                    'gameTime' : timeDifferenceInSeconds,
+                    'score' : scoreTotal,
+                    'gameStar' : starValue
+                };
+                // console.log(userData);
+                fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
                    body: JSON.stringify(userData)
                })
                .then(response => {
-            if(response.ok){
-            console.log('Data Saved', response.status)
-            if(response.status == 200){
-                submitNotic.setVisible(true);
+                    setTimeout(() => { 
+                        if (response.ok) {
+                            // console.log('Response Code', response.status)
+                            if (response.status == 200) {
+                                document.getElementById('saved-toast').classList.remove('hidden');
+                                setTimeout(() => {
+                                    document.getElementById('saved-toast').classList.add('hidden');
+                                }, 1500);
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                // starContainer.style.flexDirection = 'row';
+                                // document.getElementById('wsSavedImg').classList.remove('-z-10');
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                document.getElementById('get-star-value').innerHTML = starValue;
+                                // const starDiv = document.createElement('div');
+                                // starDiv.innerHTML = starSVG;   
+                                // starContainer.appendChild(starDiv);   
+                                // starDiv.classList.add('star');  
+                                scoreBoard.style.display = 'flex';
                            }
-            } else{
-            // console.log('Something Wrong', response) 
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
+                })
+                .catch(error => {
+                    console.error('An error occurred', error);
+                });
+                const userAnotherData = {
+                    assignmentId: assignmentId,
+                    worksheetId: worksheetId,
+                    studentId: childId,
+                    submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
+                };
+                const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                // console.log('Starting submissions API call');
+                fetch(`https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': authToken
+                    },
+                    body: JSON.stringify(userAnotherData)
+                })
+                .then(response => {
+                    // console.log('Submissions API Response:', response);
+                    return response.json();
+                })
+                .then(data => {
+                    // console.log('Submissions Response Data:', data);
+                })
+                .catch(error => {
+                    console.error('Error in Submissions API:', error);
+                });
+
            }
        })
        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-            
-            // Clear the drawing
-            // graphics.clear();
+            console.error('An error occoured', error)
+        })
    });        
 };
--- a/public/saveTracingGameData.js
+++ b/public/saveTracingGameData.js
@ -0,0 +1,128 @@
+function retryGame(){
+    window.location.reload();
+}
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const childId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+let submitNotic;
+
+// console.log(childId);
+let startTime = Date.now();
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+// let gameVersion;iVBORw0KGgoAAAANSUhEUgAAB4A
+//     console.log('Type - 1');
+
+// } else if(gameName.length == 4){
+//     gameVersion = gameName[3].split('?')[0];
+//     gameId = urlParams.get('id');
+// }
+// else if(gameName.length == 5){
+//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 2');
+// }else if(gameName.length == 6){
+//     gameVersion = gameType[0] + '-' + gameName[4];
+//     gameId = urlParams.get('id');
+//     console.log('Type - 3');
+// }
+
+console.log(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = 'my_drawing.png';
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            // const link = document.createElement('a');
+            // link.href = image.src;
+            // link.download = `guided-tracing-${gameId}.png`;
+            // link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
+        }
+        let starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let userData = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'childId' : childId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+        setTimeout(() => { 
+            if (response.ok) {
+            if (response.status == 200) {
+                document.getElementById('wsSavedImg').classList.remove('-z-10');
+            }
+            } else {
+            console.log('Something went wrong', response);
+            }
+        }, 100);
+        })
+        .catch(error => {
+        console.error('An error occurred', error);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -10,7 +10,7 @@ const { title } = Astro.props;
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" type="image/ico+xml" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
--- a/src/pages/buzzboard.astro
+++ b/src/pages/buzzboard.astro
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/src/pages/cross/cross_phonics_v1.astro
@ -3,91 +3,183 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
    <main>
-        <div>
+        <div class="specific">
            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
-                            <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
-                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
-                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
                    <!-- <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 class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
+                <div class="container mx-auto px-4" id="snapshotDiv">
                    <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">
                        <div id="itemForm" class="flex flex-row place-content-between gap-4">
                            <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a1" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label1"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
                                
-                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a2" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
                            </div>
                            <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a3" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
                                
-                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a4" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label4"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
                            </div>
                            <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a5" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label5"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
                                
-                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a6" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label6"></p>
+                                    </div>
                                </label>
-                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
                            </div>
                        </div>
-                        <div class="flex flex-col place-items-center justify-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
+                            <!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
                        </div>
                    </form>
                </div>
            </section>
        </div>  
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                    <div id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </div>  
+                </div>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+        </div>      
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
    </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
    const params = new URLSearchParams(window.location.search);
    const gameId = params.get('id');
-    const userId = params.get('userid');
+    const childId = params.get('childId');
+    const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
    let startTime = Date.now();
    let gameData = null;
-
+    let totalPoints = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let wrongCount = 0;
+    let starValue;
+    let maxScore = 6;
+    let progress = 0;
+    const progressBar = document.createElement('div');
+    let totalCorrectFromApi = 0;
    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
        .then(res => res.json())
        .then(data => {
            gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
            // console.log(gameData)
            document.getElementById("gameDescription").innerHTML = gameData.description;
            if(gameData.label1){
@ -109,7 +201,7 @@ import Layout from "../../layouts/Layout.astro";
                document.getElementById("label6").innerHTML = gameData.label6;
            }
            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;

            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
            for (let i = 1; i <= 6; i++) {
@ -118,6 +210,38 @@ import Layout from "../../layouts/Layout.astro";
            }
        });

+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
+
    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);
@ -126,23 +250,36 @@ import Layout from "../../layouts/Layout.astro";
            if (gameData[id.replace('image', 'a')] === true) {
                element.classList.add('redBorder');
            } else {
+                wrongCount += 1;
                element.classList.add('greenBorder');
            }
        } else {
+            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
    }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+

    function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 1) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
        const endTime = Date.now();
        const timeDifference = endTime - startTime;
        const timeDifferenceInSeconds = timeDifference / 1000;

         // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
        const checkboxValues = checkboxes.map(id => {
            const checkbox = document.getElementById(id);
            const element = document.getElementById('image' + id.slice(-1));
@ -154,24 +291,152 @@ import Layout from "../../layouts/Layout.astro";
        });

        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
        checkboxValues.forEach(checkbox => {
            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                totalPoints += 1;
            }
        });
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }

-        // Move the userData object creation inside the saveUserData function if needed
+        // console.log(userData);
+        progressIncrement();
+        addStarScalingStyles();
+
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
+                }
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
-            'userId': userId,
+                        'childId': childId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
+                        'gameStar': percentage
                    };
-        // console.log(userData);
-
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
@ -180,9 +445,26 @@ import Layout from "../../layouts/Layout.astro";
                    })
                    .then(response => {
                        if (response.ok) {
-                    if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
                        } else {
                            // console.log('Something Wrong', response);
                        }
@ -190,6 +472,43 @@ import Layout from "../../layouts/Layout.astro";
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
    }


@ -263,7 +582,7 @@ import Layout from "../../layouts/Layout.astro";
        color: #7C4C23;
        padding-top: 10px;
    }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
        font-size: 20px;
        color: #7C4C23;
        font-weight: bold;
@ -285,4 +604,24 @@ import Layout from "../../layouts/Layout.astro";
        font-size: 40px;
        display: block;
    }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@ -8,21 +8,21 @@ import Layout from "../../layouts/Layout.astro";
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
-                            <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
-                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
                    <!-- <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 class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                    <!-- <div class="flex flex-col">
                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
+                        <p id="LearningSubArea"></p>
                    </div> -->
                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
                    <form id="contactForm">
@ -86,25 +86,108 @@ import Layout from "../../layouts/Layout.astro";
                            </div>
                        </div>
                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" 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"> -->
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                        </div>
                    </form>
                </div>
            </section>
        </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                    <div id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </div>
+                </div>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+        </div> 
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>    
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>  
    </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
    const params = new URLSearchParams(window.location.search);
    const gameId = params.get('id');
-    const userId = params.get('userid');
+    const childId = params.get('childId');
+    const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
    let startTime = Date.now();
-    
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
+    let maxScore = 9;
+    let progress = 0;
+    const progressBar = document.createElement('div');
+    let totalCorrectFromApi = 0;
    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
        .then(res => res.json())
        .then(data => {
            gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
            // console.log(gameData)
            document.getElementById("gameDescription").innerHTML = gameData.description;
            if(gameData.label1){
@ -135,7 +218,7 @@ import Layout from "../../layouts/Layout.astro";
                document.getElementById("label9").innerHTML = gameData.label9;
            }
            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
            for (let i = 1; i <= 9; i++) {
                const imageId = `image${i}`;
@ -143,6 +226,38 @@ import Layout from "../../layouts/Layout.astro";
            }
        });

+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
+
    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);
@ -152,32 +267,35 @@ import Layout from "../../layouts/Layout.astro";
                element.classList.add('redBorder');
            } else {
                element.classList.add('greenBorder');
+                wrongCount += 1;
+                // console.log(wrongCount)
            }
        } else {
+            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
    }

-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+

    function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+        if (checkedCount < 1) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
        const endTime = Date.now();
        const timeDifference = endTime - startTime;
        const timeDifferenceInSeconds = timeDifference / 1000;
-        // const checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
        const checkboxValues = checkboxes.map(id => {
            const checkbox = document.getElementById(id);
            const element = document.getElementById('image' + id.slice(-1));
@ -189,22 +307,152 @@ import Layout from "../../layouts/Layout.astro";
        });

        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
        checkboxValues.forEach(checkbox => {
            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                totalPoints += 1;
            }
        });
+
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+
+        progressIncrement();
+        addStarScalingStyles();
+        
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
+                }
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
-            'userId': userId,
+                        'childId': childId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
+                        'gameStar': percentage
                    };
-        // console.log(userData);
-
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
@ -213,9 +461,22 @@ import Layout from "../../layouts/Layout.astro";
                    })
                    .then(response => {
                        if (response.ok) {
-                    if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
                        } else {
                            // console.log('Something Wrong', response);
                        }
@ -223,6 +484,43 @@ import Layout from "../../layouts/Layout.astro";
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
    }

    document.addEventListener('DOMContentLoaded', function () {
@ -296,7 +594,7 @@ import Layout from "../../layouts/Layout.astro";
        color: #7C4C23;
        padding-top: 10px;
    }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
        font-size: 20px;
        color: #7C4C23;
        font-weight: bold;
@ -318,4 +616,24 @@ import Layout from "../../layouts/Layout.astro";
        font-size: 40px;
        display: block;
    }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@ -3,91 +3,184 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
    <main>
-        <div>
+        <div class="specific">
            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
-                            <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
-                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
-                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
                    <!-- <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 class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
+                <div class="container mx-auto px-4" id="snapshotDiv">
                    <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">
                        <div id="itemForm" class="flex flex-row place-content-between gap-4">
                            <div class="flex flex-col gap-6 place-items-center">
                                <label for="a1" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label1"></p>
+                                    </div>
                                </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">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label2"></p>
+                                    </div>
                                </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 class="flex flex-col gap-6 place-items-center">
                                <label for="a3" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label3"></p>
+                                    </div>
                                </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">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label4"></p>
+                                    </div>
                                </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 class="flex flex-col gap-6 place-items-center">
                                <label for="a5" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label5"></p>
+                                    </div>
                                </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">
+                                    <div class="flex flex-col place-items-center">
                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
+                                        <p id="label6"></p>
+                                    </div>
                                </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 place-items-center justify-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
-                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
+                            <!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
                        </div>
                    </form>
                </div>
            </section>
        </div>  
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                    <div id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </div>  
+                </div>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+        </div>      
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
    </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
    const params = new URLSearchParams(window.location.search);
    const gameId = params.get('id');
-    const userId = params.get('userid');
+    const childId = params.get('childId');
+    const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
    let startTime = Date.now();
    let gameData = null;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let starValue;
+    let maxScore = 6;
+    let progress = 0;
+    const progressBar = document.createElement('div');
+    let totalCorrectFromApi = 0;

    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
        .then(res => res.json())
        .then(data => {
            gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
            // console.log(gameData)
            document.getElementById("gameDescription").innerHTML = gameData.description;
            if(gameData.label1){
@ -109,7 +202,7 @@ import Layout from "../../layouts/Layout.astro";
                document.getElementById("label6").innerHTML = gameData.label6;
            }
            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;

            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
            for (let i = 1; i <= 6; i++) {
@ -118,6 +211,37 @@ import Layout from "../../layouts/Layout.astro";
            }
        });

+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);
@ -127,22 +251,37 @@ import Layout from "../../layouts/Layout.astro";
                element.classList.add('redBorder');
            } else {
                element.classList.add('greenBorder');
+                wrongCount +=1;
            }
        } else {
+            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
    }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
 
    function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 1) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
        const endTime = Date.now();
        const timeDifference = endTime - startTime;
        const timeDifferenceInSeconds = timeDifference / 1000;

         // Get checkbox values and corresponding elements
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        
        const checkboxValues = checkboxes.map(id => {
            const checkbox = document.getElementById(id);
            const element = document.getElementById('image' + id.slice(-1));
@ -154,23 +293,152 @@ import Layout from "../../layouts/Layout.astro";
        });

        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
        checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                totalPoints += 1;
            }
        });

-        // Move the userData object creation inside the saveUserData function if needed
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+
+        progressIncrement();
+        addStarScalingStyles();
+        
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
+                }
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
-            'userId': userId,
+                        'childId': childId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
+                        'gameStar': percentage
                    };
-        // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
@ -179,9 +447,26 @@ import Layout from "../../layouts/Layout.astro";
                    })
                    .then(response => {
                        if (response.ok) {
-                    if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
                        } else {
                            // console.log('Something Wrong', response);
                        }
@ -189,6 +474,43 @@ import Layout from "../../layouts/Layout.astro";
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
    }

    document.addEventListener('DOMContentLoaded', function () {
@ -262,7 +584,7 @@ import Layout from "../../layouts/Layout.astro";
        color: #7C4C23;
        padding-top: 10px;
    }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
        font-size: 20px;
        color: #7C4C23;
        font-weight: bold;
@ -284,4 +606,24 @@ import Layout from "../../layouts/Layout.astro";
        font-size: 40px;
        display: block;
    }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@ -8,22 +8,17 @@ import Layout from "../../layouts/Layout.astro";
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
-                            <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
-                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
-                    <!-- <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 class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
+                <div class="container mx-auto px-4" id="snapshotDiv">
                    <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                    <form id="contactForm">
                        <div id="" class="flex flex-row place-content-between ">
@ -86,25 +81,109 @@ import Layout from "../../layouts/Layout.astro";
                            </div>
                        </div>
                        <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-xl font-bold text-[#60C6CB]" 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"> -->
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                        </div>
                    </form>
                </div>
            </section>
        </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                    <div id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </div>
+                </div>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+        </div>
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
    </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
    const params = new URLSearchParams(window.location.search);
    const gameId = params.get('id');
-    const userId = params.get('userid');
+    const childId = params.get('childId');
+    const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
    let startTime = Date.now();
-    
+    let wrongCount = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let maxPoint = 9;
+    let starValue; 
+    let totalPoints = 0;
+    let maxScore = 9;
+    let progress = 0;
+    const progressBar = document.createElement('div');
+    let totalCorrectFromApi = 0;
    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
        .then(res => res.json())
        .then(data => {
            gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
            // console.log(gameData)
            document.getElementById("gameDescription").innerHTML = gameData.description;
            if(gameData.label1){
@ -134,8 +213,6 @@ import Layout from "../../layouts/Layout.astro";
            if(gameData.label9){
                document.getElementById("label9").innerHTML = gameData.label9;
            }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
            for (let i = 1; i <= 9; i++) {
                const imageId = `image${i}`;
@ -143,6 +220,38 @@ import Layout from "../../layouts/Layout.astro";
            }
        });

+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `; 
+            document.head.appendChild(style);
+        }
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
+    
    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);
@ -152,33 +261,37 @@ import Layout from "../../layouts/Layout.astro";
                element.classList.add('redBorder');
            } else {
                element.classList.add('greenBorder');
+                wrongCount +=1;
            }
        } else {
+            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
+        // console.log(wrongCount)
    }

-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];
+

    function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
+
+        if (checkedCount < 1) {
+            // Show error message if less than 3 checkboxes are checked
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "block";
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
+            return;
+        } else {
+            // Hide error message if validation passes
+            let errorMessageSection = document.getElementById('errorMessage');
+            errorMessageSection.style.display = "none";
+        }
+
        const endTime = Date.now();
        const timeDifference = endTime - startTime;
        const timeDifferenceInSeconds = timeDifference / 1000;
-
-        // const checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
-        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
        const checkboxValues = checkboxes.map(id => {
            const checkbox = document.getElementById(id);
            const element = document.getElementById('image' + id.slice(-1));
@ -189,23 +302,153 @@ import Layout from "../../layouts/Layout.astro";
            };
        });

-        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
        checkboxValues.forEach(checkbox => {
            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                totalPoints += 1;
            }
        });
+
+
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+
+        progressIncrement();
+        addStarScalingStyles();
+
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
+                }
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
-            'userId': userId,
+                        'childId': childId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
+                        'gameStar': percentage
                    };
-        // console.log(userData);
-
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
@ -214,17 +457,72 @@ import Layout from "../../layouts/Layout.astro";
                    })
                    .then(response => {
                        if (response.ok) {
-                    if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
                                    }
                                } else {
-                    // console.log('Something Wrong', response);
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // Handle error
                        }
                    })
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
+    }
+

    document.addEventListener('DOMContentLoaded', function () {
        const contactForm = document.getElementById('contactForm');
@ -297,7 +595,7 @@ import Layout from "../../layouts/Layout.astro";
        color: #7C4C23;
        padding-top: 10px;
    }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
        font-size: 20px;
        color: #7C4C23;
        font-weight: bold;
@ -319,4 +617,24 @@ import Layout from "../../layouts/Layout.astro";
        font-size: 40px;
        display: block;
    }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
--- a/src/pages/cross/v3.astro
+++ b/src/pages/cross/v3.astro
@ -9,24 +9,24 @@ import Layout from "../../layouts/Layout.astro";
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
-                            <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
-                            <button><img src="/assets/svg/mute.svg" alt=""></button>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
                    <!-- <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 class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                    <div class="flex flex-col">
                        <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> -->
                    </div>
                    <div class="flex flex-col justify-center place-items-center ">
-                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
+                        <img class="sm:w-[70%] md:w-[30%] lg:w-[30%]" 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>
                    </div>
                    <form id="contactForm" class="">
@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
                            <div class="flex flex-row gap-4 place-content-between">
                                <div class="flex flex-col place-items-center">
                                    <label for="a1" class="round-checkbox-label">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                        <p id="label1"></p>
                                    </label>
                                    <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                </div>
                                <div class="flex flex-col place-items-center">
                                    <label for="a2" class="round-checkbox-label">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                        <p id="label2"></p>
                                    </label>
                                    <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                                </div>
                                <div class="flex flex-col place-items-center">
                                    <label for="a3" class="round-checkbox-label">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                        <p id="label3"></p>
                                    </label>
                                    <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
@ -56,26 +56,107 @@ import Layout from "../../layouts/Layout.astro";
                            </div>
                        </div>
                        <div class="flex flex-col place-items-center justify-center pt-4">
-                            <p class="text-xl font-bold text-[#60C6CB]" id="savedMessage"></p>
+                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                        </div>
                    </form>
                </div>
            </section>
        </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                    <div id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </div>  
+                </div>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button onclick="retryGame()" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+        </div>
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
    </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+        function retryGame(){
+            window.location.reload();
+        }
    const params = new URLSearchParams(window.location.search);
    const gameId = params.get('id');
-    const userId = params.get('userid');
+    const childId = params.get('childId');
+    const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
    let startTime = Date.now();
    let gameData = null;
-
+    let totalPoints = 0;
+    let wrongCount = 0;
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let progress = 0;
+    const progressBar = document.createElement('div');
+    let totalCorrectFromApi = 0;
    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
        .then(res => res.json())
        .then(data => {
            gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
            // console.log(gameData)
            document.getElementById("gameLabel").innerHTML = gameData.label;
            document.getElementById("gameDescription").innerHTML = gameData.description;
@ -84,17 +165,6 @@ import Layout from "../../layouts/Layout.astro";
                document.getElementById("label2").innerHTML = gameData.label2;
                document.getElementById("label3").innerHTML = gameData.label3;
            }
-            // if(gameData.label1){
-            //     document.getElementById("label1").innerHTML = gameData.label1;
-            // }
-            // if(gameData.label2){
-            //     document.getElementById("label2").innerHTML = gameData.label2;
-            // }
-            // if(gameData.label3){
-            //     document.getElementById("label3").innerHTML = gameData.label3;
-            // }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
            
            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
            document.getElementById('descImage').src = assetsURL + gameData.descript_img;
@ -106,6 +176,38 @@ import Layout from "../../layouts/Layout.astro";
            }
        });

+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
+
    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);
@ -115,16 +217,16 @@ import Layout from "../../layouts/Layout.astro";
                element.classList.add('redBorder');
            } else {
                element.classList.add('greenBorder');
+                wrongCount += 1;
            }
        } else {
+            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
    }
-    let url = window.location.href;
-    let urlSplit = url.split('/');
-    let gameName = urlSplit[3] + '-' + urlSplit[4];

    function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
        const endTime = Date.now();
        const timeDifference = endTime - startTime;
        const timeDifferenceInSeconds = timeDifference / 1000;
@ -141,22 +243,152 @@ import Layout from "../../layouts/Layout.astro";
        });

        // Count points based on checkbox values and "greenBorder" class
-        let totalPoints = 0;
+        
        checkboxValues.forEach(checkbox => {
            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                totalPoints += 1;
            }
        });

+        const answersList = ['a1', 'a2', 'a3'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+        progressIncrement();
+        addStarScalingStyles();
+
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
+                }
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
-            'userId': userId,
+                        'childId': childId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
+                        'gameStar': percentage
                    };
-        // console.log(userData);
-        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
@ -165,9 +397,26 @@ import Layout from "../../layouts/Layout.astro";
                    })
                    .then(response => {
                        if (response.ok) {
-                    if(response.status == 200){
-                        document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
                        } else {
                            // console.log('Something Wrong', response);
                        }
@ -175,6 +424,43 @@ import Layout from "../../layouts/Layout.astro";
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://app.buzzapp.tech/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
    }


@ -271,4 +557,24 @@ import Layout from "../../layouts/Layout.astro";
        font-size: 40px;
        display: block;
    }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
--- a/src/pages/data-table.astro
+++ b/src/pages/data-table.astro
@ -0,0 +1,160 @@
+<div class="container mx-auto p-4">
+    <div class="flex justify-between items-center mb-4">
+      <input
+        type="text"
+        id="searchInput"
+        placeholder="Search..."
+        class="p-2 border border-gray-300 rounded"
+        onkeyup="searchTable()"
+      />
+      <select id="rowsPerPage" onchange="paginateTable()" class="p-2 border border-gray-300 rounded">
+        <option value="5">5 rows</option>
+        <option value="10">10 rows</option>
+        <option value="15">15 rows</option>
+      </select>
+      <button
+        class="p-2 bg-green-500 text-white rounded"
+        onclick="exportTableToCSV()"
+      >
+        Export to CSV
+      </button>
+    </div>
+  
+    <table class="min-w-full table-auto border-collapse border border-gray-300 text-sm">
+      <thead class="bg-gray-200">
+        <tr>
+          <th class="p-2 cursor-pointer" onclick="sortTable(0)">Name</th>
+          <th class="p-2 cursor-pointer" onclick="sortTable(1)">Age</th>
+          <th class="p-2 cursor-pointer" onclick="sortTable(2)">Country</th>
+        </tr>
+      </thead>
+      <tbody id="dataTable">
+        <!-- Table rows will be injected by JavaScript -->
+      </tbody>
+    </table>
+  
+    <div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
+  </div>
+  
+  <script is:inline>
+    const tableData = [
+    { name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },
+    { name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Suvodip", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },
+    // Add more data here
+    ];
+
+    let currentPage = 1;
+    let rowsPerPage = 5;
+    let currentData = [...tableData];
+
+    function renderTable(data) {
+    const tableBody = document.getElementById("dataTable");
+    tableBody.innerHTML = "";
+    
+    const start = (currentPage - 1) * rowsPerPage;
+    const paginatedData = data.slice(start, start + rowsPerPage);
+    
+    paginatedData.forEach(row => {
+        const tr = document.createElement("tr");
+        tr.classList.add("hover:bg-gray-100");
+        tr.innerHTML = `
+        <td class="border p-2">${row.name}</td>
+        <td class="border p-2">${row.age}</td>
+        <td class="border p-2">${row.country}</td>
+        `;
+        tableBody.appendChild(tr);
+    });
+
+    renderPagination(data.length);
+    }
+
+    function sortTable(colIndex) {
+    currentData.sort((a, b) => {
+        const column = Object.keys(a)[colIndex];
+        return a[column] > b[column] ? 1 : -1;
+    });
+    renderTable(currentData);
+    }
+
+    function searchTable() {
+    const query = document.getElementById("searchInput").value.toLowerCase();
+    currentData = tableData.filter(row => {
+        return Object.values(row).some(val => val.toString().toLowerCase().includes(query));
+    });
+    renderTable(currentData);
+    }
+
+    function paginateTable() {
+    rowsPerPage = parseInt(document.getElementById("rowsPerPage").value);
+    currentPage = 1;
+    renderTable(currentData);
+    }
+
+    function renderPagination(totalRows) {
+    const pagination = document.getElementById("pagination");
+    pagination.innerHTML = "";
+    const totalPages = Math.ceil(totalRows / rowsPerPage);
+
+    for (let i = 1; i <= totalPages; i++) {
+        const button = document.createElement("button");
+        button.classList.add("p-2", "border", "border-gray-300", "rounded");
+        if (i === currentPage) {
+        button.classList.add("bg-blue-500");
+        button.classList.add("text-white");
+        }
+        button.textContent = i;
+        button.onclick = () => {
+        currentPage = i;
+        renderTable(currentData);
+        };
+        pagination.appendChild(button);
+    }
+    }
+
+    // CSV Export Function
+    function exportTableToCSV() {
+    const csvRows = [];
+    const headers = Object.keys(tableData[0]);
+    csvRows.push(headers.join(","));
+
+    currentData.forEach(row => {
+        const values = headers.map(header => row[header]);
+        csvRows.push(values.join(","));
+    });
+
+    const csvContent = csvRows.join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.setAttribute("hidden", "");
+    a.setAttribute("href", url);
+    a.setAttribute("download", "table_data.csv");
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    }
+
+    // Initialize table
+    paginateTable();
+
+
+
+  </script>
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@ -4,53 +4,45 @@ import Layout from '../../layouts/Layout.astro';
 <Layout title="Drag Game">
 	<main>
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
-            </div> -->
-          </div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
      </div>
      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
            </div> 
-          <div>
-          </div> -->
          </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
          </div>
-        <div id="lost" class="displayNone"></div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
          </div>
+        </div>
+      </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+    </div>
+		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+    // function showAnimation() {
+    //     const clipArt = document.querySelector('.clip-art');
+    //     clipArt.classList.add('show');
+    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,6 +55,7 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 8;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
@ -71,6 +64,9 @@ import Layout from '../../layouts/Layout.astro';
  let cancelIconWidth;
  let retryButton;
  let blockMatches;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;

  if(isMobile){
        topLogoWidth = 4.5;
@ -154,9 +150,30 @@ import Layout from '../../layouts/Layout.astro';
  var assetsList = {};
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
        if(isMobile){
          imageCustomWidth = "?width=80";
@ -254,8 +271,11 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -425,12 +445,12 @@ import Layout from '../../layouts/Layout.astro';
        // window.load

        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});

-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
        //   fill: '#fff',
@ -444,9 +464,22 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
+          // showAnimation();
        })
        let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }

+            })
+          }

        if(isMobile){
          blocks1Width1 = 180;
@ -599,14 +632,14 @@ import Layout from '../../layouts/Layout.astro';
          // console.log(match)
          if(match !== undefined){
            scoreTotal++;
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
            // console.log("Score Total", scoreTotal)
          }
          if(counter === 8){
+              // resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
              // console.log(counter)
              submitButton.setVisible(true);
              retryButton.setVisible(true);
-              resultView.setVisible(true);
+              // resultView.setVisible(true);
          }
        };
    }
@ -620,69 +653,35 @@ import Layout from '../../layouts/Layout.astro';
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
  * {
-margin: 0;
-padding: 0;
-cursor: -webkit-grab; cursor: grab;
-font-family: quicksand;
-}
-/* body {
-margin: 0;
-background: #020202;
-cursor: crosshair;
-} */
-/* canvas{display:block} */
-/* h1 {
-position: absolute;
-top: 20%;
-left: 50%;
-transform: translate(-50%, -50%);
-color: #fff;
-font-family: "Source Sans Pro";
-font-size: 5em;
-font-weight: 900;
-webkit-user-select: none;
-user-select: none;
-} */
-  #overlap {       
-    display: none;
      margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+      padding: 0;
+      cursor: -webkit-grab; cursor: grab;
+      font-family: quicksand;
    }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
+  /* Animation styles */
+  @keyframes slideInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(100%); /* Start below the viewport */
    }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
+    100% {
+      opacity: 1;
+      transform: translateY(0); /* End at its original position */
    }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
  }
-  .displayNone {
-    display: none;
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
  }
 </style>
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@ -1,56 +1,51 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+
+// let starNumberOfTime = localStorage.getItem('starValue');
+// console.log(starNumberOfTime);
+// const numberOfTimes = starNumberOfTime;
 ---
 <Layout title="Drag Game">
 	<main> 
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center ">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </div>        
+          </div>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+          </div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+          </div>
+        </div>
+      </div> 
+      <!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
      </div> -->
 		</div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
-        </div>
-      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
-          </div>
-          <div>
-          </div> -->
-        </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
-        </div>
-        <div id="lost" class="displayNone"></div>
-      </div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
  </div> 
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+  // function showAnimation() {
+  //     const clipArt = document.querySelector('.clip-art');
+  //     clipArt.classList.add('show');
+  // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,12 +58,16 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 4;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
  let resetIconWidth;
  let tickIconWidth;
  let cancelIconWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;

  if(isMobile){
      topLogoWidth = 4.5;
@ -153,31 +152,35 @@ import Layout from '../../layouts/Layout.astro';
      block: null,
    },
  ];
-  // const blockMatches = [
-  //   {
-  //     blockName: "blocks1",
-  //     targetName: "target1",
-  //   },
-  //   {
-  //     blockName: "blocks2",
-  //     targetName: "target2",
-  //   },
-  //   {
-  //     blockName: "blocks3",
-  //     targetName: "target3",
-  //   },
-  //   {
-  //     blockName: "blocks4",
-  //     targetName: "target4",
-  //   },
-  // ];
-  // console.log(blockMatches.blockName, blockMatches.targetName)
  var assetsList = {}
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+        console.log(data)
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        // console.log(audioData)
        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
@ -274,13 +277,18 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
        this.load.image("resetIcon", '/assets/svg/reset.svg');
        this.load.image("border", '/assets/svg/border.svg');
+        this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
+        this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
        this.load.spritesheet("target1", assetsList.right_image1,{
          frameWidth: 100,
          frameHeight: 100,
@ -348,7 +356,7 @@ import Layout from '../../layouts/Layout.astro';
              },
            ];
            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
            // Left Image Name
            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@ -403,20 +411,13 @@ import Layout from '../../layouts/Layout.astro';
        graphics.moveTo(x, y);
        graphics.lineTo(x + lineWidth, y);
        graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-        //   font: '600 30px Quicksand',
-        //   fill: '#fff',
-        //   backgroundColor: 'blue',
-        //   padding: { x: 20, y: 10 },
-        // }).setDepth(1);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);

        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
        this.add.image(displayW * 0.9-32, 170, "target1");
        // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
        this.add.image(displayW * 0.9-32, 340, "target2");
@ -425,6 +426,20 @@ import Layout from '../../layouts/Layout.astro';
        // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
        this.add.image(displayW * 0.9-32, 680, "target4");
        // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
+          if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
+          

        const blocks = [
          {
@ -458,28 +473,54 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
-        });
+          // showAnimation();
          
+          
+        });
+        let counter = 0;
        const droppedBlocks = [];
        const targetZoneBorders = [];
+
+        const isMatch = (blockName, targetName) => {
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          if (match !== undefined) {
+            scoreTotal++;
+            counter++;
+            return 'borderCorrect';
+          } else {
+            // console.log(`Score Total: ${scoreTotal}`); 
+            return 'borderWrong';
+          }
+        };
+
+        // Create target zones and their borders
        targetZones.forEach((targetZone) => {
          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, 'border');
+
          targetZoneBorders.push(targetBorder);
          targetZone.block = null; 
-        }),
+        });
+
+        // Add interactive blocks and handle drag events
+        blocks.forEach((block) => {
+          const newBlock = this.add
+            .sprite(block.x, block.y, block.textureKey, 1)
+            .setOrigin(0, 0)
+            .setInteractive({ draggable: true });
          
-        blocks.forEach((block, index) => {
-          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
          this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
+
          newBlock.on("drag", (pointer, dragX, dragY) => {
            newBlock.setScale(1.3);
            newBlock.x = dragX;
            newBlock.y = dragY;
          });
+
          newBlock.on("dragend", () => {
            newBlock.setScale(1.0);
            let droppedOnTargetZone = false;
+
            targetZones.forEach((targetZone, targetIndex) => {
              if (
                Phaser.Geom.Intersects.RectangleToRectangle(
@ -492,77 +533,39 @@ import Layout from '../../layouts/Layout.astro';
                  newBlock.disableInteractive();
                  targetZone.block = newBlock;
                  droppedBlocks.push(newBlock);
-                  if (isMatch(newBlock.texture.key, targetZone.name)) {
-                    // console.log(isMatch(newBlock.texture.key, targetZone.name))

-                    // if(isMatch(newBlock.texture.key, targetZone.name)){
-                    //   score++;
-                    //   // console.log(score);
-                    //   if(score === 4){
-                    //       const overlap = document.getElementById("overlap");
-                    //       overlap.style.display = "block";
-                    //       let finalDom;
-                    //   }
-                    //   console.log(score)
-                    //   if(score >= 2){
-                    //     console.log("Win")
-                    //   } else{
-                    //     console.log("Loose")
-                    //   }
-                    // }
-                    //counter++; // Increment the counter when a match is found
+                  // Check if the block matches the target and update the specific border
+                  const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
+                  targetZoneBorders[targetIndex].setTexture(borderCondition); // Update only the matched border
+
+                  if (counter === 4) {
+                    submitButton.setVisible(true); // Show submit button if required counter reached
                  }
                } else {
                  newBlock.setPosition(block.x, block.y);
                }
+
                droppedOnTargetZone = true;
-                targetZoneBorders[targetIndex].setVisible(true);
-                targetZoneBorders[targetIndex].setAlpha(1);
+                targetZoneBorders[targetIndex].setVisible(true); // Make the border visible
+                targetZoneBorders[targetIndex].setAlpha(1); // Set border to fully visible
                return;
              }
            });

            if (!droppedOnTargetZone) {
-              newBlock.setPosition(block.x, block.y);
+              newBlock.setPosition(block.x, block.y); // Reset position if not dropped on any target zone
            }
-            if (droppedBlocks.length === targetZones.length) 
-            {
-              displayResult(droppedBlocks);
+
+            if (droppedBlocks.length === targetZones.length) {
+              displayResult(droppedBlocks); // Display results when all blocks are dropped
            }
          });
        });
-        // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
-        //   font: '600 30px Quicksand',
-        //   fill: '#fff',
-        //   backgroundColor: 'blue',
-        //   padding: { x: 20, y: 10 },
-        // })
+
        retryButton.setInteractive().on('pointerdown', () => {
          window.location.reload();
        })
-        let score = 0;
-        let counter = 0;
-        const isMatch = (blockName, targetName) => {
-          if(isMatch){
-            counter++;
-            // console.log(counter)
-          }
-          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          // console.log(match)
-          if(match !== undefined){
-            scoreTotal++;
-            // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
-            resultView.setVisible(false);
-          }
-          if(counter === 4){
-                const overlap = document.getElementById("overlap");
-                overlap.style.display = "block";
-                // console.log(counter)
-                submitButton.setVisible(true);
-                resultView.setVisible(true);
-            }
-        };
+
        // const footerBorder = this.add.graphics();
        // const footerX = 0; const footerY = window.innerHeight / 1.07;
        // const footerLineWidth = window.innerWidth;
@ -607,71 +610,37 @@ import Layout from '../../layouts/Layout.astro';


 </script>
-<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
  * {
    margin: 0;
    padding: 0;
    cursor: -webkit-grab; cursor: grab;
    font-family: quicksand;
  }
-/* body {
-  margin: 0;
-  background: #020202;
-  cursor: crosshair;
-  } */
-  /* canvas{display:block} */
-  /* h1 {
-  position: absolute;
-  top: 20%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  font-family: "Source Sans Pro";
-  font-size: 5em;
-  font-weight: 900;
-  -webkit-user-select: none;
-  user-select: none;
-} */
-  #overlap {       
-    display: none;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+/* Animation styles */
+@keyframes slideInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(100%); /* Start below the viewport */
  }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
-  }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-  }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-  }
-  .displayNone {
-    display: none;
-  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+  100% {
+    opacity: 1;
+    transform: translateY(0); /* End at its original position */
  }
+}
+
+.clip-art-container {
+    overflow: hidden; /* Prevents overflow during the animation */
+}
+
+.clip-art {
+    transform: translateX(100%); /* Initially off-screen to the right */
+    opacity: 0; /* Initially hidden */
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+}
+
+.clip-art.show {
+    transform: translateX(0); /* Move the image into view */
+    opacity: 1; /* Fade in */
+}
 </style>
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@ -4,53 +4,45 @@ import Layout from '../../layouts/Layout.astro';
 <Layout title="Drag Game">
 	<main>
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
-            </div> -->
-          </div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
      </div>
      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
            </div> 
-          <div>
-          </div> -->
          </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
          </div>
-        <div id="lost" class="displayNone"></div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
          </div>
+        </div>
+      </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+    </div>
+		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+    // function showAnimation() {
+    //     const clipArt = document.querySelector('.clip-art');
+    //     clipArt.classList.add('show');
+    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,12 +55,16 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 4;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
  let resetIconWidth;
  let tickIconWidth;
  let cancelIconWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;

  if(isMobile){
        topLogoWidth = 4.5;
@ -158,9 +154,30 @@ import Layout from '../../layouts/Layout.astro';
  var assetsList = {}
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
@ -257,11 +274,14 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -341,7 +361,7 @@ import Layout from '../../layouts/Layout.astro';
              const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
              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);
            // 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, {font: `19px`}).setTint(0x7c4c23);
            // Left Image Name
            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@ -386,10 +406,10 @@ import Layout from '../../layouts/Layout.astro';
        //   }); 
        // };
        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
        this.add.image(displayW * 0.9-32, 170, "target1");
        // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
        this.add.image(displayW * 0.9-32, 340, "target2");
@ -399,6 +419,19 @@ import Layout from '../../layouts/Layout.astro';
        this.add.image(displayW * 0.9-32, 680, "target4");
        // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);

+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }

        const graphics = this.add.graphics();
        const x = 0; const y = 54;
@ -409,7 +442,7 @@ import Layout from '../../layouts/Layout.astro';
        graphics.moveTo(x, y);
        graphics.lineTo(x + lineWidth, y);
        graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);

        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
@ -424,6 +457,7 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
+          // showAnimation();
        })
       
        const blocks = [
@ -542,14 +576,10 @@ import Layout from '../../layouts/Layout.astro';
          if(match !== undefined){
            scoreTotal++;
            // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
          }
          if(counter === 4){
-              const overlap = document.getElementById("overlap");
-              overlap.style.display = "block";
              // console.log(counter)
              submitButton.setVisible(true);
-              resultView.setVisible(true);
          }
        };
    }
@ -585,64 +615,18 @@ import Layout from '../../layouts/Layout.astro';
    cursor: -webkit-grab; cursor: grab;
    font-family: quicksand;
  }
-/* body {
-margin: 0;
-background: #020202;
-cursor: crosshair;
-} */
-/* canvas{display:block} */
-/* h1 {
-position: absolute;
-top: 20%;
-left: 50%;
-transform: translate(-50%, -50%);
-color: #fff;
-font-family: "Source Sans Pro";
-font-size: 5em;
-font-weight: 900;
-webkit-user-select: none;
-user-select: none;
-} */
-  #overlap {       
-    display: none;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+  .clip-art-container {
+      overflow: hidden;
  }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
+
+  .clip-art {
+      transform: translateX(100%);
+      opacity: 0;
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-  }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-  }
-  .displayNone {
-    display: none;
-  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+
+  .clip-art.show {
+      transform: translateX(0);
+      opacity: 1;
  }
 </style>
--- a/src/pages/drag/testv3.astro
+++ b/src/pages/drag/testv3.astro
@ -305,7 +305,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        // this.load.image("bg", '/assets/bgwhite.jpg');
@ -365,7 +365,7 @@ import Layout from '../../layouts/Layout.astro';
              fill: '#7c4c23',
            }).setOrigin(0.5);
            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
            // Left Image Name
            this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
            this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);      
--- a/src/pages/drag/tmp.astro
+++ b/src/pages/drag/tmp.astro
@ -228,7 +228,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
--- a/src/pages/drag/tmp2.astro
+++ b/src/pages/drag/tmp2.astro
@ -237,7 +237,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@ -4,53 +4,44 @@ import Layout from '../../layouts/Layout.astro';
 <Layout title="Drag Game">
 	<main>
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center ">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </div>        
+          </div>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+          </div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+          </div>
+        </div>
+      </div>
+      <!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
      </div> -->
 		</div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
-        </div>
-      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
-          </div>
-          <div>
-          </div> -->
-        </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
-        </div>
-        <div id="lost" class="displayNone"></div>
-      </div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+        Worksheet saved successfully
    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+    // function showAnimation() {
+    //     const clipArt = document.querySelector('.clip-art');
+    //     clipArt.classList.add('show');
+    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,6 +54,7 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 4;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
@ -70,6 +62,10 @@ import Layout from '../../layouts/Layout.astro';
  let tickIconWidth;
  let cancelIconWidth;

+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
+
  if(isMobile){
        topLogoWidth = 4.5;
        muteIconWidth = 1.8;
@ -158,9 +154,31 @@ import Layout from '../../layouts/Layout.astro';
  var assetsList = {}
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
@ -257,11 +275,14 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -337,11 +358,11 @@ import Layout from '../../layouts/Layout.astro';
                  textSizeScale = 940
                }
                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
-                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);
+                const descrptText = this.add.text(screenCenterX, 110, 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, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
            // Left Image Name
            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@ -386,10 +407,10 @@ import Layout from '../../layouts/Layout.astro';
        //   }); 
        // };
        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
        this.add.image(displayW * 0.9-32, 170, "target1");
        // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
        this.add.image(displayW * 0.9-32, 340, "target2");
@ -398,7 +419,19 @@ import Layout from '../../layouts/Layout.astro';
        // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
        this.add.image(displayW * 0.9-32, 680, "target4");
        // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }

+            })
+          }

        const graphics = this.add.graphics();
        const x = 0; const y = 54;
@ -409,7 +442,7 @@ import Layout from '../../layouts/Layout.astro';
        graphics.moveTo(x, y);
        graphics.lineTo(x + lineWidth, y);
        graphics.strokePath();
-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
        //   fill: '#fff',
@ -423,6 +456,7 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
+          // showAnimation();
        })
       
        const blocks = [
@ -541,32 +575,15 @@ import Layout from '../../layouts/Layout.astro';
          if(match !== undefined){
            scoreTotal++;
            // console.log("Score Total", scoreTotal)
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
          }
          if(counter === 4){
              const overlap = document.getElementById("overlap");
-              overlap.style.display = "block";
              // console.log(counter)
              submitButton.setVisible(true);
-              resultView.setVisible(true);
          }
        };
    }
  }
-// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-//         font: '900 24px quicksand',
-//         fill: '#05b3a4',
-//         backgroundColor: '#7c4c23',
-//         padding: { x: 20, y: 10 },
-//         borderRadius: '15px', // Border radius
-//         shadow: {
-//             offsetX: 2, // X offset for the shadow
-//             offsetY: 2, // Y offset for the shadow
-//             color: '#000', // Shadow color
-//             blur: 5, // Shadow blur
-//             fill: true // Apply shadow to fill (background color)
-//         }
-//       });
  const displayResult = (droppedBlocks) => {
    // const overlap = document.getElementById("overlap");
    // overlap.style.display = "block";
@ -584,64 +601,30 @@ import Layout from '../../layouts/Layout.astro';
    cursor: -webkit-grab; cursor: grab;
    font-family: quicksand;
  }
-/* body {
-margin: 0;
-background: #020202;
-cursor: crosshair;
-} */
-/* canvas{display:block} */
-/* h1 {
-position: absolute;
-top: 20%;
-left: 50%;
-transform: translate(-50%, -50%);
-color: #fff;
-font-family: "Source Sans Pro";
-font-size: 5em;
-font-weight: 900;
-webkit-user-select: none;
-user-select: none;
-} */
-  #overlap {       
-    display: none;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+  /* Animation styles */
+  @keyframes slideInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(100%); /* Start below the viewport */
    }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
+    100% {
+      opacity: 1;
+      transform: translateY(0); /* End at its original position */
    }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
  }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
  }
-  .displayNone {
-    display: none;
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
  }
 </style>
--- a/src/pages/drag/v20.astro
+++ b/src/pages/drag/v20.astro
@ -232,7 +232,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        // this.load.image("bg", '/assets/bgwhite.jpg');
        // this.load.image("target1", assetsList.right_image1);
@ -309,7 +309,7 @@ import Layout from '../../layouts/Layout.astro';
              fill: '#7c4c23',
            }).setOrigin(0.5);
            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
            // Left Image Name
            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@ -4,53 +4,45 @@ import Layout from '../../layouts/Layout.astro';
 <Layout title="Drag Game">
  <main>
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
-            </div> -->
-          </div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
      </div>
      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
            </div> 
-          <div>
-          </div> -->
          </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
          </div>
-        <div id="lost" class="displayNone"></div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
          </div>
+        </div>
+      </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+    </div>
+		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+    // function showAnimation() {
+    //     const clipArt = document.querySelector('.clip-art');
+    //     clipArt.classList.add('show');
+    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,6 +55,7 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 8;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
@ -73,6 +66,9 @@ import Layout from '../../layouts/Layout.astro';
  let blockMatches;
  let retryButtonWidth;
  let leftTargetZoneW;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;

  if(isMobile){
        topLogoWidth = 4.5;
@ -190,9 +186,30 @@ import Layout from '../../layouts/Layout.astro';
  var assetsList = {};
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
@ -288,13 +305,18 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
        this.load.image("resetIcon", '/assets/svg/reset.svg');
+        this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
+        this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
        
        // this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/svg/border.svg');
@ -434,12 +456,25 @@ import Layout from '../../layouts/Layout.astro';
        graphics.strokePath();

        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});

-        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
        //   fill: '#fff',
@ -451,6 +486,7 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
+          // showAnimation();
        })

        
@ -505,6 +541,23 @@ import Layout from '../../layouts/Layout.astro';
            },
        ];
        // console.log('test blocks',blocks[0])
+
+        let score = 0;
+        let counter = 0;
+
+        const isMatch = (blockName, targetName) => {
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          if (match !== undefined) {
+            scoreTotal++;
+            counter++;
+            console.log(`Score Total: ${scoreTotal}`); 
+            return 'borderCorrect';
+          } else {
+            // console.log(`Score Total: ${scoreTotal}`); 
+            return 'borderWrong';
+          }
+        };
+        
        const droppedBlocks = [];
        const targetZoneBorders = [];
        targetZones.forEach((targetZone, index) => {
@ -525,9 +578,10 @@ import Layout from '../../layouts/Layout.astro';
          newBlock.on("dragend", () => {
            newBlock.setScale(1.0);
            let droppedOnTargetZone = false;
+            
            targetZones.forEach((targetZone, targetIndex) => {
              if (
-                Phaser.Geom .Intersects.RectangleToRectangle(
+                Phaser.Geom.Intersects.RectangleToRectangle(
                  newBlock.getBounds(),
                  new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
                )
@ -537,8 +591,10 @@ import Layout from '../../layouts/Layout.astro';
                  newBlock.disableInteractive();
                  targetZone.block = newBlock;
                  droppedBlocks.push(newBlock);
-                  if (isMatch(newBlock.texture.key, targetZone.name)) {
-                  }
+                  
+                  // Call isMatch only once
+                  const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
+                  targetZoneBorders[targetIndex].setTexture(borderCondition);
                } else {
                  newBlock.setPosition(block.x, block.y);
                }
@ -552,40 +608,19 @@ import Layout from '../../layouts/Layout.astro';
            if (!droppedOnTargetZone) {
              newBlock.setPosition(block.x, block.y);
            }
-            if (droppedBlocks.length === targetZones.length) 
-            {
+
+            if (droppedBlocks.length === targetZones.length) {
              displayResult(droppedBlocks);
            }
          });
+
        });
        // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
        retryButton.setInteractive().on('pointerdown', () => {
          window.location.reload();
        })
        // retryButton.setVisible(false);
-        let score = 0;
-        let counter = 0;

-        const isMatch = (blockName, targetName) => {
-        if(isMatch){
-          counter++;
-          // console.log(counter)
-        }
-        //resultView scoreTotal
-        const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        // console.log(match)
-        if(match){
-          scoreTotal++;
-          resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-          // console.log(scoreTotal)
-        }
-        if(counter === 8){
-            // console.log(counter)
-            submitButton.setVisible(true);
-            retryButton.setVisible(true);
-            resultView.setVisible(true);
-        }
-        };
    }
  }
  const displayResult = (droppedBlocks) => {
@ -597,69 +632,35 @@ import Layout from '../../layouts/Layout.astro';
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
  * {
-margin: 0;
-padding: 0;
-cursor: -webkit-grab; cursor: grab;
-font-family: quicksand;
-}
-/* body {
-margin: 0;
-background: #020202;
-cursor: crosshair;
-} */
-/* canvas{display:block} */
-/* h1 {
-position: absolute;
-top: 20%;
-left: 50%;
-transform: translate(-50%, -50%);
-color: #fff;
-font-family: "Source Sans Pro";
-font-size: 5em;
-font-weight: 900;
-webkit-user-select: none;
-user-select: none;
-} */
-  #overlap {       
-    display: none;
    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
  }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
+  /* Animation styles */
+  @keyframes slideInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(100%); /* Start below the viewport */
    }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
+    100% {
+      opacity: 1;
+      transform: translateY(0); /* End at its original position */
    }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
  }
-  .displayNone {
-    display: none;
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
  }
 </style>
--- a/src/pages/drag/v30.astro
+++ b/src/pages/drag/v30.astro
@ -259,7 +259,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@ -4,53 +4,45 @@ import Layout from '../../layouts/Layout.astro';
 <Layout title="Drag Game">
 	<main>
 		<div>
-      <div>
-        
-        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
-        <div class="flex justify-center">
-          <div class="container mx-auto px-4">
-            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
-              <img src="/assets/top_match.jpg" alt="" />
-              <img src="/assets/top_logo.jpg" alt="" />
-            </div> -->
-          </div>
-          <!-- <h2>{data.name}</h2> -->
-          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
      </div>
      </div>
-      <div id="overlap">
-        <!-- <div id="result"></div> -->
-        <div id="verryGood" class="displayNone "> 
-          <!-- <p>Congratulations!</p>
-          <p>You win the Game!</p> -->
-          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
-          <!-- <div class="flex flex-row">
-            <a href="" >
-              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-            </a>
-            <a href="" >
-              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-            </a>
+      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+          <div class="flex flex-row space-x-4 items-center justify-center">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
            </div> 
-          <div>
-          </div> -->
          </div>
-        <div id="good" class="displayNone">
-          <!-- <p>Oops!</p>
-          <p>You Lost the Game!</p>
-          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
-          <a href="" >
-            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
-          </a> -->
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
          </div>
-        <div id="lost" class="displayNone"></div>
+          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
          </div>
+        </div>
+      </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+    </div>
+		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
    </div>  
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
+    // function showAnimation() {
+    //     const clipArt = document.querySelector('.clip-art');
+    //     clipArt.classList.add('show');
+    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
@ -63,6 +55,7 @@ import Layout from '../../layouts/Layout.astro';
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
+  let maxScore = 8;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
@ -74,6 +67,9 @@ import Layout from '../../layouts/Layout.astro';
  let leftTargetZoneW;
  let rightTargetZoneW;
  let retryButtonWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;

  if(isMobile){
        topLogoWidth = 4.5;
@ -157,9 +153,30 @@ import Layout from '../../layouts/Layout.astro';
  var assetsList = {};
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
        if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
@ -253,8 +270,11 @@ import Layout from '../../layouts/Layout.astro';
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        // this.load.image("tick", '/assets/tick.png');

        this.load.image("tickIcon", '/assets/svg/tick2.svg');
@ -264,8 +284,6 @@ import Layout from '../../layouts/Layout.astro';

        // this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
-
-
          this.load.spritesheet("blocks1", assetsList.element5,{
          frameWidth: 100,
          frameHeight: 100,
@ -420,10 +438,23 @@ import Layout from '../../layouts/Layout.astro';
        graphics.strokePath();
        
        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
        //   fill: '#fff',
@ -435,6 +466,7 @@ import Layout from '../../layouts/Layout.astro';
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
+          // showAnimation();
        })
        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);

@ -587,14 +619,12 @@ import Layout from '../../layouts/Layout.astro';
          // console.log(match)
          if(match !== undefined){
            scoreTotal++;
-            resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
            // console.log("Score Total", scoreTotal)
          }
          if(counter === 8){
              // console.log(counter)
              submitButton.setVisible(true);
              retryButton.setVisible(true);
-              resultView.setVisible(true);
          }
        };
    }
@ -608,69 +638,35 @@ import Layout from '../../layouts/Layout.astro';
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
  * {
-margin: 0;
-padding: 0;
-cursor: -webkit-grab; cursor: grab;
-font-family: quicksand;
-}
-/* body {
-margin: 0;
-background: #020202;
-cursor: crosshair;
-} */
-/* canvas{display:block} */
-/* h1 {
-position: absolute;
-top: 20%;
-left: 50%;
-transform: translate(-50%, -50%);
-color: #fff;
-font-family: "Source Sans Pro";
-font-size: 5em;
-font-weight: 900;
-webkit-user-select: none;
-user-select: none;
-} */
-  #overlap {       
-    display: none;
    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #7c4c23;
-    text-align: center;
-    margin-top: 7%;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
  }
-  #overlap .verryGood{
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
-    height: fit-content;
+  /* Animation styles */
+  @keyframes slideInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(100%); /* Start below the viewport */
    }
-  #overlap .good{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
+    100% {
+      opacity: 1;
+      transform: translateY(0); /* End at its original position */
    }
-  #overlap .lost{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    place-items: center;
-    font-size: 40px;
-    font-weight: bolder;
  }
-  .displayNone {
-    display: none;
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
  }
-  #result {
-    font-size: 30px;
-    font-weight: bold;
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
  }
 </style>
--- a/src/pages/drag/v40.astro
+++ b/src/pages/drag/v40.astro
@ -228,7 +228,7 @@ import Layout from '../../layouts/Layout.astro';
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
-        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/squar.png');
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@ -3,14 +3,140 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
    <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>   
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div>
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    updateSlide();
+    
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

@ -31,25 +157,35 @@ import Layout from '../../layouts/Layout.astro';
    let formattedDateTime;
    let shortUniqueID;
    let scoreTotal = 0;
+    let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;

    if(isMobile){
        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
    }
    if(isMobile){
        submitWidth = 250;
@ -89,11 +225,13 @@ import Layout from '../../layouts/Layout.astro';
    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
    // console.log(shortUniqueID);

-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        // console.log(data)
        // colorList = data.colors;
    const {image} = data;
@ -133,8 +271,11 @@ import Layout from '../../layouts/Layout.astro';
    let colorList;

    function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image('outline', assetsList.image);
-        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -142,6 +283,7 @@ import Layout from '../../layouts/Layout.astro';
        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
    }

    function create() {
@ -175,16 +317,35 @@ import Layout from '../../layouts/Layout.astro';
            borderBottom.lineTo(x + lineWidth, y);
            borderBottom.strokePath();

+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");


            retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+                graphics.clear();
            });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                if(isPlaying === false){
+                    instructionAudio.play()
+                    isPlaying = true
+                } else if(isPlaying === true) {
+                    instructionAudio.stop();
+                    isPlaying = false
+                }
+
+                })
+            }
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
            // fill: '#fff',
@ -193,8 +354,18 @@ import Layout from '../../layouts/Layout.astro';
            // });
            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
            });

            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
@ -216,7 +387,12 @@ import Layout from '../../layouts/Layout.astro';
                outlineImage.setDepth(1).setScale(0.5);   
            }  

+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
            graphics = this.add.graphics();
+            graphics.setMask(mask);
            const colorContainer = document.createElement('div');
            colorContainer.style.position = 'absolute';
            colorContainer.style.top = '13%';
@ -229,7 +405,16 @@ import Layout from '../../layouts/Layout.astro';
            }
            if(isMobile){
                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
            }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 

            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
            if(!isMobile){
@ -245,6 +430,14 @@ import Layout from '../../layouts/Layout.astro';


            // Create the color picker
+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+
            const colorPicker = document.createElement('input');
            colorPicker.type = 'color';
            colorPicker.value = selectedColor;
@ -271,7 +464,10 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
            // const colors = data.colors;
            // var colors = colorList;
            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -499,20 +695,19 @@ import Layout from '../../layouts/Layout.astro';
            // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
            document.body.appendChild(buttonsContainer);
            // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+
            // clearButton.style.border = '3px solid blue';
            // clearButton.style.color = 'blue';
            // clearButton.style.width = 'fit-content';
            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
+            // if(isMobile){
+            //     clearButton.style.padding = '2px 8px';
+            //     clearButton.style.display = 'none';
+            //     buttonsContainer.style.top = '9.5%';
+            //     buttonsContainer.style.marginLeft = '30px';
+            // } else {
+            //     clearButton.style.padding = '5px 10px';
+            // }        
            // clearButton.style.fontWeight = 'bold';
            // clearButton.style.borderRadius = '20%';
            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -561,7 +756,7 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
            // colorPicker.appendChild(clearButton);
            // buttonsContainer.appendChild(eraserButton).setVisible;
            
@ -655,10 +850,17 @@ import Layout from '../../layouts/Layout.astro';
        submitButton.setVisible(false);
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
        drawingZone.renderer.snapshot((image) => {
            submitButton.setVisible(true);
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
            image.style.width = '160px';
            image.style.height = '120px';
            image.style.paddingLeft = '2px';
@ -790,12 +992,49 @@ import Layout from '../../layouts/Layout.astro';
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
        customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
    }

    // function update() {
@ -835,5 +1074,30 @@ import Layout from '../../layouts/Layout.astro';
    .clear-button {
        background-color: blue;
    }
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* End at its original position */
+    }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@ -3,14 +3,139 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
    <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>   
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+           
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

@ -31,24 +156,35 @@ import Layout from '../../layouts/Layout.astro';
    let formattedDateTime;
    let shortUniqueID;
    let scoreTotal = 0;
+    let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
    if(isMobile){
        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
    }
    
    if(isMobile){
@ -89,11 +225,13 @@ import Layout from '../../layouts/Layout.astro';
    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
    // console.log(shortUniqueID);

-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        // console.log(data)
        // colorList = data.colors;
    const {image} = data;
@ -133,8 +271,11 @@ import Layout from '../../layouts/Layout.astro';
    let colorList;

    function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image('outline', assetsList.image);
-        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -142,6 +283,7 @@ import Layout from '../../layouts/Layout.astro';
        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
    }

    function create() {
@ -165,6 +307,8 @@ import Layout from '../../layouts/Layout.astro';
            });
            // window.load

+
+
            const borderBottom = this.add.graphics();
            const x = 0; const y = 54;
            const lineWidth = window.innerWidth;
@ -175,16 +319,35 @@ import Layout from '../../layouts/Layout.astro';
            borderBottom.lineTo(x + lineWidth, y);
            borderBottom.strokePath();

-            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
-            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");

+            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                if(isPlaying === false){
+                    instructionAudio.play()
+                    isPlaying = true
+                } else if(isPlaying === true) {
+                    instructionAudio.stop();
+                    isPlaying = false
+                }
+
+                })
+            }

            retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+                graphics.clear();
            });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);

            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
@ -194,8 +357,19 @@ import Layout from '../../layouts/Layout.astro';
            // });
            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
+
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
            });

            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
@ -225,7 +399,12 @@ import Layout from '../../layouts/Layout.astro';
            // } else{
            //     outlineImage.setDepth(1).setScale(0.65);   
            // }  
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
            graphics = this.add.graphics();
+            graphics.setMask(mask);
            const colorContainer = document.createElement('div');
            colorContainer.style.position = 'absolute';
            colorContainer.style.top = '13%';
@ -238,7 +417,16 @@ import Layout from '../../layouts/Layout.astro';
            }
            if(isMobile){
                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row';
            }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 

            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
            if(!isMobile){
@ -252,6 +440,14 @@ import Layout from '../../layouts/Layout.astro';
                }
            });

+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+

            // Create the color picker
            const colorPicker = document.createElement('input');
@ -280,7 +476,9 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
            // const colors = data.colors;
            // var colors = colorList;
            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -507,21 +705,6 @@ import Layout from '../../layouts/Layout.astro';
            buttonsContainer.style.left = '20px';
            // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
            document.body.appendChild(buttonsContainer);       
-            // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
            // clearButton.style.fontWeight = 'bold';
            // clearButton.style.borderRadius = '20%';
            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -570,7 +753,7 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
            // colorPicker.appendChild(clearButton);
            // buttonsContainer.appendChild(eraserButton).setVisible;
            
@ -664,10 +847,18 @@ import Layout from '../../layouts/Layout.astro';
        submitButton.setVisible(false);
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
        drawingZone.renderer.snapshot((image) => {
            submitButton.setVisible(true);
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
+
            image.style.width = '160px';
            image.style.height = '120px';
            image.style.paddingLeft = '2px';
@ -799,50 +990,76 @@ import Layout from '../../layouts/Layout.astro';
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
        customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
+        customCursor.moveTo(0, - cursorSize + 3);  
+        customCursor.lineTo(0, cursorSize - 3);   
+        
+        customCursor.moveTo(- cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize - 3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, - cursorSize + 3);  
+            customCursor.lineTo(0, cursorSize - 3);   
+            
+            customCursor.moveTo(- cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize - 3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, - cursorSize + 3);  
+            customCursor.lineTo(0, cursorSize - 3);   
+            
+            customCursor.moveTo(- cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize - 3, 0);   
+            customCursor.strokePath();  
+        }
    }
-
-    // function update() {
-    //     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 cursorSize = brushSize * cursorSizeMultiplier;
-    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
-
-    //     // Assuming 'this' refers to your Phaser.Scene instance
-    //     if (!this.customCursor) {
-    //         // Create the custom cursor sprite
-    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
-    //         this.customCursor.setOrigin(0.3, 0.8);
-    //     }
-
-    //     // Set the tint or fill color dynamically based on the selectedColor
-    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
-    //     this.customCursor.setTint(color);
-
-    //     // Resize the cursor
-    //     this.customCursor.setScale( cursorScale);
-
-    //     // Position the cursor at the current mouse pointer coordinates
-    //     this.customCursor.x = this.input.x;
-    //     this.customCursor.y = this.input.y;
-    // }
 </script>
 <style>
-    .clear-button {
-        background-color: blue;
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* End at its original position */
+    }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
    }
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
--- a/src/pages/drawing/game_drawing_jpg.astro
+++ b/src/pages/drawing/game_drawing_jpg.astro
--- a/src/pages/drawing/game_drawing_png.astro
+++ b/src/pages/drawing/game_drawing_png.astro
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@ -3,14 +3,156 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
    <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>   
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+           
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ];
+    // starClipart
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                // console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    // const jsonData = galleryData;
+    // const jsonData = [
+    //     {
+    //         "image": "/assets/back.jpeg"
+    //     },
+    //     {
+    //         "image": "/assets/background.jpg"
+    //     },
+    //     {
+    //         "image": "/assets/backgroundImage.png"
+    //     },
+    //     {
+    //         "image": "/assets/beanieImage.png"
+    //     }
+    // ];
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
+
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;

@ -22,12 +164,14 @@ import Layout from '../../layouts/Layout.astro';
    };
    let topLogoWidth;
    let muteIconWidth;
+    let galleryIconWidth;
    let resetIconWidth;
    let tickIconWidth;
    let cancelIconWidth;
    var assetsList = {}
    var snapshotButton;
    let submitButton;
+    let galleryButton;
    let formattedDateTime;
    let shortUniqueID;
    let scoreTotal = 0;
@ -35,24 +179,32 @@ import Layout from '../../layouts/Layout.astro';
    let noticeHeight;
    let muteIcon;
    let retryButton;
+    let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
    if(isMobile){
        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
    }
    
    if(isMobile){
@ -93,11 +245,13 @@ import Layout from '../../layouts/Layout.astro';
    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
    // console.log(shortUniqueID);

-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        // console.log(data)
        // colorList = data.colors;
    const {image} = data;
@ -138,12 +292,16 @@ import Layout from '../../layouts/Layout.astro';
    let colorList;

    function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image('outline', assetsList.image);
-        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
        this.load.image("resetIcon", '/assets/svg/reset.svg');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('colorButton', '/assets/color_button.png');
@ -184,12 +342,31 @@ import Layout from '../../layouts/Layout.astro';
            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");

+            if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            muteIcon.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }

            retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+                // window.location.reload();
+                graphics.clear();
            });
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+
+
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+            // submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
            // fill: '#fff',
@ -198,8 +375,19 @@ import Layout from '../../layouts/Layout.astro';
            // });
            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
+
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
            });

            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
@ -218,8 +406,16 @@ import Layout from '../../layouts/Layout.astro';
            } else{
                outlineImage.setDepth(1).setScale(0.65);   
            }
+            
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+
            graphics = this.add.graphics();
+            graphics.setMask(mask);
            const colorContainer = document.createElement('div');
+            colorContainer.style.zIndex = '1';
            colorContainer.style.position = 'absolute';
            colorContainer.style.top = '13%';
            colorContainer.style.left = '10px';
@ -231,7 +427,23 @@ import Layout from '../../layouts/Layout.astro';
            }
            if(isMobile){
                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
+                
            }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
+
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            colorContainer.appendChild(colorEraserCont);

            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
            if(!isMobile){
@ -273,7 +485,7 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            
            // const colors = data.colors;
            // var colors = colorList;
            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -321,7 +533,7 @@ import Layout from '../../layouts/Layout.astro';
                    button.style.height = `45px`;
                }
                button.innerHTML = `
-                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <svg width="125" height="25" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
                                    <g style="mix-blend-mode:multiply">
                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
@ -488,8 +700,11 @@ import Layout from '../../layouts/Layout.astro';
            buttonsContainer.style.position = 'absolute';
            buttonsContainer.style.display = 'flex'; 
            buttonsContainer.style.flexDirection = 'row';
-            buttonsContainer.style.top = '0%'; 
-            buttonsContainer.style.marginTop = '30px';
+            buttonsContainer.style.top = '50%'; 
+            // buttonsContainer.style.transform = 'translate(0, -50%)';
+            // buttonsContainer.style.marginTop = '30px';
+
+            
            if(!isMobile){
                // buttonsContainer.style.position = 'fixed';
                buttonsContainer.style.top = '10%';
@ -522,16 +737,19 @@ import Layout from '../../layouts/Layout.astro';
                clearDrawing();
            }); 
            colorViewButton.setInteractive().on('pointerdown', () => {
-                if(clearButton.style.display === 'block') {
-                    clearButton.style.display = 'none';
+                if(eraserButton.style.display === 'block') {
+                    eraserButton.style.display = 'none';
                }else{
-                    clearButton.style.display = 'block';
+                    eraserButton.style.display = 'block';
                }
            })
            // Create the Eraser button
            const eraserButton = document.createElement('button');
+            if(isMobile){
+                eraserButton.style.display = 'none';
+            }
            // eraserButton.textContent = 'Eraser';
-            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px">   </i>';
+            eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
            eraserButton.style.color = 'blue';
            // eraserButton.style.border = '3px solid blue';
            // eraserButton.style.color = 'white';
@ -542,8 +760,8 @@ import Layout from '../../layouts/Layout.astro';
            if(isMobile){
                eraserButton.style.padding = '4px 4px';
            }else{
-                eraserButton.style.padding = '5px 5px';
-                eraserButton.style.marginTop = '15px';
+                eraserButton.style.padding = '5px 9px';
+                eraserButton.style.top = '50%';
                eraserButton.style.marginBottom = '15px';
            }
            eraserButton.style.fontWeight = 'bold';
@ -551,22 +769,27 @@ import Layout from '../../layouts/Layout.astro';
            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
            eraserButton.addEventListener('click', () => {
            isErasing = !isErasing;
+            erase = false;
                if (isErasing) {
-                    // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
-                    eraserButton.style.color = 'red';
-                    eraserButton.style.border = '3px solid red';
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
                } else {
                    // Return to drawing mode
                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
                    eraserButton.style.color = 'blue';
                    eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
                }
            });
            // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
-            // colorPicker.appendChild(clearButton);
-            // buttonsContainer.appendChild(eraserButton).setVisible;
+            // colorPicker.appendChild(eraserButton);
+            // colorPicker.appendChild(eraserButton);
+            // colorPicker.appendChild(eraserButton);

+            colorEraserCont.append(colorPicker);
+            colorEraserCont.append(eraserButton);
+            // colorContainer.appendChild(eraserButton);
            const sliderContainer = document.createElement('div');
            sliderContainer.style.backgroundColor = '#fff';

@ -659,6 +882,7 @@ import Layout from '../../layouts/Layout.astro';
        customCursor.setVisible(false);
        muteIcon.setVisible(false);
        retryButton.setVisible(false);
+        galleryButton.setVisible(false);


        drawingZone.renderer.snapshot((image) => {
@ -667,6 +891,7 @@ import Layout from '../../layouts/Layout.astro';
            customCursor.setVisible(true);
            muteIcon.setVisible(true);
            retryButton.setVisible(true);
+            galleryButton.setVisible(true);

            image.style.width = '160px';
            image.style.height = '120px';
@ -683,85 +908,6 @@ import Layout from '../../layouts/Layout.astro';
        });
    }

-    // const url = window.location.href;
-    // const gameName = url.split('/');
-    // const gameType = gameName[3].split('?id=');        
-    // function submitUserData(drawingZone) {
-    //     let imageCode;
-    //     // console.log(drawingZone);
-    //     drawingZone.renderer.snapshot((image) => {
-    //         submitButton.setVisible(true);
-    //         snapshotButton.setVisible(true);
-    //         customCursor.setVisible(true);
-    //         image.style.width = '160px';
-    //         image.style.height = '120px';
-    //         image.style.paddingLeft = '2px';
-    //         document.body.appendChild(image);
-    //         // Download the snapshot as an image
-    //         const link = document.createElement('a');
-    //         link.href = image.src;
-    //         link.download = 'my_drawing.png';
-    //         link.click();
-    //         document.body.removeChild(image);
-    //         imageCode = image.src;
-            
-
-    //         let userData = {
-    //         'userID': 'drawing@beanstalkedu.com',
-    //         'gameType': gameType[0],
-    //         'gameID': gameType[1],
-    //         'screenShot': imageCode
-    //         // 'starts': formattedDateTime,
-    //         // 'game_start' : gameStartTime,
-    //         };
-    //         console.log(userData);
-
-    //         fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
-    //         method: 'POST',
-    //         headers: {
-    //             'Content-Type' : 'application/json'
-    //         },
-    //         body: JSON.stringify(userData)
-    //         })
-    //         .then(response => {
-    //             if(response.ok){
-    //             console.log('Data Saved', response)
-    //             } else{
-    //             // console.log('Something Wrong', response)
-    //             }
-    //         })
-    //         .catch(error => {
-    //             console.error('An error occured', error)
-    //         }); 
-                
-    //             // Clear the drawing
-    //             // graphics.clear();
-    //         });        
-    // };
-    // function captureSnapshot(drawingZone) {
-    //     submitButton.setVisible(false);
-    //     // snapNotice.setVisible(true);
-    //     snapshotButton.setVisible(false);
-    //     customCursor.setVisible(false);
-    //     drawingZone.renderer.snapshot((image) => {
-    //         submitButton.setVisible(true);
-    //         snapshotButton.setVisible(true);
-    //         customCursor.setVisible(true);
-    //         image.style.width = '160px';
-    //         image.style.height = '120px';
-    //         image.style.paddingLeft = '2px';
-    //         document.body.appendChild(image);
-    //         // Download the snapshot as an image
-    //         const link = document.createElement('a');
-    //         link.href = image.src;
-    //         link.download = 'my_drawing.png';
-    //         link.click();
-    //         document.body.removeChild(image);
-            
-    //         // Clear the drawing
-    //         // graphics.clear();
-    //     });
-    // }
    function startDrawing(x, y) {
        if (!isErasing) {
            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
@ -799,50 +945,90 @@ import Layout from '../../layouts/Layout.astro';
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
        customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
    }
-
-    // function update() {
-    //     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 cursorSize = brushSize * cursorSizeMultiplier;
-    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
-
-    //     // Assuming 'this' refers to your Phaser.Scene instance
-    //     if (!this.customCursor) {
-    //         // Create the custom cursor sprite
-    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
-    //         this.customCursor.setOrigin(0.3, 0.8);
-    //     }
-
-    //     // Set the tint or fill color dynamically based on the selectedColor
-    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
-    //     this.customCursor.setTint(color);
-
-    //     // Resize the cursor
-    //     this.customCursor.setScale( cursorScale);
-
-    //     // Position the cursor at the current mouse pointer coordinates
-    //     this.customCursor.x = this.input.x;
-    //     this.customCursor.y = this.input.y;
-    // }
 </script>
 <style>
    .clear-button {
        background-color: blue;
    }
+    /* Animation styles */
+    @keyframes slideInUp {
+        0% {
+            opacity: 0;
+            transform: translateY(100%); /* Start below the viewport */
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0); /* End at its original position */
+        }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        opacity: 0; /* Initially transparent */
+        transform: translateX(100%); /* Start off-screen to the right */
+        transition: transform 1s ease, opacity 1s ease; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        opacity: 1; /* Fade in */
+        transform: translateX(0); /* Slide in from the right */
+    }
+
+
+
+
+    .slide{
+        display: none;
+    }
+    .active{
+        display: block;
+    }
+
 </style>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
--- a/src/pages/drawing/test.astro
+++ b/src/pages/drawing/test.astro
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@ -3,14 +3,139 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
    <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>   
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+           
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
    // const drawingZone = {
@ -39,25 +164,35 @@ import Layout from '../../layouts/Layout.astro';
    let image2Bottom;
    let noticeWidth;
    let noticeHeight;
+    let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;

    if(isMobile){
        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
    }
    if(isMobile){
        submitWidth = 250;
@ -91,6 +226,7 @@ import Layout from '../../layouts/Layout.astro';
        image2Bottom = 0;
    }
    
+    
    gameResult = [];
    window.onload = function() {
        currentDate = new Date();
@ -107,11 +243,13 @@ import Layout from '../../layouts/Layout.astro';
        return result;
    }

-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        colorList = data.colors;
        defaultColor = colorList[0];
    const {image1, image2} = data;
@ -152,9 +290,12 @@ import Layout from '../../layouts/Layout.astro';
    let colorList;

    function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image('image1', assetsList.image1);
        this.load.image('image2', assetsList.image2);
-        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -163,6 +304,7 @@ import Layout from '../../layouts/Layout.astro';
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('waxTexture', '/assets/texture.png');
        this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
    }

    function create() {
@ -229,68 +371,107 @@ import Layout from '../../layouts/Layout.astro';
            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');

+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            retryButton.setInteractive().on('pointerdown', ()=>{
-                window.location.reload();
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                    if(isPlaying === false){
+                        instructionAudio.play()
+                        isPlaying = true
+                    } else if(isPlaying === true) {
+                        instructionAudio.stop();
+                        isPlaying = false
+                    }
+
                })
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+            }
+            retryButton.setInteractive().on('pointerdown', ()=>{
+                graphics.clear();
+            })
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
            // fill: '#fff',
            // backgroundColor: 'blue',
            // padding: { x: 20, y: 10 },
            // });
+            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // windowLoad();
-            // submitUserData();
                submitUserData(this);
-            })
-            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
-            if(!isMobile){
-                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-            } else {
-                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
-            }
-            
-            if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
-            }else if(isTab){
-                outlineImage1.setDepth(1).setScale(0.34);
-                outlineImage2.setDepth(1).setScale(0.34);
-            } else{
-                outlineImage1.setDepth(1).setScale(0.60);
-                outlineImage2.setDepth(1).setScale(0.60);   
-            }
-            graphics = this.add.graphics();
-            const colorContainer = document.createElement('div');
-            colorContainer.style.position = 'absolute';
-            colorContainer.style.top = '13%';
-            if(isMobile){
-                colorContainer.style.marginTop = '13%';
-            }
-            colorContainer.style.left = '10px';
-            colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
-            if(!isMobile){
-                colorContainer.style.top = '25%';
-                colorContainer.style.flexDirection = 'column'; 
-            }
-
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                parentMainContainer.classList.remove('hidden');
                if(isMobile){
                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
+            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            
+            if(isMobile){
+                outlineImage1.setDepth(-5).setScale(0.28);
+                outlineImage2.setDepth(-5).setScale(0.28);
+            }else if(isTab){
+                outlineImage1.setDepth(-5).setScale(0.34);
+                outlineImage2.setDepth(-5).setScale(0.34);
+            } else{
+                outlineImage1.setDepth(-5).setScale(0.60);
+                outlineImage2.setDepth(-5).setScale(0.60);   
            }

-            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+            graphics = this.add.graphics();
+            graphics.setMask(mask);
+            const colorContainer = document.createElement('div');
+            colorContainer.style.zIndex = '1';
+            colorContainer.style.position = 'absolute';
+            colorContainer.style.top = '13%';
+            colorContainer.style.left = '10px';
+            colorContainer.style.display = 'flex';
+            colorContainer.style.marginBottom = '0';
            if(!isMobile){
-                colorViewButton.setVisible(false);
+                colorContainer.style.top = '10%';
+                colorContainer.style.flexDirection = 'column'; 
            }
+            if(isMobile){
+                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
+                
+            }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
+
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            colorContainer.appendChild(colorEraserCont);
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            !isMobile ? colorViewButton.setVisible(false) : '';
+            // if(!isMobile){colorViewButton.setVisible(false);}
            
            colorViewButton.setInteractive().on('pointerdown', () => {
                if(colorContainer.style.display === 'block') {
@ -307,17 +488,47 @@ import Layout from '../../layouts/Layout.astro';
                    buttonsContainer.style.display = 'block';
                }
            });
+            const eraserButton = document.createElement('button');
+            eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
+            eraserButton.style.color = 'blue';
+            // eraserButton.style.border = '3px solid blue';
+            // eraserButton.style.color = 'white';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginRight = '15px';
+            // eraserButton.style.marginTop = '0px';
+            eraserButton.style.marginBottom = '0px';
+            if(isMobile){
+                eraserButton.style.padding = '4px 4px';
+            }else{
+                eraserButton.style.padding = '5px 9px';
+                eraserButton.style.top = '50%';
+                eraserButton.style.marginBottom = '15px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+            erase = false;
+                if (isErasing) {
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
+                }
+            });
            var colors = colorList;
            const buttonSize = 60;
            const buttonSpacing = 15;
            const clearEraserContainer = document.createElement('div');
            clearEraserContainer.style.display = 'flex';
            clearEraserContainer.style.flexDirection = 'row';
-            if(isMobile){
-                clearEraserContainer.style.marginTop = '-60px';
-            }else{
-                clearEraserContainer.style.marginTop = '40px';
-            }
+            isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
            const colorButtonsContainer = document.createElement('div');
            colorButtonsContainer.style.display = 'flex';
            colorButtonsContainer.style.flexDirection = 'column'; 
@ -522,51 +733,15 @@ import Layout from '../../layouts/Layout.astro';
            // Create the Clear button
            const clearButton = document.createElement('button');
            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginLeft = '30px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
            clearButton.addEventListener('click', () => {
                clearDrawing();
            });
-            // Create the Eraser button
-            const eraserButton = document.createElement('button');
-            // eraserButton.textContent = 'Eraser';
-            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
-            eraserButton.style.color = 'blue';
-            eraserButton.style.width = 'fit-content';
-            eraserButton.style.marginLeft = '30px';

-            eraserButton.style.fontWeight = 'bold';
-            eraserButton.style.borderRadius = '20%';
-            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
-            eraserButton.addEventListener('click', () => {
-            isErasing = !isErasing;
-                if (isErasing) {
-                    // eraserButton.style.backgroundColor = 'red';
-                    eraserButton.style.color = 'red';
-                    eraserButton.style.border = '3px solid red';
-                } else {
-                    // Return to drawing mode
-                    // eraserButton.style.backgroundColor = 'green';
-                    eraserButton.style.color = 'blue';
-                    eraserButton.style.border = 'none';
-                }
-            });
-            // Add the Clear and Eraser buttons to the container
-            clearEraserContainer.appendChild(eraserButton);
-            clearEraserContainer.appendChild(clearButton);
-            // buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(clearEraserContainer);
+            colorEraserCont.append(eraserButton);
+            colorEraserCont.append(clearButton);
+            // buttonsContainer.appendChild(clearEraserContainer);
+
            
            const sliderContainer = document.createElement('div');
            sliderContainer.className = 'slider-container';
@ -643,10 +818,17 @@ import Layout from '../../layouts/Layout.astro';
        submitButton.setVisible(false);
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+        
        drawingZone.renderer.snapshot((image) => {
            submitButton.setVisible(true);
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
            image.style.width = '160px';
            image.style.height = '120px';
            image.style.paddingLeft = '2px';
@ -698,16 +880,79 @@ import Layout from '../../layouts/Layout.astro';
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
        customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
    }
 </script>
 <style>
    .clear-button {
        background-color: blue;
    }
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0); /* End at its original position */
+    }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
 </style>
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@ -3,14 +3,139 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
    <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>   
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+           
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-4 md:px-10 py-4 md:py-10 md:w-[348px] md:h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div> 
+                    </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err); 
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
    const drawingZone = {
@ -31,25 +156,35 @@ import Layout from '../../layouts/Layout.astro';
    let resetIconWidth;
    let tickIconWidth;
    let cancelIconWidth; 
+    let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
    
    if(isMobile){
        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
    }
    
    if(isMobile){
@ -58,10 +193,10 @@ import Layout from '../../layouts/Layout.astro';
        noticeWidth = 100;
        noticeHeight = 0;
        downloadWidth = 67;
-        downloadHeight = 160;
+        downloadHeight = 200;
        learningWidth = 200;
        learningHeight = 400
-    } else {
+    }else {
        submitWidth = 380;
        submitHeight = 95;
        noticeWidth = 0;
@ -90,11 +225,13 @@ import Layout from '../../layouts/Layout.astro';
    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
    // console.log(shortUniqueID);

-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
    .then(response => response.json())
    .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        // console.log(data)
        // colorList = data.colors;
    const {image} = data;
@ -134,8 +271,11 @@ import Layout from '../../layouts/Layout.astro';
    let colorList;

    function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
        this.load.image('outline', assetsList.image);
-        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
@ -143,6 +283,7 @@ import Layout from '../../layouts/Layout.astro';
        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
        this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
    }

    function create() {
@ -153,7 +294,7 @@ import Layout from '../../layouts/Layout.astro';
            .then(({ data }) => {
                // console.log(data.colors)
                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 24;
+                const baseFontSize = 20;
                const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                let wrapWidth;
                if(isMobile){
@ -161,7 +302,7 @@ import Layout from '../../layouts/Layout.astro';
                } 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, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
            })
@ -207,27 +348,57 @@ import Layout from '../../layouts/Layout.astro';
            borderBottom.strokePath();

            const outlineImage = this.add.image(customWidth / 2, customHeight / 2 + 20, 'outline');
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
+            
+
            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
-            retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+            galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+            
+            if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            muteIcon.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
            })
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+          }
+            retryButton.setInteractive().on('pointerdown', () => {
+                graphics.clear();
+            })
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
            // font: '600 30px Quicksand',
            // fill: '#fff',
            // backgroundColor: 'blue',
            // padding: { x: 20, y: 10 },
            // });
-            // submitButton.setVisible(true);
+            submitButton.setVisible(true);
            submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // submitButton.setVisible(false);
-            // windowLoad();
                submitUserData(this);
-            })
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                parentMainContainer.classList.remove('hidden');
+                if(isMobile){
+                    colorContainer.style.display = 'none';
+                    // parentMainContainer.classList.remove('hidden');
+                }
+            });
+            galleryButton.setInteractive().on('pointerdown', () => {
+                parentMainContainer.classList.remove('hidden');
+                gallerySliderId.classList.remove('hidden');
+            });
            // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
            // if(!isMobile){
            //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@ -244,7 +415,12 @@ import Layout from '../../layouts/Layout.astro';
                outlineImage.setDepth(-1).setScale(1);   
            }

+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
            graphics = this.add.graphics();
+            graphics.setMask(mask);
            const colorContainer = document.createElement('div');
            colorContainer.style.position = 'absolute';
            colorContainer.style.top = '13%';
@ -258,13 +434,26 @@ import Layout from '../../layouts/Layout.astro';

            if(isMobile){
                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
            }

            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            if(!isMobile){
-                colorViewButton.setVisible(false);
-            }
+            !isMobile ? colorViewButton.setVisible(false) : '';

+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
+
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            colorContainer.appendChild(colorEraserCont);
            colorViewButton.setInteractive().on('pointerdown', () => {
                if(colorContainer.style.display === 'block') {
                    colorContainer.style.display = 'none';
@ -301,7 +490,8 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            
+            // colorContainer.appendChild(colorPicker);
            // const colors = data.colors;
            // var colors = colorList;
            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@ -525,39 +715,14 @@ import Layout from '../../layouts/Layout.astro';
            // Create the Clear button
            const clearButton = document.createElement('button');
            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '100px';
-                buttonsContainer.style.marginLeft = '30px';
-                clearButton.style.marginTop = '-15px';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
       
-            }else if(isTab){
-                clearButton.style.marginTop = '-100px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-                clearButton.style.marginTop = '-115px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
            clearButton.addEventListener('click', () => {
                clearDrawing();
            }); 

-            if(isMobile){
-                clearButton.style.display = 'none';
-            }
-
            colorViewButton.setInteractive().on('pointerdown', () => {
-                if(clearButton.style.display === 'block') {
-                    clearButton.style.display = 'none';
-                }else{
-                    clearButton.style.display = 'block';
-                }
+                clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block'; 
            });

            // Create the Eraser button
@ -595,7 +760,8 @@ import Layout from '../../layouts/Layout.astro';
                }
            });
            // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            colorEraserCont.append(colorPicker);
+            colorEraserCont.append(clearButton);
            // buttonsContainer.appendChild(eraserButton).setVisible;
            
            const sliderContainer = document.createElement('div');
@ -689,10 +855,17 @@ import Layout from '../../layouts/Layout.astro';
        // snapNotice.setVisible(true);
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
        drawingZone.renderer.snapshot((image) => {
            submitButton.setVisible(true);
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
            image.style.width = '160px';
            image.style.height = '120px';
            image.style.paddingLeft = '2px';
@ -746,12 +919,49 @@ import Layout from '../../layouts/Layout.astro';
            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
        };
        const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
        customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
        customCursor.x = this.input.x;
        customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
    }

    // function update() {
@ -787,4 +997,40 @@ import Layout from '../../layouts/Layout.astro';
    //     this.customCursor.y = this.input.y;
    // }
 </script>
-<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+    /* Animation styles */
+    @keyframes slideInUp {
+        0% {
+            opacity: 0;
+            transform: translateY(100%); /* Start below the viewport */
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0); /* End at its original position */
+        }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
+    .slide{
+        display: none;
+    }
+    .active{
+        display: block;
+    }
+</style>
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
    <main>
-        <div>
+        <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+          <div class="flex justify-center items-center h-screen ">
+            <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+          </div>
+        </div>
+        <div id="parentMainContainer"class="hidden">
+          <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+          </div>
+          <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                  <div class="flex flex-row space-x-4 items-center justify-center">
+                      <div id="star-container"></div>
+                  </div>
+                  <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                      <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                      <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  </div>
+                  <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                      <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                      <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                  </div>
+              </div>
+          </div>
+          <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+              <div class="flex flex-row z-50 place-items-end clip-art">
+                  <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                  <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                      <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                      <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                      
+                      <!-- Content -->
+                      <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                          <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                          <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                          <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                      </div>
+                    </div>
+              </div>
+          </div>
+          <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+              <div class="w-full max-w-6xl bg-white rounded-lg">
+                  <div class="flex justify-between p-3">
+                      <p class="text-[19px] font-[700]">Attempt 2</p>
+                      <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                  </div>
+                  <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                      <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                      <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                      <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                      <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                          <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                          <p class="text-sm" id="imageDescription">Description goes here.</p>
+                      </div>
+                  </div>
+              </div>
+          </div>
      </div>
        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
    </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768; 
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -37,32 +100,53 @@ import Layout from "../../layouts/Layout.astro";
  const game = new Phaser.Game(config);
  const customWidth = window.innerWidth;
  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
+  let firstLayer;
  let graphics;
  let isDrawing = false;
  let formattedDateTime;
  let animatedLetter;
  let scoreTotal = 0;
  
-  // const urls = window.location.href;
-  // const gameNames = urls.split('/');
-  // const gameTypes = gameNames[3].split('?id=');
-  // console.log(gameTypes[0]);
-
-
+    let topLogoWidth;
+    let muteIconWidth;
+    let galleryIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let demoButton;
+    let shortUniqueID;
+    let noticeWidth;
+    let noticeHeight;
+    let muteIcon;
+    let retryButton;
+    let maxScore;
+    let cancelIcon;
    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
+        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 400;
        letterHeight = 30;
-      letterScale = 1.1;
+        letterScale = 1.8;
        backgroundScale = 0.8;
        sunScale = 0.1;
        sunScalePlus = 0.15;
        sunWidth = 70;
        sunHeight = 70;
-      animated0videoScale = 0.6;
+        animated0videoScale = 1;
        animated0Height = 32;
        helpButtonHeight = customHeight / 1.1;
        helpButtonWidth = customWidth / 2 + 10;
@ -73,20 +157,38 @@ import Layout from "../../layouts/Layout.astro";
        submitHeight = customHeight / 1.1;
        noticeWidth = window.innerWidth * 0.5 - 100;
        noticeHeight = window.innerHeight * 0.38;
-
-    } else{
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+        downloadWidth = 180;
+        downloadHeight = 70;
+        learningWidth = 450;
+        learningHeight = 400;
        cloudeSize = 500;
        cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
        letterHeight = 10;
-      letterScale = 1.2;
+        letterScale = 1.8;
        backgroundScale = 1;
        sunScale  = 0.2;
        sunScalePlus = 0.25;
        sunWidth = 200;
        sunHeight = 100;
-      animated0videoScale = 0.70;
+        animated0videoScale = 1;
        animated0Height = 20;
        helpButtonHeight = customHeight / 2 + 40;
        helpButtonWidth = customWidth / 1.32;
@ -98,6 +200,7 @@ import Layout from "../../layouts/Layout.astro";
        noticeWidth = window.innerWidth * 0.5 - 120;
        noticeHeight = window.innerHeight * 0.32;
    }
+    
    window.onload = function() {
        currentDate = new Date();
        formattedDateTime = currentDate.toLocaleString();
@ -115,137 +218,96 @@ import Layout from "../../layouts/Layout.astro";
    this.load.svg('number0', '/assets/numeric/n0.svg');
    this.load.svg('layer1', '/assets/numeric/n0.svg');
    this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }
  function create() {
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
      
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      // submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+      //   font: '900 24px Quicksand',
+      //   fill: '#05b3a4',
+      //   backgroundColor : '#7c4c23',
+      //   padding: {x: 10, y: 10},
+      //   shadow: {
+      //     offsetX : 2, 
+      //     offsetY : 2, 
+      //     color: '#000',
+      //     blur: 5,
+      //     fill: true
+      //   }
+      // });

-      submitButton.setVisible(false);
+      // submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
    
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-    const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-    const duration = 3000; // Duration of the animation in milliseconds
-
-    // Create a scaling tween
-    this.tweens.add({
-      targets: sun,
-      scaleX: scaleFactor,
-      scaleY: scaleFactor,
-      duration: duration,
-      ease: 'Linear',
-      yoyo: true, // Makes the animation play in reverse
-      repeat: -1 // Repeat indefinitely
-    });
-    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const number0 = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
    
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      // animatedLetter.setVisible(true);
+
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
+      }
+      // animatedLetter.visible ? animatedLetter.setVisible(false): animatedLetter.setVisible(true);
    });

    
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      // const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+      // const baseFontSize = 16;
+      // const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
+      
+              retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+      this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+
+      const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
            animatedLetter.setLoop(true);
      // Play the video
@ -261,11 +323,13 @@ import Layout from "../../layouts/Layout.astro";
      });

    let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;

      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
+
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -288,7 +352,7 @@ import Layout from "../../layouts/Layout.astro";

        if (distance >= 0) {
          
-            firstTextLayer.setVisible(false);
+            // firstTextLayer.setVisible(false);
            firstLayer.setAlpha(1);
        } else {
            firstLayer.setAlpha(0.5);
@ -298,7 +362,8 @@ import Layout from "../../layouts/Layout.astro";


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
+      // graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -315,41 +380,82 @@ import Layout from "../../layouts/Layout.astro";
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      // gmStartTime();
      gamestart = new Date();
      gameStartTime = gamestart.toLocaleString();
-      // console.log("Page loaded on: " + gameStartTime);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
      demoButton.setVisible(true);
-      startButton.setVisible(false);
      submitButton.setVisible(true);
    })
+    // audioOneAudio.play();
+
+
+    // startButton.setInteractive().on('pointerdown', () => {
+    //   audioOneAudio.play();
+    //   // gmStartTime();
+    //   gamestart = new Date();
+    //   gameStartTime = gamestart.toLocaleString();
+    //   // console.log("Page loaded on: " + gameStartTime);
+    //   firstTextLayer.setVisible(true);
+    //   animatedLetter.setVisible(false);     
+    //   firstScreen.setVisible(false);
+    //   graphics.setVisible(true);
+    //   demoButton.setVisible(true);
+    //   startButton.setVisible(false);
+    //   submitButton.setVisible(true);
+    // })


  }
-
+  // function beforeStartGame(){
+  //   audioOneAudio.play();
+  //     document.getElementById('blurDisplay').classList.add('hidden');
+  //   }
 function update() {

 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/1.astro
+++ b/src/pages/guided-tracing/1.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,24 +103,41 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-  let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "stat timr here";
+  let galleryIconWidth;
+  let noticeWidth;
+  let noticeHeight;
+  let muteIcon;
+  let retryButton;
+  let maxScore;
+  let cancelIcon;
+  let letterHeight;
+  let letterScale;
+  let animated1Height;
+  let animated1videoScale;
+

  if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 30;
-      letterScale = 1.1;
+      
+      submitWidth = 250;
+      submitHeight = 110;
+      noticeWidth = 100;
+      noticeHeight = 0;
+      downloadWidth = 67;
+      downloadHeight = 200;
+      learningWidth = 200;
+      learningHeight = 400;
+      letterHeight = 0;
+      letterScale = 1.8;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-         
-      animated1videoScale = 0.6;
+      animated1videoScale = 1;
      animated1Height = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -68,23 +148,33 @@ import Layout from "../../layouts/Layout.astro";
      submitHeight = customHeight / 1.1;
      noticeWidth = window.innerWidth * 0.5 - 100;
      noticeHeight = window.innerHeight * 0.38;
-    } else{
+  }else if(isTab){
+      animated1videoScale = 1;
+      animated1Height = 32;
+      letterHeight = 0;
+      letterScale = 1.8;  
+  }else{
+      submitWidth = 380;
+      submitHeight = 95;
+      noticeWidth = 0;
+      noticeHeight = 0;
+      downloadWidth = 180;
+      downloadHeight = 70;
+      learningWidth = 450;
+      learningHeight = 400;
      cloudeSize = 500;
      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 10;
-      letterScale = 1.2;
+      letterHeight = 0;
+      letterScale = 1.8;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animated1videoScale = 0.70;
+      animated1videoScale = 1;
      animated1Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
-
      startButtonHeight = customHeight / 2 - 20;
      startButtonWidth = customWidth / 1.32;
      submitWidth = customWidth / 1.32;
@ -92,19 +182,42 @@ import Layout from "../../layouts/Layout.astro";
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
  }
+
+  if(isMobile){
+    topLogoWidth = 4.5;
+    muteIconWidth = 1.65;
+    resetIconWidth = 1.40;
+    tickIconWidth = 1.21;
+    cancelIconWidth = 1.08;
+    galleryIconWidth = 2;
+  }else if(isTab){
+    topLogoWidth = 4.5;
+    muteIconWidth = 1.6;
+    resetIconWidth = 1.43;
+    tickIconWidth = 1.29;
+    cancelIconWidth = 1.18;
+    galleryIconWidth = 1.81;
+  } else{
+    topLogoWidth = 6;
+    muteIconWidth = 1.3;
+    resetIconWidth = 1.26;
+    tickIconWidth = 1.222;
+    cancelIconWidth = 1.185;
+    galleryIconWidth = 1.345;
+  }
+
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
      // console.log("Page loaded on: " + formattedDateTime);
    };
-  // let hideButton;

  function preload() {
    this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
    this.load.svg('number1', '/assets/numeric/n1.svg');
    this.load.svg('layer1', '/assets/numeric/n1.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
@ -112,135 +225,71 @@ import Layout from "../../layouts/Layout.astro";
    this.load.image('cloud', '/assets/cloud.png');
    this.load.image('canvas', '/assets/canvas4.png');
     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");

-            submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand
    firstScreen.setVisible(false);
    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();


-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
+      }
    });


-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
    animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);

      // Play the video
@ -256,11 +305,12 @@ import Layout from "../../layouts/Layout.astro";
      });

    let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;

      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -293,7 +343,7 @@ import Layout from "../../layouts/Layout.astro";


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -310,32 +360,44 @@ import Layout from "../../layouts/Layout.astro";
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+    //   let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+    //   font: '900 24px Quicksand',
+    //   fill: '#05b3a4',
+    //   backgroundColor : '#7c4c23',
+    //   padding: {x: 20, y: 10},
+    //   shadow: {
+    //     offsetX : 2, 
+    //     offsetY : 2, 
+    //     color: '#000',
+    //     blur: 5,
+    //     fill: true
+    //   }
+    // })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
+      submitButton.setVisible(true);
    })
+    // startButton.setInteractive().on('pointerdown', () => {
+    //   audioOneAudio.play();
+    //   submitButton.setVisible(true);
+    //   firstTextLayer.setVisible(true);
+    //   animatedLetter.setVisible(false);     
+    //   firstScreen.setVisible(false);
+    //   graphics.setVisible(true);
+    //   hideButton.setVisible(false);
+    //   demoButton.setVisible(true);
+    //   startButton.setVisible(false);
+
+    // })


  }
@ -345,3 +407,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/2.astro
+++ b/src/pages/guided-tracing/2.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,24 +103,21 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
      letterHeight = 58;
-      letterScale = 1;
+      letterScale = 1.5;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
      animated2Height = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -69,18 +129,14 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 100;
      noticeHeight = window.innerHeight * 0.38;
    } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.5;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
      animated2Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -91,158 +147,114 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
      // console.log("Page loaded on: " + formattedDateTime);
    };
-  // let hideButton;

  function preload() {
    this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
    this.load.svg('number2', '/assets/numeric/n2.svg');
-    this.load.svg('layer1', '/assets/numeric/n2.svg');
-    this.load.svg('layer2', '/assets/numeric/n2.svg');
+    this.load.svg('layer1', '/assets/numeric/n2_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n2_l2.svg');
    this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
    
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
   
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
    });


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);

    // Play the video
@ -260,9 +272,8 @@ submitUserData(this);
    let textX, textY;

      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      let stepTextSize = isMobile ? 12 : 16;
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -271,7 +282,8 @@ submitUserData(this);

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -284,7 +296,6 @@ submitUserData(this);
        let firstDragStartPoint = { x: 0, y: 0 };
        let secondDragStartPoint = { x: 0, y: 0 };

-        // ...

        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
@ -307,7 +318,6 @@ submitUserData(this);
            firstLayer.setAlpha(0.5);
        }
        });
-``
        // Repeat the above code for secondLayer and thirdLayer

        // Add this code for secondLayer
@ -329,7 +339,7 @@ submitUserData(this);


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -346,36 +356,60 @@ submitUserData(this);
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }
  
+
 function update() {

 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/3.astro
+++ b/src/pages/guided-tracing/3.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+    }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,24 +103,25 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-
+  let demoButton;
    if(isMobile){
      cloudeSize = 200;
      cloudHeight = 340;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 48;
-      letterScale = 1;
+      letterScale = 1.5;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated3Scale = 0.55;
+      animated3Scale = 0.92;
      animated3Height = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -74,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.5;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
          
-      animated3Scale = 0.55;
+      animated3Scale = 0.92;
      animated3Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -92,12 +156,33 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
      // console.log("Page loaded on: " + formattedDateTime);
    };
-  // let hideButton;

  function preload() {
    this.load.video('animated3', '/assets/animated-letter/number_3.mp4');
@ -105,144 +190,80 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer1', '/assets/numeric/n3.svg');
    this.load.svg('layer2', '/assets/numeric/n3.svg');
    this.load.audio('audioOne', '/assets/audio/roll-around.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
+
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);

-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number3').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number3').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated3').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
    });


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 3', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 3', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);

    // Play the video
@ -258,11 +279,11 @@ submitUserData(this);
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -271,7 +292,7 @@ submitUserData(this);

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioOne');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -307,7 +328,6 @@ submitUserData(this);
            firstLayer.setAlpha(0.5);
        }
        });
-``
        // Repeat the above code for secondLayer and thirdLayer

        // Add this code for secondLayer
@ -329,7 +349,7 @@ submitUserData(this);


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -346,31 +366,14 @@ submitUserData(this);
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -379,3 +382,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/4.astro
+++ b/src/pages/guided-tracing/4.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer"class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;

 // // Use x
@ -97,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -110,142 +197,78 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/numeric/n4_l3.svg');
    this.load.audio('audioOne', '/assets/audio/down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');

-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitButton.setVisible(false);
        // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });

-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated4').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
    });

-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 4', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 4', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);

    // Play the video
@ -260,11 +283,12 @@ submitUserData(this);
    });

      let textX, textY;
-
+      let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -273,7 +297,7 @@ submitUserData(this);

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -282,8 +306,9 @@ submitUserData(this);
      secondLayer.setVisible(false);

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioOne');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -360,7 +385,7 @@ submitUserData(this);


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -378,31 +403,15 @@ submitUserData(this);
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -410,3 +419,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/5.astro
+++ b/src/pages/guided-tracing/5.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,10 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-//   let x = 100;
+  let demoButton;

 // // Use x
 // console.log(x);
@ -54,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
@ -62,7 +126,7 @@ let scoreTotal = 0;  let isDrawing = false;
      sunHeight = 70;
       
      animated5Height = 35;
-      animated5Scale = 0.55;
+      animated5Scale = 0.7;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -78,7 +142,7 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 40;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
@ -86,7 +150,7 @@ let scoreTotal = 0;  let isDrawing = false;
      sunHeight = 100;
        
      animated5Height = 20;
-      animated5Scale = 0.6;
+      animated5Scale = 0.7;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -97,6 +161,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -111,142 +197,76 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.audio('audioOne', '/assets/audio/down.mp3');
    this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
    this.load.audio('audioThree', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');

-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
-        // console.log('Clicked');
-        submitButton.setVisible(false);
-        // windowLoad();
-submitUserData(this);
+        // console.log('Clicked');        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
   
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated5').setDepth(2); canvasStand
    firstScreen.setVisible(false);
    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
+        
+      }
+    })


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 5', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 5', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);

    // Play the video
@ -261,11 +281,11 @@ submitUserData(this);
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -274,7 +294,7 @@ submitUserData(this);

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -284,7 +304,7 @@ submitUserData(this);

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioThree');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -361,7 +381,7 @@ submitUserData(this);


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -379,35 +399,56 @@ submitUserData(this);
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }
-
 function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/6.astro
+++ b/src/pages/guided-tracing/6.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0; 
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 30; 
      letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated6Scale = 0.55;
+      animated6Scale = 0.7;
      animated6Height = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
          
-      animated6Scale = 0.55;
+      animated6Scale = 0.7;
      animated6Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -93,12 +158,33 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
      // console.log("Page loaded on: " + formattedDateTime);
    };
-  // let hideButton;

  function preload() {
    this.load.video('animated6', '/assets/animated-letter/number_6.mp4');
@ -107,163 +193,96 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/numeric/n6_l2.svg');
    this.load.audio('audioOne', '/assets/audio/curve-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/loop.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');

-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
      
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number6').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number6').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated6').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();

 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
+        
+      }
+    })


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 6', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 6', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);

    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);

-    // You can set additional properties for the video, such as loop and mute:
    animatedLetter.setLoop(true); // Loop the video
    animatedLetter.setMute(false); // Unmute the video
      animatedLetter.on('complete', function () {
-      // Video playback is complete
      // You can add your code here for what to do when the video finishes.
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Curve Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -272,7 +291,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Loop',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Loop',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -285,7 +304,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let firstDragStartPoint = { x: 0, y: 0 };
        let secondDragStartPoint = { x: 0, y: 0 };

-        // ...

        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
@ -308,7 +326,6 @@ let scoreTotal = 0;  let isDrawing = false;
            firstLayer.setAlpha(0.5);
        }
        });
-``
        // Repeat the above code for secondLayer and thirdLayer

        // Add this code for secondLayer
@ -330,7 +347,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -347,30 +364,16 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
      
+    firstTextLayer.setVisible(false);
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
    })
  }

@ -379,3 +382,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/7.astro
+++ b/src/pages/guided-tracing/7.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 30; 
      letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.5;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated7Scale = 0.55;
+      animated7Scale = 0.75;
      animated7Height = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 10;
-      letterScale = 1.1;
+      letterScale = 1.5;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
          
-      animated7Scale = 0.55;
+      animated7Scale = 0.75;
      animated7Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -107,142 +194,80 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/numeric/n7_l2.svg');
    this.load.audio('audioOne', '/assets/audio/slide.mp3');
    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');

-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number7').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number7').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated7').setDepth(2); canvasStand
    firstScreen.setVisible(false);
    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+
+
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 7', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 7', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);

    // Play the video
@ -258,11 +283,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -271,7 +296,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -284,8 +309,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let firstDragStartPoint = { x: 0, y: 0 };
        let secondDragStartPoint = { x: 0, y: 0 };

-        // ...
-
        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
        firstDragStartPoint.x = pointer.x;
@ -327,7 +350,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -344,31 +367,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -377,3 +384,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/8.astro
+++ b/src/pages/guided-tracing/8.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14;
      canvasHeight = 30; 
      letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated8Scale = 0.55;
+      animated8Scale = 0.7;
      animated8Height = 15;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
          
-      animated8Scale = 0.55;
+      animated8Scale = 0.7;
      animated8Height = 0;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -107,142 +194,78 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/numeric/n8_l2.svg');
    this.load.audio('audioOne', '/assets/audio/hook-snake.mp3');
    this.load.audio('audioTwo', '/assets/audio/roll-up.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number8').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number8').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated8').setDepth(2); canvasStand
    firstScreen.setVisible(false);
    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
+        
+      }
+    })


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 8', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 8', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);

    // Play the video
@ -258,11 +281,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Snake',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -271,7 +294,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Up',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Up',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -328,7 +351,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -345,31 +368,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -378,3 +385,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/9.astro
+++ b/src/pages/guided-tracing/9.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 30; 
      letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.3;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
         
-      animated9Scale = 0.55;
+      animated9Scale = 0.75;
      animated9Height = 40;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.3;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
          
-      animated9Scale = 0.55;
+      animated9Scale = 0.75;
      animated9Height = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;
@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -107,143 +194,78 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/numeric/n9_l2.svg');
    this.load.audio('audioOne', '/assets/audio/curve-around.mp3');
    this.load.audio('audioTwo', '/assets/audio/tall-down.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');

-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number9').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number9').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated9').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
-      graphics.setVisible(false);
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
+      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
+        
+      }
+    })


-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 9', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 9', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);

    // Play the video
@ -259,11 +281,12 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;

      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 8 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Curve Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -272,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -308,7 +331,6 @@ let scoreTotal = 0;  let isDrawing = false;
            firstLayer.setAlpha(0.5);
        }
        });
-``
        // Repeat the above code for secondLayer and thirdLayer

        // Add this code for secondLayer
@ -330,7 +352,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -347,31 +369,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -380,3 +386,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@ -3,14 +3,81 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
    <div>
+      
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
+      </div>
+    </div>
+    <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+      <div class="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+          <div class="flex justify-between p-3">
+              <p class="text-[19px] font-[700]">Attempt 2</p>
+              <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+          </div>
+          <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+              <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+              <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+              <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveTracingGameData.js" is:inline></script>
 <script is:inline>
+      const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
+    const buddiesName = findBuddies.metadata?.sprite || 'No sprite found'
+    console.log('buddName', buddiesName);
+    // fetch(`https://preschool-curriculum.in/api/one/v1//akademy/students/668ce00ae4714c0da8c17d4e`)
+      const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        gallerySliderId.classList.add('hidden');
+        
+    }
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +89,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,14 +107,13 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-  
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;
+  let maxScore;
+  let galleryButton;

    if(isMobile){
      cloudeSize = 200;
@ -55,14 +121,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 70;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
      animatedAHeight = 35;
-      animatedAScale = 0.65;
+      animatedAScale = 0.8;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -78,14 +144,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animatedAHeight = 20;
-      animatedAScale = 0.73;
+      animatedAHeight = 0;
+      animatedAScale = 0.8;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -96,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -110,132 +198,81 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
    this.load.audio('audioTwo', '/assets/audio/slant-right.mp3');
    this.load.audio('audioThree', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
-      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
+        showAnimation();
+        // parentMainContainer.classList.remove('hidden');
+      });
+      galleryButton.setInteractive().on('pointerdown', () => {
+          // parentMainContainer.classList.remove('hidden');
+          gallerySliderId.classList.remove('hidden');
      });
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-      const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false); 
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+      window.location.reload();
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: A', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : A', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);

    // Play the video
@ -250,11 +287,14 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
+    let finalMessage = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, 'Great job! You traced the letter perfectly!',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
+    finalMessage.setVisible(false);

      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant Left',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');      
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -263,7 +303,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant Right',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -273,10 +313,12 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioThree');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
+
+
      // thirdLayer.setScale(1.15);
      thirdLayer.setAlpha(0.5);
      thirdLayer.setInteractive({ draggable: true });
@ -287,8 +329,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let secondDragStartPoint = { x: 0, y: 0 };
        let thirdDragStartPoint = { x: 0, y: 0 };

-        // ...
-
        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
        firstDragStartPoint.x = pointer.x;
@ -343,6 +383,7 @@ let scoreTotal = 0;  let isDrawing = false;
        if (distance >= 100) {
            thirdLayer.setAlpha(1);
            thirdTextLayer.setVisible(false);
+            finalMessage.setVisible(true)
        } else {
            thirdLayer.setAlpha(0.5);
        }
@ -369,31 +410,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.strokePath();
      });

-    let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -401,3 +425,37 @@ function update() {
 }

 </script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
+  * {
+    margin: 0;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
+  }
+/* Animation styles */
+@keyframes slideInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(100%); /* Start below the viewport */
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0); /* End at its original position */
+  }
+}
+
+.clip-art-container {
+    overflow: hidden; /* Prevents overflow during the animation */
+}
+
+.clip-art {
+    transform: translateX(100%); /* Initially off-screen to the right */
+    opacity: 0; /* Initially hidden */
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+}
+
+.clip-art.show {
+    transform: translateX(0); /* Move the image into view */
+    opacity: 1; /* Fade in */
+}
+</style>
--- a/src/pages/guided-tracing/B.astro
+++ b/src/pages/guided-tracing/B.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 58;
-      letterScale = 0.85;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-      animatedVideoScale = 0.6;
-      animatedBHeight = 32;
+      animatedVideoScale = 0.8;
+      animatedBHeight = 22;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -73,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animatedVideoScale = 0.70;
-      animatedBHeight = 20;
+      animatedVideoScale = 0.8;
+      animatedBHeight = 10;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -106,143 +193,77 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
    
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
    

-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: B', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : B', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -256,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -269,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -279,7 +300,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTHreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -293,8 +314,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let secondDragStartPoint = { x: 0, y: 0 };
        let thirdDragStartPoint = { x: 0, y: 0 };

-        // ...
-
        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
        firstDragStartPoint.x = pointer.x;
@ -360,7 +379,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -378,31 +397,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.strokePath();
      });

-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -411,3 +413,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/C.astro
+++ b/src/pages/guided-tracing/C.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -57,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
      sunWidth = 70;
      sunHeight = 70;
      animatedVideoScale = 0.59;
-      animatedAHeight = 32;
+      animatedCHeight = 32;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;
      startButtonHeight = customHeight / 1.1;
@ -79,7 +144,7 @@ let scoreTotal = 0;  let isDrawing = false;
      sunWidth = 200;
      sunHeight = 100;
      animatedVideoScale = 0.70;
-      animatedAHeight = 20;
+      animatedCHeight = 20;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -90,6 +155,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -98,147 +185,80 @@ let scoreTotal = 0;  let isDrawing = false;
  // let hideButton;

  function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/capital_c.mp4');
+    this.load.video('animatedC', '/assets/animated-letter/capital_c.mp4');
    this.load.svg('letterC', '/assets/capital-letter/c.svg');
    this.load.svg('layer1', '/assets/capital-letter/c.svg');
    this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedC').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
-
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: C', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : C', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
      // Play the video
      // animatedLetter.play();
      animatedLetter.setVisible(false);
@ -252,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
      });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -289,7 +309,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -307,33 +327,16 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.strokePath();
      });

-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
-
  }

 function update() {
@ -341,3 +344,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/D.astro
+++ b/src/pages/guided-tracing/D.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 58;
-      letterScale = 0.85;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-      animatedVideoScale = 0.6;
-      animatedDHeight = 32;
+      animatedVideoScale = 0.8;
+      animatedDHeight = 22;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -73,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animatedVideoScale = 0.70;
-      animatedDHeight = 20;
+      animatedVideoScale = 0.8;
+      animatedDHeight = 10;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -105,144 +192,78 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/capital-letter/d_l2.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
-        submitNotic.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
    
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
   

-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: D', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : D', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -256,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -269,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -282,8 +303,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let firstDragStartPoint = { x: 0, y: 0 };
        let secondDragStartPoint = { x: 0, y: 0 };

-        // ...
-
        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
        firstDragStartPoint.x = pointer.x;
@ -324,7 +343,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -341,30 +360,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);

+    firstTextLayer.setVisible(false);
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
    })
  }

@ -373,3 +377,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/E.astro
+++ b/src/pages/guided-tracing/E.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer, fourthLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -89,6 +154,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -104,141 +191,74 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
    this.load.audio('audioThree', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedE').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: E', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : E', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);

    // Play the video
@ -254,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -267,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -277,7 +297,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -288,7 +308,7 @@ let scoreTotal = 0;  let isDrawing = false;

      fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioFourthAudio = this.sound.add('audioTwo');
      fourthTextLayer.setVisible(false);
      fourthLayer.setDepth(1.1);
@ -389,7 +409,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -407,31 +427,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.strokePath();
      });

-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -440,3 +443,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/F.astro
+++ b/src/pages/guided-tracing/F.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  } 
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,28 +103,26 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
      cloudHeight = 340;
      canvasScale = 0.14
      canvasHeight = 35; 
-      letterHeight = 70;
-      letterScale = 1;
+      letterHeight = 35;
+      letterScale = 1.08;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-      animatedFHeight = 35;
-      animatedFScale = 0.65;
+      animatedFHeight = 0;
+      animatedFScale = 0.8;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -77,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.1;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animatedFHeight = 20;
-      animatedFScale = 0.73;
+      animatedFHeight = 10;
+      animatedFScale = 0.8;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -95,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -108,138 +191,73 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/capital-letter/f_l3.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedF').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
    
    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: F', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : F', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);

    // Play the video
@ -254,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -267,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -277,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -351,7 +369,7 @@ let scoreTotal = 0;  let isDrawing = false;
        });

      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -369,31 +387,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -401,3 +403,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/G.astro
+++ b/src/pages/guided-tracing/G.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,24 +103,26 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
      cloudHeight = 340;
      canvasScale = 0.14
      canvasHeight = 35; 
-      letterHeight = 58;
-      letterScale = 0.85;
+      letterHeight = 30;
+      letterScale = 1;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-      animatedVideoScale = 0.60;
-      animatedGHeight = 32;
+      animatedVideoScale = 0.7;
+      animatedGHeight = 0;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -91,7 +156,33 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
-  // let hideButton;
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      // console.log("Page loaded on: " + formattedDateTime);
+    };

  function preload() {
    this.load.video('animatedG', '/assets/animated-letter/capital_g.mp4');
@ -100,142 +191,75 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/capital-letter/g_l2.svg');
    this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }
  function create() {
    
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
    
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: G', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : G', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -249,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      audioOneAudio.play();
      firstLayer.setDepth(1);
@ -262,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -316,7 +340,7 @@ let scoreTotal = 0;  let isDrawing = false;
        });

      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -333,31 +357,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -366,3 +374,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/H.astro
+++ b/src/pages/guided-tracing/H.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,13 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -54,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.14
      canvasHeight = 35; 
      letterHeight = 70;
-      letterScale = 0.9;
+      letterScale = 1.2;
      backgroundScale = 0.8;
      sunScale = 0.1;
      sunScalePlus = 0.15;
      sunWidth = 70;
      sunHeight = 70;
-      animatedHHeight = 45;
-      animatedHScale = 0.6;
+      animatedHHeight = 30;
+      animatedHScale = 0.78;
      helpButtonHeight = customHeight / 1.1;
      helpButtonWidth = customWidth / 2 + 10;

@ -77,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
      canvasScale = 0.195;
      canvasHeight = 20;
      letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
      backgroundScale = 1;
      sunScale  = 0.2;
      sunScalePlus = 0.25;
      sunWidth = 200;
      sunHeight = 100;
-      animatedHHeight = 20;
-      animatedHScale = 0.70;
+      animatedHHeight = 10;
+      animatedHScale = 0.78;
      helpButtonHeight = customHeight / 2 + 40;
      helpButtonWidth = customWidth / 1.32;

@ -95,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -108,141 +191,75 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/capital-letter/h_l3.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: H', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : H', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -255,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -268,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioOne');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -278,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -355,7 +372,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -373,35 +390,55 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
-      
  }

 function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/I.astro
+++ b/src/pages/guided-tracing/I.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,10 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
-//   let x = 100;
+  let demoButton;

 // // Use x
 // console.log(x);
@ -95,6 +159,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -108,139 +194,72 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/capital-letter/i_l3.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
      this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedI').setDepth(2); canvasStand
-    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
    
      demoButton.setInteractive().on('pointerdown', () => {
        animatedLetter.setCurrentTime(0);
        animatedLetter.play(true);
        graphics.setVisible(false);
        firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+        if(animatedLetter.visible){
+          animatedLetter.setVisible(false);
+          graphics.setVisible(true);
+          firstScreen.setVisible(false);
+        } else{
+          graphics.setVisible(false);
          animatedLetter.setVisible(true);
-    });
+          firstScreen.setVisible(true);
          
+        }
+      })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: I', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : I', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);

    // Play the video
@ -255,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -268,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -278,7 +297,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -355,7 +374,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -372,31 +391,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -404,3 +406,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/J.astro
+++ b/src/pages/guided-tracing/J.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -103,141 +190,74 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('letterJ', '/assets/capital-letter/j.svg');
    this.load.svg('layer1', '/assets/capital-letter/j.svg');
    this.load.audio('audioOne', '/assets/audio/tall-hook.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
-     
-              submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
      submitButton.setInteractive().on('pointerdown', () => {
        // console.log('Clicked');
-        submitButton.setVisible(false);
        // windowLoad();
        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterJ').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedJ').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: J', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : J', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
-
      // Play the video
      // animatedLetter.play();
      animatedLetter.setVisible(false);
@ -251,11 +271,11 @@ let scoreTotal = 0;  let isDrawing = false;
      });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Hook',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -283,7 +303,7 @@ let scoreTotal = 0;  let isDrawing = false;
        });

      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -300,33 +320,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
    })
-
-
  }

 function update() {
@ -334,3 +336,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/K.astro
+++ b/src/pages/guided-tracing/K.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;

 // // Use x
@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -108,141 +195,75 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer3', '/assets/capital-letter/k_l3.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
        submitButton.setInteractive().on('pointerdown', () => {
          // console.log('Clicked');
-          submitButton.setVisible(false);
          // windowLoad();
          submitUserData(this);
+          showAnimation();
+        parentMainContainer.classList.remove('hidden');
        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterK').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterK').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedK').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: K', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : K', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -255,11 +276,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -268,7 +289,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -278,7 +299,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -354,7 +375,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -371,31 +392,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-      submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
      animatedLetter.setVisible(false);     
      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -403,3 +407,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/L.astro
+++ b/src/pages/guided-tracing/L.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -90,6 +155,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -104,7 +191,7 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer2', '/assets/capital-letter/l_l2.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
@ -114,132 +201,70 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.image('sun', '/assets/sun.png');
    this.load.image('bgMobile', '/assets/bgMobile.png');
    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
        submitButton.setInteractive().on('pointerdown', () => {
          // console.log('Clicked');
-          submitButton.setVisible(false);
          // windowLoad();
          submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-
        demoButton.setInteractive().on('pointerdown', () => {
        animatedLetter.setCurrentTime(0);
        animatedLetter.play(true);
        graphics.setVisible(false);
        firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+        if(animatedLetter.visible){
+          animatedLetter.setVisible(false);
+          graphics.setVisible(true);
+          firstScreen.setVisible(false);
+        } else{
+          graphics.setVisible(false);
          animatedLetter.setVisible(true);
-    });
+          firstScreen.setVisible(true);
          
+        }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: L', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : L', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -253,11 +278,11 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
      firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -266,7 +291,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioTwo');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -279,7 +304,6 @@ let scoreTotal = 0;  let isDrawing = false;
        let firstDragStartPoint = { x: 0, y: 0 };
        let secondDragStartPoint = { x: 0, y: 0 };

-        // ...

        // Add this code for firstLayer
        firstLayer.on('dragstart', (pointer) => {
@ -302,7 +326,6 @@ let scoreTotal = 0;  let isDrawing = false;
            firstLayer.setAlpha(0.5);
        }
        });
-``
        // Repeat the above code for secondLayer and thirdLayer

        // Add this code for secondLayer
@ -324,7 +347,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -341,30 +364,15 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);

+    firstTextLayer.setVisible(false);
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
    })
  }

@ -373,3 +381,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/src/pages/guided-tracing/M.astro
+++ b/src/pages/guided-tracing/M.astro
@ -3,14 +3,77 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
  <main>
-        <div>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div id="parentMainContainer" class="hidden">
+      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+          <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+      </div>
+      <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+          <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+              <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+              </div>
+              <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+              </div>
+              <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+              </div>
+          </div>
+      </div>
+      <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+          <div class="flex flex-row z-50 place-items-end clip-art">
+              <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+              <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                  <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                  
+                  <!-- Content -->
+                  <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                      <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                      <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                      <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                  </div>
+                </div>
+          </div>
+      </div>
+      <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+          <div class="w-full max-w-6xl bg-white rounded-lg">
+              <div class="flex justify-between p-3">
+                  <p class="text-[19px] font-[700]">Attempt 2</p>
+                  <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+              </div>
+              <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                  <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                  <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                  <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                  <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                      <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                      <p class="text-sm" id="imageDescription">Description goes here.</p>
+                  </div>
+              </div>
+          </div>
+      </div>
    </div>
    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+    }
  const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
    x: isMobile ? 0 : window.innerWidth / 4,
    y: window.innerHeight / 4,
@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
    scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
  let firstLayer, secondLayer, thirdLayer, fourthLayer;
  let graphics;
  let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
  let formattedDateTime;
  let gameStartTime = "start time here";
+  let demoButton;

    if(isMobile){
      cloudeSize = 200;
@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
      noticeWidth = window.innerWidth * 0.5 - 120;
      noticeHeight = window.innerHeight * 0.32;
    }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.65;
+      resetIconWidth = 1.40;
+      tickIconWidth = 1.21;
+      cancelIconWidth = 1.08;
+      galleryIconWidth = 2;
+    }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+      galleryIconWidth = 1.81;
+    } else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+      galleryIconWidth = 1.345;
+    }
    window.onload = function() {
      currentDate = new Date();
      formattedDateTime = currentDate.toLocaleString();
@ -105,143 +192,75 @@ let scoreTotal = 0;  let isDrawing = false;
    this.load.svg('layer4', '/assets/capital-letter/m_l4.svg');
    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.image('topLogo', '/assets/top_logo.svg');
    this.load.svg('succesImage', '/assets/svg/tick.svg');
    this.load.svg('hintImage', '/assets/svg/hint.svg');
    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.image("tickIcon", '/assets/svg/tick2.svg');
+    this.load.image("muteIcon", '/assets/svg/mute.svg');
+    this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+    this.load.image("resetIcon", '/assets/svg/reset.svg');
+    this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
  }

  function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();

-                submitNotic = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2, 'Submitted Successfully', { font: '600 20px Quicksand', fill: 'blue'}).setDepth(3).setVisible(false);
-
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
        submitButton.setInteractive().on('pointerdown', () => {
          // console.log('Clicked');
-          submitButton.setVisible(false);
          // windowLoad();
          submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);
    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand
    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        font: '900 24px quicksand',
-        fill: '#05b3a4',
-        backgroundColor: '#7c4c23',
-        padding: { x: 20, y: 10 },
-        borderRadius: '15px', // Border radius
-        shadow: {
-            offsetX: 2, // X offset for the shadow
-            offsetY: 2, // Y offset for the shadow
-            color: '#000', // Shadow color
-            blur: 5, // Shadow blur
-            fill: true // Apply shadow to fill (background color)
-        }
-      });

    demoButton.setInteractive().on('pointerdown', () => {
      animatedLetter.setCurrentTime(0);
      animatedLetter.play(true);
      graphics.setVisible(false);
      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
        animatedLetter.setVisible(true);
-    });
+        firstScreen.setVisible(true);
        
+      }
+    })

-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: M', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : M', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);
-
    // Play the video
    // animatedLetter.play();
    animatedLetter.setVisible(false);
@ -255,11 +274,12 @@ let scoreTotal = 0;  let isDrawing = false;
    });

    let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;

      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioOneAudio = this.sound.add('audioOne');
      // audioOneAudio.play();
      firstLayer.setDepth(1);
@ -268,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;

      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioTwoAudio = this.sound.add('audioOne');
      secondTextLayer.setVisible(false);
      secondLayer.setDepth(1);
@ -278,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;

      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioThreeAudio = this.sound.add('audioTwo');
      thirdTextLayer.setVisible(false);
      thirdLayer.setDepth(1.1);
@ -289,7 +309,7 @@ let scoreTotal = 0;  let isDrawing = false;

      fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
      const audioFourthAudio = this.sound.add('audioTwo');
      fourthTextLayer.setVisible(false);
      fourthLayer.setDepth(1.1);
@ -390,7 +410,7 @@ let scoreTotal = 0;  let isDrawing = false;


      graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
      this.input.on('pointerdown', function (pointer) {
        isDrawing = true;
@ -407,30 +427,14 @@ let scoreTotal = 0;  let isDrawing = false;
        graphics.lineTo(pointer.x, pointer.y);
        graphics.strokePath();
      });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
      audioOneAudio.play();
-submitButton.setVisible(true);
      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
    })
  }

@ -439,3 +443,40 @@ function update() {
 }

 </script>
+<style>
+  .clear-button {
+      background-color: blue;
+  }
+  /* Animation styles */
+  @keyframes slideInUp {
+      0% {
+          opacity: 0;
+          transform: translateY(100%); /* Start below the viewport */
+      }
+      100% {
+          opacity: 1;
+          transform: translateY(0); /* End at its original position */
+      }
+  }
+
+  .clip-art-container {
+      overflow: hidden; /* Prevents overflow during the animation */
+  }
+
+  .clip-art {
+      transform: translateX(100%); /* Initially off-screen to the right */
+      opacity: 0; /* Initially hidden */
+      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+  }
+
+  .clip-art.show {
+      transform: translateX(0); /* Move the image into view */
+      opacity: 1; /* Fade in */
+  }
+  .slide{
+      display: none;
+  }
+  .active{
+      display: block;
+  }
+</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Subhodip Ghosh	1d18dd7ecd	s1	2025-06-20 12:14:55 +05:30
Subhodip Ghosh	47a8ae7591	s1	2025-06-20 11:54:55 +05:30
Subhodip Ghosh	d9de243965	s1	2025-06-20 11:49:38 +05:30
Subhodip Ghosh	5099565817	s1	2025-06-20 11:47:58 +05:30
Subhodip Ghosh	6ab33ed3ff	screen size fixed	2025-06-19 17:29:22 +05:30
Subhodip Ghosh	1afa56b659	screen size fixed	2025-06-19 17:20:18 +05:30
Subhodip Ghosh	835d5a4852	S1	2025-06-19 14:07:32 +05:30
Subhodip Ghosh	f812493f72	change new drawing game responsiveness	2025-06-16 17:33:17 +05:30
Subhodip Ghosh	d4a7544a6b	fix	2025-06-10 11:16:16 +05:30
Subhodip Ghosh	645be371b2	change ui issue in new 2 varient drawing game	2025-06-05 21:44:57 +05:30
Subhodip Ghosh	5bdd812ecf	fix overlap issue	2025-05-26 16:39:05 +05:30
Subhodip Ghosh	46afe928a0	fix overlap issue	2025-05-26 16:38:27 +05:30
Subhodip Ghosh	477d1d4813	fix overlap issue	2025-05-26 16:27:34 +05:30
Subhodip Ghosh	5e92a8762d	fix overlap issue	2025-05-26 16:06:36 +05:30
Subhodip Ghosh	2410aa5bd5	fix overlap issue	2025-05-26 15:49:43 +05:30
Suvodip	47340b10d8	fixed button overlap issue	2025-05-08 16:37:36 +05:30
Suvodip	6e6566a064	fit drawing image size	2025-05-05 09:31:49 +05:30
Suvodip	7819792138	fit drawing image size	2025-05-05 08:49:35 +05:30
Suvodip	6bce4625cd	add 2 new drawing varient	2025-04-22 16:38:07 +05:30
Suvodip	dfcd42a3c9	s1	2025-04-21 21:08:46 +05:30
Suvodip	8d3840043f	s12	2025-04-16 16:43:00 +05:30
Suvodip	728a501cb5	chnage submission endpoint	2025-03-28 12:38:23 +05:30
Subhodip Ghosh	e037a4b089	Merge pull request 's11' (#46 ) from newb2 into master Reviewed-on: #46	2025-03-11 10:09:15 +00:00
Suvodip	47e90eed3a	s11	2025-03-11 15:37:02 +05:30
Subhodip Ghosh	7f6191612e	Merge pull request 's33' (#45 ) from newb2 into master Reviewed-on: #45	2025-03-01 13:57:22 +00:00
Suvodip	aad75d2ec3	s33	2025-03-01 19:27:00 +05:30
Subhodip Ghosh	cdd0cc87ef	Merge pull request 'chnage submissions api endpoint' (#44 ) from newb2 into master Reviewed-on: #44	2025-02-12 10:26:24 +00:00
Suvodip	11ec4dff7a	chnage submissions api endpoint	2025-02-12 15:55:42 +05:30
Subhodip Ghosh	455393f2fa	Merge pull request 'change star budies in drawing game' (#43 ) from newb2 into master Reviewed-on: #43	2025-02-07 12:25:31 +00:00
Suvodip	bb681b1152	change star budies in drawing game	2025-02-07 17:55:08 +05:30
Subhodip Ghosh	65aa08bfb6	Merge pull request 'change drawing game star implemantetion' (#42 ) from newb2 into master Reviewed-on: #42	2025-02-04 13:42:45 +00:00
Suvodip	c4131434ef	change drawing game star implemantetion	2025-02-04 19:10:44 +05:30
Subhodip Ghosh	6fdc275205	Merge pull request 'all userId replace to childId' (#41 ) from newb2 into master Reviewed-on: #41	2025-02-04 10:38:40 +00:00
Suvodip	cbe6255540	all userId replace to childId	2025-02-04 16:08:11 +05:30
Subhodip Ghosh	62abedf3aa	Merge pull request 'fix darg v3 game scoring issue' (#40 ) from newb2 into master Reviewed-on: #40	2025-02-01 13:06:38 +00:00
Suvodip	1075b9a85a	fix darg v3 game scoring issue	2025-02-01 18:36:13 +05:30
Subhodip Ghosh	6d56c2a3ad	Merge pull request 's2' (#39 ) from newb2 into master Reviewed-on: #39	2025-02-01 12:29:39 +00:00
Suvodip	70d65c429f	s2	2025-02-01 17:56:45 +05:30
Subhodip Ghosh	b9b92b0feb	Merge pull request 's7' (#38 ) from newb2 into master Reviewed-on: #38	2025-01-30 08:18:48 +00:00
Suvodip	f3c3cc2ad0	s7	2025-01-30 12:36:05 +05:30
Subhodip Ghosh	efa1bff9aa	Merge pull request 's6' (#37 ) from newb2 into master Reviewed-on: #37	2025-01-28 12:15:30 +00:00
Suvodip	c1830f72a1	s6	2025-01-28 17:45:10 +05:30
Subhodip Ghosh	8bdd30a933	Merge pull request 's6' (#36 ) from newb2 into master Reviewed-on: #36	2025-01-28 12:01:12 +00:00
Suvodip	056acfffde	s6	2025-01-28 17:30:37 +05:30
Subhodip Ghosh	970acf7521	Merge pull request 's6' (#35 ) from newb2 into master Reviewed-on: #35	2025-01-26 09:25:37 +00:00
Suvodip	50db006fd5	s6	2025-01-26 14:54:52 +05:30
Subhodip Ghosh	bc169b6dfa	Merge pull request 's5' (#34 ) from newb2 into master Reviewed-on: #34	2025-01-26 08:16:15 +00:00
Suvodip	54f2c9f06e	s5	2025-01-26 13:45:25 +05:30
Subhodip Ghosh	a180a6b5fe	Merge pull request 'newb2' (#33 ) from newb2 into master Reviewed-on: #33	2025-01-23 15:02:05 +00:00
Suvodip	f15a4b3b27	s5	2025-01-23 20:31:19 +05:30
Suvodip	eb7d7e9da8	change Ui	2025-01-23 19:16:56 +05:30
Suvodip	9809ca86d9	s1	2025-01-21 11:20:29 +05:30
Subhodip Ghosh	af5cba4017	Merge pull request 'newb' (#32 ) from newb into master Reviewed-on: #32	2024-12-12 11:08:35 +00:00
Suvodip	eac8a4719a	s1	2024-12-12 16:36:47 +05:30
Suvodip	cedb4ad01e	s1	2024-12-12 16:36:08 +05:30
Subhodip Ghosh	59ca5f9b09	Merge pull request 'newb' (#31 ) from newb into master Reviewed-on: #31	2024-12-05 11:59:05 +00:00
Suvodip	8e96e7b4ba	chnage lap	2024-12-03 19:19:54 +05:30
Subhodip Ghosh	0547509a2d	Merge pull request 'newb' (#30 ) from newb into master Reviewed-on: #30	2024-11-27 12:30:27 +00:00
Suvodip	4372f87838	ui modifications in drawing game	2024-11-27 17:40:35 +05:30
Suvodip	4a303849ad	audio done	2024-11-27 16:10:18 +05:30
Suvodip	c999045fe4	next work start from tick_phonics_v1	2024-11-26 19:53:39 +05:30
Suvodip	2d6e01e184	s1	2024-11-22 17:57:22 +05:30
Suvodip	f3dd30e909	s1	2024-11-22 17:34:31 +05:30
Subhodip Ghosh	3ed170c09b	Merge pull request 's1' (#29 ) from newb into master Reviewed-on: #29	2024-11-22 11:45:19 +00:00
Suvodip	12aeec0947	s1	2024-11-22 17:14:50 +05:30
Subhodip Ghosh	702e63b91c	Merge pull request 'newb' (#28 ) from newb into master Reviewed-on: #28	2024-11-21 11:31:40 +00:00
Suvodip	e4dc874374	s1	2024-11-21 16:57:31 +05:30
Suvodip	7e44149a4a	fix sub learning area key issue (copy)	2024-11-19 12:32:05 +05:30
Suvodip	b8444a361a	s1	2024-11-08 16:39:40 +05:30
Suvodip	d64bc840bc	s1	2024-11-08 16:27:37 +05:30
Suvodip	399186819c	s1	2024-11-07 19:30:53 +05:30
Suvodip	1bd86ba8cc	s1	2024-11-06 19:05:11 +05:30
Suvodip	ebd61445de	fix color issue over the button	2024-11-05 18:22:34 +05:30
Suvodip	eab9dd370f	Change All Guided Tracing Desgine	2024-11-05 16:46:43 +05:30
Suvodip	3392dea286	CS	2024-10-30 16:46:38 +05:30
Suvodip	195756b892	CI	2024-10-29 18:45:48 +05:30
Suvodip	cd15a8be17	add new desgine from 0 to a	2024-10-28 18:48:04 +05:30
Suvodip	41ae75207b	newb	2024-10-26 18:57:45 +05:30
Subhodip Ghosh	0d4ab27be8	Merge pull request 'game name' (#27 ) from b4 into master Reviewed-on: #27	2024-10-19 07:36:00 +00:00
Suvodip	fb3ef37bad	game name	2024-10-19 13:05:21 +05:30
Subhodip Ghosh	2f29d13432	Merge pull request 'game name from get parameter' (#26 ) from b4 into master Reviewed-on: #26	2024-10-18 11:29:41 +00:00
Suvodip	ff80faaf7d	game name from get parameter	2024-10-18 16:59:03 +05:30
Subhodip Ghosh	9c4e7f184d	Merge pull request 'b4' (#25 ) from b4 into master Reviewed-on: #25	2024-10-14 05:53:39 +00:00
Suvodip	9ebf6f5d60	s1	2024-10-14 11:15:56 +05:30
Suvodip	d9243a1b7c	s1	2024-10-04 17:49:07 +05:30
Suvodip	aff599a883	s1	2024-10-03 13:33:08 +05:30
Subhodip Ghosh	3e0a99a42b	Merge pull request 's1' (#24 ) from b4 into master Reviewed-on: #24	2024-10-02 15:50:37 +00:00
Suvodip	2e342cd642	s1	2024-10-02 21:19:54 +05:30
Subhodip Ghosh	6e46901c90	Merge pull request 'b4' (#23 ) from b4 into master Reviewed-on: #23	2024-10-02 13:16:36 +00:00
Suvodip	b8994802cb	s1	2024-10-02 18:44:04 +05:30
Suvodip	8569295b65	s	2024-10-02 13:46:45 +05:30
Suvodip	cdc95734ec	s1	2024-10-01 20:26:37 +05:30
Suvodip	575967a8db	s1	2024-09-18 18:59:54 +05:30
Subhodip Ghosh	2ef1814ffe	Merge pull request 'add eraser button and add start calculation logic' (#22 ) from b4 into master Reviewed-on: #22	2024-09-06 14:36:18 +00:00
Suvodip	d2a1edd333	add eraser button and add start calculation logic	2024-09-06 20:05:34 +05:30
Subhodip Ghosh	bde9907774	Merge pull request 'change API Endpoint & Submit Message Desgine' (#21 ) from b4 into master Reviewed-on: #21	2024-08-07 15:58:30 +00:00
Suvodip	2fe965cd99	change API Endpoint & Submit Message Desgine	2024-08-07 21:27:54 +05:30
Subhodip Ghosh	275e3c1b2b	Merge pull request 'b4' (#20 ) from b4 into master Reviewed-on: #20	2024-08-01 14:08:05 +00:00
Subhodip Ghosh	386c8f7116	Merge pull request 'user is fix' (#18 ) from b4 into master Reviewed-on: #18	2024-07-02 16:45:53 +00:00