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

{% block title %}
    Part 1
{% endblock %}

{% block content %}
    <div class="info_box">
        <div class="header">
            <p class="formatting_header">
                Information:
            </p>
        </div>
        <div class="content">
            <p class="formatting_content">
                In Part 1, we want to introduce you to another group of participants.
                During the rest of this study, we will call this group <b>"Group A"</b>.
                Some time ago, Group A took part in another study.
                Among other things, this study included a questionnaire.
                Below you can see the answers of Group A to a small selection of five questions.
                In each case, the answer is the rating that is closest to the average rating that we received from all
                    members of Group A.
                We want you to carefully read and memorize the answers provided by members of Group A.
                On the next page, we will show you one question, and we will ask you to select the same response as
                    members of Group A.
                If you choose the correct answer, you will receive a bonus of {{player.ITG_bonus}}!
                We will tell you whether you were right at the end of the study.
            </p>
        </div>
    </div>

    <div class="task_box">
        <div style="margin: 25px 25px 50px 25px ">
            <p class="formatting_content">
                <b> When deciding whether something is right or wrong, to what extent are the following considerations
                    relevant to the thinking of Group A? </b> They rated each statement with the following scale:
            </p>
            <p class="formatting_content">
                <p style="margin-left: 50px"> [5] = Extremely relevant (This is one of the most important factors when I judge right and wrong)</p>
                <p style="margin-left: 50px"> [4] = Very relevant</p>
                <p style="margin-left: 50px"> [3] = Somewhat relevant</p>
                <p style="margin-left: 50px"> [2] = Slightly relevant</p>
                <p style="margin-left: 50px"> [1] = Not very relevant</p>
                <p style="margin-left: 50px"> [0] = Not at all relevant (This consideration has nothing to do with my judgments of right and wrong)</p>
            </p>
        </div>
        <hr/>
        <div style="margin: 50px -25px 25px 25px">
            <table width="95%">
                <tr class = "table">
                    <td width="80%">1. Whether or not someone cared for someone weak or vulnerable:</td>
                    <td style = "font-weight: bold;">
                        {% if player.A1 == 0 %} Not at all Relevant {% endif %}
                        {% if player.A1 == 1 %} Not very Relevant {% endif %}
                        {% if player.A1 == 2 %} Slightly Relevant {% endif %}
                        {% if player.A1 == 3 %} Somewhat Relevant {% endif %}
                        {% if player.A1 == 4 %} Very Relevant {% endif %}
                        {% if player.A1 == 5 %} Extremely Relevant {% endif %}
                    </td>
                </tr>
                <tr class = "table">
                    <td width="80%">2. Whether or not some people were treated differently from others:</td>
                    <td style = "font-weight: bold;">
                        {% if player.A2 == 0 %} Not at all Relevant {% endif %}
                        {% if player.A2 == 1 %} Not very Relevant {% endif %}
                        {% if player.A2 == 2 %} Slightly Relevant {% endif %}
                        {% if player.A2 == 3 %} Somewhat Relevant {% endif %}
                        {% if player.A2 == 4 %} Very Relevant {% endif %}
                        {% if player.A2 == 5 %} Extremely Relevant {% endif %}
                    </td>
                </tr>
                <tr class = "table">
                    <td width="80%">3. Whether or not someone’s action showed love for his or her country:</td>
                    <td style = "font-weight: bold;">
                        {% if player.A3 == 0 %} Not at all Relevant {% endif %}
                        {% if player.A3 == 1 %} Not very Relevant {% endif %}
                        {% if player.A3 == 2 %} Slightly Relevant {% endif %}
                        {% if player.A3 == 3 %} Somewhat Relevant {% endif %}
                        {% if player.A3 == 4 %} Very Relevant {% endif %}
                        {% if player.A3 == 5 %} Extremely Relevant {% endif %}
                    </td>
                </tr>
              
                <tr class = "table">
                    <td width="80%">4. Whether or not someone violated standards of purity and decency:</td>
                    <td style = "font-weight: bold;">
                        {% if player.A5 == 0 %} Not at all Relevant {% endif %}
                        {% if player.A5 == 1 %} Not very Relevant {% endif %}
                        {% if player.A5 == 2 %} Slightly Relevant {% endif %}
                        {% if player.A5 == 3 %} Somewhat Relevant {% endif %}
                        {% if player.A5 == 4 %} Very Relevant {% endif %}
                        {% if player.A5 == 5 %} Extremely Relevant {% endif %}
                    </td>
                </tr>
            </table>
        </div>
     </div>
    <div class="button_box">
        <br>
        <span style="margin-right: 10px"> Click on the "Continue" button to continue with the study! </span>
        <input class="btn btn-primary" type="submit" value="Continue"/>
        <br><br>
    </div>
{% endblock %}
{% block styles %}
    <style>
        hr {
            border-top: 1px solid #343434;
        }
    </style>
{% endblock %}