feat: Added content to main informational page.

src/App.js

@@ -26,7 +26,7 @@ const InBetweenSite6 = React.lazy(() =>
   import("./pages/study_site_6/InBetweenSite6")
 );
 
-const TestInfoPage = React.lazy(() => import("./pages/TestInfoPage"));
+const MainInfoPage = React.lazy(() => import("./pages/MainInfoPage"));
 
 const EndPage = React.lazy(() => import("./pages/EndPage"));
 const StartPage1 = React.lazy(() => import("./pages/study_site_1/StartPage1"));
@@ -157,7 +157,7 @@ function App() {
             path="/"
             element={
               <React.Suspense fallback={<>...</>}>
-                <TestInfoPage redirectLoc={latinSquareOrder[0]} />
+                <MainInfoPage redirectLoc={latinSquareOrder[0]} />
               </React.Suspense>
             }
           />

src/components/RandomIDComponent.jsx

@@ -23,8 +23,22 @@ function RandomIDComponent() {
   setState({ participant_id: "" + PARTICIPANT_NUMBER });
   return (
     <div>
-      <h3>Your ID:</h3>
-      <p>{PARTICIPANT_NUMBER}</p>
+      <p>
+        Here is the ID, with which you can contact me to redact consent and
+        other related data or ask specific questions afterwards.
+      </p>
+      <div style={{ margin: "20px" }}>
+        <h3 style={{ width: "fit-content", margin: "0 auto" }}>Your ID:</h3>
+        <p
+          style={{
+            width: "fit-content",
+            margin: "12px auto",
+            fontSize: "32px",
+          }}
+        >
+          <b>{PARTICIPANT_NUMBER}</b>
+        </p>
+      </div>
     </div>
   );
 }

src/pages/MainInfoPage.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import InfoPageComponent from "../components/InfoPageComponent";
+import RandomIDComponent from "../components/RandomIDComponent";
+
+function MainInfoPage({ redirectLoc }) {
+  return (
+    <InfoPageComponent redirectLoc={redirectLoc}>
+      <p>Welcome to the main part of this user study. </p>
+      <p>
+        Here, you will go through six different imaginary websites with the goal
+        of completing a given task. Each website and its corresponding task will
+        be described before you try to accomplish its goal.{" "}
+      </p>
+      <p>
+        Please notify me when you have reached the task description of the next
+        website so that I can give you the corresponding questionnaire before
+        starting with the task on the next website. If there are any questions,
+        feel free to ask me at any time.
+      </p>
+      <RandomIDComponent />
+      <p style={{width: "fit-content", margin: "0 auto"}}>Thank you for participation. ❤️</p>
+    </InfoPageComponent>
+  );
+}
+
+export default MainInfoPage;

src/pages/TestInfoPage.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-import InfoPageComponent from "../components/InfoPageComponent";
-import RandomIDComponent from "../components/RandomIDComponent";
-
-function TestInfoPage({ redirectLoc }) {
-  return (
-    <InfoPageComponent redirectLoc={redirectLoc}>
-      <p>
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
-        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-        ipsum dolor sit amet.
-      </p>
-      <RandomIDComponent />
-    </InfoPageComponent>
-  );
-}
-
-export default TestInfoPage;