durfdoen-2.0/layouts/partials/question.erb
2020-03-10 22:49:04 +01:00

41 lines
1.5 KiB
Text

<h2> <%= question[:vraag] %> </h2>
<select id="<%= question[:vraag] %>">
<option value="" selected="selected disabled hidden">Maak uw keuze</option>
<% for answer in question[:antwoorden]%>
<option value='<%= answer[:tekst] + (answer[:vraag] || "") %>'>
<%= answer[:tekst] %>
</option>
<% end %>
</select>
<% for answer in question[:antwoorden]%>
<% if answer[:vraag] %>
<%# Should store all sub-questions with a reference to their parent question in the data-parent
attribute, however, these atrtibutes remain empty. %>
<div id='<%= answer[:tekst] + answer[:vraag] %>' style="display:none;" data-parent="<% question[:vraag] %>">
<%= render '/partials/question.*', question: answer %>
</div>
<% end %>
<% end %>
<script>
{
// Create list of all subquestions
const sub_questions = {};
<% for answer in question[:antwoorden]%>
<% if answer[:vraag] %>
sub_questions['<%= answer[:tekst] + answer[:vraag] %>'] = document.getElementById('<%= answer[:tekst] + answer[:vraag] %>');
<% end %>
<% end %>
document.getElementById("<%= question[:vraag] %>").addEventListener('change', (event) =>{
for (let t in sub_questions) {
sub_questions[t].style.display = "none";
}
const quest = sub_questions[event.target.value];
if (quest) {
delete quest.style.removeProperty("display");
}
});
}
</script>