diff options
| author | Marvin Borner | 2020-10-02 21:12:23 +0200 |
|---|---|---|
| committer | Marvin Borner | 2020-10-02 21:12:23 +0200 |
| commit | e52bcb760f36b68495692ac5c5a5b68e8dafc33b (patch) | |
| tree | 9e386b6081a0516d2c475e187f0b744d65aae156 /poll/public | |
| parent | 762794cecdb0b12b58db0de16d31c8d7c216171c (diff) | |
Added polls
Diffstat (limited to 'poll/public')
| -rw-r--r-- | poll/public/index.html | 35 | ||||
| -rw-r--r-- | poll/public/script.js | 40 | ||||
| -rw-r--r-- | poll/public/style.css | 35 |
3 files changed, 110 insertions, 0 deletions
diff --git a/poll/public/index.html b/poll/public/index.html new file mode 100644 index 0000000..8530b76 --- /dev/null +++ b/poll/public/index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link + rel="stylesheet" + href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" + integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" + crossorigin="anonymous" + /> + <link rel="stylesheet" href="style.css" type="text/css" media="all" /> + + <title>Schüler-Ranking</title> + </head> + <body> + <div> + <form class="pure-form pure-form-stacked" action="api/answer" method="post"> + <fieldset> + <!-- TODO: Add progress --> + <legend>Schüler-Ranking</legend> + <p>Welche/r Schüler/in...</p> + <label id="question_label" for="question"></label> + <input name="question" id="question" hidden></input> + <br/> + <label for="answer">Antwort</label> + <select name="answer" id="answer" required></select> + <button type="submit" class="pure-button pure-button-primary">Antworten</button> + </fieldset> + </form> + </div> + + <script src="script.js" charset="utf-8"></script> + </body> +</html> diff --git a/poll/public/script.js b/poll/public/script.js new file mode 100644 index 0000000..a42777f --- /dev/null +++ b/poll/public/script.js @@ -0,0 +1,40 @@ +const dropdown = document.getElementById("answer"); +const question_input = document.getElementById("question"); +const question_label = document.getElementById("question_label"); + +dropdown.insertAdjacentHTML("beforeend", '<option selected="true" disabled>Schüler/in auswählen...</option>'); + +function appendOption(response) { + response.forEach((elem) => { + dropdown.insertAdjacentHTML( + "beforeend", + `<option value="${elem["id"]}">${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${ + elem["surname"] + }</option>` + ); + }); +} + +function appendQuote(response) { + response.forEach((elem) => { + document + .getElementById(elem["class"]) + .insertAdjacentHTML( + "beforeend", + `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${elem["surname"]}: ${ + elem["quote"] + }</li>` + ); + }); +} + +fetch("/auth/api/list") + .then((response) => response.json()) + .then((response) => appendOption(response)); + +fetch("/poll/api/get") + .then((response) => response.json()) + .then((response) => { + question_label.innerText = response["question"]; + question_input.setAttribute("value", response["id"]); + }); diff --git a/poll/public/style.css b/poll/public/style.css new file mode 100644 index 0000000..2c9c695 --- /dev/null +++ b/poll/public/style.css @@ -0,0 +1,35 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +div { + position: absolute; + max-height: 80%; + overflow-y: scroll; + width: 30%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +input, +button, +select { + width: 100%; +} + +@media only screen and (max-width: 600px) { + div { + width: calc(100% - 50px); + } +} |