<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
{{#if title }}
<title>Jugendwettbewerb Informatik – {{title}}</title>
{{else}}
<title>Jugendwettbewerb Informatik: Programmieren – leichter, als du denkst!</title>
{{/if}}
<link rel="icon" href="/static/images/favicon.png" type="image/png">
<style>
body{
margin: 0px;
padding: 0px;
overflow: hidden;
font-family:sans-serif;
}
:root {
--vh: 100vh;
}
#bar, #bar>div {
display:inline-block;
padding: 8px;
margin:0px;
background: #8ca405;
color:white;
font-size:12pt;
height: 35px;
overflow-y:hidden;
}
#bar {
display:block;
padding:0px;
width:100vw;
}
#bar>.nav {
float:right;
}
#bar>#time {
float:right;
padding:0px 8px;
text-align:right;
}
#timetext{
padding:0px;
margin:0px;
font-size:8pt;
}
#timetime{
padding:0px;
margin:0px;
margin-top:-4px;
font-size:18pt;
}
#ttsec {
font-size:8pt;
}
#bar>#hamburger, #bar>#menu, #bar>#time {
background: #6d8004;
font-weight:bold;
padding-left: 10px;
padding-right: 10px;
}
#bar>div.highlight {
background: #f5fbe8;
color:#334900;
font-size: 10pt;
}
.max10 {
max-width: 10vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.max20 {
max-width: 20vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
iframe {
width: 100vw;
border: 0px;
min-height: calc(100vh - 35px);
min-height: calc(var(--vh) - 35px);
}
a {
color: #eee;
text-decoration: none;
}
{{#if readonly}}
#bar, #bar>div {
background: #a48c05
}
#bar>#hamburger, #bar>#menu, #bar>#time {
background: #806d04;
}
#bar>div.highlight {
color:#493300;
}
{{/if}}
</style>
</head><body style="">
<div id="bar">
{{#if contestname}}
<div id="menu" class="max20" title="{{contestname}}">
{{#if contestid}}
<a href="/contest/{{contestid}}">{{contestname}}</a>
{{else}}
{{contestname}}
{{/if}}
</div>
{{/if}}
<div class="max20" title="{{name}}">
{{name}}
</div>
{{#each subtasks}}
{{#if active}}
<div class="highlight max10" title="{{linktext}}">
{{linktext}}
</div>
{{else}}
<div class="max10" title="{{linktext}}">
<a href="/task/{{id}}">{{linktext}}</a>
</div>
{{/if}}
{{/each}}
{{#if readonly}}
<div class="max10" title="Review-Modus">
<em>Review-Modus</em>
</div>
{{/if}}
{{#unless readonly}}
{{#if time_info.has_timelimit}}
<div id="time" class="max10" title="Verbleibende Zeit">
<div id="timetext">
Verbleibende Zeit
</div>
<div id="timetime">
{{time_left_mh_formatted}}<span id="ttsec">{{time_left_sec_formatted}}</span>
</div>
<script>
var seconds_left_at_start = {{time_info.left_secs_total}};
var timerStart = Date.now();
function lz(a) {
var b = a.toString();
if (b.length < 2) {
return "0" + b;
}
return b;
}
function updateTimer() {
var seconds_passed = (Date.now() - timerStart) / 1000;
var seconds_left = seconds_left_at_start - seconds_passed;
var timer_sign = "";
{{#if time_info.exempt_from_timelimit}}
if (seconds_left < 0) {
seconds_left = -seconds_left;
timer_sign = "–";
}
{{/if}}
if (seconds_left > 0) {
var hour = seconds_left / 3600 | 0;
var min = (seconds_left / 60 | 0) % 60 | 0;
var sec = seconds_left % 60 | 0;
text = timer_sign + hour.toString() + ":" + lz(min) + "<span id=\"ttsec\">:" + lz(sec) + "</span>";
document.getElementById("timetime").innerHTML = text;
}
else if (seconds_left > -10) {
document.getElementById("timetime").innerHTML = "0:00<span id=\"ttsec\">:00</span>";
}
else {
document.getElementById("contestpage").click()
}
}
setInterval(updateTimer, 300);
</script>
</div>
{{/if}}
{{/unless}}
<script>
function redirectOverview() {
window.location.href = "/contest/{{contestid}}";
}
function updateIframeHeight() {
var vh = window.innerHeight;
document.documentElement.style.setProperty('--vh', vh + "px");
setTimeout(function() {
var vh = window.innerHeight;
document.documentElement.style.setProperty('--vh', vh + "px");
}, 1000)
}
updateIframeHeight();
window.addEventListener("resize", updateIframeHeight);
function enterFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
var fullscreen = false;
function toggleFullscreen(element) {
if (fullscreen) {
exitFullscreen();
fullscreen = false;
document.getElementById("tgfs").innerText = "⇱";
}
else {
enterFullscreen(element);
fullscreen = true;
document.getElementById("tgfs").innerText = "⇲";
}
}
</script>
<div class="nav max10" onclick="toggleFullscreen(document.documentElement);" title="Vollbild">
<a href="javascript:;"><span id="tgfs">⇱</span> Vollbild</a>
</div>
{{#if contestid}}
<div class="nav max10" title="Übersicht">
<a href="/contest/{{contestid}}" id="contestpage">⇧ Übersicht</a>
</div>
{{/if}}
{{#if nexttask}}
<div class="nav max10" title="Nächste Aufgabe">
<a href="{{ nexttask }}">⇨ Nächste Aufgabe</a>
</div>
{{/if}}
{{#if prevtask}}
<div class="nav max10" title="Vorherige Aufgabe">
<a href="{{ prevtask }}">⇦ Vorherige Aufgabe</a>
</div>
{{/if}}
</div>
</div>
<iframe src="/{{taskpath}}#taskid={{taskid}}&csrftoken={{csrf_token}}{{#if readonly}}&readonly=true{{/if}}" name="taskframe">Leider unterstützt ihr Browser keine Frames. Sie können die Aufgabe auch manuell aufrufen: <a href="/{{taskpath}}#taskid={{taskid}}&csrftoken={{csrf_token}}{{#if readonly}}&readonly=true{{/if}}">Aufgabe manuell bearbeiten</a>.</iframe>
</body></html>