summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorstuebinm2021-04-12 16:50:20 +0200
committerstuebinm2021-04-12 16:50:20 +0200
commit15d7a47bea2815d4852c62984b256d658e8b3742 (patch)
treeb775077c2af936d409967e7f6747b05cb008636e
parentf02af23dd7f478a86c0522d1f4c3d924df06f3f0 (diff)
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)
-rw-r--r--site/i18n.js8
-rw-r--r--site/index.html38
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)