gmci_project/prof/auswertung.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</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 {
	height: 100%;
	max-height: 100%;
	padding: 15px;
	overflow-y: scroll;
	overflow-x: hidden;
}
#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;
		
		for (var i2 of (course["result_history"] ?? [])) {
			udiv.innerHTML +=	_createElement1(course, i2);
		}
		udiv.innerHTML +=	_createElement1(course, {
			"date": course.expire_date,
			"questions": course.questions ?? [],
			"result": course.result ?? []
		});
	}
	
	let studenten = gesamtAuswertung[3].reduce((acc, val) => acc + val, 0) / gesamtAuswertung[3].length;

	
	gdiv.innerHTML = `
<b>Gesamtbewertung:</b><br><br>
Positiv bewertet: ${gesamtAuswertung[0]}<br>
Neutral bewertet: ${gesamtAuswertung[1]}<br>
Negativ bewertet: ${gesamtAuswertung[2]}<br><br>
<i>Studenten im Durchschnitt:</i> ${studenten}
	`;
}

function _createElement1(course, data) {
	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;
	if (percentages[0] > percentages[1] && percentages[0] > percentages[2]) {
		endNote = "Überwiegend positiv";
		gesamtAuswertung[0] ++;
	} else if (percentages[2] > percentages[0] && percentages[2] > percentages[1]) {
		endNote = "Überwiegend negativ";
		gesamtAuswertung[2] ++;
	} else {
		endNote = "Gemischt";
		gesamtAuswertung[1] ++;
	}

	
	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;">
	&nbsp;&nbsp;Kurs: ${title}
</td>
</tr>
<tr>
<td style="padding-left: 15px; display: inline-block; padding-top: 10px; vertical-align: top;">
	Positive: ${percentages[0]}%<br>
	Negative: ${percentages[2]}%<br>
	Neutral: ${percentages[1]}%<br>
</td>
<td style="padding-top: 10px; vertical-align: top;">
	<u>Endnote</u>: ${endNote}
</td>
</tr>
</table>
	</div>`;
}

async function init() {
	await loadStats();
}

</script>
</body>
</html>