Implement feedback questions
This commit is contained in:
Dennis Schoepf
parent
47a7ec98ea
commit
ef2edf38f2
5 changed files with 190 additions and 10 deletions
68
index.html
68
index.html
|
|
@ -212,6 +212,74 @@
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,25 @@ export class OverviewScene {
|
|||
}
|
||||
|
||||
private drawLocations() {
|
||||
if (
|
||||
store.getState().finishedSubProjects.every((fsp) => {
|
||||
const edge = this.edges.filter((edge) => edge.name === fsp)[0];
|
||||
return edge.finished;
|
||||
}) &&
|
||||
!store.getState().finishedGame &&
|
||||
store.getState().finishedSubProjects.length > 0
|
||||
) {
|
||||
store.setState({ finishedGame: true });
|
||||
|
||||
setTimeout(() => {
|
||||
store.getState().addUserMessage({
|
||||
text: "Nice! 😎 You made it all the way through. Now I would be very thankful if you could take some time to answer the following questions. Don't overthink the answers and write down everything that comes to your mind. The more input you give, the better no matter how well it is formulated!",
|
||||
inputWanted: false,
|
||||
onNext: () => store.setState({ currentIntroStep: 5 }),
|
||||
});
|
||||
}, 800);
|
||||
}
|
||||
|
||||
this.edges.forEach((edgeShape) => {
|
||||
if (store.getState().finishedSubProjects.some((fsp) => fsp === edgeShape.name)) {
|
||||
edgeShape.finished = true;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import project from '../metadata/project.json';
|
|||
import { InfoMessageType } from './ui/info';
|
||||
import { RevealableInterface, RevealableTypes } from './sketchObjects/Revealable';
|
||||
import { getRevealablesforSubproject } from './helpers';
|
||||
import { SubProject } from './types';
|
||||
|
||||
export interface State {
|
||||
currentIntroStep: number;
|
||||
|
|
@ -22,6 +21,7 @@ export interface State {
|
|||
finishedSubProjects: string[];
|
||||
setProjectMetadata: (projectName: string) => void;
|
||||
participantAnonymous: boolean;
|
||||
finishedGame: boolean;
|
||||
}
|
||||
|
||||
const store = create<State>(
|
||||
|
|
@ -33,6 +33,7 @@ const store = create<State>(
|
|||
companionState: CompanionState.IDLE,
|
||||
infoMessageShown: false,
|
||||
infoMessages: [],
|
||||
finishedGame: false,
|
||||
addInfoMessage: (newMessage) =>
|
||||
set((state) => ({ ...state, infoMessages: [...state.infoMessages, newMessage] })),
|
||||
userMessages: [],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import store from '../store';
|
||||
|
||||
export class Intro {
|
||||
currentStep: number;
|
||||
anonymous: boolean;
|
||||
|
||||
nextButton: HTMLElement;
|
||||
|
|
@ -11,6 +12,9 @@ export class Intro {
|
|||
step2Container: HTMLElement;
|
||||
step3Container: HTMLElement;
|
||||
step4Container: HTMLElement;
|
||||
step5Container: HTMLElement;
|
||||
step6Container: HTMLElement;
|
||||
step7Container: HTMLElement;
|
||||
|
||||
nameRef: HTMLInputElement;
|
||||
ageRef: HTMLInputElement;
|
||||
|
|
@ -24,6 +28,9 @@ export class Intro {
|
|||
this.step2Container = document.getElementById('intro-step2');
|
||||
this.step3Container = document.getElementById('intro-step3');
|
||||
this.step4Container = document.getElementById('intro-step4');
|
||||
this.step5Container = document.getElementById('intro-step5');
|
||||
this.step6Container = document.getElementById('intro-step6');
|
||||
this.step7Container = document.getElementById('intro-step7');
|
||||
this.nextButton = document.getElementById('intro-button');
|
||||
this.anonymousCheckbox = document.querySelector('#intro-anonymous');
|
||||
this.introContainer = document.querySelector('#intro');
|
||||
|
|
@ -38,11 +45,18 @@ export class Intro {
|
|||
|
||||
this.nextButton.addEventListener('click', () => this.onNextClick());
|
||||
|
||||
store.subscribe((state) => {
|
||||
this.anonymous = state.participantAnonymous;
|
||||
this.showStep(state.currentIntroStep);
|
||||
this.currentStep = store.getState().currentIntroStep;
|
||||
|
||||
console.log(state.currentIntroStep);
|
||||
if (this.currentStep === 0) {
|
||||
this.introContainer.style.display = 'none';
|
||||
this.introBackdrop.style.display = 'none';
|
||||
} else {
|
||||
this.showStep();
|
||||
}
|
||||
|
||||
store.subscribe((state) => {
|
||||
this.currentStep = state.currentIntroStep;
|
||||
this.anonymous = state.participantAnonymous;
|
||||
|
||||
if (state.currentIntroStep === 2) {
|
||||
this.nextButton.innerHTML = 'Agree';
|
||||
|
|
@ -50,14 +64,25 @@ export class Intro {
|
|||
this.nextButton.innerHTML = 'Confirm';
|
||||
} else if (state.currentIntroStep === 4) {
|
||||
this.nextButton.innerHTML = 'Start already!';
|
||||
} else if (state.currentIntroStep === 7) {
|
||||
this.nextButton.style.display = 'none';
|
||||
} else if (state.currentIntroStep === 0) {
|
||||
this.introContainer.style.display = 'none';
|
||||
this.introBackdrop.style.display = 'none';
|
||||
} else {
|
||||
this.nextButton.innerHTML = 'Continue';
|
||||
}
|
||||
|
||||
if (state.currentIntroStep !== 0) {
|
||||
this.introContainer.style.display = 'block';
|
||||
this.introBackdrop.style.display = 'block';
|
||||
}
|
||||
|
||||
if (this.anonymous) {
|
||||
this.hideNameInput();
|
||||
}
|
||||
|
||||
this.showStep();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -103,27 +128,63 @@ export class Intro {
|
|||
|
||||
private hideNameInput() {}
|
||||
|
||||
private showStep(stepToShow: number) {
|
||||
if (stepToShow === 1) {
|
||||
private showStep() {
|
||||
if (this.currentStep === 1) {
|
||||
this.step1Container.style.display = 'flex';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 2) {
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 2) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'flex';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 3) {
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 3) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'flex';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 4) {
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 4) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'flex';
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 5) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
this.step5Container.style.display = 'flex';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 6) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'flex';
|
||||
this.step7Container.style.display = 'none';
|
||||
} else if (this.currentStep === 7) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
this.step5Container.style.display = 'none';
|
||||
this.step6Container.style.display = 'none';
|
||||
this.step7Container.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
31
styles.scss
31
styles.scss
|
|
@ -67,6 +67,18 @@ select {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
min-height: 8rem;
|
||||
font-size: 18px;
|
||||
padding: 8px 12px;
|
||||
outline: 0;
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ui {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
|
|
@ -309,6 +321,25 @@ select {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#intro-step5 {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#intro-step6 {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
#intro-step7 {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#intro-button {
|
||||
float: right;
|
||||
margin-top: 25px;
|
||||
|
|
|
|||
Reference in a new issue