salsa/templates/participate.html

{% extends "two_columns.html" %}

{% block title %} Experiment Participation {% endblock %}

{% block head %}
  {{ super() }}

  <script language="javascript" type="text/javascript">
    function submitReview() {
      var keys = [
        {% for treatment in treatments %}
          '{{ treatment.key() }}',
        {% endfor %}
      ]

      // Go through the rank divs to find which treatments are in them
      var container = document.getElementById('container');
      var ranking = '';
      var num_ranked = 0;
      for (var i = 0; i < container.children.length; i++) {
        var rank = container.children[i];
        var ties = '';
        for (var j = 0; j < rank.children.length; j++) {
          var treatment_num = rank.children[j].innerHTML.replace(/[^0-9]/g, '');
          if (!treatment_num)
            continue;
          ties = ties + keys[treatment_num] + '=';
          num_ranked = num_ranked + 1;
        }
        if (ties != '')
          ranking = ranking + ties.slice(0, -1) + '>';
      }

      // Grab their feedback if they left any
      var feedback_box = document.getElementById('feedback');
      var feedback = encodeURIComponent(feedback_box.value);

      // Make sure that all of the treatments got ranked
      if (num_ranked != keys.length) {
        alert('Please rank all of the treatments to continue.');
        return;
      }

      // Build up a submit url and redirect to it
      var submit_url = '/submit?exp_key={{ experiment.key() }}'
      submit_url = submit_url + '&ranking=' + ranking.slice(0, -1);
      submit_url = submit_url + '&feedback=' + feedback;
      window.location = submit_url;
    }

    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData('source_id', ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var target_id = ev.target.id;
      // Confirm that you're not adding it to another rankable object
      if (ev.target.className.indexOf('rankable') !== -1)
        target_id = ev.target.parentNode.id;

      // Get the actual Elements for the source and target
      var source_id = ev.dataTransfer.getData('source_id');
      var source = document.getElementById(source_id);
      var target = document.getElementById(target_id);
      target.appendChild(source);
      unhighlight(target);

      // Add new empty ranks on either side
      var container = target.parentNode;
      var newRankBefore = target.cloneNode();
      var newRankAfter = target.cloneNode();
      newRankBefore.id = newRankBefore.id + 'b';
      newRankAfter.id = newRankAfter.id + 'a';
      container.insertBefore(newRankBefore, target);
      container.insertBefore(newRankAfter, target.nextSibling);

      // Preform cleanup and cosmetic changes
      removeExtraRanks(container);
      adjustSizes(container);
    }

    function removeExtraRanks(container) {
      // Flatten any adjacent empty ranks into a single empty rank
      for (var i = 0; i < container.children.length; i++) {
        child = container.children[i];
        if (child.children.length)
          continue;
        nextChild = container.children[i + 1];
        while (nextChild && !nextChild.children.length) {
          container.removeChild(nextChild);
          nextChild = container.children[i + 1];
        }
      }
    }

    function adjustSizes(container) {
      // Make the first and last ranks larger than the others
      var numChildren = container.children.length;
      for (var i = 0; i < numChildren; i++) {
        child = container.children[i];
        if (!child || !child.className)
          continue;
        child.className = child.className.replace(/end/, '');
        if (i == 0 || i == numChildren - 1) {
          child.className = child.className + ' end';
        }
      }
    }

    function highlight(rank) {
      rank.className = rank.className + ' highlighted';
    }

    function unhighlight(rank) {
      rank.className = rank.className.replace(/highlighted/, ' ');
    }
  </script>
{% endblock %}

{% block first_column %}
  <h1> {{ experiment.name }}: Participate </h1>

  {% if user|string in experiment.participants %}
    <div class="error">
      Error! Our records indicate that you have already completed this
      experiment.  A submission has already been saved for your username
      and subsequent submissions will <b>overwrite</b> your previous ones.
    </div>
  {% endif %}

  <p>
    This experiment consists of {{ treatments|length }} </i>treatments</i>.
    Each treatment is a variation on the touchpad settings.  To participate in
    this experiment, you will try out each of these treatments and then
    provide us with feedback regarding their performance.
  </p>

  <p>
    Below you will find a command you can run on your Chromebook to temporarily
    alter the way your touchpad works.  To try out an experiment, simply open
    up Crosh with Ctrl + Alt + t and paste in the given command.  Note that to
    paste into the terminal you must either right click and press paste or use
    Ctrl + Shift + v on your keyboard.
  </p>

  <p>
    You will be given on-screen instructions on how to switch between the
    different treatments once you run that command. Finally, once you have 
    tried all of the treatments, use the form on the right to rank your 
    experiences and click "Submit" to record your responses.
  </p>

  <ul>
    <li> Name: {{ experiment.name }}
    <li> Owner:
      <a href="mailto:{{ experiment.owner }}@google.com?cc=chromeos-tango@google.com">
        {{ experiment.owner }}
      </a>
    <li> Created: {{ experiment.created }}
    <li> Treatments: {{ treatments|length }}
  </ul>

  <div class="treatment">
    <h2> Experiment Command </h2>
    <div class="command">
      try_touch_experiment
      {{ experiment|encode_experiment(treatments, properties) }}
    </div>
  </div>
{% endblock %}

{% block second_column %}
  <h1> Rate your experiences </h1>

  <div class="warning">
    This experiment is for <font class="giant">{{ experiment.device }}</font>
    <u>only</u>!  If you are not currently on a <font class="giant">
    {{ experiment.device }}</font> please do not participate.
  </div>

  <p>
    Drag the following blocks around to sort the treatments you just
    experienced from best to worst.
  </p>
  <p>
    The better a treatment is, the higher it should be placed.  If two
    treatments were the same, you may place them next to each other.  Don't
    be shy if you couldn't decide between two of them.  Ties provide valuable
    information as well.
  </p>

  <table><tr>
    <td>
      <table>
      {% for treatment in treatments %}
        <tr><td>
        <div class="rankable" id="test{{ loop.index0 }}" draggable="true"
             ondragstart="drag(event)">
          Treatment {{ loop.index0 }}
        </div>
        </td></tr>
      {% endfor %}
      </table>
    </td>

    <td>
      <table>
        <tr><th>&uarr; Better &uarr;</th></tr>
        <tr><td>
          <div id="container" class="rank_container">
            <div id="rank1" ondragover="allowDrop(event)" ondrop="drop(event)"
                 ondragenter="highlight(this)" ondragleave="unhighlight(this)"
                 class="rank end"></div>
          </div>
        </td></tr>
        <tr><th>&darr; Worse &darr;</th></tr>
      </table>
    </td>
  </tr></table>

  <p>
    (Optional) If you have any comments you would like to include you may do
    so below.  Useful things include odd behavior you encountered or peculiar
    touchpad habits you may have such as extremely high speed settings --
    anything you think might be useful.
  </p>
  <p>
    <textarea rows="3" cols="40" id="feedback"></textarea>
  </p>

  <p><button name="submit" onclick="submitReview()">Submit</button></p>

{% endblock %}