frontend/src/components/Input.css

@@ -1,12 +1,15 @@
 .input-field {
   width: auto;
+  margin-bottom: 2em;
+  font-size: 1.5em;
 }
 
 .input-field p {
   font-size: 1.5em;
 }
 
-.input-field input {
+.input-field input,
+.input-field select {
   width: 100%;
   border-color: var(--primary);
   background-color: var(--secondary);
@@ -27,3 +30,7 @@
 .input-field input[type="submit"]:hover {
   background-color: var(--primary-contr);
 }
+
+.input-field label {
+  font-size: 1.5em;
+}

frontend/src/components/pages/Umfrage.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { useState } from "react/cjs/react.development";
 import "../../App.css";
+import "../Input.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
@@ -53,7 +54,7 @@ export default function Umfrage() {
 
   return (
     <>
-      <div className="sitePage" onSubmit={onSubmitClick}>
+      <div className="sitePage">
         <h1> Umfrage</h1>
         <p>
           Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
@@ -65,16 +66,18 @@ export default function Umfrage() {
         </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 Auswertung
-          machen kann.
+          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">
+        <form id="umfrage" onClick={onSubmitClick}>
           <InputField
             InputType="number"
             onChange={handleAgeChange}
             LabelName="Wie alt bist du? (Alter in Jahren)"
           />
-          <div>
+          <div className="input-field">
             <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
             <select
               name="gender"
@@ -91,10 +94,11 @@ export default function Umfrage() {
               <option value="sex_na">Keine Angabe</option>
             </select>
           </div>
-          <div>
+          <div className="input-field">
             <label htmlFor="education">
               Welches ist deine höchste abgeschlossene Ausbildung?
             </label>
+            <br />
             <select
               name="education"
               id="education"
@@ -112,11 +116,12 @@ export default function Umfrage() {
               <option>Keine Angabe</option>
             </select>
           </div>
-          <div>
+          <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"
@@ -131,6 +136,7 @@ export default function Umfrage() {
               <option>Mittel</option>
               <option>Eher nicht so gut</option>
               <option>Gar nicht gut</option>
+              <option>Keine Angabe</option>
             </select>
           </div>
           <SubmitField