{% extends "layout.html" %}

{% block body %}
    <div class="main_div">
        <h1>Task Complete</h1>
        <hr>
        <p>You are finished!  Thank you for your contributions to science. You will be eligible for full payment once you answer the following questions.</p>
        <div class="main_div">
            <form>
            	{% block replace_questions %}
	                {% block questions %}
	                {% endblock %}
	                <div class="row question">
	                    <div class="col-md-8">
	                        On a scale of 1-10 (where 10 is the most engaged), please rate how <b>ENGAGED</b> you were while performing the task:
	                    </div>
	                    <div class="col-md-4">
	                        <select id="engagement" name="engagement">
	                            <option value="10">10 - Very engaged</option>
	                            <option value="9">9</option>
	                            <option value="8">8</option>
	                            <option value="7">7</option>
	                            <option value="6">6</option>
	                            <option value="5" SELECTED>5 - Moderately engaged</option>
	                            <option value="4">4</option>
	                            <option value="3">3</option>
	                            <option value="2">2</option>
	                            <option value="1">1 - Not engaged</option>
	                        </select>
	                    </div>
	                </div>
	                <div class="row question">
	                    <div class="col-md-8">
	                        On a scale of 1-10 (where 10 is the most difficult), please rate how <b>DIFFICULT</b> you found the learning task:
	                    </div>
	                    <div class="col-md-4">
	                        <select id="difficulty" name="difficulty">
	                            <option value="10">10 - Very difficult</option>
	                            <option value="9">9</option>
	                            <option value="8">8</option>
	                            <option value="7">7</option>
	                            <option value="6">6</option>
	                            <option value="5" SELECTED>5 - Moderate</option>
	                            <option value="4">4</option>
	                            <option value="3">3</option>
	                            <option value="2">2</option>
	                            <option value="1">1 - Very easy</option>
	                        </select>
	                    </div>
	                </div>
	            {% endblock %}
            </form>
        </div>
        <hr>
        <di class="instructionsnav">
            <div class="row">
                <div class="col-xs-2">
                </div>
                <div class="col-xs-7">
                </div>
                <div class="col-xs-3">
                    <button type="button" id="submit-questionnaire" class="btn btn-primary btn-lg continue">Continue</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
  <script type="text/javascript">
    $(document).ready(function () {
      $("#submit-questionnaire").click(function() {
        dallinger.submitQuestionnaire();
      });
    });
  </script>
{% endblock %}
