diff --git a/app/javascript/controllers/conditional_question_controller.js b/app/javascript/controllers/conditional_question_controller.js index 0d058da12..29ef37884 100644 --- a/app/javascript/controllers/conditional_question_controller.js +++ b/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" + } + }) + } } diff --git a/app/views/form/_checkbox_question.html.erb b/app/views/form/_checkbox_question.html.erb index 7d8d82b1b..ef4029059 100644 --- a/app/views/form/_checkbox_question.html.erb +++ b/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 %> diff --git a/app/views/form/_date_question.html.erb b/app/views/form/_date_question.html.erb index f4a4ddf93..57fff1e32 100644 --- a/app/views/form/_date_question.html.erb +++ b/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) %> diff --git a/app/views/form/_text_question.html.erb b/app/views/form/_text_question.html.erb index 6bf73338e..61c059fb9 100644 --- a/app/views/form/_text_question.html.erb +++ b/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) %> diff --git a/config/forms/2021_2022.json b/config/forms/2021_2022.json index 38a2374cd..221290ddc 100644 --- a/config/forms/2021_2022.json +++ b/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" + } } } }