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

{% block title %}
    Organising (level {{player.participant.lc1a}}) task
{% endblock %}



{% block content %}

<div class="instructions well well-lg">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>

    <p>
        Rearrange the given string in alphabetical order.  <br>
        The table at the bottom shows the characters in alphabetical order <br>
        For instance, the string 'a0!d' would be rearranged as '!0ad'. <br>
        There is <b>no</b> time limit.
        <br> Once you have rearranged the string, click the <b>Submit</b> button or press the <b>Enter</b> key.<br><br>
        Note: If you enter an incorrect answer, you will have to wait 5 seconds before being able to enter another answer. You may have to scroll to view the entire table.
    </p>
</div>

                <h2>Rearrange the string below into alphabetical order, then type the answer into the box and click <b>Submit</b> or hit the <b>Enter</b> Key</h2>
                <br>
                <center>
                    <canvas id="myCanvas" width="1000" height="80" style="border:1px solid #f4f5ff;background: #f4e4e3">
                            Your browser does not support the HTML5 canvas tag.</canvas>
                </center>
                <br><br>


        <img src="{{static tab_img}}" align="left"/>


    <table class="table">
            <tr>

                <th style="vertical-align:middle">
                    <br><br>
                    {% formfield player.user_text label="" %}
                    <br><br>
                </th>
                <th style="vertical-align:middle; text-align: left">
                    <br><br>
                    <div id="countdown"></div>
                    <button id="button" class="otree-btn-next btn btn-primary" onclick="return validateForm()">Submit</button>
                    <br><br>
                </th>
            </tr>

            <tr>
                <th>
                    <h2> You have {{rounds_remaining}} rounds remaining. </h2>
                </th>
                <th style="vertical-align:top; text-align: left">
                    <h2><br></h2>
                </th>

            </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 above link
                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 Helvetica";
    ctx.fillText('{{ display_text }}',60,50);

    // save img
    Canvas2Image.saveAsImage(c, 1000, 100, 'png');
</script>



{{ include 'task_encoding1a/timer_countdown.html' }}

{% endblock %}


{% block script %}

{% endblock %}