FrontEnd Added

This commit is contained in:
caliskan 2023-05-12 08:44:00 +02:00
parent bac84033bd
commit bfce051b60
17 changed files with 241 additions and 18 deletions

5
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/1_2_oder_3_repos.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

4
.idea/misc.xml generated Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (1_2_oder_3_repos)" project-jdk-type="Python SDK" />
</project>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/1_2_oder_3_repos.iml" filepath="$PROJECT_DIR$/.idea/1_2_oder_3_repos.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

View File

@ -5,3 +5,5 @@ we must determine and provide area in which the answer options are defined (tape
tasks: tasks:
- get camera - get camera
- get coloured hats (red, yellow and blue )*2 oder papier
- frontend is seperated from backend

3
ip adressen.txt Normal file
View File

@ -0,0 +1,3 @@
Bilal IP : 192.168.50.130
Youssef: 192.168.50.226
David: 192.168.50.79

View File

@ -0,0 +1 @@
Flask~=2.3.1

View File

@ -0,0 +1,15 @@
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/GETQUESTION', methods=['GET'])
def hello():
return jsonify({'TEST': 'Dies ist eine Testfrage',
'firstanswer': 'erste Antwort',
'secondanswer': 'zweite Antwort',
'thirdanswer': 'dritte Antwort'})
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5555, debug=True)

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -0,0 +1,78 @@
h1 {
text-align: center;
}
div {
text-align: center;
}
#MainHeading {
}
#MainHeadingPic {
max-width: 10%;
}
#buttondiv {
display: inline;
margin: auto;
}
#startbutton {
scale: 120%;
}
#nextbutton {
visibility: hidden;
}
#questiondiv{
margin-top: 20px;
}
#question {
margin: auto;
height: 50px;
width: 600px;
border-style: solid;
padding-bottom: 20px;
}
#answerdiv {
display: flex;
}
#timerdiv {
margin-bottom: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
#timer {
display: inline;
}
#timerpic{
max-width: 10%;
margin-bottom: -20px;
}
#answerdiv{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.answerbox {
width: 300px;
height: 100px;
border-style: solid;
}
#firstanswerbox {
border-color: red;
background-color: red;
}
#secondanswerbox {
border-color: yellow;
background-color: yellow;
}
#thirdanswerbox {
border-color: blue;
background-color: blue;
}

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<title>Title</title>
</head>
<body>
<div id="MainHeading">
<img src="12oder3-logo.png" alt="1_2_oder_3" id="MainHeadingPic">
<div id="buttondiv">
<button id="startbutton" onclick="startGame()">Start</button>
<button id="nextbutton" onclick="nextQuestion()">Nächste Frage</button>
</div>
</div>
<div id="questiondiv">
<h1 id="question">Question</h1>
</div>
<br>
<div id="answerdiv">
<div class="answerbox" id="firstanswerbox">
</div>
<br>
<div class="answerbox" id="secondanswerbox"></div>
<br>
<div class="answerbox" id="thirdanswerbox"></div>
</div>
<br>
<div id="timerdiv">
<img src="icons8-time.gif" alt="Timer:" id="timerpic">
<p id="timer">Time</p>
</div>
<div id ="points">Punktestand der Teams</div>
</body>
</html>

View File

@ -0,0 +1,62 @@
let question_var = document.getElementById("question")
let firstanswer_var = document.getElementById("firstquestion")
let secondanswer_var = document.getElementById("secondquestion")
let thirdanswer_var = document.getElementById("thirdanswer")
let nextbutton = document.getElementById("nextbutton")
let startbutton = document.getElementById("startbutton")
let i = 1
let startgame = true
let intervallid;
let secondsleft = 10;
const xhr = new XMLHttpRequest();
const url = "http://127.0.0.1:5555/GETQUESTION";
function ChangeStatus(boolean) {
return boolean !== true;
}
function getQuestion(){
// TODO: MAKE HTTP REQUEST TO GET QUESTION FROM BACKEND
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("question").innerText = data['TEST'];
document.getElementById("firstanswer").innerText = data['firstanswer'];
document.getElementById("secondanswer").innerText = data['secondanswer'];
document.getElementById("thirdanswer").innerText = data['thirdanswer'];
})
.catch(error => console.error(error));
console.log("Question got");
document.getElementById("question").innerText = (i++).toString() + ". Question ";
}
function nextQuestion(){
console.log("nextQuestion clicked")
getQuestion()
secondsleft=10;
timerstart()
}
function startGame() {
startgame = (startgame !== true);
console.log("Button clicked");
if (startgame === false){
}
document.getElementById("nextbutton").style.visibility = "visible";
document.getElementById("startbutton").style.visibility = "hidden";
getQuestion();
timerstart()
}
function timerstart() {
intervallid = setInterval(function() {
document.getElementById('timer').textContent = secondsleft;
if (secondsleft === 0) {
clearInterval(intervallid);
}
secondsleft--;
}, 1000);
}

View File

@ -1,18 +0,0 @@
import tkinter as tk
def button_callback():
print("Button was clicked")
# Create the main window
window = tk.Tk()
# Add a label to the window
label = tk.Label(text="Hello, World!")
label.pack()
# Add a button to the window
button = tk.Button(text="Click me!", command=button_callback)
button.pack()
# Run the main loop to display the window
window.mainloop()