From bc5ee4a46992f2c989e36020f83d9771978fb9c7 Mon Sep 17 00:00:00 2001
From: Felix Homa <felix.homa@cs.tu-dortmund.de>
Date: Wed, 3 Aug 2022 21:01:05 +0200
Subject: [PATCH] Initial Version

---
 Klausur.html | 247 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 247 insertions(+)
 create mode 100644 Klausur.html
diff --git a/Klausur.html b/Klausur.html
new file mode 100644
index 0000000..842527b
--- /dev/null
+++ b/Klausur.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			body {
+				display: grid;
+				height: 100vh;
+				width: 100vw;
+				overflow: hidden;
+				grid-template-rows: 15vh 15vh 70vh;
+				grid-template-columns: 50vw 50vw;
+				padding: 0px;
+				margin: 0px;
+				font-family: sans-serif;
+			}
+			
+			h1 {
+				text-align: center;
+				font-size: 8vh;
+				margin: 4px;
+				padding: 4px;
+			}
+			
+			h2 {
+				font-size: 4vh;
+				text-align: center;
+				margin: 4px;
+				padding: 4px;
+			}
+			
+			li{
+				padding-top: 1vh;
+				list-style-type: '-  ';
+			}
+			
+			.time {
+				/*font-family: monospace;*/
+				text-align: right;
+			}
+			
+			#header {
+				/*background-color: #ff8;*/
+				grid-area: 1 / 1 / span 1 / span 2;
+				text-align: center;
+				font-weight: 600;
+			}
+			
+			#clock_div {
+				/*background-color: #ff8;*/
+				grid-area: 2 / 1 / span 1 / span 2;
+				text-align: center;
+				font-weight: 600;
+			}
+			
+			#clock {
+				font-size: 12vh;
+			}
+			
+			#left {
+				/*background-color: #f88;*/
+				grid-area: 3 / 1;
+				font-size: 3vh;
+			}
+			#right {
+				/*background-color: #8f8;*/
+				grid-area: 3 / 2;
+				font-size: 3vh;
+			}
+			
+			#right table {
+				padding-top: 15vh;
+				font-size: 4vh;
+			}
+			#right td {
+				padding-top: 1vh;
+				padding-left: 1vw;
+			}
+			
+			#right td.time {
+				margin: 0.5vh;
+				padding-left: 1vw;
+				font-weight: 600;
+			}
+			
+			#sitzordnung {
+				width: 100%;
+			}
+			#sitzordnung td {
+				height: 2vh;
+				width: 2vh;
+			}
+			#sitzordnung .ok {
+				background-color: #88f;
+			}
+			#sitzordnung .nok {
+				background-color: #f88;
+			}
+			
+			#start_btn {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="header">
+			<h1 align="center">Betriebssysteme Klausur</h1>
+		</div>
+		<div id="clock_div">
+			<h1 id="clock" class="time" style="text-align: center">...</h1>
+		</div>
+		<div id="left">
+			<h2>Sitzordnung</h2>
+			<table id="sitzordnung"></table>
+			<script>
+				// Tabelleninhalt
+				var so = "<tr><td colspan=\"100%\" style=\"text-align: center;\">Tafel (vorne)</td></tr>";
+				for(var i=0;i<5;i++) {
+					so+="<tr>"
+					for(var j=0;j<6;j++){
+						so+="<td class=\"ok\"></td>";
+						so+="<td class=\"nok\"></td>";
+						so+="<td class=\"nok\"></td>";
+					}
+					so+="<td class=\"ok\"></td>";
+					so+="</tr><tr>";
+					for(var j=0;j<6;j++){
+						so+="<td class=\"nok\"></td>";
+						so+="<td class=\"nok\"></td>";
+						so+="<td class=\"nok\"></td>";
+					}
+					so+="<td class=\"nok\"></td>";
+					so+="</tr>";
+				}
+				document.getElementById("sitzordnung").innerHTML=so;
+			</script>
+			<ul>
+				<li>Beginnend von vorne / der Tafel</li>
+				<li>1 Reihe belegt, 1 Reihe frei</li>
+				<li>2 freie Plätze zwischen den belegten Plätzen innerhalb einer Reihe</li>
+				<li>also die blauen Plätze in der Abbildung nutzen</li>
+			</ul>
+		</div>
+		<div id="right">
+			<h2>Vorbereitung</h2>
+			<ul>
+				<li>Elektronische Geräte ausschalten und in der Tasche verstauen. (ja, auch Smart-Watches)</li>
+				<li>Auch ein Etui gehört in die Tasche</li>
+				<li>Studierendennachweis (oder Studierendenausweis) <b>UND</b> Lichtbildausweis bereit legen</li>
+				<li>Taschen und Jacken in die Sitzreihe vor Ihnen legen.</li>
+				<li>Am Platz sollten sich befinden:
+					<ul>
+						<li>dokumentenechtes Schreibwerkzeug (aka. Kugelschreiber)</li>
+						<li>Studierendennachweis</li>
+						<li>Lichtbildausweis</li>
+						<li>1 DIN-A4 <i>Spickzettel</i></li>
+						<li>Getränk</li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+		<div id="start_btn"><input type="submit" value="Start" autofocus="autofocus" /></div>
+		<script>
+			var exam_duration = 60; // Normale Bearbeitungszeit in Minuten
+			var extra_duration = 5; // "Namen eintragen"-Zeit in Minuten
+			var early_cutoff = 20; // Frühzeitige Abgabefrist in Minuten vom Ende
+			var startTimeH=-1;
+			var startTimeM=0;
+			var endH = -1;
+			var endM = 0;
+			function start_exam() {
+				document.getElementById("start_btn").onclick=""; // Aktion für den Start-Button deaktivieren
+				document.getElementById("start_btn").innerHTML=""; // Start-Button entfernen
+				if(startTimeH==-1) // Zeit nur setzen, wenn diese nicht bereits gesetzt wurde
+				{
+					startTimeH = new Date().getHours();
+					startTimeM = new Date().getMinutes();
+					startTimeM++;
+					if(startTimeM>=60) {
+						startTimeM=0;
+						startTimeH++;
+					}
+					console.log("Start: " + startTimeH + ":" + startTimeM);
+				}
+				
+				// Startzeitpunkt der eigentlichen Bearbeitungszeit
+				var wtH=startTimeH;
+				var wtM=startTimeM + extra_duration;
+				while(wtM>=60) {
+					wtM-=60;
+					wtH++;
+				}
+				
+				// Ende der Bearbeitungszeit
+				endH = startTimeH;
+				endM = startTimeM + extra_duration + exam_duration;
+				while(endM>=60) {
+					endM-=60;
+					endH++;
+				}
+				
+				// Frist für vorzeitige Abgabe
+				var earlyH = startTimeH;
+				var earlyM = startTimeM+extra_duration+exam_duration-early_cutoff;
+				while(earlyM>=60) {
+					earlyM-=60;
+					earlyH++;
+				}
+				// Inhalte setzen (aka. Vorbereitung und Sitzordnung weg, dafür die Zeitpunkte anzeigen)
+				document.getElementById("left").innerHTML="";
+				document.getElementById("right").innerHTML="<table>"
+					+ "<tr><td>Start: </td><td class=\"time\">" + startTimeH + ":" + (startTimeM<10?"0":"") + startTimeM +"</td></tr>"
+					+ "<tr><td>Start der Bearbeitungszeit: </td><td class=\"time\">" + wtH + ":" + (wtM<10?"0":"") + wtM +"</td></tr>"
+					+ "<tr><td>Vorzeitige Abgabe bis: </td><td class=\"time\">" + earlyH + ":" + (earlyM<10?"0":"") + earlyM +"</td></tr>"
+					+ "<tr style=\"text-decoration: underline; font-size: 5vh;\"><td>Ende der Bearbeitungszeit: </td><td class=\"time\">" + endH + ":" + (endM<10?"0":"") + endM +"</td></tr>"
+					+ "</table>";
+			}
+			
+			var clockUpdate = function() {
+				var now = new Date();
+				var secms = now.getMinutes()
+				document.getElementById("clock").innerHTML = new Date().toISOString().replace("T"," ").replace("Z","");
+				document.getElementById("clock").innerHTML = now.getHours() + ":" + (now.getMinutes()<10?"0":"")+now.getMinutes();
+				var hh=endH;
+				var hm=endM-30;
+				if(hm <0) {
+					hm+=60;
+					hh--;
+				}
+				if(endH!=-1 && endH<=now.getHours() && endM<=now.getMinutes()) {
+					document.body.style.backgroundColor="#faa";
+				}
+				else if(endH!=-1 && now.getHours()==hh && now.getMinutes()==hm && now.getSeconds() < 2 && now.getMilliseconds()<500) {
+					document.body.style.backgroundColor="#ffa";
+				}
+				else {
+					document.body.style.backgroundColor="";
+				}
+			};
+			setInterval(clockUpdate, 1);
+			document.getElementById("start_btn").onclick=start_exam;
+			document.getElementById("start_btn").firstChild.onsubmit=start_exam;
+		</script>
+	</body>
+</html>
\ No newline at end of file
