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

{% block content %}

    <h4>Feedback</h4>

    <p>
        Please, provide short feedback on this interaction for your partner. You will receive feedback from your partner after you submit your feedback.
    </p>

   <p>

{% formfield player.feedback %}

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 0px solid #dddddd;
  text-align: center;
  padding: 20px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr5 th:nth-child(6) { text-align:left }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6) { text-align:center }


.trr tr:last-child {<td &nbsp;> colspan="2"</td>}
}

</style>

<table id="myTable" class="tr1 tc2 trr">
    <col width="310">
    <col width="80">
    <col width="80">
    <col width="80">
    <col width="80">
    <col width="80">
  <tr>
    <th> </th>
    <th><img src="{% static 'ASTE_minimal_groups/Emoticon1.jpg' %}"/></th>
    <th><img src="{% static 'ASTE_minimal_groups/Emoticon2.jpg' %}"/></th>
    <th><img src="{% static 'ASTE_minimal_groups/Emoticon3.jpg' %}"/></th>
    <th><img src="{% static 'ASTE_minimal_groups/Emoticon4.jpg' %}"/></th>
    <th><img src="{% static 'ASTE_minimal_groups/Emoticon5.jpg' %}"/></th>
  </tr>

    <tr>
    <th>Did you like the interaction?</th>

                <td><label for="id_interaction_partner_future_0">
                    <input type="radio" name="interaction_partner_future" value="1" id="id_interaction_partner_future_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_future_1">
                    <input type="radio" name="interaction_partner_future" value="2" id="id_interaction_partner_future_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_future_2">
                    <input type="radio" name="interaction_partner_future" value="3" id="id_interaction_partner_future_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_future_3">
                    <input type="radio" name="interaction_partner_future" value="4" id="id_interaction_partner_future_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_future_4">
                    <input type="radio" name="interaction_partner_future" value="5" id="id_interaction_partner_future_4" required="" class="form-check-input">
                </label></td>

    </tr>

    <tr>
    <th>Did you like your interaction partner ?</th>

                <td><label for="id_interaction_like_0">
                    <input type="radio" name="interaction_like1" value="1" id="id_interaction_like_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_like_1">
                    <input type="radio" name="interaction_like1" value="2" id="id_interaction_like_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_like_2">
                    <input type="radio" name="interaction_like1" value="3" id="id_interaction_like_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_like_3">
                    <input type="radio" name="interaction_like1" value="4" id="id_interaction_like_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_like_4">
                    <input type="radio" name="interaction_like1" value="5" id="id_interaction_like_4" required="" class="form-check-input">
                </label></td>
    </tr>

    <tr>
    <th>How much would you like to interact with your partner in the future?</th>

                <td><label for="id_interaction_partner_like_0">
                    <input type="radio" name="interaction_partner_like1" value="1" id="id_interaction_partner_like_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_like_1">
                    <input type="radio" name="interaction_partner_like1" value="2" id="id_interaction_partner_like_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_like_2">
                    <input type="radio" name="interaction_partner_like1" value="3" id="id_interaction_partner_like_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_like_3">
                    <input type="radio" name="interaction_partner_like1" value="4" id="id_interaction_partner_like_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_interaction_partner_like_4">
                    <input type="radio" name="interaction_partner_like1" value="5" id="id_interaction_partner_like_4" required="" class="form-check-input">
                </label></td>
    </tr>

    <tr>
    <th>How much would you like to interact with people from the same group as your partner ?</th>

                <td><label for="id_group_future_0">
                    <input type="radio" name="group_future1" value="1" id="id_group_future_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_group_future_1">
                    <input type="radio" name="group_future1" value="2" id="id_group_future_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_group_future_2">
                    <input type="radio" name="group_future1" value="3" id="id_group_future_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_group_future_3">
                    <input type="radio" name="group_future1" value="4" id="id_group_future_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_group_future_4">
                    <input type="radio" name="group_future1" value="5" id="id_group_future_4" required="" class="form-check-input">
                </label></td>
    </tr>

</table>


{% next_button %}

{% endblock %}