{% block title %}

<code>div</code>s in random order with oTree

{% endblock %}


{% block scripts %}

<script type="text/javascript">
  function displayDiv(div_id, inc) {
    document.getElementById("QDiv" + div_id).style.display = "none";
    document.getElementById("QDiv" + (div_id + inc)).style.display = "block";
  }
</script>

{% endblock %}


{% block content %}

{% for pyField in pyFields_shuffled %}
  <div id="QDiv{{ forloop.counter }}" style="display: {% if forloop.counter == 1 %} block {% else %} none {% endif %}; width: 100%;">
    <div>
      <h4><code>div</code> no.&nbsp;{{ forloop.counter }}</h4>
      {% formfield pyField %}
    </div>
    <div>
      <table style="width: 100%;">
        <tr>
          <td style="width: 50%; text-align: left; vertical-align: top;">
            {% if forloop.counter == 1 %}
            {% else %}
              <button type="button" id="previous" class="btn btn-outline-primary" onclick="displayDiv({{ forloop.counter}}, -1)">Previous question</button>
            {% endif %}
          </td>
          <td style="width: 50%; text-align: right; vertical-align: top;">
            {% if forloop.counter == 14 %}
              {{ next_button }}
            {% else %}
              <button type="button" id="next" class="btn btn-outline-primary" onclick="displayDiv({{ forloop.counter}}, +1)">Next question</button>
            {% endif %}
          </td>
        </tr>
      </table>
    </div>
  </div>
{% endfor %}

{% endblock %}