Renaming and autoformatting
- renamed the react files to jsx - autoformat with vscode
This commit is contained in:
parent
e762032f00
commit
85e484bf0b
32 changed files with 127 additions and 129 deletions
228
frontend/src/components/pages/Umfrage.jsx
Normal file
228
frontend/src/components/pages/Umfrage.jsx
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
import React, { useState } from "react";
|
||||
import "../../App.css";
|
||||
import "../Input.css";
|
||||
import Footer from "../../Footer";
|
||||
import InputField from "../InputField";
|
||||
import SubmitField from "../SubmitField";
|
||||
import { authFetch } from "../../auth/AuthProvider";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Redirect } from "react-router";
|
||||
|
||||
export default function Umfrage() {
|
||||
/* values from survey */
|
||||
const [age, setAge] = useState("");
|
||||
const [gender, setGender] = useState("");
|
||||
const [education, setEducation] = useState("");
|
||||
const [skills, setSkills] = useState("");
|
||||
|
||||
/* error messages */
|
||||
const [ageErrorMessage, setAgeErrorMessage] = useState("");
|
||||
const [genderErrorMessage, setGenderErrorMessage] = useState("");
|
||||
const [educationErrorMessage, setEducationErrorMessage] = useState("");
|
||||
const [skillsErrorMessage, setSkillsErrorMessage] = useState("");
|
||||
|
||||
const [backendErrorMessage, setBackendErrorMessage] = useState("");
|
||||
const [isSurveyValidBackend, setIsSurveyValidBackend] = useState("");
|
||||
|
||||
/* boolean if the values are ok */
|
||||
const [isAgeOk, setIsAgeOk] = useState("");
|
||||
const [isGenderOk, setIsGenderOk] = useState("");
|
||||
const [isEducationOk, setIsEducationOk] = useState("");
|
||||
const [isSkillsOk, setIsSkillsOk] = useState("");
|
||||
|
||||
/* genereal check if survey is valid */
|
||||
const [isSurveyValid, setIsSurveyValid] = useState(true);
|
||||
|
||||
const onSubmitClick = (e) => {
|
||||
e.preventDefault();
|
||||
let opts = {
|
||||
age: age,
|
||||
gender: gender,
|
||||
education: education,
|
||||
skills: skills,
|
||||
};
|
||||
|
||||
setIsAgeOk(true);
|
||||
setIsGenderOk(true);
|
||||
setIsEducationOk(true);
|
||||
setIsSkillsOk(true);
|
||||
setIsSurveyValid(true);
|
||||
|
||||
if (!Number(age)) {
|
||||
setAgeErrorMessage("Das Alter muss als Zahl angegeben werden.");
|
||||
setIsSurveyValid(false);
|
||||
setIsAgeOk(false);
|
||||
}
|
||||
if (gender === "DEFAULT" || gender === "") {
|
||||
setGenderErrorMessage(
|
||||
"Bitte wähle eine der Optionen für dein Geschlecht aus."
|
||||
);
|
||||
setIsSurveyValid(false);
|
||||
setIsGenderOk(false);
|
||||
}
|
||||
if (education === "DEFAULT" || education === "") {
|
||||
setEducationErrorMessage(
|
||||
"Bitte wähle eine der Optionen zu deiner Ausbildung aus."
|
||||
);
|
||||
setIsSurveyValid(false);
|
||||
setIsEducationOk(false);
|
||||
}
|
||||
if (skills === "DEFAULT" || skills === "") {
|
||||
setSkillsErrorMessage(
|
||||
"Bitte wähle eine der Optionen zu den Fähigkeiten aus"
|
||||
);
|
||||
setIsSurveyValid(false);
|
||||
setIsSkillsOk(false);
|
||||
}
|
||||
|
||||
if (isSurveyValid === true) {
|
||||
authFetch("/api/protected/umfrage", {
|
||||
method: "post",
|
||||
body: JSON.stringify(opts),
|
||||
}).then((response) => {
|
||||
if (response.status === 200) {
|
||||
response.json().then((r) => {
|
||||
setIsSurveyValidBackend(true);
|
||||
});
|
||||
} else {
|
||||
response.json().then((r) => {
|
||||
setBackendErrorMessage(r.message);
|
||||
setIsSurveyValidBackend(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="sitePage">
|
||||
<h1> Umfrage</h1>
|
||||
<p>
|
||||
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="/">hier</Link>{" "}
|
||||
machen.
|
||||
</p>
|
||||
<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
|
||||
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.
|
||||
</p>
|
||||
<form id="umfrage">
|
||||
<InputField
|
||||
InputType="number"
|
||||
onChange={handleAgeChange}
|
||||
className="input-field"
|
||||
LabelName="Wie alt bist du? (Alter in Jahren)"
|
||||
/>
|
||||
{!isAgeOk && <ErrorMessage message={ageErrorMessage} />}
|
||||
<div className="input-field">
|
||||
<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>
|
||||
<option value="divers">Divers</option>
|
||||
<option value="sex_na">Keine Angabe</option>
|
||||
</select>
|
||||
</div>
|
||||
{!isGenderOk && <ErrorMessage message={genderErrorMessage} />}
|
||||
<div className="input-field">
|
||||
<label htmlFor="education">
|
||||
Welches ist deine höchste abgeschlossene Ausbildung?
|
||||
</label>
|
||||
<br />
|
||||
<select
|
||||
name="education"
|
||||
id="education"
|
||||
onChange={handleEducationChange}
|
||||
defaultValue="DEFAULT"
|
||||
>
|
||||
<option disabled value="DEFAULT">
|
||||
-- Bitte wähle deine Ausbildung aus --
|
||||
</option>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
{!isEducationOk && <ErrorMessage message={educationErrorMessage} />}
|
||||
<div className="input-field">
|
||||
<label htmlFor="itskills">
|
||||
Wie schätzt du deine Kompetenzen im Bereich der Informatik als
|
||||
Anwender ein?
|
||||
</label>
|
||||
<br />
|
||||
<select
|
||||
name="itskills"
|
||||
id="itskills"
|
||||
onChange={handleSkillsChange}
|
||||
defaultValue="DEFAULT"
|
||||
>
|
||||
<option disabled value="DEFAULT">
|
||||
-- Bitte wähle etwas aus --
|
||||
</option>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
{!isSkillsOk && <ErrorMessage message={skillsErrorMessage} />}
|
||||
<SubmitField
|
||||
InputName="Umfrage abschicken"
|
||||
InputValue="Umfrage abschicken"
|
||||
LabelName="Umfrage abschicken"
|
||||
onClick={onSubmitClick}
|
||||
/>
|
||||
</form>
|
||||
{!isSurveyValidBackend ? (
|
||||
<ErrorMessage message={backendErrorMessage} />
|
||||
) : (
|
||||
<Redirect to="/study" />
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue