working_on_game_description_from_API_line_No-74

src/layouts/Layout.astro

@@ -33,4 +33,18 @@ const { title } = Astro.props;
 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 			Bitstream Vera Sans Mono, Courier New, monospace;
 	} */
+	body{
+        font-family: quicksand;
+        animation: fadeInAnimation ease 6s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        }
+        @keyframes fadeInAnimation {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+    }
 </style>

src/pages/drawing/index.astro

@@ -9,6 +9,15 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
+    var assetsList = {}
+const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const data =       fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
+    .then(response => response.json())
+    .then(({data}) => {
+      const {image} = data;
+      assetsList.image = "https://management.beanstalkedu.com/assets/" + image ;
+
       const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
@@ -24,8 +33,29 @@ import Layout from '../../layouts/Layout.astro';
         update: update,
     },
 };
+      const game = new Phaser.Game(config);    
       
-const game = new Phaser.Game(config);
+    })
+    .catch(error => {
+
+      console.error('Error fetching initial data:', error);
+    });
+//  const config = {
+//     type: Phaser.AUTO,
+//     width: window.innerWidth,
+//     height: window.innerHeight,
+//     backgroundColor: '#ffffff',
+//     scale: {
+//         mode: Phaser.Scale.FIT,
+//         autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+//     },
+//     scene: {
+//         preload: preload,
+//         create: create,
+//         update: update,
+//     },
+// };
+// const game = new Phaser.Game(config);
 const displayW = window.innerWidth;
 const displayH = window.innerHeight;
 
@@ -33,10 +63,11 @@ let graphics;
 let outlineImage;
 let isDrawing = false;
 let selectedColor = '#ff0000'; // Default color
