109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<!-- https://www.delftstack.com/de/howto/javascript/count-down-timer-in-javascript/ */ -->
|
|
<!-- https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ -->
|
|
|
|
<html>
|
|
<head>
|
|
<title>Chaostreff Chemnitz - KI-Promptbattle</title>
|
|
<script>
|
|
|
|
const questions = [
|
|
'',
|
|
'Male Chemnitz im Mittelalter, zum Zeitpunkt deiner Geburt, in 2025, in 2026 und im Jahre 2100.',
|
|
'Erzeuge ein Bild mit einer Chemnitzer Sehenswürdigkeit (Roter Turm, Karl-Marx-Monument, Markuskirche, Schlossberg, Hauptbahnhof)',
|
|
'"Wie könnte die bunte Esse in Zukunft aussehen?',
|
|
'Male ein Bild im Stile von Karl-Schmidt-Rottluff ohne seinen Namen zu verwenden.',
|
|
'Erstelle ein Bild von einem in Chemnitz beheimaten Superheld.',
|
|
'Erstelle ein typisches Bild vom Kaßberg/Sonnenberg.',
|
|
'Erstelle ein Bild mit den Lampen aus dem "Palast der Republik". (siehe Decke)',
|
|
'Erstelle ein Bild mit einem Vulkanausbruch in der Stadt (versteinerter Wald)',
|
|
'Erzeuge ein Bild mit dem Wort "Chemnitz"',
|
|
'Wie sähe ein Chemnitz Graffitti von Banksy aus?',
|
|
];
|
|
|
|
let questionnum = 0;
|
|
let countInterval = null;
|
|
|
|
function paddedFormat(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
|
|
function startCountDown(duration, element) {
|
|
let secondsRemaining = duration;
|
|
let min = 0;
|
|
let sec = 0;
|
|
|
|
clearInterval(countInterval);
|
|
countInterval = setInterval(function() {
|
|
min = parseInt(secondsRemaining / 60);
|
|
sec = parseInt(secondsRemaining % 60);
|
|
|
|
element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
|
|
|
|
secondsRemaining = secondsRemaining - 1;
|
|
if (secondsRemaining < 0) {
|
|
clearInterval(countInterval)
|
|
};
|
|
}, 1000);
|
|
}
|
|
|
|
|
|
document.addEventListener("keydown", function(event) {
|
|
if (event.key === "b") {
|
|
|
|
document.getElementById('count-down-timer').style.color = "black";
|
|
|
|
let time_minutes = 1; // Value in minutes
|
|
let time_seconds = 0; // Value in seconds
|
|
|
|
let duration = time_minutes * 60 + time_seconds;
|
|
|
|
element = document.querySelector('#count-down-timer');
|
|
element.textContent =
|
|
`${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
|
|
|
|
startCountDown(--duration, element);
|
|
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", function(event) {
|
|
if (event.key === "PageDown") {
|
|
if (questionnum == questions.length - 1) { }
|
|
else { questionnum = (questionnum + 1) }
|
|
document.getElementById('question').innerText = questions[questionnum];
|
|
document.getElementById('count-down-timer').style.color = "white";
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", function(event) {
|
|
if (event.key === "PageUp") {
|
|
if (questionnum == 0) { }
|
|
else { questionnum = (questionnum - 1) }
|
|
document.getElementById('question').innerText = questions[questionnum];
|
|
document.getElementById('count-down-timer').style.color = "white";
|
|
}
|
|
});
|
|
|
|
//alert(questions.length);
|
|
</script>
|
|
<style>
|
|
html { font-family: Arial;
|
|
text-align: center; }
|
|
|
|
#count-down-timer { font-size: 100pt;
|
|
color: white; }
|
|
|
|
h2 { font-size: 50pt;
|
|
visibility: show; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p><h1 class="text-center" id="count-down-timer">01:00</h1></p>
|
|
|
|
<p><h2 id="question"></h2></p>
|
|
|
|
</body>
|
|
</html>
|