From e8399473c4679e6907cc470abbf8fe06ddd155a3 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Tue, 26 Mar 2024 16:53:09 +0000
Subject: [PATCH] ch

---
 src/pages/cross/cross_phonics_v2.astro  | 310 ++++++++++++
 src/pages/drag/dragdrop_phonics.astro   | 629 ++++++++++++++++++++++++
 src/pages/drag/match_phonics.astro      | 601 ++++++++++++++++++++++
 src/pages/drawing/drawing_phonics.astro |   4 +-
 src/pages/tick/tick_phonics_v1.astro    | 404 +++++++++++++++
 src/pages/tick/tick_phonics_v2.astro    | 459 +++++++++++++++++
 src/pages/tick/tick_phonics_v3.astro    | 228 +++++++++
 7 files changed, 2633 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/cross/cross_phonics_v2.astro
 create mode 100644 src/pages/drag/dragdrop_phonics.astro
 create mode 100644 src/pages/drag/match_phonics.astro
 create mode 100644 src/pages/tick/tick_phonics_v1.astro
 create mode 100644 src/pages/tick/tick_phonics_v2.astro
 create mode 100644 src/pages/tick/tick_phonics_v3.astro

diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
new file mode 100644
index 0000000..e0212ea
--- /dev/null
+++ b/src/pages/cross/cross_phonics_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/cross_phonics_option_9/${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>
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
new file mode 100644
index 0000000..51bac51
--- /dev/null
+++ b/src/pages/drag/dragdrop_phonics.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/drag_drop_phonics/${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/drag_drop_phonics/${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>
\ No newline at end of file
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
new file mode 100644
index 0000000..e8cf9f4
--- /dev/null
+++ b/src/pages/drag/match_phonics.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/drag_phonics/${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/drag_phonics/${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>
\ No newline at end of file
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index 7c60d72..eb1b525 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -183,9 +183,9 @@ import Layout from '../../layouts/Layout.astro';
             }
             const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.31);
             } else{
-                outlineImage.setDepth(1).setScale(0.65);   
+                outlineImage.setDepth(1).setScale(0.5);   
             }
 
             graphics = this.add.graphics();
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
new file mode 100644
index 0000000..68d163e
--- /dev/null
+++ b/src/pages/tick/tick_phonics_v1.astro
@@ -0,0 +1,404 @@
+---
+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">Tick</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">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label1"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                
+                                <label for="a2" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                            </div>
+                            <div class="flex flex-col gap-6 place-items-center">
+                                <label for="a3" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                
+                                <label for="a4" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label4"></p>
+                                    </div>
+                                </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">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label5"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+                                
+                                <label for="a6" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label6"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                            </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/tick_phonics_option_6/${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('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', '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>
+<!-- <script is:inline>
+
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    .then(res => res.json())
+    .then(data => {
+        gameData = data.data;
+        // console.log(gameData);  
+        document.getElementById("gameDescription").innerHTML = gameData.game_description;
+        const assetsURL = 'https://management.beanstalkedu.com/assets/';
+        document.getElementById("image1").src = assetsURL + gameData.image1;
+        document.getElementById("image2").src = assetsURL + gameData.image2;
+        document.getElementById("image3").src = assetsURL + gameData.image3;
+        document.getElementById("image4").src = assetsURL + gameData.image4;
+        document.getElementById("image5").src = assetsURL + gameData.image5;
+        document.getElementById("image6").src = assetsURL + gameData.image6;
+    });
+    function checkResult2(id){
+        // console.log(gameData.a1)
+        // alert("Matched")
+        if(id == 'image1'){
+            if( gameData.a1 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        };
+        if(id == 'image2'){
+            if(gameData.a2 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        };
+        if(id == 'image3'){
+            if(gameData.a3 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        };
+        if(id == 'image4'){
+            if(gameData.a4 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        };
+        if(id == 'image5'){
+            if(gameData.a5 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        };
+        if(id == 'image6'){
+            if(gameData.a6 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            // console.log('Value True')
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                // console.log('Value False')
+            }
+        }
+       
+    };
+    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();
+        // console.log(formatedDateTime);
+
+        // Create userData object inside the onload event
+        let userData = {
+            'f2': formatedDateTime,
+        };
+        // console.log(userData); // Now, f1 and f2 should have values
+    };
+    function generateShortUniqueID(length) {
+        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;
+    }
+    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
+    function saveUserData() {
+        // Move the userData object creation inside the saveUserData function if needed
+        let userData = {
+            'status' : 'published',
+            'user_id': 'tick-v1@beanstalkedu.com',
+            'game_name': gameName,
+            'game_open': formatedDateTime,
+        };
+
+        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';
+                // console.log('Data Saved', response);
+            } 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');
+    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>
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
new file mode 100644
index 0000000..f29ef3d
--- /dev/null
+++ b/src/pages/tick/tick_phonics_v2.astro
@@ -0,0 +1,459 @@
+---
+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">Tick</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" class="flex flex-col justify-center">
+                        <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">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label1"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+    
+                                <label for="a2" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+    
+                                <label for="a3" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a4" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label4"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+    
+                                <label for="a5" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label5"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+    
+                                <label for="a6" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label6"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a7" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label7"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
+    
+                                <label for="a8" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label8"></p>
+                                    </div>
+                                </label>
+                                <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
+    
+                                <label for="a9" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label9"></p>
+                                    </div>
+                                </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/tick_phonics_option_9/${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>
+<!-- <script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    .then(res => res.json())
+    .then(data => {
+        gameData = data.data;
+        // console.log(gameData);  
+        document.getElementById("gameDescription").innerHTML = gameData.description;
+        const assetsURL = 'https://management.beanstalkedu.com/assets/';
+        document.getElementById("image1").src = assetsURL + gameData.image1;
+        document.getElementById("image2").src = assetsURL + gameData.image2;
+        document.getElementById("image3").src = assetsURL + gameData.image3;
+        document.getElementById("image4").src = assetsURL + gameData.image4;
+        document.getElementById("image5").src = assetsURL + gameData.image5;
+        document.getElementById("image6").src = assetsURL + gameData.image6;
+        document.getElementById("image7").src = assetsURL + gameData.image7;
+        document.getElementById("image8").src = assetsURL + gameData.image8;
+        document.getElementById("image9").src = assetsURL + gameData.image9;
+    });
+    function checkResult2(id){
+        // alert("Matched")
+        if(id == 'image1'){
+            // console.log(gameData.a1)
+            if(gameData.a1 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image2'){
+            if(gameData.a2 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image3'){
+            if(gameData.a3 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image4'){
+            if(gameData.a4 == true){
+                var element = document.getElementById(id);
+                element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image5'){
+            if(gameData.a5 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image6'){
+            if(gameData.a6 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image7'){
+            if(gameData.a7 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image8'){
+            if(gameData.a8 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+        if(id == 'image9'){
+            if(gameData.a9 == true){
+            var element = document.getElementById(id);
+            element.classList.add("greenBorder");
+            } else{
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+            }
+        };
+       
+    };
+    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();
+        // console.log(formatedDateTime);
+
+        // Create userData object inside the onload event
+        let userData = {
+            'f2': formatedDateTime,
+        };
+        // console.log(userData); // Now, f1 and f2 should have values
+    };
+    function generateShortUniqueID(length) {
+        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;
+    }
+    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
+    function saveUserData() {
+        let userData = {
+            'status' : 'published',
+            'user_id': 'tick-v2@beanstalkedu.com',
+            'game_name': gameName,
+            'game_open': formatedDateTime,
+        };
+
+        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';
+                // console.log('Data Saved', response);
+            } 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');
+    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%;
+    }
+    #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>
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
new file mode 100644
index 0000000..9a851bb
--- /dev/null
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -0,0 +1,228 @@
+---
+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-x-4 place-content-between">
+                                <div class="flex flex-col">
+                                    <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">
+                                    <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">
+                                    <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_tick_v3_phonics/${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');
+    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: 240px;
+    }
+    #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>