-let brushSize = 5; // Default brush size
+let brushSize = 1; // Default brush size
 
 function preload() {
-    this.load.image('outline', '/assets/cow.png');
+    // this.load.image('outline', '/assets/cow.png');
+    this.load.image('outline', assetsList.image);
 }
 
 function create() {
@@ -44,26 +75,34 @@ function create() {
 
     graphics = this.add.graphics();
 
-    // Create a color picker using HTML input type color
     const colorPicker = document.createElement('input');
+    
     colorPicker.type = 'color';
     colorPicker.value = selectedColor;
     colorPicker.className = 'color-picker';
-    colorPicker.addEventListener('input', (event) => {
-        selectedColor = event.target.value;
-    });
     document.body.appendChild(colorPicker);
+    colorPicker.style.position = 'absolute';
+    // colorPicker.textContent = 'Clear';
+    colorPicker.style.top = '30px';
+    colorPicker.style.left = '20px';
+
+    colorPicker.addEventListener('input', (event) => {
+        selectedColor = event.target.value; // Update selectedColor
+    });
 
-    // Create a brush size slider using HTML input type range
     const sliderContainer = document.createElement('div');
     sliderContainer.className = 'slider-container';
     document.body.appendChild(sliderContainer);
 
+    sliderContainer.style.position = 'absolute';
+    sliderContainer.style.top = '20px';
+    sliderContainer.style.right = '20px';
+
     const slider = document.createElement('input');
     slider.type = 'range';
     slider.min = '2';
     slider.max = '20';
-    slider.value = brushSize.toString(); // Set initial value to brushSize
+    slider.value = brushSize.toString();
     slider.className = 'slider';
     sliderContainer.appendChild(slider);
 
@@ -74,11 +113,24 @@ function create() {
 
     const clearButton = document.createElement('button');
     clearButton.textContent = 'Clear';
-    clearButton.className = 'clear-button';
+    // clearButton.className = 'clear-button';
+    document.body.appendChild(clearButton);
+
+    clearButton.style.position = 'absolute';
+    clearButton.style.top = '20px';
+    clearButton.style.left = '120px';
+    clearButton.style.backgroundColor = 'blue';
+    clearButton.style.color = 'white';
+    clearButton.style.padding = '10px 30px';
+    clearButton.style.fontSize = '20px';
+    clearButton.style.fontWeight = 'bold';
+    clearButton.style.borderRadius = '50%';
+    clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
+
     clearButton.addEventListener('click', () => {
         clearDrawing();
     });
-    document.body.appendChild(clearButton);
+
     this.input.on('pointerdown', () => {
         isDrawing = true;
         startDrawing(this.input.x, this.input.y);
@@ -97,6 +149,7 @@ function create() {
         isDrawing = false;
     });
 }
+
 function startDrawing(x, y) {
     graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
     graphics.beginPath();
@@ -117,7 +170,6 @@ function clearDrawing() {
 }
 
 function update() {
-    // Update the slider position based on the pointer's movement
     const slider = document.querySelector('input[type="range"]');
     if (slider && !isDrawing) {
         const sliderValue = parseInt(slider.value);
@@ -128,6 +180,131 @@ function update() {
     }
 }
 
+
+
+
+
+
+
+//     const config = {
+//     type: Phaser.AUTO,
+//     width: window.innerWidth,
+//     height: window.innerHeight,
+//     backgroundColor: '#05b3a4',
+//     scale: {
+//         mode: Phaser.Scale.FIT,
+//         autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+//     },
+//     scene: {
+//         preload: preload,
+//         create: create,
+//         update: update,
+//     },
+// };
+
+// const game = new Phaser.Game(config);
+// const displayW = window.innerWidth;
+// const displayH = window.innerHeight;
+
+// let graphics;
+// let outlineImage;
+// let isDrawing = false;
+// let selectedColor = '#ff0000'; // Default color
+// let brushSize = 5; // Default brush size
+
+// function preload() {
+//     this.load.image('outline', '/assets/cow.png');
+// }
+
+// function create() {
+//     outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
+
+//     graphics = this.add.graphics();
+
+//     // Create a color picker using HTML input type color
+//     const colorPicker = document.createElement('input');
+//     colorPicker.type = 'color';
+//     colorPicker.value = selectedColor;
+//     colorPicker.className = 'color-picker';
+//     colorPicker.addEventListener('input', (event) => {
+//         selectedColor = event.target.value;
+//     });
+//     document.body.appendChild(colorPicker);
+
+//     // Create a brush size slider using HTML input type range
+//     const sliderContainer = document.createElement('div');
+//     sliderContainer.className = 'slider-container';
+//     document.body.appendChild(sliderContainer);
+
+//     const slider = document.createElement('input');
+//     slider.type = 'range';
+//     slider.min = '2';
+//     slider.max = '20';
+//     slider.value = brushSize.toString(); // Set initial value to brushSize
+//     slider.className = 'slider';
+//     sliderContainer.appendChild(slider);
+
+//     slider.addEventListener('input', (event) => {
+//         brushSize = parseInt(event.target.value);
+//         slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+//     });
+
+//     const clearButton = document.createElement('button');
+//     clearButton.textContent = 'Clear';
+//     clearButton.className = 'clear-button';
+//     clearButton.addEventListener('click', () => {
+//         clearDrawing();
+//     });
+//     document.body.appendChild(clearButton);
+//     this.input.on('pointerdown', () => {
+//         isDrawing = true;
+//         startDrawing(this.input.x, this.input.y);
+//     });
+
+//     this.input.on('pointermove', () => {
+//         if (isDrawing) {
+//             continueDrawing(this.input.x, this.input.y);
+//         }
+//     });
+
+//     this.input.on('pointerup', () => {
+//         if (isDrawing) {
+//             finishDrawing();
+//         }
+//         isDrawing = false;
+//     });
+// }
+// function startDrawing(x, y) {
+//     graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+//     graphics.beginPath();
+//     graphics.moveTo(x, y);
+// }
+
+// function continueDrawing(x, y) {
+//     graphics.lineTo(x, y);
+//     graphics.strokePath();
+// }
+
+// function finishDrawing() {
+//     // No need for additional actions here
+// }
+
+// function clearDrawing() {
+//     graphics.clear();
+// }
+
+// function update() {
+//     // Update the slider position based on the pointer's movement
+//     const slider = document.querySelector('input[type="range"]');
+//     if (slider && !isDrawing) {
+//         const sliderValue = parseInt(slider.value);
+//         const max = parseInt(slider.max);
+//         const width = slider.offsetWidth;
+//         const offsetX = (sliderValue - 2) / (max - 2) * width;
+//         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+//     }
+// }
+
     // const config = {
     // type: Phaser.AUTO,
     // width: window.innerWidth,
@@ -254,5 +431,4 @@ function update() {
     .clear-button {
         background-color: blue;
     }
-    /* .clearButton */
 </style>

src/pages/tick/varient1.astro

@@ -12,31 +12,31 @@
                     <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"/>
+                            <input onclick="checkResult('image1');" 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"/>
+                            <input onclick="checkResult('image2');" 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"/>
+                            <input onclick="checkResult('image3');" 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"/>
+                            <input onclick="checkResult('image4');" 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"/>
+                            <input onclick="checkResult('image5');" 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"/>
+                            <input onclick="checkResult('image6');" 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">
+                        <input 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>
@@ -81,22 +81,93 @@
     // // }
     //     // console.log('Checked Values:', checkedValues);
     // });
-    
+    function checkResult(id){
-    var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]');
+        console.log(gameData.a1)
-        function getData() { // this function will get called when the save button is clicked
+        // alert("Matched")
-            result = [];
+        if(id == 'image1'){
-            console.log(result);
+            if(gameData.a1 == true){
-            checkBoxes.forEach(item => { // loop all the checkbox item
+            var element = document.getElementById(id);
-                if (item.checked) {    //if the check box is checked
+            element.classList.add("greenBorder");
-                    let data = {      // create an object
+            console.log('Value True')
-                            item: item.value,
+            } else{
-                            selected: item.checked
+                var element = document.getElementById(id);
+                element.classList.add("redBorder");
+                console.log('Value False')
             }
-                        console.log(data.selected);                       
-                    result.push(data); //stored the objects to result array
-                }
-            })
         };
+        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')
+            }
+        }
+       
+    };
+    
+    // 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) {
@@ -134,6 +205,14 @@
     body{
         font-family: quicksand;
     }
+    .greenBorder{
+        border: 4px solid green;
+        border-radius: 10%;
+    }
+    .redBorder{
+        border: 4px solid red;
+        border-radius: 10%;
+    }
     #image1, #image2, #image3, #image4, #image5, #image6{
         width: 200px;
         /* border: 4px solid red;

src/pages/tick/varient2.astro

@@ -9,44 +9,49 @@
                 </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 id="" 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"/>
+                            <input onclick="checkResult2('image1');" 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"/>
+                            <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
                             <label for="a2" class="round-checkbox-label"></label>
+
                             <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
+                            <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
                             <label for="a3" class="round-checkbox-label"></label>
                         </div>
                         <div class="flex flex-col gap-6 place-items-center">
                             <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
+                            <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
                             <label for="a4" class="round-checkbox-label"></label>
+
                             <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
+                            <input onclick="checkResult2('image5');" 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"/>
+                            <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
                             <label for="a6" class="round-checkbox-label"></label>
                         </div>
                         <div class="flex flex-col gap-6 place-items-center">
                             <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a7"/>
+                            <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
-                            <label for="a4" class="round-checkbox-label"></label>
+                            <label for="a7" class="round-checkbox-label"></label>
+
                             <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a8"/>
+                            <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
-                            <label for="a5" class="round-checkbox-label"></label>
+                            <label for="a8" class="round-checkbox-label"></label>
+
                             <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                            <input type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a9"/>
+                            <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
-                            <label for="a6" class="round-checkbox-label"></label>
+                            <label for="a9" 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">
+                        <input 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>
@@ -60,7 +65,7 @@
     .then(res => res.json())
     .then(data => {
         gameData = data.data;
-        // console.log(gameData);  
+        console.log(gameData);  
         document.getElementById("gameDescription").innerHTML = gameData.description;
         const assetsURL = 'https://management.beanstalkedu.com/assets/';
         document.getElementById("image1").src = assetsURL + gameData.image1;
@@ -73,42 +78,91 @@
         document.getElementById("image8").src = assetsURL + gameData.image8;
         document.getElementById("image9").src = assetsURL + gameData.image9;
     });
-    //     const saveButton = document.getElementById('saveButton');
+    function checkResult2(id){
-    //     saveButton.addEventListener('click', function() {
+        // alert("Matched")
-    //     const checkboxes = document.querySelectorAll('.myCheckbox');
+        if(id == 'image1'){
-    //     const checkedValues = [];
-    //     console.log(checkedValues)
-    //     if(checkedValues == gameData.a1){
             // console.log(gameData.a1)
-    //     }
+            if(gameData.a1 == true){
-    //     checkboxes.forEach(function(checkbox) {
+            var element = document.getElementById(id);
-    //     if (checkbox.checked) {
+            element.classList.add("greenBorder");
-    //         checkedValues.push(checkbox.value);
+            } else{
-    //         // console.log(checkedValues);
+                var element = document.getElementById(id);
-    //         // console.log(gameData.a1)
+                element.classList.add("redBorder");
-    //         // let value1 = checkedValues = 'a1';
+            }
-    //     }
+        };
-    // });
+        if(id == 'image2'){
-    // // if(checkedValues == gameData.a1) {
+            if(gameData.a2 == true){
-    // //     console.log("Matched")
+            var element = document.getElementById(id);
-    // // }
+            element.classList.add("greenBorder");
-    //     // console.log('Checked Values:', checkedValues);
+            } 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");
+            }
+        };
        
-    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');
@@ -144,8 +198,29 @@
 </script>
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
-    body{
+    /* body{
         font-family: quicksand;
+        animation: fadeInAnimation ease 6s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        }
+        @keyframes fadeInAnimation {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+    } */
+    .greenBorder{
+        border: 4px solid #008000;
+        border-radius: 10%;
+        /* transform:scale3d(0.5, 1, 1.7); */
+        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: 200px;