From 15d7a47bea2815d4852c62984b256d658e8b3742 Mon Sep 17 00:00:00 2001
From: stuebinm
Date: Mon, 12 Apr 2021 16:50:20 +0200
Subject: 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)
---
 site/index.html | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

(limited to 'site/index.html')

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)
-- 
cgit v1.2.3