{{ block title }}
    Short Survey
{{ endblock }}
{{ block content }}

<p>
    {{ formfield "FinLit1" }}
    {{ formfield "FinLit2" }}
    {{ formfield "FinLit3" }}
    {{ formfield "FinLit4" }}
    {{ formfield "FinLit5" }}
</p>
<br>
<p>
    {{ formfield "age" }}
    {{ formfield "gender" }}
    {{ formfield "statistic" }}
    {{ formfield "riskaversion" }}
    {{ formfield "investor" }}
    {{ formfield "financeprof" }}
</p>
    {{ form.comments.label }}
    Please provide an answer with at least 50 characters.
    <p>
     {{ formfield_errors 'comments' }}
        <textarea name="comments" rows="3" style="width:100%;" onpaste="return false;" oninput="handleInputChange(this);"></textarea>
    </p>
<br>
    <p>
    <!-- .otree-btn-next is the CSS/jQuery selector for this button -->
    <button class="otree-btn-next btn btn-primary disabled" id="next_button">Next</button>
    </p>
{{ endblock }}

{% block scripts %}
<script>

    function handleInputChange(input) {

        const now = performance.now();

        liveSend(now);

        if (input.value.length >= 50) {
            document.getElementById('next_button').classList.remove('disabled');
        } else {
            document.getElementById('next_button').classList.add('disabled');
        }
    }

</script>
{% endblock %}