diff options
author | stuebinm | 2021-04-12 16:50:20 +0200 |
---|---|---|
committer | stuebinm | 2021-04-12 16:50:20 +0200 |
commit | 15d7a47bea2815d4852c62984b256d658e8b3742 (patch) | |
tree | b775077c2af936d409967e7f6747b05cb008636e | |
parent | f02af23dd7f478a86c0522d1f4c3d924df06f3f0 (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)
Diffstat (limited to '')
-rw-r--r-- | site/i18n.js | 8 | ||||
-rw-r--r-- | site/index.html | 38 |
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) |