{% extends "global/Page.html" %}
{{ block of styles }}
<link rel="stylesheet" type="text/css" href="{{ static 'global/real_effort.css' }}"/>
{{ endblock }}
{% block content %}
<div class="container">
<p>{{progresbar}}/{{ pocet_opakovani }}</p>
<br>
 <h2>Opakujte řetězec níže:</h2>
        <img class="positioning" src="/static/imgs/bt{{id}}.png">

        <p style="display: none;" id="random-string" >{{ original }}</p>
        <input class="input-field" type="text" id="input-string">
        <button type="button" onclick="checkString()" >Odeslat</button>
        <p id="result"></p>
</div>

{% endblock %}

{% block scripts %}

<script>

        function checkString() {
            var input = document.getElementById("input-string").value;
            var str = document.getElementById("random-string").innerHTML;

            if (input === str) {
                document.getElementById("result").innerHTML = "Správně!";
                liveSend({'t':'answer','answer':"xd" })



            } else {
                document.getElementById("result").innerHTML = "Špatně! Zkuste to znovu.";
                document.getElementById("input-string").value = "";
            }
        }
function liveRecv(data){
                    let t = data.t
                    if (t === 'Nope'){

                window.location.href = "Task.html";}
                    if (t === 'Hotovson'){
                    $('#form')[0].submit();
                    }}
</script>

{% endblock %}