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

make quiz better by making them better, ...

Browse source
This commit is contained in:
Arthur Vercruysse 2020-09-06 17:03:07 +02:00 committed by ajuvercr
parent cc183c7775
commit 3426c1944d
4 changed files with 58 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
content/quiz/vraag4.md
View file

@ -104,36 +104,36 @@ antwoorden:
type: dropdown
antwoorden:
- tekst: Vlaams-Nationalistisch en conservatief
verenigingenen:
verenigingen:
- naam: kvhv
- naam: nsv
- tekst: Antikapitalistisch
verenigingenen:
verenigingen:
- naam: als
- tekst: Christendemocraat
verenigingenen:
verenigingen:
- naam: cds
- tekst: Zeer socialistisch
verenigingenen:
verenigingen:
- naam: comac
- tekst: Groen en links
verenigingenen:
verenigingen:
- naam: jgroen
- tekst: Vlaams-republikeins
verenigingenen:
verenigingen:
- naam: jongnva
- tekst: Socialistisch
verenigingenen:
verenigingen:
- naam: js
- tekst: Liberaal
verenigingenen:
verenigingen:
- naam: lvsv
- tekst: radio maken

16
content/stylesheets/main.css
View file

@ -238,3 +238,19 @@ h2 {
#postcodeField[type="number"] {
-moz-appearance: textfield;
}
fieldset {
max-height: 60vh;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
overflow-y: auto;
margin: auto;
}
fieldset p {
margin: 15px 10px;
}
fieldset p label input {
margin-right: 10px;
}

68
layouts/partials/question.erb
View file

@ -5,23 +5,27 @@
</p>
<input id="postcodeField" type=number>
<%else%>
<select <% if question[:type] == "meerkeuze" %> multiple="multiple" <% end %>
id="<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option">
<option value="" selected="selected disabled hidden">Maak uw keuze</option>
<% for answer in question[:antwoorden]%>
<option value='<%= answer[:tekst] + (answer[:vraag] || "") %>'>
<form id="<%= number %>_form">
<fieldset>
<% question[:antwoorden].each_with_index do |answer, idx| %>
<p>
<label style="display:flex">
<input type=<% if question[:type] == "meerkeuze" %>"checkbox"<% else %>"radio"<% end %>
value='<%=number+"#"+idx.to_s%>' name=<%= number %> >
<%= answer[:tekst] %>
</option>
<% end %>
</select>
<% for answer in question[:antwoorden]%>
<% if answer[:vraag] %>
<div id='<%= html_escape(answer[:tekst] + answer[:vraag]) %>' style="display:none;">
<%= render '/partials/question.*', question: answer %>
</div>
<% end %>
</label>
</p>
<% end %>
</fieldset>
</form>
<% question[:antwoorden].each_with_index do |answer, idx|%>
<% if answer[:vraag] %>
<div id='<%= number+"#"+idx.to_s %>' style="display:none;">
<%= render '/partials/question.*', question: answer, number: number+"."+idx.to_s %>
</div>
<% end %>
<% end %>
<%end%>
<script>
<% if question[:type] == "specialCase1" %>
(function setupPostCodeField() {
@ -67,40 +71,32 @@
const sub_questions = {};
// Create list of all student organisations this answer entails
const question_results = {};
<% for answer in question[:antwoorden] %>
<% if answer[:vraag] %>
sub_questions['<%= html_escape(answer[:tekst] + answer[:vraag]) %>'] = document.getElementById('<%= html_escape(answer[:tekst] + answer[:vraag]) %>');
<% end %>
question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'] = [];
<% if answer[:verenigingen] %>
<% for vereniging in answer[:verenigingen] %>
question_results['<%= answer[:tekst] + (answer[:vraag] || "") %>'].push(
"<%= vereniging[:naam] %>"
);
<% end %>
<% end %>
<% question[:antwoorden].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 %>
document.getElementById("<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option").addEventListener('change', (event) => {
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
const sub = document.getElementById(la+"_option");
// Notice the replace, we move from an answer to a subquestion
const sub = document.getElementById(la.replace("#", ".")+"_form");
if (sub) {
sub.value = null;
sub.dispatchEvent(new event.constructor(event.type, event));
[...sub.elements].filter(e => e.nodeName == "INPUT").forEach(e => e.checked = false);
sub.dispatchEvent(new Event('change'));
}
}
}
const selected = getSelectValues(event.target);
console.log(event.target);
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] || []));
@ -113,7 +109,7 @@
for (let quest of quests) {
delete quest.style.removeProperty("display");
}
});
}, false);
}
<%end%>
</script>

2
layouts/quiz.erb
View file

@ -1,7 +1,7 @@
<div style="margin: auto; width: 70%;">
<% @items.find_all("/quiz/*").each_with_index do |quest, i| %>
<div id="question_<%=i+1%>" class="question hidden">
<%= render '/partials/question.*', question: quest %>
<%= render '/partials/question.*', question: quest, number: i.to_s %>
</div>
<% end %>
</div>