{% 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>

<table class="tr1" >
    <col width="350">
    <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>
    <th>How much did you like the interaction?</th>

                <td><label for="id_IPF_0">
                    <input type="radio" name="IPF" value="1" id="id_IPF_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPF_1">
                    <input type="radio" name="IPF" value="2" id="id_IPF_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPF_2">
                    <input type="radio" name="IPF" value="3" id="id_IPF_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPF_3">
                    <input type="radio" name="IPF" value="4" id="id_IPF_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPF_4">
                    <input type="radio" name="IPF" value="5" id="id_IPF_4" required="" class="form-check-input">
                </label></td>

    </tr>

    <tr>
    <th>How much did you like your interaction partner? </th>

                <td><label for="id_IL_0">
                    <input type="radio" name="IL" value="1" id="id_IL_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IL_1">
                    <input type="radio" name="IL" value="2" id="id_IL_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IL_2">
                    <input type="radio" name="IL" value="3" id="id_IL_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IL_3">
                    <input type="radio" name="IL" value="4" id="id_IL_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IL_4">
                    <input type="radio" name="IL" value="5" id="id_IL_4" required="" class="form-check-input">
                </label></td>
    </tr>

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

                <td><label for="id_IPL_0">
                    <input type="radio" name="IPL" value="1" id="id_IPL_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPL_1">
                    <input type="radio" name="IPL" value="2" id="id_IPL_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPL_2">
                    <input type="radio" name="IPL" value="3" id="id_IPL_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPL_3">
                    <input type="radio" name="IPL" value="4" id="id_IPL_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_IPL_4">
                    <input type="radio" name="IPL" value="5" id="id_IPL_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_GF_0">
                    <input type="radio" name="GF" value="1" id="id_GF_0" required="" class="form-check-input">
                </label></td>
                <td><label for="id_GF_1">
                    <input type="radio" name="GF" value="2" id="id_GF_1" required="" class="form-check-input">
                </label></td>
                <td><label for="id_GF_2">
                    <input type="radio" name="GF" value="3" id="id_GF_2" required="" class="form-check-input">
                </label></td>
                <td><label for="id_GF_3">
                    <input type="radio" name="GF" value="4" id="id_GF_3" required="" class="form-check-input">
                </label></td>
                <td><label for="id_GF_4">
                    <input type="radio" name="GF" value="5" id="id_GF_4" required="" class="form-check-input">
                </label></td>
    </tr>

</table>

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

{% endblock %}