Merge pull request 'wss14' (#2) from wss14 into master

Reviewed-on: #2

public/assets/small-letter/ts.svg

@@ -7,10 +7,11 @@
    viewBox="0 0 100 100"
    version="1.1"
    id="svg5"
-   sodipodi:docname="as.svg"
+   sodipodi:docname="ts_l2.svg"
-   inkscape:export-filename="ts.svg"
+   inkscape:export-filename="ts_l2.svg"
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +29,12 @@
      showgrid="false"
      showguides="true"
      inkscape:zoom="1.6295423"
-     inkscape:cx="47.252532"
+     inkscape:cx="125.49536"
-     inkscape:cy="206.19287"
+     inkscape:cy="151.88314"
      inkscape:window-width="1920"
-     inkscape:window-height="1007"
+     inkscape:window-height="1027"
-     inkscape:window-x="0"
+     inkscape:window-x="-8"
-     inkscape:window-y="0"
+     inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg5">
     <sodipodi:guide
@@ -132,42 +133,49 @@
          id="arrow2L-6-6" />
     </marker>
   </defs>
-  <path
+  <g
-     style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     id="g18882"
-     d="m 50.08549,24.331693 c 0.121005,1.203615 -0.079,39.438697 -0.160045,40.602866"
+     style="display:inline">
-     id="path127" />
+    <path
-  <text
+       style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-     xml:space="preserve"
+       d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473"
-     style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       id="path127"
-     x="48.917473"
+       sodipodi:nodetypes="ccc" />
-     y="26.370642"
+    <text
-     id="text9342"
+       xml:space="preserve"
-     transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
+       style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
-       id="tspan9340"
-       style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.181793;stroke-dasharray:none;stroke-opacity:1"
        x="48.917473"
-       y="26.370642">1</tspan></text>
+       y="26.370642"
-  <circle
+       id="text9342"
-     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
+       transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
-     id="path9448"
+         id="tspan9340"
-     cx="-50.669743"
+         style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.181793;stroke-dasharray:none;stroke-opacity:1"
-     cy="-23.430946"
+         x="48.917473"
-     r="1.6570226"
+         y="26.370642">1</tspan></text>
-     transform="rotate(-178.67073)" />
+    <circle
-  <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
-     style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.46448;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
+       id="path9448"
-     d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996"
+       cx="-50.669743"
-     id="path13743" />
+       cy="-23.430946"
+       r="1.6570226"
+       transform="rotate(-178.67073)" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.46448;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
+       d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996"
+       id="path13743" />
+  </g>
   <g
      id="g18551"
-     transform="translate(-1.0583333,-0.52916667)">
+     transform="translate(-1.0583333,-0.52916667)"
+     style="display:inline">
     <path
        style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734"
        id="path1236-5" />
     <g
        id="g1301"
-       transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)">
+       transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)"
+       style="display:inline">
       <text
          xml:space="preserve"
          style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"

public/assets/small-letter/ts_l1.svg

@@ -7,7 +7,7 @@
    viewBox="0 0 100 100"
    version="1.1"
    id="svg5"
-   sodipodi:docname="as.svg"
+   sodipodi:docname="ts_l2.svg"
    inkscape:export-filename="ts-l1.svg"
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
@@ -115,29 +115,15 @@
          style="fill:context-stroke;fill-rule:evenodd;stroke:none"
          id="arrow2L-54" />
     </marker>
-    <marker
-       style="overflow:visible"
-       id="Arrow2-3-7"
-       refX="0"
-       refY="0"
-       orient="auto-start-reverse"
-       markerWidth="7.6999998"
-       markerHeight="5.5999999"
-       viewBox="0 0 7.7 5.6"
-       preserveAspectRatio="xMidYMid">
-      <path
-         transform="scale(0.7)"
-         d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
-         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
-         id="arrow2L-6-6" />
-    </marker>
   </defs>
   <g
-     id="g18882">
+     id="g18882"
+     style="display:inline">
     <path
        style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 50.08549,24.331693 c 0.121005,1.203615 -0.079,39.438697 -0.160045,40.602866"
+       d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473"
-       id="path127" />
+       id="path127"
+       sodipodi:nodetypes="ccc" />
     <text
        xml:space="preserve"
        style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@@ -161,39 +147,4 @@
        d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996"
        id="path13743" />
   </g>
-  <g
-     id="g18551"
-     transform="translate(-1.0583333,-0.52916667)"
-     style="display:none">
-    <path
-       style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734"
-       id="path1236-5" />
-    <g
-       id="g1301"
-       transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)">
-      <text
-         xml:space="preserve"
-         style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
-         x="54.113926"
-         y="-23.497944"
-         id="text1240-6"
-         transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
-           id="tspan1238-9"
-           style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
-           x="54.113926"
-           y="-23.497944">2</tspan></text>
-      <circle
-         style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
-         id="circle1242-3"
-         cx="-54.018658"
-         cy="25.946033"
-         r="1.2760839"
-         transform="rotate(-144.24458)" />
-    </g>
-    <path
-       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-7);paint-order:stroke fill markers"
-       d="m 53.475324,36.181898 c -2.146558,0.0055 -10.407988,0.100872 -10.407988,0.100872"
-       id="path1246-7" />
-  </g>
 </svg>

public/assets/small-letter/ts_l2.svg

@@ -7,10 +7,11 @@
    viewBox="0 0 100 100"
    version="1.1"
    id="svg5"
-   sodipodi:docname="as.svg"
+   sodipodi:docname="ts_l2.svg"
-   inkscape:export-filename="ts-l2.svg"
+   inkscape:export-filename="ts-l3.svg"
    inkscape:export-xdpi="96"
    inkscape:export-ydpi="96"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +29,12 @@
      showgrid="false"
      showguides="true"
      inkscape:zoom="1.6295423"
-     inkscape:cx="47.252532"
+     inkscape:cx="125.49536"
-     inkscape:cy="206.19287"
+     inkscape:cy="151.88314"
      inkscape:window-width="1920"
-     inkscape:window-height="1007"
+     inkscape:window-height="1027"
-     inkscape:window-x="0"
+     inkscape:window-x="-8"
-     inkscape:window-y="0"
+     inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg5">
     <sodipodi:guide
@@ -137,8 +138,9 @@
      style="display:none">
     <path
        style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 50.08549,24.331693 c 0.121005,1.203615 -0.079,39.438697 -0.160045,40.602866"
+       d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473"
-       id="path127" />
+       id="path127"
+       sodipodi:nodetypes="ccc" />
     <text
        xml:space="preserve"
        style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@@ -172,7 +174,8 @@
        id="path1236-5" />
     <g
        id="g1301"
-       transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)">
+       transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)"
+       style="display:inline">
       <text
          xml:space="preserve"
          style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"

public/assets/svg/pencil.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" width="91px" height="91px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>pencil</title> <path d="M5.582 20.054l14.886-14.886 6.369 6.369-14.886 14.886-6.369-6.369zM21.153 8.758l-0.698-0.697-11.981 11.98 0.698 0.698 11.981-11.981zM22.549 10.154l-0.698-0.698-11.981 11.982 0.697 0.697 11.982-11.981zM23.945 11.55l-0.698-0.698-11.981 11.981 0.698 0.698 11.981-11.981zM23.319 2.356c0.781-0.783 2.045-0.788 2.82-0.013l3.512 3.512c0.775 0.775 0.77 2.038-0.012 2.82l-2.17 2.17-6.32-6.32 2.17-2.169zM5.092 20.883l6.030 6.030-5.284 1.877-2.623-2.623 1.877-5.284zM4.837 29.117l-3.066 1.117 1.117-3.066 1.949 1.949z"></path> </g></svg>

public/assets/svg/retry.svg

@@ -0,0 +1 @@
+<svg fill="#0000ff" height="84px" width="84px" 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" stroke="#0000ff"><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>

src/components/Footer.astro

@@ -1,169 +1,5 @@
-<footer class="text-center lg:text-left bg-gray-100 text-gray-600">
+<main>
-    <div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
+  <div>
-      <div class="mr-12 hidden lg:block">
+    
-        <span>Get connected with us on social networks:</span>
+  </div>
-      </div>
+</main>
-      <div class="flex justify-center">
-        <a href="#!" class="mr-6 text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f"
-            class="w-2.5" role="img" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512">
-            <path fill="currentColor"
-              d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
-            </path>
-          </svg>
-        </a>
-        <a href="#!" class="mr-6 text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
-            class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <path fill="currentColor"
-              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
-            </path>
-          </svg>
-        </a>
-        <a href="#!" class="mr-6 text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"
-            class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
-            <path fill="currentColor"
-              d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
-            </path>
-          </svg>
-        </a>
-        <a href="#!" class="mr-6 text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
-            class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <path fill="currentColor"
-              d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
-            </path>
-          </svg>
-        </a>
-        <a href="#!" class="mr-6 text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in"
-            class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
-            <path fill="currentColor"
-              d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
-            </path>
-          </svg>
-        </a>
-        <a href="#!" class="text-gray-600">
-          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
-            class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-            <path fill="currentColor"
-              d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
-            </path>
-          </svg>
-        </a>
-      </div>
-    </div>
-    <div class="mx-6 py-10 text-center md:text-left">
-      <div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-        <div class="">
-          <h6 class="
-              uppercase
-              font-semibold
-              mb-4
-              flex
-              items-center
-              justify-center
-              md:justify-start
-            ">
-            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cubes"
-              class="w-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512">
-              <path fill="currentColor"
-                d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
-              </path>
-            </svg>
-            Tailwind ELEMENTS
-          </h6>
-          <p>
-            Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
-            sit amet, consectetur adipisicing elit.
-          </p>
-        </div>
-        <div class="">
-          <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
-            Products
-          </h6>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">Angular</a>
-          </p>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">React</a>
-          </p>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">Vue</a>
-          </p>
-          <p>
-            <a href="#!" class="text-gray-600">Laravel</a>
-          </p>
-        </div>
-        <div class="">
-          <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
-            Useful links
-          </h6>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">Pricing</a>
-          </p>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">Settings</a>
-          </p>
-          <p class="mb-4">
-            <a href="#!" class="text-gray-600">Orders</a>
-          </p>
-          <p>
-            <a href="#!" class="text-gray-600">Help</a>
-          </p>
-        </div>
-        <div class="">
-          <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
-            Contact
-          </h6>
-          <p class="flex items-center justify-center md:justify-start mb-4">
-            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
-              class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-              <path fill="currentColor"
-                d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
-              </path>
-            </svg>
-            New York, NY 10012, US
-          </p>
-          <p class="flex items-center justify-center md:justify-start mb-4">
-            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
-              class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512">
-              <path fill="currentColor"
-                d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
-              </path>
-            </svg>
-            info@example.com
-          </p>
-          <p class="flex items-center justify-center md:justify-start mb-4">
-            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
-              class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512">
-              <path fill="currentColor"
-                d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
-              </path>
-            </svg>
-            + 01 234 567 88
-          </p>
-          <p class="flex items-center justify-center md:justify-start">
-            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
-              class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512">
-              <path fill="currentColor"
-                d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
-              </path>
-            </svg>
-            + 01 234 567 89
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="text-center p-6 bg-gray-200">
-      <span>© 2021 Copyright:</span>
-      <a class="text-gray-600 font-semibold" href="https://tailwind-elements.com/">Tailwind Elements</a>
-    </div>
-  </footer>

