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

{% block title %}
    Task 
{% endblock %}



{% block content %}
 
     <p>
                <center><h2>Type the text below into the box and click <b>Next</b> <br>or hit the <b>Enter Key</b><h2></center>
                <br>
                <center>
                    <canvas id="myCanvas" width="200" height="80" style="border:1px solid #f4f5ff;background: #f4e4e3">
                            Your browser does not support the HTML5 canvas tag.</canvas>
                </center>
                <br><br>
    </p>



    <table class="table">
            <tr>
            <h3>
                <th style="vertical-align:middle">
                    <br><br>
                    {% formfield player.user_text with label="" %}
                    <br><br>
                </th>
                <th style="vertical-align:middle; text-align: left">
                    <br><br>
                    {% next_button %}
                    <br><br            
                </th>
            </tr>

            <tr>
                <th>
                    <h2>{% autoescape off %}  {{correct_last_round}}   {% endautoescape %}
                    <h2> Number of correct words: {{ round_count }}
                    <h2> Points earned: {{ total_payoff }}
                </th>
                <th style="vertical-align:top; text-align: left">
                    <h2><br></h2>
                </th>
            </h3>    
            </tr>


        </table>

    {% if debug %}

        <div class="panel panel-success">
            <div class="panel-heading">

            <h4><br>Cheater Mode Activated (Debug Mode Only)  - <a href="#" id="prefill">Click Here to Autofill Text</a></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>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('a#prefill').click(function () {
                    $('#id_user_text').val('{{ player.correct_text }}');
                    $('#id_user_text').focus();

                })
            });
        </script>
    {% endif %}


<script>
    $(document).ready(function () {
        $('#id_user_text').focus();
    });
</script>
<!-- Text to png Image -->
<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Courier";
    ctx.fillText('{{ player.correct_text }}',60,50);

    // save img
    Canvas2Image.saveAsImage(c, 300, 100, 'png');
</script>
{% endblock %}


{% block script %}

{% endblock %}