Personalized Risk Profile

<h1>Personalized Pandemic Risk Profile</h1>

<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>

<!-- 1. Age -->
<fieldset>
<legend>1. Age
<button type="button" class="info-btn" onclick="toggleInfo('ageInfo')">Why?</button>
</legend>
<div id="ageInfo" class="info-box">
Age is one of the strongest predictors for severe illness in many outbreaks. Older adults generally have higher risk even if healthy otherwise.
</div>
<label><input type="radio" name="age" value="under_18"> Under 18</label>
<label><input type="radio" name="age" value="18_29"> 18–29</label>
<label><input type="radio" name="age" value="30_49"> 30–49</label>
<label><input type="radio" name="age" value="50_64"> 50–64</label>
<label><input type="radio" name="age" value="65_74"> 65–74</label>
<label><input type="radio" name="age" value="75_plus"> 75+</label>
<label><input type="radio" name="age" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 2. Sex Assigned at Birth -->
<fieldset>
<legend>2. Sex Assigned at Birth
<button type="button" class="info-btn" onclick="toggleInfo('sexInfo')">Why?</button>
</legend>
<div id="sexInfo" class="info-box">
Sex and gender can affect susceptibility and immune response to infections.
</div>
<label><input type="radio" name="sex" value="male"> Male</label>
<label><input type="radio" name="sex" value="female"> Female</label>
<label><input type="radio" name="sex" value="other"> Other / Prefer not to say</label>
</fieldset>

<!-- 3. Pregnancy and Breastfeeding -->
<fieldset>
<legend>3. Are you currently pregnant or breastfeeding?
<button type="button" class="info-btn" onclick="toggleInfo('pregInfo')">Why?</button>
</legend>
<div id="pregInfo" class="info-box">
Pregnancy and breastfeeding can influence infection risk and guide specific precautions or treatments.
</div>
<label><input type="radio" name="pregnant_bf" value="pregnant"> Pregnant</label>
<label><input type="radio" name="pregnant_bf" value="breastfeeding"> Breastfeeding</label>
<label><input type="radio" name="pregnant_bf" value="both"> Both</label>
<label><input type="radio" name="pregnant_bf" value="neither" checked> Neither</label>
<label><input type="radio" name="pregnant_bf" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 4. Relevant Health Conditions -->
<fieldset>
<legend>4. Any relevant health conditions?
<button type="button" class="info-btn" onclick="toggleInfo('condInfo')">Why?</button>
</legend>
<div id="condInfo" class="info-box">
Chronic diseases or immune conditions increase risk of severe illness.
</div>
<label><input type="checkbox" name="cond" value="obesity"> Obesity</label>
<label><input type="checkbox" name="cond" value="diabetes"> Diabetes</label>
<label><input type="checkbox" name="cond" value="heart"> Heart disease or hypertension</label>
<label><input type="checkbox" name="cond" value="lung"> Chronic lung disease (e.g., asthma, COPD)</label>
<label><input type="checkbox" name="cond" value="immune"> Immunocompromised (e.g., cancer, transplant)</label>
<label><input type="checkbox" name="cond" value="none"> No known conditions</label>
<label><input type="checkbox" name="cond" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 5. Household Risk -->
<fieldset>
<legend>5. Household risk
<button type="button" class="info-btn" onclick="toggleInfo('hhRiskInfo')">Why?</button>
</legend>
<div id="hhRiskInfo" class="info-box">
Living with at-risk persons affects recommended precautions and exposure risk.
</div>
<label><input type="radio" name="hh_risk" value="yes"> Yes, I live with high-risk individuals</label>
<label><input type="radio" name="hh_risk" value="no"> No</label>
<label><input type="radio" name="hh_risk" value="unsure"> Unsure / Prefer not to answer</label>
</fieldset>

