Impülement intro questions

index.html

@@ -70,9 +70,148 @@
             </p>
           </div>
         </div>
-        <div id="intro-step2">Step 2</div>
+        <div id="intro-step2">
-        <div id="intro-step3">Step 3</div>
+          <h1>Information about data protection and declaration of consent</h1>
-        <div id="intro-step4">Step 4</div>
+          <p>Dear participant,</p>
+          <p>
+            thank you for your interest in participating in this study on ”Playful Experiences in
+            the Onboarding Process of Software Development Projects”. This study takes place as a
+            part of my master thesis on “Onboarding in Software Development Projects as a Space of
+            Play”. The thesis is written as a part of the new Joint Master "Human-Computer
+            Interaction" of the FH Salzburg and the University of Salzburg. In order to use your
+            personal data, we would need your written declaration of consent. Please, carefully read
+            the following information.
+          </p>
+          <h3>General Study Information</h3>
+          <p>
+            The goal of this study is to research how software developers experience playful
+            approaches on the onboarding process into new projects. The results of this study are
+            going to contribute to the research body of both the software development field but also
+            the field of “Play”. From the study results conclusions are going to be drawn about: The
+            openness towards playful experiences in the software development field, possible hurdles
+            on implementing such experiences, the general attitude of developers towards play in the
+            field and the selection of what information to include in onboarding processes.
+          </p>
+          <h3>Overall study procedure</h3>
+          <p>
+            The participant will take part in a hybrid-study setting. Part of the study consists of
+            going through an interactive visualization of an open-source software project and
+            revealing parts of information within some parts of the project. The other part of the
+            study consists of questions on the visualization and general questions on the
+            intersection of Play and software development. The study can be accessed online and can
+            be finished online without additional work on the participants side. Overall the
+            procedure should take between 15 and 25 minutes.
+          </p>
+          <h3>Rights</h3>
+          <p>
+            The participation in this study is voluntary. You may withdraw or stop your
+            participation at any time without incurring any consequences. Moreover, you can request
+            information about the processed personal data at any time, even after the termination of
+            the study (for further information see also Confidentiality and data processing). If you
+            have any questions please contact the study leader.
+          </p>
+          <h3>Risks</h3>
+          <p>
+            You do not incur any risks by participating in this study. If you feel uncomfortable
+            during the study you can cancel at any time without giving reasons and without incurring
+            any consequences.
+          </p>
+          <h3>Confidentiality and Data Processing</h3>
+          <p>
+            Your data will only be processed within the aforementioned project if you give your
+            written consent. The data is going to be processed via the Firebase platform
+            (https://firebase.google.com/) on european servers. For additional information on their
+            privacy and data protection guidelines visit their documentation at
+            https://policies.google.com/u/0/privacy. The following data is going to be processed
+            within the study:
+          </p>
+          <ul>
+            <li>
+              Demographic Information (Name, Age, Professional Background, Years of Experience,
+              Gender)
+            </li>
+            <li>
+              Your actions within the visualization (Timestamps of Clicks and Mouse moves together
+              with the timestamps of certain events)
+            </li>
+            <li>Your answers to the questions that are part of the study</li>
+          </ul>
+          <p>
+            After the end of the study, the data is going to be exported from Firebase and the
+            underlying app instance is going to be deleted. This data is going to be kept strictly
+            confidential and is not going to be passed on to further third parties. The data is
+            going to be analyzed and then used within my master thesis. If you only want to be
+            mentioned anonymously in my thesis please indicate so at the bottom. If you are doing
+            that your name and age are going to be hidden in my thesis and your data is only going
+            to be connected to a random ID.
+          </p>
+          <h3>Renumeration</h3>
+          <p>You will not receive an expense allowance for participation.</p>
+          <h3>Consent</h3>
+          <p>
+            I have carefully read and understood the declaration of consent. Any additional
+            questions were answered to my satisfaction. My participation is voluntary, and I know
+            that I can withdraw at any time, even without giving reasons, without incurring any
+            disadvantages. By clicking on “Agree” below I agree to the processing of my personal
+            data collected for this study and I am willing to participate.
+          </p>
+          <label for="intro-anonymous">
+            <input name="intro-anonymous" type="checkbox" id="intro-anonymous" />
+            I want to participate anonymously (the data is not going to be connected to your name)
+          </label>
+        </div>
+        <div id="intro-step3">
+          <h1>General Questions</h1>
+          <p>Please provide some additional information about you below:</p>
+          <label for="name">
+            Your name
+            <input type="text" id="intro-name" name="name" placeholder="e.g. Max" />
+          </label>
+          <label for="age">
+            Your age
+            <input type="number" id="intro-age" name="age" placeholder="e.g. 28" />
+          </label>
+          <label for="background">
+            Your Professional Background
+            <input
+              type="text"
+              id="intro-background"
+              name="background"
+              placeholder="e.g. Web Developer"
+            />
+          </label>
+          <label for="experience">
+            Your Professional Experience
+            <select
+              type="text"
+              id="intro-experience"
+              name="experience"
+              placeholder="e.g. Web Developer"
+            >
+              <option selected="true" default disabled>Choose an option ...</option>
+              <option value="0-1">0-1 years</option>
+              <option value="1-3">1-3 years</option>
+              <option value="3-5">3-5 years</option>
+              <option value="5-10">5-10 years</option>
+              <option value="10+">10 or more years</option>
+            </select>
+          </label>
+          <div id="intro-error">Please provide a value for all inputs</div>
+        </div>
+        <div id="intro-step4">
+          <h1>The study itself</h1>
+          <p>
+            Now we're ready to dive into this study. After clicking on the button below you are
+            dropped into a visualization of a software development project. This project is a
+            monorepo, more specifically the
+            <a href="https://github.com/ethereumjs/ethereumjs-monorepo">ethereumjs monorepo</a>. You
+            are controlling a little player character with your mouse. The character consists of a
+            head and tail. As soon as its head touches elements on the screen you are able to
+            interact with them. That should be all you need for now, just drop in now and take a
+            look at what is there.
+          </p>
+          <p>Have fun! 🤟</p>
+        </div>
         <button id="intro-button">Let's start!</button>
       </div>
     </div>

main.ts

@@ -38,7 +38,11 @@ const sketch = (s: p5) => {
   s.mousePressed = () => {
     const { currentScene, companionState, infoMessageShown } = store.getState();
 
-    if (companionState !== CompanionState.ACTIVE || !infoMessageShown) {
+    if (
+      companionState !== CompanionState.ACTIVE ||
+      !infoMessageShown ||
+      store.getState().currentIntroStep === 0
+    ) {
       if (currentScene === Scenes.OVERVIEW) {
         overviewScene.onSceneClick();
       } else if (currentScene === Scenes.DETAIL) {

src/store.ts

@@ -21,6 +21,7 @@ export interface State {
   revealables: RevealableInterface[];
   finishedSubProjects: string[];
   setProjectMetadata: (projectName: string) => void;
+  participantAnonymous: boolean;
 }
 
 const store = create<State>(
@@ -28,6 +29,7 @@ const store = create<State>(
     currentIntroStep: 1,
     currentScene: Scenes.OVERVIEW,
     currentSubproject: null,
+    participantAnonymous: false,
     companionState: CompanionState.IDLE,
     infoMessageShown: false,
     infoMessages: [],

src/ui/intro.ts

@@ -1,38 +1,107 @@
 import store from '../store';
 
 export class Intro {
-  currentStep: number;
+  anonymous: boolean;
 
   nextButton: HTMLElement;
+  anonymousCheckbox: HTMLInputElement;
+  introContainer: HTMLElement;
+  introBackdrop: HTMLElement;
   step1Container: HTMLElement;
   step2Container: HTMLElement;
   step3Container: HTMLElement;
   step4Container: HTMLElement;
 
+  nameRef: HTMLInputElement;
+  ageRef: HTMLInputElement;
+  backgroundRef: HTMLInputElement;
+  experienceRef: HTMLSelectElement;
+
+  errorRef: HTMLElement;
+
   constructor() {
     this.step1Container = document.getElementById('intro-step1');
     this.step2Container = document.getElementById('intro-step2');
     this.step3Container = document.getElementById('intro-step3');
     this.step4Container = document.getElementById('intro-step4');
     this.nextButton = document.getElementById('intro-button');
+    this.anonymousCheckbox = document.querySelector('#intro-anonymous');
+    this.introContainer = document.querySelector('#intro');
+    this.introBackdrop = document.querySelector('#intro-backdrop');
 
-    this.nextButton.addEventListener('click', this.onNextClick);
+    this.nameRef = document.querySelector('#intro-name');
+    this.ageRef = document.querySelector('#intro-age');
+    this.backgroundRef = document.querySelector('#intro-background');
+    this.experienceRef = document.querySelector('#intro-experience');
+
+    this.errorRef = document.querySelector('#intro-error');
+
+    this.nextButton.addEventListener('click', () => this.onNextClick());
 
     store.subscribe((state) => {
-      const currentStep = state.currentIntroStep;
+      this.anonymous = state.participantAnonymous;
-      this.showStep(currentStep);
+      this.showStep(state.currentIntroStep);
+
+      console.log(state.currentIntroStep);
+
+      if (state.currentIntroStep === 2) {
+        this.nextButton.innerHTML = 'Agree';
+      } else if (state.currentIntroStep === 3) {
+        this.nextButton.innerHTML = 'Confirm';
+      } else if (state.currentIntroStep === 4) {
+        this.nextButton.innerHTML = 'Start already!';
+      } else if (state.currentIntroStep === 0) {
+        this.introContainer.style.display = 'none';
+        this.introBackdrop.style.display = 'none';
+      }
+
+      if (this.anonymous) {
+        this.hideNameInput();
+      }
     });
   }
 
   private onNextClick() {
-    console.log('go next');
+    const currentStep = store.getState().currentIntroStep;
+
+    // Track if particpant wants to be anon
+    if (currentStep === 2) {
+      store.setState({ participantAnonymous: this.anonymousCheckbox.checked });
+    }
+
+    // Validate input
+    if (currentStep === 3) {
+      const name = this.nameRef.value;
+      const age = Number(this.ageRef.value);
+      const background = this.backgroundRef.value;
+      const experience = this.experienceRef.value;
+
+      if (!name || !age || !background || experience === 'Choose an option...') {
+        this.errorRef.style.display = 'block';
+        return;
+      } else {
+        this.errorRef.style.display = 'none';
+        this.sendDemographicData(name, age, background, experience);
+      }
+    }
+
+    if (currentStep === 4) {
+      store.setState({ currentIntroStep: 0 });
+      return;
+    }
 
     store.setState((state) => ({ currentIntroStep: state.currentIntroStep + 1 }));
   }
 
   private sendConsent() {}
 
-  private sendDemoographicData() {}
+  private sendDemographicData(name: string, age: number, background: string, experience: string) {
+    console.log(name, age, background, experience);
+
+    // TODO: Log
+  }
+
+  private hideNameInput() {}
 
   private showStep(stepToShow: number) {
     if (stepToShow === 1) {

styles.scss

@@ -39,6 +39,34 @@ button {
   }
 }
 
+label {
+  font-weight: bold;
+  margin-top: 15px;
+}
+
+input[type='text'],
+input[type='number'] {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  font-size: 18px;
+  padding: 8px 12px;
+  outline: 0;
+  border: 2px solid black;
+  border-radius: 5px;
+}
+
+select {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  font-size: 18px;
+  padding: 8px 12px;
+  outline: 0;
+  border: 2px solid black;
+  border-radius: 5px;
+}
+
 .ui {
   position: absolute;
   bottom: 40px;
@@ -268,20 +296,34 @@ button {
 
     #intro-step2 {
       display: none;
+      flex-direction: column;
     }
 
     #intro-step3 {
       display: none;
+      flex-direction: column;
     }
 
     #intro-step4 {
       display: none;
+      flex-direction: column;
     }
 
     #intro-button {
       float: right;
       margin-top: 25px;
     }
+
+    #intro-error {
+      display: none;
+      margin-top: 25px;
+      background-color: #fecaca;
+      color: #7f1d1d;
+      padding: 8px 20px;
+      border-radius: 5px;
+      border-left: 7px solid #7f1d1d;
+      margin-top: 15px;
+    }
   }
 }