diff --git a/backend/src/questionnaire.js b/backend/src/questionnaire.js index 0afa382..a96937d 100644 --- a/backend/src/questionnaire.js +++ b/backend/src/questionnaire.js @@ -34,7 +34,7 @@ const QUESTIONS = { opt('ex_smoker', 'Ex-smoker'), opt('current_smoker', 'Current smoker'), opt('pulmonary_tb_contact', 'Suffered or ever came in contact with a patient who had Pulmonary TB'), - opt('indoor_air_pollution', 'Current exposure to any sources of Indoor Air Pollution'), + opt('indoor_air_pollution', 'Current exposure to any sources of Indoor Air Pollution (eg: Incense Sticks, Mosquito Coil, Loban, Dhoop, Smoke from Tandoor/ cooking, Smoker in the family, fungus on walls (grey-black patches on wall))'), ], }, occupation_exposure: { @@ -143,7 +143,7 @@ const QUESTIONS = { }, cough_type: { code: 'cough_type', - label: 'Is the cough dry or wet?', + label: 'Is the cough dry or wet (does the patient expel out sputum/mucus/phlegm during coughing)?', type: 'single', required: true, options: [ @@ -157,9 +157,9 @@ const QUESTIONS = { type: 'single', required: true, options: [ - opt('scanty', 'Scanty'), - opt('moderate', 'Moderate'), - opt('excess', 'Excess'), + opt('scanty', 'Scanty (very less sputum/mucus/phlegm production/expulsion even after coughing)'), + opt('moderate', 'Moderate (some amount of sputum/mucus/phlegm production/expulsion after coughing)'), + opt('excess', 'Excess (too much sputum/mucus/phlegm production/expulsion even with or without cough)'), opt('sometimes_excess_sometimes_less', 'Sometimes excess and sometimes less'), opt('more_early_morning', 'More in early morning'), ], diff --git a/frontend/public/organ/abdomen.png b/frontend/public/organ/abdomen.png new file mode 100644 index 0000000..aa1f34f Binary files /dev/null and b/frontend/public/organ/abdomen.png differ diff --git a/frontend/public/organ/brain_spinal.png b/frontend/public/organ/brain_spinal.png new file mode 100644 index 0000000..83f6f24 Binary files /dev/null and b/frontend/public/organ/brain_spinal.png differ diff --git a/frontend/public/organ/ent.png b/frontend/public/organ/ent.png new file mode 100644 index 0000000..7b6e62f Binary files /dev/null and b/frontend/public/organ/ent.png differ diff --git a/frontend/public/organ/heart.png b/frontend/public/organ/heart.png new file mode 100644 index 0000000..7537de9 Binary files /dev/null and b/frontend/public/organ/heart.png differ diff --git a/frontend/public/organ/kidney.png b/frontend/public/organ/kidney.png new file mode 100644 index 0000000..672f743 Binary files /dev/null and b/frontend/public/organ/kidney.png differ diff --git a/frontend/public/organ/lungs.png b/frontend/public/organ/lungs.png new file mode 100644 index 0000000..d564f15 Binary files /dev/null and b/frontend/public/organ/lungs.png differ diff --git a/frontend/public/organ/muscles_bones_joints.png b/frontend/public/organ/muscles_bones_joints.png new file mode 100644 index 0000000..779c78d Binary files /dev/null and b/frontend/public/organ/muscles_bones_joints.png differ diff --git a/frontend/public/organ/pregnancy.png b/frontend/public/organ/pregnancy.png new file mode 100644 index 0000000..967dda5 Binary files /dev/null and b/frontend/public/organ/pregnancy.png differ diff --git a/frontend/public/organ/reproductive.png b/frontend/public/organ/reproductive.png new file mode 100644 index 0000000..2791834 Binary files /dev/null and b/frontend/public/organ/reproductive.png differ diff --git a/frontend/public/organ/skin.png b/frontend/public/organ/skin.png new file mode 100644 index 0000000..0c6646b Binary files /dev/null and b/frontend/public/organ/skin.png differ diff --git a/frontend/src/App.css b/frontend/src/App.css index e8785cd..dd50a1d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -230,7 +230,7 @@ .option-row { display: flex; gap: 0.6rem; - align-items: flex-start; + align-items: center; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 10px; @@ -239,7 +239,37 @@ } .option-row input { - margin-top: 0.2rem; + margin-top: 0; +} + +.option-body { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + gap: 0.55rem; + min-width: 0; +} + +.option-images { + display: flex; + flex-wrap: nowrap; + gap: 0.35rem; + flex-shrink: 0; +} + +.option-image { + width: 72px; + height: 56px; + object-fit: contain; + background: #fff; + border: 1px solid var(--line); + border-radius: 8px; +} + +.option-text { + flex: 1; + min-width: 0; } .mt { diff --git a/frontend/src/components/QuestionField.jsx b/frontend/src/components/QuestionField.jsx index ee31855..74cb6d7 100644 --- a/frontend/src/components/QuestionField.jsx +++ b/frontend/src/components/QuestionField.jsx @@ -1,3 +1,19 @@ +function OptionLabel({ opt }) { + const images = Array.isArray(opt.images) ? opt.images : []; + return ( + + {images.length > 0 ? ( + + {images.map((src) => ( + + ))} + + ) : null} + {opt.label} + + ); +} + export default function QuestionField({ question, value, otherValue, onChange, onOtherChange }) { if (!question) return null; @@ -36,7 +52,7 @@ export default function QuestionField({ question, value, otherValue, onChange, o checked={value === opt.value} onChange={() => onChange(opt.value)} /> - {opt.label} + ))} @@ -77,7 +93,7 @@ export default function QuestionField({ question, value, otherValue, onChange, o } }} /> - {opt.label} + ); })} diff --git a/frontend/src/questionnaire.js b/frontend/src/questionnaire.js index 314760f..cc9f8b9 100644 --- a/frontend/src/questionnaire.js +++ b/frontend/src/questionnaire.js @@ -35,7 +35,7 @@ export const QUESTIONS = { }, { value: 'indoor_air_pollution', - label: 'Current exposure to any sources of Indoor Air Pollution', + label: 'Current exposure to any sources of Indoor Air Pollution (eg: Incense Sticks, Mosquito Coil, Loban, Dhoop, Smoke from Tandoor/ cooking, Smoker in the family, fungus on walls (grey-black patches on wall))', }, ], }, @@ -96,15 +96,19 @@ export const QUESTIONS = { type: 'multi', required: true, options: [ - { value: 'skin', label: 'Skin' }, - { value: 'brain_spinal', label: 'Brain & spinal cord' }, - { value: 'ent', label: 'Ear/Nose/Throat' }, - { value: 'heart', label: 'Heart disease' }, - { value: 'lungs', label: 'Lungs & breathing tubes' }, - { value: 'abdomen', label: 'Abdomen' }, - { value: 'kidney', label: 'Kidney' }, - { value: 'pregnancy_reproductive', label: 'Pregnancy & reproductive issues' }, - { value: 'muscles_bones_joints', label: 'Muscles/Bones/Joints' }, + { value: 'skin', label: 'Skin', images: ['/organ/skin.png'] }, + { value: 'brain_spinal', label: 'Brain & spinal cord', images: ['/organ/brain_spinal.png'] }, + { value: 'ent', label: 'Ear/Nose/Throat', images: ['/organ/ent.png'] }, + { value: 'heart', label: 'Heart disease', images: ['/organ/heart.png'] }, + { value: 'lungs', label: 'Lungs & breathing tubes', images: ['/organ/lungs.png'] }, + { value: 'abdomen', label: 'Abdomen', images: ['/organ/abdomen.png'] }, + { value: 'kidney', label: 'Kidney', images: ['/organ/kidney.png'] }, + { + value: 'pregnancy_reproductive', + label: 'Pregnancy & reproductive issues', + images: ['/organ/reproductive.png', '/organ/pregnancy.png'], + }, + { value: 'muscles_bones_joints', label: 'Muscles/Bones/Joints', images: ['/organ/muscles_bones_joints.png'] }, ], }, ailment: { @@ -154,7 +158,7 @@ export const QUESTIONS = { }, cough_type: { code: 'cough_type', - label: 'Is the cough dry or wet?', + label: 'Is the cough dry or wet (does the patient expel out sputum/mucus/phlegm during coughing)?', type: 'single', required: true, options: [ @@ -168,9 +172,9 @@ export const QUESTIONS = { type: 'single', required: true, options: [ - { value: 'scanty', label: 'Scanty' }, - { value: 'moderate', label: 'Moderate' }, - { value: 'excess', label: 'Excess' }, + { value: 'scanty', label: 'Scanty (very less sputum/mucus/phlegm production/expulsion even after coughing)' }, + { value: 'moderate', label: 'Moderate (some amount of sputum/mucus/phlegm production/expulsion after coughing)' }, + { value: 'excess', label: 'Excess (too much sputum/mucus/phlegm production/expulsion even with or without cough)' }, { value: 'sometimes_excess_sometimes_less', label: 'Sometimes excess and sometimes less' }, { value: 'more_early_morning', label: 'More in early morning' }, ],