dennis/codewanderer
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Impülement intro questions

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-02 17:01:27 +02:00
parent 1e5b627e26
commit 47a7ec98ea
5 changed files with 266 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

145
index.html
View file

@ -70,9 +70,148 @@
</p>
</div>
</div>
<div id="intro-step2">Step 2</div>
<div id="intro-step3">Step 3</div>
<div id="intro-step4">Step 4</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>
<button id="intro-button">Let's start!</button>
</div>
</div>

6
main.ts
View file

@ -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) {

2
src/store.ts
View file

@ -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: [],

81
src/ui/intro.ts
View file

@ -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.showStep(currentStep);
this.anonymous = state.participantAnonymous;
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) {

42
styles.scss
View file

@ -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;
}
}
}