{{ 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%; }
#practice-feedback { min-height:2em; margin-top:1.25em; text-align:center; visibility:hidden; }
</style>

<div class="task-page-shell">
    <h2 class="task-page-heading">Practice trial</h2>
    <p style="color:darkred;">This is a practice trial. No points are earned here.</p>
    <p>Please choose Left or Right.</p>
    <h3 style="margin:1.5em 0 1em; text-align:center;">Which option do you choose?</h3>
    <div id="practiceMatrix">{{ include "matrix_game/MatrixMatrix.html" }}</div>
    <div id="practice-feedback"></div>
</div>

<script>
let practiceSelected = false;

function selectPractice(side) {
    practiceSelected = true;
    const selector = side === 'Left' ? '.choice-left' : '.choice-right';
    document.querySelector('#practiceMatrix ' + selector).classList.add('selected');
    const feedback = document.getElementById('practice-feedback');
    feedback.innerHTML = 'You chose <b>' + side + '</b>. Please press <b>SPACE</b> to continue.';
    feedback.style.visibility = 'visible';
}

document.addEventListener('keydown', function (event) {
    if (event.repeat) return;
    const key = event.key.toLowerCase();
    if (!practiceSelected && key === 'f') {
        event.preventDefault();
        selectPractice('Left');
    } else if (!practiceSelected && key === 'j') {
        event.preventDefault();
        selectPractice('Right');
    } else if (practiceSelected && event.code === 'Space') {
        event.preventDefault();
        document.querySelector('form').requestSubmit();
    }
});
</script>
{{ endblock }}