83 lines
3.9 KiB
HTML
83 lines
3.9 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">Step 2</div>
|
|
<div id="intro-step3">Step 3</div>
|
|
<div id="intro-step4">Step 4</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>
|