phaser-game-bs/src/pages/tick/varient1.astro

<main>
    <div>
        <!-- bg-[url('/assets/background.jpg')] -->
        <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>
                <p class="text-4xl text-center font-[600] text-[#7c4c23] my-16 select-none" id="gameDescription"></p>
                <form id="contactForm">
                    <div id="itemForm" class="flex flex-row place-content-between">
                        <div class="flex flex-col gap-6 place-items-center">
                            <img id="image1" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
                            <label for="a1" class="round-checkbox-label"></label>
                            <img id="image2" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
                            <label for="a2" class="round-checkbox-label"></label>
                        </div>
                        <div class="flex flex-col gap-6 place-items-center">
                            <img id="image3" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
                            <label for="a3" class="round-checkbox-label"></label>
                            <img id="image4" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
                            <label for="a4" class="round-checkbox-label"></label>
                        </div>
                        <div class="flex flex-col gap-6 place-items-center">
                            <img id="image5" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
                            <label for="a5" class="round-checkbox-label"></label>
                            <img id="image6" src="" alt="" draggable="false" class="select-none" />
                            <input type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
                            <label for="a6" class="round-checkbox-label"></label>
                        </div>
                    </div>
                    <div class="flex justify-center pt-8">
                        <input onclick="getData()" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Save">
                    </div>
                </form>
            </div>
        </section>
    </div>
</main>
<script is:inline>
    const params = new URLSearchParams(window.location.search);
    const paramsID = params.get('id');
    fetch(`https://management.beanstalkedu.com/items/game_tick6/${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;
    });
    //     const saveButton = document.getElementById('saveButton');
    //     saveButton.addEventListener('click', function() {
    //     const checkboxes = document.querySelectorAll('.myCheckbox');
    //     const checkedValues = [];
    //     console.log(checkedValues)
    //     if(checkedValues == gameData.a1){
    //         console.log(gameData.a1)
    //     }
    //     checkboxes.forEach(function(checkbox) {
    //     if (checkbox.checked) {
    //         checkedValues.push(checkbox.value);
    //         // console.log(checkedValues);
    //         // console.log(gameData.a1)
    //         // let value1 = checkedValues = 'a1';
    //     }
    // });
    // // if(checkedValues == gameData.a1) {
    // //     console.log("Matched")
    // // }
    //     // console.log('Checked Values:', checkedValues);
    // });
    
    var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
        function getData() { // this function will get called when the save button is clicked
            result = [];
            console.log(result);
            checkBoxes.forEach(item => { // loop all the checkbox item
                if (item.checked) {    //if the check box is checked
                    let data = {      // create an object
                            item: item.value,
                            selected: item.checked
                        }
                        console.log(data.selected);                       
                    result.push(data); //stored the objects to result array
                }
            })
        };
    document.addEventListener('DOMContentLoaded', function () {
      const contactForm = document.getElementById('contactForm');
      contactForm.addEventListener('submit', async function (event) {
        event.preventDefault();
        // const formData = {
        //     f1: result[0],
        //     f2: result[1],
        //     f3: result[2],
        //     f4: result[3],
        //     f5: result[4],
        //     f6: result[5]
        // };
        //     console.log("Form Data", formData)
        // try {
        //   const response = await fetch('https://management.beanstalkedu.com/items/game_result', {
        //     method: 'POST',
        //     headers: {
        //       'Content-Type': 'application/json'
        //     },
        //     body: JSON.stringify(formData)
        //   });
        //   if (response.ok) {
        //     console.log('Form data submitted successfully');
        //   } else {
        //     console.error('Failed to submit form data');
        //   }
        // } catch (error) {
        //   console.error('An error occurred:', error);
        // }
      });
    });
</script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
    body{
        font-family: quicksand;
    }
    #image1, #image2, #image3, #image4, #image5, #image6{
        width: 200px;
        /* border: 4px solid red;
        border-radius: 5%; */
    }
    .round-checkbox-input {
        display: none;
    }
    .round-checkbox-label {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 10%;
        background-color: #ccc;
        border: 2px solid #007bff;
        cursor: pointer;
        position: relative;
        transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
    }
    .round-checkbox-input:checked + .round-checkbox-label {
        background-color: #007bff;
        border-color: #007bff;
        transform: scale(1.2);
        border-radius: 30%;
    }
    .round-checkbox-input:checked + .round-checkbox-label::after {
        content: '\2713';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: white;
        display: block;
    }
</style>