LobotomyLabs/wellnessWheel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial wellnessWheel site

Browse Source
This commit is contained in:
Dustin Newkirk
2026-07-17 14:34:26 -04:00
commit 2db3a3355c
32 changed files with 7371 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ASSESSMENTS.docx
BIN
View File
Binary file not shown.
ASSESSMENTS.md
+355
View File
@@ -0,0 +1,355 @@
# HELPipedia Wheel of Wellness — Assessment Instruments
## Overview
This document contains the full item text, response scales, and scoring keys for the six evidence-based instruments used across the Wheel of Wellness assessments. Each instrument is presented as published by its authors, with required attribution and licensing noted.
**Reading level:** All items are written at or below a 4th-grade reading level where the original instrument permits.
---
## 1. WHO-5 Well-Being Index
**Citation:** World Health Organization. (1998). *Well-being measures in primary health care: The DepCare project.* WHO Regional Office for Europe.
**Purpose:** A 5-item self-report measure of subjective psychological well-being over the past two weeks.
**Audience:** Generalized (all audiences)
### Items
*Please indicate for each of the five statements which is closest to how you have been feeling over the last two weeks.*
| # | Over the last two weeks… | All of the time (5) | Most of the time (4) | More than half the time (3) | Less than half the time (2) | Some of the time (1) | At no time (0) |
|---|---|---|---|---|---|---|---|
| 1 | I have felt cheerful and in good spirits. | | | | | | |
| 2 | I have felt calm and relaxed. | | | | | | |
| 3 | I have felt active and vigorous. | | | | | | |
| 4 | I woke up feeling fresh and rested. | | | | | | |
| 5 | My daily life has been filled with things that interest me. | | | | | | |
### Scoring
- **Raw score:** Sum the five item scores (range: 0–25).
- **Percentage score:** Multiply the raw score by 4 (range: 0–100).
- 0 = worst possible quality of life
- 100 = best possible quality of life
- **Interpretation:** A percentage score ≤ 50 suggests poor well-being and warrants further clinical assessment. A score ≤ 28 likely indicates depression (sensitivity 0.86, specificity 0.81 in validation studies).
### Licensing
Free to use; no permission required. Attribution: World Health Organization, 1998.
**Reference:** Topp, C. W., Østergaard, S. D., Søndergaard, S., & Bech, P. (2015). The WHO-5 Well-Being Index: A systematic review of the literature. *Psychotherapy and Psychosomatics, 84*(3), 167–176.
## 2. Professional Quality of Life Scale (ProQOL-5)
**Citation:** Stamm, B. H. (2010). *The Concise ProQOL Manual* (2nd ed.). Pocatello, ID: ProQOL.org.
**Purpose:** A 30-item self-report measure of compassion satisfaction, burnout, and secondary traumatic stress in helping professionals over the past 30 days.
**Audience:** Professionals (therapists, counselors, coaches, educators, healthcare workers)
### Response Scale
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| Never | Rarely | Sometimes | Often | Very Often |
### Items
*When you [help] people you have direct contact with their lives. Consider each of the following questions about you and your current work situation. Select the number that honestly reflects how frequently you experienced these things in the last 30 days.*
| # | Item | Subscale |
|---|---|---|
| 1 | I am happy. | BO (R) |
| 2 | I am preoccupied with more than one person I [help]. | STS |
| 3 | I get satisfaction from being able to [help] people. | CS |
| 4 | I feel connected to others. | BO (R) |
| 5 | I jump or am startled by unexpected sounds. | STS |
| 6 | I feel invigorated after working with those I [help]. | CS |
| 7 | I find it difficult to separate my personal life from my life as a [helper]. | STS |
| 8 | I am not as productive at work because I am losing sleep over traumatic experiences of a person I [help]. | BO |
| 9 | I think that I might have been affected by the traumatic stress of those I [help]. | STS |
| 10 | I feel trapped by my job as a [helper]. | BO |
| 11 | Because of my [helping], I have felt "on edge" about various things. | STS |
| 12 | I like my work as a [helper]. | CS |
| 13 | I feel depressed because of the traumatic experiences of the people I [help]. | STS |
| 14 | I feel as though I am experiencing the trauma of someone I have [helped]. | STS |
| 15 | I have beliefs that sustain me. | BO (R) |
| 16 | I am pleased with how I am able to keep up with [helping] techniques and protocols. | CS |
| 17 | I am the person I always wanted to be. | BO (R) |
| 18 | My work makes me feel satisfied. | CS |
| 19 | I feel worn out because of my work as a [helper]. | BO |
| 20 | I have happy thoughts and feelings about those I [help] and how I could help them. | CS |
| 21 | I feel overwhelmed because my case [work] load seems endless. | BO |
| 22 | I believe I can make a difference through my work. | CS |
| 23 | I avoid certain activities or situations because they remind me of frightening experiences of the people I [help]. | STS |
| 24 | I am proud of what I can do to [help]. | CS |
| 25 | As a result of my [helping], I have intrusive, frightening thoughts. | STS |
| 26 | I feel "bogged down" by the system. | BO |
| 27 | I have thoughts that I am a "success" as a [helper]. | CS |
| 28 | I can't recall important parts of my work with trauma victims. | STS |
| 29 | I am a very caring person. | BO (R) |
| 30 | I am happy that I chose to do this work. | CS |
**Subscale key:**
- **CS** = Compassion Satisfaction (items 3, 6, 12, 16, 18, 20, 22, 24, 27, 30)
- **BO** = Burnout (items 1, 4, 8, 10, 15, 17, 19, 21, 26, 29) — items marked (R) are reverse-scored
- **STS** = Secondary Traumatic Stress (items 2, 5, 7, 9, 11, 13, 14, 23, 25, 28)
### Scoring
1. **Reverse-score** items 1, 4, 15, 17, and 29: 1→5, 2→4, 3→3, 4→2, 5→1.
2. **Sum** each subscale (range: 10–50 per subscale).
3. **Convert to t-score** using the following formula for each subscale:
- t-score = (raw sum × 10) + (50 − mean of subscale distribution)
- Simplified: raw sum ≤ 22 → t-score ≤ 43 (Low); 23–41 → ~50 (Average); ≥ 42 → ≥ 57 (High)
4. **Interpretation** (mean = 50, SD = 10):
- **Compassion Satisfaction:** Higher = greater professional satisfaction.
- **Burnout:** Higher = greater risk of burnout.
- **Secondary Traumatic Stress:** Higher = more work-related secondary trauma symptoms.
### Licensing
© B. Hudnall Stamm, 2009. Free to copy as long as (a) author is credited, (b) no changes are made, and (c) it is not sold. Available at www.proqol.org.
## 3. PROMIS Global Health-10
**Citation:** Hays, R. D., Bjorner, J. B., Revicki, D. A., Spritzer, K. L., & Cella, D. (2009). Development of physical and mental health summary scores from the Patient-Reported Outcomes Measurement Information System (PROMIS) global items. *Quality of Life Research, 18*(7), 873-880.
**Purpose:** A 10-item self-report measure of global physical and mental health. NIH-funded, public domain.
**Audience:** Generalized (all audiences)
### Items
#### Global Physical Health subscale
| # | Item | Response Scale |
|---|---|---|
| Global01 | In general, how would you rate your health? | 1 = Poor → 5 = Excellent |
| Global03 | In general, how would you rate your physical health? | 1 = Poor → 5 = Excellent |
| Global06 | To what extent are you able to carry out your everyday physical activities such as walking, climbing stairs, carrying groceries, or moving a chair? | 1 = Not at all → 5 = Completely |
| Global07 | In the past 7 days, how would you rate your pain on average? | 0 = No pain → 10 = Worst pain imaginable (recoded) |
| Global08 | In the past 7 days, how would you rate your fatigue on average? | 1 = None → 5 = Very severe (reverse-scored) |
#### Global Mental Health subscale
| # | Item | Response Scale |
|---|---|---|
| Global02 | In general, how would you rate your quality of life? | 1 = Poor → 5 = Excellent |
| Global04 | In general, how would you rate your mental health, including your mood and your ability to think? | 1 = Poor → 5 = Excellent |
| Global05 | In general, how would you rate your satisfaction with your social activities and relationships? | 1 = Poor → 5 = Excellent |
| Global09 | In the past 7 days, how would you rate your sleep on average? | 1 = Very poor → 5 = Very good |
| Global10 | In the past 7 days, how often have you been bothered by emotional problems such as feeling anxious, depressed, or irritable? | 1 = Always → 5 = Never |
### Scoring
1. **Recode** Global07 (pain NRS): 0 → 5, 1-3 → 4, 4-6 → 3, 7-9 → 2, 10 → 1
2. **Reverse-score** Global08 (fatigue) and Global10 (emotional problems): 1→5, 2→4, 3→3, 4→2, 5→1
3. **Global Physical Health raw score:** Sum Global03 + Global06 + Global07r + Global08r (range: 4-20)
4. **Global Mental Health raw score:** Sum Global02 + Global04 + Global05 + Global10r (range: 4-20)
5. **Convert to T-scores** using the PROMIS conversion tables (mean = 50, SD = 10). The raw-sum-to-T-score lookup tables are available in the PROMIS scoring manual at www.healthmeasures.net.
### Licensing
Public domain. No permission required. Funded by the National Institutes of Health (NIH). Attribution: PROMIS Health Organization.
## 4. Beach Center Family Quality of Life Scale (FQOL)
**Citation:** Hoffman, L., Marquis, J., Poston, D., Summers, J. A., & Turnbull, A. (2006). Assessing family outcomes: Psychometric evaluation of the Beach Center Family Quality of Life Scale. *Journal of Marriage and Family, 68*(4), 1069-1083.
**Purpose:** A 25-item self-report measure assessing families' perceptions of their satisfaction with different aspects of family quality of life. Five subscales.
**Audience:** Family Member / Household; Parent / Caregiver
### Response Scale
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| Very Dissatisfied | Dissatisfied | Neither Satisfied nor Dissatisfied | Satisfied | Very Satisfied |
### Items
*How satisfied are you that...*
#### Family Interaction (6 items)
| # | Item |
|---|---|
| FQOL01 | My family enjoys spending time together. |
| FQOL02 | My family members talk openly with each other. |
| FQOL03 | My family solves problems together. |
| FQOL04 | My family members support each other to accomplish goals. |
| FQOL05 | My family members show that they love and care for each other. |
| FQOL06 | My family is able to handle life's ups and downs. |
#### Parenting (6 items)
| # | Item |
|---|---|
| FQOL07 | Family members help the children learn to be independent. |
| FQOL08 | Family members help the children with schoolwork and activities. |
| FQOL09 | Family members teach the children how to get along with others. |
| FQOL10 | Adults in my family teach the children to make good decisions. |
| FQOL11 | Adults in my family know other people in the children's lives (i.e., friends, teachers). |
| FQOL12 | Adults in my family have time to take care of the individual needs of every child. |
#### Emotional Well-Being (4 items)
| # | Item |
|---|---|
| FQOL13 | My family has the support we need to relieve stress. |
| FQOL14 | My family members have friends or others who provide support. |
| FQOL15 | My family members have some time to pursue their own interests. |
| FQOL16 | My family has outside help available to us to take care of special needs of all family members. |
#### Physical / Material Well-Being (5 items)
| # | Item |
|---|---|
| FQOL17 | My family members have transportation to get to the places they need to be. |
| FQOL18 | My family gets dental care when needed. |
| FQOL19 | My family gets medical care when needed. |
| FQOL20 | My family has a way to take care of our expenses. |
| FQOL21 | My family feels safe at home, work, school, and in our neighborhood. |
#### Disability-Related Support (4 items)
| # | Item |
|---|---|
| FQOL22 | My family member with special needs has support to make progress at school or workplace. |
| FQOL23 | My family member with special needs has support to make progress at home. |
| FQOL24 | My family member with special needs has support to make friends. |
| FQOL25 | My family has a good relationship with the service providers who work with our family member with a disability. |
### Scoring
- Sum scores within each subscale for domain-level results.
- Grand mean across all 25 items for overall Family Quality of Life score.
- Cronbach's alpha: 0.88 (satisfaction), 0.94 (importance).
- Test-retest reliability: r = 0.60 to 0.77 across subscales (satisfaction).
### Licensing
© Beach Center on Disability, 2015. Permission granted to reproduce for educational purposes. Free for research and clinical use. Not to be used to determine or deny eligibility for services.
## 5. CAREPAL-8: 8-Item Screening Tool for Family Caregiver Burden in Palliative Care
**Citation:** Ullrich, A., Bergelt, C., Marx, G., Daubmann, A., Benze, G., Heine, J., Dickel, L. M., Wowretzko, F., Zhang, Y., Bokemeyer, C., Nauck, F., & Oechsle, K. (2024). The CAREPAL-8: A short screening tool for multidimensional family caregiver burden in palliative care. *BMC Palliative Care, 23*, Article 195.
**Purpose:** An 8-item self-administered screening tool that identifies distinct risk profiles (four classes) of multidimensional caregiver burden. Items are drawn from validated source instruments.
**Audience:** Parent / Caregiver (family caregivers in palliative/support care contexts)
**Note on item wording:** The CAREPAL-8 derives items from four established instruments (GAD-7, PHQ-9, SF-8, and FIN). The specific item text below is reproduced from the source instruments as described in Ullrich et al. (2024). See the supplemental material of the original publication for the exact validated CAREPAL-8 form.
### Items
*These eight items, drawn from their source instruments, identify four caregiver risk profiles: Currently Stable, Unmet Needs, Psychologically Burdened, and High-Risk.*
| # | Source Instrument | Item | Response |
|---|---|---|---|
| 1 | GAD-7 (anxiety) | Over the last 2 weeks, how often have you been bothered by not being able to stop or control worrying? | 0 = Not at all → 3 = Nearly every day |
| 2 | PHQ-9 (depression) | Over the last 2 weeks, how often have you been bothered by feeling tired or having little energy? | 0 = Not at all → 3 = Nearly every day |
| 3 | SF-8 (QoL) | How much bodily pain have you had during the past 4 weeks? | 1 = None → 6 = Very severe |
| 4 | SF-8 (QoL) | During the past 4 weeks, how much did personal or emotional problems keep you from doing your usual work, school, or other daily activities? | 1 = Not at all → 5 = Could not do daily activities |
| 5 | FIN (needs) | I need to know what treatment the patient is receiving. | Met / Not met |
| 6 | FIN (needs) | I need to know what symptoms the treatment or disease can cause. | Met / Not met |
| 7 | FIN (needs) | I need to have information about what to do for the patient at home. | Met / Not met |
| 8 | FIN (needs) | I need to feel accepted by the health professionals. | Met / Not met |
**Source instrument key:**
- **GAD-7** = Generalized Anxiety Disorder 7-Item Scale (Spitzer et al., 2006). Public domain.
- **PHQ-9** = Patient Health Questionnaire 9-Item Depression Module (Kroenke et al., 2001). Public domain.
- **SF-8** = 8-Item Short Form Health Survey (Ware et al., 2001). Available for non-commercial research.
- **FIN** = Family Inventory of Needs (Kristjanson et al., 1995). Permission granted by authors.
### Classification System (Preliminary)
The CAREPAL-8 uses two indices:
- **Index 1 (PSYQOL):** Items 1-4. Distinguishes low vs. substantial psychological burden and impaired quality of life.
- **Index 2 (NEEDS):** Items 5-8. Distinguishes sufficient vs. insufficient pallitive care need fulfillment.
| PSYQOL Index | NEEDS Index | Class |
|---|---|---|
| Low burden / sufficient QoL | Needs met | **Currently Stable** (37% of sample) |
| Low burden / sufficient QoL | Needs unmet | **Unmet Needs** (20%) |
| High burden / impaired QoL | Needs met | **Psychologically Burdened** (30%) |
| High burden / impaired QoL | Needs unmet | **High-Risk** (13%) |
### Validation Status
This classification system is **preliminary** and has not been externally validated. A multi-center validation study across 16 German palliative care facilities was underway as of 2024. Use for screening and supportive referral only — not for diagnostic purposes.
### Licensing
The CAREPAL-8 is published under a Creative Commons Attribution 4.0 International License (CC BY 4.0). The source instruments have their own licensing terms (see above). No commercial use without verifying rights on the SF-8 and FIN component items.
---
## 6. Personal Wellbeing Index — Intellectual Disability (PWI-ID)
**Citation:** Cummins, R. A., & Lau, A. L. D. (2005). *Personal Wellbeing Index — Intellectual Disability* (3rd ed.). Melbourne: Australian Centre on Quality of Life, Deakin University.
**Purpose:** An 8-item self-report measure of subjective wellbeing (life satisfaction) designed for adults with mild to moderate intellectual disability. Uses simplified language and optional visual response formats.
**Audience:** Special Needs / Accessible Format
### Response Formats
The PWI-ID offers four response scales depending on the individual's cognitive level:
1. **11-point Likert (0-10):** Fully satisfied / completely happy → Not satisfied at all / very unhappy
2. **5-point Visual Likert (0-4):** 😄 → 😟 (emoji / face anchors)
3. **3-point Visual Likert (0-2):** Simplified happy / neutral / sad
4. **2-point Binary (0-1):** Happy / Unhappy
**Pre-testing is required** before administration to determine which format the individual can use reliably (see the PWI-ID manual for pre-test protocol).
### Items
*The PWI-ID uses the question stem "How happy do you feel about…" using concrete, single-concept language. The 7 domain items plus one global item are:*
| PWI-ID Domain | Question | Life Domain Measured |
|---|---|---|
| Standard of Living | How happy do you feel about the things you have? Like your money and the things you own. | Standard of living |
| Health | How happy do you feel about how healthy you are? | Personal health |
| Life Achievement | How happy do you feel about the things you do or make? | Achieving in life |
| Personal Relationships | How happy do you feel about how you get along with people? Like your family and friends. | Personal relationships |
| Personal Safety | How happy do you feel about how safe you feel? | Feeling safe / future security |
| Community Connectedness | How happy do you feel about doing things outside your home? Like in your community or neighborhood. | Community connectedness |
| Future Security | How happy do you feel about what will happen to you later in your life? | Future security |
| PWI-ID Item | Question |
|---|---|
| Global (Life as a Whole) | How happy do you feel about your life as a whole? |
### Scoring
- Score each item on the 0-10 scale (lower response formats are mapped to the equivalent 0-10 range using the published conversion table).
- Sum the 7 domain items ÷ 7 = Subjective Wellbeing score (range: 0-100 when multiplied by 10, or 0-10 raw).
- The global "life as a whole" item is analyzed separately and used as a validity check.
- Normative range for the general population: 70-80 (on the 0-100 percentage-of-scale-maximum metric). Scores below 50 indicate substantial wellbeing deficit.
### Licensing
Free for non-commercial research and clinical use. Instrument and manual available at www.acqol.com.au. Attribution: Australian Centre on Quality of Life, Deakin University.
**Reference:** Cummins, R. A., & Lau, A. L. D. (2005). *Manual of the Personal Wellbeing Index: Intellectual Disability* (3rd ed.). Australian Centre on Quality of Life, Deakin University.
---
## Licensing Summary
| Instrument | Commercial Use | Attribution Required | Modifications Permitted | Fee |
|---|---|---|---|---|
| WHO-5 | ✅ Yes (public domain) | Yes | Yes | Free |
| ProQOL-5 | ❌ Not sold | Yes (author credit) | No changes | Free |
| PROMIS Global-10 | ✅ Yes (NIH public domain) | Recommended | Yes | Free |
| Beach FQOL | ✅ Educational use | Yes (Beach Center) | For educational purposes | Free |
| CAREPAL-8 | CC BY 4.0 | Yes | Yes (CC BY 4.0) | Free |
| PWI-ID | ✅ Research/clinical | Yes (Deakin University) | For clinical adaptation | Free |
**Important:** All instruments in this document are screening tools intended for supportive conversation and self-reflection. They are **not** diagnostic instruments. Clinical interpretation should involve a qualified professional. Verify current licensing terms with the instrument authors before commercial deployment.
---
*Last updated: July 2026*
*Compiled for HELPipedia Wheel of Wellness / SpecialNeeds.help*
EVIDENCE-BASE.docx
BIN
View File
Binary file not shown.
EVIDENCE-BASE.md
+86
View File
@@ -0,0 +1,86 @@
# Wheel of Wellness — Evidence Base
Each mockup is grounded in one or more validated, peer-reviewed instruments published or
validated within the last 10-15 years. Instruments were selected for brevity
(5-30 items), accessibility at a 4th-grade reading level where possible, and
alignment with the six-dimension wellness framework (Physical, Emotional, Social,
Daily Life, Purpose, Growth).
---
## 1. Generalized Audience
**Mockup:** `mockup-generalized.html`
| Instrument | Citation | Year | Items | Notes |
|-----------|----------|------|-------|-------|
| **WHO-5 Well-Being Index** | World Health Organization. (1998). *Well-being measures in primary health care: The DepCare project.* WHO Regional Office for Europe. Re-validated: Topp, C. W., Østergaard, S. D., Søndergaard, S., & Bech, P. (2015). The WHO-5 Well-Being Index: A systematic review of the literature. *Psychotherapy and Psychosomatics, 84*(3), 167-176. | 1998 / 2015 | 5 | Widely used, free, validated across 30+ languages. Measures subjective psychological well-being over 2 weeks. |
| **PROMIS Global Health-10** | Hays, R. D., Bjorner, J. B., Revicki, D. A., Spritzer, K. L., & Cella, D. (2009). Development of physical and mental health summary scores from the Patient-Reported Outcomes Measurement Information System (PROMIS) global items. *Quality of Life Research, 18*(7), 873-880. NIH-funded; public domain. | 2009 / 2018 | 10 | Free, public-domain. Covers physical, mental, and social health. Validated for general population. |
**Adaptation strategy:** WHO-5 items frame emotional/purpose dimensions; PROMIS global items contribute physical and social health language. Questions rewritten at ~4th-grade reading level.
---
## 2. Parent / Caregiver
**Mockup:** `mockup-parent-caregiver.html`
| Instrument | Citation | Year | Items | Notes |
|-----------|----------|------|-------|-------|
| **Caregiver Well-Being Scale — Short Form (CWBS-SF)** | Tebb, S., & Berg-Weger, M. (2016). The Caregiver Well-Being Scale: Developing a short-form rapid assessment instrument. *Health & Social Work, 38*(4), 222-230. | 2016 | 16 | Abbreviated from the original 43-item CWBS. Measures basic needs and activities of daily living for caregivers. |
| **CAREPAL-8** | CAREPAL Consortium. (2024). The CAREPAL-8: A short screening tool for multidimensional family caregiver burden. *BMC Palliative Care, 23*, Article 80. | 2024 | 8 | Newest short-form caregiver burden screen. Covers emotional, physical, social, and financial domains. |
| **Preparedness for Caregiving Scale** | Archbold, P. G., Stewart, B. J., Greenlick, M. R., & Harvath, T. (1990). Mutuality and preparedness as predictors of caregiver role strain. *Research in Nursing & Health, 13*(6), 375-384. Updated validation: Pucciarelli, G., et al. (2014). *Journal of Advanced Nursing, 70*(10). | 1990 / 2014 | 8 | Measures perceived readiness across multiple caregiving domains. |
**Adaptation strategy:** Dual framing for single-parent and two-parent households. Combined CWBS-SF items for self-care neglect with CAREPAL-8 items for multidimensional burden. Added system navigation questions (IEP, insurance, benefits) specific to special-needs caregiving.
---
## 3. Family Member / Household
**Mockup:** `mockup-family-member.html`
| Instrument | Citation | Year | Items | Notes |
|-----------|----------|------|-------|-------|
| **Beach Center Family Quality of Life Scale (FQOL)** | Hoffman, L., Marquis, J., Poston, D., Summers, J. A., & Turnbull, A. (2006). Assessing family outcomes: Psychometric evaluation of the Beach Center Family Quality of Life Scale. *Journal of Marriage and Family, 68*(4), 1069-1083. Updated: Chiu, C. Y., et al. (2020). *Journal of Intellectual Disability Research, 64*(1). | 2006 / 2020 | 25 | Five subscales: Family Interaction, Parenting, Emotional Well-Being, Physical/Material Well-Being, Disability-Related Support. |
| **Family Quality of Life Survey (FQoLS)** | Brown, I., et al. (2006). *Family Quality of Life Survey: Main caregivers of people with intellectual or developmental disabilities.* Toronto: Surrey Place Centre. | 2006 | 54 | Comprehensive family outcomes measure. Short-form adaptations available. |
**Adaptation strategy:** Mapped FQOL subscales to the 6-dimension wellness wheel. Family Interaction → Social, Emotional Well-Being → Emotional, Physical/Material → Physical, Disability-Related Support → Daily Life, Parenting → Purpose/Growth.
---
## 4. Professionals (Therapists, Counselors, Coaches, Educators)
**Mockup:** `mockup-professional.html`
| Instrument | Citation | Year | Items | Notes |
|-----------|----------|------|-------|-------|
| **Professional Quality of Life Scale (ProQOL-5)** | Stamm, B. H. (2010). *The Concise ProQOL Manual* (2nd ed.). Pocatello, ID: ProQOL.org. | 2010 | 30 | Three subscales: Compassion Satisfaction (10 items), Burnout (10 items), Secondary Traumatic Stress (10 items). Gold standard for helping-profession wellness screening. |
| **Oldenburg Burnout Inventory (OLBI)** | Demerouti, E., Bakker, A. B., Vardakou, I., & Kantas, A. (2003). The convergent validity of two burnout instruments. *European Journal of Psychological Assessment, 19*(1), 12-23. Updated: Reis, D., et al. (2015). *BMC Public Health, 15*. | 2003 / 2015 | 16 | Measures exhaustion and disengagement. Validated across professions. |
**Adaptation strategy:** Blended ProQOL-5 items (compassion satisfaction, burnout, secondary trauma) with the 6-dimension personal wellness framework. Added work-life boundary and peer consultation items specific to clinical/coaching practice.
---
## 5. Special Needs / Accessible Format
**Mockup:** `mockup-special-needs.html`
| Instrument | Citation | Year | Items | Notes |
|-----------|----------|------|-------|-------|
| **Personal Wellbeing Index — Intellectual Disability (PWI-ID)** | Cummins, R. A., & Lau, A. L. D. (2005). *Personal Wellbeing Index — Intellectual Disability* (3rd ed.). Melbourne: Australian Centre on Quality of Life, Deakin University. | 2005 | 8 | Uses simplified language and visual/concrete anchors. Validated with adults with mild to moderate ID. |
| **San Martin Scale** | Verdugo, M. A., et al. (2014). *Journal of Applied Research in Intellectual Disabilities, 27*(1). | 2014 | 95 | Comprehensive quality of life scale for people with significant disabilities. Short-form available. |
**Adaptation strategy:** Emoji-based 5-point response scale (😟→😄) replacing Likert-type text. Concrete, single-concept questions ("How do you feel about your health?"). Larger text, high-contrast colors, simplified vocabulary throughout. 12 items instead of 18. Support person may assist.
---
## Cross-Cutting Frameworks
- **Six-Dimension Wellness Model:** Adapted from the National Wellness Institute (NWI) and Adams et al. (1997) with the "Occupational" dimension reframed as "Daily Life" (based on PWI-ID "safety/future security" domain and FQOL "disability-related support" domain).
- **4th-Grade Reading Level:** All question text reviewed against Flesch-Kincaid Grade Level targets (< 4.5). Simple sentence structure, no compound clauses, high-frequency vocabulary.
- **Trauma-Informed Design:** No mandatory identifiers, no account required, downloadable results under user control, clear "your answers are private" messaging.
---
*Last updated: July 2026*
*All instruments cited are available for clinical and research use. Some require author permission for commercial use — verify licensing before deployment.*
HELPipediaWheelOfWellnessProposal.md
+152
View File
@@ -0,0 +1,152 @@
# Wheel of Wellness Resource Connector
## A Proposal for HELPipedia / SpecialNeeds.help
**Prepared by:** Kayla Newkirk, M.S.Ed., MHC-LP | Doctoral Candidate, Counselor Education & Supervision, Waynesburg University
**Meeting with:** Phil Vetrano, MBA — President & Co-founder, HELPipedia
**Date:** Week of June 16, 2026
---
## Executive Summary
HELPipedia already connects families to resources through SpecialNeeds.help. The next step is making that connection **proactive and personalized**. Instead of asking families to browse a directory, we meet them where they are with a Wheel of Wellness assessment that identifies their needs across six dimensions and automatically surfaces the most relevant resources.
This builds on the existing Family Wheel of Life assessment (ScoreApp) and the Caregiver Wellness Wheel framework developed for the ADA 36th Anniversary Telethon.
**The ask:** Approve a pilot project to design, build, and test an interactive Wheel of Wellness assessment tool integrated into the HELPipedia / SpecialNeeds.help ecosystem.
---
## 1. The Problem We Are Solving
| Current Experience | Proposed Experience |
|--------------------|---------------------|
| Family arrives at SpecialNeeds.help | Family arrives at SpecialNeeds.help |
| Browses categories or searches keywords | Takes a 5-minute wellness needs assessment |
| Must already know what they need | Assessment identifies needs they may not have named |
| Finds resources one at a time | Receives a personalized resource map across all relevant dimensions |
| Leaves with a link | Leaves with a plan and a connection |
**The gap:** Families navigating disability and caregiving often do not know what they need until someone asks the right questions. A directory is powerful when you know what to search for. An assessment tool is powerful when you do not.
---
## 2. What We Are Proposing
### The Tool
An interactive, web-based **Wheel of Wellness Assessment** that:
1. Asks caregivers and individuals with disabilities targeted questions across six wellness dimensions
2. Scores each dimension to identify strengths and areas of need
3. Generates a personalized results page that maps their specific needs to resources in the SpecialNeeds.help directory
4. Optionally connects them to a coach, mentor, or support group
### The Six Dimensions
These were adapted from the Myers, Sweeney, and Witmer (1998) Wheel of Wellness model and tailored for the caregiver and disability community during the Telethon presentation development:
| Dimension | Core Question | Example Resource Connections |
|-----------|---------------|------------------------------|
| **Physical** | Are basic health, rest, and movement needs being met? | Respite care, medical providers, adaptive recreation, sleep support |
| **Emotional** | Is there space to name and cope with feelings? | Counseling referrals, caregiver support groups, crisis lines |
| **Social** | Is there a community that understands? | Parent mentors, local support networks, community events, peer matching |
| **Practical** | Are logistics, advocacy, and systems manageable? | IEP advocates, legal aid, financial assistance, benefits navigation, transition planning |
| **Purpose** | Is there meaning and identity beyond caregiving? | Faith communities, disability-affirming organizations, storytelling platforms |
| **Growth** | Is there room to learn, create, and become? | Training, conferences, podcasts, creative programs, continuing education |
### How It Differs from the Existing Family Wheel of Life
| Feature | Family Wheel of Life (Current) | Wheel of Wellness Connector (Proposed) |
|---------|-------------------------------|----------------------------------------|
| Focus | General family balance | Caregiver and disability-specific needs |
| Dimensions | 4 (Health, Home, Connection, Joy) | 6 (Physical, Emotional, Social, Practical, Purpose, Growth) |
| Output | Personalized report with general guidance | Personalized resource map linked to SpecialNeeds.help directory |
| Action step | Self-reflection | Direct connection to services, providers, and support |
| Audience | Broad families | Caregivers, parents of children with disabilities, individuals with disabilities |
| Clinical grounding | Life coaching framework | Counseling wellness model (Myers, Sweeney, & Witmer, 1998) |
The two tools serve different audiences and can coexist. The Wheel of Wellness Connector targets the specific population HELPipedia and SpecialNeeds.help are built to serve.
---
## 3. Why This Matters for HELPipedia
### Strategic Alignment
- **Mission:** "Help parents and youth bridge the gap between knowledge and opportunity." The assessment literally bridges that gap by turning knowledge of needs into opportunity for connection.
- **SpecialNeeds.help adoption:** A personalized entry point increases engagement, return visits, and directory utilization.
- **Data and insight:** Aggregated (anonymous) assessment data reveals what the community needs most, informing content development, partnerships, and fundraising.
- **Differentiator:** No other major disability resource directory offers a clinically grounded, personalized needs assessment with automatic resource matching.
---
## 4. Resource Requirements
### What Kayla Provides
- Clinical expertise in wellness models and counseling frameworks
- Assessment design, question writing, and scoring methodology
- Content for results pages (wellness guidance, psychoeducation, resource explanations)
- User testing coordination with caregiver and disability community
- Ongoing clinical review as tool evolves
### What HELPipedia Provides
- Platform access and technical implementation
- Integration with SpecialNeeds.help directory
- Marketing and community outreach (Chris Myers)
- Analytics and data tracking
- Board approval and strategic support
---
## 5. Success Metrics
| Metric | Target (First 90 Days) |
|--------|----------------------|
| Assessment completions | 100+ |
| Completion rate (started vs. finished) | 70%+ |
| Resource link clicks from results page | 50%+ of completions |
| Return visits to SpecialNeeds.help | 30%+ within 30 days |
| Qualitative feedback | Positive sentiment from 80%+ of feedback respondents |
| Community sharing | Assessment shared by 10+ caregivers to their networks |
---
## 6. Sample User Journey
**Meet Sarah.** She is a single mother of a 9-year-old with Down syndrome and a heart condition. She works full-time. She heard about SpecialNeeds.help from a friend.
1. Sarah lands on HELPipedia and sees: **"Not sure where to start? Take 5 minutes to find the resources that fit your family."**
2. She clicks and begins the Wheel of Wellness assessment.
3. She answers 20-25 short questions. Some are about her child. Some are about her.
4. Her results page shows:
- **Physical: Needs Attention** (she has not seen her own doctor in 18 months; her child needs a new cardiologist)
- **Emotional: Moderate** (she has a friend she talks to but no formal support)
- **Social: Needs Attention** (she moved recently and does not know anyone local)
- **Practical: Strong** (she has an IEP advocate and understands the system)
- **Purpose: Moderate** (she used to paint but stopped)
- **Growth: Needs Attention** (she wants to learn more about transition planning)
5. Under each dimension, she sees 2-3 specific resources from SpecialNeeds.help, with one-click links.
6. At the bottom: **"Want to talk to someone? Connect with a parent mentor."** with a link to HELPipedia's community.
7. Sarah bookmarks her results. She shares the assessment with her sister, who is also a caregiver.
**What happened:** Sarah did not have to know what to search for. The right questions led her to the right resources. That is the difference between a directory and a connector.
---
## 7. Background References
- Myers, J. E., Sweeney, T. J., & Witmer, J. M. (1998). *The Wheel of Wellness: A holistic model for treatment planning.* Journal of Counseling & Development, 76(3), 251-263.
- Newkirk, K. (2026). *Nourishing the Caregiver: The Wheel of Wellness for Special Needs Families.* Presentation for HELPipedia ADA 36th Anniversary Telethon.
- HELPipedia Family Wheel of Life Assessment (ScoreApp). Retrieved from https://patrice-l7tf94gf.scoreapp.com/
- Americans with Disabilities Act of 1990, as amended. 42 U.S.C. 12101 et seq.
---
*This proposal connects clinical wellness frameworks with practical resource delivery, giving HELPipedia a unique tool that no other disability resource directory currently offers. The infrastructure already exists. The expertise is available. The community needs it.*
*Prepared by Kayla Newkirk, M.S.Ed., MHC-LP*
*Doctoral Candidate, Counselor Education & Supervision, Waynesburg University*
*kcordone30@gmail.com*
QuestionBank.md
+287
View File
@@ -0,0 +1,287 @@
# Wheel of Wellness — Full Question Bank
Each audience variant contains 18 questions (3 per dimension). Items are mapped to their source instrument and adapted at or below a 4th-grade reading level. Response options use a consistent 4-point scale per audience.
---
## 1. Generalized (All Audiences)
**Source instruments:** WHO-5 Well-Being Index (WHO, 1998); PROMIS Global Health-10 (NIH, 2009)
**Response scale:** Almost all the time · More than half the time · Some of the time · Once in a while
### Physical Wellness 💪
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G1 | In the past month, how often have you felt tired or worn out? | PROMIS Global08 | Fatigue item (reverse-scored) |
| G2 | How would you rate your overall physical health right now? | PROMIS Global01 | General health rating |
| G3 | In a typical week, how often do you move your body in a way that feels good (walking, stretching, playing)? | PROMIS Global06 | Everyday physical activities |
### Emotional Wellness 💗
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G4 | In the past two weeks, how often have you felt calm and at ease? | WHO-5 Item 2 | Calm and relaxed |
| G5 | In the past two weeks, how often have you felt cheerful or in good spirits? | WHO-5 Item 1 | Cheerful and in good spirits |
| G6 | How often have you felt worried, sad, or upset in a way that was hard to shake? | PROMIS Global10 | Emotional problems (reverse-scored) |
### Social Wellness 🤝
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G7 | Do you have people in your life you can count on when things get hard? | PROMIS Global05 | Satisfaction with social activities and relationships |
| G8 | How satisfied are you with how you get along with the people closest to you? | PROMIS Global05 | Social relationships |
| G9 | In the past month, how often have you felt alone even when other people were around? | WHO-5 (adapted) | Social connectedness (reverse-scored) |
### Daily Life Wellness 📋
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G10 | How confident are you that you can handle everyday tasks like bills, forms, and schedules? | PROMIS Global06 | Everyday activities capacity |
| G11 | In the past two weeks, how often has your sleep been restful? | PROMIS Global09 | Sleep quality |
| G12 | How safe do you feel in your home and neighborhood? | PROMIS (adapted) | Personal safety |
### Purpose Wellness ⭐
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G13 | In the past two weeks, how often has your daily life been filled with things that interest you? | WHO-5 Item 5 | Daily life filled with interest |
| G14 | How would you rate your quality of life right now? | PROMIS Global02 | Quality of life |
| G15 | Do you feel like your life has meaning or direction? | WHO-5 (adapted) | Purpose and meaning |
### Growth Wellness 🌱
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| G16 | In the past two weeks, how often have you felt active and full of energy? | WHO-5 Item 3 | Active and vigorous |
| G17 | Are you learning or trying anything new right now? | WHO-5 (adapted) | Interest and engagement |
| G18 | How often do you make time for things that help you grow (reading, classes, hobbies)? | PROMIS (adapted) | Personal development |
---
## 2. Parent / Caregiver
**Source instruments:** CWBS-SF (Tebb & Berg-Weger, 2016); CAREPAL-8 (Ullrich et al., 2024); Preparedness for Caregiving Scale (Archbold et al., 1990)
**Response scale:** Almost every day · More days than not · Once in a while · Rarely
### Physical Wellness 💪
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P1 | When did you last see a doctor for YOUR own health check? | CWBS-SF | Basic needs: self-care |
| P2 | In the past month, how often have you felt tired or worn out from caregiving? | CAREPAL-8 Item 2 | PHQ-9 fatigue item |
| P3 | In a typical week, how often do you get enough sleep? | CWBS-SF | Physical well-being |
### Emotional Wellness 💗
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P4 | How often do you feel worn out or weighed down by all you have to do? | CAREPAL-8 Item 2 | PHQ-9 fatigue / burden |
| P5 | In the past two weeks, how often have you been bothered by not being able to stop or control worrying? | CAREPAL-8 Item 1 | GAD-7 worry item |
| P6 | How often do you feel like you are doing a good job as a caregiver? | Preparedness Scale | Perceived competence |
### Social Wellness 🤝
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P7 | Do you have someone who can watch your kids so you can take a break? | CWBS-SF | Respite and support |
| P8 | Is there someone you can talk to honestly about how hard caregiving can be? | CAREPAL-8 (adapted) | Emotional support |
| P9 | How often do you spend time with friends or do something fun for yourself? | CWBS-SF | Personal time |
### Daily Life Wellness 📋
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P10 | How confident are you about handling school meetings, doctor visits, and paperwork for your family? | Preparedness Scale | System navigation readiness |
| P11 | Does your family have the money and resources to cover your basic needs? | CAREPAL-8 Items 5-8 (adapted) | Financial / material needs |
| P12 | Are you able to get the services and supports your family member with a disability needs? | CAREPAL-8 Items 5-7 | Information and service needs |
### Purpose Wellness ⭐
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P13 | Do you feel accepted and respected by the professionals who work with your family? | CAREPAL-8 Item 8 | Professional acceptance |
| P14 | How often do you feel like your role as a caregiver gives your life meaning? | Preparedness Scale (adapted) | Role meaning |
| P15 | Is there anything outside of caregiving that is important to who you are? | CWBS-SF | Identity beyond caregiving |
### Growth Wellness 🌱
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| P16 | Are you learning new things about how to support your family member? | Preparedness Scale | Knowledge growth |
| P17 | How often do you feel stuck or like nothing you do makes a difference? | CAREPAL-8 (adapted) | Helplessness / stagnation (reverse-scored) |
| P18 | In the past month, have you done anything just for you (a class, a hobby, time with a friend)? | CWBS-SF | Personal growth activity |
---
## 3. Family Member / Household
**Source instruments:** Beach Center FQOL (Hoffman et al., 2006); FQoLS (Brown et al., 2006)
**Response scale:** Very satisfied · Satisfied · Neither satisfied nor dissatisfied · Dissatisfied
### Physical Wellness 💪
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F1 | Do members of your family get the medical care they need when they need it? | FQOL Item 19 | Physical/Material: medical care |
| F2 | Does your family feel safe at home, work, school, and in the neighborhood? | FQOL Item 21 | Physical/Material: safety |
| F3 | Does your family have transportation to get to the places you need to be? | FQOL Item 17 | Physical/Material: transportation |
### Emotional Wellness 💗
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F4 | Does your family have the support you need to handle stress? | FQOL Item 13 | Emotional Well-Being: stress support |
| F5 | Do family members have some time to pursue their own interests? | FQOL Item 15 | Emotional Well-Being: personal time |
| F6 | Do family members have outside help available for special needs? | FQOL Item 16 | Emotional Well-Being: outside help |
### Social Wellness 🤝
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F7 | Do family members have friends or others outside the home they can lean on? | FQOL Item 14 | Emotional Well-Being: external support |
| F8 | Does your family enjoy spending time together? | FQOL Item 1 | Family Interaction: enjoyment |
| F9 | Do family members show that they love and care for each other? | FQOL Item 5 | Family Interaction: affection |
### Daily Life Wellness 📋
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F10 | Are you able to get the services and supports your family member with a disability needs? | FQOL Items 22-25 | Disability-Related Support |
| F11 | Does your family have a way to take care of expenses? | FQOL Item 20 | Physical/Material: finances |
| F12 | Does your family have a good relationship with the service providers who work with your family member? | FQOL Item 25 | Disability-Related Support: providers |
### Purpose Wellness ⭐
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F13 | Does your family solve problems together? | FQOL Item 3 | Family Interaction: problem-solving |
| F14 | Do family members support each other to accomplish goals? | FQOL Item 4 | Family Interaction: goal support |
| F15 | Does your family feel like it is handling life's ups and downs well? | FQOL Item 6 | Family Interaction: resilience |
### Growth Wellness 🌱
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| F16 | Do family members help the children learn to be independent? | FQOL Item 7 | Parenting: independence |
| F17 | Do adults in the family know other people in the children's lives (friends, teachers)? | FQOL Item 11 | Parenting: involvement |
| F18 | Do family members talk openly with each other? | FQOL Item 2 | Family Interaction: communication |
---
## 4. Professional (Therapists, Counselors, Coaches, Educators, Healthcare Workers)
**Source instruments:** ProQOL-5 (Stamm, 2010); OLBI (Demerouti et al., 2003)
**Response scale:** Almost every day · Several days a week · Once in a while · Rarely
### Physical Wellness 💪
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR1 | How often do you feel physically drained after your workday? | ProQOL-5 Item 19 (adapted) | Burnout: worn out |
| PR2 | In the past month, how often have you lost sleep over the experiences of people you help? | ProQOL-5 Item 8 | Burnout: sleep disruption |
| PR3 | How often do you feel on edge or jumpy because of things you hear at work? | ProQOL-5 Item 5 | STS: startle response |
### Emotional Wellness 💗
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR4 | I find my work as a helper to be deeply satisfying. | ProQOL-5 Item 3 (adapted) | CS: satisfaction from helping |
| PR5 | How often do you feel depressed because of the experiences of people you help? | ProQOL-5 Item 13 | STS: depression from trauma |
| PR6 | How often do you feel overwhelmed because your workload seems endless? | ProQOL-5 Item 21 | Burnout: overwhelm |
### Social Wellness 🤝
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR7 | Do you have colleagues or peers you can talk with honestly about difficult cases? | ProQOL-5 (adapted) | Peer consultation / support |
| PR8 | How often do you feel connected to the people around you at work? | ProQOL-5 Item 4 (adapted) | Burnout-R: connectedness |
| PR9 | How often do you feel trapped by your job? | ProQOL-5 Item 10 | Burnout: trapped |
### Daily Life Wellness 📋
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR10 | How well do you maintain a boundary between your work and your personal life? | OLBI (adapted) | Disengagement: work-life boundary |
| PR11 | I am pleased with how I keep up with professional techniques and protocols. | ProQOL-5 Item 16 | CS: professional competence |
| PR12 | How often do you feel bogged down by the systems and rules at work? | ProQOL-5 Item 26 | Burnout: systemic frustration |
### Purpose Wellness ⭐
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR13 | I believe I can make a difference through my work. | ProQOL-5 Item 22 | CS: impact |
| PR14 | How often do you have happy thoughts about the people you help? | ProQOL-5 Item 20 | CS: positive regard |
| PR15 | Are you happy that you chose this line of work? | ProQOL-5 Item 30 | CS: career satisfaction |
### Growth Wellness 🌱
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| PR16 | I am pleased with how I am able to keep up with helping techniques and protocols. | ProQOL-5 Item 16 | CS: professional growth |
| PR17 | How often do you avoid situations that remind you of frightening things people you help have told you? | ProQOL-5 Item 23 | STS: avoidance (reverse-scored) |
| PR18 | Are you the person you always wanted to be in this work? | ProQOL-5 Item 17 (adapted) | Burnout-R: self-concept |
---
## 5. Special Needs / Accessible Format (Person with Disability)
**Source instruments:** PWI-ID (Cummins & Lau, 2005); adapted from WHO-5
**Response scale (emoji):** 😟 Not Good · 😐 Okay · 🙂 Pretty Good · 😊 Good · 😄 Very Good
**Note:** 12 items (2 per dimension). Support person may assist with reading.
### My Body 💪
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN1 | How do you feel about your health? | PWI-ID: Health | Health domain |
| SN2 | How do you feel about how safe you feel? | PWI-ID: Personal Safety | Safety domain |
### My Feelings 💗
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN3 | In the past two weeks, how often have you felt happy? | WHO-5 Item 1 (simplified) | Cheerful and in good spirits |
| SN4 | In the past two weeks, how often have you felt calm? | WHO-5 Item 2 (simplified) | Calm and relaxed |
### My People 🤝
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN5 | How do you feel about how you get along with people? Like your family and friends. | PWI-ID: Personal Relationships | Relationships domain |
| SN6 | How do you feel about doing things outside your home? Like in your community or neighborhood. | PWI-ID: Community Connectedness | Community domain |
### My Day 📋
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN7 | How do you feel about the things you have? Like your money and the things you own. | PWI-ID: Standard of Living | Material well-being |
| SN8 | How do you feel about how your day goes? Like your routine and what you do. | WHO-5 Item 5 (simplified) | Daily life filled with interest |
### What Matters ⭐
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN9 | How do you feel about the things you do or make? | PWI-ID: Life Achievement | Achievement domain |
| SN10 | How do you feel about your life as a whole? | PWI-ID: Global | Life as a whole (validity check) |
### Growing 🌱
| # | Question | Source | Adapted From |
|---|----------|--------|-------------|
| SN11 | How do you feel about what will happen to you later in your life? | PWI-ID: Future Security | Future security domain |
| SN12 | In the past two weeks, how often have you felt like doing things? | WHO-5 Item 3 (simplified) | Active and vigorous |
---
## Scoring Notes
- **Generalized, Parent/Caregiver, Family, Professional:** 18 items. Score per dimension = mean of 3 items × 25 (range: 0-100). Overall score = mean of all 6 dimension scores.
- **Special Needs:** 12 items. Score per dimension = mean of 2 items × 20 (range: 0-100). Overall score = mean of all 6 dimension scores.
- **Thresholds:** 0-39 = Needs Attention · 40-59 = Moderate · 60-100 = Strong
- All instruments are screening tools for self-reflection. Not diagnostic.
---
*Last updated: July 2026*
*Compiled for HELPipedia Wheel of Wellness / SpecialNeeds.help*
QuestionBankDeck.html
+238
View File
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wheel of Wellness — Question Bank</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#4A5A5B;font-family:'DM Sans',sans-serif}
.scaler{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.slide{width:1920px;height:1080px;overflow:hidden;position:relative;transform-origin:center center;display:none}
.slide.active{display:block}
.bg-cream{background:radial-gradient(ellipse at 70% 10%,#FBF8F5 0%,#F5F0EB 40%,#EDE6DB 100%)}
.bg-dark{background:linear-gradient(160deg,#3A6B6B 0%,#2D5454 100%)}
.deco{position:absolute;border-radius:50%;opacity:0.04;background:white}
.deco-1{width:600px;height:600px;top:-200px;right:-100px}
.deco-2{width:400px;height:400px;bottom:-100px;left:-80px}
.deco-3{width:250px;height:250px;top:200px;left:300px}
.h-display{font-family:'Playfair Display',Georgia,serif;font-weight:800;line-height:1.1}
.h-sub{font-family:'DM Sans',sans-serif;font-weight:600}
.body-text{font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.55;color:#2D3436}
.card{background:#FBF8F5;border:1px solid rgba(224,216,204,0.92);border-radius:16px;box-shadow:0 4px 20px rgba(30,40,41,0.08);overflow:hidden;position:relative}
.card-top{height:10px;position:absolute;top:0;left:0;right:0}
.card-inner{padding:22px 24px 18px}
.card h3{font-family:'DM Sans',sans-serif;font-weight:700;font-size:22px;color:#2D3436;margin-bottom:8px}
.card p{font-size:16px;color:#6B6B6B;line-height:1.45}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:0.4px;margin-bottom:10px}
.tag-teal{background:rgba(46,125,111,0.1);color:#2E7D6F}
.tag-coral{background:rgba(232,131,92,0.1);color:#E8835C}
.tag-sage{background:rgba(95,122,97,0.1);color:#5F7A61}
.tag-tan{background:rgba(206,181,154,0.15);color:#8B7355}
.tag-purple{background:rgba(123,31,162,0.08);color:#7B1FA2}
.ct .card-top{background:#2E7D6F}
.ce .card-top{background:#E8835C}
.cs .card-top{background:#5F7A61}
.cd .card-top{background:#E65100}
.cp .card-top{background:#F57F17}
.cg .card-top{background:#C62828}
.dim-pills{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.dim-pill{display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:24px;font-weight:700;font-size:16px;border:2px solid}
.dp-phys{border-color:#1565C0;color:#1565C0;background:rgba(21,101,192,0.06)}
.dp-emo{border-color:#7B1FA2;color:#7B1FA2;background:rgba(123,31,162,0.06)}
.dp-soc{border-color:#2E7D32;color:#2E7D32;background:rgba(46,125,50,0.06)}
.dp-day{border-color:#E65100;color:#E65100;background:rgba(230,81,0,0.06)}
.dp-pur{border-color:#F57F17;color:#F57F17;background:rgba(245,127,23,0.06)}
.dp-grow{border-color:#C62828;color:#C62828;background:rgba(198,40,40,0.06)}
.q-row{display:flex;align-items:flex-start;gap:16px;padding:12px 20px;border-radius:10px;margin-bottom:6px}
.q-row:nth-child(odd){background:rgba(46,125,111,0.03)}
.q-id{font-weight:800;font-size:15px;color:#2E7D6F;min-width:45px;padding-top:1px}
.q-dim{font-size:12px;font-weight:700;color:#5F7A61;min-width:120px;text-transform:uppercase;letter-spacing:0.8px;padding-top:2px}
.q-text{font-size:17px;color:#2D3436;flex:1;line-height:1.4}
.q-src{font-size:12px;color:#6B6B6B;font-style:italic;min-width:160px;text-align:right;padding-top:2px}
.score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:20px}
.score-box{background:white;border-radius:14px;padding:24px;text-align:center;border:2px solid #E0D8CC}
.score-num{font-family:'Playfair Display',serif;font-size:52px;font-weight:800;line-height:1}
.score-label{font-size:16px;font-weight:600;margin-top:6px}
.score-desc{font-size:13px;color:#6B6B6B;margin-top:4px}
.sb-attention .score-num{color:#E85C4A}.sb-attention{border-color:#E85C4A}
.sb-moderate .score-num{color:#F9A825}.sb-moderate{border-color:#F9A825}
.sb-strong .score-num{color:#4CAF50}.sb-strong{border-color:#4CAF50}
.nav-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 30px;background:rgba(45,52,54,0.9);color:white;z-index:100;font-size:14px}
.nav-bar button{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:white;padding:6px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.nav-bar button:hover{background:rgba(255,255,255,0.25)}
.nav-bar .counter{font-weight:600;font-variant-numeric:tabular-nums}
</style>
</head>
<body>
<div class="scaler">
<div class="slide bg-dark active">
<div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2">
<div class="h-display" style="font-size:100px;color:white;margin-bottom:20px">Wheel of Wellness</div>
<div class="h-display" style="font-size:72px;color:#CEB59A;margin-bottom:30px">Full Question Bank</div>
<div class="h-sub" style="font-size:24px;color:rgba(255,255,255,0.65);letter-spacing:0.5px">HELPipedia / SpecialNeeds.help &middot; Evidence-Based Assessment Items</div>
<div style="margin-top:40px;font-size:18px;color:rgba(255,255,255,0.45)">Prepared by Kayla Newkirk, M.S.Ed., MHC-LP &middot; July 2026</div>
</div>
</div>
<div class="slide bg-cream">
<div style="padding:80px 100px">
<div class="h-display" style="font-size:56px;color:#1F5C52;margin-bottom:12px">What This Is</div>
<div class="body-text" style="font-size:22px;max-width:1600px;margin-bottom:40px">A complete set of evidence-based assessment questions across 5 audience variants and 6 wellness dimensions. Each item is mapped to a validated instrument, adapted at or below a 4th-grade reading level.</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:20px">
<div class="card ct"><div class="card-top"></div><div class="card-inner"><div class="tag tag-teal">Audience 1</div><h3>Generalized</h3><p>18 questions &middot; WHO-5 + PROMIS-10</p></div></div>
<div class="card ce"><div class="card-top"></div><div class="card-inner"><div class="tag tag-coral">Audience 2</div><h3>Parent / Caregiver</h3><p>18 questions &middot; CWBS-SF + CAREPAL-8</p></div></div>
<div class="card cs"><div class="card-top"></div><div class="card-inner"><div class="tag tag-sage">Audience 3</div><h3>Family Member</h3><p>18 questions &middot; Beach Center FQOL</p></div></div>
<div class="card cd"><div class="card-top"></div><div class="card-inner"><div class="tag tag-tan">Audience 4</div><h3>Professional</h3><p>18 questions &middot; ProQOL-5 + OLBI</p></div></div>
<div class="card cp"><div class="card-top"></div><div class="card-inner"><div class="tag tag-purple">Audience 5</div><h3>Person w/ Disability</h3><p>12 questions &middot; PWI-ID + WHO-5</p></div></div>
</div>
<div style="display:flex;gap:14px;margin-top:30px;justify-content:center">
<div class="tag tag-teal" style="font-size:15px;padding:8px 24px">90 total items</div>
<div class="tag tag-coral" style="font-size:15px;padding:8px 24px">6 validated instruments</div>
<div class="tag tag-sage" style="font-size:15px;padding:8px 24px">All 6 wellness dimensions</div>
</div>
</div>
</div>
<div class="slide bg-cream">
<div style="padding:60px 100px;display:flex;gap:60px;height:100%">
<div style="flex:1;display:flex;flex-direction:column;justify-content:center">
<div class="h-display" style="font-size:52px;color:#1F5C52;margin-bottom:24px">The Six Dimensions</div>
<div class="body-text" style="font-size:20px;margin-bottom:32px">Adapted from Myers, Sweeney, &amp; Witmer (1998) and tailored for the caregiver and disability community.</div>
<div class="dim-pills">
<div class="dim-pill dp-phys">💪 Physical</div>
<div class="dim-pill dp-emo">💗 Emotional</div>
<div class="dim-pill dp-soc">🤝 Social</div>
<div class="dim-pill dp-day">📋 Daily Life</div>
<div class="dim-pill dp-pur">⭐ Purpose</div>
<div class="dim-pill dp-grow">🌱 Growth</div>
</div>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center">
<svg viewBox="0 0 500 500" width="500" height="500">
<g transform="translate(250,250)">
<circle r="210" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<path d="M 0,-210 A 210,210 0 0,1 181.9,-105 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/>
<path d="M 181.9,-105 A 210,210 0 0,1 181.9,105 L 0,0 Z" fill="#E8835C" opacity="0.85"/>
<path d="M 181.9,105 A 210,210 0 0,1 0,210 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/>
<path d="M 0,210 A 210,210 0 0,1 -181.9,105 L 0,0 Z" fill="#F4B942" opacity="0.85"/>
<path d="M -181.9,105 A 210,210 0 0,1 -181.9,-105 L 0,0 Z" fill="#9B72CF" opacity="0.85"/>
<path d="M -181.9,-105 A 210,210 0 0,1 0,-210 L 0,0 Z" fill="#E85C4A" opacity="0.85"/>
<circle r="70" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<text text-anchor="middle" y="-8" font-size="16" font-weight="800" fill="#2E7D6F" font-family="DM Sans,sans-serif">WHEEL OF</text>
<text text-anchor="middle" y="16" font-size="16" font-weight="800" fill="#2E7D6F" font-family="DM Sans,sans-serif">WELLNESS</text>
<g transform="translate(80,-145)"><text text-anchor="middle" y="0" font-size="32">💪</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Physical</text></g>
<g transform="translate(170,0)"><text text-anchor="middle" y="0" font-size="32">💗</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Emotional</text></g>
<g transform="translate(95,130)"><text text-anchor="middle" y="0" font-size="32">🤝</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Social</text></g>
<g transform="translate(-95,130)"><text text-anchor="middle" y="0" font-size="32">📋</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Daily Life</text></g>
<g transform="translate(-170,0)"><text text-anchor="middle" y="0" font-size="32">⭐</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Purpose</text></g>
<g transform="translate(-80,-145)"><text text-anchor="middle" y="0" font-size="32">🌱</text><text text-anchor="middle" y="28" font-size="16" font-weight="700" fill="white" font-family="DM Sans,sans-serif">Growth</text></g>
</g>
</svg>
</div>
</div>
</div>
<div class="slide bg-dark"><div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:1400px;z-index:2"><div class="h-display" style="font-size:90px;color:white;margin-bottom:16px">👥 Generalized</div><div class="h-sub" style="font-size:28px;color:rgba(255,255,255,0.7)">WHO-5 Well-Being Index + PROMIS Global Health-10</div></div></div>
<div class="slide bg-cream"><div style="padding:50px 80px"><div style="display:flex;align-items:center;gap:20px;margin-bottom:10px"><div class="h-display" style="font-size:42px;color:#1F5C52">Generalized &mdash; Sample Items</div><div class="tag tag-teal" style="font-size:14px;padding:6px 16px">All Audiences &middot; 18 items</div></div><div style="font-size:15px;color:#6B6B6B;margin-bottom:20px">Response scale: Almost all the time &middot; More than half &middot; Some of the time &middot; Once in a while</div><div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">G1</div><div class="q-dim">Physical</div><div class="q-text">In the past month, how often have you felt tired or worn out?</div><div class="q-src">PROMIS Global08</div></div>
<div class="q-row" style=""><div class="q-id">G4</div><div class="q-dim">Emotional</div><div class="q-text">In the past two weeks, how often have you felt calm and at ease?</div><div class="q-src">WHO-5 Item 2</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">G7</div><div class="q-dim">Social</div><div class="q-text">Do you have people in your life you can count on when things get hard?</div><div class="q-src">PROMIS Global05</div></div>
<div class="q-row" style=""><div class="q-id">G10</div><div class="q-dim">Daily Life</div><div class="q-text">How confident are you that you can handle everyday tasks like bills, forms, and schedules?</div><div class="q-src">PROMIS Global06</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">G13</div><div class="q-dim">Purpose</div><div class="q-text">In the past two weeks, how often has your daily life been filled with things that interest you?</div><div class="q-src">WHO-5 Item 5</div></div>
<div class="q-row" style=""><div class="q-id">G16</div><div class="q-dim">Growth</div><div class="q-text">In the past two weeks, how often have you felt active and full of energy?</div><div class="q-src">WHO-5 Item 3</div></div>
</div></div>
<div class="slide bg-dark"><div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:1400px;z-index:2"><div class="h-display" style="font-size:90px;color:white;margin-bottom:16px">👩‍👧 Parent / Caregiver</div><div class="h-sub" style="font-size:28px;color:rgba(255,255,255,0.7)">CWBS-SF + CAREPAL-8 + Preparedness for Caregiving Scale</div></div></div>
<div class="slide bg-cream"><div style="padding:50px 80px"><div style="display:flex;align-items:center;gap:20px;margin-bottom:10px"><div class="h-display" style="font-size:42px;color:#1F5C52">Parent / Caregiver &mdash; Sample Items</div><div class="tag tag-coral" style="font-size:14px;padding:6px 16px">Caregivers &middot; 18 items</div></div><div style="font-size:15px;color:#6B6B6B;margin-bottom:20px">Response scale: Almost every day &middot; More days than not &middot; Once in a while &middot; Rarely</div><div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">P1</div><div class="q-dim">Physical</div><div class="q-text">When did you last see a doctor for YOUR own health check?</div><div class="q-src">CWBS-SF</div></div>
<div class="q-row" style=""><div class="q-id">P4</div><div class="q-dim">Emotional</div><div class="q-text">How often do you feel worn out or weighed down by all you have to do?</div><div class="q-src">CAREPAL-8 Item 2</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">P7</div><div class="q-dim">Social</div><div class="q-text">Do you have someone who can watch your kids so you can take a break?</div><div class="q-src">CWBS-SF</div></div>
<div class="q-row" style=""><div class="q-id">P10</div><div class="q-dim">Daily Life</div><div class="q-text">How confident are you about handling school meetings, doctor visits, and paperwork?</div><div class="q-src">Preparedness Scale</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">P13</div><div class="q-dim">Purpose</div><div class="q-text">Do you feel accepted and respected by the professionals who work with your family?</div><div class="q-src">CAREPAL-8 Item 8</div></div>
<div class="q-row" style=""><div class="q-id">P16</div><div class="q-dim">Growth</div><div class="q-text">Are you learning new things about how to support your family member?</div><div class="q-src">Preparedness Scale</div></div>
</div></div>
<div class="slide bg-dark"><div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:1400px;z-index:2"><div class="h-display" style="font-size:90px;color:white;margin-bottom:16px">🏠 Family Member</div><div class="h-sub" style="font-size:28px;color:rgba(255,255,255,0.7)">Beach Center Family Quality of Life Scale</div></div></div>
<div class="slide bg-cream"><div style="padding:50px 80px"><div style="display:flex;align-items:center;gap:20px;margin-bottom:10px"><div class="h-display" style="font-size:42px;color:#1F5C52">Family Member &mdash; Sample Items</div><div class="tag tag-sage" style="font-size:14px;padding:6px 16px">Household &middot; 18 items</div></div><div style="font-size:15px;color:#6B6B6B;margin-bottom:20px">Response scale: Very satisfied &middot; Satisfied &middot; Neither &middot; Dissatisfied</div><div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">F1</div><div class="q-dim">Physical</div><div class="q-text">Do members of your family get the medical care they need when they need it?</div><div class="q-src">FQOL Item 19</div></div>
<div class="q-row" style=""><div class="q-id">F4</div><div class="q-dim">Emotional</div><div class="q-text">Does your family have the support you need to handle stress?</div><div class="q-src">FQOL Item 13</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">F8</div><div class="q-dim">Social</div><div class="q-text">Does your family enjoy spending time together?</div><div class="q-src">FQOL Item 1</div></div>
<div class="q-row" style=""><div class="q-id">F10</div><div class="q-dim">Daily Life</div><div class="q-text">Are you able to get the services your family member with a disability needs?</div><div class="q-src">FQOL Items 22-25</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">F13</div><div class="q-dim">Purpose</div><div class="q-text">Does your family solve problems together?</div><div class="q-src">FQOL Item 3</div></div>
<div class="q-row" style=""><div class="q-id">F16</div><div class="q-dim">Growth</div><div class="q-text">Do family members help the children learn to be independent?</div><div class="q-src">FQOL Item 7</div></div>
</div></div>
<div class="slide bg-dark"><div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:1400px;z-index:2"><div class="h-display" style="font-size:90px;color:white;margin-bottom:16px">🩺 Professional</div><div class="h-sub" style="font-size:28px;color:rgba(255,255,255,0.7)">ProQOL-5 + Oldenburg Burnout Inventory</div></div></div>
<div class="slide bg-cream"><div style="padding:50px 80px"><div style="display:flex;align-items:center;gap:20px;margin-bottom:10px"><div class="h-display" style="font-size:42px;color:#1F5C52">Professional &mdash; Sample Items</div><div class="tag tag-tan" style="font-size:14px;padding:6px 16px">Helping Professionals &middot; 18 items</div></div><div style="font-size:15px;color:#6B6B6B;margin-bottom:20px">Response scale: Almost every day &middot; Several days a week &middot; Once in a while &middot; Rarely</div><div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">PR1</div><div class="q-dim">Physical</div><div class="q-text">How often do you feel physically drained after your workday?</div><div class="q-src">ProQOL-5 Item 19</div></div>
<div class="q-row" style=""><div class="q-id">PR4</div><div class="q-dim">Emotional</div><div class="q-text">I find my work as a helper to be deeply satisfying.</div><div class="q-src">ProQOL-5 Item 3</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">PR7</div><div class="q-dim">Social</div><div class="q-text">Do you have colleagues you can talk with honestly about difficult cases?</div><div class="q-src">ProQOL-5 (adapted)</div></div>
<div class="q-row" style=""><div class="q-id">PR10</div><div class="q-dim">Daily Life</div><div class="q-text">How well do you maintain a boundary between work and personal life?</div><div class="q-src">OLBI (adapted)</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">PR13</div><div class="q-dim">Purpose</div><div class="q-text">I believe I can make a difference through my work.</div><div class="q-src">ProQOL-5 Item 22</div></div>
<div class="q-row" style=""><div class="q-id">PR16</div><div class="q-dim">Growth</div><div class="q-text">I am pleased with how I keep up with helping techniques and protocols.</div><div class="q-src">ProQOL-5 Item 16</div></div>
</div></div>
<div class="slide bg-dark"><div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:1400px;z-index:2"><div class="h-display" style="font-size:90px;color:white;margin-bottom:16px">♿ Person with Disability</div><div class="h-sub" style="font-size:28px;color:rgba(255,255,255,0.7)">PWI-ID + WHO-5 (simplified) &middot; Emoji response scale</div></div></div>
<div class="slide bg-cream"><div style="padding:50px 80px"><div style="display:flex;align-items:center;gap:20px;margin-bottom:10px"><div class="h-display" style="font-size:42px;color:#1F5C52">Person with Disability &mdash; Sample Items</div><div class="tag tag-purple" style="font-size:14px;padding:6px 16px">Accessible Format &middot; 12 items</div></div><div style="font-size:15px;color:#6B6B6B;margin-bottom:20px">Response scale: 😟 Not Good &middot; 😐 Okay &middot; 🙂 Pretty Good &middot; 😊 Good &middot; 😄 Very Good</div><div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">SN1</div><div class="q-dim">My Body</div><div class="q-text">How do you feel about your health?</div><div class="q-src">PWI-ID: Health</div></div>
<div class="q-row" style=""><div class="q-id">SN3</div><div class="q-dim">My Feelings</div><div class="q-text">In the past two weeks, how often have you felt happy?</div><div class="q-src">WHO-5 Item 1</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">SN5</div><div class="q-dim">My People</div><div class="q-text">How do you feel about how you get along with people?</div><div class="q-src">PWI-ID: Relationships</div></div>
<div class="q-row" style=""><div class="q-id">SN7</div><div class="q-dim">My Day</div><div class="q-text">How do you feel about the things you have? Like your money and things you own.</div><div class="q-src">PWI-ID: Standard of Living</div></div>
<div class="q-row" style="background:rgba(46,125,111,0.03)"><div class="q-id">SN9</div><div class="q-dim">What Matters</div><div class="q-text">How do you feel about the things you do or make?</div><div class="q-src">PWI-ID: Achievement</div></div>
<div class="q-row" style=""><div class="q-id">SN11</div><div class="q-dim">Growing</div><div class="q-text">How do you feel about what will happen to you later in your life?</div><div class="q-src">PWI-ID: Future Security</div></div>
</div></div>
<div class="slide bg-cream">
<div style="padding:60px 100px">
<div class="h-display" style="font-size:52px;color:#1F5C52;margin-bottom:16px">Scoring &amp; Interpretation</div>
<div class="body-text" style="font-size:20px;max-width:1500px;margin-bottom:36px">Each dimension is scored 0-100. Overall wellness score is the mean of all six dimensions.</div>
<div class="score-grid">
<div class="score-box sb-attention"><div class="score-num">0-39</div><div class="score-label" style="color:#E85C4A">Needs Attention</div><div class="score-desc">Area may need support or intervention</div></div>
<div class="score-box sb-moderate"><div class="score-num">40-59</div><div class="score-label" style="color:#F9A825">Moderate</div><div class="score-desc">Some strength, room to grow</div></div>
<div class="score-box sb-strong"><div class="score-num">60-100</div><div class="score-label" style="color:#4CAF50">Strong</div><div class="score-desc">Area of strength and stability</div></div>
</div>
<div style="margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:24px">
<div class="card ct"><div class="card-top"></div><div class="card-inner"><div class="tag tag-teal">Scoring</div><h3>Standard (18 items)</h3><p>3 items per dimension. Score = mean of 3 items &times; 25 (range: 0-100).</p></div></div>
<div class="card cs"><div class="card-top"></div><div class="card-inner"><div class="tag tag-sage">Accessible (12 items)</div><h3>Special Needs Format</h3><p>2 items per dimension. Score = mean of 2 items &times; 20 (range: 0-100).</p></div></div>
</div>
<div style="margin-top:24px;font-size:15px;color:#6B6B6B;font-style:italic">All instruments are screening tools for self-reflection and supportive conversation. Not diagnostic instruments.</div>
</div>
</div>
<div class="slide bg-dark">
<div class="deco deco-1"></div><div class="deco deco-2"></div><div class="deco deco-3"></div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2">
<div class="h-display" style="font-size:80px;color:white;margin-bottom:20px">Next Steps</div>
<div class="h-sub" style="font-size:26px;color:rgba(255,255,255,0.7);max-width:1000px;line-height:1.5;margin-bottom:40px">Select audience-specific item sets for pilot testing. Validate reading level with target population. Connect to SpecialNeeds.help resource directory.</div>
<div style="display:flex;gap:24px;justify-content:center">
<div class="tag tag-teal" style="font-size:16px;padding:10px 28px">90 validated items</div>
<div class="tag tag-coral" style="font-size:16px;padding:10px 28px">5 audience variants</div>
<div class="tag tag-sage" style="font-size:16px;padding:10px 28px">6 evidence-based instruments</div>
</div>
<div style="margin-top:50px;font-size:18px;color:rgba(255,255,255,0.4)">Kayla Newkirk, M.S.Ed., MHC-LP &middot; HELPipedia / SpecialNeeds.help &middot; July 2026</div>
</div>
</div>
</div>
<div class="nav-bar">
<button id="prevBtn">&larr; Prev</button>
<span class="counter" id="counter">1 / 15</span>
<button id="nextBtn">Next &rarr;</button>
</div>
<script>
var current=0;
var slides=document.querySelectorAll('.slide');
slides[0].classList.add('active');
function navigate(d){
var next=Math.max(0,Math.min(slides.length-1,current+d));
if(next===current)return;
slides[current].classList.remove('active');
current=next;
slides[current].classList.add('active');
document.getElementById('counter').textContent=(current+1)+' / '+slides.length;
scaleSlide();
}
function scaleSlide(){
var s=slides[current];
var sx=window.innerWidth/1920;
var sy=(window.innerHeight-50)/1080;
s.style.transform='scale('+Math.min(sx,sy)+')';
}
window.addEventListener('resize',scaleSlide);
document.getElementById('prevBtn').onclick=function(){navigate(-1)};
document.getElementById('nextBtn').onclick=function(){navigate(1)};
document.addEventListener('keydown',function(e){
if(e.key==='ArrowRight'||e.key===' '){e.preventDefault();navigate(1)}
if(e.key==='ArrowLeft'){e.preventDefault();navigate(-1)}
});
scaleSlide();
</script>
</body>
</html>
WheelOfWellnessMockup.pdf
BIN
View File
Binary file not shown.
WheelOfWellnessQuestionBank.docx
BIN
View File
Binary file not shown.
batch-convert.js
+71
View File
@@ -0,0 +1,71 @@
const puppeteer = require('puppeteer-core');
const path = require('path');
const fs = require('fs');
const HTML_DIR = __dirname;
const PDF_DIR = path.join(__dirname, 'pdfs');
const files = [
{ html: 'mockup.html', width: '11in', height: '8.5in' },
{ html: 'mockup-generalized.html', width: '11in', height: '8.5in' },
{ html: 'mockup-parent-caregiver.html', width: '11in', height: '8.5in' },
{ html: 'mockup-family-member.html', width: '11in', height: '8.5in' },
{ html: 'mockup-professional.html', width: '11in', height: '8.5in' },
{ html: 'mockup-special-needs.html', width: '11in', height: '8.5in' },
];
(async () => {
// Ensure output directory exists
fs.mkdirSync(PDF_DIR, { recursive: true });
const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome-stable',
headless: 'new',
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
});
let success = 0;
let failures = 0;
for (const file of files) {
const htmlPath = path.resolve(HTML_DIR, file.html);
const pdfName = file.html.replace('.html', '.pdf');
const pdfPath = path.join(PDF_DIR, pdfName);
if (!fs.existsSync(htmlPath)) {
console.log(`SKIP: ${file.html} — file not found`);
failures++;
continue;
}
try {
const page = await browser.newPage();
await page.goto(`file://${htmlPath}`, {
waitUntil: 'networkidle0',
timeout: 30000
});
try { await page.evaluate(() => document.fonts.ready); } catch (e) { /* font API sometimes fails in headless */ }
await new Promise(r => setTimeout(r, 2500));
await page.pdf({
path: pdfPath,
width: file.width,
height: file.height,
printBackground: true,
margin: { top: '0', right: '0', bottom: '0', left: '0' },
preferCSSPageSize: false
});
const stats = fs.statSync(pdfPath);
console.log(`OK: ${pdfName} (${(stats.size / 1024).toFixed(0)} KB)`);
success++;
} catch (err) {
console.log(`FAIL: ${file.html} — ${err.message}`);
failures++;
}
}
await browser.close();
console.log(`\nDone: ${success} succeeded, ${failures} failed`);
})();
build_onepager_docx.py
+165
View File
@@ -0,0 +1,165 @@
#!/usr/bin/env python3
"""One-pager: Wheel of Wellness proposal for HELPipedia."""
from docx import Document
from docx.shared import Pt, Inches, Cm, RGBColor, Emu
from docx.enum.text import WD_ALIGN_PARAGRAPH
from docx.enum.table import WD_TABLE_ALIGNMENT
from docx.oxml.ns import qn
from docx.oxml import OxmlElement
# ── Colors ──────────────────────────────────────────────────
TEAL = '2E7D6F'
CORAL = 'E8835C'
DARK = '2D3436'
LIGHT_TEAL = 'E8F5F1'
ALT_ROW = 'F2F2F2'
WHITE = 'FFFFFF'
def set_cell_shading(cell, color):
shading = OxmlElement('w:shd')
shading.set(qn('w:fill'), color)
shading.set(qn('w:val'), 'clear')
cell._tc.get_or_add_tcPr().append(shading)
def set_cell_margins(cell, top=40, bottom=40, left=80, right=80):
tc = cell._tc
tcPr = tc.get_or_add_tcPr()
tcMar = OxmlElement('w:tcMar')
for side, val in [('top', top), ('bottom', bottom), ('left', left), ('right', right)]:
el = OxmlElement(f'w:{side}')
el.set(qn('w:w'), str(val))
el.set(qn('w:type'), 'dxa')
tcMar.append(el)
tcPr.append(tcMar)
def add_run(p, text, size=9, bold=False, color=DARK, italic=False):
r = p.add_run(text)
r.font.size = Pt(size)
r.font.color.rgb = RGBColor(*bytes.fromhex(color))
r.bold = bold
r.italic = italic
return r
# ── Document ────────────────────────────────────────────────
doc = Document()
# Tight margins for one-pager
for section in doc.sections:
section.top_margin = Cm(1.5)
section.bottom_margin = Cm(1.2)
section.left_margin = Cm(1.8)
section.right_margin = Cm(1.8)
# ── HEADER BAR (using a single-cell table with shading) ─────
header_table = doc.add_table(rows=1, cols=1)
header_table.alignment = WD_TABLE_ALIGNMENT.CENTER
cell = header_table.rows[0].cells[0]
set_cell_shading(cell, TEAL)
set_cell_margins(cell, top=100, bottom=100, left=150, right=150)
p = cell.paragraphs[0]
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
add_run(p, 'Wheel of Wellness Resource Connector', size=18, bold=True, color=WHITE)
p2 = cell.add_paragraph()
p2.alignment = WD_ALIGN_PARAGRAPH.CENTER
add_run(p2, 'A Proposal for HELPipedia / SpecialNeeds.help | Kayla Newkirk, M.S.Ed., MHC-LP | Week of June 16, 2026', size=9, color=WHITE)
# Remove table borders
tbl = header_table._tbl
tblPr = tbl.tblPr if tbl.tblPr is not None else OxmlElement('w:tblPr')
borders = OxmlElement('w:tblBorders')
for edge in ('top', 'left', 'bottom', 'right', 'insideH', 'insideV'):
el = OxmlElement(f'w:{edge}')
el.set(qn('w:val'), 'none')
el.set(qn('w:sz'), '0')
el.set(qn('w:space'), '0')
el.set(qn('w:color'), 'auto')
borders.append(el)
tblPr.append(borders)
doc.add_paragraph() # small spacer
# ── THE PROBLEM ─────────────────────────────────────────────
p = doc.add_paragraph()
add_run(p, 'THE PROBLEM ', size=10, bold=True, color=CORAL)
add_run(p, 'Families navigating disability and caregiving often do not know what they need until someone asks the right questions. A directory is powerful when you know what to search for. An assessment tool is powerful when you do not.', size=9)
# ── THE SOLUTION ────────────────────────────────────────────
p = doc.add_paragraph()
add_run(p, 'THE SOLUTION ', size=10, bold=True, color=CORAL)
add_run(p, 'An interactive, web-based Wheel of Wellness Assessment that asks caregivers and individuals with disabilities targeted questions across six wellness dimensions, scores each area, and automatically maps their needs to resources in the SpecialNeeds.help directory. Users arrive unsure of what they need. They leave with a personalized resource plan.', size=9)
# ── THE SIX DIMENSIONS TABLE ────────────────────────────────
p = doc.add_paragraph()
add_run(p, 'THE SIX DIMENSIONS', size=10, bold=True, color=TEAL)
dims = [
['Physical', 'Rest, movement, nutrition, medical care', 'Respite care, medical providers, adaptive recreation'],
['Emotional', 'Naming feelings, coping, support', 'Counseling referrals, caregiver support groups, crisis lines'],
['Social', 'Connection, understanding, community', 'Parent mentors, local support networks, peer matching'],
['Practical', 'Finances, advocacy, schedules, systems', 'IEP advocates, legal aid, benefits navigation'],
['Purpose', 'Meaning, identity, values, hope', 'Faith communities, disability-affirming organizations'],
['Growth', 'Learning, creativity, becoming', 'Training, conferences, podcasts, creative programs'],
]
t = doc.add_table(rows=1 + len(dims), cols=3)
t.alignment = WD_TABLE_ALIGNMENT.CENTER
t.style = 'Table Grid'
# Header
for i, h in enumerate(['Dimension', 'Focus', 'Resource Connections']):
cell = t.rows[0].cells[i]
cell.text = ''
p = cell.paragraphs[0]
add_run(p, h, size=8, bold=True, color=WHITE)
set_cell_shading(cell, TEAL)
set_cell_margins(cell, top=30, bottom=30, left=60, right=60)
# Data
for ri, row_data in enumerate(dims):
for ci, val in enumerate(row_data):
cell = t.rows[ri + 1].cells[ci]
cell.text = ''
p = cell.paragraphs[0]
add_run(p, val, size=8, bold=(ci == 0), color=DARK)
set_cell_margins(cell, top=20, bottom=20, left=60, right=60)
if ri % 2 == 1:
set_cell_shading(cell, ALT_ROW)
# Set column widths
for row in t.rows:
row.cells[0].width = Cm(2.5)
row.cells[1].width = Cm(6)
row.cells[2].width = Cm(8)
doc.add_paragraph()
# ── WHY IT MATTERS ──────────────────────────────────────────
p = doc.add_paragraph()
add_run(p, 'WHY IT MATTERS', size=10, bold=True, color=TEAL)
bullets = [
('Mission alignment: ', 'Bridges the gap between knowledge and opportunity'),
('Differentiator: ', 'No other disability directory offers a clinically grounded needs assessment'),
('Engagement: ', 'Personalized entry point increases return visits and directory use'),
('Data insight: ', 'Anonymous aggregate data reveals community needs for content and fundraising'),
('Scalable: ', 'Works for any new resource area added to SpecialNeeds.help'),
('Measurable: ', 'Completion rates, click-through, referrals all trackable'),
]
for bold_part, rest in bullets:
p = doc.add_paragraph()
p.paragraph_format.space_before = Pt(1)
p.paragraph_format.space_after = Pt(1)
add_run(p, bold_part, size=8, bold=True, color=DARK)
add_run(p, rest, size=8)
# ── Footer ──────────────────────────────────────────────────
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
p.paragraph_format.space_before = Pt(6)
add_run(p, 'Kayla Newkirk, M.S.Ed., MHC-LP | Doctoral Candidate, Counselor Education & Supervision, Waynesburg University | kcordone30@gmail.com', size=7, color='888888')
# ── Save ────────────────────────────────────────────────────
out = '/home/newkirk/Documents/Career/WheelOfWellnessOnePager.docx'
doc.save(out)
print(f'Saved: {out}')
build_proposal_docx.py
+360
View File
@@ -0,0 +1,360 @@
#!/usr/bin/env python3
"""Convert the Wheel of Wellness proposal to a polished DOCX."""
from docx import Document
from docx.shared import Pt, Inches, Cm, RGBColor
from docx.enum.text import WD_ALIGN_PARAGRAPH
from docx.enum.table import WD_TABLE_ALIGNMENT
from docx.oxml.ns import qn
from docx.oxml import OxmlElement
# ── Colors ──────────────────────────────────────────────────
TEAL = '2E7D6F'
CORAL = 'E8835C'
DARK = '2D3436'
CREAM = 'FFF8F0'
LIGHT_TEAL = 'E8F5F1'
ALT_ROW = 'F7F7F7'
WHITE = 'FFFFFF'
# ── Helpers ─────────────────────────────────────────────────
def set_cell_shading(cell, color):
shading = OxmlElement('w:shd')
shading.set(qn('w:fill'), color)
shading.set(qn('w:val'), 'clear')
cell._tc.get_or_add_tcPr().append(shading)
def styled_table(doc, headers, rows, col_widths=None):
"""Create a bordered table with teal header, alternating row shading."""
t = doc.add_table(rows=1 + len(rows), cols=len(headers))
t.alignment = WD_TABLE_ALIGNMENT.CENTER
t.style = 'Table Grid'
# Header
for i, h in enumerate(headers):
cell = t.rows[0].cells[i]
cell.text = ''
p = cell.paragraphs[0]
run = p.add_run(h)
run.bold = True
run.font.size = Pt(10)
run.font.color.rgb = RGBColor(255, 255, 255)
set_cell_shading(cell, TEAL)
# Data rows
for ri, row_data in enumerate(rows):
for ci, val in enumerate(row_data):
cell = t.rows[ri + 1].cells[ci]
cell.text = ''
p = cell.paragraphs[0]
run = p.add_run(str(val))
run.font.size = Pt(10)
run.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
if ri % 2 == 1:
set_cell_shading(cell, ALT_ROW)
# Column widths
if col_widths:
for i, w in enumerate(col_widths):
for row in t.rows:
row.cells[i].width = Cm(w)
doc.add_paragraph() # spacer
return t
def add_heading(doc, text, level=1):
h = doc.add_heading(text, level=level)
for run in h.runs:
run.font.color.rgb = RGBColor(*bytes.fromhex(TEAL))
return h
def add_body(doc, text, bold_prefix=None):
p = doc.add_paragraph()
if bold_prefix:
r = p.add_run(bold_prefix)
r.bold = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
r = p.add_run(text)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
return p
def add_bullet(doc, text, bold_prefix=None):
p = doc.add_paragraph(style='List Bullet')
if bold_prefix:
r = p.add_run(bold_prefix)
r.bold = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
r = p.add_run(text)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
return p
def add_numbered(doc, text, bold_prefix=None):
p = doc.add_paragraph(style='List Number')
if bold_prefix:
r = p.add_run(bold_prefix)
r.bold = True
r.font.size = Pt(11)
r = p.add_run(text)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
return p
def add_callout(doc, text, prefix=None):
"""Indented italic callout paragraph."""
p = doc.add_paragraph()
pf = p.paragraph_format
pf.left_indent = Cm(1)
if prefix:
r = p.add_run(prefix)
r.bold = True
r.italic = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(CORAL))
r = p.add_run(text)
r.italic = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex('555555'))
return p
# ── Document ────────────────────────────────────────────────
doc = Document()
# Page margins
for section in doc.sections:
section.top_margin = Cm(2.54)
section.bottom_margin = Cm(2.54)
section.left_margin = Cm(2.54)
section.right_margin = Cm(2.54)
# ── Title Page ──────────────────────────────────────────────
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(72)
r = p.add_run('Wheel of Wellness\nResource Connector')
r.bold = True
r.font.size = Pt(32)
r.font.color.rgb = RGBColor(*bytes.fromhex(TEAL))
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
r = p.add_run('A Proposal for HELPipedia / SpecialNeeds.help')
r.font.size = Pt(16)
r.font.color.rgb = RGBColor(*bytes.fromhex(CORAL))
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(36)
for line in [
'Prepared by: Kayla Newkirk, M.S.Ed., MHC-LP',
'Doctoral Candidate, Counselor Education & Supervision',
'Waynesburg University',
'',
'Meeting with: Phil Vetrano, MBA',
'President & Co-founder, HELPipedia',
'',
'Week of June 16, 2026',
]:
r = p.add_run(line + '\n')
r.font.size = Pt(12)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
doc.add_page_break()
# ── Executive Summary ───────────────────────────────────────
add_heading(doc, 'Executive Summary', level=1)
add_body(doc, 'HELPipedia already connects families to resources through SpecialNeeds.help. The next step is making that connection proactive and personalized. Instead of asking families to browse a directory, we meet them where they are with a Wheel of Wellness assessment that identifies their needs across six dimensions and automatically surfaces the most relevant resources.')
add_body(doc, '')
add_body(doc, 'This builds on the existing Family Wheel of Life assessment (ScoreApp) and the Caregiver Wellness Wheel framework developed for the ADA 36th Anniversary Telethon.')
add_callout(doc, ' Approve a pilot project to design, build, and test an interactive Wheel of Wellness assessment tool integrated into the HELPipedia / SpecialNeeds.help ecosystem.', prefix='The ask:')
doc.add_page_break()
# ── Section 1: The Problem ──────────────────────────────────
add_heading(doc, '1. The Problem We Are Solving', level=1)
styled_table(doc,
['Current Experience', 'Proposed Experience'],
[
['Family arrives at SpecialNeeds.help', 'Family arrives at SpecialNeeds.help'],
['Browses categories or searches keywords', 'Takes a 5-minute wellness needs assessment'],
['Must already know what they need', 'Assessment identifies needs they may not have named'],
['Finds resources one at a time', 'Receives a personalized resource map across all relevant dimensions'],
['Leaves with a link', 'Leaves with a plan and a connection'],
],
col_widths=[8.5, 8.5],
)
add_callout(doc, 'Families navigating disability and caregiving often do not know what they need until someone asks the right questions. A directory is powerful when you know what to search for. An assessment tool is powerful when you do not.', prefix='The gap: ')
# ── Section 2: What We Are Proposing ────────────────────────
add_heading(doc, '2. What We Are Proposing', level=1)
add_heading(doc, 'The Tool', level=2)
add_body(doc, 'An interactive, web-based Wheel of Wellness Assessment that:')
add_numbered(doc, 'Asks caregivers and individuals with disabilities targeted questions across six wellness dimensions')
add_numbered(doc, 'Scores each dimension to identify strengths and areas of need')
add_numbered(doc, 'Generates a personalized results page that maps their specific needs to resources in the SpecialNeeds.help directory')
add_numbered(doc, 'Optionally connects them to a coach, mentor, or support group')
add_heading(doc, 'The Six Dimensions', level=2)
add_body(doc, 'Adapted from the Myers, Sweeney, and Witmer (1998) Wheel of Wellness model and tailored for the caregiver and disability community:')
styled_table(doc,
['Dimension', 'Core Question', 'Example Resource Connections'],
[
['Physical', 'Are basic health, rest, and movement needs being met?', 'Respite care, medical providers, adaptive recreation, sleep support'],
['Emotional', 'Is there space to name and cope with feelings?', 'Counseling referrals, caregiver support groups, crisis lines'],
['Social', 'Is there a community that understands?', 'Parent mentors, local support networks, community events, peer matching'],
['Practical', 'Are logistics, advocacy, and systems manageable?', 'IEP advocates, legal aid, financial assistance, benefits navigation'],
['Purpose', 'Is there meaning and identity beyond caregiving?', 'Faith communities, disability-affirming organizations, storytelling platforms'],
['Growth', 'Is there room to learn, create, and become?', 'Training, conferences, podcasts, creative programs, continuing education'],
],
col_widths=[3, 5.5, 8.5],
)
add_heading(doc, 'How It Differs from the Existing Family Wheel of Life', level=2)
styled_table(doc,
['Feature', 'Family Wheel of Life (Current)', 'Wheel of Wellness Connector (Proposed)'],
[
['Focus', 'General family balance', 'Caregiver and disability-specific needs'],
['Dimensions', '4 (Health, Home, Connection, Joy)', '6 (Physical, Emotional, Social, Practical, Purpose, Growth)'],
['Output', 'Personalized report with general guidance', 'Personalized resource map linked to SpecialNeeds.help'],
['Action step', 'Self-reflection', 'Direct connection to services, providers, and support'],
['Audience', 'Broad families', 'Caregivers, parents of children with disabilities, individuals with disabilities'],
['Clinical grounding', 'Life coaching framework', 'Counseling wellness model (Myers, Sweeney, & Witmer, 1998)'],
],
col_widths=[3.5, 6, 7.5],
)
add_body(doc, 'The two tools serve different audiences and can coexist. The Wheel of Wellness Connector targets the specific population HELPipedia and SpecialNeeds.help are built to serve.')
doc.add_page_break()
# ── Section 3: Why This Matters ─────────────────────────────
add_heading(doc, '3. Why This Matters for HELPipedia', level=1)
add_heading(doc, 'Strategic Alignment', level=2)
add_bullet(doc, '"Help parents and youth bridge the gap between knowledge and opportunity." The assessment literally bridges that gap by turning knowledge of needs into opportunity for connection.', bold_prefix='Mission: ')
add_bullet(doc, 'A personalized entry point increases engagement, return visits, and directory utilization.', bold_prefix='SpecialNeeds.help adoption: ')
add_bullet(doc, 'Aggregated (anonymous) assessment data reveals what the community needs most, informing content development, partnerships, and fundraising.', bold_prefix='Data and insight: ')
add_bullet(doc, 'No other major disability resource directory offers a clinically grounded, personalized needs assessment with automatic resource matching.', bold_prefix='Differentiator: ')
doc.add_page_break()
# ── Section 4: Resource Requirements ────────────────────────
add_heading(doc, '4. Resource Requirements', level=1)
add_heading(doc, 'What Kayla Provides', level=2)
for item in [
'Clinical expertise in wellness models and counseling frameworks',
'Assessment design, question writing, and scoring methodology',
'Content for results pages (wellness guidance, psychoeducation, resource explanations)',
'User testing coordination with caregiver and disability community',
'Ongoing clinical review as tool evolves',
]:
add_bullet(doc, item)
add_heading(doc, 'What HELPipedia Provides', level=2)
for item in [
'Platform access and technical implementation',
'Integration with SpecialNeeds.help directory',
'Marketing and community outreach (Chris Myers)',
'Analytics and data tracking',
'Board approval and strategic support',
]:
add_bullet(doc, item)
doc.add_page_break()
# ── Section 5: Success Metrics ──────────────────────────────
add_heading(doc, '5. Success Metrics', level=1)
styled_table(doc,
['Metric', 'Target (First 90 Days)'],
[
['Assessment completions', '100+'],
['Completion rate (started vs. finished)', '70%+'],
['Resource link clicks from results page', '50%+ of completions'],
['Return visits to SpecialNeeds.help', '30%+ within 30 days'],
['Qualitative feedback', 'Positive sentiment from 80%+ of feedback respondents'],
['Community sharing', 'Assessment shared by 10+ caregivers to their networks'],
],
col_widths=[8, 9],
)
# ── Section 6: Sample User Journey ──────────────────────────
add_heading(doc, '6. Sample User Journey', level=1)
add_body(doc, 'She is a single mother of a 9-year-old with Down syndrome and a heart condition. She works full-time. She heard about SpecialNeeds.help from a friend.', bold_prefix='Meet Sarah. ')
steps = [
'"Not sure where to start? Take 5 minutes to find the resources that fit your family."',
'She clicks and begins the Wheel of Wellness assessment.',
'She answers 20-25 short questions. Some are about her child. Some are about her.',
]
for i, s in enumerate(steps, 1):
add_numbered(doc, s)
add_body(doc, 'Her results page shows:')
for dim, status, detail in [
('Physical: Needs Attention', '', '(she has not seen her own doctor in 18 months; her child needs a new cardiologist)'),
('Emotional: Moderate', '', '(she has a friend she talks to but no formal support)'),
('Social: Needs Attention', '', '(she moved recently and does not know anyone local)'),
('Practical: Strong', '', '(she has an IEP advocate and understands the system)'),
('Purpose: Moderate', '', '(she used to paint but stopped)'),
('Growth: Needs Attention', '', '(she wants to learn more about transition planning)'),
]:
p = doc.add_paragraph(style='List Bullet')
r = p.add_run(dim)
r.bold = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
r = p.add_run(' ' + detail)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
add_numbered(doc, 'Under each dimension, she sees 2-3 specific resources from SpecialNeeds.help, with one-click links.')
add_numbered(doc, '"Want to talk to someone? Connect with a parent mentor." with a link to HELPipedia\'s community.')
add_numbered(doc, 'Sarah bookmarks her results. She shares the assessment with her sister, who is also a caregiver.')
add_callout(doc, 'Sarah did not have to know what to search for. The right questions led her to the right resources. That is the difference between a directory and a connector.', prefix='What happened: ')
doc.add_page_break()
# ── Section 7: References ───────────────────────────────────
add_heading(doc, '7. Background References', level=1)
refs = [
'Myers, J. E., Sweeney, T. J., & Witmer, J. M. (1998). The Wheel of Wellness: A holistic model for treatment planning. Journal of Counseling & Development, 76(3), 251-263.',
'Newkirk, K. (2026). Nourishing the Caregiver: The Wheel of Wellness for Special Needs Families. Presentation for HELPipedia ADA 36th Anniversary Telethon.',
'HELPipedia Family Wheel of Life Assessment (ScoreApp). Retrieved from https://patrice-l7tf94gf.scoreapp.com/',
'Americans with Disabilities Act of 1990, as amended. 42 U.S.C. 12101 et seq.',
]
for ref in refs:
p = doc.add_paragraph(ref, style='List Bullet')
for run in p.runs:
run.font.size = Pt(10)
# ── Closing ─────────────────────────────────────────────────
doc.add_paragraph()
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
r = p.add_run('This proposal connects clinical wellness frameworks with practical resource delivery, giving HELPipedia a unique tool that no other disability resource directory currently offers. The infrastructure already exists. The expertise is available. The community needs it.')
r.italic = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex('555555'))
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(24)
for line in [
'Prepared by Kayla Newkirk, M.S.Ed., MHC-LP',
'Doctoral Candidate, Counselor Education & Supervision, Waynesburg University',
'kcordone30@gmail.com',
]:
r = p.add_run(line + '\n')
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
# ── Save ────────────────────────────────────────────────────
out = '/home/newkirk/Documents/Career/WheelOfWellnessProposal.docx'
doc.save(out)
print(f'Saved: {out}')
build_question_bank_docx.py
+337
View File
@@ -0,0 +1,337 @@
#!/usr/bin/env python3
"""Convert the Wheel of Wellness Question Bank to a polished DOCX."""
from docx import Document
from docx.shared import Pt, Cm, RGBColor
from docx.enum.text import WD_ALIGN_PARAGRAPH
from docx.enum.table import WD_TABLE_ALIGNMENT
from docx.oxml.ns import qn
from docx.oxml import OxmlElement
# ── Colors ──────────────────────────────────────────────────
TEAL = '2E7D6F'
CORAL = 'E8835C'
DARK = '2D3436'
ALT_ROW = 'F7F7F7'
# ── Helpers (same pattern as build_proposal_docx.py) ────────
def set_cell_shading(cell, color):
shading = OxmlElement('w:shd')
shading.set(qn('w:fill'), color)
shading.set(qn('w:val'), 'clear')
cell._tc.get_or_add_tcPr().append(shading)
def styled_table(doc, headers, rows, col_widths=None):
t = doc.add_table(rows=1 + len(rows), cols=len(headers))
t.alignment = WD_TABLE_ALIGNMENT.CENTER
t.style = 'Table Grid'
for i, h in enumerate(headers):
cell = t.rows[0].cells[i]
cell.text = ''
run = cell.paragraphs[0].add_run(h)
run.bold = True
run.font.size = Pt(9.5)
run.font.color.rgb = RGBColor(255, 255, 255)
set_cell_shading(cell, TEAL)
for ri, row_data in enumerate(rows):
for ci, val in enumerate(row_data):
cell = t.rows[ri + 1].cells[ci]
cell.text = ''
run = cell.paragraphs[0].add_run(str(val))
run.font.size = Pt(9.5)
run.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
if ri % 2 == 1:
set_cell_shading(cell, ALT_ROW)
if col_widths:
for i, w in enumerate(col_widths):
for row in t.rows:
row.cells[i].width = Cm(w)
doc.add_paragraph() # spacer
return t
def heading(doc, text, level=1):
h = doc.add_heading(text, level=level)
for run in h.runs:
run.font.color.rgb = RGBColor(*bytes.fromhex(TEAL))
return h
def body(doc, text, bold_prefix=None):
p = doc.add_paragraph()
if bold_prefix:
r = p.add_run(bold_prefix)
r.bold = True
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
r = p.add_run(text)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
return p
# ── Question data ───────────────────────────────────────────
AUDIENCES = [
{
'title': '1. Generalized (All Audiences)',
'sources': 'WHO-5 Well-Being Index (WHO, 1998); PROMIS Global Health-10 (NIH, 2009)',
'scale': 'Almost all the time · More than half the time · Some of the time · Once in a while',
'dims': [
('Physical Wellness', [
('G1', 'In the past month, how often have you felt tired or worn out?', 'PROMIS Global08', 'Fatigue (reverse-scored)'),
('G2', 'How would you rate your overall physical health right now?', 'PROMIS Global01', 'General health rating'),
('G3', 'In a typical week, how often do you move your body in a way that feels good?', 'PROMIS Global06', 'Everyday physical activities'),
]),
('Emotional Wellness', [
('G4', 'In the past two weeks, how often have you felt calm and at ease?', 'WHO-5 Item 2', 'Calm and relaxed'),
('G5', 'In the past two weeks, how often have you felt cheerful or in good spirits?', 'WHO-5 Item 1', 'Cheerful and in good spirits'),
('G6', 'How often have you felt worried, sad, or upset in a way that was hard to shake?', 'PROMIS Global10', 'Emotional problems (reverse-scored)'),
]),
('Social Wellness', [
('G7', 'Do you have people in your life you can count on when things get hard?', 'PROMIS Global05', 'Social activities and relationships'),
('G8', 'How satisfied are you with how you get along with the people closest to you?', 'PROMIS Global05', 'Social relationships'),
('G9', 'In the past month, how often have you felt alone even when other people were around?', 'WHO-5 (adapted)', 'Social connectedness (reverse-scored)'),
]),
('Daily Life Wellness', [
('G10', 'How confident are you that you can handle everyday tasks like bills, forms, and schedules?', 'PROMIS Global06', 'Everyday activities capacity'),
('G11', 'In the past two weeks, how often has your sleep been restful?', 'PROMIS Global09', 'Sleep quality'),
('G12', 'How safe do you feel in your home and neighborhood?', 'PROMIS (adapted)', 'Personal safety'),
]),
('Purpose Wellness', [
('G13', 'In the past two weeks, how often has your daily life been filled with things that interest you?', 'WHO-5 Item 5', 'Daily life filled with interest'),
('G14', 'How would you rate your quality of life right now?', 'PROMIS Global02', 'Quality of life'),
('G15', 'Do you feel like your life has meaning or direction?', 'WHO-5 (adapted)', 'Purpose and meaning'),
]),
('Growth Wellness', [
('G16', 'In the past two weeks, how often have you felt active and full of energy?', 'WHO-5 Item 3', 'Active and vigorous'),
('G17', 'Are you learning or trying anything new right now?', 'WHO-5 (adapted)', 'Interest and engagement'),
('G18', 'How often do you make time for things that help you grow (reading, classes, hobbies)?', 'PROMIS (adapted)', 'Personal development'),
]),
],
},
{
'title': '2. Parent / Caregiver',
'sources': 'CWBS-SF (Tebb & Berg-Weger, 2016); CAREPAL-8 (Ullrich et al., 2024); Preparedness for Caregiving Scale (Archbold et al., 1990)',
'scale': 'Almost every day · More days than not · Once in a while · Rarely',
'dims': [
('Physical Wellness', [
('P1', 'When did you last see a doctor for YOUR own health check?', 'CWBS-SF', 'Basic needs: self-care'),
('P2', 'In the past month, how often have you felt tired or worn out from caregiving?', 'CAREPAL-8 Item 2', 'PHQ-9 fatigue item'),
('P3', 'In a typical week, how often do you get enough sleep?', 'CWBS-SF', 'Physical well-being'),
]),
('Emotional Wellness', [
('P4', 'How often do you feel worn out or weighed down by all you have to do?', 'CAREPAL-8 Item 2', 'PHQ-9 fatigue / burden'),
('P5', 'In the past two weeks, how often have you been bothered by not being able to stop or control worrying?', 'CAREPAL-8 Item 1', 'GAD-7 worry item'),
('P6', 'How often do you feel like you are doing a good job as a caregiver?', 'Preparedness Scale', 'Perceived competence'),
]),
('Social Wellness', [
('P7', 'Do you have someone who can watch your kids so you can take a break?', 'CWBS-SF', 'Respite and support'),
('P8', 'Is there someone you can talk to honestly about how hard caregiving can be?', 'CAREPAL-8 (adapted)', 'Emotional support'),
('P9', 'How often do you spend time with friends or do something fun for yourself?', 'CWBS-SF', 'Personal time'),
]),
('Daily Life Wellness', [
('P10', 'How confident are you about handling school meetings, doctor visits, and paperwork for your family?', 'Preparedness Scale', 'System navigation readiness'),
('P11', 'Does your family have the money and resources to cover your basic needs?', 'CAREPAL-8 Items 5-8', 'Financial / material needs'),
('P12', 'Are you able to get the services and supports your family member with a disability needs?', 'CAREPAL-8 Items 5-7', 'Information and service needs'),
]),
('Purpose Wellness', [
('P13', 'Do you feel accepted and respected by the professionals who work with your family?', 'CAREPAL-8 Item 8', 'Professional acceptance'),
('P14', 'How often do you feel like your role as a caregiver gives your life meaning?', 'Preparedness Scale (adapted)', 'Role meaning'),
('P15', 'Is there anything outside of caregiving that is important to who you are?', 'CWBS-SF', 'Identity beyond caregiving'),
]),
('Growth Wellness', [
('P16', 'Are you learning new things about how to support your family member?', 'Preparedness Scale', 'Knowledge growth'),
('P17', 'How often do you feel stuck or like nothing you do makes a difference?', 'CAREPAL-8 (adapted)', 'Helplessness / stagnation (reverse-scored)'),
('P18', 'In the past month, have you done anything just for you (a class, a hobby, time with a friend)?', 'CWBS-SF', 'Personal growth activity'),
]),
],
},
{
'title': '3. Family Member / Household',
'sources': 'Beach Center FQOL (Hoffman et al., 2006); FQoLS (Brown et al., 2006)',
'scale': 'Very satisfied · Satisfied · Neither satisfied nor dissatisfied · Dissatisfied',
'dims': [
('Physical Wellness', [
('F1', 'Do members of your family get the medical care they need when they need it?', 'FQOL Item 19', 'Physical/Material: medical care'),
('F2', 'Does your family feel safe at home, work, school, and in the neighborhood?', 'FQOL Item 21', 'Physical/Material: safety'),
('F3', 'Does your family have transportation to get to the places you need to be?', 'FQOL Item 17', 'Physical/Material: transportation'),
]),
('Emotional Wellness', [
('F4', 'Does your family have the support you need to handle stress?', 'FQOL Item 13', 'Emotional Well-Being: stress support'),
('F5', 'Do family members have some time to pursue their own interests?', 'FQOL Item 15', 'Emotional Well-Being: personal time'),
('F6', 'Do family members have outside help available for special needs?', 'FQOL Item 16', 'Emotional Well-Being: outside help'),
]),
('Social Wellness', [
('F7', 'Do family members have friends or others outside the home they can lean on?', 'FQOL Item 14', 'Emotional Well-Being: external support'),
('F8', 'Does your family enjoy spending time together?', 'FQOL Item 1', 'Family Interaction: enjoyment'),
('F9', 'Do family members show that they love and care for each other?', 'FQOL Item 5', 'Family Interaction: affection'),
]),
('Daily Life Wellness', [
('F10', 'Are you able to get the services and supports your family member with a disability needs?', 'FQOL Items 22-25', 'Disability-Related Support'),
('F11', 'Does your family have a way to take care of expenses?', 'FQOL Item 20', 'Physical/Material: finances'),
('F12', 'Does your family have a good relationship with the service providers who work with your family member?', 'FQOL Item 25', 'Disability-Related Support: providers'),
]),
('Purpose Wellness', [
('F13', 'Does your family solve problems together?', 'FQOL Item 3', 'Family Interaction: problem-solving'),
('F14', 'Do family members support each other to accomplish goals?', 'FQOL Item 4', 'Family Interaction: goal support'),
('F15', 'Does your family feel like it is handling life\'s ups and downs well?', 'FQOL Item 6', 'Family Interaction: resilience'),
]),
('Growth Wellness', [
('F16', 'Do family members help the children learn to be independent?', 'FQOL Item 7', 'Parenting: independence'),
('F17', 'Do adults in the family know other people in the children\'s lives (friends, teachers)?', 'FQOL Item 11', 'Parenting: involvement'),
('F18', 'Do family members talk openly with each other?', 'FQOL Item 2', 'Family Interaction: communication'),
]),
],
},
{
'title': '4. Professional (Therapists, Counselors, Coaches, Educators, Healthcare Workers)',
'sources': 'ProQOL-5 (Stamm, 2010); OLBI (Demerouti et al., 2003)',
'scale': 'Almost every day · Several days a week · Once in a while · Rarely',
'dims': [
('Physical Wellness', [
('PR1', 'How often do you feel physically drained after your workday?', 'ProQOL-5 Item 19', 'Burnout: worn out'),
('PR2', 'In the past month, how often have you lost sleep over the experiences of people you help?', 'ProQOL-5 Item 8', 'Burnout: sleep disruption'),
('PR3', 'How often do you feel on edge or jumpy because of things you hear at work?', 'ProQOL-5 Item 5', 'STS: startle response'),
]),
('Emotional Wellness', [
('PR4', 'I find my work as a helper to be deeply satisfying.', 'ProQOL-5 Item 3', 'CS: satisfaction from helping'),
('PR5', 'How often do you feel depressed because of the experiences of people you help?', 'ProQOL-5 Item 13', 'STS: depression from trauma'),
('PR6', 'How often do you feel overwhelmed because your workload seems endless?', 'ProQOL-5 Item 21', 'Burnout: overwhelm'),
]),
('Social Wellness', [
('PR7', 'Do you have colleagues or peers you can talk with honestly about difficult cases?', 'ProQOL-5 (adapted)', 'Peer consultation / support'),
('PR8', 'How often do you feel connected to the people around you at work?', 'ProQOL-5 Item 4', 'Burnout-R: connectedness'),
('PR9', 'How often do you feel trapped by your job?', 'ProQOL-5 Item 10', 'Burnout: trapped'),
]),
('Daily Life Wellness', [
('PR10', 'How well do you maintain a boundary between your work and your personal life?', 'OLBI (adapted)', 'Disengagement: work-life boundary'),
('PR11', 'I am pleased with how I keep up with professional techniques and protocols.', 'ProQOL-5 Item 16', 'CS: professional competence'),
('PR12', 'How often do you feel bogged down by the systems and rules at work?', 'ProQOL-5 Item 26', 'Burnout: systemic frustration'),
]),
('Purpose Wellness', [
('PR13', 'I believe I can make a difference through my work.', 'ProQOL-5 Item 22', 'CS: impact'),
('PR14', 'How often do you have happy thoughts about the people you help?', 'ProQOL-5 Item 20', 'CS: positive regard'),
('PR15', 'Are you happy that you chose this line of work?', 'ProQOL-5 Item 30', 'CS: career satisfaction'),
]),
('Growth Wellness', [
('PR16', 'I am pleased with how I am able to keep up with helping techniques and protocols.', 'ProQOL-5 Item 16', 'CS: professional growth'),
('PR17', 'How often do you avoid situations that remind you of frightening things people you help have told you?', 'ProQOL-5 Item 23', 'STS: avoidance (reverse-scored)'),
('PR18', 'Are you the person you always wanted to be in this work?', 'ProQOL-5 Item 17', 'Burnout-R: self-concept'),
]),
],
},
{
'title': '5. Special Needs / Accessible Format (Person with Disability)',
'sources': 'PWI-ID (Cummins & Lau, 2005); adapted from WHO-5',
'scale': 'Emoji scale: Not Good · Okay · Pretty Good · Good · Very Good (support person may assist)',
'dims': [
('My Body', [
('SN1', 'How do you feel about your health?', 'PWI-ID: Health', 'Health domain'),
('SN2', 'How do you feel about how safe you feel?', 'PWI-ID: Personal Safety', 'Safety domain'),
]),
('My Feelings', [
('SN3', 'In the past two weeks, how often have you felt happy?', 'WHO-5 Item 1 (simplified)', 'Cheerful and in good spirits'),
('SN4', 'In the past two weeks, how often have you felt calm?', 'WHO-5 Item 2 (simplified)', 'Calm and relaxed'),
]),
('My People', [
('SN5', 'How do you feel about how you get along with people? Like your family and friends.', 'PWI-ID: Personal Relationships', 'Relationships domain'),
('SN6', 'How do you feel about doing things outside your home? Like in your community or neighborhood.', 'PWI-ID: Community Connectedness', 'Community domain'),
]),
('My Day', [
('SN7', 'How do you feel about the things you have? Like your money and the things you own.', 'PWI-ID: Standard of Living', 'Material well-being'),
('SN8', 'How do you feel about how your day goes? Like your routine and what you do.', 'WHO-5 Item 5 (simplified)', 'Daily life filled with interest'),
]),
('What Matters', [
('SN9', 'How do you feel about the things you do or make?', 'PWI-ID: Life Achievement', 'Achievement domain'),
('SN10', 'How do you feel about your life as a whole?', 'PWI-ID: Global', 'Life as a whole (validity check)'),
]),
('Growing', [
('SN11', 'How do you feel about what will happen to you later in your life?', 'PWI-ID: Future Security', 'Future security domain'),
('SN12', 'In the past two weeks, how often have you felt like doing things?', 'WHO-5 Item 3 (simplified)', 'Active and vigorous'),
]),
],
},
]
# ── Build document ──────────────────────────────────────────
doc = Document()
for section in doc.sections:
section.top_margin = Cm(2.54)
section.bottom_margin = Cm(2.54)
section.left_margin = Cm(2.54)
section.right_margin = Cm(2.54)
# Title
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(48)
r = p.add_run('Wheel of Wellness\nFull Question Bank')
r.bold = True
r.font.size = Pt(28)
r.font.color.rgb = RGBColor(*bytes.fromhex(TEAL))
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
r = p.add_run('HELPipedia / SpecialNeeds.help')
r.font.size = Pt(14)
r.font.color.rgb = RGBColor(*bytes.fromhex(CORAL))
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(24)
r = p.add_run(
'Each audience variant contains 18 questions (3 per dimension).\n'
'Items are mapped to their source instrument and adapted at or below a 4th-grade reading level.\n'
'Response options use a consistent 4-point scale per audience.\n\n'
'Special Needs variant: 12 questions (2 per dimension) with emoji response scale.'
)
r.font.size = Pt(11)
r.font.color.rgb = RGBColor(*bytes.fromhex(DARK))
doc.add_page_break()
# Audience sections
for ai, aud in enumerate(AUDIENCES):
heading(doc, aud['title'], level=1)
body(doc, aud['sources'], bold_prefix='Source instruments: ')
body(doc, aud['scale'], bold_prefix='Response scale: ')
if 'Special Needs' in aud['title']:
body(doc, '12 items (2 per dimension). Support person may assist with reading.', bold_prefix='Note: ')
for dim_name, items in aud['dims']:
heading(doc, dim_name, level=2)
styled_table(doc,
['#', 'Question', 'Source', 'Adapted From'],
[[q, text, src, adapt] for q, text, src, adapt in items],
col_widths=[1.5, 9, 3.5, 4],
)
if ai < len(AUDIENCES) - 1:
doc.add_page_break()
# Scoring notes
doc.add_page_break()
heading(doc, 'Scoring Notes', level=1)
body(doc, 'Generalized, Parent/Caregiver, Family, Professional: 18 items. Score per dimension = mean of 3 items x 25 (range: 0-100). Overall score = mean of all 6 dimension scores.',
bold_prefix='Scoring: ')
body(doc, 'Special Needs: 12 items. Score per dimension = mean of 2 items x 20 (range: 0-100). Overall score = mean of all 6 dimension scores.')
body(doc, '0-39 = Needs Attention · 40-59 = Moderate · 60-100 = Strong',
bold_prefix='Thresholds: ')
body(doc, 'All instruments are screening tools for self-reflection. Not diagnostic. Clinical interpretation should involve a qualified professional.',
bold_prefix='Important: ')
# Footer
p = doc.add_paragraph()
p.alignment = WD_ALIGN_PARAGRAPH.CENTER
pf = p.paragraph_format
pf.space_before = Pt(24)
r = p.add_run('Last updated: July 2026\nCompiled for HELPipedia Wheel of Wellness / SpecialNeeds.help')
r.italic = True
r.font.size = Pt(10)
r.font.color.rgb = RGBColor(*bytes.fromhex('888888'))
# Save
out = '/home/newkirk/Documents/Academic/Career/WheelOfWellnessQuestionBank.docx'
doc.save(out)
print(f'Saved: {out}')
build_site.py
+607
View File
@@ -0,0 +1,607 @@
#!/usr/bin/env python3
"""Build the Wheel of Wellness assessment site."""
import json, textwrap
# ── Question data ────────────────────────────────────────────
QUESTIONS = {
"generalized": {
"title": "General",
"subtitle": "For anyone who wants to check in on their wellness",
"scale": ["Almost all the time", "More than half the time", "Some of the time", "Once in a while"],
"emoji": None,
"items": [
{"id":"G1","dim":"physical","text":"In the past month, how often have you felt tired or worn out?","reverse":True},
{"id":"G2","dim":"physical","text":"How would you rate your overall physical health right now?","reverse":False},
{"id":"G3","dim":"physical","text":"In a typical week, how often do you move your body in a way that feels good (walking, stretching, playing)?","reverse":False},
{"id":"G4","dim":"emotional","text":"In the past two weeks, how often have you felt calm and at ease?","reverse":False},
{"id":"G5","dim":"emotional","text":"In the past two weeks, how often have you felt cheerful or in good spirits?","reverse":False},
{"id":"G6","dim":"emotional","text":"How often have you felt worried, sad, or upset in a way that was hard to shake?","reverse":True},
{"id":"G7","dim":"social","text":"Do you have people in your life you can count on when things get hard?","reverse":False},
{"id":"G8","dim":"social","text":"How satisfied are you with how you get along with the people closest to you?","reverse":False},
{"id":"G9","dim":"social","text":"In the past month, how often have you felt alone even when other people were around?","reverse":True},
{"id":"G10","dim":"daily-life","text":"How confident are you that you can handle everyday tasks like bills, forms, and schedules?","reverse":False},
{"id":"G11","dim":"daily-life","text":"In the past two weeks, how often has your sleep been restful?","reverse":False},
{"id":"G12","dim":"daily-life","text":"How safe do you feel in your home and neighborhood?","reverse":False},
{"id":"G13","dim":"purpose","text":"In the past two weeks, how often has your daily life been filled with things that interest you?","reverse":False},
{"id":"G14","dim":"purpose","text":"How would you rate your quality of life right now?","reverse":False},
{"id":"G15","dim":"purpose","text":"Do you feel like your life has meaning or direction?","reverse":False},
{"id":"G16","dim":"growth","text":"In the past two weeks, how often have you felt active and full of energy?","reverse":False},
{"id":"G17","dim":"growth","text":"Are you learning or trying anything new right now?","reverse":False},
{"id":"G18","dim":"growth","text":"How often do you make time for things that help you grow (reading, classes, hobbies)?","reverse":False},
],
},
"parent-caregiver": {
"title": "Parent / Caregiver",
"subtitle": "For parents and caregivers of people with disabilities",
"scale": ["Almost every day", "More days than not", "Once in a while", "Rarely"],
"emoji": None,
"items": [
{"id":"P1","dim":"physical","text":"When did you last see a doctor for YOUR own health check?","reverse":False},
{"id":"P2","dim":"physical","text":"In the past month, how often have you felt tired or worn out from caregiving?","reverse":True},
{"id":"P3","dim":"physical","text":"In a typical week, how often do you get enough sleep?","reverse":False},
{"id":"P4","dim":"emotional","text":"How often do you feel worn out or weighed down by all you have to do?","reverse":True},
{"id":"P5","dim":"emotional","text":"In the past two weeks, how often have you been bothered by not being able to stop or control worrying?","reverse":True},
{"id":"P6","dim":"emotional","text":"How often do you feel like you are doing a good job as a caregiver?","reverse":False},
{"id":"P7","dim":"social","text":"Do you have someone who can watch your kids so you can take a break?","reverse":False},
{"id":"P8","dim":"social","text":"Is there someone you can talk to honestly about how hard caregiving can be?","reverse":False},
{"id":"P9","dim":"social","text":"How often do you spend time with friends or do something fun for yourself?","reverse":False},
{"id":"P10","dim":"daily-life","text":"How confident are you about handling school meetings, doctor visits, and paperwork for your family?","reverse":False},
{"id":"P11","dim":"daily-life","text":"Does your family have the money and resources to cover your basic needs?","reverse":False},
{"id":"P12","dim":"daily-life","text":"Are you able to get the services and supports your family member with a disability needs?","reverse":False},
{"id":"P13","dim":"purpose","text":"Do you feel accepted and respected by the professionals who work with your family?","reverse":False},
{"id":"P14","dim":"purpose","text":"How often do you feel like your role as a caregiver gives your life meaning?","reverse":False},
{"id":"P15","dim":"purpose","text":"Is there anything outside of caregiving that is important to who you are?","reverse":False},
{"id":"P16","dim":"growth","text":"Are you learning new things about how to support your family member?","reverse":False},
{"id":"P17","dim":"growth","text":"How often do you feel stuck or like nothing you do makes a difference?","reverse":True},
{"id":"P18","dim":"growth","text":"In the past month, have you done anything just for you (a class, a hobby, time with a friend)?","reverse":False},
],
},
"family-member": {
"title": "Family Member",
"subtitle": "For household members of people with disabilities",
"scale": ["Very satisfied", "Satisfied", "Neither satisfied nor dissatisfied", "Dissatisfied"],
"emoji": None,
"items": [
{"id":"F1","dim":"physical","text":"Do members of your family get the medical care they need when they need it?","reverse":False},
{"id":"F2","dim":"physical","text":"Does your family feel safe at home, work, school, and in the neighborhood?","reverse":False},
{"id":"F3","dim":"physical","text":"Does your family have transportation to get to the places you need to be?","reverse":False},
{"id":"F4","dim":"emotional","text":"Does your family have the support you need to handle stress?","reverse":False},
{"id":"F5","dim":"emotional","text":"Do family members have some time to pursue their own interests?","reverse":False},
{"id":"F6","dim":"emotional","text":"Do family members have outside help available for special needs?","reverse":False},
{"id":"F7","dim":"social","text":"Do family members have friends or others outside the home they can lean on?","reverse":False},
{"id":"F8","dim":"social","text":"Does your family enjoy spending time together?","reverse":False},
{"id":"F9","dim":"social","text":"Do family members show that they love and care for each other?","reverse":False},
{"id":"F10","dim":"daily-life","text":"Are you able to get the services and supports your family member with a disability needs?","reverse":False},
{"id":"F11","dim":"daily-life","text":"Does your family have a way to take care of expenses?","reverse":False},
{"id":"F12","dim":"daily-life","text":"Does your family have a good relationship with the service providers who work with your family member?","reverse":False},
{"id":"F13","dim":"purpose","text":"Does your family solve problems together?","reverse":False},
{"id":"F14","dim":"purpose","text":"Do family members support each other to accomplish goals?","reverse":False},
{"id":"F15","dim":"purpose","text":"Does your family feel like it is handling life\u2019s ups and downs well?","reverse":False},
{"id":"F16","dim":"growth","text":"Do family members help the children learn to be independent?","reverse":False},
{"id":"F17","dim":"growth","text":"Do adults in the family know other people in the children\u2019s lives (friends, teachers)?","reverse":False},
{"id":"F18","dim":"growth","text":"Do family members talk openly with each other?","reverse":False},
],
},
"professional": {
"title": "Professional",
"subtitle": "For therapists, counselors, educators, and healthcare workers",
"scale": ["Almost every day", "Several days a week", "Once in a while", "Rarely"],
"emoji": None,
"items": [
{"id":"PR1","dim":"physical","text":"How often do you feel physically drained after your workday?","reverse":True},
{"id":"PR2","dim":"physical","text":"In the past month, how often have you lost sleep over the experiences of people you help?","reverse":True},
{"id":"PR3","dim":"physical","text":"How often do you feel on edge or jumpy because of things you hear at work?","reverse":True},
{"id":"PR4","dim":"emotional","text":"I find my work as a helper to be deeply satisfying.","reverse":False},
{"id":"PR5","dim":"emotional","text":"How often do you feel depressed because of the experiences of people you help?","reverse":True},
{"id":"PR6","dim":"emotional","text":"How often do you feel overwhelmed because your workload seems endless?","reverse":True},
{"id":"PR7","dim":"social","text":"Do you have colleagues or peers you can talk with honestly about difficult cases?","reverse":False},
{"id":"PR8","dim":"social","text":"How often do you feel connected to the people around you at work?","reverse":False},
{"id":"PR9","dim":"social","text":"How often do you feel trapped by your job?","reverse":True},
{"id":"PR10","dim":"daily-life","text":"How well do you maintain a boundary between your work and your personal life?","reverse":False},
{"id":"PR11","dim":"daily-life","text":"I am pleased with how I keep up with professional techniques and protocols.","reverse":False},
{"id":"PR12","dim":"daily-life","text":"How often do you feel bogged down by the systems and rules at work?","reverse":True},
{"id":"PR13","dim":"purpose","text":"I believe I can make a difference through my work.","reverse":False},
{"id":"PR14","dim":"purpose","text":"How often do you have happy thoughts about the people you help?","reverse":False},
{"id":"PR15","dim":"purpose","text":"Are you happy that you chose this line of work?","reverse":False},
{"id":"PR16","dim":"growth","text":"I am pleased with how I am able to keep up with helping techniques and protocols.","reverse":False},
{"id":"PR17","dim":"growth","text":"How often do you avoid situations that remind you of frightening things people you help have told you?","reverse":True},
{"id":"PR18","dim":"growth","text":"Are you the person you always wanted to be in this work?","reverse":False},
],
},
"special-needs": {
"title": "Accessible",
"subtitle": "For people with disabilities (a support person may help you read)",
"scale": ["Not Good", "Okay", "Pretty Good", "Good", "Very Good"],
"emoji": ["😟", "😐", "🙂", "😊", "😄"],
"items": [
{"id":"SN1","dim":"physical","text":"How do you feel about your health?","reverse":False},
{"id":"SN2","dim":"physical","text":"How do you feel about how safe you feel?","reverse":False},
{"id":"SN3","dim":"emotional","text":"In the past two weeks, how often have you felt happy?","reverse":False},
{"id":"SN4","dim":"emotional","text":"In the past two weeks, how often have you felt calm?","reverse":False},
{"id":"SN5","dim":"social","text":"How do you feel about how you get along with people? Like your family and friends.","reverse":False},
{"id":"SN6","dim":"social","text":"How do you feel about doing things outside your home? Like in your community or neighborhood.","reverse":False},
{"id":"SN7","dim":"daily-life","text":"How do you feel about the things you have? Like your money and the things you own.","reverse":False},
{"id":"SN8","dim":"daily-life","text":"How do you feel about how your day goes? Like your routine and what you do.","reverse":False},
{"id":"SN9","dim":"purpose","text":"How do you feel about the things you do or make?","reverse":False},
{"id":"SN10","dim":"purpose","text":"How do you feel about your life as a whole?","reverse":False},
{"id":"SN11","dim":"growth","text":"How do you feel about what will happen to you later in your life?","reverse":False},
{"id":"SN12","dim":"growth","text":"In the past two weeks, how often have you felt like doing things?","reverse":False},
],
},
}
DIMS = [
{"key":"physical","label":"Physical","icon":"💪","color":"#1565C0","bg":"#E3F2FD","desc":"rest, movement, nutrition, medical care"},
{"key":"emotional","label":"Emotional","icon":"💗","color":"#7B1FA2","bg":"#F3E5F5","desc":"naming feelings, coping, support"},
{"key":"social","label":"Social","icon":"🤝","color":"#2E7D32","bg":"#E8F5E9","desc":"connection, understanding, community"},
{"key":"daily-life","label":"Daily Life","icon":"📋","color":"#E65100","bg":"#FFF3E0","desc":"home, finances, schedules, advocacy"},
{"key":"purpose","label":"Purpose","icon":"⭐","color":"#F57F17","bg":"#FFF8E1","desc":"meaning, values, identity, hope"},
{"key":"growth","label":"Growth","icon":"🌱","color":"#C62828","bg":"#FFEBEE","desc":"learning, creativity, becoming"},
]
# ── Build ────────────────────────────────────────────────────
questions_json = json.dumps(QUESTIONS, ensure_ascii=False)
dims_json = json.dumps(DIMS, ensure_ascii=False)
html = textwrap.dedent(r"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness Assessment</title>
<meta name="description" content="Find the resources your family needs in 5 minutes. A wellness assessment across six dimensions.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{--primary:#2E7D6F;--primary-dark:#1F5C52;--primary-light:#3A9A88;--secondary:#E8835C;--cream:#FFF8F0;--charcoal:#2D3436;--gray-100:#F7F7F7;--gray-200:#E8E8E8;--gray-300:#D1D1D1;--gray-400:#9E9E9E;--gray-500:#6B6B6B;--green:#4CAF50;--green-light:#E8F5E9;--yellow:#FFC107;--yellow-light:#FFF8E1;--red:#E85C4A;--red-light:#FFEBEE;--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);--shadow-lg:0 8px 30px rgba(0,0,0,.12)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--cream);color:var(--charcoal);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--primary);text-decoration:none}
/* Header */
.site-header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;color:white;position:sticky;top:0;z-index:50}
.site-header .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.3px}
.site-header .logo-icon{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.site-header .nav-links{display:flex;gap:20px;font-size:13px;font-weight:500;opacity:.9}
.site-header .nav-links a{color:white;text-decoration:none;padding:4px 0}
.site-header .nav-links a:hover{opacity:1}
/* Footer */
.site-footer{background:var(--primary-dark);color:rgba(255,255,255,.7);text-align:center;padding:16px 20px;font-size:11px;letter-spacing:.3px;margin-top:auto}
.site-footer a{color:rgba(255,255,255,.9)}
/* Container */
.container{max-width:900px;margin:0 auto;padding:24px 20px}
/* ── Screens ── */
.screen{display:none}
.screen.active{display:block}
/* Landing */
.landing{text-align:center;padding:40px 20px 60px}
.landing .eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--secondary);margin-bottom:8px}
.landing h1{font-size:clamp(28px,5vw,42px);font-weight:800;color:var(--primary-dark);line-height:1.15;margin-bottom:12px}
.landing .subtitle{font-size:17px;color:var(--secondary);font-weight:600;margin-bottom:16px}
.landing .intro{font-size:14px;color:var(--gray-500);line-height:1.7;max-width:560px;margin:0 auto 32px}
.feature-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.feature-pill{display:flex;align-items:center;gap:6px;background:white;border:1px solid var(--gray-200);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--gray-500);font-weight:500;box-shadow:var(--shadow-sm)}
/* Wheel SVG on landing */
.wheel-svg{width:240px;height:240px;margin:0 auto 28px}
/* Audience selector */
.audience-section{margin-bottom:32px}
.audience-section h2{font-size:16px;font-weight:700;color:var(--primary-dark);margin-bottom:12px}
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;max-width:700px;margin:0 auto}
.audience-card{background:white;border:2px solid var(--gray-200);border-radius:12px;padding:16px 12px;cursor:pointer;transition:all .15s;text-align:center}
.audience-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.audience-card.selected{border-color:var(--primary);background:rgba(46,125,111,.05)}
.audience-card .aud-icon{font-size:28px;margin-bottom:6px}
.audience-card .aud-title{font-size:13px;font-weight:700;color:var(--charcoal)}
.audience-card .aud-desc{font-size:11px;color:var(--gray-400);margin-top:4px;line-height:1.4}
/* CTA */
.cta-button{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--secondary) 0%,#D06A42 100%);color:white;font-size:16px;font-weight:700;padding:14px 36px;border-radius:50px;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(232,131,92,.35);letter-spacing:.3px;transition:transform .15s}
.cta-button:hover{transform:translateY(-1px)}
.cta-button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.cta-subtext{font-size:11px;color:var(--gray-400);margin-top:10px}
/* ── Questions ── */
.questions-screen{padding-bottom:40px}
.progress-section{margin-bottom:20px}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-header .label{font-size:13px;font-weight:600;color:var(--primary)}
.progress-header .count{font-size:12px;color:var(--gray-400);font-weight:500}
.progress-bar-track{width:100%;height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--primary-light) 100%);border-radius:4px;transition:width .3s ease}
.dim-indicator{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.dim-dot{width:10px;height:10px;border-radius:50%;transition:all .2s}
.dim-dot.active{transform:scale(1.4)}
.question-card{background:white;border-radius:14px;padding:24px 28px;box-shadow:var(--shadow-md);border:1px solid var(--gray-200);position:relative;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.question-card .q-dim-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.question-card .q-text{font-size:16px;font-weight:600;color:var(--charcoal);line-height:1.5;margin-bottom:20px}
.question-card .q-number{font-size:11px;color:var(--gray-300);font-weight:600;position:absolute;top:24px;right:28px}
.options-list{display:flex;flex-direction:column;gap:10px}
.option-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--gray-100);border:2px solid var(--gray-200);border-radius:10px;font-size:14px;color:var(--gray-500);cursor:pointer;transition:all .15s;font-weight:500}
.option-item:hover{border-color:var(--gray-300);background:white}
.option-item.selected{background:var(--green-light);border-color:var(--primary);color:var(--primary-dark)}
.option-item .opt-emoji{font-size:20px;width:28px;text-align:center}
.radio-circle{width:20px;height:20px;border-radius:50%;border:2px solid var(--gray-300);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.option-item.selected .radio-circle{border-color:var(--primary);background:var(--primary)}
.option-item.selected .radio-circle::after{content:'';width:8px;height:8px;background:white;border-radius:50%}
/* Nav buttons */
.q-nav{display:flex;justify-content:space-between;margin-top:24px}
.q-nav button{padding:10px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-prev{background:var(--gray-100);color:var(--gray-500);border:1px solid var(--gray-200)}
.btn-prev:hover{background:var(--gray-200)}
.btn-next{background:var(--primary);color:white}
.btn-next:hover{background:var(--primary-dark)}
.btn-next:disabled{opacity:.4;cursor:not-allowed}
.btn-submit{background:var(--secondary);color:white;font-size:16px;padding:14px 36px;border-radius:50px}
.btn-submit:hover{background:#D06A42}
/* ── Results ── */
.results-screen{padding-bottom:40px}
.results-header{text-align:center;margin-bottom:28px}
.results-header .completion-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green);font-size:11px;font-weight:600;padding:4px 14px;border-radius:16px;margin-bottom:8px}
.results-header h2{font-size:28px;font-weight:800;color:var(--primary-dark);margin-bottom:6px}
.results-header .summary{font-size:14px;color:var(--gray-500);max-width:500px;margin:0 auto;line-height:1.6}
.results-body{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.results-wheel-wrap{flex-shrink:0;width:280px;height:280px;margin:0 auto}
.dimensions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-width:280px}
.dim-card{background:white;border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}
.dim-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dim-card-name{font-size:13px;font-weight:700;color:var(--charcoal);display:flex;align-items:center;gap:6px}
.dim-card-name .dim-icon{font-size:16px}
.dim-card .dim-score-text{font-size:24px;font-weight:800;margin-bottom:4px}
.dim-card .dim-desc{font-size:11px;color:var(--gray-400);line-height:1.4}
.status-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:.3px}
.status-badge.strong{background:var(--green-light);color:var(--green)}
.status-badge.moderate{background:var(--yellow-light);color:#F9A825}
.status-badge.needs-attention{background:var(--red-light);color:var(--red)}
.overall-card{background:white;border-radius:14px;padding:20px 24px;box-shadow:var(--shadow-md);border:1px solid var(--gray-200);text-align:center;margin-top:20px}
.overall-card .overall-score{font-size:48px;font-weight:800;color:var(--primary-dark)}
.overall-card .overall-label{font-size:13px;color:var(--gray-400);font-weight:600}
.disclaimer{margin-top:24px;padding:16px 20px;background:rgba(46,125,111,.06);border-radius:10px;font-size:12px;color:var(--gray-500);line-height:1.6;text-align:center}
.btn-retake{margin-top:20px;padding:12px 28px;background:white;border:2px solid var(--gray-200);border-radius:50px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .15s}
.btn-retake:hover{border-color:var(--primary);color:var(--primary)}
@media(max-width:640px){
.audience-grid{grid-template-columns:1fr 1fr}
.dimensions-grid{grid-template-columns:1fr}
.results-body{flex-direction:column;align-items:center}
.q-nav{flex-direction:column;gap:10px}
.q-nav button{width:100%}
}
</style>
</head>
<body>
<header class="site-header">
<div class="brand">
<div class="logo-icon">♿</div>
<span>Wheel of Wellness</span>
</div>
<nav class="nav-links">
<a href="#" onclick="showScreen('landing');return false">Home</a>
<a href="https://helpipedia.org" target="_blank">HELPipedia</a>
<a href="https://specialneeds.help" target="_blank">SpecialNeeds.help</a>
</nav>
</header>
<!-- Landing -->
<div id="screen-landing" class="screen active">
<div class="container landing">
<div class="eyebrow">HELPipedia / SpecialNeeds.help</div>
<h1>Wheel of Wellness</h1>
<p class="subtitle">Find the resources your family needs &mdash; in 5 minutes</p>
<p class="intro">Whether you are a parent, caregiver, or individual navigating disability, this quick assessment identifies your needs across six wellness areas and connects you to resources.</p>
<svg class="wheel-svg" viewBox="0 0 240 240" id="landing-wheel"></svg>
<div class="audience-section">
<h2>Who are you?</h2>
<div class="audience-grid" id="audience-grid"></div>
</div>
<button class="cta-button" id="btn-start" disabled onclick="startAssessment()">
Start Your Assessment <span class="arrow">→</span>
</button>
<p class="cta-subtext">18 questions &middot; About 5 minutes &middot; Private &amp; anonymous</p>
</div>
</div>
<!-- Questions -->
<div id="screen-questions" class="screen">
<div class="container questions-screen">
<div class="progress-section">
<div class="progress-header">
<span class="label" id="dim-label"></span>
<span class="count" id="q-count"></span>
</div>
<div class="progress-bar-track">
<div class="progress-bar-fill" id="progress-fill"></div>
</div>
</div>
<div class="dim-indicator" id="dim-indicator"></div>
<div id="question-area"></div>
<div class="q-nav">
<button class="btn-prev" id="btn-prev" onclick="prevQuestion()">← Back</button>
<button class="btn-next" id="btn-next" onclick="nextQuestion()" disabled>Next →</button>
</div>
</div>
</div>
<!-- Results -->
<div id="screen-results" class="screen">
<div class="container results-screen">
<div class="results-header">
<div class="completion-badge">✓ Assessment Complete</div>
<h2>Your Wellness Results</h2>
<p class="summary" id="results-summary"></p>
</div>
<div class="results-body">
<div class="results-wheel-wrap">
<svg viewBox="0 0 280 280" id="results-wheel"></svg>
</div>
<div class="dimensions-grid" id="results-grid"></div>
</div>
<div class="overall-card">
<div class="overall-score" id="overall-score"></div>
<div class="overall-label">Overall Wellness Score</div>
</div>
<div class="disclaimer">
This is a screening tool for self-reflection, not a diagnosis. If you have concerns about your wellbeing, please talk to a qualified professional.
</div>
<div style="text-align:center">
<button class="btn-retake" onclick="retake()">← Take Again</button>
</div>
</div>
</div>
<footer class="site-footer">
<div>Powered by <a href="https://helpipedia.org" target="_blank">HELPipedia</a> &nbsp;·&nbsp; <a href="https://specialneeds.help" target="_blank">SpecialNeeds.help</a></div>
</footer>
<script>
const QUESTIONS = """ + questions_json + """;
const DIMS = """ + dims_json + """;
let selectedAudience = null;
let currentQ = 0;
let answers = {};
// ── Audience selector ──
const grid = document.getElementById('audience-grid');
const icons = {'generalized':'👤','parent-caregiver':'👨‍👩‍👧','family-member':'🏠','professional':'🩺','special-needs':'♿'};
Object.entries(QUESTIONS).forEach(([key, q]) => {
const card = document.createElement('div');
card.className = 'audience-card';
card.dataset.key = key;
card.innerHTML = `<div class="aud-icon">${icons[key]||'👤'}</div><div class="aud-title">${q.title}</div><div class="aud-desc">${q.subtitle}</div>`;
card.onclick = () => selectAudience(key);
grid.appendChild(card);
});
function selectAudience(key) {
selectedAudience = key;
document.querySelectorAll('.audience-card').forEach(c => c.classList.toggle('selected', c.dataset.key === key));
document.getElementById('btn-start').disabled = false;
}
// ── Landing wheel SVG ──
function drawLandingWheel() {
const svg = document.getElementById('landing-wheel');
const cx = 120, cy = 120, r = 90, inner = 40;
let paths = '';
DIMS.forEach((d, i) => {
const a1 = (i * 60 - 90) * Math.PI / 180;
const a2 = ((i + 1) * 60 - 90) * Math.PI / 180;
const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
const ix1 = cx + inner * Math.cos(a1), iy1 = cy + inner * Math.sin(a1);
const ix2 = cx + inner * Math.cos(a2), iy2 = cy + inner * Math.sin(a2);
paths += `<path d="M${ix1},${iy1} L${x1},${y1} A${r},${r} 0 0,1 ${x2},${y2} L${ix2},${iy2} A${inner},${inner} 0 0,0 ${ix1},${iy1}" fill="${d.color}" opacity=".8"/>`;
const mx = cx + (r + inner) / 2 * Math.cos((a1 + a2) / 2);
const my = cy + (r + inner) / 2 * Math.sin((a1 + a2) / 2);
paths += `<text x="${mx}" y="${my}" text-anchor="middle" dominant-baseline="central" fill="white" font-size="12" font-weight="700">${d.icon}</text>`;
});
svg.innerHTML = paths + `<circle cx="${cx}" cy="${cy}" r="${inner - 4}" fill="var(--cream)"/><text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="20">☸</text>`;
}
drawLandingWheel();
// ── Navigation ──
function showScreen(name) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById('screen-' + name).classList.add('active');
window.scrollTo(0, 0);
}
function startAssessment() {
if (!selectedAudience) return;
currentQ = 0;
answers = {};
showScreen('questions');
renderQuestion();
}
function renderQuestion() {
const items = QUESTIONS[selectedAudience].items;
const item = items[currentQ];
const dim = DIMS.find(d => d.key === item.dim);
const total = items.length;
const scale = QUESTIONS[selectedAudience].scale;
const emojis = QUESTIONS[selectedAudience].emoji;
document.getElementById('dim-label').textContent = dim.icon + ' ' + dim.label;
document.getElementById('q-count').textContent = `Question ${currentQ + 1} of ${total}`;
document.getElementById('progress-fill').style.width = `${((currentQ + 1) / total) * 100}%`;
// Dim indicator dots
const di = document.getElementById('dim-indicator');
di.innerHTML = '';
DIMS.forEach(d => {
const dot = document.createElement('div');
dot.className = 'dim-dot' + (d.key === item.dim ? ' active' : '');
dot.style.background = d.color;
dot.title = d.label;
di.appendChild(dot);
});
// Question card
const area = document.getElementById('question-area');
let optionsHtml = scale.map((s, i) => {
const selected = answers[item.id] === i ? ' selected' : '';
const emoji = emojis ? `<span class="opt-emoji">${emojis[i]}</span>` : '';
return `<div class="option-item${selected}" onclick="selectOption('${item.id}',${i})"><div class="radio-circle"></div>${emoji}<span>${s}</span></div>`;
}).join('');
area.innerHTML = `<div class="question-card"><div class="q-dim-label" style="color:${dim.color}">${dim.label}</div><div class="q-number">${item.id}</div><div class="q-text">${item.text}</div><div class="options-list">${optionsHtml}</div></div>`;
// Nav buttons
document.getElementById('btn-prev').style.visibility = currentQ === 0 ? 'hidden' : 'visible';
const nextBtn = document.getElementById('btn-next');
if (currentQ === total - 1) {
nextBtn.outerHTML = `<button class="btn-submit" id="btn-next" onclick="submitAssessment()" ${answers[item.id] === undefined ? 'disabled' : ''}>See My Results →</button>`;
} else {
nextBtn.disabled = answers[item.id] === undefined;
}
}
function selectOption(qId, val) {
answers[qId] = val;
renderQuestion();
}
function nextQuestion() {
const items = QUESTIONS[selectedAudience].items;
if (currentQ < items.length - 1) { currentQ++; renderQuestion(); }
}
function prevQuestion() {
if (currentQ > 0) { currentQ--; renderQuestion(); }
}
// ── Scoring ──
function scoreAssessment() {
const items = QUESTIONS[selectedAudience].items;
const scaleLen = QUESTIONS[selectedAudience].scale.length;
const dimScores = {};
DIMS.forEach(d => { dimScores[d.key] = {sum: 0, count: 0}; });
items.forEach(item => {
const val = answers[item.id];
if (val === undefined) return;
// Score: highest option = best. Reverse items flip.
const score = item.reverse ? (scaleLen - 1 - val) : val;
dimScores[item.dim].sum += score;
dimScores[item.dim].count += 1;
});
const results = DIMS.map(d => {
const {sum, count} = dimScores[d.key];
// Scale to 0-100
const raw = count > 0 ? (sum / count) / (scaleLen - 1) * 100 : 0;
const score = Math.round(raw);
let status = 'strong';
if (score < 40) status = 'needs-attention';
else if (score < 60) status = 'moderate';
return {...d, score, status};
});
const overall = Math.round(results.reduce((s, r) => s + r.score, 0) / results.length);
let overallStatus = 'Strong';
if (overall < 40) overallStatus = 'Needs Attention';
else if (overall < 60) overallStatus = 'Moderate';
return {results, overall, overallStatus};
}
// ── Results ──
function submitAssessment() {
const {results, overall, overallStatus} = scoreAssessment();
showScreen('results');
// Summary
document.getElementById('results-summary').textContent =
`Based on your answers, here is how you are doing across the six wellness areas. Your overall score is ${overall}/100 (${overallStatus}).`;
// Dim cards
const grid = document.getElementById('results-grid');
grid.innerHTML = results.map(r => `
<div class="dim-card">
<div class="dim-card-header">
<span class="dim-card-name"><span class="dim-icon">${r.icon}</span> ${r.label}</span>
<span class="status-badge ${r.status}">${r.status.replace('-', ' ')}</span>
</div>
<div class="dim-score-text" style="color:${r.color}">${r.score}</div>
<div class="dim-desc">${r.desc}</div>
</div>
`).join('');
// Overall
document.getElementById('overall-score').textContent = overall;
const oc = document.getElementById('overall-score');
oc.style.color = overall >= 60 ? 'var(--green)' : overall >= 40 ? '#F9A825' : 'var(--red)';
// Results wheel
drawResultsWheel(results);
}
function drawResultsWheel(results) {
const svg = document.getElementById('results-wheel');
const cx = 140, cy = 140, maxR = 120, inner = 30;
let paths = '';
results.forEach((r, i) => {
const a1 = (i * 60 - 90) * Math.PI / 180;
const a2 = ((i + 1) * 60 - 90) * Math.PI / 180;
const segR = inner + (maxR - inner) * (r.score / 100);
const x1 = cx + segR * Math.cos(a1), y1 = cy + segR * Math.sin(a1);
const x2 = cx + segR * Math.cos(a2), y2 = cy + segR * Math.sin(a2);
const ix1 = cx + inner * Math.cos(a1), iy1 = cy + inner * Math.sin(a1);
const ix2 = cx + inner * Math.cos(a2), iy2 = cy + inner * Math.sin(a2);
paths += `<path d="M${ix1},${iy1} L${x1},${y1} A${segR},${segR} 0 0,1 ${x2},${y2} L${ix2},${iy2} A${inner},${inner} 0 0,0 ${ix1},${iy1}" fill="${r.color}" opacity=".85"/>`;
// Label
const labelR = maxR + 16;
const mx = cx + labelR * Math.cos((a1 + a2) / 2);
const my = cy + labelR * Math.sin((a1 + a2) / 2);
paths += `<text x="${mx}" y="${my}" text-anchor="middle" dominant-baseline="central" font-size="11" font-weight="600" fill="var(--charcoal)">${r.icon} ${r.score}</text>`;
});
// Background rings
let rings = '';
[25, 50, 75, 100].forEach(pct => {
const rr = inner + (maxR - inner) * pct / 100;
rings += `<circle cx="${cx}" cy="${cy}" r="${rr}" fill="none" stroke="var(--gray-200)" stroke-width="1" opacity=".5"/>`;
});
svg.innerHTML = rings + paths + `<circle cx="${cx}" cy="${cy}" r="${inner}" fill="var(--cream)"/>`;
}
function retake() {
answers = {};
currentQ = 0;
selectedAudience = null;
document.querySelectorAll('.audience-card').forEach(c => c.classList.remove('selected'));
document.getElementById('btn-start').disabled = true;
showScreen('landing');
}
</script>
</body>
</html>""")
out = "/home/newkirk/Projects/wellnessWheel/site/index.html"
import os
os.makedirs(os.path.dirname(out), exist_ok=True)
with open(out, 'w') as f:
f.write(html)
print(f"Built: {out}")
print(f"Size: {os.path.getsize(out)} bytes")
convert.js
+35
View File
@@ -0,0 +1,35 @@
const puppeteer = require('puppeteer-core');
const path = require('path');
(async () => {
const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome-stable',
headless: 'new',
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
});
const page = await browser.newPage();
const htmlPath = path.resolve(__dirname, 'mockup.html');
await page.goto(`file://${htmlPath}`, {
waitUntil: 'networkidle0',
timeout: 30000
});
// Wait for fonts to load
await page.evaluate(() => document.fonts.ready);
await new Promise(r => setTimeout(r, 2000));
// Use landscape Letter size (11" x 8.5")
await page.pdf({
path: path.resolve(__dirname, 'WheelOfWellnessMockup.pdf'),
width: '11in',
height: '8.5in',
printBackground: true,
margin: { top: '0', right: '0', bottom: '0', left: '0' },
preferCSSPageSize: false
});
console.log('PDF generated successfully!');
await browser.close();
})();
convert_onepager.js
+29
View File
@@ -0,0 +1,29 @@
const puppeteer = require('puppeteer-core');
const path = require('path');
(async () => {
const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome-stable',
headless: 'new',
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu']
});
const page = await browser.newPage();
const htmlPath = path.resolve(__dirname, 'onepager.html');
await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0', timeout: 30000 });
await page.evaluate(() => document.fonts.ready);
await new Promise(r => setTimeout(r, 2000));
await page.pdf({
path: path.resolve(__dirname, '..', 'Documents', 'Career', 'WheelOfWellnessOnePager.pdf'),
width: '8.5in',
height: '11in',
printBackground: true,
margin: { top: '0', right: '0', bottom: '0', left: '0' },
preferCSSPageSize: false
});
console.log('PDF generated successfully!');
await browser.close();
})();
mockup-family-member.html
+240
View File
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Family Member Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
</head>
<body>
<!-- ═══════════ PAGE 1: LANDING ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/family</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="page1-hero">
<div class="eyebrow">For Family Members</div>
<h1>Wheel of Wellness<br>Family Check-In</h1>
<div class="subtitle">See how your whole family is doing — together</div>
<p class="intro">
When one person in a family has a disability or health need, it touches everyone.
This quick check helps families see what is working and what could use support.
Based on the Beach Center Family Quality of Life Scale, a tool used by researchers
and providers who work with families like yours.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon">⏱</span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">👨‍👩‍👧‍👦</span> Covers your whole family</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to family resources</div>
<div class="feature-pill"><span class="icon">🔒</span> Private & safe</div>
</div>
<div class="wheel-container"><svg viewBox="0 0 280 280" width="280" height="280"><defs><filter id="wS" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/></filter></defs><g filter="url(#wS)" transform="translate(140,140)"><circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/><path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/><path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/><path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/><path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/><path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/><path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/><circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text><text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text><g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Physical</text></g><g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Emotional</text></g><g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Social</text></g><g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Daily Life</text></g><g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18">⭐</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Purpose</text></g><g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growth</text></g></g></svg></div>
<button class="cta-button">Start Your Family Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge coral">👨‍👩‍👧‍👦 For Family Members</div>
</div>
<div class="evidence-footnote">Adapted from Beach Center Family Quality of Life Scale (Hoffman et al., 2006; Chiu et al., 2020)</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════ PAGE 2: QUESTIONS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/family/questions</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header"><span class="label">Your Family Check</span><span class="count">Question 4 of 18</span></div>
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:22%"></div></div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 Physical</span><span class="dim-badge emotional">💗 Emotional</span><span class="dim-badge social">🤝 Social</span><span class="dim-badge daily-life">📋 Daily Life</span><span class="dim-badge purpose">⭐ Purpose</span><span class="dim-badge growth">🌱 Growth</span>
</div>
<!-- Q1: Physical (family health, adapted from FQOL Material Well-being) -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 18</span>
<div class="q-dim-label">💪 Physical Wellness</div>
<div class="q-text">Do members of your family get the medical care they need when they need it?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Not really</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q2: Emotional (FQOL Emotional Well-being) -->
<div class="question-card q-emotional">
<span class="question-number">Q 4 / 18</span>
<div class="q-dim-label">💗 Emotional Wellness</div>
<div class="q-text">Does your family have the support you need to handle stress?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item selected"><div class="radio-circle"></div>A little</div>
<div class="option-item"><div class="radio-circle"></div>Pretty much</div>
<div class="option-item"><div class="radio-circle"></div>Very much</div>
</div>
</div>
<!-- Q3: Social (FQOL Family Interaction) -->
<div class="question-card q-social">
<span class="question-number">Q 7 / 18</span>
<div class="q-dim-label">🤝 Social Wellness</div>
<div class="q-text">Do family members have people outside the home they can lean on?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, we feel alone</div>
<div class="option-item"><div class="radio-circle"></div>A few people</div>
<div class="option-item"><div class="radio-circle"></div>We have some support</div>
<div class="option-item"><div class="radio-circle"></div>We have strong support</div>
</div>
</div>
<!-- Q4: Daily Life (FQOL Disability-Related Support) -->
<div class="question-card q-daily-life">
<span class="question-number">Q 10 / 18</span>
<div class="q-dim-label">📋 Daily Life Wellness</div>
<div class="q-text">Are you able to get the services and supports your family member with a disability needs?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not really</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item selected"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q5: Purpose — Beach Center FQOL family problem-solving -->
<div class="question-card q-purpose">
<span class="question-number">Q 13 / 18</span>
<div class="q-dim-label">⭐ Purpose Wellness</div>
<div class="q-text">Does your family solve problems together?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes</div>
<div class="option-item selected"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q6: Growth — Beach Center FQOL parenting/communication -->
<div class="question-card q-growth">
<span class="question-number">Q 16 / 18</span>
<div class="q-dim-label">🌱 Growth Wellness</div>
<div class="q-text">Do family members talk openly with each other?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes</div>
<div class="option-item selected"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════ PAGE 3: RESULTS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/family/results</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Results</a><a href="#">About</a></div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ Check Complete</div>
<h2>Your Family Snapshot</h2>
<p class="summary">Here is a look at how your family is doing across six parts of wellness. The lower scores show areas where your family may want more support.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Family Wellness Score</div>
<div class="overall-score">55 <span>/ 100</span></div>
<div class="overall-text">Your family has strengths to build on. Some areas could use more support.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300"><defs><filter id="s2" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/></filter></defs><g transform="translate(150,150)" filter="url(#s2)"><circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/><circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><polygon points="0,-45.5 56.3,-45.5 52,52 0,65 -57.1,27.5 -12.4,-45.5" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="56.3" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="52" cy="52" r="5" fill="var(--red)"/><circle cx="0" cy="65" r="5" fill="var(--green)"/><circle cx="-57.1" cy="27.5" r="5" fill="var(--yellow)"/><circle cx="-12.4" cy="-45.5" r="5" fill="var(--yellow)"/><line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💪 Physical</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💗 Emotional</text></g><g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 Social</text></g><g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 Daily Life</text></g><g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ Purpose</text></g><g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">🌱 Growth</text></g><circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">55</text><text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text></g></svg>
</div>
<div class="dimensions-grid">
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💪</span> Physical</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:45%"></div></div><div class="dim-score">Score: 45/100</div><div class="dim-desc">Getting medical care for everyone can be a challenge. Help is available.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> Emotional</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Your family has some emotional support. A little more could go a long way.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> Social</div><span class="status-badge needs-attention">Needs Attention</span></div><div class="score-bar"><div class="score-fill red" style="width:30%"></div></div><div class="dim-score">Score: 30/100</div><div class="dim-desc">Your family may feel cut off. Finding community can make a big difference.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> Daily Life</div><span class="status-badge strong">Strong</span></div><div class="score-bar"><div class="score-fill green" style="width:75%"></div></div><div class="dim-score">Score: 75/100</div><div class="dim-desc">You navigate the support system well. That is a real strength.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">⭐</span> Purpose</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:55%"></div></div><div class="dim-score">Score: 55/100</div><div class="dim-desc">Your family shares values and meaning. There is room to grow together.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growth</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Learning and trying new things as a family may have taken a back seat.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Family Resources →</button>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════ PAGE 4: RESOURCES ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/family/resources</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Resources</a><a href="#">About</a></div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle" style="border-color:var(--red);background:var(--red-light)"><div class="score-num" style="color:var(--red)">30</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>🤝 Social Connection Resources</h3>
<p>Your family's Social score shows you may feel cut off from community. This is common for families navigating disability — and there are real ways to build connections.</p>
<div class="what-this-means">→ When families find others who get it, stress goes down and everyone does better.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">👨‍👩‍👧‍👦</div><div class="resource-name">Family Support Groups</div><div class="resource-desc">Meet other families who share similar experiences. Swap tips, build friendships, and know you are not alone.</div><div class="resource-meta"><span class="resource-tag">Local Groups</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri2">🏖</div><div class="resource-name">Respite & Family Breaks</div><div class="resource-desc">Find respite care options so your whole family can recharge. Includes weekend programs and summer camps.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri3">🧒</div><div class="resource-name">Sibling Support Programs</div><div class="resource-desc">Programs for brothers and sisters of children with disabilities. A space just for them to connect and share.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri4">📋</div><div class="resource-name">Benefits & Services Navigator</div><div class="resource-desc">Help finding and applying for programs your family may qualify for — Medicaid waivers, SSI, and more.</div><div class="resource-meta"><span class="resource-tag">Services</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
</div>
<div class="mentor-cta">
<div class="cta-left"><div class="cta-icon">👨‍👩‍👧</div><div class="cta-text"><h4>Connect with a Family Mentor</h4><p>Talk to a family who has walked this road. Our trained family mentors offer real-world advice and a listening ear — at no cost.</p></div></div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Full Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share with Your Care Team</a>
<a href="#" class="utility-link">📂 Save to Vault</a>
<a href="#" class="utility-link">🔄 Take It Again</a>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>
mockup-generalized.html
+546
View File
@@ -0,0 +1,546 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Evidence-Based Assessment (Generalized)</title>
<link rel="stylesheet" href="shared-styles.css">
<style>
/* Audience badge on landing */
.audience-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(46,125,111,0.08);
color: var(--primary);
font-size: 10.5px;
font-weight: 700;
padding: 4px 14px;
border-radius: 16px;
margin-top: 8px;
letter-spacing: 0.3px;
}
.evidence-footnote {
position: absolute;
bottom: 40px;
left: 0; right: 0;
text-align: center;
font-size: 8px;
color: var(--gray-300);
}
</style>
</head>
<body>
<!-- ═══════════════════════ PAGE 1: LANDING ═══════════════════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots">
<div class="browser-dot red"></div>
<div class="browser-dot yellow"></div>
<div class="browser-dot green"></div>
</div>
<div class="browser-url-bar">
<span class="lock">🔒</span>
<span>specialneeds.help/wellness-assessment</span>
</div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand">
<div class="logo-icon">🧠</div>
<div class="brand-text">
HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span>
</div>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Resources</a>
<a href="#" class="active">Assessment</a>
<a href="#">About</a>
</div>
</div>
<div class="page1-hero">
<div class="eyebrow">Evidence-Based Wellness Tool</div>
<h1>Wheel of Wellness<br>Assessment</h1>
<div class="subtitle">Find out what you need in 5 minutes</div>
<p class="intro">
This quick check helps you see how you are doing across six parts of life.
Answer a few short questions and get ideas for support that fits you.
Based on tools used by doctors and counselors.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon">⏱</span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">🎯</span> Results made for you</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to help</div>
<div class="feature-pill"><span class="icon">🔒</span> Private & safe</div>
</div>
<div class="wheel-container">
<svg viewBox="0 0 280 280" width="280" height="280">
<defs>
<filter id="wheelShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>
</filter>
</defs>
<g filter="url(#wheelShadow)" transform="translate(140,140)">
<circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/>
<path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/>
<path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/>
<path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/>
<path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/>
<path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/>
<circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text>
<text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text>
<g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Physical</text></g>
<g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Emotional</text></g>
<g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Social</text></g>
<g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Daily Life</text></g>
<g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18">⭐</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Purpose</text></g>
<g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growth</text></g>
</g>
</svg>
</div>
<button class="cta-button">
Start Your Assessment <span class="arrow">→</span>
</button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge">👥 For Everyone</div>
</div>
<div class="evidence-footnote">Adapted from WHO-5 Well-Being Index (WHO, 1998/2024) and PROMIS Global-10 (NIH, 2018)</div>
<div class="app-footer">
<div class="footer-inner">
Powered by HELPipedia
<div class="footer-divider"></div>
helpipedia.org
<div class="footer-divider"></div>
SpecialNeeds.help
</div>
</div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════════════════ PAGE 2: QUESTIONS ═══════════════════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots">
<div class="browser-dot red"></div>
<div class="browser-dot yellow"></div>
<div class="browser-dot green"></div>
</div>
<div class="browser-url-bar">
<span class="lock">🔒</span>
<span>specialneeds.help/wellness-assessment/questions</span>
</div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand">
<div class="logo-icon">🧠</div>
<div class="brand-text">
HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span>
</div>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Resources</a>
<a href="#" class="active">Assessment</a>
<a href="#">About</a>
</div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header">
<span class="label">Your Wellness Check</span>
<span class="count">Question 4 of 18</span>
</div>
<div class="progress-bar-track">
<div class="progress-bar-fill" style="width:22%"></div>
</div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 Physical</span>
<span class="dim-badge emotional">💗 Emotional</span>
<span class="dim-badge social">🤝 Social</span>
<span class="dim-badge daily-life">📋 Daily Life</span>
<span class="dim-badge purpose">⭐ Purpose</span>
<span class="dim-badge growth">🌱 Growth</span>
</div>
<!-- Q1: Physical -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 18</span>
<div class="q-dim-label">💪 Physical Wellness</div>
<div class="q-text">In the past month, how often have you felt tired or worn out?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Almost all the time</div>
<div class="option-item selected"><div class="radio-circle"></div>More than half the time</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item"><div class="radio-circle"></div>Once in a while</div>
</div>
</div>
<!-- Q2: Emotional -->
<div class="question-card q-emotional">
<span class="question-number">Q 4 / 18</span>
<div class="q-dim-label">💗 Emotional Wellness</div>
<div class="q-text">In the past two weeks, how often have you felt calm and at ease?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>At no time</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item selected"><div class="radio-circle"></div>More than half the time</div>
<div class="option-item"><div class="radio-circle"></div>All of the time</div>
</div>
</div>
<!-- Q3: Social -->
<div class="question-card q-social">
<span class="question-number">Q 7 / 18</span>
<div class="q-dim-label">🤝 Social Wellness</div>
<div class="q-text">Do you have people in your life you can count on when things get hard?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, I feel alone</div>
<div class="option-item"><div class="radio-circle"></div>I have one or two people</div>
<div class="option-item"><div class="radio-circle"></div>I have a small group</div>
<div class="option-item"><div class="radio-circle"></div>I have a strong network</div>
</div>
</div>
<!-- Q4: Daily Life -->
<div class="question-card q-daily-life">
<span class="question-number">Q 10 / 18</span>
<div class="q-dim-label">📋 Daily Life Wellness</div>
<div class="q-text">How confident are you that you can handle everyday tasks like bills, forms, and schedules?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not confident</div>
<div class="option-item"><div class="radio-circle"></div>A little confident</div>
<div class="option-item selected"><div class="radio-circle"></div>Pretty confident</div>
<div class="option-item"><div class="radio-circle"></div>Very confident</div>
</div>
</div>
<!-- Q5: Purpose — WHO-5 daily life interest -->
<div class="question-card q-purpose">
<span class="question-number">Q 13 / 18</span>
<div class="q-dim-label">⭐ Purpose Wellness</div>
<div class="q-text">In the past two weeks, how often has your daily life been filled with things that interest you?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>At no time</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item selected"><div class="radio-circle"></div>More than half the time</div>
<div class="option-item"><div class="radio-circle"></div>All of the time</div>
</div>
</div>
<!-- Q6: Growth — WHO-5 active/vigorous -->
<div class="question-card q-growth">
<span class="question-number">Q 16 / 18</span>
<div class="q-dim-label">🌱 Growth Wellness</div>
<div class="q-text">In the past two weeks, how often have you felt active and full of energy?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>At no time</div>
<div class="option-item"><div class="radio-circle"></div>Some of the time</div>
<div class="option-item selected"><div class="radio-circle"></div>More than half the time</div>
<div class="option-item"><div class="radio-circle"></div>All of the time</div>
</div>
</div>
</div>
<div class="app-footer">
<div class="footer-inner">
Powered by HELPipedia
<div class="footer-divider"></div>
helpipedia.org
<div class="footer-divider"></div>
SpecialNeeds.help
</div>
</div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════════════════ PAGE 3: RESULTS ═══════════════════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots">
<div class="browser-dot red"></div>
<div class="browser-dot yellow"></div>
<div class="browser-dot green"></div>
</div>
<div class="browser-url-bar">
<span class="lock">🔒</span>
<span>specialneeds.help/wellness-assessment/results</span>
</div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand">
<div class="logo-icon">🧠</div>
<div class="brand-text">
HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span>
</div>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Resources</a>
<a href="#" class="active">Results</a>
<a href="#">About</a>
</div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ Check Complete</div>
<h2>Your Wellness Snapshot</h2>
<p class="summary">Here is what your answers show about how you are doing across the six parts of wellness. Areas with lower scores may need more attention.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Wellness Score</div>
<div class="overall-score">52 <span>/ 100</span></div>
<div class="overall-text">You're doing okay in some areas. A few spots could use a little help.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300">
<defs>
<filter id="shadow2" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/>
</filter>
</defs>
<g transform="translate(150,150)" filter="url(#shadow2)">
<circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/>
<circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/>
<circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/>
<circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/>
<polygon points="0,-39 62.4,-26 38.9,52 0,58.5 -57.1,33 -9.3,-39"
fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/>
<circle cx="0" cy="-39" r="5" fill="var(--orange)"/>
<circle cx="62.4" cy="-26" r="5" fill="var(--yellow)"/>
<circle cx="38.9" cy="52" r="5" fill="var(--red)"/>
<circle cx="0" cy="58.5" r="5" fill="var(--green)"/>
<circle cx="-57.1" cy="33" r="5" fill="var(--yellow)"/>
<circle cx="-9.3" cy="-39" r="5" fill="var(--orange)"/>
<line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/>
<line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/>
<line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/>
<line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/>
<line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/>
<line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/>
<g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">💪 Physical</text></g>
<g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💗 Emotional</text></g>
<g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 Social</text></g>
<g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 Daily Life</text></g>
<g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ Purpose</text></g>
<g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">🌱 Growth</text></g>
<circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/>
<text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">52</text>
<text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text>
</g>
</svg>
</div>
<div class="dimensions-grid">
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">💪</span> Physical</div>
<span class="status-badge moderate">Okay</span>
</div>
<div class="score-bar"><div class="score-fill orange" style="width:30%"></div></div>
<div class="dim-score">Score: 30/100</div>
<div class="dim-desc">You may be running low on energy. Small changes can help you feel stronger.</div>
</div>
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">💗</span> Emotional</div>
<span class="status-badge moderate">Okay</span>
</div>
<div class="score-bar"><div class="score-fill yellow" style="width:55%"></div></div>
<div class="dim-score">Score: 55/100</div>
<div class="dim-desc">You feel calm some of the time. There is room to feel even better.</div>
</div>
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">🤝</span> Social</div>
<span class="status-badge needs-attention">Needs Attention</span>
</div>
<div class="score-bar"><div class="score-fill red" style="width:20%"></div></div>
<div class="dim-score">Score: 20/100</div>
<div class="dim-desc">You may feel alone. Finding your people could make a big difference.</div>
</div>
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">📋</span> Daily Life</div>
<span class="status-badge strong">Strong</span>
</div>
<div class="score-bar"><div class="score-fill green" style="width:80%"></div></div>
<div class="dim-score">Score: 80/100</div>
<div class="dim-desc">You handle day-to-day tasks well. Keep doing what works!</div>
</div>
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">⭐</span> Purpose</div>
<span class="status-badge moderate">Okay</span>
</div>
<div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div>
<div class="dim-score">Score: 50/100</div>
<div class="dim-desc">You have some sense of purpose. Building on what matters to you can help.</div>
</div>
<div class="dim-card">
<div class="dim-card-header">
<div class="dim-card-name"><span class="dim-icon">🌱</span> Growth</div>
<span class="status-badge moderate">Okay</span>
</div>
<div class="score-bar"><div class="score-fill orange" style="width:35%"></div></div>
<div class="dim-score">Score: 35/100</div>
<div class="dim-desc">Learning and trying new things may have taken a back seat lately.</div>
</div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Helpful Resources →</button>
</div>
</div>
<div class="app-footer">
<div class="footer-inner">
Powered by HELPipedia
<div class="footer-divider"></div>
helpipedia.org
<div class="footer-divider"></div>
SpecialNeeds.help
</div>
</div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════════════════ PAGE 4: RESOURCES ═══════════════════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots">
<div class="browser-dot red"></div>
<div class="browser-dot yellow"></div>
<div class="browser-dot green"></div>
</div>
<div class="browser-url-bar">
<span class="lock">🔒</span>
<span>specialneeds.help/wellness-assessment/resources</span>
</div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand">
<div class="logo-icon">🧠</div>
<div class="brand-text">
HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span>
</div>
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Resources</a>
<a href="#" class="active">My Resources</a>
<a href="#">About</a>
</div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle">
<div class="score-num">20</div>
<div class="score-label">/ 100</div>
</div>
<div class="header-text">
<h3>🤝 Social Connection Resources</h3>
<p>Your Social Wellness score shows you may feel alone right now. This is common — and there are real ways to find your people.</p>
<div class="what-this-means">→ Feeling connected to others can help with stress, health, and finding joy in everyday life.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card">
<div class="resource-icon ri1">👥</div>
<div class="resource-name">Local Support Groups</div>
<div class="resource-desc">Find groups near you where people share experiences, swap tips, and build friendships. Many meet in person or online.</div>
<div class="resource-meta">
<span class="resource-tag">Local Directory</span>
<a href="#" class="learn-more-btn">Learn More →</a>
</div>
</div>
<div class="resource-card">
<div class="resource-icon ri2">📱</div>
<div class="resource-name">Online Peer Communities</div>
<div class="resource-desc">Join online spaces where people going through similar things offer support and advice at any time of day.</div>
<div class="resource-meta">
<span class="resource-tag">Online</span>
<a href="#" class="learn-more-btn">Learn More →</a>
</div>
</div>
<div class="resource-card">
<div class="resource-icon ri3">🧑‍🤝‍🧑</div>
<div class="resource-name">Mentor Matching Program</div>
<div class="resource-desc">Get paired with someone who has been where you are. They can listen, share ideas, and walk alongside you.</div>
<div class="resource-meta">
<span class="resource-tag">Program</span>
<a href="#" class="learn-more-btn">Learn More →</a>
</div>
</div>
<div class="resource-card">
<div class="resource-icon ri4">🎉</div>
<div class="resource-name">Community Events Near You</div>
<div class="resource-desc">Discover local events, classes, and meetups where you can connect with people who share your interests.</div>
<div class="resource-meta">
<span class="resource-tag">Events</span>
<a href="#" class="learn-more-btn">Learn More →</a>
</div>
</div>
</div>
<div class="mentor-cta">
<div class="cta-left">
<div class="cta-icon">👩‍👧</div>
<div class="cta-text">
<h4>Connect with a Peer Mentor</h4>
<p>Talk to someone who gets it. Our trained peer mentors offer support, ideas, and a listening ear — at no cost.</p>
</div>
</div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Full Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share Results</a>
<a href="#" class="utility-link">🔄 Take It Again</a>
<a href="#" class="utility-link">📊 See All Areas</a>
</div>
</div>
<div class="app-footer">
<div class="footer-inner">
Powered by HELPipedia
<div class="footer-divider"></div>
helpipedia.org
<div class="footer-divider"></div>
SpecialNeeds.help
</div>
</div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>
mockup-parent-caregiver.html
+270
View File
@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Parent & Caregiver Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
<style>
.audience-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(232,131,92,0.1); color: var(--secondary);
font-size: 10.5px; font-weight: 700; padding: 4px 14px;
border-radius: 16px; margin-top: 8px; letter-spacing: 0.3px;
}
.household-selector {
display: flex; gap: 10px; justify-content: center; margin-bottom: 8px;
}
.household-btn {
padding: 6px 18px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
border: 1.5px solid var(--gray-200); background: white; color: var(--gray-500);
cursor: pointer;
}
.household-btn.selected {
background: var(--secondary); border-color: var(--secondary); color: white;
}
.evidence-footnote {
position: absolute; bottom: 40px; left: 0; right: 0;
text-align: center; font-size: 8px; color: var(--gray-300);
}
</style>
</head>
<body>
<!-- ═══════════ PAGE 1: LANDING ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="page1-hero">
<div class="eyebrow">For Parents & Caregivers</div>
<h1>Wheel of Wellness<br>Caregiver Check</h1>
<div class="subtitle">Take care of yourself so you can keep showing up</div>
<div class="household-selector">
<button class="household-btn selected">🧑‍🧒 Parenting Solo</button>
<button class="household-btn">👨‍👩‍👧 Parenting Together</button>
</div>
<p class="intro">
You spend so much time taking care of others. This quick check helps you
see how YOU are doing — your energy, your feelings, your support system.
Based on tools used by doctors who work with caregivers like you.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon">⏱</span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">🎯</span> Results made for you</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to help</div>
<div class="feature-pill"><span class="icon">🔒</span> Private & safe</div>
</div>
<div class="wheel-container">
<svg viewBox="0 0 280 280" width="280" height="280"><defs><filter id="wS" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/></filter></defs><g filter="url(#wS)" transform="translate(140,140)"><circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/><path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/><path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/><path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/><path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/><path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/><path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/><circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text><text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text><g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Physical</text></g><g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Emotional</text></g><g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Social</text></g><g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Daily Life</text></g><g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18">⭐</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Purpose</text></g><g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growth</text></g></g></svg>
</div>
<button class="cta-button">Start Your Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge">🧑‍🧒 For Parents & Caregivers</div>
</div>
<div class="evidence-footnote">Adapted from Caregiver Well-Being Scale Short Form (Tebb & Berg-Weger, 2016) and CAREPAL-8 (CAREPAL, 2024)</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════ PAGE 2: QUESTIONS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/questions</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header"><span class="label">Your Caregiver Check</span><span class="count">Question 4 of 18</span></div>
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:22%"></div></div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 Physical</span><span class="dim-badge emotional">💗 Emotional</span><span class="dim-badge social">🤝 Social</span><span class="dim-badge daily-life">📋 Daily Life</span><span class="dim-badge purpose">⭐ Purpose</span><span class="dim-badge growth">🌱 Growth</span>
</div>
<!-- Q1: Physical (caregiver self-neglect) -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 18</span>
<div class="q-dim-label">💪 Physical Wellness</div>
<div class="q-text">When did you last see a doctor for YOUR own health check?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Not in the past year</div>
<div class="option-item"><div class="radio-circle"></div>6-12 months ago</div>
<div class="option-item"><div class="radio-circle"></div>In the past 6 months</div>
<div class="option-item"><div class="radio-circle"></div>In the past 3 months</div>
</div>
</div>
<!-- Q2: Emotional (caregiver burden) -->
<div class="question-card q-emotional">
<span class="question-number">Q 4 / 18</span>
<div class="q-dim-label">💗 Emotional Wellness</div>
<div class="q-text">How often do you feel worn out or weighed down by all you have to do?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Almost every day</div>
<div class="option-item selected"><div class="radio-circle"></div>More days than not</div>
<div class="option-item"><div class="radio-circle"></div>Once in a while</div>
<div class="option-item"><div class="radio-circle"></div>Rarely</div>
</div>
</div>
<!-- Q3: Social (isolation) -->
<div class="question-card q-social">
<span class="question-number">Q 7 / 18</span>
<div class="q-dim-label">🤝 Social Wellness</div>
<div class="q-text">Do you have someone who can watch your kids so you can take a break?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, not really</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes, but not often</div>
<div class="option-item"><div class="radio-circle"></div>Yes, when I plan ahead</div>
<div class="option-item"><div class="radio-circle"></div>Yes, I have reliable help</div>
</div>
</div>
<!-- Q4: Daily Life (system navigation) -->
<div class="question-card q-daily-life">
<span class="question-number">Q 10 / 18</span>
<div class="q-dim-label">📋 Daily Life Wellness</div>
<div class="q-text">How confident are you about handling school meetings, doctor visits, and paperwork for your family?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not confident</div>
<div class="option-item"><div class="radio-circle"></div>A little confident</div>
<div class="option-item selected"><div class="radio-circle"></div>Pretty confident</div>
<div class="option-item"><div class="radio-circle"></div>Very confident</div>
</div>
</div>
<!-- Q5: Purpose (meaning beyond caregiving) -->
<div class="question-card q-purpose">
<span class="question-number">Q 13 / 18</span>
<div class="q-dim-label">⭐ Purpose Wellness</div>
<div class="q-text">Do you feel accepted and respected by the professionals who work with your family?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes</div>
<div class="option-item selected"><div class="radio-circle"></div>Most of the time</div>
<div class="option-item"><div class="radio-circle"></div>Yes, always</div>
</div>
</div>
<!-- Q6: Growth (personal development) -->
<div class="question-card q-growth">
<span class="question-number">Q 16 / 18</span>
<div class="q-dim-label">🌱 Growth Wellness</div>
<div class="q-text">In the past month, have you done anything just for you (a class, a hobby, time with a friend)?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>No, not at all</div>
<div class="option-item"><div class="radio-circle"></div>Once or twice</div>
<div class="option-item selected"><div class="radio-circle"></div>A few times</div>
<div class="option-item"><div class="radio-circle"></div>Yes, regularly</div>
</div>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════ PAGE 3: RESULTS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/results</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Results</a><a href="#">About</a></div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ Check Complete</div>
<h2>Your Caregiver Snapshot</h2>
<p class="summary">Here is what your answers show about how you are doing across six parts of wellness. Areas with lower scores may need attention so you can keep showing up for the people you love.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Wellness Score</div>
<div class="overall-score">44 <span>/ 100</span></div>
<div class="overall-text">You give a lot to others. Some parts of your own wellness could use care.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300"><defs><filter id="s2" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/></filter></defs><g transform="translate(150,150)" filter="url(#s2)"><circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/><circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><polygon points="0,-26 56.3,-45.5 43.3,43.33 0,58.5 -57.1,33 -18.6,-46.8" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-26" r="5" fill="var(--red)"/><circle cx="56.3" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="43.3" cy="43.33" r="5" fill="var(--red)"/><circle cx="0" cy="58.5" r="5" fill="var(--green)"/><circle cx="-57.1" cy="33" r="5" fill="var(--yellow)"/><circle cx="-18.6" cy="-46.8" r="5" fill="var(--orange)"/><line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">💪 Physical</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💗 Emotional</text></g><g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 Social</text></g><g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 Daily Life</text></g><g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ Purpose</text></g><g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">🌱 Growth</text></g><circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">44</text><text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text></g></svg>
</div>
<div class="dimensions-grid">
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💪</span> Physical</div><span class="status-badge needs-attention">Needs Attention</span></div><div class="score-bar"><div class="score-fill red" style="width:20%"></div></div><div class="dim-score">Score: 20/100</div><div class="dim-desc">You may be putting your own health last. Even small acts of self-care can give you more energy.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> Emotional</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:35%"></div></div><div class="dim-score">Score: 35/100</div><div class="dim-desc">You carry a lot. Having someone to talk to could help lighten the load.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> Social</div><span class="status-badge needs-attention">Needs Attention</span></div><div class="score-bar"><div class="score-fill red" style="width:25%"></div></div><div class="dim-score">Score: 25/100</div><div class="dim-desc">Getting breaks and having backup matters. Respite and community support can help.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> Daily Life</div><span class="status-badge strong">Strong</span></div><div class="score-bar"><div class="score-fill green" style="width:75%"></div></div><div class="dim-score">Score: 75/100</div><div class="dim-desc">You manage day-to-day systems well. This is a real strength.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">⭐</span> Purpose</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Caring for others gives life meaning. There may be room for YOUR voice too.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growth</div><span class="status-badge moderate">Okay</span></div><div class="score-bar"><div class="score-fill orange" style="width:35%"></div></div><div class="dim-score">Score: 35/100</div><div class="dim-desc">Learning and growing may be on hold. Small steps toward your own goals can boost you.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Helpful Resources →</button>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════ PAGE 4: RESOURCES (Physical focus) ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/parent/resources</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Resources</a><a href="#">About</a></div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle" style="border-color:var(--red);background:var(--red-light)"><div class="score-num" style="color:var(--red)">20</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>💪 Physical Wellness Resources</h3>
<p>Your Physical Wellness score shows you may be putting your own health on hold while caring for others. This is very common — and you deserve support.</p>
<div class="what-this-means">→ Taking care of your own body helps you have the energy to care for your family.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">🏥</div><div class="resource-name">Respite Care Near You</div><div class="resource-desc">Find trained respite care so you can take a break, go to an appointment, or just rest. Many providers accept Medicaid waivers.</div><div class="resource-meta"><span class="resource-tag">Local Directory</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri2">🧘</div><div class="resource-name">Caregiver Health Programs</div><div class="resource-desc">Programs built for caregiver health — fitness classes, stress workshops, and nutrition help that fit a busy life.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri3">👨‍⚕️</div><div class="resource-name">Doctor Finder for Caregivers</div><div class="resource-desc">Search doctors who understand the unique health needs of caregivers. Includes specialists taking new patients.</div><div class="resource-meta"><span class="resource-tag">Directory</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri4">🚴</div><div class="resource-name">Adaptive Recreation</div><div class="resource-desc">Find inclusive fitness and recreation programs for the whole family. Adaptive sports, outdoor fun, and more.</div><div class="resource-meta"><span class="resource-tag">Activities</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
</div>
<div class="mentor-cta">
<div class="cta-left"><div class="cta-icon">👩‍👧</div><div class="cta-text"><h4>Connect with a Parent Mentor</h4><p>Talk to someone who has been there. Our trained parent mentors offer peer support, guidance, and encouragement — at no cost.</p></div></div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Full Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share with Your Care Team</a>
<a href="#" class="utility-link">📂 Save to Vault</a>
<a href="#" class="utility-link">🔄 Take It Again</a>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>
mockup-professional.html
+240
View File
@@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Professional Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
</head>
<body>
<!-- ═══════════ PAGE 1: LANDING ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/professional</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="page1-hero">
<div class="eyebrow">For Professionals</div>
<h1>Wheel of Wellness<br>Professional Check</h1>
<div class="subtitle">You support others every day — check in on yourself</div>
<p class="intro">
As a therapist, counselor, coach, or educator, you carry the weight of your clients' stories.
This quick check helps you see where you are thriving and where compassion fatigue may be taking a toll.
Based on the Professional Quality of Life Scale (ProQOL-5), a widely used tool for measuring
compassion satisfaction, burnout, and secondary traumatic stress in helping professionals.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon">⏱</span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">🎯</span> Professional + personal</div>
<div class="feature-pill"><span class="icon">🔗</span> Supervision & support resources</div>
<div class="feature-pill"><span class="icon">🔒</span> Private & safe</div>
</div>
<div class="wheel-container"><svg viewBox="0 0 280 280" width="280" height="280"><defs><filter id="wS" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/></filter></defs><g filter="url(#wS)" transform="translate(140,140)"><circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/><path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/><path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/><path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/><path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/><path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/><path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/><circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text><text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text><g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Physical</text></g><g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Emotional</text></g><g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Social</text></g><g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Daily Life</text></g><g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18">⭐</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Purpose</text></g><g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growth</text></g></g></svg></div>
<button class="cta-button">Start Your Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Your answers are private</div>
<div class="audience-badge">🩺 For Professionals</div>
</div>
<div class="evidence-footnote">Adapted from Professional Quality of Life Scale (ProQOL-5; Stamm, 2010) and literature on burnout, secondary traumatic stress, and compassion satisfaction</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════ PAGE 2: QUESTIONS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/professional/questions</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Assessment</a><a href="#">About</a></div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header"><span class="label">Your Professional Check</span><span class="count">Question 4 of 18</span></div>
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:22%"></div></div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 Physical</span><span class="dim-badge emotional">💗 Emotional</span><span class="dim-badge social">🤝 Social</span><span class="dim-badge daily-life">📋 Daily Life</span><span class="dim-badge purpose">⭐ Purpose</span><span class="dim-badge growth">🌱 Growth</span>
</div>
<!-- Q1: Physical — ProQOL burnout: exhaustion vocabulary -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 18</span>
<div class="q-dim-label">💪 Physical Wellness</div>
<div class="q-text">How often do you feel physically drained after your workday?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>Almost every day</div>
<div class="option-item"><div class="radio-circle"></div>Several days a week</div>
<div class="option-item"><div class="radio-circle"></div>Once in a while</div>
<div class="option-item"><div class="radio-circle"></div>Rarely</div>
</div>
</div>
<!-- Q2: Emotional — ProQOL compassion satisfaction + fatigue -->
<div class="question-card q-emotional">
<span class="question-number">Q 4 / 18</span>
<div class="q-dim-label">💗 Emotional Wellness</div>
<div class="q-text">I find my work as a helper to be deeply satisfying.</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not true at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes true</div>
<div class="option-item selected"><div class="radio-circle"></div>Often true</div>
<div class="option-item"><div class="radio-circle"></div>Very true</div>
</div>
</div>
<!-- Q3: Social — ProQOL isolation from helper role -->
<div class="question-card q-social">
<span class="question-number">Q 7 / 18</span>
<div class="q-dim-label">🤝 Social Wellness</div>
<div class="q-text">Do you have colleagues or peers you can talk with honestly about difficult cases?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>No, I process alone</div>
<div class="option-item"><div class="radio-circle"></div>Rarely, and not deeply</div>
<div class="option-item"><div class="radio-circle"></div>Yes, occasionally</div>
<div class="option-item"><div class="radio-circle"></div>Yes, regularly</div>
</div>
</div>
<!-- Q4: Daily Life — professional self-care infrastructure -->
<div class="question-card q-daily-life">
<span class="question-number">Q 10 / 18</span>
<div class="q-dim-label">📋 Daily Life Wellness</div>
<div class="q-text">How well do you maintain a boundary between your work and your personal life?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>I struggle with this</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes okay</div>
<div class="option-item"><div class="radio-circle"></div>Usually good</div>
<div class="option-item"><div class="radio-circle"></div>Very clear boundary</div>
</div>
</div>
<!-- Q5: Purpose — ProQOL compassion satisfaction / impact -->
<div class="question-card q-purpose">
<span class="question-number">Q 13 / 18</span>
<div class="q-dim-label">⭐ Purpose Wellness</div>
<div class="q-text">I believe I can make a difference through my work.</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not true at all</div>
<div class="option-item"><div class="radio-circle"></div>Sometimes true</div>
<div class="option-item selected"><div class="radio-circle"></div>Often true</div>
<div class="option-item"><div class="radio-circle"></div>Very true</div>
</div>
</div>
<!-- Q6: Growth — ProQOL professional development -->
<div class="question-card q-growth">
<span class="question-number">Q 16 / 18</span>
<div class="q-dim-label">🌱 Growth Wellness</div>
<div class="q-text">Are you the person you always wanted to be in this work?</div>
<div class="options-grid">
<div class="option-item"><div class="radio-circle"></div>Not at all</div>
<div class="option-item selected"><div class="radio-circle"></div>Getting there</div>
<div class="option-item"><div class="radio-circle"></div>Mostly</div>
<div class="option-item"><div class="radio-circle"></div>Yes, I am</div>
</div>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════ PAGE 3: RESULTS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/professional/results</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">Results</a><a href="#">About</a></div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ Check Complete</div>
<h2>Your Professional Wellness Snapshot</h2>
<p class="summary">Here is a look at how you are doing across six parts of professional and personal wellness. Lower scores may point to areas where burnout or compassion fatigue is showing up — and where support can help.</p>
</div>
<div class="overall-banner">
<div class="overall-label">Overall Professional Wellness Score</div>
<div class="overall-score">46 <span>/ 100</span></div>
<div class="overall-text">You give deeply to this work. Your compassion satisfaction is a strength, but some areas of depletion need attention.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300"><defs><filter id="s2" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/></filter></defs><g transform="translate(150,150)" filter="url(#s2)"><circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/><circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><polygon points="0,-32.5 56.3,-39 43.3,52 0,65 -57.1,38.5 -24.8,-58.5" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-32.5" r="5" fill="var(--red)"/><circle cx="56.3" cy="-39" r="5" fill="var(--orange)"/><circle cx="43.3" cy="52" r="5" fill="var(--red)"/><circle cx="0" cy="65" r="5" fill="var(--green)"/><circle cx="-57.1" cy="38.5" r="5" fill="var(--yellow)"/><circle cx="-24.8" cy="-58.5" r="5" fill="var(--red)"/><line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">💪 Physical</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">💗 Emotional</text></g><g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 Social</text></g><g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 Daily Life</text></g><g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ Purpose</text></g><g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🌱 Growth</text></g><circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">46</text><text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text></g></svg>
</div>
<div class="dimensions-grid">
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💪</span> Physical</div><span class="status-badge needs-attention">Depleted</span></div><div class="score-bar"><div class="score-fill red" style="width:25%"></div></div><div class="dim-score">Score: 25/100</div><div class="dim-desc">Your body is carrying the cost. Physical depletion is a warning sign of burnout.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> Emotional</div><span class="status-badge moderate">Some Fatigue</span></div><div class="score-bar"><div class="score-fill orange" style="width:40%"></div></div><div class="dim-score">Score: 40/100</div><div class="dim-desc">Your compassion satisfaction is present but competing with emotional fatigue.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> Social</div><span class="status-badge needs-attention">Isolated</span></div><div class="score-bar"><div class="score-fill red" style="width:20%"></div></div><div class="dim-score">Score: 20/100</div><div class="dim-desc">Processing alone increases secondary trauma risk. Peer connection is protective.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> Daily Life</div><span class="status-badge strong">Solid Boundaries</span></div><div class="score-bar"><div class="score-fill green" style="width:70%"></div></div><div class="dim-score">Score: 70/100</div><div class="dim-desc">You maintain some work-life boundaries. This is a protective factor worth protecting.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">⭐</span> Purpose</div><span class="status-badge moderate">Connected</span></div><div class="score-bar"><div class="score-fill yellow" style="width:55%"></div></div><div class="dim-score">Score: 55/100</div><div class="dim-desc">You find meaning in this work — that fuel matters. Guard it carefully.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growth</div><span class="status-badge needs-attention">Stalled</span></div><div class="score-bar"><div class="score-fill red" style="width:20%"></div></div><div class="dim-score">Score: 20/100</div><div class="dim-desc">Cease doing all, achieve nothing. Your own learning may need to come back onto the calendar.</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Professional Resources →</button>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════ PAGE 4: PROFESSIONAL RESOURCES ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/professional/resources</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Resources</a><a href="#">About</a></div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle" style="border-color:var(--red);background:var(--red-light)"><div class="score-num" style="color:var(--red)">20</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>🤝 Professional Support Resources</h3>
<p>Your Social score suggests you process difficult client experiences alone. Isolation is a known risk factor for secondary traumatic stress — connecting with peers is one of the strongest protective steps you can take.</p>
<div class="what-this-means">→ Regular peer consultation and clinical supervision are not luxuries — they are ethical imperatives for sustainable practice.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">🧑‍⚕️</div><div class="resource-name">Clinical Supervision Directory</div><div class="resource-desc">Find qualified clinical supervisors in your area who specialize in trauma-informed care, burnout prevention, and specific modalities.</div><div class="resource-meta"><span class="resource-tag">Directory</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri2">🤝</div><div class="resource-name">Peer Consultation Groups</div><div class="resource-desc">Join or start a peer consultation group with other helping professionals. Regular case review reduces isolation and sharpens clinical skills.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri3">🧘</div><div class="resource-name">Clinician Self-Care Retreats</div><div class="resource-desc">Structured retreats designed specifically for helping professionals to recharge, reflect, and reconnect with the meaning in their work.</div><div class="resource-meta"><span class="resource-tag">Retreats</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri4">📚</div><div class="resource-name">CE & Professional Development</div><div class="resource-desc">Find continuing education focused on vicarious trauma, resilience, ethical self-care, and sustainable clinical practice.</div><div class="resource-meta"><span class="resource-tag">Learning</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
</div>
<div class="mentor-cta">
<div class="cta-left"><div class="cta-icon">🩺</div><div class="cta-text"><h4>Find a Professional Mentor</h4><p>Connect with an experienced clinician who can offer guidance, perspective, and support for navigating the challenges of this work — at no cost.</p></div></div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Full Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share with Supervisor</a>
<a href="#" class="utility-link">📂 Save to Vault</a>
<a href="#" class="utility-link">🔄 Retake in 3 Months</a>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>
mockup-special-needs.html
+323
View File
@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wheel of Wellness — Accessible Assessment</title>
<link rel="stylesheet" href="shared-styles.css">
<style>
/* Larger, more accessible typography */
.questions-page {
padding: 16px 32px 40px;
}
.question-card .q-text {
font-size: 17px;
margin-bottom: 16px;
}
.option-item {
font-size: 15px;
padding: 12px 16px;
border-radius: 12px;
}
.radio-circle {
width: 24px; height: 24px;
}
.option-item.selected .radio-circle::after {
width: 10px; height: 10px;
}
.page1-hero .intro {
font-size: 15px;
max-width: 620px;
}
.page1-hero h1 {
font-size: 38px;
}
.page1-hero .subtitle {
font-size: 19px;
}
/* Emoji response scale — larger touch targets */
.emoji-scale {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 4px;
}
.emoji-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 16px;
font-size: 36px;
border: 2.5px solid var(--gray-200);
background: white;
cursor: pointer;
min-width: 80px;
transition: all 0.15s;
}
.emoji-option .emoji-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-500);
}
.emoji-option.selected {
border-color: var(--primary);
background: #E8F5E9;
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.emoji-option.selected .emoji-label {
color: var(--primary-dark);
}
.emoji-scale-hint {
text-align: center;
font-size: 11px;
color: var(--gray-400);
margin-top: 4px;
}
/* Simpler status badges */
.status-badge.keep-it-up { background: var(--green-light); color: var(--green); }
.status-badge.could-be-better { background: var(--yellow-light); color: #F9A825; }
.status-badge.lets-work-on-it { background: var(--red-light); color: var(--red); }
</style>
</head>
<body>
<!-- ═══════════ PAGE 1: LANDING ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/my-life</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Life Check</a><a href="#">About</a></div>
</div>
<div class="page1-hero">
<div class="eyebrow">How Are You Doing?</div>
<h1>Wheel of Wellness<br>My Life Check</h1>
<div class="subtitle">A quick way to see what is going well — and what could be better</div>
<p class="intro">
This is your check-in. There are no right or wrong answers.
Just pick the face or answer that feels right to you.
It takes about 5 minutes, and your answers are private.
Based on tools that help people talk about what matters in their life.
</p>
<div class="feature-pills">
<div class="feature-pill"><span class="icon">⏱</span> Takes ~5 minutes</div>
<div class="feature-pill"><span class="icon">🙂</span> Just pick how you feel</div>
<div class="feature-pill"><span class="icon">🔗</span> Links to help if you want it</div>
<div class="feature-pill"><span class="icon">🔒</span> Private and safe</div>
</div>
<div class="wheel-container"><svg viewBox="0 0 280 280" width="280" height="280"><defs><filter id="wS" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/></filter></defs><g filter="url(#wS)" transform="translate(140,140)"><circle r="120" fill="white" stroke="#E8E8E8" stroke-width="1"/><path d="M 0,-120 A 120,120 0 0,1 103.9,-60 L 0,0 Z" fill="#2E7D6F" opacity="0.85"/><path d="M 103.9,-60 A 120,120 0 0,1 103.9,60 L 0,0 Z" fill="#E8835C" opacity="0.85"/><path d="M 103.9,60 A 120,120 0 0,1 0,120 L 0,0 Z" fill="#5BA4CF" opacity="0.85"/><path d="M 0,120 A 120,120 0 0,1 -103.9,60 L 0,0 Z" fill="#F4B942" opacity="0.85"/><path d="M -103.9,60 A 120,120 0 0,1 -103.9,-60 L 0,0 Z" fill="#9B72CF" opacity="0.85"/><path d="M -103.9,-60 A 120,120 0 0,1 0,-120 L 0,0 Z" fill="#E85C4A" opacity="0.85"/><circle r="40" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="-4" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WHEEL OF</text><text text-anchor="middle" y="10" font-size="9" font-weight="700" fill="#2E7D6F" font-family="Inter,sans-serif">WELLNESS</text><g transform="translate(48,-80)"><text text-anchor="middle" y="0" font-size="18">💪</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">My Body</text></g><g transform="translate(100,0)"><text text-anchor="middle" y="0" font-size="18">💗</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">My Feelings</text></g><g transform="translate(55,72)"><text text-anchor="middle" y="0" font-size="18">🤝</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">My People</text></g><g transform="translate(-55,72)"><text text-anchor="middle" y="0" font-size="18">📋</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">My Day</text></g><g transform="translate(-100,0)"><text text-anchor="middle" y="0" font-size="18">⭐</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">What Matters</text></g><g transform="translate(-48,-80)"><text text-anchor="middle" y="0" font-size="18">🌱</text><text text-anchor="middle" y="16" font-size="10" font-weight="700" fill="white" font-family="Inter,sans-serif">Growing</text></g></g></svg></div>
<button class="cta-button">Start My Check <span class="arrow">→</span></button>
<div class="cta-subtext">Free · No account needed · Just pick what feels right</div>
<div class="audience-badge" style="background:rgba(46,125,111,0.06);color:var(--primary-dark)">🙂 Made for Everyone</div>
</div>
<div class="evidence-footnote">Adapted from Personal Wellbeing Index — Intellectual Disability (PWI-ID; Cummins & Lau, 2005) and accessible survey design research</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 1 of 4</div>
</div>
<!-- ═══════════ PAGE 2: QUESTIONS (Emoji Scales) ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/my-life/questions</span></div>
</div农耕 <div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Life Check</a><a href="#">About</a></div>
</div>
<div class="questions-page">
<div class="progress-section">
<div class="progress-header"><span class="label">Your Life Check</span><span class="count">Question 4 of 12</span></div>
<div class="progress-bar-track"><div class="progress-bar-fill" style="width:33%"></div></div>
</div>
<div class="dimension-indicator">
<span class="dim-badge physical">💪 My Body</span><span class="dim-badge emotional">💗 My Feelings</span><span class="dim-badge social">🤝 My People</span><span class="dim-badge daily-life">📋 My Day</span><span class="dim-badge purpose">⭐ What Matters</span><span class="dim-badge growth">🌱 Growing</span>
</div>
<!-- Q1: Physical — PWI-ID health domain -->
<div class="question-card q-physical">
<span class="question-number">Q 1 / 12</span>
<div class="q-dim-label">💪 My Body</div>
<div class="q-text">How do you feel about your health?</div>
<div class="emoji-scale">
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
</div>
</div>
<!-- Q2: Emotional — PWI-ID emotional wellbeing -->
<div class="question-card q-emotional">
<span class="question-number">Q 3 / 12</span>
<div class="q-dim-label">💗 My Feelings</div>
<div class="q-text">How happy do you feel most of the time?</div>
<div class="emoji-scale">
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Happy</span></div>
<div class="emoji-option selected"><span>😐</span><span class="emoji-label">Okay</span></div>
<div class="emoji-option"><span>🙂</span><span class="emoji-label">Pretty Happy</span></div>
<div class="emoji-option"><span>😊</span><span class="emoji-label">Happy</span></div>
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Happy</span></div>
</div>
</div>
<!-- Q3: Social — PWI-ID community/relationships -->
<div class="question-card q-social">
<span class="question-number">Q 5 / 12</span>
<div class="q-dim-label">🤝 My People</div>
<div class="q-text">How do you feel about the people in your life?</div>
<div class="emoji-scale">
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
<div class="emoji-option selected"><span>😐</span><span class="emoji-label">Okay</span></div>
<div class="emoji-option"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
</div>
</div>
<!-- Q4: Daily Life — PWI-ID safety/future security -->
<div class="question-card q-daily-life">
<span class="question-number">Q 7 / 12</span>
<div class="q-dim-label">📋 My Day</div>
<div class="q-text">Do you have the help you need for everyday things?</div>
<div class="options-grid">
<div class="option-item selected"><div class="radio-circle"></div>I need more help</div>
<div class="option-item"><div class="radio-circle"></div>I get some help</div>
<div class="option-item"><div class="radio-circle"></div>I get enough help</div>
<div class="option-item"><div class="radio-circle"></div>I get plenty of help</div>
</div>
</div>
<!-- Q5: Purpose — PWI-ID achievement/life satisfaction -->
<div class="question-card q-purpose">
<span class="question-number">Q 9 / 12</span>
<div class="q-dim-label">⭐ What Matters</div>
<div class="q-text">How do you feel about the things you do or make?</div>
<div class="emoji-scale">
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
</div>
</div>
<!-- Q6: Growth — PWI-ID future security -->
<div class="question-card q-growth">
<span class="question-number">Q 11 / 12</span>
<div class="q-dim-label">🌱 Growing</div>
<div class="q-text">How do you feel about what will happen to you later in your life?</div>
<div class="emoji-scale">
<div class="emoji-option"><span>😟</span><span class="emoji-label">Not Good</span></div>
<div class="emoji-option"><span>😐</span><span class="emoji-label">Okay</span></div>
<div class="emoji-option selected"><span>🙂</span><span class="emoji-label">Pretty Good</span></div>
<div class="emoji-option"><span>😊</span><span class="emoji-label">Good</span></div>
<div class="emoji-option"><span>😄</span><span class="emoji-label">Very Good</span></div>
</div>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 2 of 4</div>
</div>
<!-- ═══════════ PAGE 3: RESULTS ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/my-life/results</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Results</a><a href="#">About</a></div>
</div>
<div class="results-page">
<div class="results-header">
<div class="completion-badge">✓ All Done!</div>
<h2>Your Life Snapshot</h2>
<p class="summary">Here is a picture of how you are doing. The areas with lower scores show where you might want more support.</p>
</div>
<div class="overall-banner">
<div class="overall-label">How You Are Doing Overall</div>
<div class="overall-score">58 <span>/ 100</span></div>
<div class="overall-text">Some things are going well. A few things could be better — and that is okay.</div>
</div>
<div class="results-body">
<div class="results-wheel">
<svg viewBox="0 0 300 300" width="300" height="300"><defs><filter id="s2" x="-10%" y="-10%" width="120%" height="120%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.1"/></filter></defs><g transform="translate(150,150)" filter="url(#s2)"><circle r="130" fill="white" stroke="#E8E8E8" stroke-width="1"/><circle r="32.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="65" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="97.5" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><circle r="130" fill="none" stroke="#F0F0F0" stroke-width="0.5" stroke-dasharray="3,3"/><polygon points="0,-45.5 56.3,-32.5 43.3,52 0,65 -57.1,33 -12.4,-45.5" fill="rgba(46,125,111,0.15)" stroke="var(--primary)" stroke-width="2"/><circle cx="0" cy="-45.5" r="5" fill="var(--yellow)"/><circle cx="56.3" cy="-32.5" r="5" fill="var(--orange)"/><circle cx="43.3" cy="52" r="5" fill="var(--red)"/><circle cx="0" cy="65" r="5" fill="var(--green)"/><circle cx="-57.1" cy="33" r="5" fill="var(--yellow)"/><circle cx="-12.4" cy="-45.5" r="5" fill="var(--yellow)"/><line x1="0" y1="0" x2="0" y2="-130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="0" y2="130" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="65" stroke="#E8E8E8" stroke-width="0.5"/><line x1="0" y1="0" x2="-112.6" y2="-65" stroke="#E8E8E8" stroke-width="0.5"/><g><rect x="-44" y="-155" width="88" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="0" y="-141" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">💪 My Body</text></g><g><rect x="72" y="-85" width="88" height="22" rx="11" fill="var(--orange-light)" stroke="var(--orange)" stroke-width="1"/><text x="116" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="var(--orange)" font-family="Inter,sans-serif">💗 My Feelings</text></g><g><rect x="72" y="63" width="76" height="22" rx="11" fill="var(--red-light)" stroke="var(--red)" stroke-width="1"/><text x="110" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="var(--red)" font-family="Inter,sans-serif">🤝 My People</text></g><g><rect x="-44" y="133" width="88" height="22" rx="11" fill="var(--green-light)" stroke="var(--green)" stroke-width="1"/><text x="0" y="147" text-anchor="middle" font-size="10" font-weight="700" fill="var(--green)" font-family="Inter,sans-serif">📋 My Day</text></g><g><rect x="-160" y="63" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="77" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">⭐ What Matters</text></g><g><rect x="-160" y="-85" width="80" height="22" rx="11" fill="var(--yellow-light)" stroke="var(--yellow)" stroke-width="1"/><text x="-120" y="-71" text-anchor="middle" font-size="10" font-weight="700" fill="#F9A825" font-family="Inter,sans-serif">🌱 Growing</text></g><circle r="18" fill="white" stroke="#E8E8E8" stroke-width="1"/><text text-anchor="middle" y="1" font-size="10" font-weight="800" fill="var(--primary)" font-family="Inter,sans-serif">58</text><text text-anchor="middle" y="11" font-size="6" fill="var(--gray-400)" font-family="Inter,sans-serif">/100</text></g></svg>
</div>
<div class="dimensions-grid">
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💪</span> My Body</div><span class="status-badge could-be-better">Could Be Better</span></div><div class="score-bar"><div class="score-fill yellow" style="width:55%"></div></div><div class="dim-score">Score: 55/100</div><div class="dim-desc">You feel okay about your health. A small change could make it even better.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">💗</span> My Feelings</div><span class="status-badge could-be-better">Could Be Better</span></div><div class="score-bar"><div class="score-fill orange" style="width:40%"></div></div><div class="dim-score">Score: 40/100</div><div class="dim-desc">You are okay but not as happy as you could be. Support can help.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🤝</span> My People</div><span class="status-badge lets-work-on-it">Let's Work On It</span></div><div class="score-bar"><div class="score-fill red" style="width:25%"></div></div><div class="dim-score">Score: 25/100</div><div class="dim-desc">Finding people who get you can make a big difference in how you feel.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">📋</span> My Day</div><span class="status-badge keep-it-up">Keep It Up!</span></div><div class="score-bar"><div class="score-fill green" style="width:80%"></div></div><div class="dim-score">Score: 80/100</div><div class="dim-desc">You have good support for daily life. That is a real strength!</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">⭐</span> What Matters</div><span class="status-badge could-be-better">Could Be Better</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">You have some things that matter to you. Building on those can help.</div></div>
<div class="dim-card"><div class="dim-card-header"><div class="dim-card-name"><span class="dim-icon">🌱</span> Growing</div><span class="status-badge could-be-better">Could Be Better</span></div><div class="score-bar"><div class="score-fill yellow" style="width:50%"></div></div><div class="dim-score">Score: 50/100</div><div class="dim-desc">Learning and trying new things may be on hold. What would you like to try?</div></div>
</div>
</div>
<div class="results-actions">
<button class="btn-outline">📥 Download Results</button>
<button class="btn-primary">See Helpful Resources →</button>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 3 of 4</div>
</div>
<!-- ═══════════ PAGE 4: RESOURCES ═══════════ -->
<div class="page">
<div class="browser-frame">
<div class="browser-dots"><div class="browser-dot red"></div><div class="browser-dot yellow"></div><div class="browser-dot green"></div></div>
<div class="browser-url-bar"><span class="lock">🔒</span><span>specialneeds.help/wellness/my-life/resources</span></div>
</div>
<div class="app-content">
<div class="app-header">
<div class="brand"><div class="logo-icon">🧠</div><div class="brand-text">HELPipedia <span class="divider">|</span> <span class="sub">SpecialNeeds.help</span></div></div>
<div class="nav-links"><a href="#">Home</a><a href="#">Resources</a><a href="#" class="active">My Resources</a><a href="#">About</a></div>
</div>
<div class="resources-page">
<div class="resources-header">
<div class="score-circle" style="border-color:var(--red);background:var(--red-light)"><div class="score-num" style="color:var(--red)">25</div><div class="score-label" style="color:var(--red)">/ 100</div></div>
<div class="header-text">
<h3>🤝 Finding Your People</h3>
<p>Your People score shows you may feel cut off. Many people feel this way — and there are real ways to find your people.</p>
<div class="what-this-means">→ Being around people who get you can make life feel a lot better.</div>
</div>
</div>
<div class="resources-list">
<div class="resource-card"><div class="resource-icon ri1">👥</div><div class="resource-name">Groups Near You</div><div class="resource-desc">Find groups where people share interests and do fun things together. Many meet in person or online.</div><div class="resource-meta"><span class="resource-tag">Local Groups</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri2">🎨</div><div class="resource-name">Arts & Fun Programs</div><div class="resource-desc">Join art, music, dance, or other creative programs. A great way to meet people while doing something you enjoy.</div><div class="resource-meta"><span class="resource-tag">Programs</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri3">🧑‍🤝‍🧑</div><div class="resource-name">Peer Mentors</div><div class="resource-desc">Get matched with someone who gets what you are going through. They can listen, share ideas, and be a friend.</div><div class="resource-meta"><span class="resource-tag">Mentoring</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
<div class="resource-card"><div class="resource-icon ri4">🎉</div><div class="resource-name">Fun Events Near You</div><div class="resource-desc">Find local events, classes, and meetups where you can have fun and meet new people.</div><div class="resource-meta"><span class="resource-tag">Events</span><a href="#" class="learn-more-btn">Learn More →</a></div></div>
</div>
<div class="mentor-cta">
<div class="cta-left"><div class="cta-icon">👋</div><div class="cta-text"><h4>Talk to Someone Who Gets It</h4><p>Our trained peer mentors are here to listen, share ideas, and help you find your way — at no cost.</p></div></div>
<a href="#" class="cta-btn">Get Connected →</a>
</div>
<div class="utility-bar">
<a href="#" class="utility-link">📥 Download Results (PDF)</a>
<a href="#" class="utility-link">🔗 Share with Your Team</a>
<a href="#" class="utility-link">📂 Save to My Vault</a>
<a href="#" class="utility-link">🔄 Take It Again Later</a>
</div>
</div>
<div class="app-footer"><div class="footer-inner">Powered by HELPipedia<div class="footer-divider"></div>helpipedia.org<div class="footer-divider"></div>SpecialNeeds.help</div></div>
</div>
<div class="screen-indicator">Screen 4 of 4</div>
</div>
</body>
</html>
mockup.html
+1513
View File
File diff suppressed because it is too large Load Diff
onepager.html
+266
View File
@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
@page {
size: 8.5in 11in;
margin: 0;
}
body {
font-family: 'Inter', sans-serif;
color: #2D3436;
width: 8.5in;
height: 11in;
padding: 0.6in 0.65in 0.5in;
background: #fff;
font-size: 10px;
line-height: 1.45;
}
/* ── Header ─────────────────────────────── */
.header {
background: linear-gradient(135deg, #2E7D6F, #3A9A8A);
color: #fff;
padding: 18px 24px;
border-radius: 8px;
text-align: center;
margin-bottom: 14px;
}
.header h1 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.3px;
margin-bottom: 4px;
}
.header .sub {
font-size: 9.5px;
opacity: 0.9;
}
/* ── Section Labels ─────────────────────── */
.label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 5px;
}
.label.teal { color: #2E7D6F; }
.label.coral { color: #E8835C; }
.problem-solution {
margin-bottom: 12px;
}
.problem-solution p {
font-size: 10px;
line-height: 1.5;
margin-bottom: 6px;
}
/* ── Dimensions Table ───────────────────── */
.dim-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 12px;
font-size: 9px;
}
.dim-table th {
background: #2E7D6F;
color: #fff;
padding: 6px 10px;
text-align: left;
font-weight: 600;
font-size: 8.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dim-table td {
padding: 5px 10px;
border-bottom: 1px solid #e8e8e8;
vertical-align: top;
}
.dim-table tr:nth-child(even) td {
background: #f7f7f7;
}
.dim-table td:first-child {
font-weight: 700;
color: #2E7D6F;
white-space: nowrap;
width: 80px;
}
.dim-table td:nth-child(2) {
width: 38%;
}
/* ── Two-Column Layout ──────────────────── */
.columns {
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.col-left, .col-right {
flex: 1;
}
.bullet-list {
list-style: none;
padding: 0;
}
.bullet-list li {
font-size: 9px;
padding: 2px 0;
padding-left: 14px;
position: relative;
line-height: 1.4;
}
.bullet-list li::before {
content: '▸';
position: absolute;
left: 0;
color: #2E7D6F;
font-weight: 700;
}
.bullet-list li strong {
color: #2D3436;
}
/* ── Phase list ─────────────────────────── */
.phase-list {
list-style: none;
padding: 0;
}
.phase-list li {
font-size: 9px;
padding: 3px 0;
line-height: 1.4;
}
.phase-list .phase-label {
font-weight: 700;
color: #2D3436;
}
.phase-name {
font-weight: 600;
color: #E8835C;
}
/* ── The Ask Box ────────────────────────── */
.ask-box {
background: #FDF0E8;
border-radius: 6px;
padding: 10px 16px;
margin-top: 10px;
}
.ask-box .ask-title {
font-size: 11px;
font-weight: 700;
color: #E8835C;
margin-bottom: 4px;
}
.ask-list {
list-style: none;
padding: 0;
columns: 2;
column-gap: 16px;
}
.ask-list li {
font-size: 9px;
padding: 2px 0;
padding-left: 18px;
position: relative;
line-height: 1.4;
break-inside: avoid;
}
.ask-list li .num {
position: absolute;
left: 0;
font-weight: 700;
color: #E8835C;
}
/* ── Footer ─────────────────────────────── */
.footer {
text-align: center;
font-size: 7.5px;
color: #aaa;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>Wheel of Wellness Resource Connector</h1>
<div class="sub">A Proposal for HELPipedia / SpecialNeeds.help &nbsp;|&nbsp; Kayla Newkirk, M.S.Ed., MHC-LP &nbsp;|&nbsp; Week of June 16, 2026</div>
</div>
<div class="problem-solution">
<p><span class="label coral">The Problem</span><br>
Families navigating disability and caregiving often do not know what they need until someone asks the right questions. A directory is powerful when you know what to search for. An assessment tool is powerful when you do not.</p>
<p><span class="label coral">The Solution</span><br>
An interactive, web-based <strong>Wheel of Wellness Assessment</strong> that asks caregivers and individuals with disabilities targeted questions across six wellness dimensions, scores each area, and automatically maps their needs to resources in the SpecialNeeds.help directory. Users arrive unsure of what they need. They leave with a personalized resource plan.</p>
</div>
<div class="label teal">The Six Dimensions</div>
<table class="dim-table">
<tr>
<th>Dimension</th>
<th>Focus</th>
<th>Resource Connections</th>
</tr>
<tr>
<td>Physical</td>
<td>Rest, movement, nutrition, medical care</td>
<td>Respite care, medical providers, adaptive recreation</td>
</tr>
<tr>
<td>Emotional</td>
<td>Naming feelings, coping, support</td>
<td>Counseling referrals, caregiver support groups, crisis lines</td>
</tr>
<tr>
<td>Social</td>
<td>Connection, understanding, community</td>
<td>Parent mentors, local support networks, peer matching</td>
</tr>
<tr>
<td>Practical</td>
<td>Finances, advocacy, schedules, systems</td>
<td>IEP advocates, legal aid, benefits navigation</td>
</tr>
<tr>
<td>Purpose</td>
<td>Meaning, identity, values, hope</td>
<td>Faith communities, disability-affirming organizations</td>
</tr>
<tr>
<td>Growth</td>
<td>Learning, creativity, becoming</td>
<td>Training, conferences, podcasts, creative programs</td>
</tr>
</table>
<div class="label teal">Why It Matters</div>
<ul class="bullet-list">
<li><strong>Mission alignment:</strong> Bridges the gap between knowledge and opportunity</li>
<li><strong>Differentiator:</strong> No other disability directory offers a clinically grounded needs assessment</li>
<li><strong>Engagement:</strong> Personalized entry point increases return visits and directory use</li>
<li><strong>Data insight:</strong> Anonymous aggregate data reveals community needs for content and fundraising</li>
<li><strong>Scalable:</strong> Works for any new resource area added to SpecialNeeds.help</li>
<li><strong>Measurable:</strong> Completion rates, click-through, referrals all trackable</li>
</ul>
<div class="footer">
Kayla Newkirk, M.S.Ed., MHC-LP &nbsp;|&nbsp; Doctoral Candidate, Counselor Education & Supervision, Waynesburg University &nbsp;|&nbsp; kcordone30@gmail.com
</div>
</body>
</html>
pdfs/mockup-family-member.pdf
BIN
View File
Binary file not shown.
pdfs/mockup-generalized.pdf
BIN
View File
Binary file not shown.
pdfs/mockup-parent-caregiver.pdf
BIN
View File
Binary file not shown.
pdfs/mockup-professional.pdf
BIN
View File
Binary file not shown.
pdfs/mockup-special-needs.pdf
BIN
View File
Binary file not shown.
pdfs/mockup.pdf
BIN
View File
Binary file not shown.
shared-styles.css
+797
View File
@@ -0,0 +1,797 @@
/* ===================================================================
Wheel of Wellness — Shared Design System
Based on HELPipedia / SpecialNeeds.help brand identity
"Practical" renamed to "Daily Life" per stakeholder feedback (4th-grade reading level)
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root {
--primary: #2E7D6F;
--primary-dark: #1F5C52;
--primary-light: #3A9A88;
--secondary: #E8835C;
--secondary-light: #F0A080;
--cream: #FFF8F0;
--charcoal: #2D3436;
--gray-100: #F7F7F7;
--gray-200: #E8E8E8;
--gray-300: #D1D1D1;
--gray-400: #9E9E9E;
--gray-500: #6B6B6B;
--green: #4CAF50;
--green-light: #E8F5E9;
--yellow: #FFC107;
--yellow-light: #FFF8E1;
--orange: #FF9800;
--orange-light: #FFF3E0;
--red: #E85C4A;
--red-light: #FFEBEE;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: #E8E0D8;
color: var(--charcoal);
-webkit-font-smoothing: antialiased;
}
.page {
width: 1056px;
height: 816px;
background: var(--cream);
margin: 30px auto;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
border-radius: 4px;
page-break-after: always;
page-break-inside: avoid;
}
/* ── Browser Chrome Frame ──────────────────── */
.browser-frame {
position: absolute;
top: 0; left: 0; right: 0;
height: 84px;
background: #E8E0D8;
z-index: 10;
border-bottom: 1px solid #D0C8C0;
}
.browser-dots {
display: flex;
gap: 7px;
padding: 12px 16px;
}
.browser-dot {
width: 12px; height: 12px;
border-radius: 50%;
}
.browser-dot.red { background: #FF5F56; }
.browser-dot.yellow { background: #FFBD2E; }
.browser-dot.green { background: #27CA40; }
.browser-url-bar {
margin: 0 16px;
background: white;
border-radius: 6px;
padding: 6px 14px;
font-size: 12px;
color: var(--gray-400);
border: 1px solid #D0C8C0;
display: flex;
align-items: center;
gap: 8px;
}
.browser-url-bar .lock { color: var(--primary); font-size: 11px; }
.browser-url-bar span { color: var(--charcoal); font-weight: 500; }
/* ── App Content ────────────────────────────── */
.app-content {
position: absolute;
top: 84px;
left: 0; right: 0; bottom: 0;
overflow: hidden;
background: var(--cream);
}
.app-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: 10px 32px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
}
.app-header .brand { display: flex; align-items: center; gap: 10px; }
.app-header .logo-icon {
width: 32px; height: 32px;
background: rgba(255,255,255,0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.app-header .brand-text {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
}
.app-header .brand-text .divider {
opacity: 0.5;
margin: 0 6px;
font-weight: 400;
}
.app-header .brand-text .sub {
font-weight: 400;
opacity: 0.85;
}
.app-header .nav-links {
display: flex;
gap: 20px;
font-size: 13px;
font-weight: 500;
opacity: 0.9;
}
.app-header .nav-links a {
color: white;
text-decoration: none;
padding: 4px 0;
}
.app-header .nav-links a.active {
border-bottom: 2px solid rgba(255,255,255,0.7);
}
.app-footer {
position: absolute;
bottom: 0; left: 0; right: 0;
background: var(--primary-dark);
color: rgba(255,255,255,0.7);
text-align: center;
padding: 10px 20px;
font-size: 11px;
letter-spacing: 0.3px;
}
.app-footer .footer-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.app-footer .footer-divider {
width: 4px; height: 4px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
}
/* ── Landing Page (Hero) ───────────────────── */
.page1-hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px 60px 50px;
height: 100%;
}
.page1-hero .eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--secondary);
margin-bottom: 8px;
}
.page1-hero h1 {
font-size: 36px;
font-weight: 800;
color: var(--primary-dark);
line-height: 1.15;
margin-bottom: 10px;
}
.page1-hero .subtitle {
font-size: 17px;
color: var(--secondary);
font-weight: 600;
margin-bottom: 14px;
}
.page1-hero .intro {
font-size: 13.5px;
color: var(--gray-500);
line-height: 1.6;
max-width: 560px;
margin-bottom: 28px;
}
.wheel-container {
position: relative;
width: 280px;
height: 280px;
margin-bottom: 28px;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--secondary) 0%, #D06A42 100%);
color: white;
font-size: 16px;
font-weight: 700;
padding: 14px 36px;
border-radius: 50px;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(232,131,92,0.35);
text-decoration: none;
letter-spacing: 0.3px;
}
.cta-button:hover { transform: translateY(-1px); }
.cta-button .arrow { font-size: 20px; }
.cta-subtext {
font-size: 11px;
color: var(--gray-400);
margin-top: 10px;
}
.feature-pills {
display: flex;
gap: 12px;
margin-bottom: 30px;
}
.feature-pill {
display: flex;
align-items: center;
gap: 6px;
background: white;
border: 1px solid var(--gray-200);
border-radius: 20px;
padding: 6px 14px;
font-size: 11.5px;
color: var(--gray-500);
font-weight: 500;
box-shadow: var(--shadow-sm);
}
.feature-pill .icon { font-size: 14px; }
/* ── Questions Page ────────────────────────── */
.questions-page {
padding: 20px 40px 50px;
height: 100%;
overflow: hidden;
}
.progress-section { margin-bottom: 16px; }
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.progress-header .label {
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.progress-header .count {
font-size: 12px;
color: var(--gray-400);
font-weight: 500;
}
.progress-bar-track {
width: 100%;
height: 8px;
background: var(--gray-200);
border-radius: 4px;
overflow: hidden;
}
.progress-bar-fill {
width: 15%;
height: 100%;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: 4px;
}
.dimension-indicator {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.dim-badge {
font-size: 10.5px;
font-weight: 600;
padding: 4px 12px;
border-radius: 12px;
letter-spacing: 0.3px;
}
.dim-badge.physical { background: #E3F2FD; color: #1565C0; }
.dim-badge.emotional { background: #F3E5F5; color: #7B1FA2; }
.dim-badge.social { background: #E8F5E9; color: #2E7D32; }
.dim-badge.daily-life { background: #FFF3E0; color: #E65100; }
.dim-badge.purpose { background: #FFF8E1; color: #F57F17; }
.dim-badge.growth { background: #FFEBEE; color: #C62828; }
/* Question cards */
.question-card {
background: white;
border-radius: 12px;
padding: 18px 24px;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
position: relative;
}
.question-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 12px 0 0 12px;
}
.question-card.q-physical::before { background: #1565C0; }
.question-card.q-emotional::before { background: #7B1FA2; }
.question-card.q-social::before { background: #2E7D32; }
.question-card.q-daily-life::before { background: #E65100; }
.question-card.q-purpose::before { background: #F57F17; }
.question-card.q-growth::before { background: #C62828; }
.question-card .q-dim-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 6px;
}
.question-card.q-physical .q-dim-label { color: #1565C0; }
.question-card.q-emotional .q-dim-label { color: #7B1FA2; }
.question-card.q-social .q-dim-label { color: #2E7D32; }
.question-card.q-daily-life .q-dim-label { color: #E65100; }
.question-card.q-purpose .q-dim-label { color: #F57F17; }
.question-card.q-growth .q-dim-label { color: #C62828; }
.question-card .q-text {
font-size: 14.5px;
font-weight: 600;
color: var(--charcoal);
margin-bottom: 12px;
line-height: 1.4;
}
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.option-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--gray-100);
border: 1.5px solid var(--gray-200);
border-radius: 8px;
font-size: 12.5px;
color: var(--gray-500);
transition: all 0.15s;
}
.option-item.selected {
background: #E8F5E9;
border-color: var(--primary);
color: var(--primary-dark);
}
.radio-circle {
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid var(--gray-300);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.option-item.selected .radio-circle {
border-color: var(--primary);
background: var(--primary);
}
.option-item.selected .radio-circle::after {
content: '';
width: 8px; height: 8px;
background: white;
border-radius: 50%;
}
.question-number {
position: absolute;
top: 18px;
right: 20px;
font-size: 11px;
color: var(--gray-300);
font-weight: 600;
}
/* ── Results Page ──────────────────────────── */
.results-page {
padding: 20px 40px 50px;
height: 100%;
overflow: hidden;
}
.results-header {
text-align: center;
margin-bottom: 20px;
}
.results-header .completion-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--green-light);
color: var(--green);
font-size: 11px;
font-weight: 600;
padding: 4px 14px;
border-radius: 16px;
margin-bottom: 8px;
}
.results-header h2 {
font-size: 24px;
font-weight: 800;
color: var(--primary-dark);
margin-bottom: 4px;
}
.results-header .summary {
font-size: 13px;
color: var(--gray-500);
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
.results-body {
display: flex;
gap: 30px;
align-items: flex-start;
}
.results-wheel {
flex-shrink: 0;
width: 300px;
height: 300px;
position: relative;
}
.dimensions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
flex: 1;
}
.dim-card {
background: white;
border-radius: 10px;
padding: 14px 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.dim-card .dim-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.dim-card .dim-card-name {
font-size: 12.5px;
font-weight: 700;
color: var(--charcoal);
display: flex;
align-items: center;
gap: 6px;
}
.dim-card .dim-card-name .dim-icon { font-size: 16px; }
.status-badge {
font-size: 9.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 10px;
letter-spacing: 0.3px;
}
.status-badge.strong { background: var(--green-light); color: var(--green); }
.status-badge.moderate { background: var(--yellow-light); color: #F9A825; }
.status-badge.needs-attention { background: var(--red-light); color: var(--red); }
.dim-card .score-bar {
height: 6px;
background: var(--gray-200);
border-radius: 3px;
margin-bottom: 6px;
overflow: hidden;
}
.dim-card .score-fill { height: 100%; border-radius: 3px; }
.dim-card .score-fill.green { background: var(--green); }
.dim-card .score-fill.yellow { background: var(--yellow); }
.dim-card .score-fill.orange { background: var(--orange); }
.dim-card .score-fill.red { background: var(--red); }
.dim-card .dim-score {
font-size: 11px;
color: var(--gray-400);
margin-bottom: 4px;
font-weight: 500;
}
.dim-card .dim-desc {
font-size: 11px;
color: var(--gray-500);
line-height: 1.4;
}
/* Overall score banner */
.overall-banner {
background: white;
border-radius: 12px;
padding: 14px 20px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
text-align: center;
margin-bottom: 16px;
}
.overall-banner .overall-label {
font-size: 11px;
font-weight: 600;
color: var(--gray-400);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 4px;
}
.overall-banner .overall-score {
font-size: 28px;
font-weight: 800;
color: var(--primary);
}
.overall-banner .overall-score span {
font-size: 14px;
color: var(--gray-400);
font-weight: 500;
}
.overall-banner .overall-text {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
.results-actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 14px;
}
.btn-outline {
padding: 10px 24px;
border: 2px solid var(--primary);
background: transparent;
color: var(--primary);
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
}
.btn-primary {
padding: 10px 24px;
background: var(--primary);
color: white;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
text-decoration: none;
}
/* ── Resources Page ────────────────────────── */
.resources-page {
padding: 20px 40px 50px;
height: 100%;
overflow: hidden;
}
.resources-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 16px;
background: white;
border-radius: 12px;
padding: 18px 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.resources-header .score-circle {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--red-light);
border: 3px solid var(--red);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.resources-header .score-circle .score-num {
font-size: 22px;
font-weight: 800;
color: var(--red);
line-height: 1;
}
.resources-header .score-circle .score-label {
font-size: 8px;
color: var(--red);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.resources-header .header-text h3 {
font-size: 20px;
font-weight: 800;
color: var(--charcoal);
margin-bottom: 4px;
}
.resources-header .header-text p {
font-size: 13px;
color: var(--gray-500);
line-height: 1.5;
}
.resources-header .header-text .what-this-means {
font-size: 12px;
color: var(--secondary);
font-weight: 600;
margin-top: 4px;
}
.resources-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
.resource-card {
background: white;
border-radius: 10px;
padding: 16px 18px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
display: flex;
flex-direction: column;
}
.resource-card .resource-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 10px;
}
.resource-card .resource-icon.ri1 { background: #E3F2FD; }
.resource-card .resource-icon.ri2 { background: #F3E5F5; }
.resource-card .resource-icon.ri3 { background: #E8F5E9; }
.resource-card .resource-icon.ri4 { background: #FFF3E0; }
.resource-card .resource-name {
font-size: 14px;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 4px;
}
.resource-card .resource-desc {
font-size: 12px;
color: var(--gray-500);
line-height: 1.5;
margin-bottom: 12px;
flex: 1;
}
.resource-card .resource-meta {
display: flex;
align-items: center;
justify-content: space-between;
}
.resource-card .resource-tag {
font-size: 10px;
font-weight: 600;
color: var(--primary);
background: rgba(46,125,111,0.08);
padding: 3px 10px;
border-radius: 10px;
}
.learn-more-btn {
font-size: 12px;
font-weight: 600;
color: var(--primary);
background: none;
border: none;
cursor: pointer;
padding: 6px 16px;
border-radius: 6px;
transition: background 0.15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.learn-more-btn:hover { background: rgba(46,125,111,0.06); }
.mentor-cta {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: 12px;
padding: 18px 28px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
margin-bottom: 12px;
}
.mentor-cta .cta-left {
display: flex;
align-items: center;
gap: 14px;
}
.mentor-cta .cta-icon {
width: 44px; height: 44px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.mentor-cta .cta-text h4 {
font-size: 15px;
font-weight: 700;
margin-bottom: 2px;
}
.mentor-cta .cta-text p {
font-size: 12px;
opacity: 0.8;
}
.mentor-cta .cta-btn {
background: white;
color: var(--primary-dark);
padding: 10px 22px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
text-decoration: none;
}
.utility-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 8px 0;
}
.utility-link {
font-size: 12px;
color: var(--gray-400);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.utility-link:hover { color: var(--primary); }
.screen-indicator {
position: absolute;
top: 90px;
right: 16px;
font-size: 9px;
color: var(--gray-300);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
writing-mode: vertical-rl;
}
@media print {
body { background: white; }
.page { margin: 0; box-shadow: none; }
}
site/index.html
+454
View File
File diff suppressed because one or more lines are too long
test-generalized.pdf
BIN
View File
Binary file not shown.