initial upload
This commit is contained in:
commit
2d34044484
|
|
@ -0,0 +1,108 @@
|
|||
<!-- 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 questionsum
|
||||
let questionnum = 0;
|
||||
|
||||
function paddedFormat(num) {
|
||||
return num < 10 ? '0' + num : num;
|
||||
}
|
||||
|
||||
function startCountDown(duration, element) {
|
||||
let secondsRemaining = duration;
|
||||
let min = 0;
|
||||
let sec = 0;
|
||||
|
||||
let 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";
|
||||
clearInterval(countInterval);
|
||||
}
|
||||
});
|
||||
|
||||
//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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Chaostreff Chemnitz - KI-Promptbattle</title>
|
||||
<script>
|
||||
function paddedFormat(num) {
|
||||
return num < 10 ? '0' + num : num;
|
||||
}
|
||||
|
||||
function startCountDown(duration, element) {
|
||||
let secondsRemaining = duration;
|
||||
let min = 0;
|
||||
let sec = 0;
|
||||
|
||||
let 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);
|
||||
}
|
||||
|
||||
window.onclick = function() {
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
</script>
|
||||
<style>
|
||||
html { font-family: Arial;
|
||||
text-align: center; }
|
||||
|
||||
h1 { font-size: 100pt;
|
||||
visibility:show; }
|
||||
|
||||
h2 { font-size: 50pt;
|
||||
visibility:show; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p onkeypress="function(runtimer)"><h1 class="text-center" id="count-down-timer">01:00</h1></p>
|
||||
|
||||
<p><h2 id="question"></h2></p>
|
||||
|
||||
<b onclick="document.getElementById('question').innerText = '';">empty</b>
|
||||
<b onclick="document.getElementById('question').innerText = 'Male Chemnitz im Mittelalter, zum Zeitpunkt deiner Geburt, in 2025, in 2026 und im Jahre 2100.';">Q1</b>
|
||||
<b onclick="document.getElementById('question').innerText = 'Erzeuge ein Bild mit einer Chemnitzer Sehenswürdigkeit (Roter Turm, Karl-Marx-Monument, Markuskirche, Schlossberg, Hauptbahnhof)';">Q2</b>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue