make quiz better by making them better, ...

content/quiz/vraag4.md

@@ -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

content/stylesheets/main.css

@@ -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;
+}

layouts/partials/question.erb

@@ -5,19 +5,23 @@
   </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>
+    </label>
+    </p>
   <% end %>
-  </select>
-  <% for answer in question[:antwoorden]%>
+  </fieldset>
+</form>
+<% question[:antwoorden].each_with_index do |answer, idx|%>
   <% if answer[:vraag] %>
-      <div id='<%= html_escape(answer[:tekst] + answer[:vraag]) %>' style="display:none;">
-        <%= render '/partials/question.*', question: answer  %>
+    <div id='<%= number+"#"+idx.to_s %>' style="display:none;">
+      <%= render '/partials/question.*', question: answer, number:  number+"."+idx.to_s  %>
     </div>
   <% end %>
 <% end %>
@@ -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]) %>');
+      <% 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 %>
 
-          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 %>
-      <% end %>
+      const formElement = document.getElementById("<%= number %>_form");
   
-      document.getElementById("<%= (question[:tekst] || "") + (question[:vraag] || "") %>_option").addEventListener('change', (event) => {
+      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>

layouts/quiz.erb

@@ -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>