make answer results global
This commit is contained in:
parent
47406d1610
commit
413944e396
2 changed files with 42 additions and 29 deletions
|
@ -1,5 +1,5 @@
|
||||||
<h2> <%= question[:vraag] %> </h2>
|
<h2> <%= question[:vraag] %> </h2>
|
||||||
<select id="<%= question[:vraag] %>">
|
<select id="<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option">
|
||||||
<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] + (answer[:vraag] || "") %>'>
|
<option value='<%= answer[:tekst] + (answer[:vraag] || "") %>'>
|
||||||
|
@ -9,68 +9,61 @@
|
||||||
</select>
|
</select>
|
||||||
<% for answer in question[:antwoorden]%>
|
<% for answer in question[:antwoorden]%>
|
||||||
<% if answer[:vraag] %>
|
<% if answer[:vraag] %>
|
||||||
<%# Should store all sub-questions with a reference to their parent question in the data-parent
|
<div id='<%= answer[:tekst] + answer[:vraag] %>' style="display:none;">
|
||||||
attribute, however, these atrtibutes remain empty. %>
|
|
||||||
<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>
|
||||||
(function() {
|
{
|
||||||
|
// Reference back to the last selected option
|
||||||
|
// This way we can 'deselect' the question results
|
||||||
let last_answered = null;
|
let last_answered = null;
|
||||||
|
|
||||||
// Create list of all subquestions
|
// Create list of all subquestions
|
||||||
const sub_questions = {};
|
const sub_questions = {};
|
||||||
const question_answers = {};
|
// Create list of all student organisations this answer entails
|
||||||
|
const question_results = {};
|
||||||
|
|
||||||
<% for answer in question[:antwoorden] %>
|
<% for answer in question[:antwoorden] %>
|
||||||
<% if answer[:vraag] %>
|
<% if answer[:vraag] %>
|
||||||
sub_questions['<%= answer[:tekst] + answer[:vraag] %>'] = document.getElementById('<%= answer[:tekst] + answer[:vraag] %>');
|
sub_questions['<%= answer[:tekst] + answer[:vraag] %>'] = document.getElementById('<%= answer[:tekst] + answer[:vraag] %>');
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
question_answers['<%= answer[:tekst] + (answer[:vraag] || "") %>'] = [];
|
question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'] = [];
|
||||||
|
|
||||||
<% if answer[:verenigingen] %>
|
<% if answer[:verenigingen] %>
|
||||||
<% for vereniging in answer[:verenigingen] %>
|
<% for vereniging in answer[:verenigingen] %>
|
||||||
question_answers['<%= answer[:tekst] + (answer[:vraag] || "") %>'].push(
|
question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'].push(
|
||||||
'<%= vereniging[:naam] %>'
|
'<%= vereniging[:naam] %>'
|
||||||
);
|
);
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
console.log('<%= (question[:vraag] || "") + (question[:tekst] || "") %>');
|
document.getElementById("<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option").addEventListener('change', (event) => {
|
||||||
console.log(question_answers);
|
|
||||||
|
|
||||||
document.getElementById("<%= question[:vraag] %>").addEventListener('change', (event) => {
|
|
||||||
if (last_answered && sub_questions[last_answered]) {
|
if (last_answered && sub_questions[last_answered]) {
|
||||||
sub_questions[last_answered].style.display = "none";
|
sub_questions[last_answered].style.display = "none";
|
||||||
}
|
|
||||||
|
|
||||||
for (let ver of question_answers[event.target.value] || []) {
|
// sub is the select dom element, that listens for changes
|
||||||
console.log(ver);
|
// When a parent is changed, it should notify it's last_answered child that it is changed
|
||||||
if (answer_values[ver]) {
|
const sub = document.getElementById(last_answered+"_option");
|
||||||
answer_values[ver] += 1;
|
if (sub) {
|
||||||
} else {
|
sub.value = null;
|
||||||
answer_values[ver] = 1;
|
sub.dispatchEvent(new event.constructor(event.type, event));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let ver of question_answers[last_answered] || []) {
|
// Update results
|
||||||
answer_values[ver] -= 1;
|
save_answers(question_results[event.target.value] || []);
|
||||||
}
|
del_answers(question_results[last_answered] || []);
|
||||||
|
|
||||||
console.log(answer_values);
|
// Make possible sub question visible
|
||||||
|
|
||||||
const quest = sub_questions[event.target.value];
|
const quest = sub_questions[event.target.value];
|
||||||
last_answered = event.target.value;
|
last_answered = event.target.value;
|
||||||
if (quest) {
|
if (quest) {
|
||||||
delete quest.style.removeProperty("display");
|
delete quest.style.removeProperty("display");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,26 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const answer_values = {};
|
const _save_answers = {};
|
||||||
|
|
||||||
|
function save_answers(vers) {
|
||||||
|
for (let ver of vers) {
|
||||||
|
if (_save_answers[ver]) {
|
||||||
|
_save_answers[ver] += 1;
|
||||||
|
} else {
|
||||||
|
_save_answers[ver] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(_save_answers);
|
||||||
|
}
|
||||||
|
|
||||||
|
function del_answers(vers) {
|
||||||
|
for (let ver of vers) {
|
||||||
|
_save_answers[ver] -= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(_save_answers);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<% @items.find_all("/quiz/*").each_with_index do |quest, i| %>
|
<% @items.find_all("/quiz/*").each_with_index do |quest, i| %>
|
||||||
|
|
Loading…
Reference in a new issue