{% 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:  Playing With Each Other</h3>
        <hr>

        <li>
            In the next part of the experiment, you will be <b>randomly matched</b> with <b>another participant</b> (an actual person!) to play a <b>game</b> for several <b>rounds</b>. As in Part 1, the number of rounds in each game (i.e., the game length) is randomly determined:  After each round, there is an {{ continuation }}% chance that the game will continue for at least one more round.
        </li>
        <br>

        <li>
            In this game, each <b>round</b> you will <b>choose an action</b>:<span class='purple'>  <b>A</b> or <b>B</b></span>.   At the same time, <b>your counterpart will choose an action</b>: <span class='orange'> <b>A</b> or <b>B</b> </span>.
        </li>

        <br>

        <li>
            The <b>combination</b> of your choice and your counterpart's choice will determine how many points you earn for the round.  We show these payoffs in a <b>payment table</b> like the one below.
        </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="420px" height="194px"/>
            {% else %}
                <img src="{% static 'complex2021/payment_s.png' %}" width="420px" height="194px"/>
            {% endif %}
        </div>
        <br>

        <li>
            To read the table, just look at where your action (shown in <span class='purple'>purple</span> as rows) and your counterpart's action (shown in <span class='orange'>orange</span> as columns) intersect.  The first number in the corresponding cell of the table (shown in <span class='purple'>purple</span>) is the amount <b>you</b> would earn from the pair of actions.  The second number is the amount your <b>counterpart</b> would earn.
        </li>

        <br>
        <li>
            Your counterpart will see the <b>exact same</b> information in this table when she makes her choice.
        </li>

        <br>
        <li>
            You earn the sum of all of your earnings across rounds, each game.   When a game randomly ends, we will <b>randomly match</b> you with a <b>new person</b> to play another game.  You will play several of these games.
        </li>

        <br>
        <li>
            Please finish the following comprehension questions and then click <b>Next</b> to enter next page.
        </li>

        <hr><h3>Comprehension Questions</h3><hr>
        <label>1. {{ form.quizP2_1_1c.label }}</label>
        <span>{{ form.quizP2_1_1c }}</span><span class="error">{{ form.quizP2_1_1c.errors }}</span>
        <br>
        <label>2. {{ form.quizP2_1_2c.label }}</label>
        <span>{{ form.quizP2_1_2c }}</span><span class="error">{{ form.quizP2_1_2c.errors }}</span>
        <br>
        <label>3. {{ form.quizP2_1_3c.label }}</label>
        <span>{{ form.quizP2_1_3c }}</span><span class="error">{{ form.quizP2_1_3c.errors }}</span>
        <br>
        <label>4. {{ form.quizP2_1_4c.label }}</label>
        <span>{{ form.quizP2_1_4c }}</span><span class="error">{{ form.quizP2_1_4c.errors }}</span>
        <br>
        <label>5. {{ form.quizP2_1_5.label }}</label>
        <span>{{ form.quizP2_1_5 }}</span><span class="error">{{ form.quizP2_1_5.errors }}</span>
        <br>
    </ul>
</div>

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

{% endblock %}