{% extends "global/Page.html" %}
{% load otree static %}

{% block head_title %}

        Study

{% endblock %}


{% block styles %}
    <style type="text/css">



        * {
          box-sizing: border-box;
        }

        table.adding_numbers {
            width: 300px;
            height: 300px;
            text-align: center;
            color: black;
            background-color: white;
            background-size: 100%;
            font-size: 2em;
            border-color: black;
            margin-left: auto;
            margin-right: auto;

        }

        .adding_numbers td {
            width: 100px;
            height: 100px;
            border-color: white;
            border:2px solid black;
            background-color: white;
            cursor: pointer;
        }

        .vspace {
            margin-top: 1em;
        }

        .center {
            text-align: center;
        }

        * {
          box-sizing: border-box;
        }

        .column {
          float: none;
          width: 33.33%;
          padding: 20px;
        }

        .row::after {
          content: "";
          clear: both;
          display: table;
        }

        .vspace {
            margin-top: 1em;
        }

        .center {
            text-align: center;
        }


        .otree-timer {
            display: none;
        }

    h1 {text-align: center; font-size: 35px;}

    </style>
{% endblock %}


{% block content %}

<h1>Practice Game 2</h1>





    <div class="center vspace2">

        <script>

            $(function deductiontimer_known() {
                    var seconds, minutes;
                    $('.otree-timer__time-left').on('update.countdown', function (event) {

                        ticksToSecond = event.offset.totalSeconds/2;
                        seconds = event.offset.totalSeconds%60;
                        minutes = Math.floor(event.offset.totalSeconds/60);
                        seconds = seconds < 10 ? "0" + seconds : seconds;
                        document.querySelector('#deductiontimer_known').textContent = minutes + ":" + seconds;
                        //document.querySelector('#deductiontimer_known').style.fontSize = "200%";

                        //if (ticksToSecond % 1 == 0) {
                        //    document.querySelector('#deductiontimer_known').style.backgroundColor = 'orangered';
                        //}
                        //else {
                        //    document.querySelector('#deductiontimer_known').style.backgroundColor = 'white';
                        //}
                    });
            })

        </script>



        <div class="row">

            <div class="column">
            </div>

            <div class="column">


                <table class="adding_numbers" id="game_table">
                      <br>
                      <tr>
                        <td id="pos1">{{n.1}}</td>
                        <td id="pos2">{{n.2}}</td>
                        <td id="pos3">{{n.3}}</td>
                      </tr>
                      <tr>
                        <td id="pos4">{{n.4}}</td>
                        <td id="pos5">{{n.5}}</td>
                        <td id="pos6">{{n.6}}</td>
                      </tr>
                      <tr>
                        <td id="pos7">{{n.7}}</td>
                        <td id="pos8">{{n.8}}</td>
                        <td id="pos9">{{n.9}}</td>
                      </tr>
                </table>
            </div>


            <div class="column">

                <br> <br>

                <div> <p  style="font-size: 20px; color: black; font-weight: bold;text-align:center;"> Target Number: </p>  <p  style="font-size: 40px; color: black; font-weight: bold;text-align:center;"> {{n.0}} </p> </div>

                <div> <br> <br> <p style="font-size:20px; color: black; text-align:center;">
                                <span id="deductiontimer_known" style="color:black; font-weight: bold; text-align:center; font-size: 40px"> </span>  </p> </div>

                <br> <p id="abc" style="color: white;"></p>

                <!--
                <br> {% next_button %}
                -->

            </div>
        </div>

        <input type="hidden"   name="correct_adding2"          id="id_correct_adding" />


        <br>
    </div>
{% endblock %}


{% block scripts %}
    <script type="text/javascript">

        var checkkk = 0;

        class AddNumbers {
            constructor(table_id) {
                this.table = document.getElementById(table_id);
            }
        }

        let sg = new AddNumbers('game_table');


        //Game board:
        var i = [];
        for (var j = 1; j <10; j++) {
                i[j-1] = document.getElementById('pos' + j);
        }


        var sum_of_candidates = 0;
        var total_Red = 0;
        var correct_answer = -1;

        i.forEach(function(a){
                a.addEventListener("click", function() {

                        a.clicks=(a.clicks || 1) + 1;

                        if (a.clicks%2 == 1 && a.style.backgroundColor=="forestgreen") {
                            a.style.backgroundColor="white";
                            total_Red=total_Red-1;
                            sum_of_candidates =sum_of_candidates - parseInt(a.innerHTML);
                        }

                        if (a.clicks%2 == 0 && total_Red<2) {
                            a.style.backgroundColor="forestgreen";
                            total_Red=total_Red+1;
                            sum_of_candidates =sum_of_candidates + parseInt(a.innerHTML);
                        }




                        if (sum_of_candidates == {{n.0}}) {
                            correct_answer = 1;
                            setTimeout(
                                    function() {
                                        document.querySelector("form").submit();
                                    },
                                100);
                        }

                        else if (sum_of_candidates == 0) {
                            correct_answer = -1;
                        }

                        else {
                            correct_answer = 0;
                        }

                document.getElementById('id_correct_adding').value = correct_answer;
                });
        });


        document.getElementById('id_correct_adding').value = correct_answer;



        // Disable right click on web page
        $("html").on("contextmenu",function(e){
            return false;
        });
        // Disable cut, copy and paste on web page
        $('html').bind('cut copy paste', function (e) {
             e.preventDefault();
        });



       //$('.otree-btn-next').hide();

    </script>
{% endblock %}