{{ extends 'global/Page.html' }}

{{ block title }}
Task 6 of 12 <br>
Matrix Task{{ endblock }}

{{ block content }}

<i><br><br><strong>Please choose the two numbers below that add to 100. </strong><br><br></i>

<div class="header">Problem <span id="match">1</span></div>
<hr/>
<div class="w-70 text-right"><strong>Number of grids solved correctly: <span id="count"></span></strong> </div>


<div id="alert" class="alert alert-danger" style="display: none">Your answer is incorrect. Please try again.</div>
<p><span style="font-size: 16px;"></span></p>
<style>
body {
    font-size: 16px
}
    #test_table, #test_table th, #test_table td {
      border: 4px solid black;
      font-size: 40px;
      text-align: right;
    }
    #test_table {
        width: 80%;
        margin-left: 85px;
    }
    #test_table td:hover {
        cursor: pointer;
    }
    .selected {
        background-color: red;
    }
    .otree-timer {
        width: fit-content;
        float: right;
        margin-top: -13px;
    }
    .otree-timer p {
        margin-bottom: 0
    }
    .alert-warning {
    color: #1c1e1f;
    background-color: #f7f7f7;
    border-color: #ffffff;
    }
    .otree-title.page-header {
        font-size:30px;
    }
    .page-header {
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 40px;
    }    
    .header {
  font-size: 28px;
    }
</style>
<table id="test_table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<br>

<input type="hidden" name="r1answer" />
<button id="check_btn" type="button" class="btn btn-primary">Next</button>
{% next_button %}

<script>
    var prefix = document.URL.split('/')[4]
    $('.otree-btn-next').css('display', 'none')
    $(document).ready(function() {
        var data = [
            [11, 94, 48, 60, 6, 1, 33, 27, 29],
            [59, 39, 34, 42, 18, 58, 76, 99, 3],
            [81, 15, 85, 2, 42, 24, 50, 79, 1],
            [54, 1, 24, 83, 84, 89, 13, 11, 72],
            [98, 6, 78, 35, 94, 1, 60, 30, 87],
            [34, 63, 87, 26, 77, 46, 88, 52, 23],
            [64, 90, 96, 76, 64, 82, 4, 2, 12],
            [66, 84, 59, 24, 73, 84, 8, 41, 72],
            [76, 26, 25, 61, 11, 58, 24, 44, 93],
            [29, 27, 81, 71, 20, 47, 86, 38, 93],
            [62, 21, 28, 51, 68, 32, 50, 58, 29],
            [1, 26, 63, 37, 19, 4, 5, 55, 28],
            [93, 64, 25, 37, 61, 99, 32, 75, 26],
            [68, 56, 75, 37, 59, 76, 82, 51, 25],
            [81, 64, 21, 49, 97, 54, 37, 19, 30],
            [94, 28, 47, 29, 75, 92, 42, 43, 25],
            [50, 69, 61, 80, 81, 44, 31, 60, 14],
            [63, 26, 83, 88, 96, 29, 73, 12, 25],
            [41, 89, 87, 1, 80, 11, 85, 21, 36],
            [6, 92, 1, 90, 84, 32, 94, 21, 60],
            [49, 96, 99, 4, 64, 46, 72, 20, 93],
            [12, 88, 74, 43, 10, 37, 80, 43, 28],
            [65, 64, 95, 92, 10, 55, 69, 90, 28],
            [98, 32, 96, 22, 40, 78, 80, 39, 31],
            [37, 12, 81, 14, 15, 6, 66, 34, 90],
            [67, 82, 35, 55, 65, 14, 13, 50, 22],
            [21, 66, 36, 26, 8, 46, 89, 66, 74],
            [12, 10, 56, 27, 43, 3, 51, 10, 73],
            [64, 41, 63, 34, 77, 51, 87, 49, 42],
            [63, 8, 20, 35, 56, 68, 14, 80, 11],
            [27, 17, 83, 86, 13, 38, 52, 52, 40],
            [32, 96, 26, 78, 91, 97, 88, 82, 68],
            [30, 89, 60, 3, 29, 76, 28, 26, 74],
            [60, 86, 72, 90, 21, 18, 84, 85, 10],
            [31, 60, 40, 77, 85, 37, 58, 37, 77],
            [31, 40, 75, 49, 47, 82, 18, 97, 76],
            [54, 39, 53, 60, 9, 89, 84, 16, 43],
            [27, 19, 44, 42, 11, 19, 79, 16, 58],
            [29, 60, 70, 50, 69, 56, 63, 44, 88],
            [20, 2, 76, 18, 46, 95, 34, 42, 82],
            [10, 49, 17, 22, 73, 11, 27, 40, 65],
            [84, 14, 51, 42, 52, 77, 38, 86, 43],
            [72, 12, 4, 26, 94, 87, 20, 35, 74],
            [9, 85, 64, 24, 79, 86, 91, 3, 20],
            [23, 62, 36, 5, 1, 44, 48, 95, 10],
            [72, 1, 33, 48, 37, 31, 23, 41, 63],
            [72, 46, 24, 15, 91, 28, 81, 89, 38],
            [92, 21, 19, 66, 77, 21, 51, 49, 91],
            [91, 91, 32, 54, 8, 46, 37, 61, 71],
            [82, 36, 64, 25, 25, 19, 14, 71, 60],
            ]
        localStorage.setItem(prefix + 'match_1', 0)
        var sum = 0, count = 0, match = 0
        arrange()
        $(document).on('click', 'td', function(e){
            var value = $(this).data('value')
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected')
                sum -= value
                count--
            } else {
                $(this).addClass('selected')
                sum += value
                count++
            }
        })
        $(document).on('click', '#check_btn', function(e){
            if (count == 2 && sum == 100) {
                match++
                $('#match').html(match % 50 + 1)
                $('#round').html(Math.floor(match / 50) + 1)
                $('#alert').css('display', 'none')
                localStorage.setItem(prefix + 'match_1', match)
                liveSend(match)
                $('#count').html(match)
                $('input:hidden').val(match)
                localStorage.setItem(prefix + 'round_1', match)
                arrange()
                if (match == data.length) $('.otree-btn-next').click()
            } else {
                $('#alert').css('display', 'block')
            }
            count = 0
            sum = 0
            $('#test_table').find('.selected').removeClass('selected')
        })
        function arrange() {
            if (data[match] && data[match].length) {
                setArrange()
            } else {
              $('.otree-btn-next').click()
            }
        }
        function setArrange() {
            var rows = $('#test_table').find('td')
            for (var i = 0; i < rows.length; i++) {
                var value = rand(100)
                if (data[match][i]) {
                    value = data[match][i]
                }
                $(rows[i]).data('value', value)
                $(rows[i]).html(value)
            }
        }
        function randArrange() {
            var first_row = rand(16)
            var second_row = rand(16)
            while(first_row == second_row) {
                second_row = rand(16)
            }
            if (first_row > second_row) {
                var data = second_row
                second_row = first_row
                first_row = data
            }
            var rows = $('#test_table').find('td')
            var a = 0
            for (var i = 0; i < rows.length; i++) {
                var value = rand(100)
                if (i == first_row) {
                    a = value
                    $(rows[i]).data('value', a)
                    $(rows[i]).html(a)
                } else if (i == second_row) {
                    $(rows[i]).data('value', 100 - a)
                    $(rows[i]).html(100 - a)
                } else {
                    $(rows[i]).data('value', value)
                    $(rows[i]).html(value)
                }
            }
        }
        function rand(value) {
            return Math.floor(Math.random() * value)
        }
    })







</script>

{{ endblock }}