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


{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            font-size:14px;
        }

        th {
            padding: 15px;
            text-align:center;
            font-weight:normal;
        }

        table.center {
            margin-left: auto;
            margin-right: auto;
        }

        .strat{
            width:200px;
	        height:150px; word-wrap:break-word;
        }

        legend{
            font-size:18px;
            font-weight:bold;
        }

        label{
            font-weight:normal;
        }

        li{
            font-size:16px;
        }

        .error {
        color: red;
        }

        .red{color:red;}
        .blue{color:blue;}
        .green{color:green;}
        .purple{color:purple;}
        .orange{color:orange;}
    </style>

{% endblock %}

{% block content %}

<div class="card card-body instructions">
    <ul class='page'>
        <hr>
            <h3>Part 2:  Implementing your rule.</h3>
        <hr>

        <li>
            As just discussed, your <b>base payment</b> for each game will be the <b>average amount</b> your rule and your counterpart's rule would earn over millions of games of varying lengths.  However, we will <b>also</b> have you and your counterpart <b>implement</b> the rules you each chose in one actual multi-round game.
        </li>
        <hr>
        <u>Example:</u>
        <div class='container-fluid' style='display:block;text-align:center'>
            <img src="{% static 'complex2021/P2_implement_s.png' %}" width="700px" height="431px"/>
        </div>

        <hr>
        <li>
            In each game, after you and your counterpart have both chosen a rule, we will show you a <b>screen</b> like the one above.   It works exactly as in the games from Part 1 of the experiment.  The <b>only difference</b> is that instead of playing with a robot, you will be playing with your <b>actual counterpart</b>.    You will be implementing your rule (in response to his or her actions) and your counterpart will be implementing his or her rule (in response to your actions)!
        </li>
        <br>

        <li>
            On your screen we will remind you of what rule you chose for the game (we will not show you the rule your counterpart chose).   Just as in Part 1 of the experiment, you will <b>lose 20 points</b> every time you make a mistake in implementing your rule.
        </li>
        <br>

        <li>
            <u>Remember</u>:  although your and your counterpart's rule choices influence your base payment via the actions they generate and the numbers in the game's <b>payment table</b> (like the one below), once you move to <b>implementing the rule</b>, your job is only to try to follow the rule you chose.  <b>After</b> choosing your rule, the <b>only impact</b> your actions have on your payments for the rest of the game is to produce possible penalties to your earnings if you <b>make mistakes</b> in following the rule.
        </li>
        <br>
        <u>Payment Table:</u>
        <div class='container-fluid' style='display:block;text-align:center'>
            {% if complex_treatment %}
                <img src="{% static 'complex2021/payment_c.png' %}" width="400px" height="184px"/>
            {% else %}
                <img src="{% static 'complex2021/payment_s.png' %}" width="420px" height="193px"/>
            {% endif %}
        </div>
        <br>

        <hr><h3>Comprehension Question</h3><hr>
        <label>1. {{ form.quizP2_3.label }}</label>
        <span>{{ form.quizP2_3 }}</span>
        <span class="error">{{ form.quizP2_3.errors }}</span>
    </ul>
</div>

<p style="text-align:right">
    <button class="otree-btn-next btn btn-primary">Next</button>
</p>

{% endblock %}