durfdoen-2.0/layouts/partials/question.erb

<h3> <%= question[:vraag] %> </h3>
<% if question[:type] == "specialCase1" %>
  <p>
    Geef je postcode in
  </p>
  <input id="postcodeField" type=number placeholder=9000>
<%else%>
<form id="<%= number %>_form">
  <fieldset>
  <% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx| %>
    <p>
    <label>
        <input type=<% if question[:type] == "meerkeuze" %>"checkbox"<% else %>"radio"<% end %>
          value='<%=number+"#"+idx.to_s%>' name=<%= number %> >
        <%= answer[:tekst] %>
    </label>
    </p>
  <% end %>
  </fieldset>
</form>
<% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx|%>
  <% if answer[:vraag] %>
    <div id='<%= number+"#"+idx.to_s %>' class="question_wrapper" style="display:none;">
      <%= render '/partials/question.*', question: answer, number:  number+"."+idx.to_s  %>
    </div>
  <% end %>
<% end %>
<%end%>
  <script>
<% if question[:type] == "specialCase1" %>
  (function setupPostCodeField() {
    const postcodes = (function genpostcodes() {
      const postcodes = {};

      for(let ver of <%= postcodes_per_vereniging.to_json %> ) {
        for(let post of ver["postcodes"] || []) {
          if(!(post in postcodes)) postcodes[post+""] = [];

          postcodes[post+""].push(ver["id"]);
        }
      }

      return postcodes;
    })();
    console.log(postcodes);
    let last_answered = [];

    const postcodeField = document.getElementById("postcodeField");

    const handler = () => {
      console.log(postcodeField.value);

      const selected = postcodes[postcodeField.value] || [];

      // Update results
      save_answers(selected);
      del_answers(last_answered);
      save_state();

      last_answered = selected;
    };

    postcodeField.addEventListener("past", handler, false);
    postcodeField.addEventListener("input", handler, false);
  })();
<%else%>
  {
      // If false and the this question changes, all children should loose `checked`
      // This might not actually work when questions are infinitely deep
      const multiple_allowed = <%= question[:type] == "meerkeuze" %>;
      // Reference back to the last selected option
      // This way we can 'deselect' the question results
      let last_answered = [];

      // Create list of all subquestions
      const sub_questions = {};
      // Create list of all student organisations this answer entails
      const question_results = {};
      <% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx| %>
      <% if answer[:vraag] %>sub_questions['<%= number+"#"+idx.to_s %>'] = document.getElementById('<%= number+"#"+idx.to_s %>');<% end %>
      question_results['<%= number+"#"+idx.to_s %>'] = <%= (answer[:verenigingen] || []).map { |vereniging| vereniging[:naam] }.to_a %>;
      <% end %>

      const formElement = document.getElementById("<%= number %>_form");

      formElement.addEventListener('change', () => {
          for (let la of last_answered) {
              if (sub_questions[la]) {
                  sub_questions[la].style.display = "none";

                  // sub is the select dom element, that listens for changes
                  // When a parent is changed, it should notify it's last_answered child that it is changed
                  // Notice the replace, we move from an answer to a subquestion
                  const sub = document.getElementById(la.replace("#", ".")+"_form");
                  if (sub && !multiple_allowed) {
                    [...sub.elements].filter(e => e.nodeName == "INPUT").forEach(e => e.checked = false);

                    sub.dispatchEvent(new Event('change'));
                  }
              }
          }

          const selected = [...formElement.elements].filter(e => e.nodeName == "INPUT").filter(e => e.checked).map(e => e.value || e.text);

          // Update results
          save_answers(selected.flatMap(e => question_results[e] || []));
          del_answers(last_answered.flatMap(e => question_results[e] || []));
          save_state();

          // Make possible sub question visible
          const quests = selected.flatMap(e => sub_questions[e] || []);
          last_answered = selected;
          for (let quest of quests) {
              delete quest.style.removeProperty("display");
          }
      }, false);
  }
<%end%>
</script>