src/components/MainHeader.vue

@@ -1,216 +1,3 @@
 <template>
-    <header>
+  <div>Header</div>
-        <nav class="bg-gray-800">
+</template>
-  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-    <div class="relative flex h-16 items-center justify-between">
-      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-        <!-- Mobile menu button-->
-        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
-          <span class="sr-only">Open main menu</span>
-          <!--
-            Icon when menu is closed.
-
-            Heroicon name: outline/bars-3
-
-            Menu open: "hidden", Menu closed: "block"
-          -->
-          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <!--
-            Icon when menu is open.
-
-            Heroicon name: outline/x-mark
-
-            Menu open: "block", Menu closed: "hidden"
-          -->
-          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-        <div class="flex flex-shrink-0 items-center">
-          <img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
-          <img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
-        </div>
-        <div class="hidden sm:ml-6 sm:block">
-          <div class="flex space-x-4">
-            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
-          </div>
-        </div>
-      </div>
-      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-        <button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
-          <span class="sr-only">View notifications</span>
-          <!-- Heroicon name: outline/bell -->
-          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
-          </svg>
-        </button>
-
-        <!-- Profile dropdown -->
-        <div class="relative ml-3">
-          <div>
-            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <span class="sr-only">Open user menu</span>
-              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-            </button>
-          </div>
-
-          <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-100"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
-          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-            <!-- Active: "bg-gray-100", Not Active: "" -->
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="sm:hidden" id="mobile-menu">
-    <div class="space-y-1 px-2 pt-2 pb-3">
-      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
-    </div>
-  </div>
-</nav>
-
-    </header>
-  </template>
-  
-  <style scoped>
-  .navbar {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   padding: 20px;
-  
-  }
-  
-  .nav-links a {
-   color: #7a4211;
-  }
-  .nav-links a:hover {
-   color: #fff;
-  }
-  /* LOGO */
-  .logo {
-   font-size: 32px;
-  }
-  /* NAVBAR MENU */
-  .menu {
-   z-index: 999;
-   display: flex;
-   gap: 1em;
-   font-size: 18px;
-  }
-  .menu li:hover {
-   background-color: #3b82f6;
-   border-radius: 5px;
-   transition: 0.3s ease;
-  }
-  .menu li {
-   padding: 5px 14px;
-  }
-  /* DROPDOWN MENU */
-  .services {
-   position: relative; 
-  }
-  .dropdown {
-   z-index: 999;
-   background-color: rgb(247, 235, 173);
-   padding: 1em 0;
-   position: absolute; /*WITH RESPECT TO PARENT*/
-   display: none;
-   border-radius: 8px;
-   top: 35px;
-   margin-left: -30px;
-  }
-  .dropdown li + li {
-   margin-top: 10px;
-  }
-  .dropdown li {
-   padding: 0.5em 1em;
-   width: 8em;
-   text-align: center;
-  }
-  .dropdown li:hover {
-    background-color: rgb(250, 230, 133);
-   color: #ff0000;
-  }
-  .services:hover .dropdown {
-   display: block;
-  }
-  
-  
-  
-  input[type=checkbox]{
-   display: none;
-  } 
-  /*HAMBURGER MENU*/
-  .hamburger {
-   display: none;
-   font-size: 24px;
-   user-select: none;
-  }
-  /* APPLYING MEDIA QUERIES */
-  @media (max-width: 768px) {
-  .menu { 
-   display:none;
-   position: absolute;
-   background-color:#f0f9ff;
-   right: 0;
-   left: 0;
-   text-align: center;
-   padding: 16px 0;
-  }
-  .menu li:hover {
-   display: inline-block;
-   background-color:#4c9e9e;
-   transition: 0.3s ease;
-  }
-  .menu li + li {
-   margin-top: 12px;
-  }
-  input[type=checkbox]:checked ~ .menu{
-   display: block;
-  }
-  .hamburger {
-   display: block;
-  }
-  .dropdown {
-   left: 50%;
-   top: 30px;
-   transform: translateX(35%);
-  }
-  .dropdown li:hover {
-   background-color: #4c9e9e;
-  }
-  }
-  </style>

src/pages/cross/v1.astro

