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

{% block title %}
    Transcription task {{ subsession.round_number }}/{{ Constants.num_rounds }}
{% endblock %}

{% block content %}
{% if round_number != 1 %}
<p align ="justify">{{ player.cumulative_donated_trees }} x <img src="{% static "tree/1.png" %}" width="60" height="80"/>
    </p>

<p align ="justify"> {{ player.cumulative_guthaben }} x <img src="{% static "tree/2.png" %}" width="60" height="60"/> </p>
{% endif %}
<p align="justify">
        Please solve the math task given below.
    </p>


    <img src="{% static image_path %}"/>

    <br><br>


    {% formfield player.transcribed_text label="" %}

    {% next_button %}

    {% if debug %}
        <div class="card border-warning">
            <div class="card-body">
            <h4>Explanation for researchers (shown in debug mode only)</h4>
            <p>
                You are playing in debug mode, so you can skip the manual
                transcription
                by clicking <a href="#" id="prefill">this link</a>
                and clicking "next".
            </p>

            <p>
                A subject can only advance to the next screen if the
                transcription is {{ required_accuracy }}% accurate.
            </p>
            </div>
        </div>

    {% endif %}

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        var referenceText = {{ reference_text|json }};
        $('#prefill').click(function () {
            $('#id_transcribed_text').val(referenceText);
        })
    });
</script>
{% endblock %}