FrontEnd Added

src_folder/FrontEnd/index.css

@@ -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;
+}

src_folder/FrontEnd/index.html

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

src_folder/FrontEnd/index.js

@@ -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);
+}