FinalV1

53

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 Filtering with Age, Gender, and Ethnicity</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { margin-bottom: 20px; } .sub-group { margin-left: 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" data-group="Other ethnicity" onchange="toggleSubEthnicity(this)"> Other ethnicity
        </label><br>
        <div class="sub-group hidden" id="subOtherEthnicity">
            <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>
        </div>
        <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>

    <!-- Years Selection -->
    <div class="container">
        <h2>Years</h2>
        <label>
            <input type="checkbox" class="year" data-group="2020"> 2020
        </label><br>
        <label>
            <input type="checkbox" class="year" data-group="2021"> 2021
        </label><br>
        <label>
            <input type="checkbox" class="year" data-group="2022"> 2022
        </label><br>
        <label>
            <input type="checkbox" class="year" data-group="2023"> 2023
        </label><br>
    </div>

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

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

<script>
    // Toggle visibility of sub-ethnicity options
    function toggleSubEthnicity(checkbox) {
        const subGroup = document.getElementById("subOtherEthnicity");
        subGroup.classList.toggle("hidden", !checkbox.checked);
        if (!checkbox.checked) {
            subGroup.querySelectorAll("input[type='checkbox']").forEach((input) => (input.checked = false));
        }
    }

    // Collect and display selected filters
    function handleSubmit() {
        const selectedEthnicities = [];
        const selectedYears = [];
        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);
            }
        });

        // Collect selected years
        const selectedYearCheckboxes = document.querySelectorAll(".year:checked");
        selectedYearCheckboxes.forEach((item) => {
            selectedYears.push(item.dataset.group);
        });

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

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