<!-- 6. ZIP / Postal Code -->
<fieldset>
<legend>6. ZIP / Postal Code
<button type="button" class="info-btn" onclick="toggleInfo('zipInfo')">Why?</button>
</legend>
<div id="zipInfo" class="info-box">
Location determines local outbreak intensity and alerts.
</div>
<input type="text" name="zip" maxlength="9" placeholder="Optional ZIP or postal code" />
</fieldset>

<!-- 7. Transportation Habits -->
<fieldset>
<legend>7. Transportation habits
<button type="button" class="info-btn" onclick="toggleInfo('transInfo')">Why?</button>
</legend>
<div id="transInfo" class="info-box">
Public or shared transportation increases exposure risk.
</div>
<label><input type="checkbox" name="transport" value="car"> Personal vehicle</label>
<label><input type="checkbox" name="transport" value="public"> Public transportation (bus/train/subway)</label>
<label><input type="checkbox" name="transport" value="rideshare"> Rideshare / Taxi</label>
<label><input type="checkbox" name="transport" value="bike"> Bicycle / Walking</label>
<label><input type="checkbox" name="transport" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 8. Mental Health / Behavioral Factors -->
<fieldset>
<legend>8. Mental health / Behavioral factors
<button type="button" class="info-btn" onclick="toggleInfo('mhInfo')">Why?</button>
</legend>
<div id="mhInfo" class="info-box">
Mental health and addiction influence infection risk and mitigation adherence.
</div>
<label><input type="checkbox" name="mental" value="depression"> Depression or anxiety</label>
<label><input type="checkbox" name="mental" value="addiction"> Alcohol or drug addiction</label>
<label><input type="checkbox" name="mental" value="none"> None of the above</label>
<label><input type="checkbox" name="mental" value="skip"> Prefer not to answer</label>
</fieldset>

<fieldset>
<legend>Sexual orientation (optional)</legend>
<label><input type="radio" name="sexorient" value="heterosexual" checked> Heterosexual</label>
<label><input type="radio" name="sexorient" value="homosexual"> Homosexual</label>
<label><input type="radio" name="sexorient" value="bisexual"> Bisexual</label>
<label><input type="radio" name="sexorient" value="other"> Other / Prefer not to say</label>
</fieldset>

<fieldset>
<legend>Additional behavioral risk factors</legend>
<label><input type="checkbox" name="behavior" value="iv_drug_use"> History of intravenous (IV) drug use</label>
<label><input type="checkbox" name="behavior" value="hemophilia"> Hemophilia or blood disorder</label>
<label><input type="checkbox" name="behavior" value="none"> None of the above</label>
<label><input type="checkbox" name="behavior" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 9. Political Affiliation -->
<fieldset>
<legend>9. Political Affiliation
<button type="button" class="info-btn" onclick="toggleInfo('polInfo')">Why?</button>
</legend>
<div id="polInfo" class="info-box">
Political beliefs influence health behaviors and can help tailor communication styles.
</div>
<label><input type="radio" name="party" value="democrat"> Democrat</label>
<label><input type="radio" name="party" value="republican"> Republican</label>
<label><input type="radio" name="party" value="independent"> Independent</label>
<label><input type="radio" name="party" value="other"> Other / Prefer not to say</label>
</fieldset>

<!-- 10. Planned or Recurring Activity -->
<fieldset>
<legend>10. Planned or recurring activity (optional)
<button type="button" class="info-btn" onclick="toggleInfo('actInfo')">Why?</button>
</legend>
<div id="actInfo" class="info-box">
Upcoming events have variable infection risks and targeted guidance can reduce risk.
</div>
<input type="text" name="activity" placeholder="E.g., choir, banquet, cruise ship" style="max-width:320px;" />
<label>Location:
<select name="activity_location">
<option value="">Select</option>
<option value="indoors">Indoors</option>
<option value="outdoors">Outdoors</option>
<option value="both">Both</option>
</select>
</label>
<label>Estimated number of people:
<input type="number" name="activity_people" min="1" max="10000" />
</label>
</fieldset>

