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

{% block title %}
Part 2
{% endblock %}

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    input[type=radio]:checked + label {
          font-style: normal;
          color: rgb(56,110,246);
          border: 1px solid rgb(56,110,246);
          background-color: rgb(226,233,253)
        }
    }
</style>

<p>
    Suppose there were many participants (university students) who completed the same task you just did.
    If all the participants are ranked based on their performance (number of puzzles solved correctly), in which interval do you think you would belong?
</p>
<p>
    Please select an interval by clicking on the radio button in the list below.
</p>
<p>
    <b>You will earn 25 ECU if your guess is correct.</b>
</p>
<p>
  <u>Example 1</u>: If you select the <b>30-40%</b> interval, this means that you think your performance is <b>better than at least 30%</b> of the participants.
</p>
<p>
  <u>Example 2</u>: If you select the <b>70-80%</b> interval, this means that you think your performance is <b>better than at least 70%</b> of the participants.
</p>

<br>
<style>
    .checkboxgroup {
    display: inline-block;
    text-align: center;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 17px;
        width: 17px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 14px
    }
    .div1 {
      float: left;
      text-align: left;
    }
    .div2 {
      float:right;
      text-align: right;
    }
    .main {
      width:90%
    }
</style>
<div class="main">
    <div class="div1"><i>Bottom performers</i></div>
    <div class="div2"><i>Top performers</i></div>
</div>
<br>
<div id="checkboxes">

  <div class="checkboxgroup">
    <button id="label1" class="btn btn-outline-dark" for="my_radio_button_id1"  disabled>0-10%</button>
    <input type="radio" name="Question3" value="1" id="my_radio_button_id1" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label2" class="btn btn-outline-dark" for="my_radio_button_id2"  disabled>10-20%</button>
    <input type="radio" name="Question3" value="2" id="my_radio_button_id2" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label3" class="btn btn-outline-dark" for="my_radio_button_id3" disabled>20-30%</button>
    <input type="radio" name="Question3" value="3" id="my_radio_button_id3" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

      <div class="checkboxgroup">
    <button id="label4" class="btn btn-outline-dark" for="my_radio_button_id4"  disabled>30-40%</button>
    <input type="radio" name="Question3" value="4" id="my_radio_button_id4" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label5" class="btn btn-outline-dark" for="my_radio_button_id5"  disabled>40-50%</button>
    <input type="radio" name="Question3" value="5" id="my_radio_button_id5" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label6" class="btn btn-outline-dark" for="my_radio_button_id6" disabled>50-60%</button>
    <input type="radio" name="Question3" value="6" id="my_radio_button_id6" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

      <div class="checkboxgroup">
    <button id="label7" class="btn btn-outline-dark" for="my_radio_button_id7"  disabled>60-70%</button>
    <input type="radio" name="Question3" value="7" id="my_radio_button_id7" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label8" class="btn btn-outline-dark" for="my_radio_button_id8"  disabled>70-80%</button>
    <input type="radio" name="Question3" value="8" id="my_radio_button_id8" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

  <div class="checkboxgroup">
    <button id="label9" class="btn btn-outline-dark" for="my_radio_button_id9" disabled>80-90%</button>
    <input type="radio" name="Question3" value="9" id="my_radio_button_id9" />
  </div>    &nbsp;&nbsp;&nbsp;&nbsp;

      <div class="checkboxgroup">
    <button id="label10" class="btn btn-outline-dark" for="my_radio_button_id10" disabled>90-100%</button>
    <input type="radio" name="Question3" value="10" id="my_radio_button_id10" />
  </div>
</div>

<br>
<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 }}