From 47a7ec98eab7ccdc81077719f00c6aa82aa31da0 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 2 Aug 2021 17:01:27 +0200 Subject: [PATCH] =?UTF-8?q?Imp=C3=BClement=20intro=20questions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++- main.ts | 6 +- src/store.ts | 2 + src/ui/intro.ts | 81 +++++++++++++++++++++++++-- styles.scss | 42 ++++++++++++++ 5 files changed, 266 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 39db543..da688e1 100644 --- a/index.html +++ b/index.html @@ -70,9 +70,148 @@

-
Step 2
-
Step 3
-
Step 4
+
+

Information about data protection and declaration of consent

+

Dear participant,

+

+ 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. +

+

General Study Information

+

+ 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. +

+

Overall study procedure

+

+ 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. +

+

Rights

+

+ 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. +

+

Risks

+

+ 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. +

+

Confidentiality and Data Processing

+

+ 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: +

+ +

+ 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. +

+

Renumeration

+

You will not receive an expense allowance for participation.

+

Consent

+

+ 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. +

+ +
+
+

General Questions

+

Please provide some additional information about you below:

+ + + + +
Please provide a value for all inputs
+
+
+

The study itself

+

+ 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 + ethereumjs monorepo. 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. +

+

Have fun! 🤟

+
diff --git a/main.ts b/main.ts index 3fe2b27..7afcde9 100644 --- a/main.ts +++ b/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) { diff --git a/src/store.ts b/src/store.ts index b79019f..2f9097c 100644 --- a/src/store.ts +++ b/src/store.ts @@ -21,6 +21,7 @@ export interface State { revealables: RevealableInterface[]; finishedSubProjects: string[]; setProjectMetadata: (projectName: string) => void; + participantAnonymous: boolean; } const store = create( @@ -28,6 +29,7 @@ const store = create( currentIntroStep: 1, currentScene: Scenes.OVERVIEW, currentSubproject: null, + participantAnonymous: false, companionState: CompanionState.IDLE, infoMessageShown: false, infoMessages: [], diff --git a/src/ui/intro.ts b/src/ui/intro.ts index ac54a6a..e85a2a0 100644 --- a/src/ui/intro.ts +++ b/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.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) { diff --git a/styles.scss b/styles.scss index 4b6effc..684b480 100644 --- a/styles.scss +++ b/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; + } } }