@@ -0,0 +1,276 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-6">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <!-- <div class="flex flex-col">
+                        <p id="LearningArea"></p>
+                        <p id="LearningSubArea_copy"></p>
+                    </div> -->
+                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 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">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label1"></p>
+                                </label>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                
+                                <label for="a2" class="round-checkbox-label">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label2"></p>
+                                </label>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <label for="a3" class="round-checkbox-label">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label3"></p>
+                                </label>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                
+                                <label for="a4" class="round-checkbox-label">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label4"></p>
+                                </label>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <label for="a5" class="round-checkbox-label">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label5"></p>
+                                </label>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+                                
+                                <label for="a6" class="round-checkbox-label">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label6"></p>
+                                </label>
+                                <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 id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                        </div>
+                    </form>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    let gameData = null;
+
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        .then(res => res.json())
+        .then(data => {
+            gameData = data.data;
+            // console.log(gameData)
+            document.getElementById("gameDescription").innerHTML = gameData.description;
+            if(gameData.label1){
+                document.getElementById("label1").innerHTML = gameData.label1;
+            }
+            if(gameData.label2){
+                document.getElementById("label2").innerHTML = gameData.label2;
+            }
+            if(gameData.label3){
+                document.getElementById("label3").innerHTML = gameData.label3;
+            }
+            if(gameData.label4){
+                document.getElementById("label4").innerHTML = gameData.label4;
+            }
+            if(gameData.label5){
+                document.getElementById("label5").innerHTML = gameData.label5;
+            }
+            if(gameData.label6){
+                document.getElementById("label6").innerHTML = gameData.label6;
+            }
+            // 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 <= 6; i++) {
+                const imageId = `image${i}`;
+                document.getElementById(imageId).src = assetsURL + gameData[imageId];
+            }
+        });
+
+    function checkResult2(id) {
+        const checkbox = document.getElementById('a' + id.slice(-1));
+        const element = document.getElementById(id);
+
+        if (checkbox.checked) {
+            if (gameData[id.replace('image', 'a')] === true) {
+                element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
+            }
+        } else {
+            element.classList.remove('redBorder', 'greenBorder');
+        }
+    }
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+    };
+
+    function saveUserData() {
+         // Get checkbox values and corresponding elements
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        const checkboxValues = checkboxes.map(id => {
+            const checkbox = document.getElementById(id);
+            const element = document.getElementById('image' + id.slice(-1));
+            return {
+                id: id,
+                checked: checkbox.checked,
+                element: element
+            };
+        });
+
+        // Count points based on checkbox values and "greenBorder" class
+        let totalPoints = 0;
+        checkboxValues.forEach(checkbox => {
+            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+                totalPoints += 1;
+            }
+        });
+
+        // Move the userData object creation inside the saveUserData function if needed
+        let userData = {
+            'user': 'tick-v1@beanstalkedu.com',
+            'game_name': gameName,
+            'starts': formatedDateTime,
+            'score': totalPoints, // Include the totalPoints in the userData
+        };
+        // console.log(userData);
+        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+            .then(response => {
+                if (response.ok) {
+                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                } else {
+                    // console.log('Something Wrong', response);
+                }
+            })
+            .catch(error => {
+                console.error('An error occurred', error);
+            });
+    }
+
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const contactForm = document.getElementById('contactForm');
+        contactForm.addEventListener('submit', async function (event) {
+            event.preventDefault();
+        });
+    });
+</script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    input[type="checkbox"]{
+        -webkit-appearance: initial;
+        appearance: initial;
+        border: 1px solid gray;
+        border-radius: 5px;
+        /* background: gray; */
+        width: 40px;
+        height: 40px;
+        
+        position: relative;
+    }
+    input[type="checkbox"]:checked {
+        background: #FF0000;
+    }
+    input[type="checkbox"]:checked:after {
+        content: "X";
+        color: #fff;
+        border: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        -moz-transform: translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        /*
+        * If you want to fully change the check appearance, use the following:
+        * content: " ";
+        * width: 100%;
+        * height: 100%;
+        * background: blue;
+        * top: 0;
+        * left: 0;
+        */
+    }
+    body{
+        font-family: Quicksand;
+    }
+    input.largerCheckbox {
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+    }
+    .greenBorder{
+        border: 4px solid #008000;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    .redBorder{
+        border: 4px solid red;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    #image1, #image2, #image3, #image4, #image5, #image6{
+        width: 150px;
+    }
+    #label1, #label2, #label3, #label4, #label5, #label6{
+        text-align: center;
+        font-weight: bold;
+        color: #7C4C23;
+        font-size: 20px;
+        padding-top: 10px;
+    }
+    #LearningArea, #LearningSubArea_copy{
+        font-size: 20px;
+        color: #7C4C23;
+        font-weight: bold;
+    }
+    .round-checkbox-label {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label {
+        border-radius: 30%;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 40px;
+        display: block;
+    }
+</style>

src/pages/cross/v2.astro

@@ -0,0 +1,310 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-6">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <!-- <div class="flex flex-col">
+                        <p id="LearningArea"></p>
+                        <p id="LearningSubArea_copy"></p>
+                    </div> -->
+                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <form id="contactForm">
+                        <div id="" class="flex flex-row place-content-between gap-4">
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a1" class="round-checkbox-label">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label1"></p>
+                                </label>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+    
+                                <label for="a2" class="round-checkbox-label">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label2"></p>
+                                </label>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+    
+                                <label for="a3" class="round-checkbox-label">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label3"></p>
+                                </label>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a4" class="round-checkbox-label">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label4"></p>
+                                </label>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+    
+                                <label for="a5" class="round-checkbox-label">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label5"></p>
+                                </label>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+    
+                                <label for="a6" class="round-checkbox-label">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label6"></p>
+                                </label>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a7" class="round-checkbox-label">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label7"></p>
+                                </label>
+                                <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
+    
+                                <label for="a8" class="round-checkbox-label">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label8"></p>
+                                </label>
+                                <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
+    
+                                <label for="a9" class="round-checkbox-label">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label9"></p>
+                                </label>
+                                <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
+                            </div>
+                        </div>
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                        </div>
+                    </form>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        .then(res => res.json())
+        .then(data => {
+            gameData = data.data;
+            // console.log(gameData)
+            document.getElementById("gameDescription").innerHTML = gameData.description;
+            if(gameData.label1){
+                document.getElementById("label1").innerHTML = gameData.label1;
+            }
+            if(gameData.label2){
+                document.getElementById("label2").innerHTML = gameData.label2;
+            }
+            if(gameData.label3){
+                document.getElementById("label3").innerHTML = gameData.label3;
+            }
+            if(gameData.label4){
+                document.getElementById("label4").innerHTML = gameData.label4;
+            }
+            if(gameData.label5){
+                document.getElementById("label5").innerHTML = gameData.label5;
+            }
+            if(gameData.label6){
+                document.getElementById("label6").innerHTML = gameData.label6;
+            }
+            if(gameData.label7){
+                document.getElementById("label7").innerHTML = gameData.label7;
+            }
+            if(gameData.label8){
+                document.getElementById("label8").innerHTML = gameData.label8;
+            }
+            if(gameData.label9){
+                document.getElementById("label9").innerHTML = gameData.label9;
+            }
+            // 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}`;
+                document.getElementById(imageId).src = assetsURL + gameData[imageId];
+            }
+        });
+
+    function checkResult2(id) {
+        const checkbox = document.getElementById('a' + id.slice(-1));
+        const element = document.getElementById(id);
+
+        if (checkbox.checked) {
+            if (gameData[id.replace('image', 'a')] === true) {
+                element.classList.add('greenBorder');
+            } else {
+                element.classList.add('redBorder');
+            }
+        } else {
+            element.classList.remove('greenBorder', 'redBorder');
+        }
+    }
+
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+    };
+
+    function saveUserData() {
+        // 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));
+            return {
+                id: id,
+                checked: checkbox.checked,
+                element: element
+            };
+        });
+
+        // Count points based on checkbox values and "greenBorder" class
+        let totalPoints = 0;
+        checkboxValues.forEach(checkbox => {
+            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+                totalPoints += 1;
+            }
+        });
+        let userData = {
+            'user': 'tick-v2@beanstalkedu.com',
+            'game_name': gameName,
+            'starts': formatedDateTime,
+            // 'game_start' : gameStartTime,
+            'score' : totalPoints,
+        };
+
+        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+            .then(response => {
+                if (response.ok) {
+                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                } else {
+                    // console.log('Something Wrong', response);
+                }
+            })
+            .catch(error => {
+                console.error('An error occurred', error);
+            });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const contactForm = document.getElementById('contactForm');
+        contactForm.addEventListener('submit', async function (event) {
+            event.preventDefault();
+        });
+    });
+</script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    input[type="checkbox"]{
+        -webkit-appearance: initial;
+        appearance: initial;
+        border: 1px solid gray;
+        border-radius: 5px;
+        /* background: gray; */
+        width: 40px;
+        height: 40px;
+        
+        position: relative;
+    }
+    input[type="checkbox"]:checked {
+        background: #FF0000;
+    }
+    input[type="checkbox"]:checked:after {
+        border: none;
+        content: "X";
+        color: #fff;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        -moz-transform: translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        /*
+        * If you want to fully change the check appearance, use the following:
+        * content: " ";
+        * width: 100%;
+        * height: 100%;
+        * background: blue;
+        * top: 0;
+        * left: 0;
+        */
+    }
+    body{
+        font-family: Quicksand;
+    }
+    input.largerCheckbox {
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+    }
+    .greenBorder{
+        border: 4px solid #008000;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    .redBorder{
+        border: 4px solid red;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
+        width: 150px;
+    }
+    #label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
+        text-align: center;
+        font-weight: bold;
+        color: #7C4C23;
+        font-size: 20px;
+        padding-top: 10px;
+    }
+    #LearningArea, #LearningSubArea_copy{
+        font-size: 20px;
+        color: #7C4C23;
+        font-weight: bold;
+    }
+    .round-checkbox-label {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label {
+        border-radius: 30%;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 40px;
+        display: block;
+    }
+</style>

src/pages/cross/v3.astro

@@ -0,0 +1,263 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <!-- bg-[url('/assets/customBG.jpg')] bg-cover bg-center -->
+    <main>
+        <div class="">
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-2">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <div class="flex flex-col">
+                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <!-- <p id="LearningSubArea"></p> -->
+                    </div>
+                    <div class="flex flex-col justify-center place-items-center ">
+                        <img class="lg:w-[50%]"  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="">
+                        <div id="itemForm" class="">
+                            <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" />
+                                        <p id="label1"></p>
+                                    </label>
+                                    <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                </div>
+                                <div class="flex flex-col place-items-center">
+                                    <label for="a2" class="round-checkbox-label">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </label>
+                                    <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                                </div>
+                                <div class="flex flex-col place-items-center">
+                                    <label for="a3" class="round-checkbox-label">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </label>
+                                    <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col place-items-center justify-center pt-4">
+                            <p id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                        </div>
+                    </form>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    let gameData = null;
+
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        .then(res => res.json())
+        .then(data => {
+            gameData = data.data;
+            // console.log(gameData)
+            document.getElementById("gameLabel").innerHTML = gameData.label;
+            document.getElementById("gameDescription").innerHTML = gameData.description;
+            if(gameData.label1, gameData.label2, gameData.label3){
+                document.getElementById("label1").innerHTML = gameData.label1;
+                document.getElementById("label2").innerHTML = gameData.label2;
+                document.getElementById("label3").innerHTML = gameData.label3;
+            }
+            // if(gameData.label1){
+            //     document.getElementById("label1").innerHTML = gameData.label1;
+            // }
+            // if(gameData.label2){
+            //     document.getElementById("label2").innerHTML = gameData.label2;
+            // }
+            // if(gameData.label3){
+            //     document.getElementById("label3").innerHTML = gameData.label3;
+            // }
+            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
+
+            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            document.getElementById('descImage').src = assetsURL + gameData.descript_img;
+            for (let i = 1; i <= 3; i++) {
+                const imageId = `image${i}`;
+                if(gameData[imageId]){
+                    document.getElementById(imageId).src = assetsURL + gameData[imageId];
+                }
+            }
+        });
+
+    function checkResult2(id) {
+        const checkbox = document.getElementById('a' + id.slice(-1));
+        const element = document.getElementById(id);
+
+        if (checkbox.checked) {
+            if (gameData[id.replace('image', 'a')] === true) {
+                element.classList.add('greenBorder');
+            } else {
+                element.classList.add('redBorder');
+            }
+        } else {
+            element.classList.remove('greenBorder', 'redBorder');
+        }
+    }
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+    };
+
+    function saveUserData() {
+         // Get checkbox values and corresponding elements
+        const checkboxes = ['a1', 'a2', 'a3'];
+        const checkboxValues = checkboxes.map(id => {
+            const checkbox = document.getElementById(id);
+            const element = document.getElementById('image' + id.slice(-1));
+            return {
+                id: id,
+                checked: checkbox.checked,
+                element: element
+            };
+        });
+
+        // Count points based on checkbox values and "greenBorder" class
+        let totalPoints = 0;
+        checkboxValues.forEach(checkbox => {
+            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+                totalPoints += 1;
+            }
+        });
+
+        let userData = {
+            'user': 'tick-v1@beanstalkedu.com',
+            'game_name': gameName,
+            'starts': formatedDateTime,
+            'score': totalPoints, // Include the totalPoints in the userData
+        };
+        // console.log(userData);
+        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+            .then(response => {
+                if (response.ok) {
+                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                } else {
+                    // console.log('Something Wrong', response);
+                }
+            })
+            .catch(error => {
+                console.error('An error occurred', error);
+            });
+    }
+
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const contactForm = document.getElementById('contactForm');
+        contactForm.addEventListener('submit', async function (event) {
+            event.preventDefault();
+        });
+    });
+</script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    input[type="checkbox"]{
+        -webkit-appearance: initial;
+        appearance: initial;
+        border: 1px solid gray;
+        border-radius: 5px;
+        /* background: gray; */
+        width: 40px;
+        height: 40px;
+        
+        position: relative;
+    }
+    input[type="checkbox"]:checked {
+        background: #FF0000;
+    }
+    input[type="checkbox"]:checked:after {
+        border: none;
+        content: "X";
+        color: #fff;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        -webkit-transform: translate(-50%,-50%);
+        -moz-transform: translate(-50%,-50%);
+        -ms-transform: translate(-50%,-50%);
+        transform: translate(-50%,-50%);
+        /*
+        * If you want to fully change the check appearance, use the following:
+        * content: " ";
+        * width: 100%;
+        * height: 100%;
+        * background: blue;
+        * top: 0;
+        * left: 0;
+        */
+    }
+    body{
+        font-family: Quicksand;
+    }
+    input.largerCheckbox {
+            /* width: 40px; */
+            height: 40px;
+            cursor: pointer;
+        }
+    .greenBorder{
+        border: 4px solid #008000;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    .redBorder{
+        border: 4px solid red;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    #image1, #image2, #image3, #image4, #image5, #image6{
+        width: 250px;
+    }
+    #label1, #label2, #label3, #label4, #label5, #label6{
+        text-align: center;
+        font-weight: bold;
+        color: #7C4C23;
+        font-size: 20px;
+        padding-top: 10px;
+    }
+    #LearningArea, #LearningSubArea{
+        font-size: 20px;
+        color: #7C4C23;
+        font-weight: bold;
+    }
+    .round-checkbox-label {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label {
+        border-radius: 30%;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 40px;
+        display: block;
+    }
+</style>

src/pages/drag/MyGame.mjs

@@ -1,272 +0,0 @@
-import { assetsList, submitButton, targetZones, isMatch, displayResult } from "./index.astro.inline.mjs";
-
-export class MyGame extends Phaser.Scene {
-constructor() {
-super();
-}
-preload() {
-var progressBar = this.add.graphics();
-var progressBox = this.add.graphics();
-progressBox.fillStyle(2236962, 0.8);
-progressBox.fillRect(240, 270, 320, 50);
-
-var width = this.cameras.main.width;
-var height = this.cameras.main.height;
-var loadingText = this.make.text({
-x: width / 2,
-y: height / 2 - 50,
-text: 'Loading...',
-style: {
-font: '20px monospace',
-fill: '#ffffff'
-}
-});
-loadingText.setOrigin(0.5, 0.5);
-var percentText = this.make.text({
-x: width / 2,
-y: height / 2 - 5,
-text: '0%',
-style: {
-font: '18px monospace',
-fill: '#ffffff'
-}
-});
-percentText.setOrigin(0.5, 0.5);
-var assetText = this.make.text({
-x: width / 2,
-y: height / 2 + 50,
-text: '',
-style: {
-font: '18px monospace',
-fill: '#ffffff'
-}
-});
-assetText.setOrigin(0.5, 0.5);
-this.load.on('progress', function (value) {
-percentText.setText(parseInt(value * 100) + '%');
-progressBar.clear();
-progressBar.fillStyle(16777215, 1);
-progressBar.fillRect(250, 280, 300 * value, 30);
-});
-this.load.on('fileprogress', function (file) {
-assetText.setText('Loading asset: ' + file.key);
-});
-this.load.on('complete', function () {
-progressBar.destroy();
-progressBox.destroy();
-loadingText.destroy();
-percentText.destroy();
-assetText.destroy();
-});
-// this.load.image('logo', 'zenvalogo.png');
-for (var i = 0; i < 5; i++) {
-this.load.image('logo' + i, '/assets/background.jpg');
-}
-this.load.image("topMatch", "/assets/top_match.jpg");
-this.load.image("topLogo", "/assets/top_logo.jpg");
-this.load.image("tick", '/assets/tick.png');
-// this.load.image("bg", '/assets/bgwhite.jpg');
-// this.load.image("target1", assetsList.right_image1);
-// this.load.image("target2", '/assets/hay.png');
-// this.load.image("target3", '/assets/mat.png');
-// this.load.image("target4", '/assets/star.png');
-this.load.image("border", '/assets/squar.png');
-this.load.spritesheet("target1", assetsList.right_image1, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("target2", assetsList.right_image2, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("target3", assetsList.right_image3, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("target4", assetsList.right_image4, {
-frameWidth: 100,
-frameHeight: 100,
-});
-
-this.load.spritesheet("blocks1", assetsList.left_image1, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("blocks2", assetsList.left_image2, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("blocks3", assetsList.left_image3, {
-frameWidth: 100,
-frameHeight: 100,
-});
-this.load.spritesheet("blocks4", assetsList.left_image4, {
-frameWidth: 100,
-frameHeight: 100,
-});
-}
-create() {
-const params = new URLSearchParams(window.location.search);
-const paramsID = params.get('id');
-fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
-.then(response => response.json())
-.then(({ data }) => {
-const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-// Base font size for your text
-const baseFontSize = 20;
-// Calculate responsive font size based on screen width
-const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-const descrptText = this.add.text(screenCenterX, 70, data.description, {
-font: `600 ${responsiveFontSize}px Quicksand`,
-fill: '#7c4c23',
-}).setOrigin(0.5);
-// Left Image Name
-this.add.text(displayW / 14, 240, data.left_image1_name).setTint(8145955);
-this.add.text(displayW / 14, 409, data.left_image2_name).setTint(8145955);
-this.add.text(displayW / 14, 579, data.left_image3_name).setTint(8145955);
-this.add.text(displayW / 14, 750, data.left_image4_name).setTint(8145955);
-
-//Right Image Name
-this.add.text(displayW * 0.9 - 50, 240, data.right_image1_name).setTint(8145955);
-this.add.text(displayW * 0.9 - 50, 409, data.right_image2_name).setTint(8145955);
-this.add.text(displayW * 0.9 - 50, 579, data.right_image3_name).setTint(8145955);
-this.add.text(displayW * 0.9 - 50, 750, data.right_image4_name).setTint(8145955);
-})
-.catch(error => {
-console.error('Error fetching initial data:', error);
-});
-const displayW = window.innerWidth;
-async; submitUserData(); {
-try {
-const response = await fetch(`https://management.beanstalkedu.com/items/game_result`, {
-method: 'POST',
-headers: {
-'Content-Type': 'application/json'
-},
-body: JSON.stringify('Test submission')
-});
-
-if (response.ok) {
-console.log('Data Saved', response);
-} else {
-console.log('Something Wrong', response);
-}
-} catch (error) {
-console.error('An error occurred', error);
-}
-}
-submitButton = this.add.text(window.innerWidth / 2, window.innerHeight / 2, "Submit", {
-font: '600 40px Quicksand',
-fill: '#fff',
-backgroundColor: '#05b3a4',
-});
-submitButton.setVisible(true);
-submitButton.setInteractive().on('pointerdown', () => {
-console.log('Clicked');
-});
-// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-this.add.image(displayW / 6, 30, "topMatch").setScale();
-this.add.image(displayW * 0.8 - 5, 30, "topLogo").setScale();
-this.add.image(displayW * 0.9 - 32, 170, "target1"),
-this.add.image(displayW * 0.9 - 32, 170, "border").setAlpha(0.4).setScale(0.7),
-this.add.image(displayW * 0.9 - 32, 340, "target2"),
-this.add.image(displayW * 0.9 - 32, 340, "border").setAlpha(0.4).setScale(0.7),
-this.add.image(displayW * 0.9 - 32, 510, "target3"),
-this.add.image(displayW * 0.9 - 32, 510, "border").setAlpha(0.4).setScale(0.7),
-this.add.image(displayW * 0.9 - 32, 680, "target4"),
-this.add.image(displayW * 0.9 - 32, 680, "border").setAlpha(0.4).setScale(0.7);
-const blocks = [
-{
-x: displayW / 15 - 10,
-y: 120,
-textureKey: "blocks1",
-id: "block1",
-},
-{
-x: displayW / 15 - 10,
-y: 280,
-textureKey: "blocks2",
-id: "block2",
-},
-{
-x: displayW / 15 - 10,
-y: 460,
-textureKey: "blocks3",
-id: "block3",
-},
-{
-x: displayW / 15 - 10,
-y: 640,
-textureKey: "blocks4",
-id: "block4",
-},
-];
-const droppedBlocks = [];
-const targetZoneBorders = [];
-targetZones.forEach((targetZone) => {
-const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
-targetZoneBorders.push(targetBorder);
-targetZone.block = null;
-}),
-
-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);
-let droppedOnTargetZone = false;
-targetZones.forEach((targetZone, targetIndex) => {
-if (Phaser.Geom.Intersects.RectangleToRectangle(
-newBlock.getBounds(),
-new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
-)) {
-if (targetZone.block === null) {
-newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
-newBlock.disableInteractive();
-targetZone.block = newBlock;
-droppedBlocks.push(newBlock);
-if (isMatch(newBlock.texture.key, targetZone.name)) {
-// 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
-}
-} else {
-newBlock.setPosition(block.x, block.y);
-}
-droppedOnTargetZone = true;
-targetZoneBorders[targetIndex].setVisible(true);
-targetZoneBorders[targetIndex].setAlpha(1);
-return;
-}
-});
-
-if (!droppedOnTargetZone) {
-newBlock.setPosition(block.x, block.y);
-}
-if (droppedBlocks.length === targetZones.length) {
-displayResult(droppedBlocks);
-}
-});
-});
-}
-}

src/pages/drag/index.astro

@@ -57,9 +57,26 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  }
   let submitButton;
   let formattedDateTime;
   let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -71,7 +88,7 @@ import Layout from '../../layouts/Layout.astro';
     // Log the formatted date and time to the console
     // // console.log("Page loaded on: " + formattedDateTime);
   };