<!-- 11. Vaccination & Prior Infection History -->
<fieldset>
<legend>11. Vaccination & Prior Infection History
<button type="button" class="info-btn" onclick="toggleInfo('vaxInfo')">Why?</button>
</legend>
<div id="vaxInfo" class="info-box">
Vaccination and prior infection affect immunity and risk levels.
</div>
<label for="vaccine_disease">Select disease:</label>
<select id="vaccine_disease" name="vaccine_disease">
<option value="">Select disease</option>
<option value="covid">COVID-19</option>
<option value="flu">Influenza (Flu)</option>
<option value="hpv">HPV</option>
<option value="hepatitis">Hepatitis B</option>
<option value="other">Other</option>
</select>

<label>Vaccination status:</label>
<label><input type="radio" name="vax_status" value="not_vaccinated"> Not vaccinated</label>
<label><input type="radio" name="vax_status" value="partially_vaccinated"> Partially vaccinated</label>
<label><input type="radio" name="vax_status" value="fully_vaccinated"> Fully vaccinated including boosters</label>
<label><input type="radio" name="vax_status" value="unknown"> Don’t know / Prefer not to answer</label>

<label for="vax_date">Date of last vaccine dose (if known):</label>
<input type="date" id="vax_date" name="vax_date" />

<label>Have you had a confirmed past infection of this disease?</label>
<label><input type="radio" name="prior_infection" value="yes"> Yes</label>
<label><input type="radio" name="prior_infection" value="no"> No</label>
<label><input type="radio" name="prior_infection" value="unknown"> Don’t know / Prefer not to answer</label>

<label for="infection_date">Approximate infection date(s) (if known):</label>
<input type="text" id="infection_date" name="infection_date" placeholder="E.g., 2021-12 or multiple dates" />

<label>Severity of prior infection:</label>
<label><input type="radio" name="infection_severity" value="mild"> Mild or asymptomatic</label>
<label><input type="radio" name="infection_severity" value="moderate"> Moderate illness</label>
<label><input type="radio" name="infection_severity" value="severe"> Severe illness/hospitalization</label>
<label><input type="radio" name="infection_severity" value="unknown"> Unknown / Prefer not to answer</label>
</fieldset>

<!-- 12. Current Symptoms & Recent Exposure -->
<fieldset>
<legend>12. Current Symptoms & Recent Exposure
<button type="button" class="info-btn" onclick="toggleInfo('symptomsInfo')">Why?</button>
</legend>
<div id="symptomsInfo" class="info-box">
Current symptoms and recent exposures help provide timely advice.
</div>

<label>Symptoms you are experiencing (select all that apply):</label>
<label><input type="checkbox" name="symptoms" value="fever"> Fever or chills</label>
<label><input type="checkbox" name="symptoms" value="cough"> Cough</label>
<label><input type="checkbox" name="symptoms" value="shortness_breath"> Shortness of breath</label>
<label><input type="checkbox" name="symptoms" value="rash"> Rash or skin lesions</label>
<label><input type="checkbox" name="symptoms" value="fatigue"> Fatigue or muscle aches</label>
<label><input type="checkbox" name="symptoms" value="loss_taste_smell"> Loss of taste or smell</label>
<label><input type="checkbox" name="symptoms" value="none"> None of the above</label>
<label><input type="checkbox" name="symptoms" value="prefer_not"> Prefer not to answer</label>

<label>Close contact with confirmed/suspected case (past 14 days):</label>
<label><input type="radio" name="recent_exposure" value="yes"> Yes</label>
<label><input type="radio" name="recent_exposure" value="no"> No</label>
<label><input type="radio" name="recent_exposure" value="unknown"> Prefer not to answer / Unsure</label>
</fieldset>

<!-- 13. Occupation & Work Environment -->
<fieldset>
<legend>13. Occupation & Work Environment
<button type="button" class="info-btn" onclick="toggleInfo('occupationInfo')">Why?</button>
</legend>
<div id="occupationInfo" class="info-box">
Workplace exposure can impact infection risk and needed protections.
</div>

