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

{% block title %}
Question 3
{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 6% ;
}

table {
	border:1px solid #dddddd;
}

</style>
{% endblock %}

{% block content %}
<div class="card info">
    <p>
        You can now rate again the social appropriateness of the three actions that the participant i.e. decision maker
        could take in the scenario described before: give to charity, no change of allocation or take from charity.
    </p>
    <p>
        For each action, we ask you to rate whether you believe that the action is socially appropriate or socially inappropriate.
        By “socially appropriate”, we mean behavior that other people taking this exact survey would agree is the “right” thing to do.
    </p>
    <p>
        <strong> Note: This survey was given to 200 other participants in a previous study. </strong>
    </p>
    <p>
        In order to earn additional money, you need to rate the appropriateness of actions the same way as most of these 200 participants did.
    </p>
    <p>
        If this question is chosen, you will earn an additional X points per statement correctly predicted.
    </p>
    <br>
    <font size="3">
    <div class=" table fixed table-sm table-striped table-responsive">
        <table class="table">
            <tr>
                <th> </th>
                <th class="text-center" style="font-weight:400;width: 20% ;"> Very Socially Inappropriate </th>
                <th class="text-center" style="font-weight:400;width: 20% ;"> Somewhat Socially Inappropriate </th>
                <th class="text-center" style="font-weight:400;width: 20% ;"> Somewhat Socially Appropriate </th>
                <th class="text-center" style="font-weight:400;width: 20% ;"> Very Socially Appropriate  </th>
            </tr>
            {% for field in form %}
            {% if forloop.counter >= 1 and forloop.counter <= 3 %}
            <tr>
                <th> {{ field.label }} </th>
                {% for choice in field %}
                <td align=Center> {{ choice }} </td>
                {% endfor %}
            </tr>
            {% endif %}
            {% endfor %}
        </table>
    </div>
    </font>
</div>
<br>

<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="KrupkaElicitation2_time" id="KrupkaElicitation2_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;

    $(document).ready(function() {
    startpage_time = Date.now();
      });

      function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('KrupkaElicitation2_time').value=page_time;
           };
</script>
{% endblock %}