Initial Version
This commit is contained in:
parent
69c96ee16a
commit
bc5ee4a469
GPG Key ID:
43610F311720D3DA
|
|
@ -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>
|
||||
Reference in New Issue