-  function generateShortUniqueID(length) {
+  function generateShortUniqueID(length) {14
       const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
       let result = '';
       for (let i = 0; i < length; i++) {
@@ -81,18 +98,7 @@ import Layout from '../../layouts/Layout.astro';
       return result;
   };
   shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-  if(isMobile){
+  let blockMatches;
-      noticeWidth = 100;
-      noticeHeight = 0;
-      buttonWidth = 67;
-      buttonHeight = 0;
-  } else {
-      noticeWidth = 100;
-      noticeHeight = 0;
-      buttonWidth = 100;
-      buttonHeight = 0;
-  }
-
   const targetZones = [
     {
       x: 0,
@@ -119,29 +125,29 @@ import Layout from '../../layouts/Layout.astro';
       block: null,
     },
   ];
-  const blockMatches = [
+  // const blockMatches = [
-    {
+  //   {
-      blockName: "blocks1",
+  //     blockName: "blocks1",
-      targetName: "target1",
+  //     targetName: "target1",
-    },
+  //   },
-    {
+  //   {
-      blockName: "blocks2",
+  //     blockName: "blocks2",
-      targetName: "target2",
+  //     targetName: "target2",
-    },
+  //   },
-    {
+  //   {
-      blockName: "blocks3",
+  //     blockName: "blocks3",
-      targetName: "target3",
+  //     targetName: "target3",
-    },
+  //   },
-    {
+  //   {
-      blockName: "blocks4",
+  //     blockName: "blocks4",
-      targetName: "target4",
+  //     targetName: "target4",
-    },
+  //   },
-  ];
+  // ];
   // console.log(blockMatches.blockName, blockMatches.targetName)
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
-  const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
@@ -150,7 +156,7 @@ import Layout from '../../layouts/Layout.astro';
         } else{
           imageCustomWidth = "?width=100";
         }
-        const assetsURL = "https://management.beanstalkedu.com/assets/"
+        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
         assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
         assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
         assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
@@ -286,29 +292,50 @@ import Layout from '../../layouts/Layout.astro';
     create() {
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
+            // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             // Base font size for your text
-            const baseFontSize = 20;
+            const baseFontSize = 30;
             // Calculate responsive font size based on screen width
             const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 70, data.description, {
+            const descrptText = this.add.text(screenCenterX, 76, data.description, {
-              font: `600 ${responsiveFontSize}px Quicksand`,
+              font: ` ${responsiveFontSize}px Quicksand`,
               fill: '#7c4c23',
             }).setOrigin(0.5);
+             blockMatches = [
+              {
+                blockName: "blocks1",
+                targetName: `target${data.right_match1}`,
+              },
+              {
+                blockName: "blocks2",
+                targetName: `target${data.right_match2}`,
+              },
+              {
+                blockName: "blocks3",
+                targetName: `target${data.right_match3}`,
+              },
+              {
+                blockName: "blocks4",
+                targetName: `target${data.right_match4}`,
+              },
+            ];
+            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
-            this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
-            this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23);      
+            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
-            this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23); 
+            this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23); 
-            this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23);
+            this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
             
             //Right Image Name
-            this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
-            this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
-            this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
-            this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
@@ -317,13 +344,13 @@ import Layout from '../../layouts/Layout.astro';
         const URL = window.location.href;
         const gameName = URL.split('/');
         let userData = {
-            'status' : 'published',
+          'user': 'drawing@beanstalkedu.com',
-            'user_id': 'drag@beanstalkedu.com',
+                'game_name': gameName[3],
-            'game_name': gameName[3],
+                'starts': formattedDateTime,
-            'game_open': formattedDateTime,
+                // 'game_start' : gameStartTime,
         };
         function submitUserData() {
-          fetch(`https://management.beanstalkedu.com/items/game_result`, {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
             method: 'POST',
             headers: {
               'Content-Type' : 'application/json'
@@ -332,9 +359,9 @@ import Layout from '../../layouts/Layout.astro';
           })
           .then(response => {
             if(response.ok){
-              console.log('Data Saved', response)
+              // console.log('Data Saved', response)
             } else{
-              console.log('Something Wrong', response)
+              // console.log('Something Wrong', response)
             }
           })
           .catch(error => {
@@ -367,34 +394,34 @@ import Layout from '../../layouts/Layout.astro';
         this.add.image(displayW / 6, 30, "topMatch").setScale();
         this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
         this.add.image(displayW * 0.9-32, 170, "target1"),
-        this.add.image(displayW * 0.9-32, 170, "border").setAlpha(0.4).setScale(0.7),
+        this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
         this.add.image(displayW * 0.9-32, 340, "target2"),
-        this.add.image(displayW * 0.9-32, 340, "border").setAlpha(0.4).setScale(0.7),
+        this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
         this.add.image(displayW * 0.9-32, 510, "target3"),
-        this.add.image(displayW * 0.9-32, 510, "border").setAlpha(0.4).setScale(0.7),
+        this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
         this.add.image(displayW * 0.9-32, 680, "target4"),
-        this.add.image(displayW * 0.9-32, 680, "border").setAlpha(0.4).setScale(0.7);
+        this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
         const blocks = [
           {
-            x: displayW / 15 - 10,
+            x: displayW / 15 - 15,
             y: 120,
             textureKey: "blocks1",
             id: "block1",
           },
           {
-            x: displayW / 15 - 10,
+            x: displayW / 15 - 15,
             y: 280,
             textureKey: "blocks2",
             id: "block2",
           },
           {
-            x: displayW / 15 - 10,
+            x: displayW / 15 - 15,
             y: 460,
             textureKey: "blocks3",
             id: "block3",
           },
           {
-            x: displayW / 15 - 10,
+            x: displayW / 15 - 15,
             y: 640,
             textureKey: "blocks4",
             id: "block4",
@@ -404,7 +431,7 @@ import Layout from '../../layouts/Layout.astro';
         const targetZoneBorders = [];
         targetZones.forEach((targetZone) => {
           const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
@@ -471,6 +498,39 @@ import Layout from '../../layouts/Layout.astro';
             }
           });
         }); 
+        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);
+            }
+        };
+      
     }
   }
 // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@@ -495,81 +555,7 @@ import Layout from '../../layouts/Layout.astro';
       const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
     });
   };
