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

{% block title %}Deine Zahl{% endblock %}

{% block content %}
<div class="debug" style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
    Debug-ID:<br>
    {{player.vp_helpCode}}
</div>
Runde {{group.round_number}}:
<div class="form-group required">       
<label class="col-form-label" for="id_guess">Bitte geben Sie nun die Zahl zwischen 0 und 100 an, für die Sie entschieden haben:</label>
    <div class="controls  field-guess">
    <input type="number" name="guess" value="" step="any" min="0" max="100" id="id_guess" class="form-control" required>
    </div>  
</div>
<button class="otree-btn-next btn btn-primary next-button otree-next-button">Weiter</button>

{% endblock %}
{% block app_styles %}
<style>
    .debug{
        margin: 5px 10px;
    }
    br {
        display: block;
        margin: 5px 0;
        }
    body {
        font-size: 1rem;
        font-weight: 370;
        line-height: 1.3;
    }
    .form-control{
        width: 100px
    }
</style>
{% endblock %}