247 lines
6.6 KiB
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>
|