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

{% block title %}
    Counting task -
    {% if placement %}
    placement
    {% else %}
    round {{ round }}
    {% endif %}
{% endblock %}

{% block content %}

    <div>Placement Score: {{ placement_score }}</div>

    <!--The next line adds the task specific content, getting the file name through the get_or_create_task function.-->
    <div class="task-container">{{ player.get_or_create_task.html_body|safe }}</div>
    <div>Your answer is:</div>
    <input type="text" id="answer" class="offer" style="background-color: white" required>
    <button class="answer btn btn-outline-dark" type="button" data-feedback="false">Answer</button>

    <p> Tasks attempted so far: <span id="num_tasks_total">{{ player.num_tasks_total }}</span></p>
    <p> Tasks correct so far: <span id="num_tasks_correct"> {{ player.num_tasks_correct }}</span></p>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });


        });
    </script>
    {% include 'includes/js_work_page.html' %}
{% endblock %}
{% block styles %}
    <style type="text/css">
        .otree-title {
            background-color: steelblue;
            color: white;
            margin: 10px 0 10px 0;
            padding: 20px;
        }

        .otree-timer {
            background: lightsteelblue;
            color: white;
            border-color: white;
        }

        .otree-body {
            text-indent: each-line;
        }

        .box-heading {
            background-color: steelblue;
            color: white;
            margin: 10px 10px 10px 10px;
            padding: 10px 10px 10px 24px;
        }

        .table-style {
            color: black;
            margin: 10px 10px 10px 10px;
        }

        .table-borders {
            border: solid;
            border: steelblue;
            background-color: #ecf2f9;
            align-content: center;

        }

        .offer {
            background-color: whitesmoke;
            color: navy;
            padding: 1px 10px 1px 10px;
            border: groove;
            border-color: lightsteelblue;
            font-weight: bold;
            margin: 1px;
        }

        .otree-btn-next {
            background-color: steelblue;
            color: white;
            padding: 5px 10px 5px 10px;

        }

        h2, h3, h4, h5, h6 {
            font-weight: bolder;
            color: #24435c;
        }

    </style>
{% endblock %}