FrontEnd Added
This commit is contained in:
parent
bac84033bd
commit
bfce051b60
5
.idea/.gitignore
generated
vendored
Normal file
5
.idea/.gitignore
generated
vendored
Normal 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
12
.idea/1_2_oder_3_repos.iml
generated
Normal 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
4
.idea/misc.xml
generated
Normal 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
8
.idea/modules.xml
generated
Normal 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
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
2
idea.txt
2
idea.txt
@ -5,3 +5,5 @@ we must determine and provide area in which the answer options are defined (tape
|
||||
|
||||
tasks:
|
||||
- get camera
|
||||
- get coloured hats (red, yellow and blue )*2 oder papier
|
||||
- frontend is seperated from backend
|
3
ip adressen.txt
Normal file
3
ip adressen.txt
Normal file
@ -0,0 +1,3 @@
|
||||
Bilal IP : 192.168.50.130
|
||||
Youssef: 192.168.50.226
|
||||
David: 192.168.50.79
|
@ -0,0 +1 @@
|
||||
Flask~=2.3.1
|
15
src_folder/BackEnd/test_flask_server.py
Normal file
15
src_folder/BackEnd/test_flask_server.py
Normal 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)
|
BIN
src_folder/FrontEnd/12oder3-logo.png
Normal file
BIN
src_folder/FrontEnd/12oder3-logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 47 KiB |
BIN
src_folder/FrontEnd/icons8-time.gif
Normal file
BIN
src_folder/FrontEnd/icons8-time.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
78
src_folder/FrontEnd/index.css
Normal file
78
src_folder/FrontEnd/index.css
Normal 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;
|
||||
}
|
45
src_folder/FrontEnd/index.html
Normal file
45
src_folder/FrontEnd/index.html
Normal 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>
|
62
src_folder/FrontEnd/index.js
Normal file
62
src_folder/FrontEnd/index.js
Normal 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);
|
||||
}
|
@ -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()
|
Loading…
x
Reference in New Issue
Block a user