{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Counting task
{% endblock %}

{% block content %}
    <div>What is the difference between 100 and the number below?</div>
    <h1 class="question"></h1>
    <div class="form-row align-items-center">
        <input type="number" id="answer" class="form-control">
        <button class="answer btn btn-success" type="button">Answer</button>
    </div>

{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
            var ws_path = ws_scheme + '://' + window.location.host + "/tasktracker";
            var socket = new ReconnectingWebSocket(ws_path);
            socket.onmessage = function (event) {
                var obj = jQuery.parseJSON(event.data);
                $('h1.question').html(obj);
            };
            $("button.answer").on("click", function () {
                var msg = $('input#answer').val();
                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(msg);
                };
                $("input#answer").val('');
            });
        });
    </script>
{% endblock %}