{% 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 {
            font-weight: bold;
            background-color: White;
            text-align: center;
            border-style:none;
            border-color: coral;
            border-width: thin;
            font-size:30px;
            color: orangered;
            display: none;
        }
    h1 {text-align: center; font-size: 35px;}

    </style>
{% endblock %}


{% block content %}

<h1>Practice Game {{roundnumber}}</h1>

<script language="javascript">

    <div class="center vspace2">

        <script>

        $(function deductiontimer() {
                var seconds, minutes;
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    seconds = event.offset.totalSeconds%60;
                    minutes = Math.floor(event.offset.totalSeconds/60);
                    seconds = seconds < 10 ? "0" + seconds : seconds;
                    document.querySelector('#deductiontimer').textContent = minutes + ":" + seconds;

                    if ((event.offset.totalSeconds%10) == 1 || (event.offset.totalSeconds%10) == 2 ||
                        (event.offset.totalSeconds%10) == 3 ) {

                        document.querySelector('#deductiontimer').style.backgroundColor = 'orangered';
                    }
                    else {
                        document.querySelector('#deductiontimer').style.backgroundColor = 'white';
                    }

                });
            })

        </script>





        <div class="row">

                    <div class="column">

                    </div>

                    <div  class="column" >

                        <!--<div> <br> <br> <p style="font-size:20px; color: black;  margin-Left:35px;
                            text-align:center;">  <span id="deductiontimer"  style="color:black;
                            font-weight: bold;  text-align:center; font-size: 50px"> </span>  </p> </div> -->
                        <br> <br>
                        <table class="adding_numbers" id="game_table">

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

                    <p id="demo"></p>

                    <div class="column" style="text-align: center">

                        <!--
                        <div> <p  style="font-size: 20px; color: black; font-weight: bold;text-align:center;"> Payoff: </p>  <p  style="font-size: 50px; color: black; font-weight: bold;text-align:center;"> &euro; 10 </p> </div>
                        -->
                        <br> <br> <br>

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

                        <br> <p id="abc" style="font-size: 10px; color: white; "></p>

                        <br> <br> {% next_button %} <br>

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


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

       {{ form.errors }}

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

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


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

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

                        else {
                            correct_answer = 0;
                        }

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


        document.getElementById('id_correct').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 %}