diff --git a/index.html b/index.html
index da688e1..ce9bfec 100644
--- a/index.html
+++ b/index.html
@@ -212,6 +212,74 @@
Have fun! 🤟
+ Knowledge Questions
+
+
Questions about Play in Software Development
+
+ After the project-specific "knowledge" questions in the last step I want to get your
+ valuable input as a developer for the following questions:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts
index 1dba359..4e8c2d4 100644
--- a/src/scenes/OverviewScene.ts
+++ b/src/scenes/OverviewScene.ts
@@ -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;
diff --git a/src/store.ts b/src/store.ts
index 2f9097c..2d1eb18 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -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(
@@ -33,6 +33,7 @@ const store = create(
companionState: CompanionState.IDLE,
infoMessageShown: false,
infoMessages: [],
+ finishedGame: false,
addInfoMessage: (newMessage) =>
set((state) => ({ ...state, infoMessages: [...state.infoMessages, newMessage] })),
userMessages: [],
diff --git a/src/ui/intro.ts b/src/ui/intro.ts
index e85a2a0..cd38f9f 100644
--- a/src/ui/intro.ts
+++ b/src/ui/intro.ts
@@ -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';
}
}
}
diff --git a/styles.scss b/styles.scss
index 684b480..15f24de 100644
--- a/styles.scss
+++ b/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;