{{ block title }}
<div align="center"><strong> Task 1 </strong></div>
{{ endblock }}

{{ block content }}

    {{ if player.TaskChoice_R3 == 2  }}
<p style="line-height:1.15; font-size:18px;"><strong>Round 3</strong></p>
<p style="line-height:1.15; font-size:18px;">Your Choice: the big grid</p>

    <div style="position: relative;">
        <div id="successMessage_big" style="display: none; position: absolute; top: 0; right: 0; margin-right: 50px;margin-top:30px;">
            <br/>
            <br/>
            <br/>
            <br/>
            <p style="line-height:1.75;color: red;">You have worked out the task!</p>
        </div>
        <div align="center">
        <canvas id="gridCanvas_R3_big" width="300" height="300"></canvas>
        </div>
    </div>

<br/>

    <p style="line-height:1.75;margin-bottom:20px;">You have found <span id="foundPairsNumber_big">0</span> pairs that add up to 100.</p>

<br/>
<div align="center">    {{ next_button }} </div>

<script>
    var canvas = document.getElementById('gridCanvas_R3_big');
    var ctx = canvas.getContext('2d');
    var gridSizeBig = 5;
    var cellSizeBig = canvas.width / gridSizeBig;
    var lineWidth = 2;
    var matrix_R3_big = [63, 25, 17, 89, 82, 32, 54, 76, 28, 47, 74, 85, 41, 29, 44, 46, 59, 22, 12, 24, 39, 30, 90, 15, 68];
    var clickedIndex = -1;
    var clickedNumbers = [];
    var pairs = [];
    var colors = ['orange', 'blue', 'green', 'LightPink','DarkOrchid'];
    var foundPairs = 0;
    var success_R3_big = 0;
    var foundPairIndices = [];

    canvas.addEventListener('click', function(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        var i = Math.floor(y / cellSizeBig);
        var j = Math.floor(x / cellSizeBig);
        var index = i * gridSizeBig + j;
        var number = matrix_R3_big[index];

        if (index === clickedIndex || foundPairIndices.includes(index)) {
            return;
        }

        if (clickedIndex === -1) {
            clickedIndex = index;
            drawGrid();
        } else {
            var number1 = matrix_R3_big[clickedIndex];
            if (number + number1 === 100 && !foundPairIndices.includes(clickedIndex) && !foundPairIndices.includes(index)) {
                pairs.push([number, number1]);
                foundPairIndices.push(clickedIndex, index);
                updateFoundPairs();
                if (foundPairs >= 3) {
                    success_R3_big = 1;
                    document.getElementById('successMessage_big').style.display = 'block';
                }
                sendSuccess(success_R3_big);
            }
            clickedIndex = -1;
            drawGrid();
        }
    });

    function updateFoundPairs() {
        foundPairs = pairs.length;
        updateFoundPairsDisplay();
        sendFoundPairs(foundPairs);
    }

    function updateFoundPairsDisplay() {
        var foundPairsDisplay = document.getElementById('foundPairsNumber_big');
        foundPairsDisplay.textContent = foundPairs;
    }

    function sendFoundPairs(foundPairs) {
        liveSend({'foundPairs': foundPairs});
    }

    function sendSuccess(success_R3_big) {
        liveSend({'success_R3_big': success_R3_big});
    }

    function checkPairs() {
        pairs = [];
        for (var i = 0; i < clickedNumbers.length - 1; i++) {
            for (var j = i + 1; j < clickedNumbers.length; j++) {
                if (clickedNumbers[i] + clickedNumbers[j] === 100) {
                    pairs.push([clickedNumbers[i], clickedNumbers[j]]);
                }
            }
        }
    }

    function drawGrid() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.lineWidth = lineWidth;

        ctx.strokeStyle = 'black';
        ctx.font = 'bold 16px Georgia';
        ctx.textAlign = 'center';

        for (var x = 0; x <= canvas.width; x += cellSizeBig) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
        }

        for (var y = 0; y <= canvas.height; y += cellSizeBig) {
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
        }

        ctx.stroke();

        for (var i = 0; i < gridSizeBig; i++) {
            for (var j = 0; j < gridSizeBig; j++) {
                var index = i * gridSizeBig + j;
                var number = matrix_R3_big[index];
                var xPos = j * cellSizeBig + cellSizeBig / 2;
                var yPos = i * cellSizeBig + cellSizeBig / 2 + 8;
                var colorIndex = pairs.findIndex(pair => pair.includes(number));
                if (index === clickedIndex) {
                    ctx.fillStyle = 'red';
                } else if (colorIndex !== -1) {
                    ctx.fillStyle = colors[colorIndex % colors.length];
                } else {
                    ctx.fillStyle = 'black';
                }
                ctx.fillText(number, xPos, yPos);
            }
        }
    }
    drawGrid();

