{{ block title }}
    Exit Survey
{{ 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>
<link rel="stylesheet" href="{{static 'css/slider.css'}}">
<script type="text/javascript" src="{{ static 'js/slider.js' }}"></script>

<p>
    <b>Please answer the questions below, by moving the sliders, to continue.</b>
</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>

<div style="text-align: center;">
<div class="slider-container"> 
    <label class="slider-question" > <b>How competitive do you consider yourself to be?</b><br> Please choose a value on the scale below, where the value
        <b>0 means 'not competitive at all'</b> and the value <b>10 means 'very competitive'</b> 	</label>
    <br>
    <div class="slider-range-labels">
        <div class="label">0</div>
        <div class="label">1</div>
        <div class="label">2</div>
        <div class="label">3</div>
        <div class="label">4</div>
        <div class="label">5</div>
        <div class="label">6</div>
        <div class="label">7</div>
        <div class="label">8</div>
        <div class="label">9</div>
        <div class="label">10</div>

    </div>
    <input type="range" id="dimension" min="0" max="10" value="5" step="1" class="form-range" oninput="sliderChange(dimension, 'Compet_measure')"> 
</div>

<br><br>
<div class="slider-container"> 
    <label class="slider-question" > <b>Where would you put yourself on this scale?</b>
	</label>
    <br>
    <div class="slider-range-labels">
        <div class="label">Very masculine</div>
        <div class="label">Moderately masculine</div>
        <div class="label">Somewhat masculine</div>
        <div class="label">Neutral</div>
        <div class="label">Somewhat feminine</div>
        <div class="label">Moderately feminine</div>
        <div class="label">Very feminine</div>

    </div>
    <input type="range" id="dimension2" min="0" max="6" value="3" step="1" class="form-range" oninput="sliderChange2(dimension2, 'Gender_measure')"> 
</div>

</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>
        <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>

    

    <br><br>
{{ endblock }}