Ethnci - Posts - OneCompiler

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

int i = 10;
if(i>0){
    System.out.println('positive');
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Age, Gender, and Ethnicity Filtering</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { margin-bottom: 20px; } </style> </head> <body> <h1>Dynamic Filtering with Age, Gender, and Ethnicity</h1>

<form id="filterForm">
    <!-- Ethnicity Filters -->
    <div class="container">
        <h2>Ethnicity</h2>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Total people" onchange="updateEthnicities()"> Total people
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="European" onchange="updateEthnicities()"> European
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Maori" onchange="updateEthnicities()"> Maori
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Pacific Peoples" onchange="updateEthnicities()"> Pacific Peoples
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Asian" onchange="updateEthnicities()"> Asian
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Middle Eastern/Latin American/African" onchange="updateEthnicities()"> Middle Eastern/Latin American/African
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity-sub" data-group="New Zealander" data-parent="Other ethnicity" onchange="updateEthnicities()"> New Zealander
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity-sub" data-group="Other ethnicity nec" data-parent="Other ethnicity" onchange="updateEthnicities()"> Other ethnicity nec
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Total people stated" onchange="updateEthnicities()"> Total people stated
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Not elsewhere included" onchange="updateEthnicities()"> Not elsewhere included
        </label><br>
    </div>

    <!-- Gender Selection -->
    <div class="container">
        <h2>Gender</h2>
        <label>
            <input type="radio" name="gender" value="total" checked> Total
        </label><br>
        <label>
            <input type="radio" name="gender" value="male"> Male
        </label><br>
        <label>
            <input type="radio" name="gender" value="female"> Female
        </label><br>
    </div>

    <button type="button" onclick="handleSubmit()">Submit</button>
</form>

<h2>Selected Filters</h2>
<div id="selectedFilters"></div>

<script>
    const ethnicityData = {
        "Total people": [
            "European",
            "Maori",
            "Pacific Peoples",
            "Asian",
            "Middle Eastern/Latin American/African",
            {
                range: "Other ethnicity",
                sub: ["New Zealander", "Other ethnicity nec"],
            },
            "Total people stated",
            "Not elsewhere included",
        ],
    };

    function updateEthnicities() {
        const selectedEthnicities = [];
        const selectedSubEthnicities = document.querySelectorAll(".ethnicity-sub:checked");

        // If any sub-ethnicity is selected, ignore its parent
        const selectedSubGroups = new Set();
        selectedSubEthnicities.forEach((item) => {
            selectedSubGroups.add(item.dataset.parent);
            selectedEthnicities.push(item.dataset.group);
        });

        const selectedParents = document.querySelectorAll(".ethnicity:checked");
        selectedParents.forEach((item) => {
            const group = item.dataset.group;

            if (!selectedSubGroups.has(group)) {
                selectedEthnicities.push(group);
            }
        });

        console.log("Selected Ethnicities:", selectedEthnicities);
    }

    function handleSubmit() {
        const selectedEthnicities = [];
        const selectedSubEthnicities = document.querySelectorAll(".ethnicity-sub:checked");

        // If any sub-ethnicity is selected, ignore its parent
        const selectedSubGroups = new Set();
        selectedSubEthnicities.forEach((item) => {
            selectedSubGroups.add(item.dataset.parent);
            selectedEthnicities.push(item.dataset.group);
        });

        const selectedParents = document.querySelectorAll(".ethnicity:checked");
        selectedParents.forEach((item) => {
            const group = item.dataset.group;

            if (!selectedSubGroups.has(group)) {
                selectedEthnicities.push(group);
            }
        });

        const selectedGender = document.querySelector("input[name='gender']:checked").value;

        const selectedDiv = document.getElementById("selectedFilters");
        selectedDiv.innerHTML = `
            Selected Ethnicities: ${selectedEthnicities.join(", ")}<br>
            Gender: ${selectedGender}
        `;
    }
</script>

</body> </html>