</script>

        {{ else }}
<p style="line-height:1.15; font-size:18px;"><strong>Round 3</strong></p>
<p style="line-height:1.15; font-size:18px;">Your Choice: the small grid</p>

    <div style="position: relative;">
        <div id="successMessage_small" style="display: none; position: absolute; top: 0; right: 0; margin-right: 90px;margin-top:30px;">
            <br/>
            <br/>
            <p style="line-height:1.75;color: red;">You have worked out the task!</p>
        </div>
        <div align="center">
        <canvas id="gridCanvas_R3_small" width="180" height="180"></canvas>
        </div>
    </div>

<br/>

    <p style="line-height:1.75;margin-bottom:20px;">You have found <span id="foundPairsNumber_small">0</span> pairs that add up to 100.</p>

<br/>
<div align="center">    {{ next_button }} </div>

<script>
    var canvas = document.getElementById('gridCanvas_R3_small');
    var ctx = canvas.getContext('2d');
    var gridSizeSmall = 3;
    var cellSizeSmall = canvas.width / gridSizeSmall;
    var lineWidth = 2;
    var matrix_R3_small = [12, 15, 83, 69, 31, 17, 90, 85, 30];
    var clickedIndex = -1;
    var clickedNumbers = [];
    var pairs = [];
    var colors = ['orange', 'blue', 'green', 'LightPink'];
    var foundPairs = 0;
    var success_R3_small = 0;
    var foundPairIndices = [];

    canvas.addEventListener('click', function(event) {
        var rect = canvas.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        var i = Math.floor(y / cellSizeSmall);
        var j = Math.floor(x / cellSizeSmall);
        var index = i * gridSizeSmall + j;
        var number = matrix_R3_small[index];

        if (index === clickedIndex || foundPairIndices.includes(index)) {
            return;
        }

        if (clickedIndex === -1) {
            clickedIndex = index;
            drawGrid();
        } else {
            var number1 = matrix_R3_small[clickedIndex];
            if (number + number1 === 100 && !foundPairIndices.includes(clickedIndex) && !foundPairIndices.includes(index)) {
                pairs.push([number, number1]);
                foundPairIndices.push(clickedIndex, index);
                updateFoundPairs();
                if (foundPairs >= 3) {
                    success_R3_small = 1;
                    document.getElementById('successMessage_small').style.display = 'block';
                }
                sendSuccess(success_R3_small);
            }
            clickedIndex = -1;
            drawGrid();
        }
    });

    function updateFoundPairs() {
        foundPairs = pairs.length;
        updateFoundPairsDisplay();
        sendFoundPairs(foundPairs);
    }

    function updateFoundPairsDisplay() {
        var foundPairsDisplay = document.getElementById('foundPairsNumber_small');
        foundPairsDisplay.textContent = foundPairs;
    }

    function sendFoundPairs(foundPairs) {
        liveSend({'foundPairs': foundPairs});
    }

    function sendSuccess(success_R3_small) {
        liveSend({'success_R3_small': success_R3_small});
    }

    function checkPairs() {
        pairs = [];
        for (var i = 0; i < clickedNumbers.length - 1; i++) {
            for (var j = i + 1; j < clickedNumbers.length; j++) {
                if (clickedNumbers[i] + clickedNumbers[j] === 100) {
                    pairs.push([clickedNumbers[i], clickedNumbers[j]]);
                }
            }
        }
    }

    function drawGrid() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.lineWidth = lineWidth;

        ctx.strokeStyle = 'black';
        ctx.font = 'bold 16px Georgia';
        ctx.textAlign = 'center';

        for (var x = 0; x <= canvas.width; x += cellSizeSmall) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
        }

        for (var y = 0; y <= canvas.height; y += cellSizeSmall) {
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
        }

        ctx.stroke();

        for (var i = 0; i < gridSizeSmall; i++) {
            for (var j = 0; j < gridSizeSmall; j++) {
                var index = i * gridSizeSmall + j;
                var number = matrix_R3_small[index];
                var xPos = j * cellSizeSmall + cellSizeSmall / 2;
                var yPos = i * cellSizeSmall + cellSizeSmall / 2 + 8;
                var colorIndex = pairs.findIndex(pair => pair.includes(number));
                if (index === clickedIndex) {
                    ctx.fillStyle = 'red';
                } else if (colorIndex !== -1) {
                    ctx.fillStyle = colors[colorIndex % colors.length];
                } else {
                    ctx.fillStyle = 'black';
                }
                ctx.fillText(number, xPos, yPos);
            }
        }
    }
    drawGrid();
</script>
        {{ endif }}

{{ endblock }}