Questionnaire/Survey Questions correction

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('scanty', 'Scanty (very less sputum/mucus/phlegm production/expulsion even after coughing)'),
-      opt('moderate', 'Moderate'),
+      opt('moderate', 'Moderate (some amount of sputum/mucus/phlegm production/expulsion after coughing)'),
-      opt('excess', 'Excess'),
+      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'),
     ],

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 {

frontend/src/components/QuestionField.jsx

@@ -1,3 +1,19 @@
+function OptionLabel({ opt }) {
+  const images = Array.isArray(opt.images) ? opt.images : [];
+  return (
+    <span className="option-body">
+      {images.length > 0 ? (
+        <span className="option-images">
+          {images.map((src) => (
+            <img key={src} src={src} alt="" className="option-image" />
+          ))}
+        </span>
+      ) : null}
+      <span className="option-text">{opt.label}</span>
+    </span>
+  );
+}
+
 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)}
               />
-              <span>{opt.label}</span>
+              <OptionLabel opt={opt} />
             </label>
           ))}
         </div>
@@ -77,7 +93,7 @@ export default function QuestionField({ question, value, otherValue, onChange, o
                   }
                 }}
               />
-              <span>{opt.label}</span>
+              <OptionLabel opt={opt} />
             </label>
           );
         })}

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: 'skin', label: 'Skin', images: ['/organ/skin.png'] },
-      { value: 'brain_spinal', label: 'Brain & spinal cord' },
+      { value: 'brain_spinal', label: 'Brain & spinal cord', images: ['/organ/brain_spinal.png'] },
-      { value: 'ent', label: 'Ear/Nose/Throat' },
+      { value: 'ent', label: 'Ear/Nose/Throat', images: ['/organ/ent.png'] },
-      { value: 'heart', label: 'Heart disease' },
+      { value: 'heart', label: 'Heart disease', images: ['/organ/heart.png'] },
-      { value: 'lungs', label: 'Lungs & breathing tubes' },
+      { value: 'lungs', label: 'Lungs & breathing tubes', images: ['/organ/lungs.png'] },
-      { value: 'abdomen', label: 'Abdomen' },
+      { value: 'abdomen', label: 'Abdomen', images: ['/organ/abdomen.png'] },
-      { value: 'kidney', label: 'Kidney' },
+      { value: 'kidney', label: 'Kidney', images: ['/organ/kidney.png'] },
-      { value: 'pregnancy_reproductive', label: 'Pregnancy & reproductive issues' },
+      {
-      { value: 'muscles_bones_joints', label: 'Muscles/Bones/Joints' },
+        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: 'scanty', label: 'Scanty (very less sputum/mucus/phlegm production/expulsion even after coughing)' },
-      { value: 'moderate', label: 'Moderate' },
+      { value: 'moderate', label: 'Moderate (some amount of sputum/mucus/phlegm production/expulsion after coughing)' },
-      { value: 'excess', label: 'Excess' },
+      { 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' },
     ],