Added multiple situations so the survey is more complete
This commit is contained in:
parent
146b018ad1
commit
1553f92adf
3 changed files with 165 additions and 48 deletions
17
frontend/src/components/BehaviorPhone.js
Normal file
17
frontend/src/components/BehaviorPhone.js
Normal 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
14
frontend/src/components/BehaviorStanding.js
Normal 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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue