diff --git a/frontend/src/components/BehaviorPhone.js b/frontend/src/components/BehaviorPhone.js new file mode 100644 index 0000000..9a6787e --- /dev/null +++ b/frontend/src/components/BehaviorPhone.js @@ -0,0 +1,17 @@ +import React from "react"; +import "../App.css"; +import GeneratedPassword from "./GeneratedPassword"; + +export default function BehaviorPhone() { + return ( + <> +

+ 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. +

+ + + ); +} diff --git a/frontend/src/components/BehaviorStanding.js b/frontend/src/components/BehaviorStanding.js new file mode 100644 index 0000000..479b59b --- /dev/null +++ b/frontend/src/components/BehaviorStanding.js @@ -0,0 +1,14 @@ +import React from "react"; +import "../App.css"; +import GeneratedPassword from "./GeneratedPassword" + +export default function BehaviorStanding() { + return ( + <> +

+ 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. +

+ + + ); +} diff --git a/frontend/src/components/pages/Study.js b/frontend/src/components/pages/Study.js index f7b75d5..9378c54 100644 --- a/frontend/src/components/pages/Study.js +++ b/frontend/src/components/pages/Study.js @@ -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 = ( + <> + + + + ); + + const study_normal = ( + <> + +
+ + + + + + ); + + const study_phone = ( + <> + +
+ + + + + + ); + + const study_standing = ( + <> + +
+ + + + + + ); + + const study_end =

Merci :-)

; + return ( <>

Studie

- - {isStepStart ? ( - <> - - - - ) : null} - {isStepNormal ? ( - <> - -
- - - - - - ) : null} - + {isStepStart ? study_start : null} + {isStepNormal ? study_normal : null} + {isStepPhone ? study_phone : null} + {isStepStanding ? study_standing : null} + {isStepEnd ? study_end : null}