2021-06-23 03:12:01 +00:00
|
|
|
import React from "react";
|
2021-06-24 00:01:17 +00:00
|
|
|
import { useState } from "react/cjs/react.development";
|
2021-06-23 03:12:01 +00:00
|
|
|
import "../../App.css";
|
2021-06-24 00:53:42 +00:00
|
|
|
import "../Input.css";
|
2021-06-23 03:12:01 +00:00
|
|
|
import Footer from "../../Footer";
|
|
|
|
import InputField from "../InputField";
|
|
|
|
import SubmitField from "../SubmitField";
|
2021-06-26 22:39:28 +00:00
|
|
|
import { authFetch } from "../../auth/AuthProvider";
|
2021-07-04 23:07:50 +00:00
|
|
|
import ErrorMessage from "../ErrorMessage";
|
2021-07-06 00:24:10 +00:00
|
|
|
import { Link } from "react-router-dom";
|
2021-07-08 23:01:17 +00:00
|
|
|
import { Redirect } from "react-router";
|
2021-06-23 03:12:01 +00:00
|
|
|
|
|
|
|
export default function Umfrage() {
|
2021-07-04 23:07:50 +00:00
|
|
|
/* values from survey */
|
2021-06-24 00:01:17 +00:00
|
|
|
const [age, setAge] = useState("");
|
|
|
|
const [gender, setGender] = useState("");
|
|
|
|
const [education, setEducation] = useState("");
|
|
|
|
const [skills, setSkills] = useState("");
|
|
|
|
|
2021-07-04 23:07:50 +00:00
|
|
|
/* error messages */
|
|
|
|
const [ageErrorMessage, setAgeErrorMessage] = useState("");
|
|
|
|
const [genderErrorMessage, setGenderErrorMessage] = useState("");
|
|
|
|
const [educationErrorMessage, setEducationErrorMessage] = useState("");
|
|
|
|
const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
|
|
|
|
|
2021-07-05 15:51:49 +00:00
|
|
|
const [backendErrorMessage, setBackendErrorMessage] = useState("");
|
|
|
|
const [backendSuccessMessage, setBackendSuccessMessage] = useState("");
|
|
|
|
const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");
|
|
|
|
|
2021-07-04 23:07:50 +00:00
|
|
|
/* boolean if the values are ok */
|
|
|
|
const [isAgeOk, setIsAgeOk] = useState("");
|
|
|
|
const [isGenderOk, setIsGenderOk] = useState("");
|
|
|
|
const [isEducationOk, setIsEducationOk] = useState("");
|
|
|
|
const [isSkillsOk, setIsSkillsOk] = useState("");
|
|
|
|
|
2021-07-04 23:19:26 +00:00
|
|
|
/* genereal check if survey is valid */
|
|
|
|
const [isSurveyValid, setIsSurveyValid] = useState("");
|
2021-06-26 22:39:28 +00:00
|
|
|
|
2021-06-24 00:01:17 +00:00
|
|
|
const onSubmitClick = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
let opts = {
|
|
|
|
age: age,
|
|
|
|
gender: gender,
|
|
|
|
education: education,
|
|
|
|
skills: skills,
|
|
|
|
};
|
2021-06-26 22:39:28 +00:00
|
|
|
|
2021-07-04 23:19:26 +00:00
|
|
|
setIsAgeOk(true);
|
|
|
|
setIsGenderOk(true);
|
|
|
|
setIsEducationOk(true);
|
|
|
|
setIsSkillsOk(true);
|
2021-07-04 23:07:50 +00:00
|
|
|
|
2021-06-26 22:39:28 +00:00
|
|
|
if (!Number(age)) {
|
2021-07-04 23:07:50 +00:00
|
|
|
setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
|
2021-07-04 23:19:26 +00:00
|
|
|
setIsSurveyValid(false);
|
2021-07-04 23:07:50 +00:00
|
|
|
setIsAgeOk(false);
|
2021-06-26 22:39:28 +00:00
|
|
|
}
|
|
|
|
if (gender === "DEFAULT" || gender === "") {
|
2021-07-04 23:07:50 +00:00
|
|
|
setGenderErrorMessage(
|
|
|
|
"Bitte wähle eine der Optionen für dein Geschlecht aus."
|
|
|
|
);
|
2021-07-04 23:19:26 +00:00
|
|
|
setIsSurveyValid(false);
|
2021-07-04 23:07:50 +00:00
|
|
|
setIsGenderOk(false);
|
2021-06-26 22:39:28 +00:00
|
|
|
}
|
|
|
|
if (education === "DEFAULT" || education === "") {
|
2021-07-04 23:07:50 +00:00
|
|
|
setEducationErrorMessage(
|
|
|
|
"Bitte wähle eine der Optionen zu deiner Ausbildung aus."
|
|
|
|
);
|
2021-07-04 23:19:26 +00:00
|
|
|
setIsSurveyValid(false);
|
2021-07-04 23:07:50 +00:00
|
|
|
setIsEducationOk(false);
|
2021-06-26 22:39:28 +00:00
|
|
|
}
|
|
|
|
if (skills === "DEFAULT" || skills === "") {
|
2021-07-04 23:07:50 +00:00
|
|
|
setSkillsErrorMessage(
|
|
|
|
"Bitte wähle eine der Optionen zu den Fähigkeiten aus"
|
|
|
|
);
|
2021-07-04 23:19:26 +00:00
|
|
|
setIsSurveyValid(false);
|
2021-07-04 23:07:50 +00:00
|
|
|
setIsSkillsOk(false);
|
2021-06-26 22:39:28 +00:00
|
|
|
}
|
|
|
|
|
2021-07-05 15:51:49 +00:00
|
|
|
setIsSurveyValid(true);
|
2021-07-04 23:19:26 +00:00
|
|
|
if (isSurveyValid === true) {
|
2021-07-04 23:07:50 +00:00
|
|
|
authFetch("/api/protected/umfrage", {
|
2021-06-26 23:16:40 +00:00
|
|
|
method: "post",
|
|
|
|
body: JSON.stringify(opts),
|
2021-07-05 15:51:49 +00:00
|
|
|
}).then((response) => {
|
|
|
|
if (response.status === 200) {
|
|
|
|
response.json().then((r) => {
|
|
|
|
setBackendSuccessMessage(r.message);
|
|
|
|
setIsSurveyValidBackend(true);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
response.json().then((r) => {
|
|
|
|
setBackendErrorMessage(r.message);
|
|
|
|
setIsSurveyValidBackend(false);
|
|
|
|
});
|
|
|
|
}
|
2021-06-26 23:16:40 +00:00
|
|
|
});
|
|
|
|
}
|
2021-06-24 00:01:17 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const handleAgeChange = (e) => {
|
|
|
|
setAge(e.target.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleGenderChange = (e) => {
|
|
|
|
setGender(e.target.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleEducationChange = (e) => {
|
|
|
|
setEducation(e.target.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleSkillsChange = (e) => {
|
|
|
|
setSkills(e.target.value);
|
|
|
|
};
|
|
|
|
|
2021-06-23 03:12:01 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-06-24 00:53:42 +00:00
|
|
|
<div className="sitePage">
|
2021-06-23 03:12:01 +00:00
|
|
|
<h1> Umfrage</h1>
|
2021-07-06 00:24:10 +00:00
|
|
|
<p>
|
2021-07-10 21:44:37 +00:00
|
|
|
Super, die Registrierung hat funktioniert! Du bist nun eingeloggt und
|
|
|
|
ich erfasse deine Tastaturanschläge und die Mausbewegungen. Wenn du
|
|
|
|
dich wieder abmelden möchtest, kannst du das{" "}
|
|
|
|
<Link to="/logout">hier</Link> machen.
|
2021-07-06 00:24:10 +00:00
|
|
|
</p>
|
2021-06-23 03:12:01 +00:00
|
|
|
<p>
|
|
|
|
Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
|
|
|
|
eine kurze Erhebung einiger wichtiger Daten machen. Die Daten werden
|
|
|
|
natürlich nicht genauer verfolgt und die Auswertung der biometrischen
|
|
|
|
Verhaltensmerkmale geschieht unabhängig davon. Konkret bedeutet das,
|
|
|
|
dass ich deine Angaben nicht mit den Informationen aus den
|
|
|
|
Verhaltensmerkmalen zusammenfliessen lasse.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Die Umfrage dauert nur ca. 2 Minuten und nach der ersten Befragung
|
2021-06-24 00:53:42 +00:00
|
|
|
musst du diese auch nicht mehr ausfüllen, da ich dann eine ungefähre
|
|
|
|
Auswertung machen kann, wie sich die Studienteilnehmenden aufteilen.
|
|
|
|
So kann es für mich beispielsweise relevant sein, wenn sämtliche
|
|
|
|
Teilnehmenden ein sehr gutes Informatikverständnis haben.
|
2021-06-23 03:12:01 +00:00
|
|
|
</p>
|
2021-06-26 22:41:17 +00:00
|
|
|
<form id="umfrage">
|
2021-06-23 03:12:01 +00:00
|
|
|
<InputField
|
|
|
|
InputType="number"
|
2021-06-24 00:01:17 +00:00
|
|
|
onChange={handleAgeChange}
|
2021-06-26 22:41:17 +00:00
|
|
|
className="input-field"
|
2021-06-23 03:12:01 +00:00
|
|
|
LabelName="Wie alt bist du? (Alter in Jahren)"
|
|
|
|
/>
|
2021-07-04 23:07:50 +00:00
|
|
|
{!isAgeOk && <ErrorMessage message={ageErrorMessage} />}
|
2021-06-24 00:53:42 +00:00
|
|
|
<div className="input-field">
|
2021-06-24 00:01:17 +00:00
|
|
|
<label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
|
|
|
|
<select
|
|
|
|
name="gender"
|
|
|
|
id="gender"
|
|
|
|
onChange={handleGenderChange}
|
|
|
|
defaultValue="DEFAULT"
|
|
|
|
>
|
|
|
|
<option disabled value="DEFAULT">
|
|
|
|
-- Bitte wähle etwas aus --{" "}
|
|
|
|
</option>
|
|
|
|
<option value="male">Männlich</option>
|
|
|
|
<option value="female">Weiblich</option>
|
2021-07-05 15:51:49 +00:00
|
|
|
<option value="divers">Divers</option>
|
2021-06-24 00:01:17 +00:00
|
|
|
<option value="sex_na">Keine Angabe</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
2021-07-04 23:07:50 +00:00
|
|
|
{!isGenderOk && <ErrorMessage message={genderErrorMessage} />}
|
2021-06-24 00:53:42 +00:00
|
|
|
<div className="input-field">
|
2021-06-24 00:01:17 +00:00
|
|
|
<label htmlFor="education">
|
|
|
|
Welches ist deine höchste abgeschlossene Ausbildung?
|
|
|
|
</label>
|
2021-06-24 00:53:42 +00:00
|
|
|
<br />
|
2021-06-24 00:01:17 +00:00
|
|
|
<select
|
|
|
|
name="education"
|
|
|
|
id="education"
|
|
|
|
onChange={handleEducationChange}
|
|
|
|
defaultValue="DEFAULT"
|
|
|
|
>
|
|
|
|
<option disabled value="DEFAULT">
|
|
|
|
-- Bitte wähle deine Ausbildung aus --
|
|
|
|
</option>
|
2021-07-05 15:51:49 +00:00
|
|
|
<option value="edu_lehre">Berufslehre</option>
|
|
|
|
<option value="edu_gymnasium">Gymnasiale Maturität</option>
|
|
|
|
<option value="edu_berufsmatura">Berufsmatura</option>
|
|
|
|
<option value="edu_bachelor">Bachelor</option>
|
|
|
|
<option value="edu_Master">Master oder höher</option>
|
|
|
|
<option value="edu_na">Keine Angabe</option>
|
2021-06-24 00:01:17 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
2021-07-04 23:19:26 +00:00
|
|
|
{!isEducationOk && <ErrorMessage message={educationErrorMessage} />}
|
2021-06-24 00:53:42 +00:00
|
|
|
<div className="input-field">
|
2021-06-24 00:01:17 +00:00
|
|
|
<label htmlFor="itskills">
|
|
|
|
Wie schätzt du deine Kompetenzen im Bereich der Informatik als
|
|
|
|
Anwender ein?
|
|
|
|
</label>
|
2021-06-24 00:53:42 +00:00
|
|
|
<br />
|
2021-06-24 00:01:17 +00:00
|
|
|
<select
|
|
|
|
name="itskills"
|
|
|
|
id="itskills"
|
|
|
|
onChange={handleSkillsChange}
|
|
|
|
defaultValue="DEFAULT"
|
|
|
|
>
|
|
|
|
<option disabled value="DEFAULT">
|
|
|
|
-- Bitte wähle etwas aus --
|
|
|
|
</option>
|
2021-07-05 15:51:49 +00:00
|
|
|
<option value="skills_sehr_gut">Sehr gut</option>
|
|
|
|
<option value="skills_gut">Gut</option>
|
|
|
|
<option value="skills_mittel">Mittel</option>
|
|
|
|
<option value="skills_nicht_so_good">Eher nicht so gut</option>
|
|
|
|
<option value="skills_garnicht">Gar nicht gut</option>
|
|
|
|
<option value="skills_na">Keine Angabe</option>
|
2021-06-24 00:01:17 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
2021-07-04 23:07:50 +00:00
|
|
|
{!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
|
2021-06-23 03:12:01 +00:00
|
|
|
<SubmitField
|
|
|
|
InputName="Umfrage abschicken"
|
|
|
|
InputValue="Umfrage abschicken"
|
|
|
|
LabelName="Umfrage abschicken"
|
2021-06-26 22:41:17 +00:00
|
|
|
onClick={onSubmitClick}
|
2021-06-23 03:12:01 +00:00
|
|
|
/>
|
|
|
|
</form>
|
2021-07-05 15:51:49 +00:00
|
|
|
{!isSurveyValidBackend ? (
|
|
|
|
<ErrorMessage message={backendErrorMessage} />
|
|
|
|
) : (
|
2021-07-08 23:01:17 +00:00
|
|
|
<Redirect to="/behavior" />
|
2021-07-05 15:51:49 +00:00
|
|
|
)}
|
2021-06-23 03:12:01 +00:00
|
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|