g3.1

help/documentation.md

@@ -74,9 +74,18 @@ async function setUserData(CouchDB couchDB) -> bool;
 async function updateUserData(CouchDB couchDB, object userData) -> Map;
 ```
 
+##Other
+
+```
+//Spielt einen sound ab
+//(Funktioniert nur, wenn vorher eine Nutzerinteraktion erfolgt ist (Button-Click etc.))
+async function playSound(string src) -> void;
+```
+
 ##Nützliche CSS-Klassen
 - .profile = Runde Profilbox
 - overlay = Overlay
 - .header_bar_1 = Headerbar
 - .header_bar_1_placeholder = Platzhalter für Headerbar
 - .add_button = Runder "Hinzufügen"-Knopf
+

lib/basic.js

@@ -469,3 +469,15 @@ async function _showProfileSave(elm) {
 	
 	hideOverlay("profile_overlay");
 }
+
+async function playSound(src) {
+	const elm = document.createElement("audio");
+	elm.innerHTML = `
+<source src="${src}" type="audio/mpeg"></source>
+	`;
+	try {
+		await elm.play();
+	} catch(err) {
+		console.log("Error playing audio:", err);
+	}
+}

prof/auswertung.html

@@ -9,7 +9,23 @@
 </head>
 <body>
 <style>
-.header_bar_1 > div:first-child > div {
+
+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;
@@ -17,7 +33,7 @@
 .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);
@@ -71,9 +87,8 @@
 
 <div class="header_bar_1">
 	<div>
-		<div onclick="location.href = './uebersicht.html?user=' + userData.name;">
-			<div style="border-radius: 50%; border: 1px solid black; display: inline-block; text-align: center; width: 32px; font-size: 25px;">⇦</div>
-			&nbsp;&nbsp;Meine Kurse
+		<div>
+			<button onclick="location.href = './uebersicht.html?user=' + userData.name;" class="navigation">Meine Kurse</button>
 		</div>
 	</div>
 	<div><b>Auswertungen</b></div>

prof/kursAnzeige.html

@@ -13,18 +13,17 @@ setUserData(couchDB);
 </script>
 <title>Kurs Anzeige</title>
 </head>
-<div>
 <body>
 	<div class="header_bar_1">
 	<button class="back" onclick="location.href = './uebersicht.html?user=' + userData.name;">
 		Übersicht
     </button>
 	<div>
-		<button class="profile" onclick='showOverlay("miniProfile")' style="position: absolute; top: 7px; right: 15px;">
-			<overlay id="miniProfile">
+		<!-- <button class="profile" onclick='showOverlay("miniProfile")' style="position: absolute; top: 7px; right: 15px;">
+			<overlay class="my_overlay" id="miniProfile">
 			</overlay>
-		</button>
-	</div>
+		</button> -->
+		<button class="profile" style="position: absolute; top: 7px; right: 15px;"></button>
 	</div>
 	</div>
 	<div class="contentLayout">	
@@ -84,7 +83,7 @@ setUserData(couchDB);
 
 			<button class="questionResults" onclick='questionOverlay("${overlayId}", "${index}")'>
 				Auswertung
-				<overlay id="${overlayId}">
+				<overlay class="my_overlay" id="${overlayId}">
 					<div class="overlayTitle">
 						${question.title}:
 					</div>
@@ -191,7 +190,7 @@ setUserData(couchDB);
 	transition: width 0.5s ease;
 }
 
-overlay {
+.my_overlay {
 	width: 100vh;
 	min-height: 30vh;
 }
@@ -199,7 +198,8 @@ overlay {
 .overlayTitle {
 	font-weight: bold;
 	background: var(--accent_color_bg);
-	border-radius: var(--border-radius) + 20px;
+	/*border-radius: calc(var(--border-radius) + 20px);*/
+	border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
 .overlayTitle {
@@ -215,9 +215,15 @@ overlay {
 	flex-direction: column;
 	min-width: 0;
 	background: var(--accent_color_bg_o);
-	border-radius: var(--border-radius) + 20px;
+	/*border-radius: calc(var(--border-radius) + 20px);*/
 	max-width: 90vh;
 }
+#answerContainer0 .overlayTextRes:last-child {
+	border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+#answerContainer1 .overlayScalaRes:last-child > .overlayTextRes {
+	border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
 
 .contentLayout {
 	display: flex;

prof/uebersicht.html

@@ -78,7 +78,7 @@ button.auswertung:hover {
 
 .course-card {
 	position: relative;
-	width: 800px;
+	width: 100%;
 	min-height: 300px;
 	padding: 16px;
 	background: var(--accent_color_bg_o);
@@ -186,11 +186,9 @@ button.auswertung:hover {
 })();
 	
 
-	function editCourse(courseId) {
-		return
-	}
-
-	
+function editCourse(courseId) {
+	showEditCourse(courseId);
+}
 
 </script>
 	
@@ -264,8 +262,6 @@ button.auswertung:hover {
 }
 </style>
 
-<button onclick="showEditCourse('bucket')">Open Course:Bucket</button> <!--show overlay-->
-
 <overlay id="edit_course">
 <input placeholder="Kursname" style="width: calc(100% - 50px);"><br><br>
 Beschreibung:

student/skilltree.js

@@ -1,4 +1,7 @@
 //=> use showSkillTree() -> void;
+//=> use playLevelSound() -> void;
+//=> use playXPSound() -> void;
+
 
 const getSkillTree = () => ({
 	id: "root",
@@ -292,3 +295,10 @@ function generateSkillTree(skillTree, abilities) {
 	drawNode(null, skillTree);
 	return [svg, levelCount];
 }
+
+async function playLevelSound() {
+	await playSound("../audio/levelup2.mp3");
+}
+async function playXPSound() {
+	await playSound("../audio/levelup1.mp3");
+}