{{ block title }}
Part I. {{Page_title}}
{{ endblock }}

{{ block content }}

<script type="text/javascript" src="{{ static 'js/Choice.js' }}"> </script>
{{ endblock }}


{{ block content }}
<link rel="stylesheet" href="{{static 'css/css.css'}}">
<link rel="stylesheet" href="{{static 'css/modal.css'}}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>
<script type="text/javascript" src="{{ static 'js/data_quality.js' }}"></script>
    
Below is a description of a task that past study participants have completed.

Please read the description carefully and answer the questions below.
<div class="card bg-light m-3">
    <div class="card-body">

    <h3 style="text-align: center;">
        Description: {{Task}} Task
    </h3>



    <p>
        {{Task_description}}
        <br><br>
        {{Picture_desc}}<br>
        <div style="text-align: center;">
            <img src="{{Picture_link}}" style="width: 700px;">
        </div>
        
        <br>

    </p> 
    


    </div>


</div>

<p>
    <strong>Suppose that the average across all men and women was 100 points.</strong>
</p>

{% for field in form %}
    {% if field.name not in hidden_fields %}
        {{ formfield field.name }}
    {% endif %}
{% endfor %}

<div style="display:none">
    {% for field in form %}
        {% if field.name in hidden_fields %}
            {{ formfield field.name }}
        {% endif %}
    {% endfor %}
</div>
    <br><br>

    <div class="buttons-container">
        <a id="myBtn" onclick="open_modal(2)"  class="otree-btn-next btn btn-primary">Exit survey (return task)</a>
        <a id="myBtn" onclick="open_modal(1)"  class="otree-btn-next btn btn-primary">Instructions</a>
        <button id="NextButton" class="otree-btn-next btn btn-primary">Next</button>
    </div>
    
    
    <div id="myModal2" class="modal quit-modal">
      <div class="modal-content">
          <div class="modal-header">
            <h2>You are about to quit the study</h2>
          </div>
{{include C.Quit_study_text_path}}
        <div class="buttons-container">
            <a id="myBtn" onclick="span_click(2)"  class="otree-btn-next btn btn-primary">Cancel</a>
            <a href="{{C.Return_redirect}}" class="otree-btn-next btn btn-primary">OK</a>
      </div>
      </div>
    </div>
    
    <div id="myModal1" class="modal">
        <div class="modal-content">
            <div class="modal-header">
              <h2>Instructions</h2>
              <span class="close" onclick="span_click(1)">&times;</span>
            </div>
          <p style="padding: 0px">
         {{include C.Instructions_path}}
          </p>
        </div>
    </div>

    <br><br>
{{ endblock }}