Kelder/durfdoen-2.0
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make subquestions appear

Browse source
This commit is contained in:
ajuvercr 2020-03-10 22:49:04 +01:00
parent 0623042113
commit 8c976c1b61
1 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
layouts/partials/question.erb
View file

@ -2,7 +2,7 @@
<select id="<%= question[:vraag] %>"> <select id="<%= question[:vraag] %>">
<option value="" selected="selected disabled hidden">Maak uw keuze</option> <option value="" selected="selected disabled hidden">Maak uw keuze</option>
<% for answer in question[:antwoorden]%> <% for answer in question[:antwoorden]%>
<option value="<%= answer[:tekst] %>"> <option value='<%= answer[:tekst] + (answer[:vraag] || "") %>'>
<%= answer[:tekst] %> <%= answer[:tekst] %>
</option> </option>
<% end %> <% end %>
@ -11,18 +11,31 @@
<% if answer[:vraag] %> <% if answer[:vraag] %>
<%# Should store all sub-questions with a reference to their parent question in the data-parent <%# Should store all sub-questions with a reference to their parent question in the data-parent
attribute, however, these atrtibutes remain empty. %> attribute, however, these atrtibutes remain empty. %>
<div id=<%= answer[:vraag]%> style="display:none;" data-parent="<% question[:vraag] %>"> <div id='<%= answer[:tekst] + answer[:vraag] %>' style="display:none;" data-parent="<% question[:vraag] %>">
<%= render '/partials/question.*', question: answer %> <%= render '/partials/question.*', question: answer %>
</div> </div>
<% end %> <% end %>
<% end %> <% end %>
<script> <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) =>{ document.getElementById("<%= question[:vraag] %>").addEventListener('change', (event) =>{
// find subquestions of this question and set display:initial; for (let t in sub_questions) {
console.log("<%= question[:vraag] %>"); sub_questions[t].style.display = "none";
// If the data-parent attributes would be filled, this would find the relevant sub-questions }
// they could then be made visible again.
console.log(document.querySelectorAll('[data-parent="<%= question[:vraag] %>"]')); const quest = sub_questions[event.target.value];
}) if (quest) {
delete quest.style.removeProperty("display");
}
});
}
</script> </script>