{{ block title }}
    Part 1 Instructions: Task B Practice Round
{{ endblock }}

{{ block content }}

<style>

    #ttt-board td {
        width: 4em;
        height: 4em;
        text-align: center;
        font-size: large;
        border: 1px solid black;
    }

    #ttt-board {
        width: auto;
        text-align: center;
    }

</style>

<p></p>
<p></p>
<p></p>
<div id="period_status">

</div>
<p></p>
<table id="ttt-board" style="visibility: visible;">
    <tr>
        <td id="square0" data-square="0" onclick="sendMove0()"></td>
        <td id="square1" data-square="1" onclick="sendMove1()"></td>
        <td id="square2" data-square="2" onclick="sendMove2()"></td>
        <td id="square3" data-square="3" onclick="sendMove3()"></td>
    </tr>
    <tr>
        <td id="square4" data-square="4" onclick="sendMove4()"></td>
        <td id="square5" data-square="5" onclick="sendMove5()"></td>
        <td id="square6" data-square="6" onclick="sendMove6()"></td>
        <td id="square7" data-square="7" onclick="sendMove7()"></td>
    </tr>
    <tr>
        <td id="square8" data-square="8" onclick="sendMove8()"></td>
        <td id="square9" data-square="9" onclick="sendMove9()"></td>
        <td id="square10" data-square="10" onclick="sendMove10()"></td>
        <td id="square11" data-square="11" onclick="sendMove11()"></td>
    </tr>
    <tr>
        <td id="square12" data-square="12" onclick="sendMove12()"></td>
        <td id="square13" data-square="13" onclick="sendMove13()"></td>
        <td id="square14" data-square="14" onclick="sendMove14()"></td>
        <td id="square15" data-square="15" onclick="sendMove15()"></td>
    </tr>
</table>
<p></p>
<div id="payoff_status">

</div>
<p></p>
<button class="otree-btn-next btn btn-primary" id="T5Next" style="visibility: hidden;">Next</button>

<script>

    let T5symbol = js_vars.T5symbol;
    let prize0 = js_vars.T5prize0;
    let prize1 = js_vars.T5prize1;
    let prize2 = js_vars.T5prize2;
    let prize3 = js_vars.T5prize3;
    let prize4 = js_vars.T5prize4;
    let prize5 = js_vars.T5prize5;
    let prize6 = js_vars.T5prize6;
    let prize7 = js_vars.T5prize7;
    let prize8 = js_vars.T5prize8;
    let prize9 = js_vars.T5prize9;
    let prize10 = js_vars.T5prize10;
    let prize11 = js_vars.T5prize11;
    let prize12 = js_vars.T5prize12;
    let prize13 = js_vars.T5prize13;
    let prize14 = js_vars.T5prize14;
    let prize15 = js_vars.T5prize15;

    function writePeriodStatus(msg) {
        document.getElementById('period_status').innerText = msg;
    }

    function writePayoffStatus(msg) {
        document.getElementById('payoff_status').innerText = msg;
    }

    function liveRecv(data) {
        let boardState = data.T5board_state;
        document.getElementById(`square${0}`).innerText = {'X': prize0, ' ': prize0}[boardState[0]];
        document.getElementById(`square${1}`).innerText = {'X': prize1, ' ': ' '}[boardState[1]];
        document.getElementById(`square${2}`).innerText = {'X': prize2, ' ': ' '}[boardState[2]];
        document.getElementById(`square${3}`).innerText = {'X': prize3, ' ': ' '}[boardState[3]];
        document.getElementById(`square${4}`).innerText = {'X': prize4, ' ': ' '}[boardState[4]];
        document.getElementById(`square${5}`).innerText = {'X': prize5, ' ': ' '}[boardState[5]];
        document.getElementById(`square${6}`).innerText = {'X': prize6, ' ': ' '}[boardState[6]];
        document.getElementById(`square${7}`).innerText = {'X': prize7, ' ': ' '}[boardState[7]];
        document.getElementById(`square${8}`).innerText = {'X': prize8, ' ': ' '}[boardState[8]];
        document.getElementById(`square${9}`).innerText = {'X': prize9, ' ': ' '}[boardState[9]];
        document.getElementById(`square${10}`).innerText = {'X': prize10, ' ': ' '}[boardState[10]];
        document.getElementById(`square${11}`).innerText = {'X': prize11, ' ': ' '}[boardState[11]];
        document.getElementById(`square${12}`).innerText = {'X': prize12, ' ': ' '}[boardState[12]];
        document.getElementById(`square${13}`).innerText = {'X': prize13, ' ': ' '}[boardState[13]];
        document.getElementById(`square${14}`).innerText = {'X': prize14, ' ': ' '}[boardState[14]];
        document.getElementById(`square${15}`).innerText = {'X': prize15, ' ': ' '}[boardState[15]];

        let T5period = data.T5period;
        let T5decisions_remaining = data.T5decisions_remaining;
        let T5last_value = data.T5last_value;
        if (data.T5final_period) {
            writePeriodStatus('In the last decision turn, the square you chose was worth ' + T5last_value + ' points. The Task B practice round is now over. Click Next to begin the Task C practice round.');
            button = document.getElementById("T5Next");
            button.style.visibility = "visible";
            table = document.getElementById("ttt-board");
            table.style.visibility = "hidden";
        } else {
            if (data.T5first_period) {
                writePeriodStatus('You have ' + T5decisions_remaining + ' of {{ C.T5PERIODS }} decision turns remaining in this round. Make your first decision by choosing any square.');
            } else {
                writePeriodStatus('In the last decision turn, the square you chose was worth ' + T5last_value + ' points. You have ' + T5decisions_remaining + ' of {{ C.T5PERIODS }} decision turns remaining in this round. Make your next decision by choosing any square.');
            }
        }
    }

    function sendMove0() {
        liveSend({'move': 0, 'value': prize0});
    }

    function sendMove1() {
        liveSend({'move': 1, 'value': prize1});
    }

    function sendMove2() {
        liveSend({'move': 2, 'value': prize2});
    }

    function sendMove3() {
        liveSend({'move': 3, 'value': prize3});
    }

    function sendMove4() {
        liveSend({'move': 4, 'value': prize4});
    }

    function sendMove5() {
        liveSend({'move': 5, 'value': prize5});
    }

    function sendMove6() {
        liveSend({'move': 6, 'value': prize6});
    }

    function sendMove7() {
        liveSend({'move': 7, 'value': prize7});
    }

    function sendMove8() {
        liveSend({'move': 8, 'value': prize8});
    }

    function sendMove9() {
        liveSend({'move': 9, 'value': prize9});
    }

    function sendMove10() {
        liveSend({'move': 10, 'value': prize10});
    }

    function sendMove11() {
        liveSend({'move': 11, 'value': prize11});
    }

    function sendMove12() {
        liveSend({'move': 12, 'value': prize12});
    }

    function sendMove13() {
        liveSend({'move': 13, 'value': prize13});
    }

    function sendMove14() {
        liveSend({'move': 14, 'value': prize14});
    }

    function sendMove15() {
        liveSend({'move': 15, 'value': prize15});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });
</script>



{{ endblock }}