{{ block title }}{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{ static 'matrix_game/page_shell.css' }}">
<link rel="stylesheet" href="{{ static 'matrix_game/matrix.css' }}?v=48">
<style>
body { display:flex; min-height:100vh; align-items:center; background:white; font-size:20px; }
.otree-body { width:100%; }
</style>

<div class="task-page-shell">
    <h2 class="task-page-heading">Example</h2>
    <p>Below is an example trial.</p>
    <p>You are the <strong>column player</strong>. Choose <strong>Left</strong> with <strong>F</strong> and <strong>Right</strong> with <strong>J</strong>.</p>
    <p>After this study, new participants will respond to these games as row players. Your response may be used in more than one future experiment and paired with more than one future row player. Neither player will know the other player's choice when making a decision. Future participants will receive no personal information that identifies you. Each point is worth £0.01, so 50 points are worth £0.50. Each time your response is selected for a future pairing, you will receive an additional payment determined by the paired choices and the payoff matrix.</p>
    <p>Each cell shows the points for <span class="self-payoff"><strong>Self</strong></span> and <span class="other-payoff"><strong>Other</strong></span> produced by the two choices.</p>
    <h3 style="margin:1.5em 0 1em; text-align:center;">Which option do you choose?</h3>
    <div id="exampleMatrix">{{ include "matrix_game/MatrixMatrix.html" }}</div>
    <div style="margin-top:1.5em; text-align:center;">
        <button type="submit" class="btn btn-primary btn-lg" style="width:15em;">Continue</button>
    </div>
</div>
{{ endblock }}