site: show hint for unselected radio buttons

In surveys containing radio buttons, there will now be a nice little
hint directly beneath them if none were selected when attempting to
submit (in addition to the relatively nondescript "not all required
questions were filled in"-hint at the bottom of the form)

2 files changed, 36 insertions, 10 deletions

diff --git a/site/i18n.js b/site/i18n.js
index 829373e..e3d7662 100644
--- a/site/i18n.js
+++ b/site/i18n.js
@@ -28,7 +28,10 @@ let langs = {
         // error message in case the post request failed entirely (i.e. printed if the .catch-clause of the fetch() function is reached)
         "Error: could not post":"Error: The http POST request did not succeed.",
         // error message in case the post request returned some other status code than 200; its status code and message will be appended in the next line after the text given here
-        "Error: post returned error":"Error: The http POST request returned an error code:"
+        "Error: post returned error":"Error: The http POST request returned an error code:",
+
+        // HINTS WHEN ATTEMPTING TO SUBMIT
+        "Have to select an option": "You have to select an option here"
     },
     de : {
         "Error: nothing here": "Hier ist nichts. Evtl. hilft es, etwas hinten an die url dranzuhängen?\n\nAnsonsten: bist du dir sicher, dass du den ganzen Link hierher kopiert hast?",
@@ -43,7 +46,8 @@ let langs = {
         "Enter Passphrase": "Passphrase eingeben",
         "Error: answers invalid":"Einige verpflichtenden Antworten fehlen!",
         "Error: could not post":"Fehler: Die http POST Anfrage schlug fehl.",
-        "Error: post returned error":"Fehler: Die http POST Anfragen schlug fehl und gab einen Fehlercode zurück:"
+        "Error: post returned error":"Fehler: Die http POST Anfragen schlug fehl und gab einen Fehlercode zurück:",
+        "Have to select an option": "Pflichtfeld",
     }
 }
 
diff --git a/site/index.html b/site/index.html
index 4034787..70d487b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -43,6 +43,12 @@
          return p;
      }
 
+     function setErrormsg (element, msg=null) {
+         element.hidden = msg === null;
+         if (!element.hidden)
+             element.innerText = msg;
+         return element;
+     }
 
      /// creates an option with a label next to it.
      /// mainly for list-like things, but also the password field
@@ -59,17 +65,25 @@
 
      // for all kinds of multiple-choise like answer spaces
      function mkListSpace(kind, options, qid, label) {
-         let ul = mkElement("fieldset");
          let buttons = options.map((option) =>
              mkOption(kind, option, qid)
          );
-         appendChildren (ul, [
+         let fieldset = appendChildren (
+             mkElement("fieldset"), [
              mkElement("legend", label)
          ].concat(buttons.map((button) => {
              let li = mkElement("li");
              appendChildren(li, button);
              return li;
          })));
+         let errormsg = setErrormsg(
+             mkElement("p", "", "error"),
+             null
+         );
+         let div = appendChildren(
+             mkElement("div"),
+             [fieldset, errormsg]
+         )
          // return the answer chosen by the user. This function uses
          // null to indicate that a choice was invalid, i.e. the form
          // is not ready for submission yet.
@@ -77,13 +91,21 @@
              let selected = buttons
                  .filter((b) => b[0].checked)
                  .map((b) => b[0].value);
-             if (kind === "radio")
-                 return selected.length == 0 ? null : selected[0];
-             if (kind === "checkbox")
-                 return selected;
-             console.err("PartialityError: encountered unknown list type!")
+
+             // a weird attempt at pattern matching in js, misusing
+             // an array where one field must always be null as something
+             // that would otherwise be a sum type
+             let [ret, error] =
+                 kind === "radio"
+                 ? (selected.length != 0
+                    ? [selected[0], null]
+                    : [null, _("Have to select an option")])
+                 : kind === "checkbox" ? [selected, null]
+                 : [null, "PartialityError: encountered unknown type of list space"];
+             setErrormsg (errormsg, error);
+             return ret;
          }
-         return [ul, getAnswer];
+         return [div, getAnswer];
      }
 
      // for freeform text answers (TODO)