---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="">
    <main>
        <div class="specific">
            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                <div class="shadow-md">
                    <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                        <div>
                            <img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
                        </div>
                        <div class="flex flex-row space-x-1 pb-2">
                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                        </div>
                    </div>
                    <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->

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

            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 addStarScalingStyles() {
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes scaleUp {
                0% {
                    transform: scale(1.5);
                }
                100% {
                    transform: scale(1);
                }
            }
            .star {
                display: inline-block;
                transform-origin: center;
                transform: scale(0); /* Initial state before animation */
                opacity: 0; /* Initial opacity */
                animation: scaleUp 0.5s ease forwards;
            }
        `; 
        document.head.appendChild(style);
    }
    function progressIncrement() {
        const interval = setInterval(() => {
            if (progress >= 100) {
                clearInterval(interval);
            } else {
                progress += 10; 
                progressBar.style.width = `${progress}%`;
            }
        }, 100);
    }

    function checkResult2(id) {
        const checkbox = document.getElementById('a' + id.slice(-1));
        const element = document.getElementById(id);

        if (checkbox.checked) {
            if (gameData[id.replace('image', 'a')] === true) {
                element.classList.add('redBorder');
            } else {
                wrongCount += 1;
                element.classList.add('greenBorder');
            }
        } else {
            wrongCount -= 1;
            element.classList.remove('redBorder', 'greenBorder');
        }
    }


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

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

        // console.log(userData);
        progressIncrement();
        addStarScalingStyles();

        const starContainer = document.getElementById('star-container');
        let scoreBoard = document.getElementById('scoreBoard');
        let loadingMainContainer = document.getElementById('loadingMainContainer');
        loadingMainContainer.style.display = 'flex';

        const loadingDiv = document.getElementById('loadingState');
        loadingDiv.style.display = 'flex';

        const containerDiv = document.createElement('div');
        containerDiv.classList.add('w-full');
        containerDiv.style.display = 'flex';
        containerDiv.style.flexDirection = 'column';
        containerDiv.style.justifyContent = 'center';
        containerDiv.style.alignItems = 'center';

        const paragraph = document.createElement('p');
        paragraph.textContent = 'HOLD ON.';
        paragraph.style.fontSize = '16px';
        paragraph.style.fontWeight = '600';
        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
        containerDiv.appendChild(paragraph);

        const progressBarContainer = document.createElement('div');
        progressBarContainer.style.position = 'relative';
        progressBarContainer.style.display = 'flex';
        progressBarContainer.style.alignItems = 'center';
        progressBarContainer.style.border = '1px solid #AFB8E6';
        progressBarContainer.style.height = '10px'; 
        progressBarContainer.style.width = '100%';
        progressBarContainer.style.marginTop = '30px';
        progressBarContainer.style.marginBottom = '30px';
        containerDiv.appendChild(progressBarContainer);

        progressBar.style.height = '10px';
        progressBar.style.backgroundColor = '#D7DCF2';
        progressBar.style.width = '0%';
        progressBarContainer.appendChild(progressBar);

        loadingDiv.appendChild(containerDiv);

        const calculationText = document.createElement('p');
        calculationText.textContent = 'Your stars are being calculated...';
        calculationText.style.fontSize = '14px';
        calculationText.style.fontWeight = '600';
        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
        containerDiv.appendChild(calculationText);



        let snapImage = '';
        const div = document.getElementById("snapshotDiv");
        const images = div.getElementsByTagName('img');
        let loadedImagesCount = 0;
        for (let img of images) {
            if (img.complete) {
                loadedImagesCount++;
            } else {
                img.onload = () => {
                    loadedImagesCount++;
                    if (loadedImagesCount === images.length) {
                        takeSnapshot();
                    }
                };
            }
        }
        if (loadedImagesCount === images.length) {
            takeSnapshot();
        }
        async function takeSnapshot() {
            try {
                const canvas = await html2canvas(div, {
                    useCORS: true,
                    allowTaint: true,
                });
                snapImage = canvas.toDataURL("image/jpeg");
                await saveScreenshot(snapImage);
            } catch (error) {
                console.error('Error in takeSnapshot:', error.message || error);
            }
        }
        async function saveScreenshot(snapImage) {
            const saveUserDataForScreenshot = {
                gameName: gameName,
                gameID: gameId,      
                screenShot: snapImage,
                userId: userId,      
                gameTime: timeDifferenceInSeconds         
            };
            try {
                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(saveUserDataForScreenshot),
                });
                if (!saveResponse.ok) {
                    const errorDetails = await saveResponse.text();
                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
                    console.error('Response Body:', errorDetails);
                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                }
                const saveResult = await saveResponse.json();
                if (saveResult.screenshotUrl) {
                    let userData = {
                        'gameName': gameName,
                        'gameID': gameId,
                        'userId': userId,
                        'gameTime': timeDifferenceInSeconds,
                        'score': totalPoints,
                        'gameStar': percentage
                    };
                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(userData)
                    })
                    .then(response => {
                        if (response.ok) {
                            setTimeout(() => {
                                if (response.ok) {
                                    if (response.status == 200) {
                                        document.getElementById('saved-toast').classList.remove('hidden');
                                        setTimeout(() => {
                                            document.getElementById('saved-toast').classList.add('hidden');
                                        }, 2000);
                                        document.getElementById('allParentDiv').style.display = 'block';
                                        loadingMainContainer.style.display = 'none';
                                        loadingDiv.style.display = 'none';
                                        starContainer.style.display = 'flex';
                                        starContainer.style.flexDirection = 'row';
                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                        document.getElementById('get-star-value').innerHTML = percentage;
                                        scoreBoard.style.display = 'flex';
                                    }
                                } else {
                                console.log('Something went wrong', response);
                                }
                            }, 100);
                        } else {
                            // console.log('Something Wrong', response);
                        }
                    })
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
                    const userAnotherData = {
                        assignmentId: assignmentId,
                        worksheetId: worksheetId,
                        studentId: userId,
                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
                    };
                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                    try {
                        const submitResponse = await fetch('https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': authToken,
                            },
                            body: JSON.stringify(userAnotherData),
                        });
                        if (!submitResponse.ok) {
                            const errorDetails = await submitResponse.text();
                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
                            console.error('Response Body:', errorDetails);
                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
                        }
                        const submitResult = await submitResponse.json();
                        // console.log('SubmitWorksheet API success:', submitResult);
                    } catch (error) {
                        console.error('Error in SubmitWorksheet API call:', error.message || error);
                    }
                } else {
                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
                }


            } catch (error) {
                console.error('Error in saveScreenshot:', error.message || error);
                throw error;
            }
        }
    }


    document.addEventListener('DOMContentLoaded', function () {
        const contactForm = document.getElementById('contactForm');
        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 rgb(128, 128, 128);
        border-radius: 5px;
        /* background: gray; */
        width: 40px;
        height: 40px;
        position: relative;
    }
    input[type="checkbox"]:checked {
        background: #FF0000;
    }
    input[type="checkbox"]:checked:after {
        content: "X";
        color: #fff;
        border: none;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        /*
        * If you want to fully change the check appearance, use the following:
        * content: " ";
        * width: 100%;
        * height: 100%;
        * background: blue;
        * top: 0;
        * left: 0;
        */
    }
    body{
        font-family: Quicksand;
    }
    input.largerCheckbox {
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .greenBorder{
        border: 4px solid #008000;
        border-radius: 10%;
        transition: border 0.5s, border-color 0.3s, transform 6s;
    }
    .redBorder{
        border: 4px solid red;
        border-radius: 10%;
        transition: border 0.5s, border-color 0.3s, transform 6s;
    }
    #image1, #image2, #image3, #image4, #image5, #image6{
        width: 150px;
    }
    #label1, #label2, #label3, #label4, #label5, #label6{
        text-align: center;
        font-weight: bold;
        color: #7C4C23;
        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;
    }
    .hidden {
        display: none;
        transform: translateX(100%);
    }

    .slide-in {
        display: block;
        animation: slideIn 0.5s forwards;
    }

    @keyframes slideIn {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>