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

{% block title %}
    Summary of instructions
{% endblock %}

{% block content %}

<div class="card card-body bg-light instructions">
    <div class="big">

<p>Thank you for completing the quiz. Please wait until everyone is finished, and then the experimenter will read a summary aloud.</p>
<p>
    <ul>
        <li> You will be randomly paired with another person for a match. You will interact with the same person for the entire match. </li>

        <li> Your payoff in each round depends on choices: </li>
        <table class='table table-bordered text-center' style='width: auto; margin: auto'>
            <tr>
                <th colspan=2 rowspan=2></th>
                <th colspan=2>The Other Participant</th>
            </tr>
            <tr>
                <th>Choice 1</th>
                <th>Choice 2</th>
            </tr>
            <tr>
                <th rowspan=2><span class="rotate90">You</span></th>
                <th>Choice 1</th>
                <td> <span style="color: dodgerblue;">{{ Constants.PayoffCC }}</span>, <span style="color: purple;">{{ Constants.PayoffCC }}</span></td>
                <td><span style="color: dodgerblue;">{{ Constants.PayoffCD }}</span>, <span style="color: purple;">{{ Constants.PayoffDC }}</span></td>
            </tr>
            <tr>
                <th>Choice 2</th>
                <td> <span style="color: dodgerblue;">{{ Constants.PayoffDC }}</span>, <span style="color: purple;">{{ Constants.PayoffCD }}</span></td>
                <td> <span style="color: dodgerblue;">{{ Constants.PayoffDD }}</span>, <span style="color: purple;">{{ Constants.PayoffDD }}</span></td>
            </tr>
        </table>

        <li> Your choice and the choice of the person you are paired with will be shown to both of you at the end of each round. </li>

        {{ if Endogenous }}
        <li>At the end of each round, the match may continue based on your choices and a 6-sided die roll:</li>
            <ul>
                <li>Both choose 1: Continues if the die shows 1, 2, 3, or 4; ends if it shows 5 or 6.</li>
                <img src="{% static 'images/dices_4.png' %}" style="max-width: 60%; height: auto; display: block; margin: auto;">
                <li>At least one chooses 2: Continues if the die shows 1, 2, or 3; ends if it shows 4, 5, or 6.</li>
                <img src="{% static 'images/dices_3.png' %}" style="max-width: 60%; height: auto; display: block; margin: auto;">
            </ul>
        {{ else }}
        <li>At the end of each round, the match may continue based on a 6-sided die roll. The match continues if the die shows 1, 2, or 3; ends if it shows 4, 5, or 6.</li>
        <img src="{% static 'images/dices_3.png' %}" style="max-width: 60%; height: auto; display: block; margin: auto;">
        {{ endif }}

        <li> Matches are played in blocks of 3 rounds. At each block's end, you will learn if all matches have ended. If not, you will play another block. Once all matches end, you will see the round your match ended and the computer's die rolls for each round.  </li>

        <li> After a match is finished, you will be randomly paired with someone for a new match.  </li>

        <li> One match will be randomly selected to count towards your final payoff. </li>
    </ul>
        </p>
        <p>If you have any questions, you can raise your hand, and the experimenter will come to assist you.</p>
            </div>
</div>

{% endblock %}

{% block styles %}
    <style type="text/css">
        .big{
            font-size: large;
        }
        ul li {
    padding: 5px 0px;
    }
    </style>
{% endblock %}