<label for="occupation_type">Occupation category:</label>
<select id="occupation_type" name="occupation_type">
<option value="">Select one</option>
<option value="healthcare">Healthcare / First responder</option>
<option value="retail">Retail or service industry</option>
<option value="education">Education / School</option>
<option value="food_service">Food service / Restaurant</option>
<option value="delivery">Delivery / Transportation</option>
<option value="office">Office / Administrative</option>
<option value="manufacturing">Manufacturing / Factory</option>
<option value="other">Other / None</option>
</select>

<label>Work environment:</label>
<label><input type="radio" name="work_env" value="indoors"> Mostly indoors</label>
<label><input type="radio" name="work_env" value="outdoors"> Mostly outdoors</label>
<label><input type="radio" name="work_env" value="both"> Both</label>
<label><input type="radio" name="work_env" value="skip"> Prefer not to answer</label>

<label>Approximate number of close contacts per day at work:</label>
<input type="number" name="work_contacts" min="0" max="100" placeholder="e.g. 5" />

<label>Are masks or protective measures enforced at your workplace?</label>
<label><input type="radio" name="work_mask_policy" value="enforced"> Yes, enforced</label>
<label><input type="radio" name="work_mask_policy" value="optional"> Optional</label>
<label><input type="radio" name="work_mask_policy" value="none"> No policy</label>
<label><input type="radio" name="work_mask_policy" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 14. Ventilation at Home & Work -->
<fieldset>
<legend>14. Ventilation at Home and Workplace
<button type="button" class="info-btn" onclick="toggleInfo('ventInfo')">Why?</button>
</legend>
<div id="ventInfo" class="info-box">
Good ventilation reduces airborne transmission risk for respiratory illnesses.
</div>
<label>Typical ventilation at home:</label>
<label><input type="radio" name="home_ventilation" value="windows_open"> Windows frequently open / good airflow</label>
<label><input type="radio" name="home_ventilation" value="mechanical"> Mechanical ventilation / air filtration</label>
<label><input type="radio" name="home_ventilation" value="mostly_closed"> Mostly closed windows / limited airflow</label>
<label><input type="radio" name="home_ventilation" value="skip"> Prefer not to answer</label>

<label>Typical ventilation at workplace:</label>
<label><input type="radio" name="work_ventilation" value="windows_open"> Windows frequently open / good airflow</label>
<label><input type="radio" name="work_ventilation" value="mechanical"> Mechanical ventilation / air filtration</label>
<label><input type="radio" name="work_ventilation" value="mostly_closed"> Mostly closed windows / limited airflow</label>
<label><input type="radio" name="work_ventilation" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 15. Travel History & Planned Travel -->
<fieldset>
<legend>15. Travel History and Planned Travel
<button type="button" class="info-btn" onclick="toggleInfo('travelInfo')">Why?</button>
</legend>
<div id="travelInfo" class="info-box">
Travel may increase risk through new exposures.
</div>
<label>Have you traveled out of your local area in the last 14 days?</label>
<label><input type="radio" name="recent_travel" value="yes"> Yes</label>
<label><input type="radio" name="recent_travel" value="no"> No</label>
<label><input type="radio" name="recent_travel" value="skip"> Prefer not to answer</label>

<label>If yes, type of travel (select all that apply):</label>
<label><input type="checkbox" name="travel_types" value="domestic"> Domestic</label>
<label><input type="checkbox" name="travel_types" value="international"> International</label>
<label><input type="checkbox" name="travel_types" value="public_transport"> Public transport (bus/train/plane)</label>