-  let score = 0;
-  let counter = 0;
 
-  const isMatch = (blockName, targetName) => {
-  if(isMatch){
-    counter++;
-    // console.log(counter)
-
-    if(counter === 4){
-        const overlap = document.getElementById("overlap");
-        overlap.style.display = "block";
-        console.log(counter)
-        submitButton.setVisible(true);
-    }
-  }
-  const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-  let scoreTotal=0;
-  if(match){
-    scoreTotal++;
-    // console.log(scoreTotal)
-  }
-  //   console.log(scoreTotal)
-  //   // console.log(match)
-  //   if(match){
-  //     score++;
-  //     console.log(score)
-  //     let day;
-  //     switch (score) {
-  //       case 0:
-  //         day = "Points - 1";
-  //         break;
-  //       case 2:
-  //         day = "Points - 2";
-  //         break;
-  //       case 4:
-  //         day = "Points - 4";
-
-  //     }
-  //     console.log(day)
-  //       finalDom = document.getElementById("good");
-  //       finalDom.classList.add("good");
-  //       document.getElementById("good").innerHTML = day;
-  //       document.getElementById("good").style.color = '#7c4c23'
-  // // console.log(totalScore)
-  //     // if(score === 2){
-  //     //   finalDom = document.getElementById("good");
-  //     //   finalDom.classList.add("good");
-  //     //   document.getElementById("good").innerHTML = " Good";
-  //     //   document.getElementById("good").style.color = '#7c4c23'
-
-
-  //     //   // let img = document.createElement("img");
-  //     //   // img.src = "/assets/party-feestje.gif";
-  //     //   // img.width = 100;
-  //     //   // document.getElementById('win').appendChild(img);
-  //     // }
-  //     // else if(score === 4) {
-  //     //   finalDom = document.getElementById("verryGood");
-  //     //   finalDom.classList.add("verryGood");
-  //     //   document.getElementById("verryGood").innerHTML = "Verry Good";
-  //     //   document.getElementById("verryGood").style.color = '#7c4c23'
-  //     // }
-  //     // else {
-  //     //   // finalDom = document.getElementById("lost");
-  //     //   // finalDom.classList.add("lost");
-  //     //   // document.getElementById("lost").innerHTML = " Lost";
-  //     //   // document.getElementById("lost").style.color = '#7c4c23'
-  //     //   // console.log("Losttttt")
-  //     // }
-
-  //   } else{
-  //     score = score
-  //   }
-  //   return match !== undefined;
-  };
 
 </script>
 <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >

src/pages/drag/testv3.astro

@@ -0,0 +1,692 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 40;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 172;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let imageElement1;
+  let imageElement2;
+  let imageElement3;
+  let imageElement4;
+  let imageElement5;
+  let imageElement6;
+  let imageElement7;
+  let imageElement8;
+  // let allElement =  [element1, element2, element3, element4, element5, element6, element7, element8];
+  // allElement.setVisible(false)
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+    // Format the date and time as a string
+   formattedDateTime = currentDate.toLocaleString();
+    
+    // Log the formatted date and time to the console
+    // // console.log("Page loaded on: " + formattedDateTime);
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+
+  const targetZones = [
+    {
+      x: rightTargetZoneW,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 170,
+      name: "target5",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 340,
+      name: "target6",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 510,
+      name: "target7",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 680,
+      name: "target8",
+      block: null,
+    },
+  ];
+  const blockMatches = [
+    {
+      blockName: "blocks1",
+      targetName: "target1",
+    },
+    {
+      blockName: "blocks2",
+      targetName: "target2",
+    },
+    {
+      blockName: "blocks3",
+      targetName: "target3",
+    },
+    {
+      blockName: "blocks4",
+      targetName: "target4",
+    },
+    {
+      blockName: "blocks5",
+      targetName: "target5",
+    },
+    {
+      blockName: "blocks6",
+      targetName: "target6",
+    },
+    {
+      blockName: "blocks7",
+      targetName: "target7",
+    },
+    {
+      blockName: "blocks8",
+      targetName: "target8",
+    },
+    {
+      blockName: "blocks9",
+      targetName: "target9",
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+      .then(response => response.json())
+      .then(({data}) => {
+        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
+        if(isMobile){
+          imageCustomWidth = "?width=100";
+        } else{
+          imageCustomWidth = "?width=100";
+        }
+        const assetsURL = "https://management.beanstalkedu.com/assets/"
+        assetsList.element1  = assetsURL + left_image1   + imageCustomWidth;
+        assetsList.element2  = assetsURL + left_image2   + imageCustomWidth;
+        assetsList.element3  = assetsURL + left_image3   + imageCustomWidth;
+        assetsList.element4  = assetsURL + left_image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + right_image1   + imageCustomWidth;
+        assetsList.element6 = assetsURL + right_image2   + imageCustomWidth;
+        assetsList.element7 = assetsURL + right_image3   + imageCustomWidth;
+        assetsList.element8 = assetsURL + right_image4   + imageCustomWidth;
+        // console.log(assetsList.left_image1)
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        // this.load.image("bg", '/assets/bgwhite.jpg');
+        // this.load.image("target1", assetsList.right_image1);
+        // this.load.image("target2", '/assets/hay.png');
+        // this.load.image("target3", '/assets/mat.png');
+        // this.load.image("target4", '/assets/star.png');
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            // console.log(data)
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 30;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // Left Image Name
+            this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
+            this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);      
+            this.add.text(leftTargetZoneW - 45, 579, data.left_image3_name).setTint(0x7c4c23); 
+            this.add.text(leftTargetZoneW - 45, 750, data.left_image4_name).setTint(0x7c4c23);
+            
+            //Right Image Name leftTargetZoneW rightTargetZoneW
+            this.add.text(rightTargetZoneW - 44, 240, data.right_image1_name).setTint(0x7c4c23);
+            this.add.text(rightTargetZoneW - 44, 409, data.right_image2_name).setTint(0x7c4c23);
+            this.add.text(rightTargetZoneW - 44, 579, data.right_image3_name).setTint(0x7c4c23);
+            this.add.text(rightTargetZoneW - 44, 750, data.right_image4_name).setTint(0x7c4c23);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        // this.add.image(displayW * 0.9-32, 170, "target1"),
+        // this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
+        // this.add.image(displayW * 0.9-32, 340, "target2"),
+        // this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
+        // this.add.image(displayW * 0.9-32, 510, "target3"),
+        // this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
+        // this.add.image(displayW * 0.9-32, 680, "target4"),
+        // this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+        const blocks = [
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks1",
+                id: "block1",
+                visible: true,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks2",
+                id: "block2",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks3",
+                id: "block3",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks4",
+                id: "block4",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+                visible: false,
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+                visible: false,
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        });
+        const blockContainer = this.add.container(0, window.innerHeight - 120);
+        blocks.forEach((block, index) => {
+            const newBlock = this.add.sprite(index * 120, 0, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+            newBlock.on("drag", (pointer, dragX, dragY) => {
+                newBlock.setScale(1.3);
+                newBlock.x = dragX;
+                newBlock.y = dragY;
+            });
+
+            newBlock.on("dragend", () => {
+                newBlock.setScale(1.0);
+                let droppedOnTargetZone = false;
+                targetZones.forEach((targetZone, targetIndex) => {
+                    if (
+                        Phaser.Geom.Intersects.RectangleToRectangle(
+                            newBlock.getBounds(),
+                            new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                        )
+                    ) {
+                        if (targetZone.block === null) {
+                            newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
+                            newBlock.disableInteractive();
+                            targetZone.block = newBlock;
+                            droppedBlocks.push(newBlock);
+                            if (isMatch(newBlock.texture.key, targetZone.name)) {
+                                // Handle match logic
+                            }
+                        } else {
+                            newBlock.setPosition(block.x, block.y);
+                        }
+                        droppedOnTargetZone = true;
+                        targetZoneBorders[targetIndex].setVisible(true);
+                        targetZoneBorders[targetIndex].setAlpha(1);
+                        return;
+                    }
+                });
+
+                if (!droppedOnTargetZone) {
+                    newBlock.setPosition(block.x, block.y);
+                }
+
+                if (droppedBlocks.length === targetZones.length) {
+                    displayResult(droppedBlocks);
+                }
+            });
+
+            blockContainer.add(newBlock);
+        });
+        const scrollLeftButton = this.add.text(10, window.innerHeight - 60, '← Scroll Left', {
+            font: '18px Quicksand',
+            fill: '#fff',
+            backgroundColor: 'blue',
+            padding: { x: 10, y: 5 },
+        }).setDepth(1);
+
+        const scrollRightButton = this.add.text(window.innerWidth - 130, window.innerHeight - 60, 'Scroll Right →', {
+            font: '18px Quicksand',
+            fill: '#fff',
+            backgroundColor: 'blue',
+            padding: { x: 10, y: 5 },
+        }).setDepth(1);
+
+        scrollLeftButton.setInteractive().on('pointerdown', () => {
+            blockContainer.x += 100; // Adjust the scroll speed as needed
+        });
+
+        scrollRightButton.setInteractive().on('pointerdown', () => {
+            blockContainer.x -= 100; // Adjust the scroll speed as needed
+        });
+
+        // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // })
+        let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
+        retryButton.setInteractive().on('pointerdown', () => {
+          window.location.reload();
+        })
+    }
+  }
+  const displayResult = (droppedBlocks) => {
+    // const overlap = document.getElementById("overlap");
+    // overlap.style.display = "block";
+    // let finalDom;
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+  let score = 0;
+  let counter = 0;
+
+  const isMatch = (blockName, targetName) => {
+  if(isMatch){
+    counter++;
+    // console.log(counter)
+
+    if(counter === 8){
+        const overlap = document.getElementById("overlap");
+        overlap.style.display = "block";
+        // console.log(counter)
+        submitButton.setVisible(true);
+    }
+  }
+  const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+  let scoreTotal=0;
+  if(match){
+    scoreTotal++;
+    // console.log(scoreTotal)
+  }
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/tmp.astro

@@ -0,0 +1,609 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 40;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 172;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let scoreTotal  = 0;
+  let resultView; // scoreTotal resultView
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+   formattedDateTime = currentDate.toLocaleString();
+
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+  const leftTargetZones = [
+        {
+            x: leftTargetZoneW + 30,
+            y: window.innerHeight / 2.5,
+            name: "target1",
+            block: null,
+        },
+        // Add more left target zones as needed
+    ];
+
+    const rightTargetZones = [
+        {
+            x: rightTargetZoneW - 30,
+            y: window.innerHeight / 2.5,
+            name: "target2",
+            block: null,
+        },
+        // Add more right target zones as needed
+    ];
+
+    const targetZones = [...leftTargetZones, ...rightTargetZones];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        // console.log(assetsList.left_image1)
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.match1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.match2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.match3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.match4}`,
+                },
+                {
+                  blockName: "blocks5",
+                  targetName: `target${data.match5}`,
+                },
+                {
+                  blockName: "blocks6",
+                  targetName: `target${data.match6}`,
+                },
+                {
+                  blockName: "blocks7",
+                  targetName: `target${data.match7}`,
+                },
+                {
+                  blockName: "blocks8",
+                  targetName: `target${data.match8}`,
+                }
+            ];
+            // console.log(data)
+            if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+            }
+            if(isMobile){
+                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+            } else{
+                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+            }
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 22;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2 - 200,
+                y: window.innerHeight - 250,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 250,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}        
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          console.log(index+1)
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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).setDepth(-2);
+          let droppedOnTargetZone = false;
+
+          targetZones.forEach((targetZone, targetIndex) => {
+              if (
+                  Phaser.Geom.Intersects.RectangleToRectangle(
+                      newBlock.getBounds(),
+                      new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                  )
+              ) {
+                  // Set the position based on target zone index
+                  const col = counter % 2;
+                  const row = Math.floor(counter / 4);
+
+                  // Adjust the x and y coordinates accordingly
+                  newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10));
+
+                  newBlock.disableInteractive();
+                  targetZone.block = newBlock;
+                  droppedBlocks.push(newBlock);
+
+                  // Adjust isMatch function based on your requirements
+                  if (isMatch(newBlock.texture.key, targetZone.name)) {
+                      // Handle match logic if needed
+                  }
+                  droppedOnTargetZone = true;
+                  targetZoneBorders[targetIndex].setVisible(true);
+                  targetZoneBorders[targetIndex].setAlpha(1);
+                  counter++;
+
+                  return;
+              }
+          });
+
+          if (!droppedOnTargetZone) {
+              newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
+          }
+
+          // Check if all blocks have been dropped on target zones
+          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)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          // 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);
+          }
+        };
+    }
+  }
+  const displayResult = (droppedBlocks) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/tmp2.astro

@@ -0,0 +1,636 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 40;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 172;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let scoreTotal  = 0;
+  let resultView; // scoreTotal resultView
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+   formattedDateTime = currentDate.toLocaleString();
+
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+  const leftTargetZones = [
+        {
+            x: window.innerWidth / 4,
+            y: window.innerHeight / 2.5,
+            name: "target1",
+            block: null,
+        },
+        // Add more left target zones as needed
+    ];
+    const centerTargetZones = [
+        {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2.5,
+            name: "target2",
+            block: null,
+        },
+        // Add more right target zones as needed
+    ];
+
+    const rightTargetZones = [
+        {
+            x: window.innerWidth / 1.33,
+            y: window.innerHeight / 2.5,
+            name: "target3",
+            block: null,
+        },
+        // Add more right target zones as needed
+    ];
+
+    const targetZones = [...leftTargetZones, ...centerTargetZones, ...rightTargetZones];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        // console.log(assetsList.left_image1)
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+        // const borderGraphics = this.add.graphics();
+        // borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
+        // const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
+        // borderGraphics.beginPath();
+        // borderGraphics.moveTo(borderX, 130);
+        // borderGraphics.lineTo(borderX, window.innerHeight - 260);
+        // borderGraphics.strokePath();
+        // borderGraphics.closePath();
+        const borderThickness = 6;
+        const borderGraphicsX = this.add.graphics();
+        const borderThicknessX = 6;
+        borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
+        const borderY = window.innerHeight / 1.5; // Center the border vertically on the screen
+        borderGraphicsX.beginPath();
+        borderGraphicsX.moveTo(0, borderY);
+        borderGraphicsX.lineTo(window.innerWidth, borderY);
+        borderGraphicsX.strokePath();
+        borderGraphicsX.closePath();
+
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.match_with1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.match_with2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.match_with3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.match_with4}`,
+                },
+                {
+                  blockName: "blocks5",
+                  targetName: `target${data.match_with5}`,
+                },
+                {
+                  blockName: "blocks6",
+                  targetName: `target${data.match_with6}`,
+                },
+                {
+                  blockName: "blocks7",
+                  targetName: `target${data.match_with7}`,
+                },
+                {
+                  blockName: "blocks8",
+                  targetName: `target${data.match_with8}`,
+                }
+            ];
+            // console.log(data)
+            if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+            }
+            if(isMobile){
+                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+            } else{
+                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+            }
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 22;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2 - 200,
+                y: window.innerHeight - 250,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 250,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.2;}
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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).setDepth(-2);
+          let droppedOnTargetZone = false;
+
+          // Get the Y position from the first target zone
+          const baseY = targetZones[0].y - 50;
+
+          targetZones.forEach((targetZone, targetIndex) => {
+              if (
+                  Phaser.Geom.Intersects.RectangleToRectangle(
+                      newBlock.getBounds(),
+                      new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                  )
+              ) {
+                  const col = counter % 2;
+                  const row = Math.floor(counter / 2);
+                  newBlock.setPosition(targetZone.x - col * (newBlock.width + 10),  row * (newBlock.height + 10));
+                  newBlock.disableInteractive();
+                  targetZone.block = newBlock;
+                  droppedBlocks.push(newBlock);
+
+                  if (isMatch(newBlock.texture.key, targetZone.name)) {
+                      // Handle match logic if needed
+                  }
+
+                  droppedOnTargetZone = true;
+                  targetZoneBorders[targetIndex].setVisible(true);
+                  targetZoneBorders[targetIndex].setAlpha(1);
+                  return;
+              }
+          });
+
+          if (!droppedOnTargetZone) {
+              newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
+          }
+
+          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)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          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);
+          }
+        };
+    }
+  }
+  const displayResult = (droppedBlocks) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v2.astro

