{{block title}}
Practice the Task
{{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 %}
<p>Find and click the two numbers that sum up to the number shown on the right. </p>

<h1>Game {{ game_number }} of 3</h1>

<div class="row">

            <div class="column">

            </div>

            <div class="column">

                <div> <br> <br> <p style="font-size:50px; color: black;  margin-Left:35px;
                    text-align:center;">  <span id="deductiontimer_known"  style="color:black;
                    font-weight: bold;  text-align:center; font-size: 100px"> </span>  </p> </div>

                <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> <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>

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

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



        <p id="message"></p>


        <input type="hidden"   name="correct"                          id="id_correct"   />




        <br>

    </div>

<input type="hidden"   name="timeSpent"                          id="id_timeSpent"   />
<input type="hidden"   name="Total_timeSpent"                          id="id_Total_timeSpent"   />
<input type="hidden"   name="cumul"                          id="id_cumul"   />


{% endblock %}


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



        var checkkk = 0;
        var sum_of_candidates = 0;
        var total_Red = 0;
        var correct_answer = 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);
        }




        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}}){
                        //    document.getElementById('abc').innerHTML = "Good job!" ;
                       // }

                        //else {
                        //    document.getElementById('abc').innerHTML = sum_of_candidates;
                        //}

                        if (sum_of_candidates == {{n.0}}) {
                            correct_answer = 1;
                        }

                        else {
                            correct_answer = 0;
                        }


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

        });



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




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

    </script>


    <script type="text/javascript">
        // 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();
        });
    </script>
    <script type="text/javascript">
        var pageTimeElapsed = 0;
        var pageTimerID = -1;

        function pageTick(){
            pageTimeElapsed++
            document.getElementById("id_timeSpent").value = pageTimeElapsed;

        }
        window.onload = function (){
            if(pageTimerID === -1){
                pageTimerID = setInterval(pageTick,1000);
            }
        };
    </script>
{{endblock}}