Questions

idk welp
author: LarsVomMars 2021-01-24 20:28:24 +0100
committer: LarsVomMars 2021-01-24 20:28:24 +0100
commit: 1846da9edaba43d8eeeab8bf417428464a117a36 (patch)
tree: da81db89bbc905cdb73f6df0f7f311c6463261f8 /questions/public
parent: b0856c707ec6bf686eee81f245142aa95699c0be (diff)
3 files changed, 206 insertions, 0 deletions
diff --git a/questions/public/index.html b/questions/public/index.html
new file mode 100644
index 0000000..90244f5
--- /dev/null
+++ b/questions/public/index.html
@@ -0,0 +1,44 @@
+<!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>Fragen</title>
+    </head>
+    <body>
+        <div class="pure-menu pure-menu-horizontal">
+            <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+            <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+        </div>
+
+        <main>
+            <div class="pure-form pure-form-stacked">
+                <fieldset>
+                    <legend>Fragen</legend>
+                    <div class="bar" id="progress"></div>
+                    <label id="question_label" for="question"></label>
+                    <input name="question" id="question" hidden />
+                    <div class="answer-buttons pure-button-group" role="group">
+                        <button class="pure-button pure-button-primary answer-btn" data-value="1">Ja</button>
+                        <button class="pure-button pure-button-primary answer-btn" data-value="0">Nein</button>
+                    </div>
+                    <br>
+                    <div class="back-skip pure-button-group" role="group">
+                        <button id="prev-btn" class="pure-button">Zurück</button>
+                        <button id="skip-btn" class="pure-button">Weiter</button>
+                    </div>
+                </fieldset>
+            </div>
+        </main>
+
+        <script src="script.js" charset="utf-8"></script>
+    </body>
+</html>
diff --git a/questions/public/script.js b/questions/public/script.js
new file mode 100644
index 0000000..70a15ef
--- /dev/null
+++ b/questions/public/script.js
@@ -0,0 +1,83 @@
+const query = new URL(window.location.href).searchParams;
+const qid = +query.get("qid") || 0;
+let method = "POST";
+
+const question_input = document.getElementById("question");
+const question_label = document.getElementById("question_label");
+const prev = document.getElementById("prev-btn");
+const skip = document.getElementById("skip-btn");
+const progress = document.getElementById("progress");
+const buttons = document.querySelectorAll(".answer-btn");
+
+skip.addEventListener("click", () => getNext(qid + 1));
+prev.addEventListener("click", () => getNext(qid - 1));
+
+if (qid === 0) {
+    prev.style.display = "none";
+    skip.style.width = "100%";
+}
+
+fetch(`api/question/${qid}`)
+    .then((response) => response.json())
+    .then((response) => {
+        if (!response.empty()) {
+            question_label.innerText = response["question"];
+            question_input.setAttribute("value", response["id"]);
+            if (response.answer !== undefined) {
+                method = "PUT";
+            }
+            document.querySelector(`.answer-btn[data-value="${response.answer}"]`).style.opacity = "0.5";
+        } else getNext(); // Resets
+    });
+
+fetch(`api/questions`)
+    .then((response) => response.json())
+    .then((response) => {
+        for (const elem of response) {
+            progress.insertAdjacentHTML(
+                "beforeend",
+                `<div data-current="${+elem.id === qid}" data-answered="${elem.answered}">${elem.id + 1}</div>`,
+            );
+        }
+    })
+    .then(() => {
+        document.querySelectorAll("div.bar div").forEach((elem) => {
+            elem.addEventListener("click", () => {
+                getNext(+elem.innerText - 1);
+            });
+        });
+    });
+
+function getNext(q = 0) {
+    window.location.assign(`/questions/?qid=${q}`);
+}
+
+// I did this myself lel 🤨
+Object.prototype.empty = function () {
+    return Object.keys(this).length === 0;
+};
+
+NodeList.prototype.on = function (listener, event) {
+    for (const node of this) {
+        node.addEventListener(listener, event);
+    }
+}
+
+buttons.on("click", async (e) => {
+    const body = JSON.stringify({
+        question: question_input.value,
+        answer: e.target.dataset.value === "1",
+    });
+    const resp = await fetch(`api/answer`, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body,
+    });
+    const res = await resp.json();
+    if (res.success) {
+        method = "PUT";
+        getNext(qid);
+        // document.querySelector(`.answer-btn[data-value="${e.target.dataset.value}"]`).style.opacity = "0.5";
+        // document.querySelector(`.answer-btn[data-value="${+!+e.target.dataset.value}"]`).style.opacity = "1"; // Let's not talk about it 😉
+    }
+});
+\ No newline at end of file
diff --git a/questions/public/style.css b/questions/public/style.css
new file mode 100644
index 0000000..4c395e9
--- /dev/null
+++ b/questions/public/style.css
@@ -0,0 +1,79 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    color: #424242;
+    line-height: 1.6;
+    background-color: #eec0c6;
+    background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
+}
+
+div {
+    background: white;
+}
+
+main {
+    position: absolute;
+    width: 50%;
+    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%;
+    color: #424242;
+}
+
+div.bar {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+div.bar div {
+    width: 20px;
+    height: 20px;
+    margin: 2px;
+    padding: 2px;
+    color: white;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+div.bar div[data-answered="true"] {
+    background: green;
+}
+
+div.bar div[data-answered="false"] {
+    background: red;
+}
+
+div.bar div[data-current="true"] {
+    background: #0078e7;
+}
+
+.back-skip, .answer-buttons {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.back-skip button {
+    width: 50%;
+}
+
+@media only screen and (max-width: 700px) {
+    main {
+        width: calc(100% - 20%);
+    }
+}
author	LarsVomMars	2021-01-24 20:28:24 +0100
committer	LarsVomMars	2021-01-24 20:28:24 +0100
commit	1846da9edaba43d8eeeab8bf417428464a117a36 (patch)
tree	da81db89bbc905cdb73f6df0f7f311c6463261f8 /questions/public
parent	b0856c707ec6bf686eee81f245142aa95699c0be (diff)