Add numeric conditional

app/javascript/controllers/conditional_question_controller.js

@@ -6,13 +6,25 @@ export default class extends Controller {
   }
 
   displayConditional() {
+    switch(this.element.type) {
+      case "number":
+        this.displayConditionalNumeric()
+      case "radio":
+        this.displayConditionalRadio()
+      default:
+        console.log("Not yet implemented for " + this.element.type)
+        break;
+    }
+  }
+
+  displayConditionalRadio() {
     if(this.element.checked) {
-      let selected = this.element.value
+      let value = this.element.value
       let conditional_for = JSON.parse(this.element.dataset.info)
 
       Object.entries(conditional_for).forEach(([key, values]) => {
         let div = document.getElementById(key + "_div")
-        if(values.includes(selected)) {
+        if(values.includes(value)) {
           div.style.display = "block"
         } else {
           div.style.display = "none"
@@ -24,4 +36,18 @@ export default class extends Controller {
       })
     }
   }
+
+  displayConditionalNumeric() {
+    let value = this.element.value
+    let conditional_for = JSON.parse(this.element.dataset.info)
+
+    Object.entries(conditional_for).forEach(([key, values]) => {
+      let div = document.getElementById(key + "_div")
+      if(eval((value + values))) {
+        div.style.display = "block"
+      } else {
+        div.style.display = "none"
+      }
+    })
+  }
 }

app/views/form/_checkbox_question.html.erb

@@ -6,7 +6,7 @@
       <% if key.starts_with?("divider") %>
         <%= f.govuk_check_box_divider %>
       <% else %>
-        <%= f.govuk_check_box question_key, val, label: { text: val } %>
+        <%= f.govuk_check_box question_key, val, label: { text: val }, **conditional_html_attributes(question) %>
       <% end %>
     <% end %>
 <% end %>

app/views/form/_date_question.html.erb

@@ -1,5 +1,6 @@
 <%= f.govuk_date_field question_key,
     hint: { text: question["hint_text"] },
     legend: { text: question["header"].html_safe, size: "l"},
-    width: 20
+    width: 20,
+    **conditional_html_attributes(question)
 %>

app/views/form/_text_question.html.erb

@@ -1,5 +1,6 @@
 <%= f.govuk_text_field question_key,
     hint: { text: question["hint_text"] },
     label: { text: question["header"].html_safe, size: "l"},
-    width: 20
+    width: 20,
+    **conditional_html_attributes(question)
 %>

config/forms/2021_2022.json

@@ -153,7 +153,65 @@
                   "type": "numeric",
                   "min": 0,
                   "max": 7,
+                  "step": 1,
+                  "conditional_for": {
+                    "person_2_relationship": ">0",
+                    "person_2_age": ">0",
+                    "person_2_gender": ">0",
+                    "person_2_economic_status": ">0"
+                  }
+                },
+                "person_2_relationship": {
+                  "check_answer_label": "Person 2's relationship to lead tenant",
+                  "header": "What's person 2's relationship to lead tenant",
+                  "hint_text": "",
+                  "type": "radio",
+                  "answer_options": {
+                    "0": "Partner",
+                    "1": "Child - includes young adult and grown-up",
+                    "2": "Other",
+                    "3": "Prefer not to say"
+                  }
+                },
+                "person_2_age": {
+                  "check_answer_label": "Person 2's age",
+                  "header": "What's person 2's age",
+                  "hint_text": "",
+                  "type": "numeric",
+                  "min": 0,
+                  "max": 150,
                   "step": 1
+                },
+                "person_2_gender": {
+                  "check_answer_label": "Person 2's gender",
+                  "header": "Which of these best describes person 2's gender identity?",
+                  "hint_text": "",
+                  "type": "radio",
+                  "answer_options": {
+                    "0": "Female",
+                    "1": "Male",
+                    "2": "Non-binary",
+                    "3": "Prefer not to say"
+                  }
+                },
+                "person_2_economic_status": {
+                  "check_answer_label": "Person 2's Work",
+                  "header": "Which of these best describes person 2's working situation?",
+                  "hint_text": "",
+                  "type": "radio",
+                  "answer_options": {
+                    "0": "Part-time - Less than 30 hours",
+                    "1": "Full-time - 30 hours or more",
+                    "2": "In government training into work, such as New Deal",
+                    "3": "Jobseeker",
+                    "4": "Retired",
+                    "5": "Not seeking work",
+                    "6": "Full-time student",
+                    "7": "Unable to work because of long term sick or disability",
+                    "8": "Child under 16",
+                    "9": "Other",
+                    "10": "Prefer not to say"
+                  }
                 }
               }
             }