231 lines
5.6 KiB
HTML
231 lines
5.6 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/ -->
|
|
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Chaostreff Chemnitz - KI-Promptbattle</title>
|
|
<script>
|
|
|
|
const qtext = [
|
|
'',
|
|
|
|
'Male Chemnitz im Mittelalter.',
|
|
'Erstelle ein Bild von einem in Chemnitz beheimaten Superheld.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Male Chemnitz im Jahr 1945.',
|
|
'Entwerfe eine Briefmarke mit dem niedlichsten Hund der Welt.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
'Wie könnte die bunte Esse in Zukunft aussehen?',
|
|
'Erstelle ein Bild von einem geschäftlichen Handschlag bei Vertragsabschluss als Stockphoto.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Mal ein Bild im Stile von Karl-Schmidt-Rottluff ohne seinen Namen zu verwenden.',
|
|
'Erstelle ein sozialistische Propagandaplakat von Iwan Lokomofeilow bei seiner Arbeit (Feilen einer Lokomotive aus einem Stück).',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Erstelle ein Bild mit den Lampen aus dem “Palast der Republik”. (siehe Decke)',
|
|
'Erstelle ein Bild mit einem Vulkanausbruch in der Stadt. (versteinerter Wald)',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Erzeuge ein Bild mit dem Wort “Chemnitz”.',
|
|
'Erzeuge ein Bild mit dem "Roten Turm" in Chemnitz.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Erstelle ein typisches Bild vom Kaßberg.',
|
|
'Erzeuge ein Bild mit dem Wort “Chaostreff”,',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Erstelle ein typisches Bild vom Sonnenberg.',
|
|
'Erzeuge ein Bild mit dem Karl-Marx-Monument in Chemnitz.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Wie sähe ein Chemnitz Graffitti von Banksy aus?',
|
|
'Male eine Katze mit Hut die auf einem Dach läuft.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Male deinen Gegenspieler.',
|
|
'Maler ein Cyber-Einhorn.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Male ein Einhorn, das ein Selfie vor dem Karl-Marx-Monument in Chemnitz macht.',
|
|
'Male einen typischen Hacker.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
|
|
'Erzeuge einen deutschen Personalausweis von Dir.',
|
|
'Male dir eine Münze zur Kulturhauptstadt 2025.',
|
|
'', <!-- Picture -->
|
|
'',
|
|
];
|
|
|
|
const qpic = [
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/2007_Nagaoka_Festival_004_Edit.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/2014_Subaru_Impreza_WRC_2001_a.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/A_95_year_old_woman_with_her_pet_rooster,_Havana,_Cuba.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/Angela_Merkel_(2008).jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/Full_Moon_Luc_Viatour.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/Polydactyly_01_Lhand_AP.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/Wikipedia-logo-v2.svg.png',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/20141025_Shockwave_Truck_Alliance_Air_Show_2014-3.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/2022-05-22_50._Internationales_Dixieland_Festival_Dresden_1DX_2056_by_Stepro-2.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/20150425_Oberhausen_Impericon_Festival_-_Andreas_Dörner_of_Caliban_0077.jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/Aerial_image_of_Grand_Prismatic_Spring_(view_from_the_south).jpg',
|
|
'blank.gif',
|
|
|
|
'blank.gif',
|
|
'blank.gif',
|
|
'pictures/1200px-40._Schwimmzonen-_und_Mastersmeeting_Enns_2017_100m_Butterfly-9318.jpg',
|
|
'blank.gif',
|
|
];
|
|
|
|
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 = qtext[questionnum];
|
|
document.getElementById('qpic').src = qpic[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 = qtext[questionnum];
|
|
document.getElementById('qpic').src = qpic[questionnum];
|
|
document.getElementById('count-down-timer').style.color = "white";
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
html { font-family: Arial;
|
|
text-align: center; }
|
|
|
|
#count-down-timer { font-size: 65pt;
|
|
color: white;
|
|
position: relative;
|
|
top: 0%; }
|
|
|
|
h2 { font-size: 50pt;
|
|
visibility: show; }
|
|
|
|
#qpic { border: none;
|
|
position:relative;
|
|
top: -5%;
|
|
height: 40%; }
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p><h1 class="text-center" id="count-down-timer">01:00</h1></p>
|
|
|
|
<p><h2 id="question"></h2><img src="blank.gif "id="qpic"></p>
|
|
|
|
</body>
|
|
</html> |