mturk-order-images-template.js

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
      please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->

<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">

  <style media="screen">
    .gu-mirror {
      display: none;
    }
    .img {
      width: 23%;
      padding: 10px;
    }
    .container-fluid {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    .text-center {
      text-align: center !important;
    }
  </style>

  <crowd-instructions link-text="View instructions" link-type="button">
    <short-summary>
      <p>Put the images in the order they occurred. To do so, simply drag the image to its correct spot. The first image should be on the left, and the last image should be on the right.</p>
    </short-summary>
  </crowd-instructions>

  <div class="container-fluid text-center">
    <div id="bank">
      <script type="text/javascript">
        var imageIds = ["${image1}", "${image2}", "${image3}", "${image4}"];
        for (i = 0; i < imageIds.length; i++) {
          var imageSrc = "http://palmerpaul.com/nets213-hw6-images/tennis" + imageIds[i] + ".jpg";
          document.write('<img id="tennis' + imageIds[i] + '" class="img" src=' + imageSrc + '>');
        }
      </script>
    </div>

    <crowd-input id="ordering" name="ordering" type="hidden" style="display:hidden;"></crowd-input>

  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
  <script type="text/javascript">
    var $bank = document.querySelector('#bank');
    var $ordering = document.querySelector('#ordering');

    document.addEventListener('click', function() {
      $ordering.value = "";
      for (var i = 0; i < $bank.children.length; i++) {
        $ordering.value += $bank.children[i].id;
      }
    });
    
    dragula([$bank]);
  </script>

</crowd-form>