{{ 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 { background:white; font-size:20px; }
.dilemma-matrix {
    margin-bottom: 1em;
}
</style>

<div class="task-page-shell">
    <h2 class="task-page-heading">Understanding check</h2>
    <p><button type="button" class="btn btn-secondary btn-lg" onclick="toggleInstructions(this)">Show instructions</button></p>
    <div id="instr-panel" style="display:none; border:1px solid #ccc; padding:10px; margin-bottom:1em;">
        <p><strong>Task.</strong> You are the column player and choose Left or Right. After this study, new participants will respond to the same 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 knows the other player's choice when responding. Future participants receive no personal information that identifies you and cannot trace a response back to you. For example, Left combined with Bottom gives you 4 points and the row player 6 points.</p>
        <p><strong>Response.</strong> Press F for Left or J for Right. The task is self-paced, with no response deadline. Please pay close attention to each matrix and choose carefully.</p>
        <p><strong>Earnings.</strong> In addition to the participation payment stated on Prolific, each time one of your responses is selected in a future experiment, it is paired with a Top or Bottom choice made by a new participant. The two choices jointly determine both participants' points, and you receive an additional payment for that pairing. Each point is worth £0.01, so 50 points are worth £0.50.</p>
    </div>

    {{ formfield player.check1 }}
    {{ formfield player.check2 }}
    {{ formfield player.check3 }}
    {{ formfield player.check4 }}
    <div id="checkMatrix">{{ include "matrix_game/MatrixMatrix.html" }}</div>
    {{ formfield player.check5 }}
    {{ formfield player.check6 }}

    <div style="text-align:center; margin-top:1em;">
        <button type="submit" class="btn btn-primary btn-lg" style="width:15em;">Continue to practice</button>
    </div>
</div>

<script>
function toggleInstructions(button) {
    const panel = document.getElementById('instr-panel');
    const show = panel.style.display === 'none' || panel.style.display === '';
    panel.style.display = show ? 'block' : 'none';
    button.textContent = show ? 'Hide instructions' : 'Show instructions';
}
</script>
{{ endblock }}