<label>Planned trips in the next 30 days?</label>
<label><input type="radio" name="planned_travel" value="yes"> Yes</label>
<label><input type="radio" name="planned_travel" value="no"> No</label>
<label><input type="radio" name="planned_travel" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 16. Pet / Animal Exposure -->
<fieldset>
<legend>16. Contact with Animals
<button type="button" class="info-btn" onclick="toggleInfo('animalInfo')">Why?</button>
</legend>
<div id="animalInfo" class="info-box">
Contact with animals can influence risk for zoonotic infections.
</div>
<label>Contact with animals regularly? (Select all that apply)</label>
<label><input type="checkbox" name="animal_contact" value="pets"> Pets (cats, dogs, etc.)</label>
<label><input type="checkbox" name="animal_contact" value="livestock"> Livestock (cattle, poultry, etc.)</label>
<label><input type="checkbox" name="animal_contact" value="wildlife"> Wildlife (birds, rodents, bats)</label>
<label><input type="checkbox" name="animal_contact" value="none"> None</label>
<label><input type="checkbox" name="animal_contact" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 17. Contact with Children / Institutional Environments -->
<fieldset>
<legend>17. Contact with Children or Institutional Settings
<button type="button" class="info-btn" onclick="toggleInfo('institutionInfo')">Why?</button>
</legend>
<div id="institutionInfo" class="info-box">
Exposure to daycare, schools, or care homes can impact risk for you and household.
</div>
<label>Do you or household members attend or work in: (Select all that apply)</label>
<label><input type="checkbox" name="institution_contact" value="daycare"> Daycare or preschool</label>
<label><input type="checkbox" name="institution_contact" value="school"> School (student or staff)</label>
<label><input type="checkbox" name="institution_contact" value="nursing_home"> Nursing home or long-term care</label>
<label><input type="checkbox" name="institution_contact" value="none"> None</label>
<label><input type="checkbox" name="institution_contact" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 18. Immune System Status -->
<fieldset>
<legend>18. Immune System Status
<button type="button" class="info-btn" onclick="toggleInfo('immuneInfo')">Why?</button>
</legend>
<div id="immuneInfo" class="info-box">
Certain treatments or conditions affect your immune health and infection risk.
</div>
<label>Do you take immunosuppressive meds or have immune conditions? (Select all that apply)</label>
<label><input type="checkbox" name="immune_status" value="cancer_therapy"> Cancer therapy</label>
<label><input type="checkbox" name="immune_status" value="transplant"> Organ transplant recipient</label>
<label><input type="checkbox" name="immune_status" value="hiv_positive"> HIV positive</label>
<label><input type="checkbox" name="immune_status" value="autoimmune"> Autoimmune disease treatment</label>
<label><input type="checkbox" name="immune_status" value="none"> None</label>
<label><input type="checkbox" name="immune_status" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 19. Disease-Specific Question Placeholder -->
<fieldset>
<legend>19. Disease-Specific Questions
<button type="button" class="info-btn" onclick="toggleInfo('diseaseModuleInfo')">Why?</button>
</legend>
<div id="diseaseModuleInfo" class="info-box">
Targeted questions for current active threats will appear here.
</div>
<p><em>This dynamic section adjusts for current epidemic context and disease.</em></p>
</fieldset>

<!-- 20. Ethnicity / Race (Optional) -->
<fieldset>
<legend>20. Ethnicity / Race (Optional)
<button type="button" class="info-btn" onclick="toggleInfo('ethnicityInfo')">Why?</button>
</legend>
<div id="ethnicityInfo" class="info-box">
Helps improve public health interventions and communication without discrimination.
</div>
<select name="ethnicity" aria-label="Select ethnicity or race">
<option value="">Select (optional)</option>
<option value="hispanic">Hispanic or Latino</option>
<option value="white">White</option>
<option value="black">Black or African American</option>
<option value="asian">Asian</option>
<option value="native_american">Native American or Alaska Native</option>
<option value="pacific_islander">Native Hawaiian or Other Pacific Islander</option>
<option value="other">Other</option>
<option value="skip">Prefer not to say</option>
</select>
</fieldset>

