op_tasks/templates/task_list.html

{% extends "userpage.html" %}

{% block content %}

<h1>TASK LIST</h1>

<!-- progress bar -->
{% if user.userprofile.experiment.show_progress %}
<div class="status-bar-title">Progress</div>
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {% if user.userprofile.progress < 100 %}{{ user.userprofile.progress }}%{% else %}100%{% endif %};">
      {{user.userprofile.progress}}% Complete
   </div>
</div>
{% endif %}

<!-- instructions -->
<div class="instructions" >
  <a href="{% url 'op_tasks:instruct' %}">
    {% if user.userprofile.exp_inst_complete and user.userprofile.portal_inst_complete %}
      <div class="task-list-text">
        <span class="glyphicon glyphicon-check"></span>
        Click here to review instructional materials.
      </div>
      <div class="task-list-subtext">This material is available throughout the experiment</div>
    {% else %}
      <div class="task-current">
        <div class="task-list-text">
          <span class="glyphicon glyphicon-unchecked"></span>
          Click here to review instructional materials.
        </div>
      </div>
    {% endif %}
  </a>
</div>

<!-- intake -->
<div class="instructions" >
  <a href="{% url 'op_tasks:intake' %}">
    {% if user.userprofile.experiment.has_intake %}
    
    	{% if user.userprofile.intake_complete %}
    	<div class="task-list-text">
	      <span class="glyphicon glyphicon-check"></span>
	      Intake questionnaire complete
		</div>
	    {% else %}
	    
	    <div class="task-current">
	    <div class="task-list-text">
	        <span class="glyphicon glyphicon-unchecked"></span>
	        Click here to complete intake questionnaire
	    </div>
	    </div>
	
	    {% endif %}
	{% endif %}
  </a>
</div>

<!-- tasklistitem list table -->
<table class="ot-list table table-bordered">
  <tbody>
    {% for tasklistitem in userprofile.tasklistitem_set.all %}

      {% if tasklistitem.task_complete and not tasklistitem.task_active and tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit complete -->
        <tr class="ot-disabled task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-check"></span>
          </td>
          <td>
            <div class="task-list-text">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Task Complete. Thank You!</span>
            </div>
          </td>
        </tr>

      {% elif tasklistitem.task_complete and not tasklistitem.task_active and not tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit active -->
        <tr class="task-current task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <div class="task-current">
              <div class="heading disabled task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text disabled task-list-text">Task Complete. Thank You!</div>
              <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
                <span class="glyphicon glyphicon-hand-right"></span>
                <div class="task-list-subtext" style="display:inline-block;">Complete Post-Task Survey to Continue</div>
              </a>
            </div>
          </td>
        </tr>

      {% elif not tasklistitem.task_complete and not tasklistitem.task_active %}
      <!-- task not active and not complete -->
        <tr class="ot-disabled task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <div class="task-list-text">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Complete previous tasks first.</span>
            </div>
          </td>
        </tr>

      {% elif tasklistitem.task_complete and tasklistitem.task_active and tasklistitem.exit_active and not tasklistitem.exit_complete %}
      <!-- task active and complete with exit active -->
        <tr class="task-list-item">
          <td class="status" >
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-text">Task Complete.  Thank you!</div>
            </a>
            <a class="task-current" href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-hand-right"></span>
              <div class="task-list-subtext" style="display:inline-block;">Complete Post-Task Survey Here</div>
            </a>
          </td>
        </tr>

      {% elif tasklistitem.task_active and tasklistitem.task_complete and tasklistitem.exit_complete %}
      <!-- task active, complete, exit complete -->
        <tr class="task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-text">Task Complete.  Thank you!</div>
            </a>
            <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-check"></span>
              <div class="task-list-subtext" style="display:inline-block;">Post-task survey complete</div>
            </a>
          </td>
        </tr>

      {% elif tasklistitem.task_active and not tasklistitem.task_complete %}
      <!-- task active, not complete and exit task not active -->
        <tr class="task-current task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <a class="task-current" href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-subtext">Task not yet completed. Click to start this Operational Task</div>
            </a>
          </td>
        </tr>

      {% endif %}

      <!-- exit survey popup -->
      <div class="modal fade" id="exit-{{tasklistitem.pk}}" tabindex="-1" role="dialog" aria-labelledby="intake" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body" id="surveymonkeyframe">
              <iframe src="{{tasklistitem.op_task.exit_url}}?sid={{userprofile.user_hash}}::{{tasklistitem.pk}}" width="100%" height="100%"></iframe>
            </div>
            <div class="modal-footer">
              <div>
                <button type="button" style="float: left;" class="btn btn-primary" data-dismiss="modal">Hide</button>
              </div>
              <div>
                <form id="exit-survey-complete" method="post" action="{% url 'op_tasks:product' task_pk=tasklistitem.pk %}">{% csrf_token %}
                  <button type="submit" style="float: right;" class="btn btn-success">Survey Finished</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

    {% endfor %}

  </tbody>
</table>


{% if all_complete %}
  <hr>
  
  <div class="task-list-text">Thank you for participating, you have completed all analytic tasks!</div>
  <p>If you are interested in future study components or engagement with analytic tools, we will contact you if you indicated such interest in the intake questionnaire.</p>  
  <p>The purpose of this research is not only to improve open-source big data analytic applications, but also to understand how future applications should be developed. For example, we are interested in whether specific configurations of analytic tools—user interfaces, analytics, etc.—are better for reducing user workload and increasing task performance during analytic tasks. In addition to the questionnaires you answer, we also collect real-time data about how you are using the tools and analyze that data. From that data we can develop mathematical models for how well you have learned to use the analytic tools’ functionality. From these models we can better understand how software design and user interface configuration contributes to user workload and performance.</p>
  <p>If you are completing this study as a Mechanical Turk Worker, please enter the following survey completion code to register your task as complete: </p>
  <p>Your Mechanical Turk Code is <strong>{{mtcode}}</strong></p>
  <p>If you are interested in working on developing these analytic tools, which are free and open source, please return to <a href="http://www.xdataonline.com/">XDATA Online</a> to explore DARPA’s <a href="http://www.darpa.mil/opencatalog/XDATA.html">Open Catalog</a>, the applications you used, and datasets!</p>
  <p>You may activate FREE PLAY now! Click <a href="{% url 'op_tasks:activate_free_play' %}">here</a>.</p>

{% endif %}

{% endblock %}