From 1e9fbf53ae2a1eff477be5f8869ea7201746416e Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Wed, 12 Jun 2024 17:44:41 +0200
Subject: [PATCH] feat: Added content to main informational page.

---
 src/App.js                           |  4 ++--
 src/components/RandomIDComponent.jsx | 18 ++++++++++++++++--
 src/pages/MainInfoPage.jsx           | 26 ++++++++++++++++++++++++++
 src/pages/TestInfoPage.jsx           | 24 ------------------------
 4 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/MainInfoPage.jsx
 delete mode 100644 src/pages/TestInfoPage.jsx

diff --git a/src/App.js b/src/App.js
index dfd740d..2edf7ff 100644
--- a/src/App.js
+++ b/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>
             }
           />
diff --git a/src/components/RandomIDComponent.jsx b/src/components/RandomIDComponent.jsx
index 270b40e..8ab935d 100644
--- a/src/components/RandomIDComponent.jsx
+++ b/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>
   );
 }
diff --git a/src/pages/MainInfoPage.jsx b/src/pages/MainInfoPage.jsx
new file mode 100644
index 0000000..358933a
--- /dev/null
+++ b/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;
diff --git a/src/pages/TestInfoPage.jsx b/src/pages/TestInfoPage.jsx
deleted file mode 100644
index 483cd81..0000000
--- a/src/pages/TestInfoPage.jsx
+++ /dev/null
@@ -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;