@@ -0,0 +1,601 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let blockMatches;
+  let resultView;
+  let scoreTotal = 0;
+
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+    // Format the date and time as a string
+   formattedDateTime = currentDate.toLocaleString();
+    
+    // Log the formatted date and time to the console
+    // // console.log("Page loaded on: " + formattedDateTime);
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+
+  const targetZones = [
+    {
+      x: 0,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {}
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
+        if(isMobile){
+          imageCustomWidth = "?width=100";
+        } else{
+          imageCustomWidth = "?width=100";
+        }
+        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
+        assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
+        assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
+        assetsList.left_image4  = assetsURL + left_image4   + imageCustomWidth;
+        assetsList.right_image1 = assetsURL + right_image1  + imageCustomWidth;
+        assetsList.right_image2 = assetsURL + right_image2  + imageCustomWidth;
+        assetsList.right_image3 = assetsURL + right_image3  + imageCustomWidth;
+        assetsList.right_image4 = assetsURL + right_image4  + imageCustomWidth;
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        // this.load.image("bg", '/assets/bgwhite.jpg');
+        // this.load.image("target1", assetsList.right_image1);
+        // this.load.image("target2", '/assets/hay.png');
+        // this.load.image("target3", '/assets/mat.png');
+        // this.load.image("target4", '/assets/star.png');
+        this.load.image("border", '/assets/squar.png');
+        this.load.spritesheet("target1", assetsList.right_image1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target2", assetsList.right_image2,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target3", assetsList.right_image3,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target4", assetsList.right_image4,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+
+        this.load.spritesheet("blocks1", assetsList.left_image1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks2", assetsList.left_image2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks3", assetsList.left_image3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks4", assetsList.left_image4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            // console.log(data) right_match
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.right_match1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.right_match2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.right_match3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.right_match4}`,
+                },
+              ];
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 20
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 76, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // Left Image Name
+            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
+            this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23); 
+            this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
+            
+            //Right Image Name
+            this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        this.add.image(displayW * 0.9-32, 170, "target1"),
+        this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 340, "target2"),
+        this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 510, "target3"),
+        this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 680, "target4"),
+        this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+        const blocks = [
+          {
+            x: displayW / 15 - 15,
+            y: 120,
+            textureKey: "blocks1",
+            id: "block1",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 280,
+            textureKey: "blocks2",
+            id: "block2",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 460,
+            textureKey: "blocks3",
+            id: "block3",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 640,
+            textureKey: "blocks4",
+            id: "block4",
+          },
+        ];
+        this.graphics = this.add.graphics();
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+
+        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;
+            let targetZoneMatched = null;
+
+            targetZones.forEach((targetZone, targetIndex) => {
+                if (
+                    Phaser.Geom.Intersects.RectangleToRectangle(
+                        newBlock.getBounds(),
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                    )
+                ) {
+                    droppedOnTargetZone = true;
+                    targetZoneMatched = targetZone;
+                    targetZoneBorders[targetIndex].setAlpha(1);
+                    return;
+                }
+            });
+
+            if (droppedOnTargetZone) {
+                // Draw a line from the dragged block to the targetZone
+                this.graphics.lineStyle(6, 0xFF0000); // Red color
+                this.graphics.moveTo(block.x + 50, block.y + 50);
+                this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
+                this.graphics.strokePath();
+
+                newBlock.setPosition(targetZoneMatched.x - 50, targetZoneMatched.y - 50);
+                newBlock.disableInteractive();
+                targetZoneMatched.block = newBlock;
+                droppedBlocks.push(newBlock);
+
+                if (isMatch(newBlock.texture.key, targetZoneMatched.name)) {
+                    // Handle matching logic
+                }
+            } else {
+                newBlock.setPosition(block.x, block.y);
+            }
+
+            if (droppedBlocks.length === targetZones.length) {
+                // Display result or perform any other actions
+                displayResult(droppedBlocks);
+            }
+        });
+        }); 
+        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`}).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";
+    // let finalDom;
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+    margin: 0;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
+  }
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v20.astro

