CodeWanderer

<button type="button" id="message-confirm">Weiter</button>
      </div>
      <div id="info-message">
        <div id="info-message-header">
          <img id="info-message-img" src="" />
          <div id="info-message-header-text">
            <h4 id="info-message-subheadline"></h4>
            <h2 id="info-message-headline">Test</h2>
          </div>
        </div>
        <div id="info-message-contents">
          <div id="info-message-contents-text"></div>
          <div id="info-message-contents-version"></div>
          <h4 id="info-message-content-commits-headline">Last Commits</h4>
          <div id="info-message-contents-commits"></div>
        </div>
        <a id="info-message-link" href="" target="_blank">Check this out in detail</a>
        <div id="info-message-close">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path
              fill="#9CA1A6"
              d="M56.5 47.5L78.9 25c1.2-1.2 1.2-3.1 0-4.2-1.2-1.2-3.1-1.2-4.2 0L52.3 43.3 29.8 20.8c-1.2-1.2-3.1-1.2-4.2 0-1.2 1.2-1.2 3.1 0 4.2L48 47.5 25.6 70c-1.2 1.2-1.2 3.1 0 4.2.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9l22.5-22.5 22.5 22.5c.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9c1.2-1.2 1.2-3.1 0-4.2L56.5 47.5z"
            />
          </svg>
        </div>
      </div>
      <div id="intro">
        <div id="intro-step1">
          <h1>Hello there 👋,</h1>
          <p>
            thanks for participating in an interactive study for this research project. If there are
            any problems with this study do not hesitate to contact me via mail:
            <a href="mailto:me@dnsc.io">me@dnsc.io</a>
          </p>
          <p>
            You are participating in a study on Playful Experiences within the Onboarding Process of
            Software Development Projects. In the following you are going to be guided through an
            interactive visualization of a software project. Within that visualization you are going
            to be able to reveal certain parts of the project, that might be of value in an
            onboarding process. The visualizations are going to be accompanied by some questions on
            the visualization itself but also on the broader aspect of using game mechanics in
            software development. There is additional information on the study background and the
            study procedure in the next step.
          </p>
          <div id="intro-disclaimer">
            <h3>Disclaimer</h3>
            <p>
              Do not expect a real game experience within this study. This study aims to gather
              initial feedback on certain aspects of which information could be interesting to
              include within software development onboarding and how its presentation changes how it
              is perceived. The visualization of the in-game elements is therefore very abstract.
              The arguably more important part of this study are the answers to the questions you
              will be asked in the end, so please answer them carefully. Thanks in advance, let's
              start now!
            </p>
          </div>
        </div>
        <div id="intro-step2">
          <h1>Information about data protection and declaration of consent</h1>
          <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 id="name-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>
        <div id="intro-step5">Knowledge Questions</div>
        <div id="intro-step6">
          <h1>Questions about Play in Software Development</h1>
          <p>
            After the project-specific "knowledge" questions in the last step I want to get your
            valuable input as a developer for the following questions:
          </p>
          <label for="fb-1">
            1) Would you say, that you have learned something about the underlying project from
            going through this interactive visualization? If yes, what have you learned? If no, what
            was missing from the visualization in your opinion?
            <textarea id="fb-1" name="fb-1">

2) What was your overall experience going through this visualization? What did you like or did not like? Is there anything that stood out for you? 3) How did you experience the companion (Lower right)? Was it helpful or rather annoying? 4) Could you imageine yourself using this visualization or something similar on different projects to learn about them? If so, on which projects would you want to try it out? 5) Have you felt like any information was missing on the things that were shown within the visualization? 6) Would you have liked to see additional information on the underlying project? If so, what kind of information and how would you have liked? 7) Do you have any additional ideas on how playful elements or game mechanics could be used within the onboarding phase of software development projects? 8) What is your general stance on using games/game mechanics or playful elements within software development? 9) Do you have any additional ideas on how playful elements or game mechanics could be used within the onboarding phase of software development projects? Any elements from games you play that you think could be reused when making yourself familiar with new projects? 10) Anything else you want to mention?

Thank you so much! 🙏

Thank you for your participation. If you have additional feedback please contact me: me@dnsc.io. You can now safely close the browser window.