{% 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:fixed;
        margin-left:425px;

        display:block;
    }

</STYLE>
    {% endblock %}

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

 var sec = 0;

 var timer = setInterval(function () {
     document.getElementById("work_time_1").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("Your time has expired and your work will be automatically submitted.");
            checkwork(1);

        } 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 < 5; 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["num_attempted_1"].value = num_attempted;
            document.getElementById("form").elements["num_decoded_1"].value = num_correct;

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


    //confirmation//}
 }


 window.onload = function(){
    countdown("countdown2", 2, 0);
     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!';
}
 </script>

{% endblock %}

{% block title %}
    Work Period: #1 of 5
{% endblock %}

{% block content %}


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

    </STYLE>
    <hr>
    <p>
        Before making your first project selection, please complete the following decoding task. You will have up to two minutes to
        complete this task, but may submit your work as soon as you are finished.
    </p>
    <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. When your time
        expires, your work will automatically be submitted. *Note: When typing, you may use your “Tab” key to advance to the next box.
    </p>
    <br>

    <hr>

    <div id="scwork">
    <div id="timework">
    <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 "project_selection/key.jpg" %}"/><br><br>

    </div>
    <table class="stringresult" width="50%" border="1">
    {% for DecodeStrings in decode_strings %}
         <tr>
             <td>{{ DecodeStrings.letters }}</td>
             <td><input type="text" name="ent{{ forloop.counter }}" value=""></td>
         </tr>
    {% endfor %}
    </table>
    </div>




    <input type="hidden" name="num_attempted_1" value="">
    <input type="hidden" name="num_decoded_1" value="">
    <input type="hidden" id="work_time_1" name="work_time_1">
    <br><br>

    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Submit</button>

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



    <br>


{% endblock %}