294 lines
7.0 KiB
HTML
294 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
<link rel="stylesheet" href="../lib/basic.css">
|
|
<script src="../auth.js"></script>
|
|
<script src="../lib/basic.js"></script>
|
|
<script src="../other/skills.js"></script>
|
|
<script src="../other/skilltree.js"></script>
|
|
<title>Auswertung</title>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
|
|
button.navigation {
|
|
font-size: 20px;
|
|
padding: 15px 15px;
|
|
background-color: var(--accent_color_bg);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
min-width: min(calc(160px + 40px), 100%);
|
|
white-space: nowrap;
|
|
}
|
|
button.navigation:hover {
|
|
background: var(--accent_color_bg_o);
|
|
}
|
|
|
|
/*.header_bar_1 > div:first-child > div {
|
|
display: inline;
|
|
padding: 10px;
|
|
padding-right: 30px;
|
|
}
|
|
.header_bar_1 > div:first-child > div:hover {
|
|
background: rgba(127, 127, 127, 0.4);
|
|
border-radius: var(--border-radius);
|
|
}*/
|
|
|
|
.content-table {
|
|
height: calc(100% - 75px);
|
|
max-height: calc(100% - 75px);
|
|
min-height: calc(100% - 75px);
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 75px;
|
|
left: 0;
|
|
}
|
|
.content-table > tbody > tr:first-child > td:first-child {
|
|
width: 35%;
|
|
vertical-align: top;
|
|
padding: 20px;
|
|
padding-right: 10px;
|
|
height: 100%;
|
|
}
|
|
.content-table > tbody > tr:first-child > td > div {
|
|
display: inline-block;
|
|
width: 100%;
|
|
border: 3px solid var(--accent_color_bg);
|
|
border-radius: var(--border-radius);
|
|
padding: 10px;
|
|
box-shadow: var(--reversed_def_shadow);
|
|
background: var(--accent_color_bg_o2);
|
|
min-height: 150px;
|
|
}
|
|
.content-table > tbody > tr:first-child > td:last-child {
|
|
width: 65%;
|
|
height: 100px;
|
|
vertical-align: top;
|
|
padding: 20px;
|
|
padding-left: 10px !important;
|
|
}
|
|
.content-table > tbody > tr:first-child > td:last-child > div {
|
|
display: flex;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
padding: 15px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
.content-table > tbody > tr:first-child > td:last-child > div button {
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
margin-top: 5px;
|
|
background-color: var(--accent_color_bg_o);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
#umfrage_list > div {
|
|
padding: 10px;
|
|
border: 2px solid var(--accent_color_bg);
|
|
border-radius: var(--border-radius);
|
|
width: 100%;
|
|
min-height: 100px;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="header_bar_1">
|
|
<div>
|
|
<div>
|
|
<button onclick="location.href = './uebersicht.html?user=' + userData.name;" class="navigation">Meine Kurse</button>
|
|
</div>
|
|
</div>
|
|
<div><b>Auswertungen</b></div>
|
|
<div>
|
|
<button class="profile"></button>
|
|
</div>
|
|
</div>
|
|
<div class="header_bar_1_placeholder"></div>
|
|
|
|
<table class="content-table"><tr>
|
|
<td><div>
|
|
<div id="gesamt" class="selectable"></div>
|
|
</div></td>
|
|
<td><div>
|
|
<div id="umfrage_list"></div>
|
|
</div></td>
|
|
</tr></table>
|
|
|
|
<script>
|
|
|
|
const couchDB = new CouchDB();
|
|
setUserData(couchDB).then(init);
|
|
|
|
var gesamtAuswertung = [0,0,0, []];
|
|
|
|
async function loadStats() {
|
|
const gdiv = getId("gesamt");
|
|
const udiv = getId("umfrage_list");
|
|
|
|
udiv.innerHTML = "";
|
|
gesamtAuswertung = [0,0,0, []];
|
|
for (var i of userData.courses) {
|
|
const course = await couchDB.get("course:" + i);
|
|
if (course == null) continue;
|
|
|
|
const list = course["result_history"] ?? [];
|
|
for (var pos in list) {
|
|
const i2 = list[pos];
|
|
udiv.innerHTML += _createElement1(course, i2, i, pos);
|
|
}
|
|
udiv.innerHTML += _createElement1(course, {
|
|
"date": course.expire_date,
|
|
"questions": course.questions ?? [],
|
|
"result": course.result ?? []
|
|
}, i);
|
|
}
|
|
|
|
const bottomLabel = document.createElement("label");
|
|
bottomLabel.style = `display: inline-block; font-size: 5px;`;
|
|
bottomLabel.innerHTML = " ";
|
|
udiv.appendChild(bottomLabel);
|
|
|
|
let studenten = gesamtAuswertung[3].reduce((acc, val) => acc + val, 0) / gesamtAuswertung[3].length;
|
|
|
|
|
|
gdiv.innerHTML = `
|
|
<b>Gesamtbewertung:</b><br><br>
|
|
Positiv bewertet: ${round(gesamtAuswertung[0])}<br>
|
|
Neutral bewertet: ${round(gesamtAuswertung[1])}<br>
|
|
Negativ bewertet: ${round(gesamtAuswertung[2])}<br><br>
|
|
<i>Studenten im Durchschnitt:</i> ${round(studenten)}
|
|
`;
|
|
}
|
|
|
|
function _createElement1(course, data, name, pos = -1) {
|
|
const startDate = data.date;
|
|
const title = course.title;
|
|
|
|
var startD = "Unbekannt";
|
|
if (startDate) {
|
|
startD = new Date(startDate).toLocaleDateString('de-DE', {year: 'numeric', month: 'long', day: 'numeric'});
|
|
}
|
|
|
|
var statCount = [0,0,0];
|
|
for (var i in data.result) {
|
|
const result = data.result[i];
|
|
|
|
for (var i2 in result) {
|
|
const question = data.questions[i2];
|
|
const answer = result[i2];
|
|
|
|
if (question.type == "text") {
|
|
continue;
|
|
} else if (question.type == "scala") {
|
|
if (answer == 5 || answer == 4) {
|
|
statCount[0] ++;
|
|
} else if (answer == 3) {
|
|
statCount[1] ++;
|
|
} else if (answer == 1 || answer == 2) {
|
|
statCount[2] ++;
|
|
}
|
|
} else if (question.type == "emoji") {
|
|
if (answer == 3) {
|
|
statCount[0] ++;
|
|
} else if (answer == 2) {
|
|
statCount[1] ++;
|
|
} else if (answer == 1) {
|
|
statCount[2] ++;
|
|
}
|
|
}
|
|
}
|
|
gesamtAuswertung[3].push(result.length);
|
|
}
|
|
|
|
var total = statCount.reduce((acc, val) => acc + val, 0);
|
|
var percentages;
|
|
if (total > 0) {
|
|
percentages = statCount.map(value => (value / total) * 100);
|
|
} else {
|
|
percentages = [0, 0, 0];
|
|
}
|
|
|
|
var endNote;
|
|
var bttn;
|
|
if (percentages[0] > percentages[1] && percentages[0] > percentages[2]) {
|
|
endNote = "Überwiegend positiv";
|
|
gesamtAuswertung[0] ++;
|
|
bttn = `<button onclick='getXpPoints(this, 2, "${name}", ${pos})'>2 XP abholen</button>`;
|
|
} else if (percentages[2] > percentages[0] && percentages[2] > percentages[1]) {
|
|
endNote = "Überwiegend negativ";
|
|
gesamtAuswertung[2] ++;
|
|
bttn = '';
|
|
} else {
|
|
endNote = "Gemischt";
|
|
gesamtAuswertung[1] ++;
|
|
bttn = `<button onclick='getXpPoints(this, 1, "${name}", ${pos})'>1 XP abholen</button>`;
|
|
}
|
|
|
|
if ((data["got_xp"] ??= false) || pos == -1) {
|
|
bttn = '';
|
|
}
|
|
|
|
return `<div>
|
|
<table style="width: 100%; border-collapse:collapse; " class="selectable">
|
|
<tr>
|
|
<td style="vertical-align: top; width: 60%; border-bottom: 1px solid black;">
|
|
Umfrage vom ${startD}
|
|
</td>
|
|
<td style="vertical-align: top; text-align: right; width: 40%; border-bottom: 1px solid black;">
|
|
Kurs: ${title}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-left: 15px; display: inline-block; padding-top: 10px; vertical-align: top;">
|
|
Positive: ${round(percentages[0])}%<br>
|
|
Negative: ${round(percentages[2])}%<br>
|
|
Neutral: ${round(percentages[1])}%<br>
|
|
</td>
|
|
<td style="padding-top: 10px; vertical-align: top;">
|
|
<u>Endnote</u>: ${endNote}<br>
|
|
${bttn}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>`;
|
|
}
|
|
|
|
function round(n) {
|
|
return Number(n.toFixed(2)).toString();
|
|
}
|
|
|
|
async function init() {
|
|
await loadStats();
|
|
}
|
|
|
|
async function getXpPoints(elm, xp, name, pos) {
|
|
elm.remove();
|
|
const course = await couchDB.get("course:" + name);
|
|
|
|
const history = course.result_history ??= [];
|
|
|
|
const data = history[pos];
|
|
if (data == null) {
|
|
console.error(`data is null at course ${name} history=${pos}`);
|
|
return;
|
|
}
|
|
|
|
data["got_xp"] = true;
|
|
|
|
if (await levelUpXP(couchDB, userData, xp)) {
|
|
playLevelSound();
|
|
} else {
|
|
playXPSound();
|
|
}
|
|
|
|
await couchDB.set("course:" + name, course);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |