diff options
Diffstat (limited to 'questions/public')
| -rw-r--r-- | questions/public/index.html | 5 | ||||
| -rw-r--r-- | questions/public/script.js | 46 |
2 files changed, 28 insertions, 23 deletions
diff --git a/questions/public/index.html b/questions/public/index.html index 90244f5..e21db81 100644 --- a/questions/public/index.html +++ b/questions/public/index.html @@ -26,10 +26,7 @@ <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> + <div class="answer-buttons pure-button-group" role="group"></div> <br> <div class="back-skip pure-button-group" role="group"> <button id="prev-btn" class="pure-button">Zurück</button> diff --git a/questions/public/script.js b/questions/public/script.js index aaeac00..2a04a02 100644 --- a/questions/public/script.js +++ b/questions/public/script.js @@ -7,7 +7,6 @@ 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)); @@ -23,10 +22,21 @@ fetch(`api/question/${qid}`) if (!response.empty()) { question_label.innerText = response["question"]; question_input.setAttribute("value", response["id"]); + const div = document.getElementsByClassName("answer-buttons")[0]; + const prop = 100 / response.options.length; + for (const option of response.options) { + const btn = document.createElement("btn"); + btn.classList.add("pure-button", "pure-button-primary", "answer-btn"); + btn.dataset.value = `${option.id}`; + btn.textContent = option.answer_option; + btn.style.width = `${prop}%`; + div.append(btn); + } + addListeners(); if (response.answer !== undefined) { method = "PUT"; + document.querySelector(`.answer-btn[data-value="${response.answer}"]`).style.opacity = "0.5"; } - document.querySelector(`.answer-btn[data-value="${response.answer}"]`).style.opacity = "0.5"; } else getNext(); // Resets }); @@ -63,21 +73,19 @@ NodeList.prototype.on = function (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, +function addListeners() { + const buttons = document.querySelectorAll(".answer-btn"); + buttons.on("click", async (e) => { + const body = JSON.stringify({ + question: question_input.value, + answer: e.target.dataset.value, + }); + const resp = await fetch("api/answer", { + method, + headers: { "Content-Type": "application/json" }, + body, + }); + const res = await resp.json(); + if (res.success) getNext(qid + 1); }); - const res = await resp.json(); - if (res.success) { - method = "PUT"; - getNext(qid + 1); - // 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 |