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:
|
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
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