fkeller/currentQuestion
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Felix Keller 2024-10-01 18:08:46 +02:00
commit 036e036ab4
Signed by: fkeller
GPG key ID: 54A0C525E2370B87
4 changed files with 99 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md Normal file
View file

@ -0,0 +1,8 @@
# currentQuestion
Liest die Frage die aktuell beantwortet wird aus `d120.de/fragen` aus.
Nützlich für Stream Overlay.
## Benutzung
Als Browser Quelle im Streaming Programm der Wahl einbinden und Größe
einstellen.

25
css/style.css Normal file
View file

@ -0,0 +1,25 @@
body {
max-height: 90%;
overflow: clip;
}
#questionBox {
position: absolute;
min-height: 30pt;
left: 2.3%;
bottom: 5px;
width: 95%;
border-style: solid;
border-width: 2pt;
border-color: transparent;
border-radius: 25px;
max-height: 98%;
overflow: hidden;
}
#questionParagraph {
margin: 0;
padding: 10px;
font-family: sans;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

16
index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Current Question</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="questionBox">
<p id="questionParagraph">
</p>
</div>
<script src="js/script.js"></script>
</body>
</html>

50
js/script.js Normal file
View file

@ -0,0 +1,50 @@
function filterQuestionsState(data, stateVal) {
filteredQuestion = data.find(item => item.state === stateVal);
return filteredQuestion;
}
function displayQuestion(question) {
const questionBox = document.getElementById("questionBox");
const questionParagraph = document.getElementById("questionParagraph");
if (question != undefined) {
if (questionBoxHidden = true) {
questionBox.style.backgroundColor = 'rgba(13, 110, 253, 0.8)';
questionBox.style.borderColor = 'rgba(13, 110, 253, 0.9)';
questionBoxHidden = false;
}
questionParagraph.textContent = question.text;
}
else {
questionBox.style.backgroundColor = 'rgba(13, 110, 253, 0)';
questionBox.style.borderColor = 'rgba(13, 110, 253, 0)';
questionParagraph.textContent = '';
var questionBoxHidden = true;
}
}
function getQuestion() {
fetch('https://www.d120.de/fragen/api/questions', {
mode: 'cors',
method: 'GET',
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('response:', data);
filteredQuestion = filterQuestionsState(data, 2);
displayQuestion(filteredQuestion);
})
.catch(error => {
console.error('error:', error);
});
}
document.getElementById("questionBox").style.transition = "all 0.3s"
const updateEvery = 3000;
setInterval(getQuestion, updateEvery);