From 1846da9edaba43d8eeeab8bf417428464a117a36 Mon Sep 17 00:00:00 2001
From: LarsVomMars
Date: Sun, 24 Jan 2021 20:28:24 +0100
Subject: Questions idk welp
---
questions/public/index.html | 44 ++++++++++++++++++++++++
questions/public/script.js | 83 +++++++++++++++++++++++++++++++++++++++++++++
questions/public/style.css | 79 ++++++++++++++++++++++++++++++++++++++++++
3 files changed, 206 insertions(+)
create mode 100644 questions/public/index.html
create mode 100644 questions/public/script.js
create mode 100644 questions/public/style.css
(limited to 'questions/public')
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 @@
+
+
+
+
+
+
+
+
+ Fragen
+
+
+
+
+
+
+
+
+
+
+
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",
+ `${elem.id + 1}
`,
+ );
+ }
+ })
+ .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%);
+ }
+}
--
cgit v1.2.3