From f39532b06b6c4a39d8fe5feed27ef287aa561629 Mon Sep 17 00:00:00 2001
From: Hanen Alrwasheda <alrwasheda@mi.fu-berlin.de>
Date: Sun, 6 Jun 2021 08:55:49 +0200
Subject: [PATCH] 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 | 79 ++++++++++++++--
user-frontend/package.json | 1 +
user-frontend/src/App.js | 20 +++-
user-frontend/src/components/ActivityPage.js | 67 +++++++++----
user-frontend/src/components/QuestionPage.js | 93 ++++++++++++-------
user-frontend/src/components/ResultScreen.js | 43 +++++----
user-frontend/src/components/WelcomeScreen.js | 38 ++++----
.../src/components/WissenssnackPage.js | 35 +++----
.../src/components/css/QuestionPage.css | 28 ++++--
.../jsonExamples/QuestionsExample.json | 42 +++++++++
user-frontend/src/index.css | 0
11 files changed, 322 insertions(+), 124 deletions(-)
create mode 100644 user-frontend/src/components/jsonExamples/QuestionsExample.json
delete mode 100644 user-frontend/src/index.css
diff --git a/user-frontend/package-lock.json b/user-frontend/package-lock.json
index 87026b7..ea045fa 100644
--- a/user-frontend/package-lock.json
+++ b/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": {
diff --git a/user-frontend/package.json b/user-frontend/package.json
index 7ed55c5..c738e82 100644
--- a/user-frontend/package.json
+++ b/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",
diff --git a/user-frontend/src/App.js b/user-frontend/src/App.js
index 6030e64..d43e5bd 100644
--- a/user-frontend/src/App.js
+++ b/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>
diff --git a/user-frontend/src/components/ActivityPage.js b/user-frontend/src/components/ActivityPage.js
index 7259e5f..64dde86 100644
--- a/user-frontend/src/components/ActivityPage.js
+++ b/user-frontend/src/components/ActivityPage.js
@@ -6,26 +6,57 @@ import "./css/Activity.css"
-function Activity(){
- return(
- <div className="activity-mainContainer">
- <div className="activity-rightSide"></div>
- <div className="activity-leftSide"></div>
- <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>
+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>
+ <div className="activity-leftSide"></div>
+ <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'/>
- <img className="activity-image" src={activeImage} alt='active_img'/>
-
- <Link to="/Wissenssnack">
- <button className="activity-backButton" type="button">back</button>
- </Link>
- <Link to="/Result">
- <button className="activity-nextButton" type="button">next</button>
- </Link>
+ <Link to="/Wissenssnack">
+ <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" 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>
- );
+ </div>
+ );
+ }
}
export default Activity;
\ No newline at end of file
diff --git a/user-frontend/src/components/QuestionPage.js b/user-frontend/src/components/QuestionPage.js
index d4e1891..e6bedd7 100644
--- a/user-frontend/src/components/QuestionPage.js
+++ b/user-frontend/src/components/QuestionPage.js
@@ -2,48 +2,75 @@ 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);
- return(
- <div className="question-mainContainer">
-
- <img className="question-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
- <p className="question-text1" >Question:</p>
-
- <div className="question-answerSection">
- <div className="answer-input">
- <input className="fst" type="radio"/>
- <label for="fst">not agree entirely</label>
- </div>
+ clickNext = () => {
+ this.setState(
+ {
+ index : this.state.index + 1
+ }
+ )
+ }
+ clickBack = () => {
+ this.setState(
+ {
+ index : this.state.index - 1
+ }
+ )
+ }
+
+ render(){
+ return(
+ <div className="question-mainContainer">
- <div className="answer-input">
- <input className="snd" type="radio"/>
- <label for="snd">not agree</label>
- </div>
+ <img className="question-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
+ <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="answer-input">
- <input className="thd" type="radio"/>
- <label for="thd">agree</label>
- </div>
+ <div className="question-answerSection">
+ <div className="answer-input">
+ <input className="fst" type="radio"/>
+ <label for="fst">not agree entirely</label>
+ </div>
+
+ <div className="answer-input">
+ <input className="snd" type="radio"/>
+ <label for="snd">not agree</label>
+ </div>
- <div className="answer-input">
- <input className="fth" type="radio"/>
- <label for="fth">agree entirely</label>
- </div>
+ <div className="answer-input">
+ <input className="thd" type="radio"/>
+ <label for="thd">agree</label>
+ </div>
+
+ <div className="answer-input">
+ <input className="fth" type="radio"/>
+ <label for="fth">agree entirely</label>
+ </div>
+ </div>
+
+ <Link to={this.state.index > 0 ? "/Question" : "/"}>
+ <button className="question-backButton" type="button" onClick={this.clickBack}>back</button>
+ </Link>
+ <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>
-
- <Link to="/">
- <button className="question-backButton" type="button">back</button>
- </Link>
- <Link to="/Wissenssnack">
- <button className="question-nextButton" type="button">next</button>
- </Link>
- </div>
- );
+ );
+ }
}
export default Question;
\ No newline at end of file
diff --git a/user-frontend/src/components/ResultScreen.js b/user-frontend/src/components/ResultScreen.js
index 08822fa..0259bda 100644
--- a/user-frontend/src/components/ResultScreen.js
+++ b/user-frontend/src/components/ResultScreen.js
@@ -4,31 +4,34 @@ import {Link} from "react-router-dom"
import "./css/ResultScreen.css"
-function Result(){
+class Result extends React.Component{
+
- return(
- <div className="result-mainContainer">
- <div className="result-lefttSide"></div>
- <div className="result-rightSide"></div>
- <img className="result-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
- <p className='result-text1'>Aufgrund Deiner Angaben empfeglen wir Dir folgende Sportarten</p>
- <p className='result-text2'>Klick einfach auf die Sportart, um weiter Details zu erfahren!</p>
-
- <ul className="result-sports-list">
- <li>sport1</li>
- <li>sport2</li>
- <li>sport3</li>
+ render(){
+ return(
+ <div className="result-mainContainer">
+ <div className="result-lefttSide"></div>
+ <div className="result-rightSide"></div>
+ <img className="result-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
+ <p className='result-text1'>Aufgrund Deiner Angaben empfeglen wir Dir folgende Sportarten</p>
+ <p className='result-text2'>Klick einfach auf die Sportart, um weiter Details zu erfahren!</p>
+
+ <ul className="result-sports-list">
+ <li>sport1</li>
+ <li>sport2</li>
+ <li>sport3</li>
- </ul>
+ </ul>
- <Link to="/Activity">
- <button className="result-backButton" id="backButton" type="button">back</button>
- </Link>
+ <Link to="/Activity">
+ <button className="result-backButton" id="backButton" type="button">back</button>
+ </Link>
+
-
- </div>
- )
+ </div>
+ );
+ }
}
export default Result;
\ No newline at end of file
diff --git a/user-frontend/src/components/WelcomeScreen.js b/user-frontend/src/components/WelcomeScreen.js
index 096c7b7..51d948b 100644
--- a/user-frontend/src/components/WelcomeScreen.js
+++ b/user-frontend/src/components/WelcomeScreen.js
@@ -7,27 +7,29 @@ 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{
- return(
- <div className="welcome-mainContainer" >
-
- <div className="welcome-leftSide" >
+ render(){
+ return(
+ <div className="welcome-mainContainer" >
+
+ <div className="welcome-leftSide" >
+ </div>
+ <img className="welcome-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
+ <p className="welcome-text1" >Welcome By</p>
+ <img className="welcome-unisportSportOMatLogo" src={project_logo} alt="unisport-o-mat-logo"/>
+
+ <div className="welcome-rightSide" >
+ </div>
+ <p className="welcome-text2" >Beantworte die Fragen</p>
+ <p className="welcome-text3" >Du bekommst am Ende anhand Deiner Antworten ein Ergebnis zu den für Dich passenden Sportarten</p>
+ <Link to="/Question">
+ <button className="welcome-button" type="button">Start</button>
+ </Link>
</div>
- <img className="welcome-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
- <p className="welcome-text1" >Welcome By</p>
- <img className="welcome-unisportSportOMatLogo" src={project_logo} alt="unisport-o-mat-logo"/>
-
- <div className="welcome-rightSide" >
- </div>
- <p className="welcome-text2" >Beantworte die Fragen</p>
- <p className="welcome-text3" >Du bekommst am Ende anhand Deiner Antworten ein Ergebnis zu den für Dich passenden Sportarten</p>
- <Link to="/Question">
- <button className="welcome-button" type="button">Start</button>
- </Link>
- </div>
- );
+ );
+ }
}
diff --git a/user-frontend/src/components/WissenssnackPage.js b/user-frontend/src/components/WissenssnackPage.js
index f059ed9..452a6b2 100644
--- a/user-frontend/src/components/WissenssnackPage.js
+++ b/user-frontend/src/components/WissenssnackPage.js
@@ -4,24 +4,27 @@ import {Link} from "react-router-dom"
import "./css/Wissenssnack.css"
-function Wissenssnack(){
- return(
- <div className="wissenssnack-mainContainer">
-
- <img className="wissenssnack-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
- <p className="wissenssnack-text1">Wusstest Du...?</p>
- <p className="wissenssnack-text2">Wissenssnack_text</p>
-
+class Wissenssnack extends React.Component{
+
+ render(){
+ return(
+ <div className="wissenssnack-mainContainer">
+
+ <img className="wissenssnack-unisportLogo" src={unisport_logo} alt="unisport-logo"/>
+ <p className="wissenssnack-text1">Wusstest Du...?</p>
+ <p className="wissenssnack-text2">Wissenssnack_text</p>
+
- <Link to="/Question">
- <button className="wissenssnack-backButton" type="button">back</button>
- </Link>
- <Link to="/Activity">
- <button className="wissenssnack-nextButton" type="button">next</button>
- </Link>
+ <Link to="/Question">
+ <button className="wissenssnack-backButton" type="button">back</button>
+ </Link>
+ <Link to="/Activity">
+ <button className="wissenssnack-nextButton" type="button">next</button>
+ </Link>
- </div>
- );
+ </div>
+ );
+ }
}
export default Wissenssnack;
\ No newline at end of file
diff --git a/user-frontend/src/components/css/QuestionPage.css b/user-frontend/src/components/css/QuestionPage.css
index 21e3566..2049301 100644
--- a/user-frontend/src/components/css/QuestionPage.css
+++ b/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{
diff --git a/user-frontend/src/components/jsonExamples/QuestionsExample.json b/user-frontend/src/components/jsonExamples/QuestionsExample.json
new file mode 100644
index 0000000..08f8d81
--- /dev/null
+++ b/user-frontend/src/components/jsonExamples/QuestionsExample.json
@@ -0,0 +1,42 @@
+[
+ {
+ "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
diff --git a/user-frontend/src/index.css b/user-frontend/src/index.css
deleted file mode 100644
index e69de29..0000000
--
GitLab