diff options
| -rw-r--r-- | site/index.html | 42 | ||||
| -rw-r--r-- | todo.org | 7 |
2 files changed, 32 insertions, 17 deletions
diff --git a/site/index.html b/site/index.html index ad2d907..5771e94 100644 --- a/site/index.html +++ b/site/index.html @@ -57,16 +57,18 @@ } // for all kinds of multiple-choise like answer spaces - function mkListSpace(kind, options, qid) { - let ul = mkElement("ul") + function mkListSpace(kind, options, qid, label) { + let ul = mkElement("fieldset"); let buttons = options.map((option) => mkOption(kind, option, qid) ); - appendChildren (ul, buttons.map((button) => { + appendChildren (ul, [ + mkElement("legend", label) + ].concat(buttons.map((button) => { let li = mkElement("li"); appendChildren(li, button); return li; - })); + }))); // 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. @@ -84,27 +86,35 @@ } // for freeform text answers (TODO) - function mkFreeform (placeholder) { - let text = mkElement("textarea"); - text.placeholder = placeholder; + function mkFreeform (placeholder, text) { + let input = mkElement("textarea"); + let label = mkElement("label", text); + input.id = text; + label.htmlFor = text; + let div = appendChildren(mkElement("div"), [ + label, + input + ]) + input.placeholder = placeholder; return [ - text, - () => text.value + div, + () => input.value ]; } // essentially a case - of statement over the answerspace type. // since there is no validation of the config json, it may turn // out to be a partial function in practice. - function mkAnswerSpace(space, qid) { + function mkQuestion(question) { + let space = question.space; if (space === "YesOrNo") { - return mkListSpace("radio", ["yes", "no"], qid); + return mkListSpace("radio", ["yes", "no"], question.name, question.question); } if ("Single" in space) { - return mkListSpace("radio", space.Single, qid); + return mkListSpace("radio", space.Single, question.name, question.question); } if ("Multiple" in space) { - return mkListSpace("checkbox", space.Multiple, qid); + return mkListSpace("checkbox", space.Multiple, question.name, question.question); } if ("Freeform" in space) { - return mkFreeform(space.Freeform); + return mkFreeform(space.Freeform, question.question); } console.err("PartialityError: encountered unknown AnswerSpace type!"); } @@ -126,11 +136,9 @@ let callbacks = survey.questions.map ((question) => { let section = document.createElement("section"); let [answerspace, whichselection] = - mkAnswerSpace(question.space, question.name); + mkQuestion(question); appendChildren(section, [ mkElement("h2", question.name), - mkElement("p", question.question), - //mkAnswerSpace(question.space, question.name) answerspace ]); root.appendChild(section); @@ -16,3 +16,10 @@ * TODO List of public surveys * IDEA CLI tool for age batch decryption & conversion to .csv + + +* TODO UI +** IDEA Surveys with multiple pages +Seems unclear how to do this in a way that also works with screen readers etc. +** TODO Automatic Dark mode +** TODO Support for multiple languages (defined via config.dhall) |