Changed to class-based-components.

Added example-json-file for the questions, and renderd them to check functionality and button-connection between them.
Added question-counter .
Added button-timer in Activities.
NEED TO BE DONE:
Random show up for activities and wissenssnack.
Button-Connections not finished yet.

user-frontend/package-lock.json

@@ -3061,11 +3061,6 @@
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
     },
-    "async-limiter": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
-    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4264,6 +4259,11 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "complex.js": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.0.13.tgz",
+      "integrity": "sha512-UEWd3G3/kd3lJmsdLsDh9qfinJlujL4hIFn3Vo4/G5eqehPsgCHf2CLhFs77tVkOp2stt/jbNit7Q1XFANFltA=="
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -5580,6 +5580,11 @@
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
     },
+    "escape-latex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+      "integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw=="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -6885,6 +6890,11 @@
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
     },
+    "fraction.js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg=="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -8178,6 +8188,11 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
+    },
     "jest": {
       "version": "26.6.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.0.tgz",
@@ -9940,6 +9955,32 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mathjs": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-9.4.2.tgz",
+      "integrity": "sha512-xu0AU6bpjxbDgCB824s/yDpAe0KR1TMUYz/yY7rYyRcEH56OuG8JPgxJhqlUyhhRpY++ZFDnRxRNGChYx1FLKQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "complex.js": "^2.0.13",
+        "decimal.js": "^10.2.1",
+        "escape-latex": "^1.2.0",
+        "fraction.js": "^4.1.1",
+        "javascript-natural-sort": "^0.7.1",
+        "seedrandom": "^3.0.5",
+        "tiny-emitter": "^2.1.0",
+        "typed-function": "^2.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -13567,6 +13608,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14847,6 +14893,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tiny-invariant": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
@@ -15032,6 +15083,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-2.0.0.tgz",
+      "integrity": "sha512-Hhy1Iwo/e4AtLZNK10ewVVcP2UEs408DS35ubP825w/YgSBK1KVLwALvvIG4yX75QJrxjCpcWkzkVRB0BwwYlA=="
+    },
     "typed-styles": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
