{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% load staticfiles %}

{% block content %}

<div class="progress">
   <div class="progress-bar" style="width: {{ progress }}%"></div>
</div>
<br>

<div>
   Most modern theories of decision-making recognize the fact that decisions do not take place in a vacuum.
   Individual preferences and knowledge, along with situational variables, can greatly impact the decision process.
   In order to facilitate our research on decision-making, we are interested in whether you actually take
   the time to read the directions. So, rather than answering the following question accurately, please
   check only Mauritania and None of the above and then continue. This will demonstrate to us that
   you have taken the time to read and follow the instructions.
</div>

<br>

<div class="question" align="justify">
   <h5>Which of the following countries have you heard mentioned in the news during the last week? </h5>
</div>
<br>

<div class="attention-check-choices">
   {% for value in values %}
   <div class="attention-check-choice">
      <input id="attention-check-{{forloop.counter}}" type="checkbox" name="attention-{{forloop.counter}}"
         value="{{ forloop.counter }}" />
      <label for="attention-check-{{forloop.counter}}">{{value}}</label>
   </div>
   {% endfor %}
</div>
<br>

<input id="attention__check" type="hidden" name="attention_check" value="{{player.attention_check}}">

<script>
   function attention() {
      var answersInput = jQuery('#attention__check');
      if (!answersInput.length) {
         throw new Error('cannot find answers input #attention__check');
      }
      var values = []
      for (i = 1; i < 10; i++) {
         str = "#attention-check-" + String(i)
         if (jQuery(str).is(":checked"))
            values.push(i)
      }
      answersInput.val(JSON.stringify(values));
   }

</script>

<div class="next-button" onclick="return attention();">
   {% next_button %}
</div>

{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'CTB/styles/block.css' %}" />
{% endblock %}