diff --git a/user-frontend/src/components/DemoQuestion.js b/user-frontend/src/components/DemoQuestion.js index 6416bdbcd71b90f0eee0c217f598f61773c6599b..a0ee717f57a7e4393471a2f1a21542679aadc19f 100644 --- a/user-frontend/src/components/DemoQuestion.js +++ b/user-frontend/src/components/DemoQuestion.js @@ -1,72 +1,88 @@ import React, { useRef, useState } from 'react'; import Likert from './likert.js'; -import unisport_logo from './images/logo_unisport.png'; - +//import PropTypes from 'prop-types'; +//import unisport_logo from './logo_unisport.png'; const likertOptions = { - 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.", - responses: [ - { value: 0, text: "Stimme nicht zu" }, - { value: 1, text: "Stimme eher nicht zu" }, - { value: 2, text: "Stimme eher zu"}, - { value: 3, text: "Stimme zu" } - ], + 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.', + responses: [ + { value: 0, text: 'Stimme nicht zu' }, + { value: 1, text: 'Stimme eher nicht zu' }, + { value: 2, text: 'Stimme eher zu' }, + { value: 3, text: 'Stimme zu' } + ] +}; +const counter = { + backgroundColor: '#F0F0F0', + color: '#8192A6', + padding: '10px', + width: '164px', + height: '50px', + borderRadius: '0.5em', + fontFamily: 'Roboto', + fontSize: '22px', + position: 'relativ', + display: 'block', + alignItems: 'center', + marginLeft: 'auto', + marginRight: 'auto', + textAlign: 'center' }; -export default function DemoQuestion() { - let style = { - uniSportLogoStyle : - { - width : '163px', - height : '72px', - } - } - +export default function DemoInsteracion() { const refLikert = useRef(null); const [chosen, setChosen] = useState(null); - const onChange = (chosen) => { - const content = ( - <span> - You chose:{" "} - <strong> - {chosen?.value}—{chosen?.text} - </strong> - </span> - ); - setChosen(content); - }; - const getAlertMessage = () => { const rect = refLikert.current.getBoundingClientRect(); return `This demonstrates how you can get access to the underlying DOM element. - + This component is ${parseInt(rect.width)}px wide and ${parseInt(rect.height)}px tall.`; }; return ( - <> - <question>Question </question> + <div className='app'> + <h4 style={counter}> Frage 1/10 </h4> <Likert {...likertOptions} - onChange={onChange} + id='q1' + onClick={() => {}} + //onChange={props.onAnswerSelected} ref={refLikert} - className= 'withBorder' + className='question_likert' /> - <p style={{ textAlign: 'center' }}> - {chosen} - </p> - <style>{` - .withBorder { + <p style={{ textAlign: 'center' }}>{chosen}</p> + <style> + {` + .app { color: #003466; - padding: 2em; + padding: 1em; + border: thin solid darkgray; + margin: 1.5em; + border-radius: 0.5em; font-family: roboto-bold, sans-serif; + font-size: 50px; font-weight: 700; - height: 315px; - min-height: 420px; - width: 702px; - `}</style> - </> + align-items: center; + left: Thank 30%; + display: 'block', + justify-content: center; + } + .likertText { + color: #6B9E1F; + display: inline-block; + font-family: roboto-normal, sans-serif; + font-size: 20px; + padding-top: 1em; + padding-left: 0.4em; + padding-right: 0.4em; + width: 100%; + box-sizing: border-box; + } + `} + </style> + </div> ); } diff --git a/user-frontend/src/components/QuestionCount.js b/user-frontend/src/components/QuestionCount.js new file mode 100644 index 0000000000000000000000000000000000000000..9effb115de03f2a38de1c23beef56100ae56254a --- /dev/null +++ b/user-frontend/src/components/QuestionCount.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +function QuestionCount(props) { + return ( + <div className="questionCount"> + Question <span>{props.counter}</span> of <span>{props.total}</span> + </div> + ); +} + +QuestionCount.propTypes = { + counter: PropTypes.number.isRequired, + total: PropTypes.number.isRequired +}; + +export default QuestionCount; diff --git a/user-frontend/src/components/likert.css b/user-frontend/src/components/likert.css index 0b07815bbbe89f87fc5d78263c69b8a83573c9d7..49bf95a264dcc4ac133c52a0f48ee723314302b3 100644 --- a/user-frontend/src/components/likert.css +++ b/user-frontend/src/components/likert.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap'); + .likertScale { margin-bottom: 1em; border: none; @@ -18,10 +20,9 @@ flex-grow: 4; /* This can get overridden by the “flexible” prop. */ flex-shrink: 0; flex-basis: auto; - display: flex; - padding-top: 2em; - padding-bottom: 1em; + padding-top: 1.5em; + padding-bottom: 0.5em; } .layout--stacked .likertBand { align-self: stretch; @@ -38,7 +39,7 @@ display: inline-block; width: 50%; vertical-align: top; - margin-top: 1em; + margin-top: 0.3em; border-top: 2px solid #99cc01; } .likertResponse:first-child .likertLine:first-child { @@ -72,7 +73,9 @@ } .likertText { display: inline-block; - padding-top: 2em; + font-family: roboto-normal, sans-serif; + font-size: var(--font-size-m); + padding-top: 1em; padding-left: 0.4em; padding-right: 0.4em; width: 100%;