@@ -16389,11 +16445,18 @@
           }
         },
         "ws": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
           "requires": {
             "async-limiter": "~1.0.0"
+          },
+          "dependencies": {
+            "async-limiter": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+              "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+            }
           }
         },
         "yargs": {

user-frontend/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.0.1",
+    "mathjs": "^9.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

user-frontend/src/App.js

@@ -15,11 +15,21 @@ export default function App(){
     <div className="App">
      <Router>
         <Switch>
-          <Route path="/" exact component={Welcome}/>
-          <Route path="/Question"  component={Question}/>
-          <Route path="/Result" component={Result}/>
-          <Route path="/Wissenssnack" component={Wissenssnack}/>
-          <Route path="/Activity" component={Activity}/>
+          <Route path="/" exact>
+            <Welcome/>
+          </Route>
+          <Route path="/Question">
+            <Question/>
+          </Route>
+          <Route path="/Result">
+            <Result/>
+          </Route>
+          <Route path="/Wissenssnack">
+            <Wissenssnack/>
+          </Route>
+          <Route path="/Activity">
+            <Activity/>
+          </Route>
         </Switch>
       </Router>
       

user-frontend/src/components/ActivityPage.js

@@ -6,7 +6,37 @@ import "./css/Activity.css"
 
 
 
-function Activity(){
+class Activity extends React.Component{
+    constructor(){
+        super()
+        this.state = {
+            disabled : true,
+            count : 10
+        }
+    }
+    
+
+    timer = setTimeout(() => {
+        this.setState(
+            {
+                disabled : false,
+                 
+            }
+        )
+        
+    }, 10000);
+    componentDidMount(){
+        setInterval(() => {
+            this.setState(
+                {
+                    count : this.state.count - 1
+                }
+            )
+            
+        }, 1000);
+    }
+    render(){
+                    
         return(
             <div className="activity-mainContainer">
                 <div className="activity-rightSide"></div>
@@ -14,18 +44,19 @@ function Activity(){
                 <img className="activity-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
                 <p className="activity-text1">Jetzt Wird's Aktiv!</p>
                 <p className="activity-text2">explanation</p>                
-            
                 <img className="activity-image" src={activeImage} alt='active_img'/>
             
                 <Link to="/Wissenssnack">
-                <button className="activity-backButton" type="button">back</button>
+                    <button className="activity-backButton" style={{fontSize : this.state.disabled ? 30 : 40 , cursor: this.state.disabled ? "wait" : "pointer"}} disabled={this.state.disabled ? true : false} type="button">{this.state.disabled ? "click after " + this.state.count : "back"}</button>
                 </Link>
                 <Link to="/Result">
-                <button className="activity-nextButton" type="button">next</button>
+                    <button className="activity-nextButton" style={{fontSize : this.state.disabled ? 30 : 40 , cursor: this.state.disabled ? "wait" : "pointer"}} disabled={this.state.disabled ? true : false} type="button">{this.state.disabled ? "click after " + this.state.count : "next"}</button>
+                    
                 </Link>
 
             </div>
         );
     }
+}
 
 export default Activity;
\ No newline at end of file

user-frontend/src/components/QuestionPage.js

@@ -2,16 +2,41 @@ import React from "react"
 import unisport_logo from './images/logo_unisport.png'
 import {Link} from "react-router-dom"
 import "./css/QuestionPage.css"
+import questionsExamples from "./jsonExamples/QuestionsExample.json"
 
 
 
-function Question(){
+class Question extends React.Component{
+    constructor(){
+        super()
+        this.state = {
+            index : 0
+        }
+    }
+    questionsArray = questionsExamples.map((element) => element);
+    
+    clickNext = () => {
+        this.setState(
+            {
+                index : this.state.index + 1
+            }
+        )
+    }
+    clickBack = () => {
+        this.setState(
+            {
+                index : this.state.index - 1
+            }
+        )
+    }
     
+    render(){
         return(
             <div  className="question-mainContainer">
                 
                 <img  className="question-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
-            <p className="question-text1" >Question:</p>
+                <p className="question-counter">{this.state.index+1}/{this.questionsArray.length}</p>
+                <p className="question-text1" >{this.questionsArray[this.state.index].question}</p>
 
                 <div className="question-answerSection">
                     <div className="answer-input">
@@ -36,14 +61,16 @@ function Question(){
 
                 </div>
                 
-            <Link to="/">
-                <button className="question-backButton" type="button">back</button>
+                <Link to={this.state.index > 0 ? "/Question" : "/"}>
+                    <button className="question-backButton" type="button" onClick={this.clickBack}>back</button>
                 </Link>
-            <Link to="/Wissenssnack">
-                <button className="question-nextButton" type="button">next</button>
+                <Link to={this.state.index < this.questionsArray.length - 1 ? "/Question" : "/Wissenssnack"}>
+                    <button className="question-nextButton" type="button" onClick={this.clickNext}>next</button>
                 </Link>
+                {console.log(this.state.index)}
             </div>
         );
     }
+}
 
 export default Question;
\ No newline at end of file

user-frontend/src/components/ResultScreen.js

@@ -4,8 +4,10 @@ import {Link} from "react-router-dom"
 import "./css/ResultScreen.css"
 
 
-function Result(){
+class Result extends React.Component{
    
+    
+    render(){
         return(
             <div className="result-mainContainer">
                 <div className="result-lefttSide"></div>
@@ -28,7 +30,8 @@ function Result(){
             
 
             </div>
-    )
+        );
+    }
 }
 
 export default Result;
\ No newline at end of file

user-frontend/src/components/WelcomeScreen.js

@@ -7,9 +7,10 @@ import unisport_logo from './images/logo_unisport.png';
 import project_logo from './images/logo_unisport_o_mat.jpg'
 
 
-function Welcome(){
+class Welcome extends React.Component{
 
     
+    render(){
         return(
             <div  className="welcome-mainContainer" >
                 
@@ -29,6 +30,7 @@ function Welcome(){
             </div>
         );
     }
+}
 
 
 

user-frontend/src/components/WissenssnackPage.js

@@ -4,7 +4,9 @@ import {Link} from "react-router-dom"
 import "./css/Wissenssnack.css"
 
 
-function Wissenssnack(){
+class Wissenssnack extends React.Component{
+    
+    render(){
         return(
             <div className="wissenssnack-mainContainer">
                 
@@ -23,5 +25,6 @@ function Wissenssnack(){
             </div>
         );
     }
+}
 
 export default Wissenssnack;
\ No newline at end of file

user-frontend/src/components/css/QuestionPage.css

@@ -36,17 +36,33 @@
     top: 55px;
     
 }
+.question-counter{
+    position: absolute;
+    width: 302px;
+    height: 46px;
+    left: 569px;
+    top: 150px;
+
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 36px;
+    line-height: 42px;
+    text-align: center;
+
+    color: #99CC01;
+}
 .question-text1{
     position: absolute;
-    width: 752px;
-    height: 271px;
-    left: 344px;
-    top: 234px;
+    width: 1087px;
+    height: 432px;
+    left: 176px;
+    top: 240px;
 
     font-family: Roboto;
     font-style: normal;
     font-weight: bold;
-    font-size: 75px;
+    font-size: 60px;
     line-height: 88px;
     text-align: center;
 
@@ -57,7 +73,7 @@
     width: 1350px;
     height: 100px;
     left: 45px;
-    top: 689px;
+    top: 660px;
     padding-left: 150px;
 }
 .answer-input{

user-frontend/src/components/jsonExamples/QuestionsExample.json

+[
+    {
+        "id" : 1,
+        "question" : "Ich würde am liebsten gemeinsam mit anderen trainieren. Teamgeist und Wir-Gefühl sind für mich beim Sport eine große Motivation."
+    },
+    {
+        "id" : 2,
+        "question" : "Ich betreibe lieber alleine Sport."
+    },
+    {
+        "id" : 3,
+        "question" : "Ich bin bereit, mir ggf. Material oder eine notwendige Ausrüstung für die Sportart zu kaufen/besorgen."
+    },
+    {
+        "id" : 4,
+        "question" : "Ich bevorzuge das Sportangebot draußen in der Natur vor dem Indoor-Angebot."
+    },
+    {
+        "id" : 5,
+        "question" : " Ich mag Sportarten, bei denen die Trainingsintensität hoch ist."
+    },
+    {
+        "id" : 6,
+        "question" : "Die Förderung und Erhaltung meiner Gesundheit ist der Hauptgrund für meine sportliche Betätigung."
+    },
+    {
+        "id" : 7,
+        "question" : "Es bereitet mir große Freude, wenn ich mich im Sport mit anderen messen kann."
+    },
+    {
+        "id" : 8,
+        "question" : "Sport betreibe ich vor allem für mich selbst, das Konkurrieren mit anderen ist mir dabei nicht wichtig."
+    },
+    {
+        "id" : 9,
+        "question" : "Ich probiere gerne neue und mir unbekannte Sportarten aus und möchte neue koordinative und taktische Bewegungen lernen."
+    },
+    {
+        "id" : 10,
+        "question" : "Bereits bekannte Sportarten sind mir am liebsten." 
+    }
+]
\ No newline at end of file