cami/Bachelorthesis_Code
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Wiki Activity

Added multiple situations so the survey is more complete
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source
This commit is contained in:
cami 2021-07-21 23:41:10 +02:00
parent 146b018ad1
commit 1553f92adf
3 changed files with 165 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/BehaviorPhone.js Normal file
View file

@ -0,0 +1,17 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword";
export default function BehaviorPhone() {
return (
<>
<p>
Im nächsten Schritt geht es darum, dass Sie während der Passworteingabe
telefonieren. Nehmen Sie hierzu Ihr Smartphone oder Telefon und stellen
Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte
kein Headset oder Ähnliches.
</p>
<GeneratedPassword />
</>
);
}

14
frontend/src/components/BehaviorStanding.js Normal file
View file

@ -0,0 +1,14 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword"
export default function BehaviorStanding() {
return (
<>
<p>
In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein.
</p>
<GeneratedPassword />
</>
);
}

182
frontend/src/components/pages/Study.js
View file

@ -7,6 +7,8 @@ import { Logger } from "@behametrics/logger-web";
import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
export default function Study() {
const _logger = useRef(0);
@ -34,6 +36,9 @@ export default function Study() {
const [isStepStart, setIsStepStart] = useState(true);
const [isStepNormal, setIsStepNormal] = useState(false);
const [isStepPhone, setIsStepPhone] = useState(false);
const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
const handleLoggerOff = () => {
_logger.current.stop();
@ -58,15 +63,29 @@ export default function Study() {
return false;
};
const handleIsStepStart = () => {
const handleClickAtStepStart = () => {
setIsStepStart(false);
console.log("isStepStar", isStepStart);
setIsStepNormal(true);
console.log("isStepNormal", isStepNormal);
handleLoggerOn();
// forceUpdate();
};
const handleClickAtStepNormal = () => {
setIsStepNormal(false);
setIsStepPhone(true);
};
const handleClickAtStepPhone = () => {
setIsStepPhone(false);
setIsStepStanding(true);
};
const handleClickAtStepStanding = () => {
setIsStepStanding(false);
setIsStepEnd(true);
handleLoggerOff();
};
const onSubmitClick = (e) => {
e.preventDefault();
let opts = {
@ -91,55 +110,122 @@ export default function Study() {
});
};
const study_start = (
<>
<BehaviorStudyInfo />
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--full"
onClick={handleClickAtStepStart}
newTo="study"
>
Starten mit der Studie
</Button>
</>
);
const study_normal = (
<>
<BehaviorNormal />
<form id="behaviorNormal">
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="Benutzername"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<InputField
LabelName="Passwort"
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<SubmitField
LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={handleClickAtStepNormal}
/>
</form>
</>
);
const study_phone = (
<>
<BehaviorPhone />
<form id="behaviorPhone">
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="Benutzername"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<InputField
LabelName="Passwort"
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<SubmitField
LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={handleClickAtStepPhone}
/>
</form>
</>
);
const study_standing = (
<>
<BehaviorStanding />
<form id="behaviorPhone">
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="Benutzername"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<InputField
LabelName="Passwort"
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<SubmitField
LabelName="Studie beenden"
InputValue="stopStudy"
InputName="quit"
onClick={handleClickAtStepStanding}
/>
</form>
</>
);
const study_end = <p>Merci :-)</p>;
return (
<>
<div className="sitePage">
<h1>Studie</h1>
<button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
{isStepStart ? (
<>
<BehaviorStudyInfo />
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--full"
onClick={handleIsStepStart}
newTo="study"
>
Starten mit der Studie
</Button>
</>
) : null}
{isStepNormal ? (
<>
<BehaviorNormal />
<form id="behaviorNormal">
<InputField
LabelName="Benutzername"
onChange={handleUsernameChange}
InputType="text"
InputName="Benutzername"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<InputField
LabelName="Passwort"
onChange={handlePasswordChange}
InputType="password"
InputName="Passwort"
InputPlaceHolder="Benutzername"
onPaste={handleOnPasteEvent}
/>
<SubmitField
LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={onSubmitClick}
/>
</form>
</>
) : null}
<button onClick={handleLoggerOff}>LOGGER STOPPEN</button>
{isStepStart ? study_start : null}
{isStepNormal ? study_normal : null}
{isStepPhone ? study_phone : null}
{isStepStanding ? study_standing : null}
{isStepEnd ? study_end : null}
</div>
<Footer />
</>