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

        .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:  Summary</h3>
        <hr>

        <li>
            You and your counterpart will each choose a rule for playing the game shown in the <b>payment table</b> for a random number of rounds (each game continues with an {{ continuation }}% chance after each round).
        </li>
        <br>


        <li>
            The combination of your rules will be used (by the computer) to calculate how much each of you would earn, <b>on average</b>, over millions of games (each has a random number of rounds).
        </li>
        <br>

        {% if computation %}
            <li>
                We will not tell you exactly how much each combination of rules will earn each of you -- that is for you to determine.
            </li>
            <br>
        {% else %}
            <li>
                The <b>rules table</b> shows you exactly how much each combination of rules will earn each of you.
            </li>
            <br>
        {% endif %}

        {% if implementation %}
            <li>
                After choosing your rules, you and your counterpart will have to follow the rules you've each chosen against one another.  You will lose 20 points for every mistake you make in following the rule you chose. So does your counterpart.
            </li>
            <br>
        {% else %}
            <li>
                After choosing your rules, the computer will automatically perform the rules you've each chosen against one another.
            </li>
            <br>
        {% endif %}


        <li>
            When you have finished a game we will <b>match you randomly</b> with a <b>new person</b> to play the game again. Click <b>Next</b> to begin Part 2.
        </li>
        <br>
    </ul>
</div>

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

{% endblock %}