<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="Neo Ighodaro">
        <title>Mazebase Game</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <style>
              :root {
                --input-padding-x: .75rem;
                --input-padding-y: .75rem;
              }
              html,
              body, body > div {
                height: 100%;
              }
              body > div {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                padding-top: 40px;
                padding-bottom: 40px;
                /*background-color: #f5f5f5;*/
              }
              .form-signin {
                width: 100%;
                max-width: 800px;
                padding: 15px;
                margin: auto;
              }
              .form-label-group {
                position: relative;
                margin-bottom: 1rem;
              }
              .form-label-group > input,
              .form-label-group > label {
                padding: var(--input-padding-y) var(--input-padding-x);
              }
              .form-label-group > label {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                margin-bottom: 0; /* Override default `<label>` margin */
                line-height: 1.5;
                color: #495057;
                cursor: text; /* Match the input under the label */
                border: 1px solid transparent;
                border-radius: .25rem;
                transition: all .1s ease-in-out;
              }
              .form-label-group input::-webkit-input-placeholder {
                color: transparent;
              }
              .form-label-group input:-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-moz-placeholder {
                color: transparent;
              }
              .form-label-group input::placeholder {
                color: transparent;
              }
              .form-label-group input:not(:placeholder-shown) {
                padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                padding-bottom: calc(var(--input-padding-y) / 3);
              }
              .form-label-group input:not(:placeholder-shown) ~ label {
                padding-top: calc(var(--input-padding-y) / 3);
                padding-bottom: calc(var(--input-padding-y) / 3);
                font-size: 12px;
                color: #777;
              }
              /* Fallback for Edge
              -------------------------------------------------- */
              @supports (-ms-ime-align: auto) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input::-ms-input-placeholder {
                  color: #777;
                }
              }
              /* Fallback for IE
              -------------------------------------------------- */
              @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input:-ms-input-placeholder {
                  color: #777;
                }
              }
        </style>
      </head>

      <body>

        <div id="app">


           <div class="row mx-3" style="height: 80vh">

                <div class="col-10">

                            <h2 class="h3font-weight-normal text-center">Instructions</h2>


                <!-- <a href="http://www.freeimagehosting.net/commercial-photography/"><img src="https://i.imgur.com/EoQeIFk.png" alt="Commercial Photography" style="width:600px;height:400px;"></a> -->

                <!-- <div class="text-center mb-4">
                 <p> </p>
                 </div>
 -->
                <!-- <a href="http://www.freeimagehosting.net/commercial-photography/"><img src="https://i.imgur.com/Xl8lnFy.png" alt="Commercial Photography" style="width:600px;height:400px;"></a> -->

                <p> Welcome to the HIT! Our goal is to collect annotations of you solving a step-by-step problem in a crafting-based maze game. Given a goal, you want to break the task down into steps, write each down and execute in sequence. Think of how you would explain a step of a larger task to a 5 year old, demonstrate how to do it, then continue until you have accomplished the overall task. This paired text and execution sequence is what we are looking for!</p>

                <hr>

                <p> When the board appears, press the start game button to load task and you will see a screen similar to the one below. I will walk you through each portion of the page in subsequent steps. <strong> If you do not follow the instructions below, we reserve the right to not pay for the HIT. </strong> If you have ALREADY completed the HIT, feel free to skip the demo by scrolling to the bottom and hitting continue. </p>

                <img src="https://i.imgur.com/DDe3dO6.png" style="width:700px;height:400px;">

                <hr>


                <p> Evaluate your assigned goal and helpful recipes. Take a look at what is currently on the board and how you can use what is there to help you complete the goal! </p>

                <img src="https://i.imgur.com/cZFzuFO.png" style="width:200px;height:200px;">

                <hr>

                <p> <strong> If you do not comply with these instructions, you will not get paid: </strong> After evaluating your goal, decide what your first instruction is and write that in the instruction box. (1) Keep it high level and break the task down, but do not write out specific button presses. (2) Do not only write just 1 instruction for the entire task. Then hit enter. </p>

                <img src="https://i.imgur.com/y9wXZ86.png" style="width:300px;height:150px;">

                <hr>

                <p> Use UP, LEFT, DOWN, RIGHT (or arrow keys) to navigate character. Use the other buttons, explained below to complete the task.</p>

                <img src="https://i.imgur.com/EN1TTBN.png" style="width:230px;height:300px;">

                <img src="https://i.imgur.com/uZIujAT.png" style="width:400px;height:300px;">


                <p> <br>Don't worry, if you forget, press "Helpful Hints" on the gamepage for this refresher again</p>



                <hr>


                <p> After you have completed the first instruction, press the "DONE" button (or hit enter). Then continue to write the next instruction, submit, and then repeat until goal is completed. </p>

                <img src="https://i.imgur.com/9YmlPrJ.png" style="width:250px;height:80px;">

                <!-- <a href="http://www.freeimagehosting.net/commercial-photography/"><img src="https://i.imgur.com/H8f5tKT.png" alt="Commercial Photography" style="width:800px;height:500px;"></a> -->

                 <div class="text-center mb-4">
                 <p> </p>
                 </div>


                </div>


                <!-- <div class="col-4">
                  <div class="mb-4">
                
                    <p> 1. This is your assigned goal to complete. We have provided helpful recipes to guide you. Take a look at what is currently on the board and how you can use what is there to help you complete the goal! </p>

                    <p> 2. After evaluating your goal, decide what your first instruction is and write that in the instruction box and press Submit. (Keep it high level, like "go to the switch" rather than writing out specific button presses). </p>

                    <p> 3. The current game board and inventory.  </p>

                    <p> 4. These are the control buttons you will use to execute the instruction you just wrote. Your current position is denoted by the "AGENT" character on the screen. Use UP, LEFT, DOWN, RIGHT (or arrow keys) to navigate character. Note you cannot pass the brick walls or the door without first opening the door using the switch.</p>

                    <a href="http://www.freeimagehosting.net/commercial-photography/"><img src="https://i.imgur.com/mvEtZzc.png" alt="Commercial Photography" style="width:400px;height:250px;"></a>

                    <p> After you have completed the first instruction, write the next one, submit, and then execute until goal is completed. </p>

                    <p> 5. Press here if you need a refresher / help.</p>


                  </div>

                </div> -->

                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">Continue to HIT</button>

            </div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

        <script>
        var app = new Vue({
          el: '#app',
          created () {

            let url = new URL(window.location.href);
            let name = url.searchParams.get("username");
            let code = url.searchParams.get("code");
            if (name) {
              this.username = name
              this.code = code
            }
          },

          data: {
            username: '',
          },
          methods: {
            login: function () {
              let username = this.username
              let code = this.code
              window.location.replace(`/play?username=${username}&code=${code}`);
            }
          }
        })
        </script>
    </body>

</html>
