This repository has been archived on 2024-12-04. You can view files and clone it, but cannot push or open issues or pull requests.
KlausurSlide/Klausur.html

247 lines
6.6 KiB
HTML

<!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>