{% 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", 4, 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 < 6; 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" +
                " your first work period by clicking the Next button below.")

    //confirmation//}
 }


 window.onload = function(){
    //
    countdown("countdown2", 4, 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 %}
    Task Practice:
{% endblock %}

{% block content %}


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

    </STYLE>
    <hr>
    <p>
        You may practice the same decoding task you will complete in each work period. The instructions provided below will also be provided in each work
        period, for your reference. When you have finished your practice, please proceed to your first work period.
    </p>
    <hr>

    <p>
        Below you will find letter strings, which can be decoded to numbers using the key provided. Enter the number string into the box next to
        each letter string. Do NOT enter spaces between digits. For example, the string “ABCDE” should be decoded into 7351118. *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>...</td><td></td></tr>
        <tr><td colspan="2">...75 strings will be available in work periods.</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>
    <table width="5%" border="1" cellspacing="2" cellpadding="2" bgcolor="FFDDD8">
    <tbody>
        <tr bgcolor="FFDDD8">
            <td align="center"><div class = "timer" id="countdown2"></div></td>
        </tr>
    </tbody>
    </table>
    <img src="{% static "bsw3/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 your first work period.
    </p>

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

{% endblock %}