{{ extends "global/Page.html" }}
{{ block title }}Matrix Task{{ endblock }}

{{ block content }}


<!-- Updates html style to match other UW Teton Lab experiments -->
{{ include_sibling 'uw_teton_bg.html' }}

<!-- Hide next button initially -->
<style>
    .otree-btn-next { 
        display: none; /* Hide next button */
    }
</style>

<!-- Sets timer for next button to appear -->
<script>
    setTimeout(
    function () {
                $('.otree-btn-next').show();
            }, // Shows otree next button at end of timer
    3*1000
);
</script>

<!-- Display the matrix -->
<table> {% for row in matrix %} 
    <tr> {% for cell in row %} 
        <td>{{ cell }}</td> {% endfor %} 
    </tr> {% endfor %} 
</table>

<!-- Javascript used to remove the intial value of 0 (initial value is used so that the player not doing the task can still proceed with the experiment) -->
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var inputFields = document.getElementsByName('player_sum'); // This returns a NodeList
        if (inputFields.length > 0) {
            inputFields[0].value = ''; // Assuming it's the first element with this name
        }
    });
</script>

<br>

{{ formfields }}

{{ next_button }}

{{ endblock }}