{% 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>Game {{game_number}} of 10</h1>




    <div class="center vspace2">

        <script>

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

                            if ( {{my_page_timeout_seconds}} != 300 ){

                                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';
                                }
                            }

                            if ( {{my_page_timeout_seconds}} == 300 ){
                                document.querySelector('#deductiontimer_known').textContent = "No Time Limit";
                                document.querySelector('#deductiontimer_known').style.fontSize = "100%";
                            }
                    });
            })

        </script>



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

                {% if question_chosen == 34 %}
                <br> <br> <br> <br> <br> <br>
                {% endif  %}



                {% if question_chosen < 34 %}
                <div> <br> <br> <p  style="font-size: 20px; color: black; font-weight: bold;text-align:center;"> Payoff: </p>  <p  style="font-size: 40px; color: black; font-weight: bold;text-align:center;"> &euro;{{payoff1|floatformat:2}} </p> </div>
                {% endif  %}

                <br> <br> <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"   />

       {{ form.errors }}

        <br>

    </div>
{% endblock %}


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



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


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




       //$('.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>

{% endblock %}