@@ -0,0 +1,601 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+  }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let blockMatches;
+  let resultView;
+  let scoreTotal = 0;
+
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+    // Format the date and time as a string
+   formattedDateTime = currentDate.toLocaleString();
+    
+    // Log the formatted date and time to the console
+    // // console.log("Page loaded on: " + formattedDateTime);
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+
+  const targetZones = [
+    {
+      x: 0,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: 0,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {}
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
+        if(isMobile){
+          imageCustomWidth = "?width=100";
+        } else{
+          imageCustomWidth = "?width=100";
+        }
+        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
+        assetsList.left_image1  = assetsURL + left_image1   + imageCustomWidth;
+        assetsList.left_image2  = assetsURL + left_image2   + imageCustomWidth;
+        assetsList.left_image3  = assetsURL + left_image3   + imageCustomWidth;
+        assetsList.left_image4  = assetsURL + left_image4   + imageCustomWidth;
+        assetsList.right_image1 = assetsURL + right_image1  + imageCustomWidth;
+        assetsList.right_image2 = assetsURL + right_image2  + imageCustomWidth;
+        assetsList.right_image3 = assetsURL + right_image3  + imageCustomWidth;
+        assetsList.right_image4 = assetsURL + right_image4  + imageCustomWidth;
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        // this.load.image("bg", '/assets/bgwhite.jpg');
+        // this.load.image("target1", assetsList.right_image1);
+        // this.load.image("target2", '/assets/hay.png');
+        // this.load.image("target3", '/assets/mat.png');
+        // this.load.image("target4", '/assets/star.png');
+        this.load.image("border", '/assets/squar.png');
+        this.load.spritesheet("target1", assetsList.right_image1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target2", assetsList.right_image2,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target3", assetsList.right_image3,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("target4", assetsList.right_image4,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+
+        this.load.spritesheet("blocks1", assetsList.left_image1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks2", assetsList.left_image2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks3", assetsList.left_image3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+        this.load.spritesheet("blocks4", assetsList.left_image4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            // console.log(data) right_match
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.right_match1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.right_match2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.right_match3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.right_match4}`,
+                },
+              ];
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 30;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 76, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+            // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // Left Image Name
+            this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
+            this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23); 
+            this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
+            
+            //Right Image Name
+            this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
+            this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        this.add.image(displayW * 0.9-32, 170, "target1"),
+        this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 340, "target2"),
+        this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 510, "target3"),
+        this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
+        this.add.image(displayW * 0.9-32, 680, "target4"),
+        this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+        const blocks = [
+          {
+            x: displayW / 15 - 15,
+            y: 120,
+            textureKey: "blocks1",
+            id: "block1",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 280,
+            textureKey: "blocks2",
+            id: "block2",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 460,
+            textureKey: "blocks3",
+            id: "block3",
+          },
+          {
+            x: displayW / 15 - 15,
+            y: 640,
+            textureKey: "blocks4",
+            id: "block4",
+          },
+        ];
+        this.graphics = this.add.graphics();
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+
+        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;
+            let targetZoneMatched = null;
+
+            targetZones.forEach((targetZone, targetIndex) => {
+                if (
+                    Phaser.Geom.Intersects.RectangleToRectangle(
+                        newBlock.getBounds(),
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                    )
+                ) {
+                    droppedOnTargetZone = true;
+                    targetZoneMatched = targetZone;
+                    targetZoneBorders[targetIndex].setAlpha(1);
+                    return;
+                }
+            });
+
+            if (droppedOnTargetZone) {
+                // Draw a line from the dragged block to the targetZone
+                this.graphics.lineStyle(6, 0xFF0000); // Red color
+                this.graphics.moveTo(block.x + 50, block.y + 50);
+                this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
+                this.graphics.strokePath();
+
+                newBlock.setPosition(targetZoneMatched.x - 50, targetZoneMatched.y - 50);
+                newBlock.disableInteractive();
+                targetZoneMatched.block = newBlock;
+                droppedBlocks.push(newBlock);
+
+                if (isMatch(newBlock.texture.key, targetZoneMatched.name)) {
+                    // Handle matching logic
+                }
+            } else {
+                newBlock.setPosition(block.x, block.y);
+            }
+
+            if (droppedBlocks.length === targetZones.length) {
+                // Display result or perform any other actions
+                displayResult(droppedBlocks);
+            }
+        });
+        }); 
+        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`}).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";
+    // let finalDom;
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+    margin: 0;
+    padding: 0;
+    cursor: -webkit-grab; cursor: grab;
+    font-family: quicksand;
+  }
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v3.astro

@@ -0,0 +1,615 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth * 0.9 - 40;
+      rightTargetZoneW = window.innerWidth / 6;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth * 0.9 - 172;
+      rightTargetZoneW = window.innerWidth / 6;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let resultView;
+  let scoreTotal = 0; // resultView scoreTotal
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+    // Format the date and time as a string
+   formattedDateTime = currentDate.toLocaleString();
+    
+    // Log the formatted date and time to the console
+    // // console.log("Page loaded on: " + formattedDateTime);
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+
+  const targetZones = [
+    {
+      x: rightTargetZoneW,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 170,
+      name: "target5",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 340,
+      name: "target6",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 510,
+      name: "target7",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 680,
+      name: "target8",
+      block: null,
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            console.log(data)
+            blockMatches = [
+              {
+                blockName: "blocks1",
+                targetName: `target${data.match_with1}`,
+              },
+              {
+                blockName: "blocks2",
+                targetName: `target${data.match_with2}`,
+              },
+              {
+                blockName: "blocks3",
+                targetName: `target${data.match_with3}`,
+              },
+              {
+                blockName: "blocks4",
+                targetName: `target${data.match_with4}`,
+              },
+              {
+                blockName: "blocks5",
+                targetName: `target${data.match_with5}`,
+              },
+              {
+                blockName: "blocks6",
+                targetName: `target${data.match_with6}`,
+              },
+              {
+                blockName: "blocks7",
+                targetName: `target${data.match_with7}`,
+              },
+              {
+                blockName: "blocks8",
+                targetName: `target${data.match_with8}`,
+              }
+            ];
+            // console.log(data)
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 30;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2-400,
+                y: window.innerHeight - 120,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-300,
+                y: window.innerHeight - 120,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2 - 100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2+200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+300,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone, index) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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(
+                  newBlock.getBounds(),
+                  new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                )
+              ) {
+                if (targetZone.block === null) {
+                  newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
+                  newBlock.disableInteractive();
+                  targetZone.block = newBlock;
+                  droppedBlocks.push(newBlock);
+                  if (isMatch(newBlock.texture.key, targetZone.name)) {
+                  }
+                } else {
+                  newBlock.setPosition(block.x, block.y);
+                }
+                droppedOnTargetZone = true;
+                targetZoneBorders[targetIndex].setVisible(true);
+                targetZoneBorders[targetIndex].setAlpha(1);
+                return;
+              }
+            });
+
+            if (!droppedOnTargetZone) {
+              newBlock.setPosition(block.x, block.y);
+            }
+            if (droppedBlocks.length === targetZones.length) 
+            {
+              displayResult(droppedBlocks);
+            }
+          });
+        });
+        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) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v30.astro

@@ -0,0 +1,615 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth * 0.9 - 40;
+      rightTargetZoneW = window.innerWidth / 6;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth * 0.9 - 172;
+      rightTargetZoneW = window.innerWidth / 6;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let resultView;
+  let scoreTotal = 0; // resultView scoreTotal
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+    // Format the date and time as a string
+   formattedDateTime = currentDate.toLocaleString();
+    
+    // Log the formatted date and time to the console
+    // // console.log("Page loaded on: " + formattedDateTime);
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+
+  const targetZones = [
+    {
+      x: rightTargetZoneW,
+      y: 170,
+      name: "target1",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 340,
+      name: "target2",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 510,
+      name: "target3",
+      block: null,
+    },
+    {
+      x: rightTargetZoneW,
+      y: 680,
+      name: "target4",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 170,
+      name: "target5",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 340,
+      name: "target6",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 510,
+      name: "target7",
+      block: null,
+    },
+    {
+      x: leftTargetZoneW,
+      y: 680,
+      name: "target8",
+      block: null,
+    },
+  ];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            console.log(data)
+            blockMatches = [
+              {
+                blockName: "blocks1",
+                targetName: `target${data.match_with1}`,
+              },
+              {
+                blockName: "blocks2",
+                targetName: `target${data.match_with2}`,
+              },
+              {
+                blockName: "blocks3",
+                targetName: `target${data.match_with3}`,
+              },
+              {
+                blockName: "blocks4",
+                targetName: `target${data.match_with4}`,
+              },
+              {
+                blockName: "blocks5",
+                targetName: `target${data.match_with5}`,
+              },
+              {
+                blockName: "blocks6",
+                targetName: `target${data.match_with6}`,
+              },
+              {
+                blockName: "blocks7",
+                targetName: `target${data.match_with7}`,
+              },
+              {
+                blockName: "blocks8",
+                targetName: `target${data.match_with8}`,
+              }
+            ];
+            // console.log(data)
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 30;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2-400,
+                y: window.innerHeight - 120,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-300,
+                y: window.innerHeight - 120,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2 - 100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2+200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+300,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone, index) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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(
+                  newBlock.getBounds(),
+                  new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                )
+              ) {
+                if (targetZone.block === null) {
+                  newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
+                  newBlock.disableInteractive();
+                  targetZone.block = newBlock;
+                  droppedBlocks.push(newBlock);
+                  if (isMatch(newBlock.texture.key, targetZone.name)) {
+                  }
+                } else {
+                  newBlock.setPosition(block.x, block.y);
+                }
+                droppedOnTargetZone = true;
+                targetZoneBorders[targetIndex].setVisible(true);
+                targetZoneBorders[targetIndex].setAlpha(1);
+                return;
+              }
+            });
+
+            if (!droppedOnTargetZone) {
+              newBlock.setPosition(block.x, block.y);
+            }
+            if (droppedBlocks.length === targetZones.length) 
+            {
+              displayResult(droppedBlocks);
+            }
+          });
+        });
+        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) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v4.astro

