290 lines
15 KiB
HTML
290 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>CodeWanderer</title>
|
|
<link rel="stylesheet" href="./styles.scss" />
|
|
</head>
|
|
<body>
|
|
<div class="ui">
|
|
<div id="companion">
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="companion-shape" viewBox="0 0 80 80">
|
|
<polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="companion-await-indicator" viewBox="0 0 80 80">
|
|
<polygon fill="#A60303" points="40,0 68,12 80,40 68,68 40,80 12,68 0,40 12,12"></polygon>
|
|
</svg>
|
|
<div id="companion-eye"><div id="companion-pupil"></div></div>
|
|
<div id="companion-mouth"></div>
|
|
</div>
|
|
<div id="message">
|
|
<div id="message-text"></div>
|
|
<textarea id="message-input" placeholder="Bitte gib einen Text ein ..." />
|
|
<button type="button" id="message-confirm">Weiter</button>
|
|
</div>
|
|
<div id="info-message">
|
|
<div id="info-message-header">
|
|
<h2 id="info-message-headline">Test</h2>
|
|
<img id="info-message-img" src="" />
|
|
</div>
|
|
<div id="info-message-contents">Test</div>
|
|
<a id="info-message-link" href="" target="_blank">Check this out on Github</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. I hope
|
|
you've already filled out the declaration of consent I have sent you. If there are any
|
|
problems with that or any other part of 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.
|
|
</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 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" />
|
|
</label>
|
|
<label for="fb-2">
|
|
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?
|
|
<textarea id="fb-2" name="fb-2" />
|
|
</label>
|
|
<label for="fb-3">
|
|
3) How did you experience the companion (Lower right)? Was it helpful or rather
|
|
annoying?
|
|
<textarea id="fb-3" name="fb-3" />
|
|
</label>
|
|
<label for="fb-4">
|
|
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?
|
|
<textarea id="fb-4" name="fb-4" />
|
|
</label>
|
|
<label for="fb-5">
|
|
5) Have you felt like any information was missing on the things that were shown within
|
|
the visualization?
|
|
<textarea id="fb-5" name="fb-5" />
|
|
</label>
|
|
<label for="fb-6">
|
|
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?
|
|
<textarea id="fb-6" name="fb-6" />
|
|
</label>
|
|
<label for="fb-7">
|
|
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?
|
|
<textarea id="fb-7" name="fb-7" />
|
|
</label>
|
|
<label for="fb-8">
|
|
8) What is your general stance on using games/game mechanics or playful elements within
|
|
software development?
|
|
<textarea id="fb-8" name="fb-8" />
|
|
</label>
|
|
<label for="fb-9">
|
|
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?
|
|
<textarea id="fb-9" name="fb-9" />
|
|
</label>
|
|
<label for="fb-10">
|
|
10) Anything else you want to mention?
|
|
<textarea id="fb-10" name="fb-10" />
|
|
</label>
|
|
</div>
|
|
<div id="intro-step7">
|
|
<h2>Thank you so much! 🙏</h2>
|
|
<p>
|
|
Thank you for your participation. If you have additional feedback please contact me:
|
|
<a href="mailto:me@dnsc.io">me@dnsc.io</a>. You can now safely close the browser window.
|
|
</p>
|
|
</div>
|
|
<button id="intro-button">Let's start!</button>
|
|
</div>
|
|
</div>
|
|
<div id="backdrop"></div>
|
|
<div id="intro-backdrop"></div>
|
|
<script src="./main.ts"></script>
|
|
</body>
|
|
</html>
|