diff options
| -rw-r--r-- | admin/index.js | 9 | ||||
| -rw-r--r-- | admin/public/index.html | 1 | ||||
| -rw-r--r-- | admin/public/questions.html | 31 | ||||
| -rw-r--r-- | admin/public/questions.js | 57 | ||||
| -rw-r--r-- | admin/public/votes.js | 2 | ||||
| -rw-r--r-- | questions.txt | 16 | ||||
| -rw-r--r-- | questions/public/script.js | 4 | ||||
| -rw-r--r-- | questions/public/style.css | 9 |
8 files changed, 114 insertions, 15 deletions
diff --git a/admin/index.js b/admin/index.js index a67b9f3..46b4f16 100644 --- a/admin/index.js +++ b/admin/index.js @@ -39,9 +39,16 @@ app.get("/api/all", checkAdmin, async (req, res) => { res.json(all); }); +app.get("/api/percentages", checkAdmin, async (req, res) => { + const percentages = await db.query( + "SELECT q.id, q.question question, o.answer_option option, COUNT(a.user_id) count FROM question_questions q INNER JOIN question_options o ON q.id = o.question_id INNER JOIN question_answers a ON o.id = a.option_id GROUP BY o.id", + ); + res.json(percentages); +}); + app.get("/api/questions", checkAdmin, async (req, res) => { const questions = await db.query( - "SELECT q.id, question, t.name type FROM ranking_questions q INNER JOIN types t on type_id = t.id ORDER BY q.id", + "SELECT q.id, question, t.name type FROM ranking_questions q INNER JOIN types t ON type_id = t.id ORDER BY q.id", ); res.json(questions); }); diff --git a/admin/public/index.html b/admin/public/index.html index d88d38d..55bb54b 100644 --- a/admin/public/index.html +++ b/admin/public/index.html @@ -23,6 +23,7 @@ <div class="pure-menu"> <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="ranking.html" class="pure-menu-link">Ranking</a></li> + <li class="pure-menu-item"><a href="questions.html" class="pure-menu-link">Fragen</a></li> <li class="pure-menu-item"><a href="votes.html" class="pure-menu-link">Votes</a></li> <li class="pure-menu-item"><a href="participation.html" class="pure-menu-link">Teilnahme</a></li> </ul> diff --git a/admin/public/questions.html b/admin/public/questions.html new file mode 100644 index 0000000..23332b8 --- /dev/null +++ b/admin/public/questions.html @@ -0,0 +1,31 @@ +<!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> + <div class="card"> + <button class="pure-button" id="switch">Switch</button> + <br /> + <h2 id="question"></h2> + <canvas id="questions" width="400" height="400"></canvas> + </div> + + <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script> + <script src="questions.js"></script> + </body> +</html> diff --git a/admin/public/questions.js b/admin/public/questions.js new file mode 100644 index 0000000..32e48bf --- /dev/null +++ b/admin/public/questions.js @@ -0,0 +1,57 @@ +let chart; +const data = []; +let question_index = 0; + +const label = document.getElementById("question"); + +fetch("/admin/api/percentages") + .then((response) => response.json()) + .then((response) => { + response.forEach((e) => { + if (!data[e.id - 1]) data[e.id - 1] = []; + data[e.id - 1].push(e); + }); + render(question_index); + }); + +function render(index) { + const ctx = document.getElementById("questions").getContext("2d"); + const q = data[question_index]; + label.innerText = q[0].question; + chart = new Chart(ctx, { + type: "pie", + data: { + labels: [...new Set(q.map((a) => a.option))], + datasets: [ + { + label: "# of Votes", + data: q.map((a) => a.count || 0), + backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8), + borderWidth: 1, + }, + ], + }, + options: { + legend: { + display: false, + }, + scales: { + yAxes: [ + { + ticks: { + beginAtZero: true, + precision: 0, + }, + }, + ], + }, + }, + }); +} + +document.getElementById("switch").addEventListener("click", () => { + chart.destroy(); + render(++question_index); + if (question_index + 1 < data.length) question_index++; + else question_index = 0; +}); diff --git a/admin/public/votes.js b/admin/public/votes.js index 1bde08b..39a379f 100644 --- a/admin/public/votes.js +++ b/admin/public/votes.js @@ -1,4 +1,4 @@ -let date; +let data; let chart; fetch("/admin/api/votes") diff --git a/questions.txt b/questions.txt index 1447c6f..5805058 100644 --- a/questions.txt +++ b/questions.txt @@ -1,8 +1,8 @@ -Single/Vergeben - Single,Vergeben -Schulweg - Bus,Bahn,Auto,Fahrrad,Fuß -Schon einmal blau gemacht - Ja,Nein -Nach der Schule - Auslandsjahr,Arbeit,Ausbildung,Work & Travel,Pause,Studium -Geschwister - Ja,Nein -Raucher - Ja,Nein -Drogen - Ja,Nein -Jungfrau - Ja,Nein
\ No newline at end of file +Bist du Single/Vergeben? - Single,Vergeben +Wie kommst du hauptsächlich zur Schule? - Bus,Bahn,Auto,Fahrrad,Fuß +Hast du schon einmal blau gemacht? - Ja,Nein +Was machst du nach der Schule? - Auslandsjahr,Arbeit,Ausbildung,Work & Travel,Pause,Studium +Hast du Geschwister? - Ja,Nein +Rauchst du? - Ja,Nein +Hast du bewusstseinserweiternde Substanzen zu dir genommen? - Ja,Nein +Bist du noch Jungfrau (nicht Sternzeichen)? - Ja,Nein
\ No newline at end of file diff --git a/questions/public/script.js b/questions/public/script.js index 2a04a02..a545a0d 100644 --- a/questions/public/script.js +++ b/questions/public/script.js @@ -23,13 +23,11 @@ fetch(`api/question/${qid}`) 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(); @@ -88,4 +86,4 @@ function addListeners() { const res = await resp.json(); if (res.success) getNext(qid + 1); }); -}
\ No newline at end of file +} diff --git a/questions/public/style.css b/questions/public/style.css index 4c395e9..12b4721 100644 --- a/questions/public/style.css +++ b/questions/public/style.css @@ -63,9 +63,14 @@ div.bar div[data-current="true"] { background: #0078e7; } -.back-skip, .answer-buttons { +.back-skip, +.answer-buttons { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; +} + +.answer-btn { + width: 100%; } .back-skip button { |