CodeWanderer

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