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

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

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
      text-align: center;
    }
</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
        font-size: 16px;
        cursor: not-allowed;
        pointer-events: none;
    }
    .div1 {
        float: left;
        text-align: left;
        margin-bottom: 7px
    }
    .div2 {
        float:right;
        text-align: right;
        margin-bottom: 7px
    }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}


<br>
{{ if player.participant.treatment == 1 }}
  <p>
      What do you think about the difficulty of the task in Part 1?
  </p>
  <br>
  <center>
    <div id="checkboxes">
      <div class="checkboxgroup">
        <button id="label1" class="btn btn-outline-dark" for="my_radio_button_id1"  >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very easy &nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" value="1" id="my_radio_button_id1" />
      </div>    &nbsp&nbsp;
      <div class="checkboxgroup">
        <button id="label2" class="btn btn-outline-dark" for="my_radio_button_id2"  >&nbsp&nbsp;&nbsp&nbsp;Easy &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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"  >&nbsp&nbsp;&nbsp&nbsp;Neither easy nor difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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" >&nbsp&nbsp;&nbsp&nbsp;Difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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" >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very difficult&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" value="5" id="my_radio_button_id5"/>
      </div>
    </div>
  </center>
  <div style="visibility: hidden;">
        {{formfield 'Difficulty_Part4'}}
  </div>
{{ else }}
  <p>
      What do you think about the difficulty of the task in Part 1 and Part 4?
  </p>
  <p>
      For Part 1
  </p>
  <br>
  <center>
    <div id="checkboxes">
      <div class="checkboxgroup">
        <button id="label1" class="btn btn-outline-dark" for="my_radio_button_id1"  >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very easy &nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" value="1" id="my_radio_button_id1" />
      </div>    &nbsp&nbsp;
      <div class="checkboxgroup">
        <button id="label2" class="btn btn-outline-dark" for="my_radio_button_id2"  >&nbsp&nbsp;&nbsp&nbsp;Easy &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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"  >&nbsp&nbsp;&nbsp&nbsp;Neither easy nor difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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" >&nbsp&nbsp;&nbsp&nbsp;Difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" 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" >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very difficult&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part1" value="5" id="my_radio_button_id5"/>
      </div>
    </div>
  </center>
  <br>
  <br>
  <p>
      For Part 4
  </p>
  <br>
  <center>
    <div id="checkboxes">
    <div class="checkboxgroup">
      <div class="checkboxgroup">
        <button id="label1" class="btn btn-outline-dark" for="my_radio_button_id1"  >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very easy &nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part4" value="1" id="my_radio_button_id1" />
      </div>    &nbsp&nbsp;

      <div class="checkboxgroup">
        <button id="label2" class="btn btn-outline-dark" for="my_radio_button_id2"  >&nbsp&nbsp;&nbsp&nbsp;Easy &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part4" 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"  >&nbsp&nbsp;&nbsp&nbsp;Neither easy nor difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part4" 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" >&nbsp&nbsp;&nbsp&nbsp;Difficult &nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part4" 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" >&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;Very difficult&nbsp&nbsp;&nbsp&nbsp;&nbsp&nbsp;</button>
        <input type="radio" name="Difficulty_Part4" value="5" id="my_radio_button_id5"/>
      </div>
    </div>
  </div>
  </center>
{{ endif }}
<br>
<br>


{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please answer all the questions to proceed. </p>
</div>
{% endif %}

<button class="otree-btn-next btn btn-primary" style="float: right;">Next</button>

{{ endblock }}