just a bump

content/quiz/vraag3.md

@@ -4,7 +4,7 @@ type: meerkeuze
 antwoorden:
   - tekst: Studenten die uit dezelfde streek afkomstig zijn
     vraag: Uit welke streek ben jij afkomstig?
-    type: dropdown
+    type: specialCase1
     antwoorden:
       - tekst: TODO
         verenigingen:
@@ -49,5 +49,4 @@ antwoorden:
 
       - tekst: Sub-Sahara Afrika
         verenigingen:
-
 ---

content/stylesheets/main.css

@@ -7,7 +7,8 @@
   --yellow: #fed318;
 }
 
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
 }
@@ -28,12 +29,14 @@ body {
   padding: 0 1em;
 }
 
-.beforeTheFold, main {
+.beforeTheFold,
+main {
   position: relative;
   min-height: 100%;
 }
 
-button, input {
+button,
+input {
   font-size: inherit;
   font-family: inherit;
   color: inherit;
@@ -165,9 +168,7 @@ h2 {
   text-decoration: none;
   padding: 0.7rem 1.1rem;
   font-weight: 500;
-    text-shadow:
-        0 0 1em hsla(0, 0%, 100%, 1),
-        0 0 1em hsla(0, 0%, 100%, 1),
+  text-shadow: 0 0 1em hsla(0, 0%, 100%, 1), 0 0 1em hsla(0, 0%, 100%, 1),
     0 0 0.1em hsla(0, 0%, 100%, 1);
 }
 
@@ -178,10 +179,7 @@ h2 {
   left: 0;
   right: 0;
   height: 7rem;
-    background: linear-gradient(
-        hsla(0, 0%, 100%, 0),
-        hsla(0, 0%, 100%, 0.6)
-    );
+  background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.6));
 }
 
 .backgroundSquare {
@@ -210,8 +208,6 @@ h2 {
   top: 20%;
 }
 
-
-
 .randomVerenigingen p:nth-child(odd) {
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: var(--lightblue);
@@ -222,6 +218,23 @@ h2 {
   text-transform: uppercase;
 }
 
-.underline, .active_link {
+.underline,
+.active_link {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
 }
+
+#postcodeField {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#postcodeField::-webkit-outer-spin-button,
+#postcodeField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+#postcodeField[type="number"] {
+  -moz-appearance: textfield;
+}

layouts/partials/question.erb

@@ -1,5 +1,12 @@
 <h2> <%= question[:vraag] %> </h2>
-<select <% if question[:type] == "meerkeuze" %> multiple="multiple" <% end %>
+<% if question[:type] == "specialCase1" %>
+  <p>
+    Geef je postcode in
+  </p>
+  <input id="postcodeField" type=number value="9000">
+</input>
+<%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]%>
@@ -7,7 +14,8 @@
         <%= answer[:tekst] %>
       </option>
     <% end %>
-</select>
+  </select>
+<% end %>
 <% for answer in question[:antwoorden]%>
   <% if answer[:vraag] %>
     <div id='<%= html_escape(answer[:tekst] + answer[:vraag]) %>' style="display:none;">
@@ -17,6 +25,28 @@
 <% end %>
 <script>
   {
+      (function setupPostCodeField() {
+        const postCodes = (function genPostCodes() {
+
+          console.log("Running postcodes");
+          const postCodes = {};
+
+          <% verenigingen().each do |ver| %>
+            console.log("<%=ver[:naam]%>");
+
+            <% if ver[:postcodes] %>
+            <% for postcode in ver[:postcodes] %>
+              console.log("<%=postcode%>");
+            <% end %>
+            <% end %>
+          <% end %>
+        })();
+
+        console.log("Running");
+
+        // const postField =
+      })();
+
       // Reference back to the last selected option
       // This way we can 'deselect' the question results
       let last_answered = [];