<!-- 21. Technology Access / Health Literacy -->
<fieldset>
<legend>21. Technology & Healthcare Access (Optional)
<button type="button" class="info-btn" onclick="toggleInfo('techAccessInfo')">Why?</button>
</legend>
<div id="techAccessInfo" class="info-box">
Access to devices and healthcare resources impacts ability to follow recommendations.
</div>
<label>Reliable access to smartphone or internet?</label>
<label><input type="radio" name="tech_access" value="yes"> Yes</label>
<label><input type="radio" name="tech_access" value="no"> No</label>
<label><input type="radio" name="tech_access" value="skip"> Prefer not to answer</label>

<label>Reliable transportation to healthcare or vaccination centers?</label>
<label><input type="radio" name="transport_access" value="yes"> Yes</label>
<label><input type="radio" name="transport_access" value="no"> No</label>
<label><input type="radio" name="transport_access" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- 22. Medication & Treatment Contraindications -->
<fieldset>
<legend>22. Medication and Treatment Contraindications
<button type="button" class="info-btn" onclick="toggleInfo('medContraInfo')">Why?</button>
</legend>
<div id="medContraInfo" class="info-box">
Allergies or contraindications help tailor safer recommendations.
</div>
<label>Allergies or contraindications to vaccines/medications?</label>
<label><input type="radio" name="med_contraindications" value="yes"> Yes</label>
<label><input type="radio" name="med_contraindications" value="no" checked> No</label>
<label><input type="radio" name="med_contraindications" value="skip"> Prefer not to answer</label>

<label>If yes, please specify (optional):</label>
<textarea name="med_allergy_details" placeholder="E.g., allergic to eggs, penicillin"></textarea>
</fieldset>

<!-- 23. Caregiver Status -->
<fieldset>
<legend>23. Caregiver Status
<button type="button" class="info-btn" onclick="toggleInfo('caregiverInfo')">Why?</button>
</legend>
<div id="caregiverInfo" class="info-box">
Caregivers need tailored guidance to protect themselves and those under their care.
</div>
<label>Are you a primary caregiver for a child, elderly person, or someone immunocompromised?</label>
<label><input type="radio" name="caregiver_status" value="yes"> Yes</label>
<label><input type="radio" name="caregiver_status" value="no" checked> No</label>
<label><input type="radio" name="caregiver_status" value="skip"> Prefer not to answer</label>
</fieldset>

<!-- Save & Submit -->
<button type="submit">Submit — Save / Update Profile</button>

<div class="bar">
You may skip any question you prefer and return later to update your responses. Honest answers improve your personalized guidance and help the community.
</div>

</form>
</div>

<script>
// Toggle info-box visibility for "Why this matters"
function toggleInfo(id) {
var box = document.getElementById(id);
if (!box) return;
box.style.display = (box.style.display === 'block') ? 'none' : 'block';
}

// Simple progress bar (counts fieldsets with answered inputs)
const form = document.getElementById('pandemicForm');
const fieldsets = form.querySelectorAll('fieldset');
const progressBar = document.getElementById('progressBar');

form.addEventListener('change', () => {
let answeredCount = 0;
fieldsets.forEach(fs => {
const inputs = fs.querySelectorAll('input, select, textarea');
const answered = Array.from(inputs).some(input => {
if (input.type === 'radio' || input.type === 'checkbox') {
return input.checked;
} else if (input.tagName === 'SELECT') {
return input.value && input.value !== '';
} else {
return input.value && input.value.trim() !== '';
}
});
if (answered) answeredCount++;
});
progressBar.style.width = ((answeredCount / fieldsets.length) * 100) + '%';
});

// Exclusive logic for No known conditions in health conditions checkbox
const condCheckboxes = document.querySelectorAll('input[name="cond"]');
condCheckboxes.forEach(cb => {
cb.addEventListener('change', function() {
if(this.value === 'none' && this.checked) {
condCheckboxes.forEach(c => { if (c.value !== 'none') c.checked = false; });
} else if (this.checked) {
document.querySelector('input[name="cond"][value="none"]').checked = false;
}
});
});