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

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

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 />
</>
);
}

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 />
</>
);
}

View file

@ -7,6 +7,8 @@ import { Logger } from "@behametrics/logger-web";
import BehaviorStudyInfo from "../BehaviorStudyInfo"; import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal"; import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button"; import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
export default function Study() { export default function Study() {
const _logger = useRef(0); const _logger = useRef(0);
@ -34,6 +36,9 @@ export default function Study() {
const [isStepStart, setIsStepStart] = useState(true); const [isStepStart, setIsStepStart] = useState(true);
const [isStepNormal, setIsStepNormal] = useState(false); const [isStepNormal, setIsStepNormal] = useState(false);
const [isStepPhone, setIsStepPhone] = useState(false);
const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
const handleLoggerOff = () => { const handleLoggerOff = () => {
_logger.current.stop(); _logger.current.stop();
@ -58,15 +63,29 @@ export default function Study() {
return false; return false;
}; };
const handleIsStepStart = () => { const handleClickAtStepStart = () => {
setIsStepStart(false); setIsStepStart(false);
console.log("isStepStar", isStepStart);
setIsStepNormal(true); setIsStepNormal(true);
console.log("isStepNormal", isStepNormal);
handleLoggerOn(); handleLoggerOn();
// forceUpdate(); // forceUpdate();
}; };
const handleClickAtStepNormal = () => {
setIsStepNormal(false);
setIsStepPhone(true);
};
const handleClickAtStepPhone = () => {
setIsStepPhone(false);
setIsStepStanding(true);
};
const handleClickAtStepStanding = () => {
setIsStepStanding(false);
setIsStepEnd(true);
handleLoggerOff();
};
const onSubmitClick = (e) => { const onSubmitClick = (e) => {
e.preventDefault(); e.preventDefault();
let opts = { 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 ( return (
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Studie</h1> <h1>Studie</h1>
<button onClick={handleLoggerOn}>LOGGER StaRTEN</button> {isStepStart ? study_start : null}
{isStepStart ? ( {isStepNormal ? study_normal : null}
<> {isStepPhone ? study_phone : null}
<BehaviorStudyInfo /> {isStepStanding ? study_standing : null}
<Button {isStepEnd ? study_end : null}
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>
</div> </div>
<Footer /> <Footer />
</> </>