120 lines
4.3 KiB
Plaintext
120 lines
4.3 KiB
Plaintext
<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>
|