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

{% block title %}
    Los geht's!
{% endblock %}


{% block content %}

<style>
    body {
    font: normal 1.25em Candara, sans-serif;
    }

    .otree-body {
        max-width:1100px
    }

    .div1 {
        width: 1070px;
        padding: 20px;
        background-color: aliceblue;
        background-color: #eefbf4;
    }

    .div2 {
        width: 1100px;
        padding: 20px;
        height: 25px;
    }

    h1 {
        font-size: 150%;
        margin-bottom: 20px
    }

    calc {
        font-size: 150%;
    }

    h3 {
        font-size: 125%;
    }

    .tab { margin-left: 50px; }


    .otree-btn-next {

        float: right;
    }

</style>


<p> Lösen Sie so viele Aufgaben wie möglich! Bestätigen Sie Ihre Antworten mit <b>Enter</b> oder <b>Bestätigen</b>. </p>

<p> Bisher korrekt gelöste Aufgaben: <b><span id="live_score"></b></p>

<div class="div1">

    <calc> <span id="number_1"></span> + <span id="number_2"></span> + <span id="number_3"></span> + <span id="number_4"></span> + <span id="number_5"></span> = <input id="answer" class="inline" type="number" value="Lösung">     <input id="button" type="button" value="Bestätigen" onclick="check()"> </input></calc>
        <p> <input type="hidden" name="score" id="id_score"/> </p>

     <p> <span style="color:red"><span id="message"></span></span></p>
</div>

<script>

    window.onbeforeunload = function() {
        sessionStorage.setItem("live_score", String(live_score));
    };

    window.onload = function() {

};


    var live_score = 0;
    var help_score = sessionStorage.getItem("live_score");
    if (help_score !== null) {
        live_score = parseInt(help_score);
    }

    var numbers = [3, 1, 6, 7, 4, 1, 2, 5, 6, 1, 6, 1, 1, 5, 1, 1, 2, 2, 4, 1, 3, 8, 4, 4, 4, 2, 4, 2, 3, 7, 4, 1, 6, 5, 4, 1, 3,
     3, 6, 1, 5, 2, 3, 5, 6, 2, 1, 1, 6, 5, 6, 8, 1, 6, 8, 2, 2, 3, 7, 2, 7, 4, 2, 7, 3, 2, 3, 5, 8, 2, 5, 7, 3, 1,
     6, 4, 8, 1, 3, 5, 3, 8, 5, 3,2,5,4,1,4,7,3,5,1,4,4,4,2,2,1,2,3,7,4,8,1,8,2,5,6,5,5
    ,1,2,1,8,8,7,1,4,3,3,6,8,7,1,7,1,1,6,4,7,2,5,6,8,8,8,4,1,6,3,4,2,2,8,5,8,7
    ,5,3,8,5,8,8,7,3,6,7,6,5,3,8,5,3,7,7,2,4,4,5,6,3,2,1,6,3,7,4,7,6,8,6,8,7,4
    ,3,6,8,8,7,5,1,4,1,5,3,5,4,2,4,3,4,6,3,1,3,3,6,4,3,5,6,2,4,4,6,2,5,5,5,6,4
    ,1,1,5,6,7,6,6,3,2,3,3,4,6,8,7,4,7,3,1,8,8,5,7,6,8,8,6,7,6,6,4,8,3,4,3,4,5
    ,4,8,8,6,3,8,5,7,3,6,4,7,6,6,8,2,3,6,5,3,8,5,6,4,1,3,6,8,4,5,8,3,2,3,7,1,6
    ,4,6,7,4,7,6,2,5,5,8,7,2,6,1,8,6,4,6,4,8,2,4,4,6,4,6,1,4,7,3,2,6,8,5,5,2,1
    ,2,2,8,1,6,4,5,7,6,3,6,6,2,2,2,1,4,4,1,3,8,8,6,3,6,3,8,8,2,5,1,4,7,7,7,8,5
    ,6,6,8,8,1,3,8,8,6,8,3,3,4,8,1,8,5,2,4,3,1,4,1,1,1,4,6,1,5,2,7,2,5,4,6,1,8
    ,5,3,7,7,1,6,8,8,6,2,5,6,2,6,8,6,2,5,1,1,6,3,3,6,4,4,7,7,8,4,4,3,8,7,2,3,4
    ,8,4,3,2,5,8,4,7,5,1,6,6,6,2,1,4,5,7,1,5,3,2,4,2,1,2,3,6,7,5,6,6,4,4,5,3,5
    ,7,8,4,4,1,2,7,8,1,5,3,4,3,4,2,2,5,3,6,3,7,5,8,1,4,3,7,4,9,3,6,1,4,6,6,8,3,6,4,9,2,6,7,2,4,
    3,6,1,1,2,7,3,8,4,6,2,3,7,8,3,7,1,3,5,9,2,5,7,3,1,8,4,7,1,6,2,3,4,9,1,7,4,2,6,8,6,6,4,5,3,7,1,2,6,4,3,6,
    2,5,8,2,3,5,6,3,8,4,2,9,1,6,3,8,2,7,4,2,6,3,2,4,1,5,6,1,5,9,2,8,7,3,7,2,6,3,8,5,2,1,6,9,2,6,5];


    var index = 5 * live_score;



    var number_1 = numbers[index];
    var number_2 = numbers[index+1];
    var number_3 = numbers[index+2];
    var number_4 = numbers[index+3];
    var number_5 = numbers[index+4];



    document.getElementById("number_1").innerHTML = number_1;
    document.getElementById("number_2").innerHTML = number_2;
    document.getElementById("number_3").innerHTML = number_3;
    document.getElementById("number_4").innerHTML = number_4;
    document.getElementById("number_5").innerHTML = number_5;

    document.getElementById("live_score").innerHTML = live_score;

    document.getElementById('id_score').value = live_score;





    function dontGo(event) {
    event.preventDefault();
    };

    document.getElementById("button").addEventListener("click",dontGo);

    function check() {
        if(document.getElementById("answer").value == number_1 + number_2 + number_3 + number_4 + number_5) {

            live_score = live_score + 1;

            index = index + 5;

            number_1 = numbers[index];
            number_2 = numbers[index+1];
            number_3 = numbers[index+2];
            number_4 = numbers[index+3];
            number_5 = numbers[index+4];

            document.getElementById("number_1").innerHTML = number_1;
            document.getElementById("number_2").innerHTML = number_2;
            document.getElementById("number_3").innerHTML = number_3;
            document.getElementById("number_4").innerHTML = number_4;
            document.getElementById("number_5").innerHTML = number_5;

            document.getElementById("live_score").innerHTML = live_score;
            document.getElementById('id_score').value = live_score;

            document.getElementById('answer').value = '';
            document.getElementById("message").innerHTML = "";

            liveSend({"live_score": live_score});



        }

        else {
            document.getElementById("message").innerHTML = "Das Ergebnis ist falsch!";
        };
    };


    $('form input').keydown(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        document.getElementById("button").click();




        }





});












</script>

{% endblock %}