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

{% block title %}
Survey
{% endblock %}

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
</style>
<style>
    .checkboxgroup {
        display: inline-block;
        text-align: center;
        margin: auto
        margin-top: 7px
    }
    .checkboxgroup input[type='radio'] {
        height: 17px;
        width: 17px;
        text-align: center;
        vertical-align: middle;
        visibility: visible;
    }
    .checkboxgroup button {
        display: block;
        margin-bottom: 7px
    }
    .div1 {
        float: left;
        text-align: left;
        margin-bottom: 7px
    }
    .div2 {
        float:right;
        text-align: right;
        margin-bottom: 7px
    }
</style>

<p>
    4. Do you think ability or effort plays a bigger role in determining performance in the task in Part 1 and 4?
</p>
<p>
    Please indicate using the scale below ("1" being purely ability driven and "5" being purely effort driven).
</p>


<br>
<div id="checkboxes">
  <div class="checkboxgroup">
            <div class="checkboxgroup">
          <div class="div1"><i>Ability driven</i></div><br>
    <button id="label1" class="btn btn-outline-dark" for="my_radio_button_id1"  disabled>&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;1&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
    <input type="radio" name="Hypo1" value="1" id="my_radio_button_id1" style.visibility="hidden" />
  </div>    &nbsp&nbsp;

  <div class="checkboxgroup">
    <button id="label2" class="btn btn-outline-dark" for="my_radio_button_id2"  disabled>&nbsp&nbsp;&nbsp&nbsp;2&nbsp&nbsp;&nbsp&nbsp;</button>
    <input type="radio" name="Hypo1" value="2" id="my_radio_button_id2" style.visibility="hidden"/>
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label3" class="btn btn-outline-dark" for="my_radio_button_id3"  disabled>&nbsp&nbsp;&nbsp&nbsp;3&nbsp&nbsp;&nbsp&nbsp;</button>
    <input type="radio" name="Hypo1" value="3" id="my_radio_button_id3" style.visibility="hidden"/>
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label4" class="btn btn-outline-dark" for="my_radio_button_id4" disabled>&nbsp&nbsp;&nbsp&nbsp;4&nbsp&nbsp;&nbsp&nbsp;</button>
    <input type="radio" name="Hypo1" value="4" id="my_radio_button_id4" style.visibility="hidden"/>
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;
      <div class="checkboxgroup">
          <div class="div1"><i>Effort driven</i></div> <br>
    <button id="label5" class="btn btn-outline-dark" for="my_radio_button_id5" disabled>&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;5&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
    <input type="radio" name="Hypo1" value="5" id="my_radio_button_id5"/>
  </div>
</div>
</div>
<br>
<br>

{% next_button %}
{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please select a radio button to proceed.</p>
</div>
{% endif %}
{{ endblock }}