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

{% block styles %}
<STYLE TYPE="text/css">
    .indented { padding-left: 50pt; padding-right: 50pt; } -->
    .timer {
        color: #1B232F; !important;
        font-family: Verdana, Arial, sans-serif;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }
    .stringresult {
        font-family: Calibri, Arial sans-serif;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
        vertical-align: middle;
        line-height:30px;

    }
    td {
        vertical-align: top; !important;
        line-height:30px; !important;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
    }

#scwork
    {
        width:50%;
        position:relative;
        overflow:auto;

    }

#timework
    {
        position:relative;


        display:block;
    }

</STYLE>
    {% endblock %}

{% block scripts %}
<script language="JavaScript">

    //Set local storage for wait time variable
    localStorage.setItem('wtime', 0);

    //Store time they spent on practice page, just in case
    var sec = 0;
    var timer = setInterval(function () {
    document.getElementById("practice_time").value = ((sec+=100)/1000);}, 100);

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            //element.innerHTML = "Time has expired.";
            //alert("If this was a work period, your time would have expired and your work would be automatically submitted.");
            //checkwork(1);
            countdown("countdown2", 2, 0);
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

 function checkwork(autosubmit){
    /*if (autosubmit == 0) {
        if (confirm("Are you sure you wish to submit your work?") == true) {
            var num_correct = 0;
            var num_attempted = 0;

            for (var i = 1; i < 11; i++) {
                var solution = document.getElementById("form").elements["sol" + i].value;
                if (document.getElementById("form").elements["ent" + i].value != "") {
                    if (document.getElementById("form").elements["ent" + i].value == solution) {
                        num_correct++;
                        num_attempted++;
                    } else {
                        num_attempted++;
                    }
                }
            }

            document.getElementById("form").elements["init_attempted"].value = num_attempted;
            document.getElementById("form").elements["init_decoded"].value = num_correct;

            var timerem = String(document.getElementById("countdown2").innerHTML);

            document.getElementById("form").elements["minutes_remaining"].value = timerem.substr(0, timerem.indexOf(":"));
            document.getElementById("form").elements["seconds_remaining"].value = timerem.substr(timerem.indexOf(":") + 1, timerem.length);

            document.getElementById("form").submit();

        } else {

        }
    } else {*/
            window.onbeforeunload = null;
            var num_correct = 0;
            var num_attempted = 0;

            for (var i = 1; i < 11; i++) {
                var solution = document.getElementById("form").elements["sol" + i].value;
                if (document.getElementById("form").elements["ent" + i].value != "") {
                    if (document.getElementById("form").elements["ent" + i].value == solution) {
                        num_correct++;
                        num_attempted++;
                    } else {
                        num_attempted++;
                    }
                }
            }

            alert("Of the " + num_attempted + " strings you decoded, " + num_correct + " were decoded correctly. You may try again or continue to" +
                " the first period by clicking the Next button below.")

    //confirmation//}
 }


 window.onload = function(){
    //
    countdown("countdown2", 2, 0);
    document.getElementById("form").elements["ent1"].focus();
     //Don't want to set focus in the example page....   document.getElementById("form").elements["ent1"].focus();
}
 window.onbeforeunload = function() {
    return 'Please do not use your browser -back- or -refresh- functions. You may lose your work!';
}

function nextp() {
    window.onbeforeunload = null;
    document.getElementById("form").submit();
}
 </script>

{% endblock %}

{% block title %}
    Instructions and Practice
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}

    </STYLE>
    <hr>
    <p>
        In each of two 2-minute "periods," you will be completing a letter-number decoding task. Please try to complete as much decoding as you can during each 2-minute period.
        A timer will be provided so that you know how much time remains in the period. You do not need to "submit" your work. When time expires in the period, you will be automatically advanced.
    </p>
    <p>
        To briefly become familiar with this task before starting, you may practice it below. The instructions provided below will also be provided in each period, for your reference. When you have finished your practice, please proceed to the first
        period.
    </p>
    <hr>

    <p>
        Below you will find letters, which can be decoded to numbers using the key provided. In the box next to each letter, enter the number that equates to that letter in the
        key. For example, each time the letter "A" appears, you would enter the number 7 into the box next to the letter "A." *Note: When typing, you may use your “Tab” key to advance to the next box.
    </p>
    <br>

    <table width="100%" border="0">
    <tr>
    <td>
    <table class="stringresult" border="1">
    {% for DecodeStrings in decode_strings %}
         <tr>
             <td>{{ DecodeStrings.letters }}</td>
             <td><input type="text" name="ent{{ forloop.counter }}" value=""></td>
         </tr>
    {% endfor %}
        <tr><td>...</td><td></td></tr>
        <tr><td colspan="2">...more letters to decode will be available in each period.</td></tr>
    </table>
    <br><br><button type="button" class="btn btn-primary" onclick="checkwork(0)">Check Work</button> (Note: Check Work will not appear in work periods.)
    </td>
    <td>

    <img src="{% static "decoding_task/key.jpg" %}"/><br><br>

    </td>
    </tr>
    </table>


    <input type="hidden" id="practice_time" name="practice_time">

    {% for DecodeStrings in decode_strings %}
         <input type="hidden" id="soltext{{ forloop.counter }}" name="sol{{ forloop.counter }}" value="{{ DecodeStrings.numbers }}">
    {% endfor %}


    <p><br></p>
    <hr>
    <p>
        Please click "Next" to continue when ready to begin the first 2-minute period.
    </p>

    <button type="button" class="btn btn-primary" onclick="nextp()">Next</button>

{% endblock %}