1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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
}
});
|
