gmci_project/student/umfrage.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>
<title>Umfrage</title>
</head>
<body>
<style>

.main-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 94%;
	width: 94%;
	max-width: 700px;
	box-shadow: var(--def-shadow);
	border-radius: var(--border-radius);
	background-color: var(--accent_color_bg_o2);
	text-align: center;
	padding: 15px;
}

.bttn-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	font-size: 20px;
	font-weight: bold;
	border-radius: var(--border-radius);
	border: 1px solid black;
	background: var(--accent_color_bg);
}
.bttn-close:hover {
	box-shadow: var(--reversed_def_shadow);
}

#content {
	display: flex;
	width: 100%;
	flex-direction: column;
}
#content > div:first-child {
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: var(--border-radius);
	padding: 30px 10px;
	/*min-height: 120px;*/
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 40px;
	width: 100%;
}
#content > div:nth-child(2) {
	display: inline-block;
	min-height: 200px;
}
#content > div:nth-child(2) > textarea {
	width: 100%;
	resize: none;
	border-radius: var(--border-radius);
	border: none;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 20px;
	min-height: 200px;
	font-size: 16px;
}
#content > div:nth-child(2) > input {
	width: 50%;
	margin-top: 50px;
}
#content > .weiter-btn {
	position: absolute;
	text-align: center;
	bottom: 80px;
	left: 50%;
	font-size: 20px;
	transform: translateX(-50%);
	border-radius: var(--border-radius);
}
#content > div:last-child {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 20px;
	left: 0;
}

.weiter-btn {
	display: inline-block;
	min-width: 150px;
	padding: 10px;
	font-size: 18px;
	text-align: center;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px;
}
.weiter-btn:hover {
	background-color: #0056b3;
}

.end-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	text-align: center;
}

</style>

<div class="main-container" id="container1">

<button class="bttn-close" onclick='close_page()'>X</button>
<div style="height: 60px;"></div>
<div id="content"></div>
</div>

<div class="main-container"  id="container2" style="display: none;">
	<div class="end-dialog">
		<h2>Vielen Dank für deine Teilnahme!</h2><br>
		<button class="weiter-btn" onclick="onEndEvent(this)">
			Zurück zur Hauptseite
		</button>
	</div>
</div>

<script>

const couchDB = new CouchDB();
var courseData = null;
async function setCourse() {
	const args = getURLArgsMap();
	const coursename = args.course;
	if (!coursename) return false;
	const kurs = await couchDB.get("course:" + coursename);
	if (!kurs) return false;
	courseData = kurs;
	
	return true;
}
async function updateCourseAnswer(answer) {
	const args = getURLArgsMap();
	const coursename = args.course;
	if (!coursename) return null;
	const kurs = await couchDB.get("course:" + coursename);
	if (!kurs) return null;
	kurs.result.push(answer);
	await couchDB.set("course:" + coursename, kurs);
	return kurs;
}
function close_page() {
	location.href = "./uebersicht.html?user=" + userData.name;
}

function createNavBar(pos) {
	const div = document.createElement("div");
	div.style = `
width: 100%;
text-align: center;
display: flex;
font-size: 30px;
font-weight: bold;
align-items: middle;
justify-content: center;
flex-direction: row;
	`;
	
	const prevPage = document.createElement("label");
	prevPage.innerHTML = "&nbsp;&lt;&nbsp;";
	if (pos-1 >= 0) {
		prevPage.addEventListener("click", () => updateContent(pos, pos-1));
	} else {
		prevPage.style.opacity = "0.4";
	}
	prevPage.style.marginTop = "3px";
	div.appendChild(prevPage);
	
	for (var i = 0; i < courseData.questions.length; i++) {
		const isSel = i == pos;
		const divI = document.createElement("div");
		divI.style = `
display: inline-block;
padding-left: 10px;
padding-right: 10px;
text-align: center;
		`;
		divI.innerHTML = `
<label style="border-radius: 50%; display: inline-block; width: 15px; height: 15px; background: ${isSel ? "none": "black"}; border: 2px solid black;"></label>
		`;
		
		if (!isSel) {
			const pos2 = i;
			divI.addEventListener("click", () => updateContent(pos, pos2));
		}
		div.appendChild(divI);
	}
	
	const nextPage = document.createElement("label");
	nextPage.innerHTML = "&nbsp;&gt;&nbsp;";
	if (pos+1 < courseData.questions.length) {
		nextPage.addEventListener("click", () => updateContent(pos, pos+1));
	} else {
		nextPage.style.opacity = "0.4";
	}
	nextPage.style.marginTop = "3px";
	div.appendChild(nextPage);
	
	return div;
}

function setUmfrage(position = 0) {
	const elm = getId("content");
	
	const data = courseData.questions[position];
	
	var input;
	if (data.type == "scala") {
		input = `Schlecht&nbsp;<input class="input" data="scala" type="range" min="1" max="5">&nbsp;Gut`;
	} else {
		input = `<textarea class="input" data="text" placeholder="Text hier eingeben..."></textarea>`;
	}
	
	elm.innerHTML = `
<div>${data.title}</div>
<div>${input}</div>
<button class="weiter-btn" onclick="updateContent(${position}, ${position+1})">${
	position == courseData.questions.length-1 ? "Umfrage beenden": "Weiter"
}</button>
	`;
	
	elm.appendChild(createNavBar(position));
}


var finalResult = null;
function updateContent(old_page, page) {
	if (page < 0) page = 0;
	
	const inp = getId("content").querySelector(".input");
	const type = inp.getAttribute("data");
	if (type == "scala") {
		try {
			finalResult[old_page] = parseInt(inp.value);
		} catch(err) {
			console.error(err);
		}
	} else {
		finalResult[old_page] = inp.value;
	}
	
	if (page >= courseData.questions.length) {
		getId("container1").style.display = "none";
		getId("container2").style.display = "unset";
		updateCourseAnswer(finalResult);
		return;
	}
	
	setUmfrage(page);
	
	getId("content").querySelector(".input").focus();
}

async function onEndEvent(elm) {
	location.href = "./uebersicht.html?user=" + userData.name;
}

(async () => {
	await setUserData(couchDB);
	if (!(await setCourse())) {
		console.error("No course defined");
		return;
	}
	
	finalResult = [];
	for (var i in courseData.questions) finalResult.push(null);
	
	setUmfrage();
})();

</script>
</body>

</html>