@@ -0,0 +1,629 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 40;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 172;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let scoreTotal  = 0;
+  let resultView; // scoreTotal resultView
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+   formattedDateTime = currentDate.toLocaleString();
+
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+  const leftTargetZones = [
+        {
+            x: leftTargetZoneW + 30,
+            y: window.innerHeight / 2.5,
+            name: "target1",
+            block: null,
+        },
+        // Add more left target zones as needed
+    ];
+
+    const rightTargetZones = [
+        {
+            x: rightTargetZoneW - 30,
+            y: window.innerHeight / 2.5,
+            name: "target2",
+            block: null,
+        },
+        // Add more right target zones as needed
+    ];
+
+    const targetZones = [...leftTargetZones, ...rightTargetZones];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        // console.log(assetsList.left_image1)
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+        // const borderGraphics = this.add.graphics();
+        // const borderThickness = 6;
+        // borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
+        // const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
+        // borderGraphics.beginPath();
+        // borderGraphics.moveTo(borderX, 130);
+        // borderGraphics.lineTo(borderX, window.innerHeight - 260);
+        // borderGraphics.strokePath();
+        // borderGraphics.closePath();
+
+        // const borderGraphicsX = this.add.graphics();
+        // const borderThicknessX = 6;
+        // borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
+        // const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
+        // borderGraphicsX.beginPath();
+        // borderGraphicsX.moveTo(0, borderY);
+        // borderGraphicsX.lineTo(window.innerWidth, borderY);
+        // borderGraphicsX.strokePath();
+        // borderGraphicsX.closePath();
+
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.match1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.match2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.match3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.match4}`,
+                },
+                {
+                  blockName: "blocks5",
+                  targetName: `target${data.match5}`,
+                },
+                {
+                  blockName: "blocks6",
+                  targetName: `target${data.match6}`,
+                },
+                {
+                  blockName: "blocks7",
+                  targetName: `target${data.match7}`,
+                },
+                {
+                  blockName: "blocks8",
+                  targetName: `target${data.match8}`,
+                }
+            ];
+            // console.log(data)
+            if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+            }
+            if(isMobile){
+                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+            } else{
+                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+            }
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 22;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2 - 200,
+                y: window.innerHeight - 250,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 250,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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).setDepth(-2);
+            let droppedOnTargetZone = false;
+
+            targetZones.forEach((targetZone, targetIndex) => {
+                if (
+                    Phaser.Geom.Intersects.RectangleToRectangle(
+                        newBlock.getBounds(),
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                    )
+                ) {
+                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
+                    const col = counter % 2;
+                    const row = Math.floor(counter / 2);
+
+                        newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
+                        newBlock.disableInteractive();
+                        targetZone.block = newBlock;
+                        droppedBlocks.push(newBlock);
+
+                        // Adjust isMatch function based on your requirements
+                        if (isMatch(newBlock.texture.key, targetZone.name)) {
+                            // Handle match logic if needed
+                        }
+
+                        droppedOnTargetZone = true;
+                        targetZoneBorders[targetIndex].setVisible(true);
+                        targetZoneBorders[targetIndex].setAlpha(0);
+                        return;
+                    }
+            });
+
+            if (!droppedOnTargetZone) {
+                newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
+            };
+
+            // Check if all blocks have been dropped on target zones
+            if (droppedBlocks.length === targetZones.length) {
+                displayResult(droppedBlocks);
+                newBlock.setVisible(false);
+            }
+        });
+
+
+
+        });
+        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)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          // 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);
+          }
+        };
+    }
+  }
+  const displayResult = (droppedBlocks) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>

src/pages/drag/v40.astro

@@ -0,0 +1,627 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Drag Game">
+	<main>
+		<div>
+      <div>
+        
+        <!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
+        <div class="flex justify-center">
+          <div class="container mx-auto px-4">
+            <!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
+              <img src="/assets/top_match.jpg" alt="" />
+              <img src="/assets/top_logo.jpg" alt="" />
+            </div> -->
+          </div>
+          <!-- <h2>{data.name}</h2> -->
+          <!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
+        </div>
+      </div>
+      <div id="overlap">
+        <!-- <div id="result"></div> -->
+        <div id="verryGood" class="displayNone "> 
+          <!-- <p>Congratulations!</p>
+          <p>You win the Game!</p> -->
+          <!-- <img class="" src="/assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" /> -->
+          <!-- <div class="flex flex-row">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div> -->
+        </div>
+        <div id="good" class="displayNone">
+          <!-- <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="/assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a> -->
+        </div>
+        <div id="lost" class="displayNone"></div>
+      </div>
+		</div>
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const drawingZone = {
+      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+      y: window.innerHeight / 4,
+      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+      height: window.innerHeight / 2,
+  };
+  if(isMobile){
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 67;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 140;
+      retryButtonHeight = window.innerHeight - 50;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 40;
+    } else {
+      noticeWidth = 100;
+      noticeHeight = 0;
+      buttonWidth = 100;
+      buttonHeight = 0;
+      retryButtonWidth = window.innerWidth / 2 - 50;
+      retryButtonHeight = window.innerHeight - 70;
+      leftTargetZoneW = window.innerWidth / 6;
+      rightTargetZoneW = window.innerWidth * 0.9 - 172;
+    }
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let retryButton;
+  let blockMatches;
+  let scoreTotal  = 0;
+  let resultView; // scoreTotal resultView
+  gameResult = [];
+  window.onload = function() {
+    // Get the current date and time
+    currentDate = new Date();
+    
+   formattedDateTime = currentDate.toLocaleString();
+
+  };
+  function generateShortUniqueID(length) {14
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 
+  const leftTargetZones = [
+        {
+            x: leftTargetZoneW + 30,
+            y: window.innerHeight / 2.5,
+            name: "target1",
+            block: null,
+        },
+        // Add more left target zones as needed
+    ];
+
+    const rightTargetZones = [
+        {
+            x: rightTargetZoneW - 30,
+            y: window.innerHeight / 2.5,
+            name: "target2",
+            block: null,
+        },
+        // Add more right target zones as needed
+    ];
+
+    const targetZones = [...leftTargetZones, ...rightTargetZones];
+  // console.log(blockMatches.blockName, blockMatches.targetName)
+  var assetsList = {};
+  const params = new URLSearchParams(window.location.search);
+  const paramsID = params.get('id');
+  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+      .then(response => response.json())
+      .then(({data}) => {
+        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/"
+        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
+        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
+        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
+        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
+        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
+        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
+        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
+        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
+        // console.log(assetsList.left_image1)
+        const config = {
+          type: Phaser.AUTO,
+          width: window.innerWidth,
+          height: window.innerHeight,
+          backgroundColor: '#ffffff',
+          parent: "phaser-example",
+          scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+            },
+          scene: MyGame,
+        };
+        const game = new Phaser.Game(config);    
+        
+      })
+      .catch(error => {
+
+        console.error('Error fetching initial data:', error);
+      });
+  class MyGame extends Phaser.Scene {
+    constructor() {
+      super();
+    }
+    preload() {
+        var progressBar = this.add.graphics();
+        var progressBox = this.add.graphics();
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(240, 270, 320, 50);
+        
+        var width = this.cameras.main.width;
+        var height = this.cameras.main.height;
+        var loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 50,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 0.5);
+        var percentText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 5,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+        var assetText = this.make.text({
+            x: width / 2,
+            y: height / 2 + 50,
+            text: '',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        assetText.setOrigin(0.5, 0.5);
+        this.load.on('progress', function (value) {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(250, 280, 300 * value, 30);
+        });
+        this.load.on('fileprogress', function (file) {
+            assetText.setText('Loading asset: ' + file.key);
+        });
+        this.load.on('complete', function () {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+            assetText.destroy();
+        });
+        // this.load.image('logo', 'zenvalogo.png');
+        for (var i = 0; i < 5; i++) {
+            this.load.image('logo'+i, '/assets/background.jpg');
+        }
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tick", '/assets/tick.png');
+        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/squar.png');
+          this.load.spritesheet("blocks1", assetsList.element5,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks2", assetsList.element6,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks3", assetsList.element7,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks4", assetsList.element8,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks5", assetsList.element1,{
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks6", assetsList.element2, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks7", assetsList.element3, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+         this.load.spritesheet("blocks8", assetsList.element4, {
+          frameWidth: 100,
+          frameHeight: 100,
+        });
+    }
+    
+    create() {
+        // const borderGraphics = this.add.graphics();
+        // const borderThickness = 6;
+        // borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
+        // const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
+        // borderGraphics.beginPath();
+        // borderGraphics.moveTo(borderX, 130);
+        // borderGraphics.lineTo(borderX, window.innerHeight - 260);
+        // borderGraphics.strokePath();
+        // borderGraphics.closePath();
+
+        // const borderGraphicsX = this.add.graphics();
+        // const borderThicknessX = 6;
+        // borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
+        // const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
+        // borderGraphicsX.beginPath();
+        // borderGraphicsX.moveTo(0, borderY);
+        // borderGraphicsX.lineTo(window.innerWidth, borderY);
+        // borderGraphicsX.strokePath();
+        // borderGraphicsX.closePath();
+
+      const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+          .then(response => response.json())
+          .then(({ data }) => {
+            blockMatches = [
+                {
+                  blockName: "blocks1",
+                  targetName: `target${data.match1}`,
+                },
+                {
+                  blockName: "blocks2",
+                  targetName: `target${data.match2}`,
+                },
+                {
+                  blockName: "blocks3",
+                  targetName: `target${data.match3}`,
+                },
+                {
+                  blockName: "blocks4",
+                  targetName: `target${data.match4}`,
+                },
+                {
+                  blockName: "blocks5",
+                  targetName: `target${data.match5}`,
+                },
+                {
+                  blockName: "blocks6",
+                  targetName: `target${data.match6}`,
+                },
+                {
+                  blockName: "blocks7",
+                  targetName: `target${data.match7}`,
+                },
+                {
+                  blockName: "blocks8",
+                  targetName: `target${data.match8}`,
+                }
+            ];
+            // console.log(data)
+            if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+            }
+            if(isMobile){
+                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+            } else{
+                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
+                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+            }
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            // Base font size for your text
+            const baseFontSize = 22;
+            // Calculate responsive font size based on screen width
+            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
+            const descrptText = this.add.text(screenCenterX, 95, data.description, {
+              font: ` ${responsiveFontSize}px Quicksand`,
+              fill: '#7c4c23',
+            }).setOrigin(0.5);
+          })
+          .catch(error => {
+            console.error('Error fetching initial data:', error);
+          });
+        const displayW = window.innerWidth;
+        const URL = window.location.href;
+        const gameName = URL.split('/');
+        let userData = {
+          'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+        };
+        function submitUserData() {
+          fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+          })
+          .then(response => {
+            if(response.ok){
+              // console.log('Data Saved', response)
+            } else{
+              // console.log('Something Wrong', response)
+            }
+          })
+          .catch(error => {
+            console.error('An error occured', error)
+          }); 
+        };
+        // window.load
+
+        const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
+            font: '600 20px Quicksand',
+            fill: 'blue'
+          }).setDepth(1);
+          submitNotic.setVisible(false);
+        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+          font: '600 30px Quicksand',
+          fill: '#fff',
+          backgroundColor: 'blue',
+          padding: { x: 20, y: 10 },
+        }).setDepth(1);
+        submitButton.setVisible(false);
+        submitButton.setInteractive().on('pointerdown', () => {
+          // console.log('Clicked');
+          submitButton.setVisible(false);
+          submitNotic.setVisible(true);
+          // window.location.reload();
+          // windowLoad();
+          submitUserData();
+        })
+        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
+        this.add.image(displayW / 6, 30, "topMatch").setScale();
+        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+        const blocks = [
+            {
+                x: displayW / 2 - 200,
+                y: window.innerHeight - 250,
+                textureKey: "blocks1",
+                id: "block1",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks2",
+                id: "block2",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 250,
+                textureKey: "blocks3",
+                id: "block3",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 250,
+                textureKey: "blocks4",
+                id: "block4",
+            },
+            {
+                x: displayW / 2-200,
+                y: window.innerHeight - 120,
+                textureKey: "blocks5",
+                id: "block5",
+            },
+            {
+                x: displayW / 2-100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks6",
+                id: "block6",
+            },
+            {
+                x: displayW / 2,
+                y: window.innerHeight - 120,
+                textureKey: "blocks7",
+                id: "block7",
+            },
+            {
+                x: displayW / 2+100,
+                y: window.innerHeight - 120,
+                textureKey: "blocks8",
+                id: "block8",
+            },
+        ];
+        // console.log('test blocks',blocks[0])
+        let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
+        const droppedBlocks = [];
+        const targetZoneBorders = [];
+        targetZones.forEach((targetZone) => {
+          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
+          targetZoneBorders.push(targetBorder);
+          targetZone.block = null;
+        }),
+        blocks.forEach((block, index) => {
+          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          // 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).setDepth(-2);
+            let droppedOnTargetZone = false;
+
+            targetZones.forEach((targetZone, targetIndex) => {
+                if (
+                    Phaser.Geom.Intersects.RectangleToRectangle(
+                        newBlock.getBounds(),
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                    )
+                ) {
+                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
+                    const col = counter % 2;
+                    const row = Math.floor(counter / 2);
+                        newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
+                        newBlock.disableInteractive();
+                        targetZone.block = newBlock;
+                        droppedBlocks.push(newBlock);
+
+                        // Adjust isMatch function based on your requirements
+                        if (isMatch(newBlock.texture.key, targetZone.name)) {
+                            // Handle match logic if needed
+                        }
+
+                        droppedOnTargetZone = true;
+                        targetZoneBorders[targetIndex].setVisible(true);
+                        targetZoneBorders[targetIndex].setAlpha(1);
+                        return;
+                    }
+            });
+
+            if (!droppedOnTargetZone) {
+                newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
+            }
+
+            // Check if all blocks have been dropped on target zones
+            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)
+          }
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          // 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);
+          }
+        };
+    }
+  }
+  const displayResult = (droppedBlocks) => {
+    droppedBlocks.forEach((block) => {
+      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
+    });
+  };
+
+</script>
+<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+font-family: quicksand;
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .verryGood{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .good{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+</style>