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

{% block styles %}

<style>

.tg {
    height: 75px;
    table-layout: fixed;
    width: 450px;
}

.tg th {
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

.tg td {
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

</style>

{% endblock %}

{% block title %}

Questionnaire

{% endblock %}

{% block content %}

<p align="justify">
<i> Please answer the following questions truthfully. </i>
</p>

{% formfield player.age label="1. What is your age?" %}

{% formfield player.gender label="2. What is your gender <i> (optional)</i>?" %}

{% formfield player.nationality label="3. What is your nationality?" %}

{% formfield player.study label="4. What is your field of study?" %}

{% formfield player.course label="5. Have you ever taken a course on game theory?" %}

{% formfield player.question6 label="6. In approximately how many experiments have you participated before?" %}

{% formfield player.question7 label="7. Have you ever participated in an experiment that was similar to this experiment?" %}

<p align="justify">
8. How well did you understand the instructions?
</p>

<center>

<table class="tg">
  <tr>
    <td colspan="3"> <i> Not at all </i> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td colspan="3"> <i> Completely </i> </td>
  </tr>
  <tr>
    <th> </th>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> </th>
  </tr>
  <tr>
    <td> </td>
    {% for choice in form.question8 %}
    <td> &ensp; &emsp; {{ choice.tag }} </td>
    {% endfor %}
    <td> </td>
  </tr>
</table>

</center>

<br />

<p align="justify">
9. Do you trust that the instructions were truthful?
</p>

<center>

<table class="tg">
  <tr>
    <td colspan="3"> <i> Not at all </i> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td colspan="3"> <i> Completely </i> </td>
  </tr>
  <tr>
    <th> </th>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> </th>
  </tr>
  <tr>
    <td> </td>
    {% for choice in form.question9 %}
    <td> &ensp; &emsp; {{ choice.tag }} </td>
    {% endfor %}
    <td> </td>
  </tr>
</table>

</center>

<br />

<p align="justify">
10. Do you trust that your decisions are used to determine your final earnings?
</p>

<center>

<table class="tg">
  <tr>
    <td colspan="3"> <i> Not at all </i> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td colspan="3"> <i> Completely </i> </td>
  </tr>
  <tr>
    <th> </th>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> </th>
  </tr>
  <tr>
    <td> </td>
    {% for choice in form.question10 %}
    <td> &ensp; &emsp; {{ choice.tag }} </td>
    {% endfor %}
    <td> </td>
  </tr>
</table>

</center>

<br />

<p align="justify">
11. Do you trust that your matching partners are also participants in the experiment?
</p>

<center>

<table class="tg">
  <tr>
    <td colspan="3"> <i> Not at all </i> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td colspan="3"> <i> Completely </i> </td>
  </tr>
  <tr>
    <th> </th>
    <th> 1 </th>
    <th> 2 </th>
    <th> 3 </th>
    <th> 4 </th>
    <th> 5 </th>
    <th> 6 </th>
    <th> 7 </th>
    <th> </th>
  </tr>
  <tr>
    <td> </td>
    {% for choice in form.question11 %}
    <td> &ensp; &emsp; {{ choice.tag }} </td>
    {% endfor %}
    <td> </td>
  </tr>
</table>

</center>

<br />

{% formfield player.question12 label="12. Did you complete this experiment with the help of someone else?" %}

{% formfield player.question13 label="13. Do you know anyone who has participated in this experiment before?" %}

<div id="question14" style="display: none">
{% formfield player.question14 label="14. If so, did you discuss the content of this experiment with that person?" %}
</div>

<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}

{% block scripts %}

<script>

$(document).ready(function() {
    var question14 = $('#question14');
    $('input').change(function () {
        var question13 = $('input[name=question13]:checked').val();
        if (question13 == 1) {
            question14.show();
        }
        else {
            question14.hide();
        }
    });
});

</script>

{% endblock %}