<html>
  <script src="/static/js/lib/jquery.js"></script>
  <script src="/static/js/lib/underscore.js"></script>
  <script src="/static/js/lib/handlebars.js"></script>

<style>
  a {
    width: 100%;
  }

  .btn-cancelled {
    background: whitesmoke;
    color: black;
  }

  b {
    font-family: arial;
  }
</style>


<body>

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <h1>Scorpion User Study</h1>

    <h2><span id="nametitle"></span></h2>

    <div class="steps" style="display:none;">
      <h2>Instructions</h2>
      <p>
        Please complete the following tutorial and study tasks in order.  The current task will
        be highlighted in <span class="btn btn-xs btn-primary">blue</span>, tasks you have
        completed will be in <span class="btn btn-xs btn-success">green</span>, and
        tasks that cannot be started yet are in
        <span class="btn btn-xs btn-cancelled">grey</span>.
      </p>
      <p>
        During the study, we will ask you to think outloud, which means 
        that you verbally say every question, thought, and observation that you are 
        thinking.  This helps us review the study afterwards to understand your 
        thought process.  
      </p>
      <p>
        Thoughout this study, <b>Do Not Use The Browser Back Button!</b>
      </p>

      <h2>Pre-study Questions</h2>
      <p>
      <a href="https://docs.google.com/forms/d/1Y48yWwk3Kp2UTQKKWcRSABR0iNwxbrNfQS-GKTkViLg/viewform?usp=send_form" target="_new">
        Please complete this pre-study form before starting
      </a>

      <h2>Tutorial Section</h2>
      <p><a id="study1" href="/study/1/" class='btn'>DBWipes Tutorial</a></p>
      <p><a id="study2" href="/study/2/" class='btn'>Verification Tasks</a></p>
      <p><a id="study3" href="/study/3/" class='btn'>Scorpion Tutorial</a></p>

      <h2>User Study</h2>
      <div id="studytasks"></div>

      <h2>Post-study Questions</h2>
      <p>
        <a href="https://docs.google.com/forms/d/1I1DIuNNnq3nLoEMUjklaKnk8_QqV43atQR5QqOnyS-M/viewform?usp=send_form" target="_post">
          Please complete this post-study form after completing the tasks.
        </a>
      </p>
    </div>


  </div>
</div>

{%raw%}
<script id="dir-task-btn-template" type="text/x-underscore-template">
<p>
  <a id='study{{taskid}}' href='/study/{{taskid}}/' class='btn'>Task {{idx}} <span style='display:none'>({{taskid}})</span></a>
</p>
</script>

{%endraw%}

<script>
  $(function() {
    var validName = function(name) {
      return name && name != '';
    };

    var render = function(name) {
      $("#name").val(name);
      if (validName(name)) {
        localStorage['name'] = name;
        $("#nametitle").text("Hello " + name);
        $(".steps").show();
      } else {
        window.location = '/study/name/';
      }
    };

    var setupLinks = function() {
      var stepCompleted = +(localStorage['stepCompleted']||0);

      /* color the links depending on what tasks have been completed */
      var studyLinks = $("a").map(function() {
        if (/study/.test(this.id)) return this;
      });
      studyLinks = _.compact(studyLinks);

      var doneLinks = _.filter(studyLinks, function(el) {
        var idx = +/\d+/.exec(el.id)[0];
        return stepCompleted >= idx;
      });
      var incompleteLinks = _.filter(studyLinks, function(el) {
        var idx = +/\d+/.exec(el.id)[0];
        return stepCompleted < idx;
      });
      var curLink = _.first(incompleteLinks);
      incompleteLinks = _.rest(incompleteLinks);

      _.each(doneLinks, function(el) {
        $(el).addClass('btn-success');
      });
      _.each(incompleteLinks, function(el) {
        $(el)
          .addClass("btn-cancelled")
          .attr("href", "#")
          .click(function() {
            alert("Please complete the current task (blue button) first");
          });
      });
      if (curLink) {
        $(curLink).addClass('btn-primary');
      }
      /* done coloring */
    }


    if (!validName(localStorage['name'])) {
      window.location = '/study/name/';
    }

    render(localStorage['name']);
    setupLinks();

    $.post("/tasks/get/", { 'name': localStorage['name'] }, function(resp) {
      var tasktemplate = Handlebars.compile($("#dir-task-btn-template").html());

      if (resp.status == false) {
        // uh oh?
      } else {
        resp.tasks = _.sortBy(resp.tasks);
        _.each(resp.tasks, function(taskid, idx) {
          var data = {
            taskid: taskid,
            idx: idx+1
          };
          $("#studytasks").append($(tasktemplate(data)))
        });
        setupLinks()
      }
    }, 'json')


  });
</script>

{% include 'footer.html' %}

</body>

	<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/base.css"/>
</html>
