Use Stimulus controller for showing and hiding conditional questions

app/helpers/conditional_questions_helper.rb

@@ -0,0 +1,7 @@
+module ConditionalQuestionsHelper
+  def conditional_questions_for_page(page)
+    page["questions"].values.map do |question|
+      question["conditional_for"]
+    end.compact.map(&:keys).flatten
+  end
+end

app/javascript/controllers/armed_forces_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  displayConditional() {
+    let question = this.element.name;
+    let selected = this.element.value;
+    let conditional_for = JSON.parse(this.element.dataset.info);
+
+    Object.entries(conditional_for).forEach(([key, values]) => {
+      if(values.includes(selected)) {
+        document.getElementById(key + "_div").style.display = "block"
+      } else {
+        document.getElementById(key + "_div").style.display = "none"
+      }
+    });
+  }
+}

app/views/form/_radio_question.html.erb

@@ -6,30 +6,14 @@
     <% question["answer_options"].map do |key, val| %>
       <% if key.starts_with?("divider") %>
         <%= f.govuk_radio_divider %>
+      <% elsif question["conditional_for"] %>
+        <%= f.govuk_radio_button question_key, key, label: { text: val },
+            "data-controller": "#{question_key.dasherize}",
+            "data-action": "click->#{question_key.dasherize}#displayConditional",
+            "data-info": "#{question["conditional_for"].to_json}"
+        %>
       <% else %>
         <%= f.govuk_radio_button question_key, val, label: { text: val } %>
       <% end %>
     <% end %>
 <% end %>
-
-<script>
-  function displayConditional() {
-    const show_if = <%= raw question["show_if"].to_json %>;
-    if(show_if !== null){
-      const conditionalQuestionKey = <%= raw question_key.to_json %>;
-      const conditionalQuestion = document.getElementById(conditionalQuestionKey + "_div")
-      conditionalQuestion.style.display = "none";
-      Object.entries(show_if).forEach(([key, values]) => {
-        values.forEach((value) => {
-          let answerOption = document.getElementById(key.replace("_", "-") + "-" + value + "-field")
-          if(answerOption !== null) {
-            if(answerOption.checked){
-              conditionalQuestion.style.display = "block"
-            }
-          }
-        })
-      });
-    }
-  }
-  displayConditional()
-</script>

app/views/form/page.html.erb

@@ -17,6 +17,11 @@
       <div id=<%= "#{question_key}_div" %> >
         <%= render partial: "form/#{question["type"]}_question", locals: { question_key: question_key, question: question, f: f } %>
       </div>
+      <% if conditional_questions_for_page(page_info).include?(question_key) %>
+      <style>
+        <%= "##{question_key}_div" %> { display: none; }
+      </style>
+      <% end %>
     <% end %>
 
     <%= f.hidden_field :previous_page, value: page_key %>

config/forms/2021_2022.json

@@ -292,6 +292,10 @@
                     "1": "Yes - a reserve",
                     "2": "No",
                     "3": "Prefer not to say"
+                  },
+                  "conditional_for": {
+                    "armed_forces_active": ["0", "1"],
+                    "armed_forces_injured": ["0", "1"]
                   }
                 },
                 "armed_forces_active": {
@@ -303,9 +307,6 @@
                     "1": "No - they left up to 5 years ago",
                     "2": "No - they left more than 5 years ago",
                     "3": "Prefer not to say"
-                  },
-                  "show_if": {
-                    "armed_forces": ["0", "1"]
                   }
                 },
                 "armed_forces_injured": {
@@ -316,9 +317,6 @@
                     "0": "Yes",
                     "1": "No",
                     "2": "Prefer not to say"
-                  },
-                  "show_if": {
-                    "armed_forces": ["0", "1"]
                   }
                 },
                 "armed_forces_partner": {