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

{% block content %}

    <h4>Feedback</h4>

    <p>
        <p>Please, provide short feedback on your interaction.</p>
    </p>

   <p>

<style>
.gap-20 {
  width:100%;
  height:20px;
}

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

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

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

.input-group, input.form-control, select.form-control, textarea.form-control {
    max-width: 950px;
}
}

</style>

<p>Please answer the following questions about your interaction partner:</p>

<b>{% formfield player.partner_group %}</b>
<b>{% formfield player.hobby %}</b>
<b>{% formfield player.fear %}</b>

<div class="gap-20"></div>
<div class="gap-20"></div>
<div class="gap-20"></div>
<p>Please answer the following questions about you:</p>

<b>{% formfield player.owngroup %}</b>

<table class="tr1" >
    <col width="250">
    <col width="75">
    <col width="75">
    <col width="75">
    <col width="75">
    <col width="75">

  <tr class="tr2">
    <td></td>
    <td colspan="2"  align="left">not at all</td>
    <td></td>
    <td></td>
    <td>very much</td>
  </tr>
        <tr></tr>
    <tr>
        <th style="font-weight:normal"><b>How strongly do you identify with your personality group?</b> </th>

                <td><label for="id_Ident_0">
                    <input type="radio" name="Ident" value="1" id="id_Ident_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_Ident_1">
                    <input type="radio" name="Ident" value="2" id="id_Ident_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_Ident_2">
                    <input type="radio" name="Ident" value="3" id="id_Ident_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_Ident_3">
                    <input type="radio" name="Ident" value="4" id="id_Ident_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_Ident_4">
                    <input type="radio" name="Ident" value="5" id="id_Ident_4" required="" class="form-check-input">
                </label></td>

    </tr>
</table>

<div class="gap-20"></div>
{% next_button %}

{% endblock %}